Feature/voucher detail page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+36",
+  "version": "0.8.2+37",
   "private": false,
   "scripts": {
     "dev": "next dev",

src/components/certificate/certificate_selection.tsx

@@ -91,7 +91,7 @@ const CertificateSelection: React.FC<CertificateSelectionProps> = ({
   return (
     <div className={`${className} w-full flex-col items-center`} ref={containerRef}>
       <div
-        className={`flex h-56 w-full flex-col ${isSelectable ? 'justify-start' : 'justify-center'} overflow-hidden rounded-md border border-stroke-neutral-quaternary px-8 pt-5 shadow-inset-lg`}
+        className={`flex h-56 w-full flex-col ${isSelectable ? 'justify-start' : 'justify-center'} overflow-hidden rounded-md border border-stroke-neutral-quaternary bg-surface-neutral-surface-lv1 px-8 pt-5 shadow-inset-lg`}
         style={{
           maxWidth: `${maxWidth}px`,
         }}

src/components/voucher/ap_and_ar_item.tsx

@@ -5,7 +5,7 @@ import { FaDownload, FaUpload } from 'react-icons/fa';
 import { VoucherType } from '@/constants/account';
 import { FiRepeat } from 'react-icons/fi';
 
-const APandARItem = () => {
+const APandARItem: React.FC = () => {
   // ToDo: (20240924 - Julian) dummy data
   const date: number = new Date().getTime() / 1000;
   const voucherType: VoucherType = VoucherType.EXPENSE;

src/components/voucher/ap_and_ar_list.tsx

@@ -10,7 +10,7 @@ enum ListType {
   PAYABLE = 'Payable',
 }
 
-const APandARList = () => {
+const APandARList: React.FC = () => {
   const { t } = useTranslation('common');
 
   // ToDo: (20240924 - Julian) tabs 切換

src/components/voucher/ap_and_ar_page_body.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import APandARList from '@/components/voucher/ap_and_ar_list';
 import Tabs from '@/components/tabs/tabs';
 
-const APandARPageBody = () => {
+const APandARPageBody: React.FC = () => {
   const [activeTab, setActiveTab] = useState(0);
 
   return (

src/components/voucher/new_voucher_form.tsx

@@ -37,7 +37,7 @@ enum RecurringUnit {
   WEEK = 'week',
 }
 
-const NewVoucherForm = () => {
+const NewVoucherForm: React.FC = () => {
   const { t } = useTranslation('common');
   const router = useRouter();
 
@@ -536,10 +536,9 @@ const NewVoucherForm = () => {
         <div className="col-span-3 font-semibold text-text-neutral-invert">
           {t('journal:VOUCHER.DEBIT')}
         </div>
-        <div className="col-span-3 font-semibold text-text-neutral-invert">
+        <div className="col-span-3 col-end-13 font-semibold text-text-neutral-invert">
           {t('journal:VOUCHER.CREDIT')}
         </div>
-        <div className=""></div>
 
         {/* Info: (20240927 - Julian) Table Body */}
         {voucherLines}
@@ -704,7 +703,7 @@ const NewVoucherForm = () => {
           <div
             ref={counterpartyRef}
             onClick={counterSearchToggleHandler}
-            className={`flex w-full items-center justify-between rounded-sm border bg-input-surface-input-background px-12px py-10px outline-none hover:cursor-pointer hover:border-input-stroke-selected ${isSearchCounterparty ? 'border-input-stroke-selected' : isShowCounterHint ? inputStyle.ERROR : 'border-input-stroke-input text-input-text-input-filled'}`}
+            className={`flex w-full items-center justify-between gap-8px rounded-sm border bg-input-surface-input-background px-12px py-10px outline-none hover:cursor-pointer hover:border-input-stroke-selected ${isSearchCounterparty ? 'border-input-stroke-selected' : isShowCounterHint ? inputStyle.ERROR : 'border-input-stroke-input text-input-text-input-filled'}`}
           >
             {displayedCounterparty}
             <div className="h-20px w-20px">

src/components/voucher/sorting_button.tsx

@@ -1,17 +1,16 @@
 // Info: (20240924 - tzuhan) To Julian, this component is seperated from your VourchList
 // Info: (20240920 - Julian) 排序按鈕
+import React from 'react';
 import { SortOrder } from '@/constants/sort';
 import { BsFillTriangleFill } from 'react-icons/bs';
 
-const SortingButton = ({
-  string,
-  sortOrder,
-  setSortOrder,
-}: {
+interface ISortingButtonProps {
   string: string;
   sortOrder: null | SortOrder;
   setSortOrder: (sortOrder: null | SortOrder) => void;
-}) => {
+}
+
+const SortingButton: React.FC<ISortingButtonProps> = ({ string, sortOrder, setSortOrder }) => {
   // Info: (20240920 - Julian) 初始無排序 -> 點擊後變成 ASC -> 再點擊變成 DESC -> 再點擊變回無排序
   const clickHandler = () => {
     switch (sortOrder) {

src/components/voucher/voucher_item.tsx

@@ -13,7 +13,7 @@ interface IVoucherItemProps {
   isCheckBoxOpen: boolean;
 }
 
-const VoucherItem = ({ voucher, isCheckBoxOpen }: IVoucherItemProps) => {
+const VoucherItem: React.FC<IVoucherItemProps> = ({ voucher, isCheckBoxOpen }) => {
   const {
     date,
     voucherNo,

src/components/voucher/voucher_line_item.tsx

@@ -8,18 +8,7 @@ import { useAccountingCtx } from '@/contexts/accounting_context';
 import { IAccount } from '@/interfaces/accounting_account';
 import { numberWithCommas } from '@/lib/utils/common';
 
-const VoucherLineItem = ({
-  flagOfClear,
-  flagOfSubmit,
-  accountIsNull,
-  amountNotEqual,
-  amountIsZero,
-  deleteHandler,
-  accountTitleHandler,
-  particularsChangeHandler,
-  debitChangeHandler,
-  creditChangeHandler,
-}: {
+interface IVoucherLineItemProps {
   flagOfClear: boolean;
   flagOfSubmit: boolean;
   accountIsNull: boolean;
@@ -30,6 +19,19 @@ const VoucherLineItem = ({
   particularsChangeHandler: (particulars: string) => void;
   debitChangeHandler: (debit: number) => void;
   creditChangeHandler: (credit: number) => void;
+}
+
+const VoucherLineItem: React.FC<IVoucherLineItemProps> = ({
+  flagOfClear,
+  flagOfSubmit,
+  accountIsNull,
+  amountNotEqual,
+  amountIsZero,
+  deleteHandler,
+  accountTitleHandler,
+  particularsChangeHandler,
+  debitChangeHandler,
+  creditChangeHandler,
 }) => {
   const { t } = useTranslation('common');
   const { accountList } = useAccountingCtx();
@@ -260,7 +262,7 @@ const VoucherLineItem = ({
         <div
           ref={accountRef}
           onClick={accountEditingHandler}
-          className={`flex w-full items-center justify-between rounded-sm border bg-input-surface-input-background px-12px py-10px outline-none hover:cursor-pointer hover:border-input-stroke-selected ${isAccountingMenuOpen ? 'border-input-stroke-selected' : accountStyle}`}
+          className={`flex w-full items-center justify-between gap-8px rounded-sm border bg-input-surface-input-background px-12px py-10px outline-none hover:cursor-pointer hover:border-input-stroke-selected ${isAccountingMenuOpen ? 'border-input-stroke-selected' : accountStyle}`}
         >
           {isEditAccounting}
           <div className="h-20px w-20px">

src/components/voucher/voucher_list.tsx

@@ -11,7 +11,7 @@ import { SortOrder } from '@/constants/sort';
 import { useGlobalCtx } from '@/contexts/global_context';
 import { IVoucherBeta, dummyVoucherList } from '@/interfaces/voucher';
 
-const VoucherList = () => {
+const VoucherList: React.FC = () => {
   const { t } = useTranslation('common');
   const { exportVoucherModalVisibilityHandler } = useGlobalCtx();
 

src/components/voucher/voucher_list_page_body.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/button/button';
 import VoucherList from '@/components/voucher/voucher_list';
 import Tabs from '@/components/tabs/tabs';
 
-const VoucherListPageBody = () => {
+const VoucherListPageBody: React.FC = () => {
   const { t } = useTranslation('common');
   const [activeTab, setActiveTab] = useState(0);
 

src/constants/api_connection.ts

@@ -524,7 +524,11 @@ export const APIConfig: Record<IAPIName, IAPIConfig> = {
     method: HttpMethod.GET,
     path: APIPath.CERTIFICATE_LIST,
   }),
-
+  [APIName.VOUCHER_GET_BY_ID_V2]: createConfig({
+    name: APIName.VOUCHER_GET_BY_ID_V2,
+    method: HttpMethod.GET,
+    path: APIPath.VOUCHER_GET_BY_ID_V2,
+  }),
   /**
    * Info: (20241007 - Murky)
    * Below is v2 API

src/interfaces/api_connection.ts

@@ -65,7 +65,8 @@ export type IAPIName =
   | 'GET_PROJECT_BY_ID'
   | 'UPDATE_PROJECT_BY_ID'
   | 'PUBLIC_KEY_GET'
-  | 'CERTIFICATE_LIST';
+  | 'CERTIFICATE_LIST'
+  | 'VOUCHER_GET_BY_ID_V2';
 
 export type IHttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 

src/pages/users/accounting/add_new_voucher.tsx

@@ -5,7 +5,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { ILocale } from '@/interfaces/locale';
 import NewVoucherForm from '@/components/voucher/new_voucher_form';
 
-const AddNewVoucherPage = () => {
+const AddNewVoucherPage: React.FC = () => {
   const { t } = useTranslation('common');
 
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);

src/pages/users/accounting/payable_receivable_list.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import Head from 'next/head';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { ILocale } from '@/interfaces/locale';
 import APandARPageBody from '@/components/voucher/ap_and_ar_page_body';
 
-const APandARListPage = () => {
+const APandARListPage: React.FC = () => {
   const { t } = useTranslation('common');
 
   return (

src/pages/users/accounting/voucher_list.tsx

@@ -5,7 +5,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { ILocale } from '@/interfaces/locale';
 import VoucherListPageBody from '@/components/voucher/voucher_list_page_body';
 
-const VoucherListPage = () => {
+const VoucherListPage: React.FC = () => {
   const { t } = useTranslation('common');
 
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);