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 store to use a unified ReportTabStore

Browse Source
This commit is contained in:
rstubryan
2026-02-12 16:16:40 +07:00
parent 6aae18df54
commit dbb523c710
13 changed files with 76 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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 { useFinanceTabStore } from '@/stores/report/finance-tab/finance-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
const FinanceTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useFinanceTabStore((state) => state.tabActions);
const tabActions = useReportTabStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+3 -3
View File
@@ -36,7 +36,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 { useFinanceTabStore } from '@/stores/report/finance-tab/finance-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
import { OptionType } from '@/components/table/TableRowSizeSelector';
import { Color } from '@/types/theme';
@@ -375,8 +375,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
}, [customerPaymentExport, filterParams, customerOptions]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useFinanceTabStore((state) => state.setTabActions);
const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+3 -3
View File
@@ -33,7 +33,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 { useFinanceTabStore } from '@/stores/report/finance-tab/finance-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import StatusBadge from '@/components/helper/StatusBadge';
import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
@@ -271,8 +271,8 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
}, [debtSupplierExport]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useFinanceTabStore((state) => state.setTabActions);
const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((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 { useLogisticStockTabStore } from '@/stores/report/logistic-stock-tab/logistic-stock-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
const LogisticStockTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useLogisticStockTabStore((state) => state.tabActions);
const tabActions = useReportTabStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+3 -7
View File
@@ -32,7 +32,7 @@ import {
} from '@/components/pages/report/logistic-stock/filter/PurchasesPerSupplierFilter';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useLogisticStockTabStore } from '@/stores/report/logistic-stock-tab/logistic-stock-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import PurchasePerSupplierSkeleton from '@/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton';
interface PurchasesPerSupplierTabProps {
@@ -486,12 +486,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useLogisticStockTabStore(
(state) => state.setTabActions
);
const clearTabActions = useLogisticStockTabStore(
(state) => state.clearTabActions
);
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((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 { useMarketingTabStore } from '@/stores/report/marketing-tab/marketing-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
const MarketingReportContent = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useMarketingTabStore((state) => state.tabActions);
const tabActions = useReportTabStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+3 -5
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 { useMarketingTabStore } from '@/stores/report/marketing-tab/marketing-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import DailyMarketingReportSkeleton from '@/components/pages/report/marketing/skeleton/DailyMarketingSkeleton';
import { useEffect as useEffectHook } from 'react';
import { httpClient } from '@/services/http/client';
@@ -390,10 +390,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
}, [dailyMarketingsExport, summaryTotal]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useMarketingTabStore((state) => state.setTabActions);
const clearTabActions = useMarketingTabStore(
(state) => state.clearTabActions
);
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
useEffectHook(() => {
setTabActions(
src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
+3 -5
View File
@@ -33,7 +33,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 { useMarketingTabStore } from '@/stores/report/marketing-tab/marketing-tab.store';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import HppPerKandangSkeleton from '@/components/pages/report/marketing/skeleton/HppPerKandangSkeleton';
import { useEffect as useEffectHook } from 'react';
@@ -487,10 +487,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useMarketingTabStore((state) => state.setTabActions);
const clearTabActions = useMarketingTabStore(
(state) => state.clearTabActions
);
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
useEffectHook(() => {
setTabActions(
src/stores/report/finance-tab/finance-tab.store.ts
-51
View File
@@ -1,51 +0,0 @@
'use client';
import { ReactNode } from 'react';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
export type FinanceTabActionsSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const useFinanceTabStore = create<FinanceTabActionsSlice>()(
devtools(
(set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set(
(state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
}),
false,
'setTabActions'
),
clearTabActions: (tabId) =>
set(
(state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
},
false,
'clearTabActions'
),
clearAllTabActions: () =>
set({ tabActions: {} }, false, 'clearAllTabActions'),
}),
{
name: 'FinanceTabStore',
}
)
);
src/stores/report/logistic-stock-tab/logistic-stock-tab.store.ts
-51
View File
@@ -1,51 +0,0 @@
'use client';
import { ReactNode } from 'react';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
export type LogisticStockTabActionsSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const useLogisticStockTabStore = create<LogisticStockTabActionsSlice>()(
devtools(
(set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set(
(state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
}),
false,
'setTabActions'
),
clearTabActions: (tabId) =>
set(
(state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
},
false,
'clearTabActions'
),
clearAllTabActions: () =>
set({ tabActions: {} }, false, 'clearAllTabActions'),
}),
{
name: 'LogisticStockTabStore',
}
)
);
src/stores/report/marketing-tab/marketing-tab.store.ts
-51
View File
@@ -1,51 +0,0 @@
'use client';
import { ReactNode } from 'react';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
export type MarketingTabActionsSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const useMarketingTabStore = create<MarketingTabActionsSlice>()(
devtools(
(set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set(
(state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
}),
false,
'setTabActions'
),
clearTabActions: (tabId) =>
set(
(state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
},
false,
'clearTabActions'
),
clearAllTabActions: () =>
set({ tabActions: {} }, false, 'clearAllTabActions'),
}),
{
name: 'MarketingTabStore',
}
)
);
src/stores/report/report-tab.store.ts
+18
View File
@@ -0,0 +1,18 @@
'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
@@ -0,0 +1,37 @@
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: {} }),
});