From 3039162fd2cad783cbf6bd172785f8982e173dda Mon Sep 17 00:00:00 2001 From: Liz Date: Tue, 1 Oct 2024 10:51:17 +0800 Subject: [PATCH 1/3] Login Animation --- package.json | 2 +- src/components/login/login_animation.tsx | 50 +++++++++++++++++++++ src/pages/beta/animation.tsx | 55 ++++++++++++++++++++++++ tailwind.config.ts | 25 +++++++++++ 4 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 src/components/login/login_animation.tsx create mode 100644 src/pages/beta/animation.tsx diff --git a/package.json b/package.json index 75841f5c..e7b01441 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iSunFA", - "version": "0.8.2+22", + "version": "0.8.2+23", "private": false, "scripts": { "dev": "next dev", diff --git a/src/components/login/login_animation.tsx b/src/components/login/login_animation.tsx new file mode 100644 index 00000000..9506ba6f --- /dev/null +++ b/src/components/login/login_animation.tsx @@ -0,0 +1,50 @@ +import { useEffect, useState } from 'react'; +import { FiHome } from 'react-icons/fi'; +import { PiGlobe } from 'react-icons/pi'; + +const LoginAnimation = () => { + const [switchTitle, setSwitchTitle] = useState(false); + + useEffect(() => { + // Info: (20240925 - Liz) 3 秒後切換 Title + const titleTimer = setTimeout(() => { + setSwitchTitle(true); + }, 3000); + + return () => { + clearTimeout(titleTimer); + }; + }, []); + + return ( +
+
+ +
+ + +
+ + {/* // Info: (20240925 - Liz) 根據 switchTitle 狀態顯示 Title */} + {!switchTitle && ( +
+

Welcome,

+

UserName

+
+ )} + + {switchTitle && ( +
+

+ iSunFA World +

+

+ Redirecting to the role selection page... +

+
+ )} +
+ ); +}; + +export default LoginAnimation; diff --git a/src/pages/beta/animation.tsx b/src/pages/beta/animation.tsx new file mode 100644 index 00000000..4d1bc0f8 --- /dev/null +++ b/src/pages/beta/animation.tsx @@ -0,0 +1,55 @@ +import Head from 'next/head'; +import React from 'react'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useTranslation } from 'next-i18next'; +import { ILocale } from '@/interfaces/locale'; +import LoginAnimation from '@/components/login/login_animation'; + +const AnimationPage = () => { + const { t } = useTranslation('common'); + + return ( + <> + + + + + {t('common:NAV_BAR.LOGIN')} - iSunFA + + + + + + + +
+ +
+ + ); +}; + +export const getServerSideProps = async ({ locale }: ILocale) => { + return { + props: { + ...(await serverSideTranslations(locale as string, [ + 'common', + 'report_401', + 'journal', + 'kyc', + 'project', + 'setting', + 'terms', + 'salary', + ])), + }, + }; +}; + +export default AnimationPage; diff --git a/tailwind.config.ts b/tailwind.config.ts index 152d3da1..7f9cdf51 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -734,6 +734,7 @@ module.exports = { '44px': ['44px', '52px'], '48px': ['48px', '52px'], '6xl': ['56px', '60px'], + '64px': ['64px', '68px'], '7xl': ['72px', 1], '8xl': ['96px', 1], '9xl': ['128px', 1], @@ -1385,11 +1386,35 @@ module.exports = { '0%': { transform: 'translateX(-80%)' }, '100%': { transform: 'translateX(120%)' }, }, + // Info: (20240925 - Liz) 客製化動畫幀 + 'slide-in': { + '0%': { left: '-100%' }, + '100%': { left: '5%' }, + }, + 'fade-in': { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + 'fade-in-out': { + '0%': { opacity: '0' }, + '50%': { opacity: '1' }, + '100%': { opacity: '0' }, + }, + wiggle: { + '0%, 100%': { transform: 'rotate(-3deg)' }, + '50%': { transform: 'rotate(3deg)' }, + }, }, animation: { slideBottomToTop: 'slideBottomToTop 1s ease-out forwards', spinFast: 'spin 1s linear infinite', loading: 'loading 1.5s infinite', + // Info: (20240925 - Liz) 客製化動畫 使用方式是 animate-fade-in + 'slide-in-back': 'slide-in 1s linear backwards', // 1s 代表動畫時間 + 'fade-in-out': 'fade-in-out 3s ease-in-out forwards', + 'fade-in-1': 'fade-in 2s ease-in forwards', // forwards 代表動畫結束後保持最後的狀態 + 'fade-in-2': 'fade-in 2s ease-in 1s forwards', // 動畫將在渲染或觸發動畫後 1 秒開始 + wiggle: 'wiggle 1s ease-in-out infinite', // 1s 代表動畫時間，ease-in-out 代表動畫速度，infinite 代表無限循環 }, content: { From cf238979451cd7e962c4527aba79152b9977be6c Mon Sep 17 00:00:00 2001 From: jing12345678910 Date: Tue, 1 Oct 2024 16:32:48 +0800 Subject: [PATCH 2/3] =?UTF-8?q?Add=20collapse=5Fbutton=20=EF=BC=86=20Suppl?= =?UTF-8?q?ementary=20translation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- .../accounting_title_page_body.tsx | 2 +- .../accounting_voucher_row.tsx | 2 +- .../accounting_voucher_row_mobile.tsx | 2 +- .../balance_sheet_report_body_all.tsx | 149 +++++---- src/components/button/collapse_button.tsx | 25 ++ .../cash_flow_statement_report_body_all.tsx | 34 ++- .../income_statement_report_body_all.tsx | 284 ++++++++++-------- src/locales/cn/setting.json | 5 +- src/locales/en/setting.json | 5 +- src/locales/tw/setting.json | 5 +- 11 files changed, 309 insertions(+), 206 deletions(-) create mode 100644 src/components/button/collapse_button.tsx diff --git a/package.json b/package.json index 75841f5c..e7b01441 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iSunFA", - "version": "0.8.2+22", + "version": "0.8.2+23", "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 index d0264c88..2f9079ab 100644 --- 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 = () => {
{/* Info: (20240717 - Julian) Assets */}
-

{t('common:COMMON.ASSETS')}

+

{t('common:COMMON.ASSET')}

{
- {t('common:COMMON.ASSETS')} + {t('common:COMMON.ASSET')}
- {t('common:COMMON.ASSETS')} + {t('common:COMMON.ASSET')}
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
-

一、項目彙總格式

+
+

一、項目彙總格式

+ +

單位：新台幣元

- - - - - - - - - - - - - {reportFinancial && - reportFinancial.general && - Object.prototype.hasOwnProperty.call(reportFinancial, 'general') && - rowsForPage1(reportFinancial.general)} - -
- 代號 - - 會計項目 - - {curDate} - - % - - {preDate} - - % -
+ {!isSummaryCollapsed && ( + + + + + + + + + + + + + {reportFinancial && + reportFinancial.general && + Object.prototype.hasOwnProperty.call(reportFinancial, 'general') && + rowsForPage1(reportFinancial.general)} + +
+ 代號 + + 會計項目 + + {curDate} + + % + + {preDate} + + % +
+ )}
{renderedFooter(1)} @@ -727,39 +745,44 @@ const BalanceSheetReportBodyAll = ({ reportId }: IBalanceSheetReportBodyAllProps
-

二、細項分類格式

+
+

二、細項分類格式

+ +

單位：新台幣元

- - - - - - - - - - - - - {reportFinancial && - reportFinancial.details && - Object.prototype.hasOwnProperty.call(reportFinancial, 'details') && - rowsForPage2part1(reportFinancial.details)} - -
- 代號 - - 會計項目 - - {curDate} - - % - - {preDate} - - % -
+ {!isDetailCollapsed && ( + + + + + + + + + + + + + {reportFinancial && + reportFinancial.details && + Object.prototype.hasOwnProperty.call(reportFinancial, 'details') && + rowsForPage2part1(reportFinancial.details)} + +
+ 代號 + + 會計項目 + + {curDate} + + % + + {preDate} + + % +
+ )} {renderedFooter(2)}
diff --git a/src/components/button/collapse_button.tsx b/src/components/button/collapse_button.tsx new file mode 100644 index 00000000..b69e6a53 --- /dev/null +++ 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 = ({ onClick, isCollapsed }) => { + return ( +

+ +

+ ); +}; + +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 index 18e9708f..972da918 100644 --- 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(''); const [secondThought, setSecondThought] = useStateRef(''); const [thirdThought, setThirdThought] = useStateRef(''); + // 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
-

一、項目彙總格式

+
+

一、項目彙總格式

+ +

單位：新台幣元

- {reportFinancial && reportFinancial.general && renderTable(reportFinancial.general, 0, 10)} + {!isSummaryCollapsed && + reportFinancial && + reportFinancial.general && + renderTable(reportFinancial.general, 0, 10)}
{renderedFooter(1)}
@@ -359,10 +377,16 @@ const CashFlowStatementReportBodyAll = ({ reportId }: ICashFlowStatementReportBo
-

二、細項分類格式

+
+

二、細項分類格式

+ +

單位：新台幣元

- {reportFinancial && reportFinancial.details && renderTable(reportFinancial.details, 0, 3)} + {!isDetailCollapsed && + reportFinancial && + reportFinancial.details && + renderTable(reportFinancial.details, 0, 3)}
{ const { isAuthLoading, selectedCompany } = useUserCtx(); + // Info: (20241001 - Anna) 管理表格摺疊狀態 + const [isSummaryCollapsed, setIsSummaryCollapsed] = useState(false); + const [isDetailCollapsed, setIsDetailCollapsed] = useState(false); + // Info: (20241001 - Anna) 切換摺疊狀態 + const toggleSummaryTable = () => { + setIsSummaryCollapsed(!isSummaryCollapsed); + }; + + const toggleDetailTable = () => { + setIsDetailCollapsed(!isDetailCollapsed); + }; const hasCompanyId = isAuthLoading === false && !!selectedCompany?.id; const { data: reportFinancial, @@ -124,73 +136,78 @@ const IncomeStatementReportBodyAll = ({ reportId }: IIncomeStatementReportBodyAl
-

一、項目彙總格式

+
+

一、項目彙總格式

+ +

單位：新台幣元 每股盈餘單位：新台幣元

- - - - - - - - - - - - - {reportFinancial && - reportFinancial.general && - reportFinancial.general.slice(0, 10).map((value) => ( - - - - - - - - - ))} - -
- 代號 - - 會計項目 - - {reportFinancial && reportFinancial.company && ( -

- {formattedCurFromDate}至{formattedCurToDate} -

- )} - 		- % - - {reportFinancial && reportFinancial.company && ( -

- {formattedPreFromDate}至{formattedPreToDate} -

- )} - 		- % -
- {value.code} - - {value.name} - - {value.curPeriodAmount} - - {value.curPeriodPercentage} - - {value.prePeriodAmount} - - {value.prePeriodPercentage} -
+ {!isSummaryCollapsed && ( + + + + + + + + + + + + + {reportFinancial && + reportFinancial.general && + reportFinancial.general.slice(0, 10).map((value) => ( + + + + + + + + + ))} + +
+ 代號 + + 會計項目 + + {!isSummaryCollapsed && reportFinancial && reportFinancial.company && ( +

+ {formattedCurFromDate}至{formattedCurToDate} +

+ )} + 		+ % + + {reportFinancial && reportFinancial.company && ( +

+ {formattedPreFromDate}至{formattedPreToDate} +

+ )} + 		+ % +
+ {value.code} + + {value.name} + + {value.curPeriodAmount} + + {value.curPeriodPercentage} + + {value.prePeriodAmount} + + {value.prePeriodPercentage} +
+ )}
{renderedFooter(1)}
@@ -451,73 +468,78 @@ const IncomeStatementReportBodyAll = ({ reportId }: IIncomeStatementReportBodyAl
-

二、細項分類格式

+
+

二、細項分類格式

+ +

單位：新台幣元 每股盈餘單位：新台幣元

- - - - - - - - - - - - - {reportFinancial && - reportFinancial.details && - reportFinancial.details.slice(0, 15).map((value) => ( - - - - - - - - - ))} - -
- 代號 - - 會計項目 - - {reportFinancial && reportFinancial.company && ( -

- {formattedCurFromDate}至{formattedCurToDate} -

- )} - 		- % - - {reportFinancial && reportFinancial.company && ( -

- {formattedPreFromDate}至{formattedPreToDate} -

- )} - 		- % -
- {value.code} - - {value.name} - - {value.curPeriodAmount} - - {value.curPeriodPercentage} - - {value.prePeriodAmount} - - {value.prePeriodPercentage} -
+ {!isDetailCollapsed && ( + + + + + + + + + + + + + {reportFinancial && + reportFinancial.details && + reportFinancial.details.slice(0, 15).map((value) => ( + + + + + + + + + ))} + +
+ 代號 + + 會計項目 + + {!isDetailCollapsed && reportFinancial && reportFinancial.company && ( +

+ {formattedCurFromDate}至{formattedCurToDate} +

+ )} + 		+ % + + {reportFinancial && reportFinancial.company && ( +

+ {formattedPreFromDate}至{formattedPreToDate} +

+ )} + 		+ % +
+ {value.code} + + {value.name} + + {value.curPeriodAmount} + + {value.curPeriodPercentage} + + {value.prePeriodAmount} + + {value.prePeriodPercentage} +
+ )}
{renderedFooter(4)} diff --git a/src/locales/cn/setting.json b/src/locales/cn/setting.json index 9d830ac3..d2ab61ba 100644 --- a/src/locales/cn/setting.json +++ b/src/locales/cn/setting.json @@ -40,6 +40,9 @@ "SUCCESSFULLY_UPDATED_ACCOUNT": "会计科目更新成功", "FAILED_TO_UPDATE_ACCOUNT": "更新科目失败，请稍后重试。", "FAILED_TO_GET_ACCOUNT_DATA": "取得科目资料失败，请稍后重试。", - "FAIL_UPDATE_COMPANY_NAME": "无法更新公司名称。错误代码：{{updateTeamCode}}" + "FAIL_UPDATE_COMPANY_NAME": "无法更新公司名称。错误代码：{{updateTeamCode}}", + "ASSET": "资产", + "OTHERCOMPREHENSIVEINCOME": "其他综合損益", + "COST": "成本" } } diff --git a/src/locales/en/setting.json b/src/locales/en/setting.json index cbdfdd6f..0b129b97 100644 --- a/src/locales/en/setting.json +++ b/src/locales/en/setting.json @@ -8,6 +8,7 @@ "ADMINISTRATOR": "Administrator", "SUBSCRIPTION_BILLS": "Subscription&Bills", "ACCOUNTING_TITLE_MANAGEMENT": "Accounting Title Management", + "ASSETS": "資產", "LIABILITY": "Liability", "EQUITY": "Equity", "ALL": "All", @@ -40,6 +41,8 @@ "SUCCESSFULLY_UPDATED_ACCOUNT": "Successfully updated account: ", "FAILED_TO_UPDATE_ACCOUNT": "Failed to update account, please try again later.", "FAILED_TO_GET_ACCOUNT_DATA": "Failed to get account data, please try again later.", - "FAIL_UPDATE_COMPANY_NAME": "Fail to update company name. Code:{{updateTeamCode}}" + "FAIL_UPDATE_COMPANY_NAME": "Fail to update company name. Code:{{updateTeamCode}}", + "OTHERCOMPREHENSIVEINCOME": "Other Comprehensive Income", + "COST": "Cost" } } diff --git a/src/locales/tw/setting.json b/src/locales/tw/setting.json index 4e76fe63..5ba83b49 100644 --- a/src/locales/tw/setting.json +++ b/src/locales/tw/setting.json @@ -40,6 +40,9 @@ "SUCCESSFULLY_UPDATED_ACCOUNT": "會計科目更新成功：", "FAILED_TO_UPDATE_ACCOUNT": "更新科目失敗，請稍後重試。", "FAILED_TO_GET_ACCOUNT_DATA": "取得科目資料失敗，請稍後重試。", - "FAIL_UPDATE_COMPANY_NAME": "無法更新公司名稱。錯誤代碼：{{updateTeamCode}}" + "FAIL_UPDATE_COMPANY_NAME": "無法更新公司名稱。錯誤代碼：{{updateTeamCode}}", + "ASSET": "資產", + "OTHERCOMPREHENSIVEINCOME": "其他综合損益", + "COST": "成本" } } From f5eacd55b8fd284776076be5d66bea94cdafd93b Mon Sep 17 00:00:00 2001 From: Luphia Chang Date: Tue, 1 Oct 2024 18:20:52 +0800 Subject: [PATCH 3/3] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e7b01441..8d10b018 100644 --- 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",