Feat: asset status setting modal

package.json

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

src/components/asset_status_setting_modal/asset_status_setting_modal.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { RxCross2 } from 'react-icons/rx';
+import { BiSave } from 'react-icons/bi';
+import DatePicker, { DatePickerType } from '@/components/date_picker/date_picker';
+import { IDatePeriod } from '@/interfaces/date_period';
+import { default30DayPeriodInSec, radioButtonStyle } from '@/constants/display';
+import { Button } from '@/components/button/button';
+import { AssetStatus } from '@/constants/asset';
+
+interface IAssetStatusSettingModal {
+  isModalVisible: boolean;
+  modalVisibilityHandler: () => void;
+  defaultStatus: string;
+}
+
+const AssetStatusSettingModal = ({
+  isModalVisible,
+  modalVisibilityHandler,
+  defaultStatus,
+}: IAssetStatusSettingModal) => {
+  const { t } = useTranslation('common');
+
+  const [selectedPeriod, setSelectedPeriod] = useState<IDatePeriod>(default30DayPeriodInSec);
+  const [assetStatus, setAssetStatus] = useState<string>(defaultStatus);
+
+  useEffect(() => {
+    if (!isModalVisible) {
+      setSelectedPeriod(default30DayPeriodInSec);
+      setAssetStatus(defaultStatus);
+    }
+  }, [isModalVisible]);
+
+  // Info: (20240926 - Julian) 沒填日期時，禁用 Save 按鈕
+  const saveBtnDisabled = selectedPeriod.startTimeStamp === 0 && selectedPeriod.endTimeStamp === 0;
+
+  const statusRadio = Object.values(AssetStatus).map((status) => {
+    const changeStatus = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setAssetStatus(e.target.value);
+    };
+
+    const statusText = t(`asset:ASSET.STATUS_${status.toUpperCase()}`);
+
+    return (
+      <label
+        key={status}
+        htmlFor={`status-${status}`}
+        className="flex items-center gap-8px py-4px text-checkbox-text-primary"
+      >
+        <input
+          type="radio"
+          id={`status-${status}`}
+          name="status"
+          className={radioButtonStyle}
+          value={status}
+          checked={assetStatus === status}
+          onChange={changeStatus}
+        />
+        <p>{statusText}</p>
+      </label>
+    );
+  });
+
+  const isDisplayedAssetStatusSettingModal = isModalVisible ? (
+    <div className="fixed inset-0 z-70 flex items-center justify-center bg-black/50 font-barlow">
+      <div className="relative flex w-90vw flex-col items-center gap-24px rounded-md bg-card-surface-primary px-24px py-26px shadow-lg shadow-black/80 md:w-600px">
+        {/* Info: (20240926 - Julian) Close button */}
+        <button type="button" onClick={modalVisibilityHandler} className="absolute right-4 top-4">
+          <RxCross2 size={24} className="text-icon-surface-single-color-primary" />
+        </button>
+        {/* Info: (20240926 - Julian) Title */}
+        <div className="flex flex-col items-center">
+          <h1 className="text-xl font-bold text-card-text-primary">
+            {t('asset:STATUS_SETTING_MODAL.TITLE')}
+          </h1>
+          <p className="text-xs text-card-text-secondary">
+            {t('asset:STATUS_SETTING_MODAL.SUBTITLE')}
+          </p>
+        </div>
+        {/* Info: (20240926 - Julian) Date picker */}
+        <div className="flex w-full flex-col items-start gap-8px">
+          <p className="text-sm font-bold text-input-text-primary">
+            {t('asset:STATUS_SETTING_MODAL.UPDATE_DATE')}
+            <span className="ml-4px text-text-state-error">*</span>
+          </p>
+          <DatePicker
+            type={DatePickerType.TEXT_DATE}
+            period={selectedPeriod}
+            setFilteredPeriod={setSelectedPeriod}
+            btnClassName="w-full"
+          />
+        </div>
+        {/* Info: (20240926 - Julian) Status */}
+        <div className="flex w-full flex-col items-start gap-8px">
+          <p className="text-sm font-bold text-input-text-primary">
+            {t('asset:STATUS_SETTING_MODAL.STATUS')}
+          </p>
+          <div className="flex items-center gap-32px">{statusRadio}</div>
+        </div>
+        {/* Info: (20240926 - Julian) buttons */}
+        <div className="ml-auto flex items-center gap-12px">
+          <Button type="button" variant="secondaryOutline" onClick={modalVisibilityHandler}>
+            {t('common:COMMON.CANCEL')}
+          </Button>
+          {/* ToDo: (20240926 - Julian) Implement SAVE function */}
+          <Button type="button" disabled={saveBtnDisabled}>
+            <p>{t('common:COMMON.SAVE')}</p>
+            <BiSave size={20} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+  return isDisplayedAssetStatusSettingModal;
+};
+
+export default AssetStatusSettingModal;

src/constants/asset.ts

@@ -1,7 +1,7 @@
 export enum AssetStatus {
+  SCRAPPED = 'scrapped',
   SOLD = 'sold',
   DONATED = 'donated',
-  SCRAPPED = 'scrapped',
   MISSING = 'missing',
   NORMAL = 'normal',
 }

src/contexts/global_context.tsx

@@ -41,6 +41,7 @@ import { UploadType } from '@/constants/file';
 import LoginConfirmModal from '@/components/login_confirm_modal/login_confirm_modal';
 import { useModalContext } from '@/contexts/modal_context';
 import ExportVoucherModal from '@/components/export_voucher_modal/export_voucher_modal';
+import AssetStatusSettingModal from '@/components/asset_status_setting_modal/asset_status_setting_modal';
 
 interface IGlobalContext {
   width: number;
@@ -114,6 +115,10 @@ interface IGlobalContext {
   isExportVoucherModalVisible: boolean;
   exportVoucherModalVisibilityHandler: () => void;
 
+  isAssetStatusSettingModalVisible: boolean;
+  assetStatusSettingModalVisibilityHandler: () => void;
+  assetStatusSettingModalDataHandler: (status: string) => void;
+
   termsOfServiceConfirmModalVisibilityHandler: (visibility: boolean) => void;
 }
 
@@ -209,6 +214,9 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
 
   const [isExportVoucherModalVisible, setIsExportVoucherModalVisible] = useState(false);
 
+  const [isAssetStatusSettingModalVisible, setIsAssetStatusSettingModalVisible] = useState(false);
+  const [defaultStatus, setDefaultStatus] = useState('');
+
   const { width, height } = windowSize;
 
   const layoutAssertion = useMemo(() => {
@@ -344,6 +352,14 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
     setIsExportVoucherModalVisible(!isExportVoucherModalVisible);
   };
 
+  const assetStatusSettingModalVisibilityHandler = () => {
+    setIsAssetStatusSettingModalVisible(!isAssetStatusSettingModalVisible);
+  };
+
+  const assetStatusSettingModalDataHandler = (status: string) => {
+    setDefaultStatus(status);
+  };
+
   useEffect(() => {
     if (!signedIn) return;
 
@@ -515,6 +531,10 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
       isExportVoucherModalVisible,
       exportVoucherModalVisibilityHandler,
 
+      isAssetStatusSettingModalVisible,
+      assetStatusSettingModalVisibilityHandler,
+      assetStatusSettingModalDataHandler,
+
       termsOfServiceConfirmModalVisibilityHandler,
     }),
     [
@@ -575,6 +595,10 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
       isExportVoucherModalVisible,
       exportVoucherModalVisibilityHandler,
 
+      isAssetStatusSettingModalVisible,
+      assetStatusSettingModalVisibilityHandler,
+      assetStatusSettingModalDataHandler,
+
       termsOfServiceConfirmModalVisibilityHandler,
     ]
   );
@@ -728,6 +752,12 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
         modalVisibilityHandler={exportVoucherModalVisibilityHandler}
       />
 
+      <AssetStatusSettingModal
+        isModalVisible={isAssetStatusSettingModalVisible}
+        modalVisibilityHandler={assetStatusSettingModalVisibilityHandler}
+        defaultStatus={defaultStatus}
+      />
+
       {children}
     </GlobalContext.Provider>
   );

src/locales/cn/asset.json

@@ -14,5 +14,11 @@
     "STATUS_SCRAPPED": "已报废",
     "STATUS_MISSING": "已遗失",
     "STATUS_NORMAL": "使用中"
+  },
+  "STATUS_SETTING_MODAL": {
+    "TITLE": "状态设定",
+    "SUBTITLE": "请输入资产信息",
+    "UPDATE_DATE": "更新日期",
+    "STATUS": "状态"
   }
 }

src/locales/cn/common.json

@@ -280,7 +280,8 @@
     "TRANSFER": "移转",
     "LOADING": "加载中...",
     "COMPLETED": "已完成",
-    "DAY": "日"
+    "DAY": "日",
+    "SAVE": "保存"
   },
   "DASHBOARD": {
     "PROFIT_CHANGE": "利润变化",

src/locales/en/asset.json

@@ -14,5 +14,11 @@
     "STATUS_SCRAPPED": "Scrapped",
     "STATUS_MISSING": "Missing",
     "STATUS_NORMAL": "Normal"
+  },
+  "STATUS_SETTING_MODAL": {
+    "TITLE": "Status Setting",
+    "SUBTITLE": "Please enter the information of asset",
+    "UPDATE_DATE": "Update Date",
+    "STATUS": "Status"
   }
 }

src/locales/en/common.json

@@ -280,7 +280,8 @@
     "TRANSFER": "Transfer",
     "LOADING": "Loading...",
     "COMPLETED": "Completed",
-    "DAY": "Day"
+    "DAY": "Day",
+    "SAVE": "Save"
   },
   "DASHBOARD": {
     "PROFIT_CHANGE": "Profit Change",

src/locales/tw/asset.json

@@ -14,5 +14,11 @@
     "STATUS_SCRAPPED": "已報廢",
     "STATUS_MISSING": "已遺失",
     "STATUS_NORMAL": "使用中"
+  },
+  "STATUS_SETTING_MODAL": {
+    "TITLE": "狀態設定",
+    "SUBTITLE": "請輸入資產資訊",
+    "UPDATE_DATE": "更新日期",
+    "STATUS": "狀態"
   }
 }

src/locales/tw/common.json

@@ -280,7 +280,8 @@
     "TRANSFER": "移轉",
     "LOADING": "載入中...",
     "COMPLETED": "已完成",
-    "DAY": "日"
+    "DAY": "日",
+    "SAVE": "保存"
   },
   "DASHBOARD": {
     "PROFIT_CHANGE": "利潤變化",