@appcorp/fusion-storybook 0.1.38 → 0.1.39

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 +63 -35
  5. package/base-modules/fee-structure/page.d.ts +15 -4
  6. package/base-modules/fee-structure/page.js +63 -35
  7. package/base-modules/student-fee/page.d.ts +15 -4
  8. package/base-modules/student-fee/page.js +64 -43
  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,25 +6,23 @@ 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";
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 { useExpenseModule, ExpenseProvider, EXPENSE_ACTION_TYPES, } from "./context";
18
+ import { useExpenseModule, ExpenseProvider, EXPENSE_ACTION_TYPES, EXPENSE_DRAWER, } from "./context";
19
19
  import { ExpenseFilter } from "./filter";
20
20
  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,72 @@ 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, drawer, 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,
88
+ size: drawer === EXPENSE_DRAWER.FORM_DRAWER ? "full" : "small",
87
89
  onClearFilters: () => {
88
90
  dispatch({ type: EXPENSE_ACTION_TYPES.RESET_FORM });
89
91
  },
90
- }), [t, context.state.drawer, dispatch]);
91
- const GenericExpensePage = createGenericModulePage();
92
+ };
93
+ };
94
+ // ============================================================================
95
+ // STABLE PAGE COMPONENT (created once, outside render)
96
+ // ============================================================================
97
+ const GenericExpensePage = createGenericModulePage();
98
+ const ExpensePageInner = (props) => {
99
+ const context = useExpenseModule();
100
+ // Memoize config creation - destructure props to avoid object reference changes
101
+ const expenseConfig = useMemo(() => createExpenseConfig({
102
+ dispatch: context.dispatch,
103
+ drawer: context.state.drawer,
104
+ cancelLabel: props.cancelLabel,
105
+ drawerTitle: props.drawerTitle,
106
+ saveLabel: props.saveLabel,
107
+ searchPlaceholder: props.searchPlaceholder,
108
+ tableDescription: props.tableDescription,
109
+ tableTitle: props.tableTitle,
110
+ }), [
111
+ context.dispatch,
112
+ context.state.drawer,
113
+ props.cancelLabel,
114
+ props.drawerTitle,
115
+ props.saveLabel,
116
+ props.searchPlaceholder,
117
+ props.tableDescription,
118
+ props.tableTitle,
119
+ ]);
92
120
  const hasPermission = resolveRbacPermissions({
93
- userRole,
121
+ userRole: props.userRole,
94
122
  moduleName: "Expense",
95
123
  });
96
124
  if (!hasPermission) {
@@ -98,4 +126,4 @@ const ExpensePageInner = () => {
98
126
  }
99
127
  return (_jsx("div", { className: "p-4", children: _jsx(GenericExpensePage, { overrideConfig: expenseConfig, context: context, tableBodyCols: tableBodyCols }) }));
100
128
  };
101
- export const ExpensePage = () => (_jsx(ExpenseProvider, { children: _jsx(ExpensePageInner, {}) }));
129
+ export const ExpensePage = (props) => (_jsx(ExpenseProvider, { children: _jsx(ExpensePageInner, Object.assign({}, props)) }));
package/base-modules/fee-structure/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
- * - 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
+ saveLabel: string;
18
+ searchPlaceholder: string;
19
+ tableDescription: string;
20
+ tableTitle: string;
21
+ userRole: USER_ROLE;
22
+ }
23
+ export declare const FeeStructurePage: FC<Props>;
24
+ export {};
package/base-modules/fee-structure/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
- * - 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";
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
- import { useFeeStructureModule, FeeStructureProvider, FEE_STRUCTURE_ACTION_TYPES, } from "./context";
17
+ import { useFeeStructureModule, FeeStructureProvider, FEE_STRUCTURE_ACTION_TYPES, FEE_STRUCTURE_DRAWER, } from "./context";
18
18
  import { FeeStructureFilter } from "./filter";
19
19
  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,72 @@ 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, drawer, drawerTitle, 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: "ID", width: "5%" },
69
+ { label: "Name", width: "20%" },
70
+ { label: "Fee Type", width: "15%" },
71
+ { label: "Amount", width: "15%" },
72
+ { label: "Frequency", width: "10%" },
73
+ { label: "Description", width: "20%" },
74
+ { label: "Enabled", width: "10%" },
75
+ { label: "Actions", 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,
87
+ size: drawer === FEE_STRUCTURE_DRAWER.FORM_DRAWER ? "full" : "small",
86
88
  onClearFilters: () => {
87
89
  dispatch({ type: FEE_STRUCTURE_ACTION_TYPES.RESET_FORM });
88
90
  },
89
- }), [t, context.state.drawer]);
90
- const GenericFeeStructurePage = createGenericModulePage();
91
+ };
92
+ };
93
+ // ============================================================================
94
+ // STABLE PAGE COMPONENT (created once, outside render)
95
+ // ============================================================================
96
+ const GenericFeeStructurePage = createGenericModulePage();
97
+ const FeeStructurePageInner = (props) => {
98
+ const context = useFeeStructureModule();
99
+ // Memoize config creation - destructure props to avoid object reference changes
100
+ const feeStructureConfig = useMemo(() => createFeeStructureConfig({
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
+ ]);
91
119
  const hasPermission = resolveRbacPermissions({
92
- userRole,
120
+ userRole: props.userRole,
93
121
  moduleName: "Fee Structure",
94
122
  });
95
123
  if (!hasPermission) {
@@ -97,4 +125,4 @@ const FeeStructurePageInner = () => {
97
125
  }
98
126
  return (_jsx("div", { className: "p-4", children: _jsx(GenericFeeStructurePage, { overrideConfig: feeStructureConfig, context: context, tableBodyCols: tableBodyCols }) }));
99
127
  };
100
- export const FeeStructurePage = () => (_jsx(FeeStructureProvider, { children: _jsx(FeeStructurePageInner, {}) }));
128
+ 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,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
- * - 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";
@@ -21,9 +21,7 @@ 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,74 @@ 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, drawer, 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,
100
+ size: drawer === STUDENT_FEE_DRAWER.FORM_DRAWER ? "full" : "small",
107
101
  onClearFilters: () => {
108
102
  dispatch({ type: STUDENT_FEE_ACTION_TYPES.RESET_FORM });
109
103
  },
110
- }), [t, context.state.drawer, dispatch]);
104
+ };
105
+ };
106
+ // ============================================================================
107
+ // STABLE PAGE COMPONENT (created once, outside render)
108
+ // ============================================================================
109
+ const GenericStudentFeePage = createGenericModulePage();
110
+ const StudentFeePageInner = (props) => {
111
+ const context = useStudentFeeModule();
112
+ // Memoize config creation - destructure props to avoid object reference changes
113
+ const studentFeeConfig = useMemo(() => createStudentFeeConfig({
114
+ dispatch: context.dispatch,
115
+ drawer: context.state.drawer,
116
+ cancelLabel: props.cancelLabel,
117
+ drawerTitle: props.drawerTitle,
118
+ saveLabel: props.saveLabel,
119
+ searchPlaceholder: props.searchPlaceholder,
120
+ tableDescription: props.tableDescription,
121
+ tableTitle: props.tableTitle,
122
+ }), [
123
+ context.dispatch,
124
+ context.state.drawer,
125
+ props.cancelLabel,
126
+ props.drawerTitle,
127
+ props.saveLabel,
128
+ props.searchPlaceholder,
129
+ props.tableDescription,
130
+ props.tableTitle,
131
+ ]);
111
132
  const hasPermission = resolveRbacPermissions({
112
- userRole,
133
+ userRole: props.userRole,
113
134
  moduleName: "Student Fee",
114
135
  });
115
136
  if (!hasPermission) {
@@ -117,4 +138,4 @@ const StudentFeePageInner = () => {
117
138
  }
118
139
  return (_jsx("div", { className: "p-4", children: _jsx(GenericStudentFeePage, { overrideConfig: studentFeeConfig, context: context, tableBodyCols: tableBodyCols }) }));
119
140
  };
120
- export const StudentFeePage = () => (_jsx(StudentFeeProvider, { children: _jsx(StudentFeePageInner, {}) }));
141
+ 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.39",
4
4
  "scripts": {
5
5
  "build-storybook": "storybook build",
6
6
  "build:next": "next build",