From 46d435f5e49d42f13b0ce550f353d253f471253f Mon Sep 17 00:00:00 2001
From: julian <julian890701@gmail.com>
Date: Thu, 26 Sep 2024 13:50:13 +0800
Subject: [PATCH] Feat: enhance asset & voucher

---
 package.json                              |   2 +-
 src/components/asset/asset_item.tsx       |  14 +--
 src/components/asset/asset_list.tsx       |   2 +-
 src/components/voucher/ap_and_ar_item.tsx |   8 +-
 src/components/voucher/ap_and_ar_list.tsx |   6 +-
 src/components/voucher/voucher_item.tsx   |  50 ++++++-----
 src/components/voucher/voucher_list.tsx   | 101 ++++++++++++++++++++--
 src/constants/voucher.ts                  |   5 --
 src/locales/cn/journal.json               |   2 +-
 src/locales/en/journal.json               |   2 +-
 src/locales/tw/journal.json               |   2 +-
 11 files changed, 140 insertions(+), 54 deletions(-)
 delete mode 100644 src/constants/voucher.ts

diff --git a/package.json b/package.json
index 83e96160..8d9b4165 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+17",
+  "version": "0.8.2+18",
   "private": false,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/asset/asset_item.tsx b/src/components/asset/asset_item.tsx
index bc3b21be..252a2bac 100644
--- a/src/components/asset/asset_item.tsx
+++ b/src/components/asset/asset_item.tsx
@@ -12,7 +12,7 @@ interface IAssetItem {
   purchasePrice: number;
   accumulatedDepreciation: number;
   residualValue: number;
-  remainingTimestamp: number;
+  remainingLife: number;
   assetStatus: AssetStatus;
 }
 
@@ -26,7 +26,7 @@ const dummyData: IAssetItem = {
   purchasePrice: 100000,
   accumulatedDepreciation: 5000,
   residualValue: 5000,
-  remainingTimestamp: 1761580800,
+  remainingLife: 61580800,
   assetStatus: AssetStatus.NORMAL,
 };
 
@@ -41,7 +41,7 @@ const AssetItem = () => {
     purchasePrice,
     accumulatedDepreciation,
     residualValue,
-    remainingTimestamp,
+    remainingLife,
     assetStatus,
   } = dummyData;
 
@@ -100,9 +100,9 @@ const AssetItem = () => {
     };
   };
 
-  const remainingYears = timestampToYMD(remainingTimestamp).years;
-  const remainingMonths = timestampToYMD(remainingTimestamp).months;
-  const remainingDays = timestampToYMD(remainingTimestamp).days;
+  const remainingYears = timestampToYMD(remainingLife).years;
+  const remainingMonths = timestampToYMD(remainingLife).months;
+  const remainingDays = timestampToYMD(remainingLife).days;
 
   const remainingProcessBar = (
     <div className="relative h-5px w-7/10 overflow-hidden rounded-full bg-surface-neutral-depth">
@@ -124,7 +124,7 @@ const AssetItem = () => {
   const assetStatusString = t(`asset:ASSET.STATUS_${assetStatus.toUpperCase()}`);
 
   const displayedRemainingLife =
-    assetStatus === AssetStatus.NORMAL && remainingTimestamp > 0 ? (
+    assetStatus === AssetStatus.NORMAL && remainingLife > 0 ? (
       <div className="flex flex-col items-end">
         {/* Info: (20240925 - Julian) Remaining count */}
         <div className="flex items-center gap-4px">
diff --git a/src/components/asset/asset_list.tsx b/src/components/asset/asset_list.tsx
index 8e5cae9e..94aae7bd 100644
--- a/src/components/asset/asset_list.tsx
+++ b/src/components/asset/asset_list.tsx
@@ -71,7 +71,7 @@ const AssetList = () => {
         <Button
           type="button"
           variant="tertiaryOutline"
-          // ToDo: (20240925 - Julian) Open asset export modal
+          // ToDo: (20240925 - Julian) export to pdf
         >
           <MdOutlineFileDownload />
           <p>{t('asset:ASSET.EXPORT_ASSET_LIST')}</p>
diff --git a/src/components/voucher/ap_and_ar_item.tsx b/src/components/voucher/ap_and_ar_item.tsx
index e60170e4..78f28940 100644
--- a/src/components/voucher/ap_and_ar_item.tsx
+++ b/src/components/voucher/ap_and_ar_item.tsx
@@ -2,13 +2,13 @@ import Image from 'next/image';
 import CalendarIcon from '@/components/calendar_icon/calendar_icon';
 import { numberWithCommas } from '@/lib/utils/common';
 import { FaDownload, FaUpload } from 'react-icons/fa';
-import { VoucherType } from '@/constants/voucher';
+import { VoucherType } from '@/constants/account';
 import { FiRepeat } from 'react-icons/fi';
 
 const APandARItem = () => {
   // ToDo: (20240924 - Julian) dummy data
   const date: number = new Date().getTime() / 1000;
-  const voucherType: VoucherType = VoucherType.PAYMENT;
+  const voucherType: VoucherType = VoucherType.EXPENSE;
   const voucherNo: string = '20240924-0001';
   const counterparty = {
     code: '59373022',
@@ -26,12 +26,12 @@ const APandARItem = () => {
   const displayedDate = <CalendarIcon timestamp={date} />;
 
   const displayedVoucherNo =
-    voucherType === VoucherType.PAYMENT ? (
+    voucherType === VoucherType.EXPENSE ? (
       <div className="mx-auto flex w-fit items-center gap-4px rounded-full bg-badge-surface-soft-success px-8px py-4px">
         <FaUpload size={14} className="text-surface-state-success-dark" />
         <p className="text-sm text-text-state-success-solid">{voucherNo}</p>
       </div>
-    ) : voucherType === VoucherType.RECEIVED ? (
+    ) : voucherType === VoucherType.RECEIVE ? (
       <div className="mx-auto flex w-fit items-center gap-4px rounded-full bg-badge-surface-soft-error px-8px py-4px">
         <FaDownload size={14} className="text-surface-state-error-dark" />
         <p className="text-sm text-text-state-error-solid">{voucherNo}</p>
diff --git a/src/components/voucher/ap_and_ar_list.tsx b/src/components/voucher/ap_and_ar_list.tsx
index 64c6969d..d879f706 100644
--- a/src/components/voucher/ap_and_ar_list.tsx
+++ b/src/components/voucher/ap_and_ar_list.tsx
@@ -33,8 +33,8 @@ const APandARList = () => {
   const sideBorderStyles = 'border-r border-stroke-neutral-quaternary border-b';
 
   // Info: (20240924 - Julian) 日期排序按鈕
-  const displayedIssuedDate = SortingButton({
-    string: t('journal:VOUCHER.ISSUED_DATE'),
+  const displayedDate = SortingButton({
+    string: t('journal:VOUCHER.VOUCHER_DATE'),
     sortOrder: dateSort,
     setSortOrder: setDateSort,
   });
@@ -77,7 +77,7 @@ const APandARList = () => {
         {/* Info: (20240924 - Julian) ---------------- Table Header ---------------- */}
         <div className="table-header-group h-60px bg-surface-neutral-surface-lv1 text-sm text-text-neutral-tertiary">
           <div className="table-row">
-            <div className={`${tableCellStyles} ${sideBorderStyles}`}>{displayedIssuedDate}</div>
+            <div className={`${tableCellStyles} ${sideBorderStyles}`}>{displayedDate}</div>
             <div className={`${tableCellStyles} ${sideBorderStyles}`}>
               {t('journal:VOUCHER.VOUCHER_NO')}
             </div>
diff --git a/src/components/voucher/voucher_item.tsx b/src/components/voucher/voucher_item.tsx
index d7b19b10..75c3bc8a 100644
--- a/src/components/voucher/voucher_item.tsx
+++ b/src/components/voucher/voucher_item.tsx
@@ -4,29 +4,35 @@ import { numberWithCommas } from '@/lib/utils/common';
 import { FaUpload, FaDownload } from 'react-icons/fa';
 import { FiRepeat } from 'react-icons/fi';
 import { checkboxStyle } from '@/constants/display';
-import { VoucherType } from '@/constants/voucher';
+import { VoucherType } from '@/constants/account';
 
-const VoucherItem = ({ isSelecting }: { isSelecting: boolean }) => {
-  // ToDo: (20240920 - Julian) dummy data
-  const date: number = new Date().getTime() / 1000;
-  const voucherNo: string = '20240920-0001';
-  const voucherType: VoucherType = VoucherType.RECEIVED;
-  const note: string = 'Printer-0001';
-  const accounting: string[] = [
-    '1141 Accounts receivable',
-    '1141 Accounts receivable',
-    '1141 Accounts receivable',
-  ];
-  const credit: number[] = [100200];
-  const debit: number[] = [100000, 200];
-  const counterparty = {
-    code: '59373022',
-    name: 'PX Mart',
+// Info: (20240926 - Julian) temp interface
+export interface IVoucherBeta {
+  id: number;
+  date: number;
+  voucherNo: string;
+  voucherType: VoucherType;
+  note: string;
+  accounting: string[];
+  credit: number[];
+  debit: number[];
+  counterparty: {
+    code: string;
+    name: string;
   };
-  const issuer = {
-    avatar: 'https://i.pinimg.com/originals/51/7d/4e/517d4ea58fa6c12aca4e035cdbf257b6.jpg',
-    name: 'Julian',
+  issuer: {
+    avatar: string;
+    name: string;
   };
+}
+interface IVoucherItemProps {
+  voucher: IVoucherBeta;
+  isSelecting: boolean;
+}
+
+const VoucherItem = ({ voucher, isSelecting }: IVoucherItemProps) => {
+  const { date, voucherNo, voucherType, note, accounting, credit, debit, counterparty, issuer } =
+    voucher;
 
   // Info: (20240920 - Julian) 借貸總和
   const total = credit.reduce((acc, cur) => acc + cur, 0);
@@ -44,12 +50,12 @@ const VoucherItem = ({ isSelecting }: { isSelecting: boolean }) => {
   );
 
   const displayedVoucherNo =
-    voucherType === VoucherType.RECEIVED ? (
+    voucherType === VoucherType.RECEIVE ? (
       <div className="relative top-20px mx-auto flex w-fit items-center gap-4px rounded-full bg-badge-surface-soft-error px-8px py-4px">
         <FaDownload size={14} className="text-surface-state-error-dark" />
         <p className="text-sm text-text-state-error-solid">{voucherNo}</p>
       </div>
-    ) : voucherType === VoucherType.PAYMENT ? (
+    ) : voucherType === VoucherType.EXPENSE ? (
       <div className="relative top-20px mx-auto flex w-fit items-center gap-4px rounded-full bg-badge-surface-soft-success px-8px py-4px">
         <FaUpload size={14} className="text-surface-state-success-dark" />
         <p className="text-sm text-text-state-success-solid">{voucherNo}</p>
diff --git a/src/components/voucher/voucher_list.tsx b/src/components/voucher/voucher_list.tsx
index 7c455fb7..f6c1c9dd 100644
--- a/src/components/voucher/voucher_list.tsx
+++ b/src/components/voucher/voucher_list.tsx
@@ -3,12 +3,97 @@ import { useTranslation } from 'next-i18next';
 import { MdOutlineFileDownload } from 'react-icons/md';
 import { FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from '@/components/button/button';
-import VoucherItem from '@/components/voucher/voucher_item';
+import VoucherItem, { IVoucherBeta } from '@/components/voucher/voucher_item';
 import Pagination from '@/components/pagination/pagination';
 import SortingButton from '@/components/voucher/sorting_button';
 import { checkboxStyle } from '@/constants/display';
 import { SortOrder } from '@/constants/sort';
 import { useGlobalCtx } from '@/contexts/global_context';
+import { VoucherType } from '@/constants/account';
+
+const dummyVoucherList: IVoucherBeta[] = [
+  {
+    id: 1,
+    date: 1632511200,
+    voucherNo: '20240920-0001',
+    voucherType: VoucherType.RECEIVE,
+    note: 'Printer-0001',
+    accounting: [
+      '1141 Accounts receivable',
+      '1141 Accounts receivable',
+      '1141 Accounts receivable',
+    ],
+    credit: [100200],
+    debit: [100000, 200],
+    counterparty: {
+      code: '59373022',
+      name: 'PX Mart',
+    },
+    issuer: {
+      avatar: 'https://i.pinimg.com/originals/51/7d/4e/517d4ea58fa6c12aca4e035cdbf257b6.jpg',
+      name: 'Julian',
+    },
+  },
+  {
+    id: 2,
+    date: 1662511200,
+    voucherNo: '20240922-0002',
+    voucherType: VoucherType.EXPENSE,
+    note: 'Printer-0002',
+    accounting: ['1141 Accounts receivable', '1141 Accounts receivable'],
+    credit: [10200],
+    debit: [10200],
+    counterparty: {
+      code: '59373022',
+      name: 'PX Mart',
+    },
+    issuer: {
+      avatar: 'https://i.pinimg.com/originals/51/7d/4e/517d4ea58fa6c12aca4e035cdbf257b6.jpg',
+      name: 'Julian',
+    },
+  },
+  {
+    id: 3,
+    date: 1672592800,
+    voucherNo: '20240925-0001',
+    voucherType: VoucherType.RECEIVE,
+    note: 'Scanner-0001',
+    accounting: [
+      '1141 Accounts receivable',
+      '1141 Accounts receivable',
+      '1141 Accounts receivable',
+      '1141 Accounts receivable',
+    ],
+    credit: [100000, 200],
+    debit: [100000, 200],
+    counterparty: {
+      code: '59373022',
+      name: 'PX Mart',
+    },
+    issuer: {
+      avatar: 'https://i.pinimg.com/originals/51/7d/4e/517d4ea58fa6c12aca4e035cdbf257b6.jpg',
+      name: 'Julian',
+    },
+  },
+  {
+    id: 4,
+    date: 1702511200,
+    voucherNo: '20240922-0002',
+    voucherType: VoucherType.TRANSFER,
+    note: 'Mouse-0001',
+    accounting: ['1141 Accounts receivable', '1141 Accounts receivable'],
+    credit: [300],
+    debit: [300],
+    counterparty: {
+      code: '59373022',
+      name: 'PX Mart',
+    },
+    issuer: {
+      avatar: 'https://i.pinimg.com/originals/51/7d/4e/517d4ea58fa6c12aca4e035cdbf257b6.jpg',
+      name: 'Julian',
+    },
+  },
+];
 
 const VoucherList = () => {
   const { t } = useTranslation('common');
@@ -32,8 +117,8 @@ const VoucherList = () => {
   const selectToggleHandler = () => setIsSelecting((prev) => !prev);
 
   // Info: (20240920 - Julian) 日期排序按鈕
-  const displayedIssuedDate = SortingButton({
-    string: t('journal:VOUCHER.ISSUED_DATE'),
+  const displayedDate = SortingButton({
+    string: t('journal:VOUCHER.VOUCHER_DATE'),
     sortOrder: dateSort,
     setSortOrder: setDateSort,
   });
@@ -91,8 +176,8 @@ const VoucherList = () => {
     </div>
   );
 
-  const displayedVoucherList = Array.from({ length: 10 }, (_, i) => i + 1).map((i) => {
-    return <VoucherItem key={i} isSelecting={isSelecting} />;
+  const displayedVoucherList = dummyVoucherList.map((voucher) => {
+    return <VoucherItem key={voucher.id} voucher={voucher} isSelecting={isSelecting} />;
   });
 
   return (
@@ -105,10 +190,10 @@ const VoucherList = () => {
         {/* Info: (20240920 - Julian) ---------------- Table Header ---------------- */}
         <div className="table-header-group h-60px border-b bg-surface-neutral-surface-lv1 text-sm text-text-neutral-tertiary">
           <div className="table-row">
-            <div className={checkStyle}>
+            <div className={`${checkStyle} border-b border-stroke-neutral-quaternary`}>
               <input type="checkbox" className={checkboxStyle} />
             </div>
-            <div className={`${tableCellStyles} ${sideBorderStyles}`}>{displayedIssuedDate}</div>
+            <div className={`${tableCellStyles} ${sideBorderStyles}`}>{displayedDate}</div>
             <div className={`${tableCellStyles} ${sideBorderStyles}`}>
               {t('journal:VOUCHER.VOUCHER_NO')}
             </div>
@@ -133,7 +218,7 @@ const VoucherList = () => {
         <div className="table-row-group">{displayedVoucherList}</div>
 
         {/* Info: (20240920 - Julian) ---------------- Table Footer(排版用) ---------------- */}
-        <div className="table-footer-group h-40px"></div>
+        <div className="table-footer-group h-20px"></div>
       </div>
 
       {/* Info: (20240920 - Julian) Pagination */}
diff --git a/src/constants/voucher.ts b/src/constants/voucher.ts
deleted file mode 100644
index 5ce26438..00000000
--- a/src/constants/voucher.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum VoucherType {
-  RECEIVED = 'Received',
-  PAYMENT = 'Payment',
-  TRANSFER = 'Transfer',
-}
diff --git a/src/locales/cn/journal.json b/src/locales/cn/journal.json
index 660dd051..cc4fbbc1 100644
--- a/src/locales/cn/journal.json
+++ b/src/locales/cn/journal.json
@@ -200,7 +200,7 @@
     "AP_AND_AR_PAGE_TITLE": "应收/应付清单",
     "ADD_NEW_VOUCHER": "新增传票",
     "EXPORT_VOUCHER": "汇出传票",
-    "ISSUED_DATE": "发行日期",
+    "VOUCHER_DATE": "传票日期",
     "VOUCHER_NO": "传票号码",
     "NOTE": "备注",
     "ACCOUNTING": "会计科目",
diff --git a/src/locales/en/journal.json b/src/locales/en/journal.json
index e7331ec2..d24c17a0 100644
--- a/src/locales/en/journal.json
+++ b/src/locales/en/journal.json
@@ -200,7 +200,7 @@
     "AP_AND_AR_PAGE_TITLE": "Payable/Receivable List",
     "ADD_NEW_VOUCHER": "Add New Voucher",
     "EXPORT_VOUCHER": "Export Voucher",
-    "ISSUED_DATE": "Issued Date",
+    "VOUCHER_DATE": "Voucher Date",
     "VOUCHER_NO": "Voucher No.",
     "NOTE": "Note",
     "ACCOUNTING": "Accounting",
diff --git a/src/locales/tw/journal.json b/src/locales/tw/journal.json
index 99134aea..d1b98765 100644
--- a/src/locales/tw/journal.json
+++ b/src/locales/tw/journal.json
@@ -200,7 +200,7 @@
     "AP_AND_AR_PAGE_TITLE": "應收/應付清單",
     "ADD_NEW_VOUCHER": "新增傳票",
     "EXPORT_VOUCHER": "匯出傳票",
-    "ISSUED_DATE": "發行日期",
+    "VOUCHER_DATE": "傳票日期",
     "VOUCHER_NO": "傳票號碼",
     "NOTE": "備註",
     "ACCOUNTING": "會計科目",