gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refactor tab actions store to use a unified implementation

Browse Source
This commit is contained in:
rstubryan
2026-02-23 11:05:11 +07:00
parent 75e9b06a83
commit 7e1166b5e8
18 changed files with 75 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/closing/ClosingDetailTabs.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditio
import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { useClosingTabStore } from '@/stores/closing/closing-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
interface ClosingDetailProps {
id: number;
initialValue?: ClosingGeneralInformation;
@@ -33,7 +33,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
kandangData,
}) => {
const [activeTabId, setActiveTabId] = useState<string>('sapronak');
const tabActions = useClosingTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const closingDetailTabs = useMemo(() => {
const validTabs = [
src/components/pages/report/expense/ReportExpenseTabs.tsx
+2 -2
View File
@@ -3,12 +3,12 @@
import { useState } from 'react';
import Tabs from '@/components/Tabs';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import ReportExpenseTab from './tab/ReportExpenseTab';
const ReportExpenseTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/expense/tab/ReportExpenseTab.tsx
+3 -3
View File
@@ -19,7 +19,7 @@ import { cn, formatCurrency, formatDate } from '@/lib/helper';
import { ReportExpense } from '@/types/api/report/report-expense';
import { ReportExpenseApi } from '@/services/api/report';
import { isResponseSuccess } from '@/lib/api-helper';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import Modal, { useModal } from '@/components/Modal';
import Pagination from '@/components/Pagination';
import ReportExpenseSkeleton from '@/components/pages/report/expense/skeleton/ReportExpenseSkeleton';
@@ -305,8 +305,8 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/finance/FinanceTabs.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { useState } from 'react';
import Tabs from '@/components/Tabs';
import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const FinanceTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+3 -3
View File
@@ -34,7 +34,7 @@ import {
} from '@/components/pages/report/finance/filter/CustomerPaymentFilter';
import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
import { OptionType } from '@/components/table/TableRowSizeSelector';
import { Color } from '@/types/theme';
@@ -373,8 +373,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
}, [customerPaymentExport, filterParams, customerOptions]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+3 -3
View File
@@ -31,7 +31,7 @@ import { Color } from '@/types/theme';
import { Supplier } from '@/types/api/master-data/supplier';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import StatusBadge from '@/components/helper/StatusBadge';
import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
@@ -265,8 +265,8 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
}, [debtSupplierExport]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/logistic-stock/LogisticStockTabs.tsx
+2 -2
View File
@@ -3,11 +3,11 @@
import { useState } from 'react';
import Tabs from '@/components/Tabs';
import PurchasesPerSupplierTab from '@/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const LogisticStockTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+3 -3
View File
@@ -30,7 +30,7 @@ import {
} from '@/components/pages/report/logistic-stock/filter/PurchasesPerSupplierFilter';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import PurchasePerSupplierSkeleton from '@/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton';
interface PurchasesPerSupplierTabProps {
@@ -479,8 +479,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/marketing/MarketingTabs.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { useState } from 'react';
import Tabs from '@/components/Tabs';
import DailyMarketingReportContent from '@/components/pages/report/marketing/tab/DailyMarketingTab';
import HppPerKandangTab from '@/components/pages/report/marketing/tab/HppPerKandangTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const MarketingReportContent = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+3 -3
View File
@@ -37,7 +37,7 @@ import {
import SelectInput from '@/components/input/SelectInput';
import Modal, { useModal } from '@/components/Modal';
import { cn } from '@/lib/helper';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import DailyMarketingReportSkeleton from '@/components/pages/report/marketing/skeleton/DailyMarketingSkeleton';
import { useEffect as useEffectHook } from 'react';
import { httpClient } from '@/services/http/client';
@@ -390,8 +390,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
}, [dailyMarketingsExport, summaryTotal]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffectHook(() => {
setTabActions(
src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
+3 -3
View File
@@ -31,7 +31,7 @@ import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import Modal, { useModal } from '@/components/Modal';
import { cn } from '@/lib/helper';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import HppPerKandangSkeleton from '@/components/pages/report/marketing/skeleton/HppPerKandangSkeleton';
import { useEffect as useEffectHook } from 'react';
@@ -479,8 +479,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffectHook(() => {
setTabActions(
src/components/pages/report/production-result/ProductionResultTabs.tsx
+2 -3
View File
@@ -3,11 +3,10 @@
import { useState } from 'react';
import Tabs from '@/components/Tabs';
import ProductionResultTab from '@/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const ProductionResultTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx
+3 -3
View File
@@ -34,7 +34,7 @@ import { ColumnDef } from '@tanstack/react-table';
import { ProductionResult } from '@/types/api/report/production-result';
import ProductionResultReportPDF from '../export/ProductionResultExportPDF';
import { pdf } from '@react-pdf/renderer';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import Modal, { useModal } from '@/components/Modal';
import { cn, formatNumber } from '@/lib/helper';
import Pagination from '@/components/Pagination';
@@ -532,8 +532,8 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
}, [filterParams]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/stores/closing/closing-tab.store.ts
-21
View File
@@ -1,21 +0,0 @@
'use client';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import {
createClosingTabSlice,
ClosingTabSlice,
} from '@/stores/closing/slices/closing-tab.slice';
export type ClosingTabStore = ClosingTabSlice;
export const useClosingTabStore = create<ClosingTabStore>()(
devtools(
(...args) => ({
...createClosingTabSlice(...args),
}),
{
name: 'ClosingTabStore',
}
)
);
src/stores/closing/slices/closing-tab.slice.ts
-37
View File
@@ -1,37 +0,0 @@
import { ReactNode } from 'react';
import { StateCreator } from 'zustand';
export type ClosingTabSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const createClosingTabSlice: StateCreator<
ClosingTabSlice,
[],
[],
ClosingTabSlice
> = (set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set((state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
})),
clearTabActions: (tabId) =>
set((state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
}),
clearAllTabActions: () => set({ tabActions: {} }),
});
src/stores/report/report-tab.store.ts
-21
View File
@@ -1,21 +0,0 @@
'use client';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import {
createReportTabSlice,
ReportTabSlice,
} from '@/stores/report/slices/report-tab.slice';
export type ReportTabStore = ReportTabSlice;
export const useReportTabStore = create<ReportTabStore>()(
devtools(
(...args) => ({
...createReportTabSlice(...args),
}),
{
name: 'ReportTabStore',
}
)
);
src/stores/report/slices/report-tab.slice.ts
-37
View File
@@ -1,37 +0,0 @@
import { ReactNode } from 'react';
import { StateCreator } from 'zustand';
export type ReportTabSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const createReportTabSlice: StateCreator<
ReportTabSlice,
[],
[],
ReportTabSlice
> = (set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set((state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
})),
clearTabActions: (tabId) =>
set((state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
}),
clearAllTabActions: () => set({ tabActions: {} }),
});
src/stores/tab-actions/tab-actions.store.ts
+42
View File
@@ -0,0 +1,42 @@
'use client';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import { ReactNode } from 'react';
export type TabActionsSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const useTabActionsStore = create<TabActionsSlice>()(
devtools(
(set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set((state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
})),
clearTabActions: (tabId) =>
set((state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
}),
clearAllTabActions: () => set({ tabActions: {} }),
}),
{
name: 'TabActionsStore',
}
)
);