CAFECA-IO · Luphia · Oct 1, 2024 · Oct 1, 2024 · Oct 1, 2024 · Oct 1, 2024
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+23",
+  "version": "0.8.2+24",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/accounting_title_page_body/accounting_title_page_body.tsx b/src/components/accounting_title_page_body/accounting_title_page_body.tsx
@@ -194,7 +194,7 @@ const AccountingTitlePageBody = () => {
       <div className="mt-40px flex flex-col items-center gap-x-20px gap-y-8px lg:mt-0 lg:flex-row">
         {/* Info: (20240717 - Julian) Assets */}
         <div className="flex w-full flex-col gap-8px lg:w-200px">
-          <p className="font-semibold text-input-text-primary">{t('common:COMMON.ASSETS')}</p>
+          <p className="font-semibold text-input-text-primary">{t('common:COMMON.ASSET')}</p>
           <div
             onClick={assetDropmenuToggleHandler}
             className={`relative flex items-center justify-between rounded-sm border bg-input-surface-input-background ${assetVisible ? 'border-input-stroke-selected' : 'border-input-stroke-input'} px-12px py-10px hover:cursor-pointer`}

diff --git a/src/components/accounting_voucher_row/accounting_voucher_row.tsx b/src/components/accounting_voucher_row/accounting_voucher_row.tsx
@@ -201,7 +201,7 @@ const AccountingVoucherRow = ({ accountingVoucher }: IAccountingVoucherRow) => {
           <FiSearch size={16} />
         </div>
         <div className="px-12px py-8px uppercase text-dropdown-text-head">
-          {t('common:COMMON.ASSETS')}
+          {t('common:COMMON.ASSET')}
         </div>
         <div
           ref={accountingRef}

diff --git a/src/components/accounting_voucher_row/accounting_voucher_row_mobile.tsx b/src/components/accounting_voucher_row/accounting_voucher_row_mobile.tsx
@@ -172,7 +172,7 @@ const AccountingVoucherRowMobile = ({ type, accountingVoucher }: IAccountingVouc
           <FiSearch size={16} />
         </div>
         <div className="px-12px py-8px uppercase text-dropdown-text-head">
-          {t('common:COMMON.ASSETS')}
+          {t('common:COMMON.ASSET')}
         </div>
         <div
           ref={accountingRef}

diff --git a/src/components/balance_sheet_report_body/balance_sheet_report_body_all.tsx b/src/components/balance_sheet_report_body/balance_sheet_report_body_all.tsx
@@ -4,14 +4,15 @@ import { useUserCtx } from '@/contexts/user_context';
 import { BalanceSheetReport, FinancialReportItem } from '@/interfaces/report';
 import APIHandler from '@/lib/utils/api_handler';
 import Image from 'next/image';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PieChart from '@/components/balance_sheet_report_body/pie_chart';
 import PieChartAssets from '@/components/balance_sheet_report_body/pie_chart_assets';
 import useStateRef from 'react-usestateref';
 import { timestampToString } from '@/lib/utils/common';
 import { SkeletonList } from '@/components/skeleton/skeleton';
 import { DEFAULT_SKELETON_COUNT_FOR_PAGE } from '@/constants/display';
 import { useTranslation } from 'next-i18next';
+import CollapseButton from '@/components/button/collapse_button';
 
 interface IBalanceSheetReportBodyAllProps {
   reportId: string;
@@ -72,6 +73,18 @@ const BalanceSheetReportBodyAll = ({ reportId }: IBalanceSheetReportBodyAllProps
   const isNoDataForCurALR = curAssetLiabilityRatio.every((value) => value === 0);
   const isNoDataForPreALR = preAssetLiabilityRatio.every((value) => value === 0);
 
+  // Info: (20241001 - Anna) 管理表格摺疊狀態
+  const [isSummaryCollapsed, setIsSummaryCollapsed] = useState(false);
+  const [isDetailCollapsed, setIsDetailCollapsed] = useState(false);
+  // Info: (20241001 - Anna) 切換摺疊狀態
+  const toggleSummaryTable = () => {
+    setIsSummaryCollapsed(!isSummaryCollapsed);
+  };
+
+  const toggleDetailTable = () => {
+    setIsDetailCollapsed(!isDetailCollapsed);
+  };
+
   useEffect(() => {
     if (getReportFinancialSuccess === true && reportFinancial && reportFinancial?.otherInfo) {
       const currentDateString = timestampToString(reportFinancial.curDate.to ?? 0);
@@ -626,39 +639,44 @@ const BalanceSheetReportBodyAll = ({ reportId }: IBalanceSheetReportBodyAllProps
 
       <section className="mx-1 text-text-neutral-secondary">
         <div className="relative z-1 mb-16px flex justify-between font-semibold text-surface-brand-secondary">
-          <p>一、項目彙總格式</p>
+          <div className="flex items-center">
+            <p>一、項目彙總格式</p>
+            <CollapseButton onClick={toggleSummaryTable} isCollapsed={isSummaryCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        <table className="relative z-1 w-full border-collapse bg-white">
-          <thead>
-            <tr>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                代號
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                會計項目
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {curDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {preDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {reportFinancial &&
-              reportFinancial.general &&
-              Object.prototype.hasOwnProperty.call(reportFinancial, 'general') &&
-              rowsForPage1(reportFinancial.general)}
-          </tbody>
-        </table>
+        {!isSummaryCollapsed && (
+          <table className="relative z-1 w-full border-collapse bg-white">
+            <thead>
+              <tr>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  代號
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  會計項目
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {curDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {preDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {reportFinancial &&
+                reportFinancial.general &&
+                Object.prototype.hasOwnProperty.call(reportFinancial, 'general') &&
+                rowsForPage1(reportFinancial.general)}
+            </tbody>
+          </table>
+        )}
       </section>
 
       {renderedFooter(1)}
@@ -727,39 +745,44 @@ const BalanceSheetReportBodyAll = ({ reportId }: IBalanceSheetReportBodyAllProps
         </div>
 
         <div className="mb-16px mt-32px flex justify-between font-semibold text-surface-brand-secondary">
-          <p>二、細項分類格式</p>
+          <div className="flex items-center">
+            <p>二、細項分類格式</p>
+            <CollapseButton onClick={toggleDetailTable} isCollapsed={isDetailCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        <table className="w-full border-collapse bg-white">
-          <thead>
-            <tr>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                代號
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                會計項目
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {curDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {preDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {reportFinancial &&
-              reportFinancial.details &&
-              Object.prototype.hasOwnProperty.call(reportFinancial, 'details') &&
-              rowsForPage2part1(reportFinancial.details)}
-          </tbody>
-        </table>
+        {!isDetailCollapsed && (
+          <table className="w-full border-collapse bg-white">
+            <thead>
+              <tr>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  代號
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  會計項目
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {curDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {preDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {reportFinancial &&
+                reportFinancial.details &&
+                Object.prototype.hasOwnProperty.call(reportFinancial, 'details') &&
+                rowsForPage2part1(reportFinancial.details)}
+            </tbody>
+          </table>
+        )}
       </section>
       {renderedFooter(2)}
     </div>

diff --git a/src/components/button/collapse_button.tsx b/src/components/button/collapse_button.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { BsChevronDown, BsChevronUp } from 'react-icons/bs';
+
+// Info: (20241001 - Anna) 定義 CollapseButton 的 props 類型
+interface CollapseButtonProps {
+  onClick: () => void;
+  isCollapsed: boolean;
+}
+
+const CollapseButton: React.FC<CollapseButtonProps> = ({ onClick, isCollapsed }) => {
+  return (
+    <p className="inline-flex">
+      <button className="rounded px-2" onClick={onClick} type="button" aria-expanded={!isCollapsed}>
+        {/* Info: (20241001 - Anna) 根據狀態顯示對應箭頭 */}
+        {isCollapsed ? (
+          <BsChevronUp style={{ color: 'var(--neutral-500)' }} />
+        ) : (
+          <BsChevronDown style={{ color: 'var(--neutral-500)' }} />
+        )}
+      </button>
+    </p>
+  );
+};
+
+export default CollapseButton;
diff --git a/src/components/cash_flow_statement_report_body/cash_flow_statement_report_body_all.tsx b/src/components/cash_flow_statement_report_body/cash_flow_statement_report_body_all.tsx
@@ -2,7 +2,7 @@ import { APIName } from '@/constants/api_connection';
 import { useUserCtx } from '@/contexts/user_context';
 import { CashFlowStatementReport, FinancialReportItem } from '@/interfaces/report';
 import APIHandler from '@/lib/utils/api_handler';
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import LineChart from '@/components/cash_flow_statement_report_body/line_chart';
@@ -13,6 +13,7 @@ import { SkeletonList } from '@/components/skeleton/skeleton';
 import { DEFAULT_SKELETON_COUNT_FOR_PAGE } from '@/constants/display';
 import useStateRef from 'react-usestateref';
 import { timestampToString } from '@/lib/utils/common';
+import CollapseButton from '@/components/button/collapse_button';
 
 interface ICashFlowStatementReportBodyAllProps {
   reportId: string;
@@ -53,6 +54,17 @@ const CashFlowStatementReportBodyAll = ({ reportId }: ICashFlowStatementReportBo
   const [firstThought, setFirstThought] = useStateRef<string>('');
   const [secondThought, setSecondThought] = useStateRef<string>('');
   const [thirdThought, setThirdThought] = useStateRef<string>('');
+  // Info: (20241001 - Anna) 管理表格摺疊狀態
+  const [isSummaryCollapsed, setIsSummaryCollapsed] = useState(false);
+  const [isDetailCollapsed, setIsDetailCollapsed] = useState(false);
+  // Info: (20241001 - Anna) 切換摺疊狀態
+  const toggleSummaryTable = () => {
+    setIsSummaryCollapsed(!isSummaryCollapsed);
+  };
+
+  const toggleDetailTable = () => {
+    setIsDetailCollapsed(!isDetailCollapsed);
+  };
 
   useEffect(() => {
     if (getReportFinancialSuccess === true && reportFinancial) {
@@ -320,10 +332,16 @@ const CashFlowStatementReportBodyAll = ({ reportId }: ICashFlowStatementReportBo
       </header>
       <section className="relative mx-1 text-text-neutral-secondary">
         <div className="mb-16px flex justify-between text-xs font-semibold text-surface-brand-secondary">
-          <p>一、項目彙總格式</p>
+          <div className="flex items-center">
+            <p>一、項目彙總格式</p>
+            <CollapseButton onClick={toggleSummaryTable} isCollapsed={isSummaryCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        {reportFinancial && reportFinancial.general && renderTable(reportFinancial.general, 0, 10)}
+        {!isSummaryCollapsed &&
+          reportFinancial &&
+          reportFinancial.general &&
+          renderTable(reportFinancial.general, 0, 10)}
       </section>
       {renderedFooter(1)}
     </div>
@@ -359,10 +377,16 @@ const CashFlowStatementReportBodyAll = ({ reportId }: ICashFlowStatementReportBo
         </div>
 
         <div className="mb-1 mt-8 flex justify-between text-xs font-semibold text-surface-brand-secondary">
-          <p>二、細項分類格式</p>
+          <div className="flex items-center">
+            <p>二、細項分類格式</p>
+            <CollapseButton onClick={toggleDetailTable} isCollapsed={isDetailCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        {reportFinancial && reportFinancial.details && renderTable(reportFinancial.details, 0, 3)}
+        {!isDetailCollapsed &&
+          reportFinancial &&
+          reportFinancial.details &&
+          renderTable(reportFinancial.details, 0, 3)}
 
         <div className="relative bottom-20 right-0 -z-10">
           <Image