-
-
-
{voucherNumber}
-
+ );
+ const displayedAccountingName = (
+
+
{ledger.accountingTitle}
);
- const displayedNote = (
-
- {particulars}
-
- );
-
- const displayedAccountingCode = (
-
- );
- const displayedAccountingName = (
-
-
{ledger.accountingTitle}
-
- );
-
- // Info: (20241118 - Anna) 使用傳入的 creditAmount、debitAmount、balance，而非 ledgerItemsData 的遍歷
- const displayedCredit = (
-
-
- {numberWithCommas(ledger.creditAmount)}
-
-
- );
+ // Info: (20241118 - Anna) 使用傳入的 creditAmount、debitAmount、balance，而非 ledgerItemsData 的遍歷
+ const displayedCredit = (
+
+
+ {numberWithCommas(ledger.creditAmount)}
+
+
+ );
- const displayedDebit = (
-
-
{numberWithCommas(ledger.debitAmount)}
-
- );
+ const displayedDebit = (
+
+
{numberWithCommas(ledger.debitAmount)}
+
+ );
- const displayedBalance = (
-
-
{numberWithCommas(ledger.balance)}
-
- );
+ const displayedBalance = (
+
+
{numberWithCommas(ledger.balance)}
+
+ );
- return (
-
- {/* Info: (20240920 - Julian) Select */}
-
{displayedCheckbox}
- {/* Info: (20240920 - Julian) Issued Date */}
-
{displayedDate}
- {/* Info: (20241004 - Anna) Accounting */}
-
{displayedAccountingCode}
-
- {displayedAccountingName}
+ return (
+
+ {/* Info: (20240920 - Julian) Issued Date */}
+
{displayedDate}
+ {/* Info: (20241004 - Anna) Accounting */}
+
{displayedAccountingCode}
+
+ {displayedAccountingName}
+
+ {/* Info: (20240920 - Julian) Voucher No */}
+
{displayedVoucherNo}
+ {/* Info: (20240920 - Julian) Note */}
+
{displayedNote}
+ {/* Info: (202401101 - Anna) Debit */}
+
{displayedDebit}
+ {/* Info: (202401101 - Anna) Credit */}
+
{displayedCredit}
+ {/* Info: (20241004 - Anna) Balance */}
+
{displayedBalance}
- {/* Info: (20240920 - Julian) Voucher No */}
-
{displayedVoucherNo}
- {/* Info: (20240920 - Julian) Note */}
-
{displayedNote}
- {/* Info: (202401101 - Anna) Debit */}
-
{displayedDebit}
- {/* Info: (202401101 - Anna) Credit */}
-
{displayedCredit}
- {/* Info: (20241004 - Anna) Balance */}
-
{displayedBalance}
-
- );
-});
+ );
+ }
+);
export default LedgerItem;
diff --git a/src/components/ledger/ledger_list.tsx b/src/components/ledger/ledger_list.tsx
index 3d7b013b8..c09f488e9 100644
--- a/src/components/ledger/ledger_list.tsx
+++ b/src/components/ledger/ledger_list.tsx
@@ -2,9 +2,6 @@ import React, { useState, useRef } from 'react';
import { useTranslation } from 'next-i18next';
import LedgerItem from '@/components/ledger/ledger_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 PrintButton from '@/components/button/print_button';
import DownloadButton from '@/components/button/download_button';
import { ILedgerPayload } from '@/interfaces/ledger';
@@ -18,6 +15,8 @@ interface LedgerListProps {
loading: boolean; // Info: (20241118 - Anna) 接收父组件傳遞的loading狀態
selectedDateRange: { startTimeStamp: number; endTimeStamp: number }; // Info: (20241218 - Anna) 從父組件傳來的日期範圍
labelType: string; // Info: (20241218 - Anna) 從父組件傳來的 labelType
+ selectedStartAccountNo: string;
+ selectedEndAccountNo: string;
}
const LedgerList: React.FunctionComponent
= ({
@@ -25,6 +24,8 @@ const LedgerList: React.FunctionComponent = ({
loading,
selectedDateRange,
labelType,
+ selectedStartAccountNo,
+ selectedEndAccountNo,
}) => {
const { selectedCompany } = useUserCtx();
const companyId = selectedCompany?.id;
@@ -38,36 +39,10 @@ const LedgerList: React.FunctionComponent = ({
// Info: (20241118 - Anna) 確保 ledgerItemsData 是一個有效的陣列
const ledgerItemsData = Array.isArray(ledgerData?.items?.data) ? ledgerData.items.data : [];
- // Info: (20240920 - Julian) 排序狀態
- const [dateSort, setDateSort] = useState(null);
- const [creditSort, setCreditSort] = useState(null);
- const [debitSort, setDebitSort] = useState(null);
-
// Info: (20240920 - Julian) css string
const tableCellStyles = 'text-center align-middle';
const sideBorderStyles = 'border-r border-b border-stroke-neutral-quaternary';
- // Info: (20240920 - Julian) 日期排序按鈕
- const displayedDate = SortingButton({
- string: t('journal:VOUCHER.VOUCHER_DATE'),
- sortOrder: dateSort,
- setSortOrder: setDateSort,
- });
-
- // Info: (20240920 - Julian) credit 排序按鈕
- const displayedCredit = SortingButton({
- string: t('journal:JOURNAL.CREDIT'),
- sortOrder: creditSort,
- setSortOrder: setCreditSort,
- });
-
- // Info: (20240920 - Julian) debit 排序按鈕
- const displayedDebit = SortingButton({
- string: t('journal:JOURNAL.DEBIT'),
- sortOrder: debitSort,
- setSortOrder: setDebitSort,
- });
-
const handlePrint = useReactToPrint({
contentRef: printRef, // Info: (20241203 - Anna) 指定需要打印的內容 Ref
documentTitle: `分類帳`,
@@ -177,7 +152,11 @@ const LedgerList: React.FunctionComponent = ({
balance,
// Info: (20241224 - Anna) 將字串轉換為整數
voucherId: typeof voucherId === 'string' ? parseInt(voucherId, 10) : voucherId,
- }} // Info: (20241118 - Anna) 確保每個欄位有預設值
+ }}
+ selectedDateRange={selectedDateRange}
+ selectedStartAccountNo={selectedStartAccountNo}
+ selectedEndAccountNo={selectedEndAccountNo}
+ selectedReportType={labelType}
/>
);
});
@@ -191,19 +170,10 @@ const LedgerList: React.FunctionComponent = ({
{/* Info: (20240920 - Julian) ---------------- Table Header ---------------- */}
-
- {displayedDate}
+ {t('journal:VOUCHER.VOUCHER_DATE')}
= ({
- {displayedDebit}
+ {t('journal:JOURNAL.DEBIT')}
- {displayedCredit}
+ {t('journal:JOURNAL.CREDIT')}
{
+ const router = useRouter();
+
const { t } = useTranslation(['journal', 'date_picker', 'filter_section_type', 'reports']);
const { selectedCompany } = useUserCtx();
// const [financialReport, setFinancialReport] = useState
(null); // Info: (20241205 - Anna) 用來看回傳的會計科目 Add state to hold the financial report data for debugging output
@@ -34,7 +37,7 @@ const LedgerPageBody = () => {
const [otherComprehensiveIncomeOptions, setOtherComprehensiveIncomeOptions] = useState(
[]
);
- const [selectedReportType, setSelectedReportType] = useState(ReportType.General);
+ const [selectedReportType, setSelectedReportType] = useState(ReportType.All);
const [selectedDateRange, setSelectedDateRange] = useState({
startTimeStamp: 0,
endTimeStamp: 0,
@@ -48,6 +51,27 @@ const LedgerPageBody = () => {
APIName.LEDGER_LIST
);
+ // Info: (20241225 - Anna) 初始時嘗試從 URL 中獲取篩選條件
+ useEffect(() => {
+ const {
+ startDate = 0,
+ endDate = 0,
+ labelType = ReportType.All,
+ startAccountNo = '',
+ endAccountNo = '',
+ } = router.query;
+
+ if (startDate && endDate) {
+ setSelectedDateRange({
+ startTimeStamp: Number(startDate),
+ endTimeStamp: Number(endDate),
+ });
+ setSelectedReportType(labelType as ReportType);
+ setSelectedStartAccountNo(String(startAccountNo));
+ setSelectedEndAccountNo(String(endAccountNo));
+ }
+ }, [router.query]);
+
useEffect(() => {
if (
selectedCompany?.id &&
@@ -236,6 +260,20 @@ const LedgerPageBody = () => {
{t('journal:LEDGER.LABEL_TYPE')}
@@ -306,6 +330,8 @@ const LedgerPageBody = () => {
loading={!!isLoading} // Info: (20241118 - Anna) 使用 !! 確保 loading 是 boolean
selectedDateRange={selectedDateRange} // Info: (20241218 - Anna) 傳遞日期範圍
labelType={selectedReportType} // Info: (20241218 - Anna) 傳遞報表類型（general/detailed/all）
+ selectedStartAccountNo={selectedStartAccountNo}
+ selectedEndAccountNo={selectedEndAccountNo}
/>
diff --git a/src/pages/users/accounting/[voucherId]/index.tsx b/src/pages/users/accounting/[voucherId]/index.tsx
index f8da1f1c1..2796b2932 100644
--- a/src/pages/users/accounting/[voucherId]/index.tsx
+++ b/src/pages/users/accounting/[voucherId]/index.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
import Head from 'next/head';
import { GetServerSideProps } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -9,6 +10,32 @@ import { ISUNFA_ROUTE } from '@/constants/url';
const VoucherDetailPage: React.FC<{ voucherId: string }> = ({ voucherId }) => {
const { t } = useTranslation('common');
+ const router = useRouter(); // Info: (20241225 - Anna) 使用 router 獲取查詢參數
+ const [goBackUrl, setGoBackUrl] = useState(ISUNFA_ROUTE.VOUCHER_LIST); // Info: (20241225 - Anna) 預設返回 URL 為傳票清單頁
+
+ useEffect(() => {
+ // Info: (20241225 - Anna) 從 router.query 中獲取篩選條件
+ const {
+ from = '',
+ startDate = '',
+ endDate = '',
+ labelType = '',
+ startAccountNo = '',
+ endAccountNo = '',
+ } = router.query;
+
+ // Info: (20241225 - Anna) 檢查 URL 查詢參數是否包含from=ledger
+ if (from === 'ledger') {
+ const queryString = new URLSearchParams({
+ startDate: String(startDate),
+ endDate: String(endDate),
+ labelType: String(labelType),
+ startAccountNo: String(startAccountNo),
+ endAccountNo: String(endAccountNo),
+ }).toString();
+ setGoBackUrl(`${ISUNFA_ROUTE.LEDGER}?${queryString}`);
+ }
+ }, [router.query]);
const pageTitle = `${t('journal:VOUCHER_DETAIL_PAGE.TITLE')} ${voucherId}`;
@@ -21,7 +48,7 @@ const VoucherDetailPage: React.FC<{ voucherId: string }> = ({ voucherId }) => {
{pageTitle} - iSunFA
-
+