From d2b046bf6da0d381c72cbd6f5d2206062d2c3f3a Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Sun, 24 Nov 2024 20:30:25 +0900
Subject: [PATCH 01/11] =?UTF-8?q?[fix]=20OutlinePrimaryButton=E3=81=AE?=
 =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/OutlinePrimaryButton/OutlinePrimaryButton.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/view/next-project/src/components/common/OutlinePrimaryButton/OutlinePrimaryButton.tsx b/view/next-project/src/components/common/OutlinePrimaryButton/OutlinePrimaryButton.tsx
index d689032b1..c52294bb7 100644
--- a/view/next-project/src/components/common/OutlinePrimaryButton/OutlinePrimaryButton.tsx
+++ b/view/next-project/src/components/common/OutlinePrimaryButton/OutlinePrimaryButton.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 function PrimaryButton(props: Props): JSX.Element {
   const className =
-    'px-4 py-2 text-primary-1 font-bold text-md rounded-lg bg-white-0 border border-primary-1 hover:bg-white-100 hover:text-primary-2 hover:border-primary-2' +
+    'flex justify-center px-4 py-2 text-primary-1 font-bold text-md rounded-lg bg-white-0 border border-primary-1 hover:bg-white-100 hover:text-primary-2 hover:border-primary-2' +
     (props.className ? ` ${props.className}` : '');
   return (
     <button className={clsx(className)} onClick={props.onClick}>

From 24af0b95caffe2da57a8581520ee077e98b2aa02 Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Sun, 24 Nov 2024 20:30:43 +0900
Subject: [PATCH 02/11] =?UTF-8?q?[feat]=20nav=E3=83=90=E3=83=BC=E3=81=AB?=
 =?UTF-8?q?=E9=A0=85=E7=9B=AE=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/next-project/src/constants/linkItem.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/view/next-project/src/constants/linkItem.tsx b/view/next-project/src/constants/linkItem.tsx
index 7e71a5e2a..faf08a0af 100644
--- a/view/next-project/src/constants/linkItem.tsx
+++ b/view/next-project/src/constants/linkItem.tsx
@@ -24,6 +24,11 @@ export const FinanceLinkItems: LinkItemProps[] = [
     icon: <HiCurrencyDollar className='mx-2 text-xl' />,
     href: '/budgets',
   },
+  {
+    name: '予算管理',
+    icon: <HiCurrencyDollar className='mx-2 text-xl' />,
+    href: '/budget_managements',
+  },
   {
     name: '学内募金',
     icon: <MdOutlineSavings className='mx-2 text-xl' />,

From 3f8ca46fc6bfbf726f0ff49e917ca916558d1c7e Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Sun, 24 Nov 2024 20:32:06 +0900
Subject: [PATCH 03/11] =?UTF-8?q?[feat]=20BudgetManagement=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../budget_managements/BudgetManagement.tsx   | 207 ++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 view/next-project/src/components/budget_managements/BudgetManagement.tsx

diff --git a/view/next-project/src/components/budget_managements/BudgetManagement.tsx b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
new file mode 100644
index 000000000..fe4ce78d6
--- /dev/null
+++ b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import { Card, EditButton, AddButton, Title } from '@/components/common';
+import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrimaryButton';
+
+interface RegistrationItem {
+  id: string;
+  name: string;
+  budget?: number;
+  used?: number;
+  remaining?: number;
+}
+
+interface Department {
+  id: string;
+  name: string;
+  budget: number;
+  used: number;
+  remaining: number;
+}
+
+interface Division {
+  id: string;
+  name: string;
+  departmentId: string;
+  budget: number;
+  used: number;
+  remaining: number;
+}
+
+interface Item {
+  id: string;
+  name: string;
+  divisionId: string;
+  budget: number;
+  used: number;
+  remaining: number;
+}
+
+interface BudgetManagementProps {
+  departments: Department[];
+  divisions: Division[];
+  items: Item[];
+}
+
+export default function BudgetManagement({ departments, divisions, items }: BudgetManagementProps) {
+  const [selectedDepartmentId, setSelectedDepartmentId] = useState('');
+  const [selectedDivisionId, setSelectedDivisionId] = useState('');
+
+  const handleDepartmentChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedDepartmentId(e.target.value);
+    setSelectedDivisionId('');
+  };
+
+  const handleDivisionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedDivisionId(e.target.value);
+  };
+
+  let displayItems: RegistrationItem[] = [];
+  let title = '購入報告';
+  const showBudgetColumns = true;
+
+  if (selectedDivisionId) {
+    displayItems = items.filter((item) => item.divisionId === selectedDivisionId);
+    title = '申請物品';
+  } else if (selectedDepartmentId) {
+    displayItems = divisions.filter((div) => div.departmentId === selectedDepartmentId);
+    title = '申請部門';
+  } else {
+    displayItems = departments;
+    title = '申請局';
+  }
+
+  const totalBudget = displayItems.reduce((sum, item) => sum + (item.budget || 0), 0);
+  const totalUsed = displayItems.reduce((sum, item) => sum + (item.used || 0), 0);
+  const totalRemaining = displayItems.reduce((sum, item) => sum + (item.remaining || 0), 0);
+
+  return (
+    <Card>
+      <div className='px-4 py-10'>
+        <div className='flex-start mb-4 flex'>
+          <Title>予算管理ページ</Title>
+        </div>
+        <div className='mb-4 flex flex-col items-center md:flex-row md:justify-between'>
+          <div className='flex flex-col gap-4'>
+            <div className='flex gap-3'>
+              <span className='text-base font-light'>申請する局</span>
+              <select
+                value={selectedDepartmentId}
+                onChange={handleDepartmentChange}
+                className='border-b border-black-300 focus:outline-none'
+              >
+                <option value=''>ALL</option>
+                {departments.map((dept) => (
+                  <option key={dept.id} value={dept.id}>
+                    {dept.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className={`flex gap-3 ${selectedDepartmentId ? 'visible' : 'invisible'}`}>
+              <span className='text-base font-light'>申請する部門</span>
+              <select
+                value={selectedDivisionId}
+                onChange={handleDivisionChange}
+                className='border-b border-black-300 focus:outline-none'
+              >
+                <option value=''>ALL</option>
+                {divisions
+                  .filter((div) => div.departmentId === selectedDepartmentId)
+                  .map((div) => (
+                    <option key={div.id} value={div.id}>
+                      {div.name}
+                    </option>
+                  ))}
+              </select>
+            </div>
+          </div>
+          <div className='flex flex-col gap-1 md:flex-row md:gap-3'>
+            <PrimaryButton className='w-full md:w-fit'>CSVダウンロード</PrimaryButton>
+            <AddButton className='w-full md:w-fit'>{title}登録</AddButton>
+          </div>
+        </div>
+        <div className='mt-5 overflow-x-auto'>
+          <table className='w-full table-auto border-collapse'>
+            <thead>
+              <tr className='border border-x-white-0 border-b-primary-1 border-t-white-0 py-3'>
+                <th className='w-1/4 pb-2 text-center font-medium text-black-600'>{title}</th>
+                {showBudgetColumns && (
+                  <>
+                    <th className='w-1/4 pb-2 text-center font-medium text-black-600'>予算</th>
+                    <th className='w-1/4 pb-2 text-center font-medium text-black-600'>使用額</th>
+                    <th className='w-1/4 pb-2 text-center font-medium text-black-600'>残高</th>
+                  </>
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {displayItems.map((item, index) => (
+                <tr key={item.id} className={index !== displayItems.length - 1 ? 'border-b' : ''}>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>
+                      <div className='flex items-center justify-center gap-2'>
+                        <span className='text-nowrap text-primary-1 underline'>{item.name}</span>
+                        <EditButton onClick={() => console.log('Edit clicked:', item.id)} />
+                      </div>
+                    </div>
+                  </td>
+                  {showBudgetColumns && (
+                    <>
+                      <td className='py-3'>
+                        <div className='text-center text-sm text-black-600'>
+                          {item.budget?.toLocaleString() || '-'}
+                        </div>
+                      </td>
+                      <td className='py-3'>
+                        <div className='text-center text-sm text-black-600'>
+                          {item.used?.toLocaleString() || '-'}
+                        </div>
+                      </td>
+                      <td className='py-3'>
+                        <div className='text-center text-sm text-black-600'>
+                          {item.remaining?.toLocaleString() || '-'}
+                        </div>
+                      </td>
+                    </>
+                  )}
+                </tr>
+              ))}
+              {showBudgetColumns && displayItems.length > 0 && (
+                <tr className='border border-x-white-0 border-b-white-0 border-t-primary-1'>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>合計</div>
+                  </td>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>
+                      {totalBudget.toLocaleString()}
+                    </div>
+                  </td>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>
+                      {totalUsed.toLocaleString()}
+                    </div>
+                  </td>
+                  <td className='py-3'>
+                    <div className='text-center text-sm text-black-600'>
+                      {totalRemaining.toLocaleString()}
+                    </div>
+                  </td>
+                </tr>
+              )}
+              {displayItems.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={showBudgetColumns ? 4 : 1}
+                    className='text-gray-500 px-4 py-6 text-center text-sm'
+                  >
+                    データがありません
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Card>
+  );
+}

From 5324f71bf2b6f062702b8aec4f01cc97a11032e9 Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Sun, 24 Nov 2024 20:32:17 +0900
Subject: [PATCH 04/11] =?UTF-8?q?[feat]=20=E4=BA=88=E7=AE=97=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/budget_managements/index.tsx    | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 view/next-project/src/pages/budget_managements/index.tsx

diff --git a/view/next-project/src/pages/budget_managements/index.tsx b/view/next-project/src/pages/budget_managements/index.tsx
new file mode 100644
index 000000000..0ebe14601
--- /dev/null
+++ b/view/next-project/src/pages/budget_managements/index.tsx
@@ -0,0 +1,30 @@
+import BudgetManagement from '@/components/budget_managements/BudgetManagement';
+import MainLayout from '@/components/layout/MainLayout';
+
+export default function Home() {
+  const departments = [
+    { id: '1', name: '制作局', budget: 20000, used: 5000, remaining: 15000 },
+    { id: '2', name: '渉外局', budget: 18000, used: 4000, remaining: 14000 },
+    { id: '3', name: '企画局', budget: 22000, used: 6000, remaining: 16000 },
+    { id: '4', name: '財務局', budget: 25000, used: 5500, remaining: 19500 },
+    { id: '5', name: '情報局', budget: 21000, used: 7000, remaining: 14000 },
+  ];
+
+  const divisions = [
+    { id: '1', name: '制作部門A', departmentId: '1', budget: 10000, used: 3000, remaining: 7000 },
+    { id: '2', name: '制作部門B', departmentId: '1', budget: 10000, used: 2000, remaining: 8000 },
+    { id: '3', name: '渉外部門A', departmentId: '2', budget: 9000, used: 4000, remaining: 5000 },
+  ];
+
+  const items = [
+    { id: '1', name: '物品A', divisionId: '1', budget: 5000, used: 1000, remaining: 4000 },
+    { id: '2', name: '物品B', divisionId: '1', budget: 5000, used: 500, remaining: 4500 },
+    { id: '3', name: '物品C', divisionId: '2', budget: 6000, used: 1500, remaining: 4500 },
+  ];
+
+  return (
+    <MainLayout>
+      <BudgetManagement departments={departments} divisions={divisions} items={items} />
+    </MainLayout>
+  );
+}

From 5b8465b30bda68790d3c34670b756d5933a0c52f Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Sun, 24 Nov 2024 20:45:56 +0900
Subject: [PATCH 05/11] =?UTF-8?q?[fix]=20css=E3=81=AE=E3=83=A2=E3=83=90?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E5=90=91=E3=81=91=E3=81=AB=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/budget_managements/BudgetManagement.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/view/next-project/src/components/budget_managements/BudgetManagement.tsx b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
index fe4ce78d6..997afca90 100644
--- a/view/next-project/src/components/budget_managements/BudgetManagement.tsx
+++ b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
@@ -115,7 +115,7 @@ export default function BudgetManagement({ departments, divisions, items }: Budg
               </select>
             </div>
           </div>
-          <div className='flex flex-col gap-1 md:flex-row md:gap-3'>
+          <div className='w-full md:w-fit flex flex-col gap-1 md:flex-row md:gap-3 mt-2'>
             <PrimaryButton className='w-full md:w-fit'>CSVダウンロード</PrimaryButton>
             <AddButton className='w-full md:w-fit'>{title}登録</AddButton>
           </div>

From 64c50f49fff1ea5db8c484bac7a88e964a3b5162 Mon Sep 17 00:00:00 2001
From: TkymHrt <TkymHrt@users.noreply.github.com>
Date: Sun, 24 Nov 2024 11:51:59 +0000
Subject: [PATCH 06/11] formatted by workflow

---
 .../src/components/budget_managements/BudgetManagement.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/view/next-project/src/components/budget_managements/BudgetManagement.tsx b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
index 997afca90..bcfe15cc0 100644
--- a/view/next-project/src/components/budget_managements/BudgetManagement.tsx
+++ b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
@@ -115,7 +115,7 @@ export default function BudgetManagement({ departments, divisions, items }: Budg
               </select>
             </div>
           </div>
-          <div className='w-full md:w-fit flex flex-col gap-1 md:flex-row md:gap-3 mt-2'>
+          <div className='mt-2 flex w-full flex-col gap-1 md:w-fit md:flex-row md:gap-3'>
             <PrimaryButton className='w-full md:w-fit'>CSVダウンロード</PrimaryButton>
             <AddButton className='w-full md:w-fit'>{title}登録</AddButton>
           </div>

From 76edb82ff73ea032453d317a852555b39e38b6d9 Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Tue, 3 Dec 2024 00:17:22 +0900
Subject: [PATCH 07/11] =?UTF-8?q?[fix]=20=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/budget_managements/index.tsx    | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/view/next-project/src/pages/budget_managements/index.tsx b/view/next-project/src/pages/budget_managements/index.tsx
index 0ebe14601..851434ad3 100644
--- a/view/next-project/src/pages/budget_managements/index.tsx
+++ b/view/next-project/src/pages/budget_managements/index.tsx
@@ -2,29 +2,9 @@ import BudgetManagement from '@/components/budget_managements/BudgetManagement';
 import MainLayout from '@/components/layout/MainLayout';
 
 export default function Home() {
-  const departments = [
-    { id: '1', name: '制作局', budget: 20000, used: 5000, remaining: 15000 },
-    { id: '2', name: '渉外局', budget: 18000, used: 4000, remaining: 14000 },
-    { id: '3', name: '企画局', budget: 22000, used: 6000, remaining: 16000 },
-    { id: '4', name: '財務局', budget: 25000, used: 5500, remaining: 19500 },
-    { id: '5', name: '情報局', budget: 21000, used: 7000, remaining: 14000 },
-  ];
-
-  const divisions = [
-    { id: '1', name: '制作部門A', departmentId: '1', budget: 10000, used: 3000, remaining: 7000 },
-    { id: '2', name: '制作部門B', departmentId: '1', budget: 10000, used: 2000, remaining: 8000 },
-    { id: '3', name: '渉外部門A', departmentId: '2', budget: 9000, used: 4000, remaining: 5000 },
-  ];
-
-  const items = [
-    { id: '1', name: '物品A', divisionId: '1', budget: 5000, used: 1000, remaining: 4000 },
-    { id: '2', name: '物品B', divisionId: '1', budget: 5000, used: 500, remaining: 4500 },
-    { id: '3', name: '物品C', divisionId: '2', budget: 6000, used: 1500, remaining: 4500 },
-  ];
-
   return (
     <MainLayout>
-      <BudgetManagement departments={departments} divisions={divisions} items={items} />
+      <BudgetManagement />
     </MainLayout>
   );
 }

From e94e015dce9753a2be47353378b8400b64db830d Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Tue, 3 Dec 2024 00:18:03 +0900
Subject: [PATCH 08/11] =?UTF-8?q?[fix]=20=E3=83=A2=E3=83=83=E3=82=AF?=
 =?UTF-8?q?=E3=81=AE=E4=BD=9C=E6=88=90=E3=81=A8=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=B8=E3=81=AE=E3=83=AA?=
 =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../budget_managements/BudgetManagement.tsx   | 215 ++++++++++--------
 .../components/budget_managements/mockApi.ts  | 100 ++++++++
 2 files changed, 217 insertions(+), 98 deletions(-)
 create mode 100644 view/next-project/src/components/budget_managements/mockApi.ts

diff --git a/view/next-project/src/components/budget_managements/BudgetManagement.tsx b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
index bcfe15cc0..2a904927d 100644
--- a/view/next-project/src/components/budget_managements/BudgetManagement.tsx
+++ b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
@@ -1,69 +1,93 @@
-import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { useState, useEffect } from 'react';
+import {
+  Department,
+  Division,
+  Item,
+  fetchDepartments,
+  fetchDivisions,
+  fetchItems,
+} from './mockApi';
 import { Card, EditButton, AddButton, Title } from '@/components/common';
 import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrimaryButton';
 
-interface RegistrationItem {
-  id: string;
-  name: string;
-  budget?: number;
-  used?: number;
-  remaining?: number;
-}
+export default function BudgetManagement() {
+  const router = useRouter();
+  const { departmentId, divisionId } = router.query;
 
-interface Department {
-  id: string;
-  name: string;
-  budget: number;
-  used: number;
-  remaining: number;
-}
+  const [departments, setDepartments] = useState<Department[]>([]);
+  const [divisions, setDivisions] = useState<Division[]>([]);
+  const [items, setItems] = useState<Item[]>([]);
 
-interface Division {
-  id: string;
-  name: string;
-  departmentId: string;
-  budget: number;
-  used: number;
-  remaining: number;
-}
+  const [selectedDepartmentId, setSelectedDepartmentId] = useState(departmentId || '');
+  const [selectedDivisionId, setSelectedDivisionId] = useState(divisionId || '');
 
-interface Item {
-  id: string;
-  name: string;
-  divisionId: string;
-  budget: number;
-  used: number;
-  remaining: number;
-}
+  useEffect(() => {
+    fetchDepartments().then(setDepartments);
+  }, []);
 
-interface BudgetManagementProps {
-  departments: Department[];
-  divisions: Division[];
-  items: Item[];
-}
+  useEffect(() => {
+    setSelectedDepartmentId(departmentId || '');
+  }, [departmentId]);
 
-export default function BudgetManagement({ departments, divisions, items }: BudgetManagementProps) {
-  const [selectedDepartmentId, setSelectedDepartmentId] = useState('');
-  const [selectedDivisionId, setSelectedDivisionId] = useState('');
+  useEffect(() => {
+    setSelectedDivisionId(divisionId || '');
+  }, [divisionId]);
 
-  const handleDepartmentChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedDepartmentId(e.target.value);
-    setSelectedDivisionId('');
-  };
+  useEffect(() => {
+    if (selectedDepartmentId) {
+      fetchDivisions(Number(selectedDepartmentId)).then(setDivisions);
+      setItems([]);
+    } else {
+      setDivisions([]);
+      setSelectedDivisionId('');
+      setItems([]);
+    }
 
-  const handleDivisionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedDivisionId(e.target.value);
-  };
+    router.push(
+      {
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          departmentId: selectedDepartmentId || undefined,
+          divisionId: undefined,
+        },
+      },
+      undefined,
+      { shallow: true },
+    );
+  }, [selectedDepartmentId]);
+
+  useEffect(() => {
+    if (selectedDivisionId) {
+      fetchItems(Number(selectedDivisionId)).then(setItems);
+    } else {
+      setItems([]);
+    }
+
+    router.push(
+      {
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          departmentId: selectedDepartmentId || undefined,
+          divisionId: selectedDivisionId || undefined,
+        },
+      },
+      undefined,
+      { shallow: true },
+    );
+  }, [selectedDivisionId]);
 
-  let displayItems: RegistrationItem[] = [];
+  let displayItems: any[] = [];
   let title = '購入報告';
   const showBudgetColumns = true;
 
   if (selectedDivisionId) {
-    displayItems = items.filter((item) => item.divisionId === selectedDivisionId);
+    displayItems = items;
     title = '申請物品';
   } else if (selectedDepartmentId) {
-    displayItems = divisions.filter((div) => div.departmentId === selectedDepartmentId);
+    displayItems = divisions;
     title = '申請部門';
   } else {
     displayItems = departments;
@@ -74,6 +98,26 @@ export default function BudgetManagement({ departments, divisions, items }: Budg
   const totalUsed = displayItems.reduce((sum, item) => sum + (item.used || 0), 0);
   const totalRemaining = displayItems.reduce((sum, item) => sum + (item.remaining || 0), 0);
 
+  const handleDepartmentChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const deptId = e.target.value;
+    setSelectedDepartmentId(deptId);
+    setSelectedDivisionId('');
+  };
+
+  const handleDivisionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const divId = e.target.value;
+    setSelectedDivisionId(divId);
+  };
+
+  const handleRowClick = (item: any) => {
+    if (!selectedDepartmentId) {
+      setSelectedDepartmentId(item.id);
+      setSelectedDivisionId('');
+    } else if (!selectedDivisionId) {
+      setSelectedDivisionId(item.id);
+    }
+  };
+
   return (
     <Card>
       <div className='px-4 py-10'>
@@ -105,13 +149,11 @@ export default function BudgetManagement({ departments, divisions, items }: Budg
                 className='border-b border-black-300 focus:outline-none'
               >
                 <option value=''>ALL</option>
-                {divisions
-                  .filter((div) => div.departmentId === selectedDepartmentId)
-                  .map((div) => (
-                    <option key={div.id} value={div.id}>
-                      {div.name}
-                    </option>
-                  ))}
+                {divisions.map((div) => (
+                  <option key={div.id} value={div.id}>
+                    {div.name}
+                  </option>
+                ))}
               </select>
             </div>
           </div>
@@ -136,56 +178,33 @@ export default function BudgetManagement({ departments, divisions, items }: Budg
             </thead>
             <tbody>
               {displayItems.map((item, index) => (
-                <tr key={item.id} className={index !== displayItems.length - 1 ? 'border-b' : ''}>
-                  <td className='py-3'>
-                    <div className='text-center text-sm text-black-600'>
-                      <div className='flex items-center justify-center gap-2'>
-                        <span className='text-nowrap text-primary-1 underline'>{item.name}</span>
-                        <EditButton onClick={() => console.log('Edit clicked:', item.id)} />
-                      </div>
-                    </div>
-                  </td>
+                <tr
+                  key={item.id}
+                  className={`cursor-pointer ${
+                    index !== displayItems.length - 1 ? 'border-b' : ''
+                  }`}
+                  onClick={() => handleRowClick(item)}
+                >
+                  <div className='flex justify-center gap-2 py-3'>
+                    <td className='text-center text-primary-1 underline'>{item.name}</td>
+                    <EditButton />
+                  </div>
+
                   {showBudgetColumns && (
                     <>
-                      <td className='py-3'>
-                        <div className='text-center text-sm text-black-600'>
-                          {item.budget?.toLocaleString() || '-'}
-                        </div>
-                      </td>
-                      <td className='py-3'>
-                        <div className='text-center text-sm text-black-600'>
-                          {item.used?.toLocaleString() || '-'}
-                        </div>
-                      </td>
-                      <td className='py-3'>
-                        <div className='text-center text-sm text-black-600'>
-                          {item.remaining?.toLocaleString() || '-'}
-                        </div>
-                      </td>
+                      <td className='py-3 text-center'>{item.budget}</td>
+                      <td className='py-3 text-center'>{item.used}</td>
+                      <td className='py-3 text-center'>{item.remaining}</td>
                     </>
                   )}
                 </tr>
               ))}
               {showBudgetColumns && displayItems.length > 0 && (
                 <tr className='border border-x-white-0 border-b-white-0 border-t-primary-1'>
-                  <td className='py-3'>
-                    <div className='text-center text-sm text-black-600'>合計</div>
-                  </td>
-                  <td className='py-3'>
-                    <div className='text-center text-sm text-black-600'>
-                      {totalBudget.toLocaleString()}
-                    </div>
-                  </td>
-                  <td className='py-3'>
-                    <div className='text-center text-sm text-black-600'>
-                      {totalUsed.toLocaleString()}
-                    </div>
-                  </td>
-                  <td className='py-3'>
-                    <div className='text-center text-sm text-black-600'>
-                      {totalRemaining.toLocaleString()}
-                    </div>
-                  </td>
+                  <td className='py-3 text-center font-bold'>合計</td>
+                  <td className='py-3 text-center font-bold'>{totalBudget}</td>
+                  <td className='py-3 text-center font-bold'>{totalUsed}</td>
+                  <td className='py-3 text-center font-bold'>{totalRemaining}</td>
                 </tr>
               )}
               {displayItems.length === 0 && (
diff --git a/view/next-project/src/components/budget_managements/mockApi.ts b/view/next-project/src/components/budget_managements/mockApi.ts
new file mode 100644
index 000000000..99dcce63f
--- /dev/null
+++ b/view/next-project/src/components/budget_managements/mockApi.ts
@@ -0,0 +1,100 @@
+export interface Department {
+  id: number;
+  name: string;
+  budget: number;
+  used: number;
+  remaining: number;
+}
+
+export interface Division {
+  id: number;
+  name: string;
+  departmentId: number;
+  budget: number;
+  used: number;
+  remaining: number;
+}
+
+export interface Item {
+  id: number;
+  name: string;
+  divisionId: number;
+  budget: number;
+  used: number;
+  remaining: number;
+}
+
+const departments: Department[] = [
+  { id: 1, name: '制作局', budget: 20000, used: 5000, remaining: 15000 },
+  { id: 2, name: '渉外局', budget: 18000, used: 4000, remaining: 14000 },
+  { id: 3, name: '企画局', budget: 22000, used: 6000, remaining: 16000 },
+  { id: 4, name: '財務局', budget: 25000, used: 5500, remaining: 19500 },
+  { id: 5, name: '情報局', budget: 21000, used: 7000, remaining: 14000 },
+  { id: 6, name: '総務局', budget: 23000, used: 4500, remaining: 18500 },
+];
+
+const divisions: Division[] = [
+  { id: 1, name: '制作部門A', departmentId: 1, budget: 10000, used: 3000, remaining: 7000 },
+  { id: 2, name: '制作部門B', departmentId: 1, budget: 10000, used: 2000, remaining: 8000 },
+  { id: 3, name: '渉外部門A', departmentId: 2, budget: 9000, used: 4000, remaining: 5000 },
+  { id: 4, name: '渉外部門B', departmentId: 2, budget: 9000, used: 0, remaining: 9000 },
+  { id: 5, name: '企画部門A', departmentId: 3, budget: 11000, used: 5000, remaining: 6000 },
+  { id: 6, name: '企画部門B', departmentId: 3, budget: 11000, used: 1000, remaining: 10000 },
+  { id: 7, name: '財務部門A', departmentId: 4, budget: 12500, used: 3000, remaining: 9500 },
+  { id: 8, name: '財務部門B', departmentId: 4, budget: 12500, used: 2500, remaining: 10000 },
+  { id: 9, name: '情報部門A', departmentId: 5, budget: 10500, used: 4000, remaining: 6500 },
+  { id: 10, name: '情報部門B', departmentId: 5, budget: 10500, used: 3000, remaining: 7500 },
+  { id: 11, name: '総務部門A', departmentId: 6, budget: 11500, used: 2000, remaining: 9500 },
+  { id: 12, name: '総務部門B', departmentId: 6, budget: 11500, used: 2500, remaining: 9000 },
+];
+
+const items: Item[] = [
+  { id: 1, name: '物品A', divisionId: 1, budget: 5000, used: 1000, remaining: 4000 },
+  { id: 2, name: '物品B', divisionId: 1, budget: 5000, used: 500, remaining: 4500 },
+  { id: 3, name: '物品C', divisionId: 2, budget: 5000, used: 2000, remaining: 3000 },
+  { id: 4, name: '物品D', divisionId: 2, budget: 5000, used: 0, remaining: 5000 },
+  { id: 5, name: '物品E', divisionId: 3, budget: 5000, used: 3000, remaining: 2000 },
+  { id: 6, name: '物品F', divisionId: 3, budget: 5000, used: 500, remaining: 4500 },
+  { id: 7, name: '物品G', divisionId: 4, budget: 5000, used: 2000, remaining: 3000 },
+  { id: 8, name: '物品H', divisionId: 4, budget: 5000, used: 1500, remaining: 3500 },
+  { id: 9, name: '物品I', divisionId: 5, budget: 5000, used: 4000, remaining: 1000 },
+  { id: 10, name: '物品J', divisionId: 5, budget: 5000, used: 3000, remaining: 2000 },
+  { id: 11, name: '物品K', divisionId: 6, budget: 5000, used: 1000, remaining: 4000 },
+  { id: 12, name: '物品L', divisionId: 6, budget: 5000, used: 1500, remaining: 3500 },
+  { id: 13, name: '物品M', divisionId: 7, budget: 5000, used: 3000, remaining: 2000 },
+  { id: 14, name: '物品N', divisionId: 7, budget: 5000, used: 2000, remaining: 3000 },
+  { id: 15, name: '物品O', divisionId: 8, budget: 5000, used: 1000, remaining: 4000 },
+  { id: 16, name: '物品P', divisionId: 8, budget: 5000, used: 2500, remaining: 2500 },
+  { id: 17, name: '物品Q', divisionId: 9, budget: 5000, used: 4000, remaining: 1000 },
+  { id: 18, name: '物品R', divisionId: 9, budget: 5000, used: 3000, remaining: 2000 },
+  { id: 19, name: '物品S', divisionId: 10, budget: 5000, used: 1000, remaining: 4000 },
+  { id: 20, name: '物品T', divisionId: 10, budget: 5000, used: 2500, remaining: 2500 },
+  { id: 21, name: '物品U', divisionId: 11, budget: 5000, used: 4000, remaining: 1000 },
+  { id: 22, name: '物品V', divisionId: 11, budget: 5000, used: 3000, remaining: 2000 },
+  { id: 23, name: '物品W', divisionId: 12, budget: 5000, used: 1000, remaining: 4000 },
+  { id: 24, name: '物品X', divisionId: 12, budget: 5000, used: 2500, remaining: 2500 },
+];
+
+export const fetchDepartments = async (): Promise<Department[]> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(departments);
+    });
+  });
+};
+
+export const fetchDivisions = async (departmentId: number): Promise<Division[]> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(divisions.filter((division) => division.departmentId === departmentId));
+    });
+  });
+};
+
+export const fetchItems = async (divisionId: number): Promise<Item[]> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(items.filter((item) => item.divisionId === divisionId));
+    });
+  });
+};

From 89c0b131723284c6a2f997db5fdef80010ce8716 Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Tue, 3 Dec 2024 00:26:13 +0900
Subject: [PATCH 09/11] =?UTF-8?q?[fix]=20=E3=83=86=E3=83=BC=E3=83=96?=
 =?UTF-8?q?=E3=83=AB=E6=A7=8B=E9=80=A0=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/budget_managements/BudgetManagement.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/view/next-project/src/components/budget_managements/BudgetManagement.tsx b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
index 2a904927d..129283e9f 100644
--- a/view/next-project/src/components/budget_managements/BudgetManagement.tsx
+++ b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
@@ -185,10 +185,10 @@ export default function BudgetManagement() {
                   }`}
                   onClick={() => handleRowClick(item)}
                 >
-                  <div className='flex justify-center gap-2 py-3'>
-                    <td className='text-center text-primary-1 underline'>{item.name}</td>
+                  <td className='flex justify-center gap-2 py-3'>
+                    <div className='text-center text-primary-1 underline'>{item.name}</div>
                     <EditButton />
-                  </div>
+                  </td>
 
                   {showBudgetColumns && (
                     <>

From 084eae858a6d7a90d0900741e8c4ee7066f6b286 Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Tue, 3 Dec 2024 18:21:35 +0900
Subject: [PATCH 10/11] =?UTF-8?q?[feat]=20nuqs=E3=81=AE=E5=B0=8E=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/next-project/package-lock.json  | 46 ++++++++++++++++++++++++++++
 view/next-project/package.json       |  1 +
 view/next-project/src/pages/_app.tsx |  5 ++-
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/view/next-project/package-lock.json b/view/next-project/package-lock.json
index 956fbe722..f80acb5e4 100644
--- a/view/next-project/package-lock.json
+++ b/view/next-project/package-lock.json
@@ -25,6 +25,7 @@
         "minio": "^7.1.3",
         "next": "^14.2.4",
         "node-fetch": "^3.1.0",
+        "nuqs": "^2.2.3",
         "pdf-lib": "^1.17.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -15757,6 +15758,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -16153,6 +16160,32 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nuqs": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-2.2.3.tgz",
+      "integrity": "sha512-nMCcUW06KSqEXA0xp+LiRqDpIE59BVYbjZLe0HUisJAlswfihHYSsAjYTzV0lcE1thfh8uh+LqUHGdQ8qq8rfA==",
+      "license": "MIT",
+      "dependencies": {
+        "mitt": "^3.0.1"
+      },
+      "peerDependencies": {
+        "@remix-run/react": ">=2",
+        "next": ">=14.2.0",
+        "react": ">=18.2.0 || ^19.0.0-0",
+        "react-router-dom": ">=6"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/react": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "react-router-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/nypm": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.8.tgz",
@@ -32358,6 +32391,11 @@
         }
       }
     },
+    "mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -32642,6 +32680,14 @@
         "boolbase": "^1.0.0"
       }
     },
+    "nuqs": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-2.2.3.tgz",
+      "integrity": "sha512-nMCcUW06KSqEXA0xp+LiRqDpIE59BVYbjZLe0HUisJAlswfihHYSsAjYTzV0lcE1thfh8uh+LqUHGdQ8qq8rfA==",
+      "requires": {
+        "mitt": "^3.0.1"
+      }
+    },
     "nypm": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.8.tgz",
diff --git a/view/next-project/package.json b/view/next-project/package.json
index ac34ff87c..a94db10f2 100644
--- a/view/next-project/package.json
+++ b/view/next-project/package.json
@@ -33,6 +33,7 @@
     "minio": "^7.1.3",
     "next": "^14.2.4",
     "node-fetch": "^3.1.0",
+    "nuqs": "^2.2.3",
     "pdf-lib": "^1.17.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/view/next-project/src/pages/_app.tsx b/view/next-project/src/pages/_app.tsx
index 296137fc6..c363eee33 100644
--- a/view/next-project/src/pages/_app.tsx
+++ b/view/next-project/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { ChakraProvider } from '@chakra-ui/react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import { NuqsAdapter } from 'nuqs/adapters/next/pages';
 import { RecoilRoot } from 'recoil';
 
 import Layout from '@components/layout/Layout';
@@ -17,7 +18,9 @@ function MyApp({ Component, pageProps }: AppProps) {
         </Head>
         <ManagedUIContext>
           <Layout>
-            <Component {...pageProps} />
+            <NuqsAdapter>
+              <Component {...pageProps} />
+            </NuqsAdapter>
           </Layout>
         </ManagedUIContext>
       </ChakraProvider>

From e87c8b4ae2b5fa96a1aab9b5cb77aeb8d4dc2c22 Mon Sep 17 00:00:00 2001
From: TkymHrt <23.h.takayama.nutfes@gmail.com>
Date: Tue, 3 Dec 2024 18:21:51 +0900
Subject: [PATCH 11/11] =?UTF-8?q?[feat]=20nuqs=E3=82=92=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E5=AE=9F=E8=A3=85=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../budget_managements/BudgetManagement.tsx   | 94 ++++++-------------
 1 file changed, 30 insertions(+), 64 deletions(-)

diff --git a/view/next-project/src/components/budget_managements/BudgetManagement.tsx b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
index 129283e9f..229b70bbf 100644
--- a/view/next-project/src/components/budget_managements/BudgetManagement.tsx
+++ b/view/next-project/src/components/budget_managements/BudgetManagement.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from 'next/router';
+import { useQueryStates, parseAsInteger } from 'nuqs';
 import { useState, useEffect } from 'react';
 import {
   Department,
@@ -12,81 +12,48 @@ import { Card, EditButton, AddButton, Title } from '@/components/common';
 import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrimaryButton';
 
 export default function BudgetManagement() {
-  const router = useRouter();
-  const { departmentId, divisionId } = router.query;
-
   const [departments, setDepartments] = useState<Department[]>([]);
   const [divisions, setDivisions] = useState<Division[]>([]);
   const [items, setItems] = useState<Item[]>([]);
 
-  const [selectedDepartmentId, setSelectedDepartmentId] = useState(departmentId || '');
-  const [selectedDivisionId, setSelectedDivisionId] = useState(divisionId || '');
+  const [{ departmentId, divisionId }, setQueryState] = useQueryStates({
+    departmentId: parseAsInteger.withOptions({ history: 'push', shallow: true }),
+    divisionId: parseAsInteger.withOptions({ history: 'push', shallow: true }),
+  });
 
   useEffect(() => {
     fetchDepartments().then(setDepartments);
   }, []);
 
+  // FIXME: APIが実装されたら、修正する。
   useEffect(() => {
-    setSelectedDepartmentId(departmentId || '');
-  }, [departmentId]);
-
-  useEffect(() => {
-    setSelectedDivisionId(divisionId || '');
-  }, [divisionId]);
-
-  useEffect(() => {
-    if (selectedDepartmentId) {
-      fetchDivisions(Number(selectedDepartmentId)).then(setDivisions);
+    if (departmentId !== null) {
+      fetchDivisions(departmentId).then(setDivisions);
       setItems([]);
     } else {
       setDivisions([]);
-      setSelectedDivisionId('');
+      setQueryState({ divisionId: null });
       setItems([]);
     }
-
-    router.push(
-      {
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          departmentId: selectedDepartmentId || undefined,
-          divisionId: undefined,
-        },
-      },
-      undefined,
-      { shallow: true },
-    );
-  }, [selectedDepartmentId]);
+  }, [departmentId]);
 
   useEffect(() => {
-    if (selectedDivisionId) {
-      fetchItems(Number(selectedDivisionId)).then(setItems);
+    if (divisionId !== null) {
+      fetchItems(divisionId).then(setItems);
     } else {
       setItems([]);
     }
+  }, [divisionId]);
 
-    router.push(
-      {
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          departmentId: selectedDepartmentId || undefined,
-          divisionId: selectedDivisionId || undefined,
-        },
-      },
-      undefined,
-      { shallow: true },
-    );
-  }, [selectedDivisionId]);
-
+  // FIXME: any型はAPIのレスポンスに合わせて変更する。
   let displayItems: any[] = [];
   let title = '購入報告';
   const showBudgetColumns = true;
 
-  if (selectedDivisionId) {
+  if (divisionId !== null) {
     displayItems = items;
     title = '申請物品';
-  } else if (selectedDepartmentId) {
+  } else if (departmentId !== null) {
     displayItems = divisions;
     title = '申請部門';
   } else {
@@ -99,22 +66,21 @@ export default function BudgetManagement() {
   const totalRemaining = displayItems.reduce((sum, item) => sum + (item.remaining || 0), 0);
 
   const handleDepartmentChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const deptId = e.target.value;
-    setSelectedDepartmentId(deptId);
-    setSelectedDivisionId('');
+    const deptId = e.target.value ? parseInt(e.target.value, 10) : null;
+    setQueryState({ departmentId: deptId, divisionId: null });
   };
 
   const handleDivisionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const divId = e.target.value;
-    setSelectedDivisionId(divId);
+    const divId = e.target.value ? parseInt(e.target.value, 10) : null;
+    setQueryState({ divisionId: divId });
   };
 
+  // FIXME: any型はAPIのレスポンスに合わせて変更する。
   const handleRowClick = (item: any) => {
-    if (!selectedDepartmentId) {
-      setSelectedDepartmentId(item.id);
-      setSelectedDivisionId('');
-    } else if (!selectedDivisionId) {
-      setSelectedDivisionId(item.id);
+    if (departmentId === null) {
+      setQueryState({ departmentId: item.id, divisionId: null });
+    } else if (divisionId === null) {
+      setQueryState({ divisionId: item.id });
     }
   };
 
@@ -125,11 +91,11 @@ export default function BudgetManagement() {
           <Title>予算管理ページ</Title>
         </div>
         <div className='mb-4 flex flex-col items-center md:flex-row md:justify-between'>
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-4 text-nowrap py-2'>
             <div className='flex gap-3'>
               <span className='text-base font-light'>申請する局</span>
               <select
-                value={selectedDepartmentId}
+                value={departmentId ?? ''}
                 onChange={handleDepartmentChange}
                 className='border-b border-black-300 focus:outline-none'
               >
@@ -141,10 +107,10 @@ export default function BudgetManagement() {
                 ))}
               </select>
             </div>
-            <div className={`flex gap-3 ${selectedDepartmentId ? 'visible' : 'invisible'}`}>
+            <div className={`flex gap-3 ${departmentId !== null ? 'visible' : 'invisible'}`}>
               <span className='text-base font-light'>申請する部門</span>
               <select
-                value={selectedDivisionId}
+                value={divisionId ?? ''}
                 onChange={handleDivisionChange}
                 className='border-b border-black-300 focus:outline-none'
               >
@@ -163,7 +129,7 @@ export default function BudgetManagement() {
           </div>
         </div>
         <div className='mt-5 overflow-x-auto'>
-          <table className='w-full table-auto border-collapse'>
+          <table className='w-full table-auto border-collapse text-nowrap'>
             <thead>
               <tr className='border border-x-white-0 border-b-primary-1 border-t-white-0 py-3'>
                 <th className='w-1/4 pb-2 text-center font-medium text-black-600'>{title}</th>