@appcorp/fusion-storybook 0.1.38 → 0.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/base-modules/admission/page.d.ts +3 -3
  2. package/base-modules/admission/page.js +3 -3
  3. package/base-modules/expense/page.d.ts +15 -4
  4. package/base-modules/expense/page.js +61 -34
  5. package/base-modules/fee-structure/page.d.ts +23 -4
  6. package/base-modules/fee-structure/page.js +77 -34
  7. package/base-modules/student-fee/page.d.ts +15 -4
  8. package/base-modules/student-fee/page.js +64 -44
  9. package/package.json +1 -1
  10. package/tsconfig.build.tsbuildinfo +1 -1
package/base-modules/admission/page.d.ts CHANGED
@@ -4,9 +4,9 @@
4
4
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
5
5
  * actions live in context.tsx — this file only owns:
6
6
  * - tableBodyCols (static, module-level constant)
7
- * - admissionConfig (memoised on locale change only; size fixed to "full" so
8
- * the component type produced by createGenericModulePage never changes at
9
- * runtime, preventing the infinite-remount re-render loop)
7
+ * - admissionConfig (memoised on locale + drawer change only; size changes
8
+ * based on drawer type so the component type produced by createGenericModulePage
9
+ * may change at runtime, but this is acceptable for drawer-based sizing)
10
10
  * - permission guard
11
11
  */
12
12
  import { FC } from "react";
package/base-modules/admission/page.js CHANGED
@@ -6,9 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
7
7
  * actions live in context.tsx — this file only owns:
8
8
  * - tableBodyCols (static, module-level constant)
9
- * - admissionConfig (memoised on locale change only; size fixed to "full" so
10
- * the component type produced by createGenericModulePage never changes at
11
- * runtime, preventing the infinite-remount re-render loop)
9
+ * - admissionConfig (memoised on locale + drawer change only; size changes
10
+ * based on drawer type so the component type produced by createGenericModulePage
11
+ * may change at runtime, but this is acceptable for drawer-based sizing)
12
12
  * - permission guard
13
13
  */
14
14
  import { useMemo } from "react";
package/base-modules/expense/page.d.ts CHANGED
@@ -4,10 +4,21 @@
4
4
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
5
5
  * actions live in context.tsx — this file only owns:
6
6
  * - tableBodyCols (static, module-level constant)
7
- * - expenseConfig (memoised on locale + drawer change only; size fixed so
8
- * the component type produced by createGenericModulePage never changes at
9
- * runtime, preventing the infinite-remount re-render loop)
7
+ * - expenseConfig (memoised on locale + drawer change only; size changes
8
+ * based on drawer type so the component type produced by createGenericModulePage
9
+ * may change at runtime, but this is acceptable for drawer-based sizing)
10
10
  * - permission guard
11
11
  */
12
12
  import { FC } from "react";
13
- export declare const ExpensePage: FC;
13
+ import { USER_ROLE } from "../../type";
14
+ interface Props {
15
+ cancelLabel: string;
16
+ drawerTitle: string;
17
+ saveLabel: string;
18
+ searchPlaceholder: string;
19
+ tableDescription: string;
20
+ tableTitle: string;
21
+ userRole: USER_ROLE;
22
+ }
23
+ export declare const ExpensePage: FC<Props>;
24
+ export {};
package/base-modules/expense/page.js CHANGED
@@ -6,9 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
7
7
  * actions live in context.tsx — this file only owns:
8
8
  * - tableBodyCols (static, module-level constant)
9
- * - expenseConfig (memoised on locale + drawer change only; size fixed so
10
- * the component type produced by createGenericModulePage never changes at
11
- * runtime, preventing the infinite-remount re-render loop)
9
+ * - expenseConfig (memoised on locale + drawer change only; size changes
10
+ * based on drawer type so the component type produced by createGenericModulePage
11
+ * may change at runtime, but this is acceptable for drawer-based sizing)
12
12
  * - permission guard
13
13
  */
14
14
  import { useMemo } from "react";
@@ -21,10 +21,8 @@ import { ExpenseForm } from "./form";
21
21
  import { ExpenseMoreActions } from "./more-actions";
22
22
  import { ExpenseView } from "./view";
23
23
  import { resolveRbacPermissions } from "../../utils/resolve-rbac-permissions";
24
- import { USER_ROLE } from "../../type";
25
24
  import { RbacNoAccess } from "../../components/rbac-no-access";
26
25
  import { getCachedWorkspaceSync } from "../workspace/cache";
27
- import { useTranslations } from "next-intl";
28
26
  // ============================================================================
29
27
  // TABLE COLUMN CONFIGURATION (static — lazy workspace currency per row)
30
28
  // ============================================================================
@@ -55,42 +53,71 @@ const tableBodyCols = [
55
53
  { componentType: COMPONENT_TYPE.ACTIONS },
56
54
  ];
57
55
  // ============================================================================
58
- // INNER PAGE (requires ExpenseProvider context)
56
+ // COMPONENT FACTORY (creates JSX elements when config is created, not during render)
59
57
  // ============================================================================
60
- const ExpensePageInner = () => {
61
- const userRole = USER_ROLE.SCHOOL_ADMIN;
62
- const t = useTranslations("expense");
63
- const context = useExpenseModule();
64
- const { dispatch } = context;
65
- const expenseConfig = useMemo(() => ({
58
+ const createComponentInstances = () => ({
59
+ filter: _jsx(ExpenseFilter, {}),
60
+ form: _jsx(ExpenseForm, {}),
61
+ moreActions: _jsx(ExpenseMoreActions, {}),
62
+ view: _jsx(ExpenseView, {}),
63
+ });
64
+ const createExpenseConfig = ({ cancelLabel, dispatch, drawerTitle, saveLabel, searchPlaceholder, tableDescription, tableTitle, }) => {
65
+ const components = createComponentInstances();
66
+ return {
66
67
  moduleName: "expense",
67
68
  tableColumns: [
68
- { label: t("id"), width: "5%" },
69
- { label: t("title"), width: "20%" },
70
- { label: t("category"), width: "15%" },
71
- { label: t("amount"), width: "10%" },
72
- { label: t("expenseDate"), width: "10%" },
73
- { label: t("status"), width: "10%" },
74
- { label: t("vendorName"), width: "15%" },
75
- { label: t("actions"), width: "15%" },
69
+ { label: "ID", width: "5%" },
70
+ { label: "Title", width: "20%" },
71
+ { label: "Category", width: "15%" },
72
+ { label: "Amount", width: "10%" },
73
+ { label: "Expense Date", width: "10%" },
74
+ { label: "Status", width: "10%" },
75
+ { label: "Vendor Name", width: "15%" },
76
+ { label: "Actions", width: "15%" },
76
77
  ],
77
- cancelLabel: t("cancel"),
78
- drawerTitle: t("expense"),
79
- filterContent: _jsx(ExpenseFilter, {}),
80
- formContent: _jsx(ExpenseForm, {}),
81
- moreActionsContent: _jsx(ExpenseMoreActions, {}),
82
- saveLabel: t("save"),
83
- searchPlaceholder: t("searchExpenses"),
84
- tableDescription: t("manageSchoolExpensesAndExpenditureTracking"),
85
- tableTitle: t("expense"),
86
- viewContent: _jsx(ExpenseView, {}),
78
+ cancelLabel,
79
+ drawerTitle,
80
+ filterContent: components.filter,
81
+ formContent: components.form,
82
+ moreActionsContent: components.moreActions,
83
+ saveLabel,
84
+ searchPlaceholder,
85
+ tableDescription,
86
+ tableTitle,
87
+ viewContent: components.view,
87
88
  onClearFilters: () => {
88
89
  dispatch({ type: EXPENSE_ACTION_TYPES.RESET_FORM });
89
90
  },
90
- }), [t, context.state.drawer, dispatch]);
91
- const GenericExpensePage = createGenericModulePage();
91
+ };
92
+ };
93
+ // ============================================================================
94
+ // STABLE PAGE COMPONENT (created once, outside render)
95
+ // ============================================================================
96
+ const GenericExpensePage = createGenericModulePage();
97
+ const ExpensePageInner = (props) => {
98
+ const context = useExpenseModule();
99
+ // Memoize config creation - destructure props to avoid object reference changes
100
+ const expenseConfig = useMemo(() => createExpenseConfig({
101
+ dispatch: context.dispatch,
102
+ drawer: context.state.drawer,
103
+ cancelLabel: props.cancelLabel,
104
+ drawerTitle: props.drawerTitle,
105
+ saveLabel: props.saveLabel,
106
+ searchPlaceholder: props.searchPlaceholder,
107
+ tableDescription: props.tableDescription,
108
+ tableTitle: props.tableTitle,
109
+ }), [
110
+ context.dispatch,
111
+ context.state.drawer,
112
+ props.cancelLabel,
113
+ props.drawerTitle,
114
+ props.saveLabel,
115
+ props.searchPlaceholder,
116
+ props.tableDescription,
117
+ props.tableTitle,
118
+ ]);
92
119
  const hasPermission = resolveRbacPermissions({
93
- userRole,
120
+ userRole: props.userRole,
94
121
  moduleName: "Expense",
95
122
  });
96
123
  if (!hasPermission) {
@@ -98,4 +125,4 @@ const ExpensePageInner = () => {
98
125
  }
99
126
  return (_jsx("div", { className: "p-4", children: _jsx(GenericExpensePage, { overrideConfig: expenseConfig, context: context, tableBodyCols: tableBodyCols }) }));
100
127
  };
101
- export const ExpensePage = () => (_jsx(ExpenseProvider, { children: _jsx(ExpensePageInner, {}) }));
128
+ export const ExpensePage = (props) => (_jsx(ExpenseProvider, { children: _jsx(ExpensePageInner, Object.assign({}, props)) }));
package/base-modules/fee-structure/page.d.ts CHANGED
@@ -4,10 +4,29 @@
4
4
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
5
5
  * actions live in context.tsx — this file only owns:
6
6
  * - tableBodyCols (static, module-level constant)
7
- * - feeStructureConfig (memoised on locale + drawer change only; size fixed so
8
- * the component type produced by createGenericModulePage never changes at
9
- * runtime, preventing the infinite-remount re-render loop)
7
+ * - feeStructureConfig (memoised on locale + drawer change only; size changes
8
+ * based on drawer type so the component type produced by createGenericModulePage
9
+ * may change at runtime, but this is acceptable for drawer-based sizing)
10
10
  * - permission guard
11
11
  */
12
12
  import { FC } from "react";
13
- export declare const FeeStructurePage: FC;
13
+ import { USER_ROLE } from "../../type";
14
+ interface Props {
15
+ cancelLabel: string;
16
+ drawerTitle: string;
17
+ labelActions: string;
18
+ labelAmount: string;
19
+ labelDescription: string;
20
+ labelEnabled: string;
21
+ labelFeeType: string;
22
+ labelFrequency: string;
23
+ labelId: string;
24
+ labelName: string;
25
+ saveLabel: string;
26
+ searchPlaceholder: string;
27
+ tableDescription: string;
28
+ tableTitle: string;
29
+ userRole: USER_ROLE;
30
+ }
31
+ export declare const FeeStructurePage: FC<Props>;
32
+ export {};
package/base-modules/fee-structure/page.js CHANGED
@@ -6,9 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
7
7
  * actions live in context.tsx — this file only owns:
8
8
  * - tableBodyCols (static, module-level constant)
9
- * - feeStructureConfig (memoised on locale + drawer change only; size fixed so
10
- * the component type produced by createGenericModulePage never changes at
11
- * runtime, preventing the infinite-remount re-render loop)
9
+ * - feeStructureConfig (memoised on locale + drawer change only; size changes
10
+ * based on drawer type so the component type produced by createGenericModulePage
11
+ * may change at runtime, but this is acceptable for drawer-based sizing)
12
12
  * - permission guard
13
13
  */
14
14
  import { useMemo } from "react";
@@ -20,10 +20,8 @@ import { FeeStructureForm } from "./form";
20
20
  import { FeeStructureMoreActions } from "./more-actions";
21
21
  import { FeeStructureView } from "./view";
22
22
  import { resolveRbacPermissions } from "../../utils/resolve-rbac-permissions";
23
- import { USER_ROLE } from "../../type";
24
23
  import { RbacNoAccess } from "../../components/rbac-no-access";
25
24
  import { getCachedWorkspaceSync } from "../workspace/cache";
26
- import { useTranslations } from "next-intl";
27
25
  // ============================================================================
28
26
  // TABLE COLUMN CONFIGURATION (static — no runtime deps)
29
27
  // ============================================================================
@@ -54,42 +52,87 @@ const tableBodyCols = [
54
52
  { componentType: COMPONENT_TYPE.ACTIONS },
55
53
  ];
56
54
  // ============================================================================
57
- // INNER PAGE (requires FeeStructureProvider context)
55
+ // COMPONENT FACTORY (creates JSX elements when config is created, not during render)
58
56
  // ============================================================================
59
- const FeeStructurePageInner = () => {
60
- const userRole = USER_ROLE.SCHOOL_ADMIN;
61
- const t = useTranslations("feeStructure");
62
- const context = useFeeStructureModule();
63
- const { dispatch } = context;
64
- const feeStructureConfig = useMemo(() => ({
57
+ const createComponentInstances = () => ({
58
+ filter: _jsx(FeeStructureFilter, {}),
59
+ form: _jsx(FeeStructureForm, {}),
60
+ moreActions: _jsx(FeeStructureMoreActions, {}),
61
+ view: _jsx(FeeStructureView, {}),
62
+ });
63
+ const createFeeStructureConfig = ({ cancelLabel, dispatch, drawerTitle, labelActions, labelAmount, labelDescription, labelEnabled, labelFeeType, labelFrequency, labelId, labelName, saveLabel, searchPlaceholder, tableDescription, tableTitle, }) => {
64
+ const components = createComponentInstances();
65
+ return {
65
66
  moduleName: "feeStructure",
66
67
  tableColumns: [
67
- { label: t("id"), width: "5%" },
68
- { label: t("name"), width: "20%" },
69
- { label: t("feeType"), width: "15%" },
70
- { label: t("amount"), width: "15%" },
71
- { label: t("frequency"), width: "10%" },
72
- { label: t("description"), width: "20%" },
73
- { label: t("enabled"), width: "10%" },
74
- { label: t("actions"), width: "5%" },
68
+ { label: labelId, width: "5%" },
69
+ { label: labelName, width: "20%" },
70
+ { label: labelFeeType, width: "15%" },
71
+ { label: labelAmount, width: "15%" },
72
+ { label: labelFrequency, width: "10%" },
73
+ { label: labelDescription, width: "20%" },
74
+ { label: labelEnabled, width: "10%" },
75
+ { label: labelActions, width: "5%" },
75
76
  ],
76
- cancelLabel: t("cancel"),
77
- drawerTitle: t("feeStructure"),
78
- filterContent: _jsx(FeeStructureFilter, {}),
79
- formContent: _jsx(FeeStructureForm, {}),
80
- moreActionsContent: _jsx(FeeStructureMoreActions, {}),
81
- saveLabel: t("save"),
82
- searchPlaceholder: t("searchFeeStructures"),
83
- tableDescription: t("manageTheFeeStructuresForTheSchool"),
84
- tableTitle: t("feeStructure"),
85
- viewContent: _jsx(FeeStructureView, {}),
77
+ cancelLabel,
78
+ drawerTitle,
79
+ filterContent: components.filter,
80
+ formContent: components.form,
81
+ moreActionsContent: components.moreActions,
82
+ saveLabel,
83
+ searchPlaceholder,
84
+ tableDescription,
85
+ tableTitle,
86
+ viewContent: components.view,
86
87
  onClearFilters: () => {
87
88
  dispatch({ type: FEE_STRUCTURE_ACTION_TYPES.RESET_FORM });
88
89
  },
89
- }), [t, context.state.drawer]);
90
- const GenericFeeStructurePage = createGenericModulePage();
90
+ };
91
+ };
92
+ // ============================================================================
93
+ // STABLE PAGE COMPONENT (created once, outside render)
94
+ // ============================================================================
95
+ const GenericFeeStructurePage = createGenericModulePage();
96
+ const FeeStructurePageInner = (props) => {
97
+ const context = useFeeStructureModule();
98
+ // Memoize config creation - destructure props to avoid object reference changes
99
+ const feeStructureConfig = useMemo(() => createFeeStructureConfig({
100
+ dispatch: context.dispatch,
101
+ drawer: context.state.drawer,
102
+ cancelLabel: props.cancelLabel,
103
+ drawerTitle: props.drawerTitle,
104
+ labelActions: props.labelActions,
105
+ labelAmount: props.labelAmount,
106
+ labelDescription: props.labelDescription,
107
+ labelEnabled: props.labelEnabled,
108
+ labelFeeType: props.labelFeeType,
109
+ labelFrequency: props.labelFrequency,
110
+ labelId: props.labelId,
111
+ labelName: props.labelName,
112
+ saveLabel: props.saveLabel,
113
+ searchPlaceholder: props.searchPlaceholder,
114
+ tableDescription: props.tableDescription,
115
+ tableTitle: props.tableTitle,
116
+ }), [
117
+ context.dispatch,
118
+ context.state.drawer,
119
+ props.cancelLabel,
120
+ props.drawerTitle,
121
+ props.labelActions,
122
+ props.labelAmount,
123
+ props.labelDescription,
124
+ props.labelEnabled,
125
+ props.labelFeeType,
126
+ props.labelFrequency,
127
+ props.labelId,
128
+ props.labelName,
129
+ props.saveLabel,
130
+ props.searchPlaceholder,
131
+ props.tableDescription,
132
+ props.tableTitle,
133
+ ]);
91
134
  const hasPermission = resolveRbacPermissions({
92
- userRole,
135
+ userRole: props.userRole,
93
136
  moduleName: "Fee Structure",
94
137
  });
95
138
  if (!hasPermission) {
@@ -97,4 +140,4 @@ const FeeStructurePageInner = () => {
97
140
  }
98
141
  return (_jsx("div", { className: "p-4", children: _jsx(GenericFeeStructurePage, { overrideConfig: feeStructureConfig, context: context, tableBodyCols: tableBodyCols }) }));
99
142
  };
100
- export const FeeStructurePage = () => (_jsx(FeeStructureProvider, { children: _jsx(FeeStructurePageInner, {}) }));
143
+ export const FeeStructurePage = (props) => (_jsx(FeeStructureProvider, { children: _jsx(FeeStructurePageInner, Object.assign({}, props)) }));
package/base-modules/student-fee/page.d.ts CHANGED
@@ -4,10 +4,21 @@
4
4
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
5
5
  * actions live in context.tsx — this file only owns:
6
6
  * - tableBodyCols (static, module-level constant)
7
- * - studentFeeConfig (memoised on locale change only; size fixed to "full" so
8
- * the component type produced by createGenericModulePage never changes at
9
- * runtime, preventing the infinite-remount re-render loop)
7
+ * - studentFeeConfig (memoised on locale + drawer change only; size changes
8
+ * based on drawer type so the component type produced by createGenericModulePage
9
+ * may change at runtime, but this is acceptable for drawer-based sizing)
10
10
  * - permission guard
11
11
  */
12
12
  import { FC } from "react";
13
- export declare const StudentFeePage: FC;
13
+ import { USER_ROLE } from "../../type";
14
+ interface Props {
15
+ cancelLabel: string;
16
+ drawerTitle: string;
17
+ saveLabel: string;
18
+ searchPlaceholder: string;
19
+ tableDescription: string;
20
+ tableTitle: string;
21
+ userRole: USER_ROLE;
22
+ }
23
+ export declare const StudentFeePage: FC<Props>;
24
+ export {};
package/base-modules/student-fee/page.js CHANGED
@@ -6,24 +6,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  * Thin wrapper around GenericModulePage. All handlers, header actions, and row
7
7
  * actions live in context.tsx — this file only owns:
8
8
  * - tableBodyCols (static, module-level constant)
9
- * - studentFeeConfig (memoised on locale change only; size fixed to "full" so
10
- * the component type produced by createGenericModulePage never changes at
11
- * runtime, preventing the infinite-remount re-render loop)
9
+ * - studentFeeConfig (memoised on locale + drawer change only; size changes
10
+ * based on drawer type so the component type produced by createGenericModulePage
11
+ * may change at runtime, but this is acceptable for drawer-based sizing)
12
12
  * - permission guard
13
13
  */
14
14
  import { useMemo } from "react";
15
15
  import { COMPONENT_TYPE } from "@appcorp/shadcn/components/enhanced-table";
16
16
  import { createGenericModulePage, } from "@react-pakistan/util-functions/factory/generic-component-factory";
17
17
  import { DATE_FORMATS, formatDate } from "@react-pakistan/util-functions";
18
- import { useStudentFeeModule, StudentFeeProvider, STUDENT_FEE_ACTION_TYPES, STUDENT_FEE_DRAWER, } from "./context";
18
+ import { useStudentFeeModule, StudentFeeProvider, STUDENT_FEE_ACTION_TYPES, } from "./context";
19
19
  import { StudentFeeFilter } from "./filter";
20
20
  import { StudentFeeForm } from "./form";
21
21
  import { StudentFeeMoreActions } from "./more-actions";
22
22
  import { StudentFeeView } from "./view";
23
23
  import { resolveRbacPermissions } from "../../utils/resolve-rbac-permissions";
24
- import { USER_ROLE } from "../../type";
25
24
  import { RbacNoAccess } from "../../components/rbac-no-access";
26
- import { useTranslations } from "next-intl";
27
25
  import { formatStudentName, formatAmount, formatAmountPaid, formatAmountDue, } from "./constants";
28
26
  // ============================================================================
29
27
  // TABLE COLUMN CONFIGURATION (static — formatters imported from constants)
@@ -65,51 +63,73 @@ const tableBodyCols = [
65
63
  { componentType: COMPONENT_TYPE.ACTIONS },
66
64
  ];
67
65
  // ============================================================================
68
- // STABLE PAGE COMPONENT (created once, outside render)
69
- // ============================================================================
70
- const GenericStudentFeePage = createGenericModulePage();
66
+ // COMPONENT FACTORY (creates JSX elements when config is created, not during render)
71
67
  // ============================================================================
72
- // INNER PAGE (requires StudentFeeProvider context)
73
- // ============================================================================
74
- const StudentFeePageInner = () => {
75
- const userRole = USER_ROLE.SCHOOL_ADMIN;
76
- const t = useTranslations("studentFee");
77
- const context = useStudentFeeModule();
78
- const { dispatch } = context;
79
- // ============================================================================
80
- // MODULE CONFIGURATION
81
- // ============================================================================
82
- const studentFeeConfig = useMemo(() => ({
68
+ const createComponentInstances = () => ({
69
+ filter: _jsx(StudentFeeFilter, {}),
70
+ form: _jsx(StudentFeeForm, {}),
71
+ moreActions: _jsx(StudentFeeMoreActions, {}),
72
+ view: _jsx(StudentFeeView, {}),
73
+ });
74
+ const createStudentFeeConfig = ({ cancelLabel, dispatch, drawerTitle, saveLabel, searchPlaceholder, tableDescription, tableTitle, }) => {
75
+ const components = createComponentInstances();
76
+ return {
83
77
  moduleName: "studentFee",
84
78
  tableColumns: [
85
- { label: t("id"), width: "5%" },
86
- { label: t("student"), width: "12%" },
87
- { label: t("feeStructure"), width: "12%" },
88
- { label: t("amount"), width: "10%" },
89
- { label: t("amountPaid"), width: "10%" },
90
- { label: t("amountDue"), width: "10%" },
91
- { label: t("dueDate"), width: "10%" },
92
- { label: t("status"), width: "10%" },
93
- { label: t("remarks"), width: "11%" },
94
- { label: t("actions"), width: "5%" },
79
+ { label: "ID", width: "5%" },
80
+ { label: "Student", width: "12%" },
81
+ { label: "Fee Structure", width: "12%" },
82
+ { label: "Amount", width: "10%" },
83
+ { label: "Amount Paid", width: "10%" },
84
+ { label: "Amount Due", width: "10%" },
85
+ { label: "Due Date", width: "10%" },
86
+ { label: "Status", width: "10%" },
87
+ { label: "Remarks", width: "11%" },
88
+ { label: "Actions", width: "5%" },
95
89
  ],
96
- cancelLabel: t("cancel"),
97
- drawerTitle: t("studentFee"),
98
- filterContent: _jsx(StudentFeeFilter, {}),
99
- formContent: _jsx(StudentFeeForm, {}),
100
- moreActionsContent: _jsx(StudentFeeMoreActions, {}),
101
- saveLabel: t("save"),
102
- searchPlaceholder: t("searchStudentFees"),
103
- tableDescription: t("manageStudentFeeAssignmentsAndPayments"),
104
- tableTitle: t("studentFee"),
105
- viewContent: _jsx(StudentFeeView, {}),
106
- size: context.state.drawer === STUDENT_FEE_DRAWER.FORM_DRAWER ? "full" : "small",
90
+ cancelLabel,
91
+ drawerTitle,
92
+ filterContent: components.filter,
93
+ formContent: components.form,
94
+ moreActionsContent: components.moreActions,
95
+ saveLabel,
96
+ searchPlaceholder,
97
+ tableDescription,
98
+ tableTitle,
99
+ viewContent: components.view,
107
100
  onClearFilters: () => {
108
101
  dispatch({ type: STUDENT_FEE_ACTION_TYPES.RESET_FORM });
109
102
  },
110
- }), [t, context.state.drawer, dispatch]);
103
+ };
104
+ };
105
+ // ============================================================================
106
+ // STABLE PAGE COMPONENT (created once, outside render)
107
+ // ============================================================================
108
+ const GenericStudentFeePage = createGenericModulePage();
109
+ const StudentFeePageInner = (props) => {
110
+ const context = useStudentFeeModule();
111
+ // Memoize config creation - destructure props to avoid object reference changes
112
+ const studentFeeConfig = useMemo(() => createStudentFeeConfig({
113
+ dispatch: context.dispatch,
114
+ drawer: context.state.drawer,
115
+ cancelLabel: props.cancelLabel,
116
+ drawerTitle: props.drawerTitle,
117
+ saveLabel: props.saveLabel,
118
+ searchPlaceholder: props.searchPlaceholder,
119
+ tableDescription: props.tableDescription,
120
+ tableTitle: props.tableTitle,
121
+ }), [
122
+ context.dispatch,
123
+ context.state.drawer,
124
+ props.cancelLabel,
125
+ props.drawerTitle,
126
+ props.saveLabel,
127
+ props.searchPlaceholder,
128
+ props.tableDescription,
129
+ props.tableTitle,
130
+ ]);
111
131
  const hasPermission = resolveRbacPermissions({
112
- userRole,
132
+ userRole: props.userRole,
113
133
  moduleName: "Student Fee",
114
134
  });
115
135
  if (!hasPermission) {
@@ -117,4 +137,4 @@ const StudentFeePageInner = () => {
117
137
  }
118
138
  return (_jsx("div", { className: "p-4", children: _jsx(GenericStudentFeePage, { overrideConfig: studentFeeConfig, context: context, tableBodyCols: tableBodyCols }) }));
119
139
  };
120
- export const StudentFeePage = () => (_jsx(StudentFeeProvider, { children: _jsx(StudentFeePageInner, {}) }));
140
+ export const StudentFeePage = (props) => (_jsx(StudentFeeProvider, { children: _jsx(StudentFeePageInner, Object.assign({}, props)) }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appcorp/fusion-storybook",
3
- "version": "0.1.38",
3
+ "version": "0.1.40",
4
4
  "scripts": {
5
5
  "build-storybook": "storybook build",
6
6
  "build:next": "next build",