@appcorp/fusion-storybook 0.1.4

package/base-modules/family/context.js

@@ -0,0 +1,441 @@
+"use client";
+/**
+ * Family Module — business logic + API integration
+ *
+ * Wires the generic module state (created by `createGenericModule`) to network
+ * actions using `useModuleEntityV2`. Contains domain-specific handlers for
+ * create/view/edit/delete operations with proper cache management and validation.
+ *
+ * Key responsibilities:
+ * - expose `useFamilyModule()` which UI components call for actions
+ * - keep module-specific `apiParams` and callbacks in one place
+ * - ensure cache invalidation and toast notifications on mutation
+ *
+ * Exported utilities:
+ * - `FamilyProvider` — provider component used by the page
+ * - `FamilyStateContextProvider` — backward-compat alias for dashboard-providers.tsx
+ * - `FAMILY_ACTION_TYPES` — action type constants (from factory)
+ * - `FAMILY_DRAWER` — drawer type constants
+ * - `useFamilyModule()` — hook that returns state, dispatch, and handlers
+ */
+import { useCallback, useEffect, useMemo } from "react";
+import { isCreatedOrUpdated, validateForm, } from "@react-pakistan/util-functions";
+import { useModuleEntityV2, } from "@react-pakistan/util-functions/hooks/use-module-entity-v2";
+import { useDebounce } from "@react-pakistan/util-functions/hooks/use-debounce";
+import { createGenericModule } from "@react-pakistan/util-functions/factory/generic-module-factory";
+import { DRAWER_TYPES } from "@react-pakistan/util-functions/factory/generic-component-factory";
+import { FAMILY_API_ROUTES, pageLimit } from "./constants";
+import { getCachedFamilies, invalidateFamiliesCache } from "./cache";
+import { familyFormValidation } from "./validate";
+import { generateThemeToast, TOAST_VARIANT, } from "@appcorp/shadcn/lib/toast-utils";
+import { useTranslations } from "next-intl";
+import { getCachedWorkspaceSync } from "../workspace/cache";
+import { Eye, Filter, MoreHorizontal, Pencil, Plus } from "lucide-react";
+// ============================================================================
+// DRAWER TYPES
+// ============================================================================
+export const FAMILY_DRAWER = {
+    FILTER_DRAWER: DRAWER_TYPES.FILTER_DRAWER,
+    FORM_DRAWER: DRAWER_TYPES.FORM_DRAWER,
+    MORE_ACTIONS_DRAWER: "MORE_ACTIONS_DRAWER",
+    VIEW_DRAWER: DRAWER_TYPES.VIEW_DRAWER,
+};
+// ============================================================================
+// CONFIGURATION
+// ============================================================================
+const familyConfig = {
+    name: "Family",
+    displayName: "Family",
+    initialState: {
+        // List Data
+        items: [],
+        count: 0,
+        // Search & Pagination
+        currentPage: 1,
+        pageLimit,
+        searchQuery: "",
+        // UI State
+        disableSaveButton: false,
+        drawer: null,
+        // Form State
+        address: "",
+        city: "",
+        country: "",
+        enabled: true,
+        errors: {},
+        familyCode: "",
+        filterEnabled: undefined,
+        id: "",
+        postalCode: "",
+        stateProvince: "", // renamed from 'state' to avoid conflict with factory state object
+        userId: "",
+    },
+    drawerTypes: DRAWER_TYPES,
+};
+// ============================================================================
+// CREATE FAMILY MODULE
+// ============================================================================
+export const { actionTypes: FAMILY_ACTION_TYPES, config: familyModuleConfig, initialState: initialFamilyState, Provider: FamilyProvider, reducer: familyReducer, useContext: useFamilyContext, } = createGenericModule(familyConfig);
+/**
+ * Backward-compatible alias used by dashboard-providers.tsx
+ */
+export const FamilyStateContextProvider = FamilyProvider;
+// ============================================================================
+// ENHANCED FAMILY HOOK WITH API INTEGRATION
+// ============================================================================
+export const useFamilyModule = () => {
+    var _a, _b;
+    const context = useFamilyContext();
+    const t = useTranslations("family");
+    const workspace = getCachedWorkspaceSync();
+    const debouncedQuery = useDebounce(context.state.searchQuery, 800);
+    // ============================================================================
+    // API PARAMETERS
+    // ============================================================================
+    const listParams = useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({ currentPage: context.state.currentPage, pageLimit: context.state.pageLimit, schoolId: ((_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.id) || "" }, (debouncedQuery ? { searchQuery: debouncedQuery } : {})), (context.state.filterEnabled !== undefined
+            ? { filterEnabled: String(context.state.filterEnabled) }
+            : {})));
+    }, [
+        context.state.currentPage,
+        context.state.filterEnabled,
+        context.state.pageLimit,
+        debouncedQuery,
+        (_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.id,
+    ]);
+    const updateParams = useMemo(() => ({
+        address: context.state.address,
+        city: context.state.city,
+        country: context.state.country,
+        enabled: context.state.enabled,
+        familyCode: context.state.familyCode,
+        id: context.state.id,
+        postalCode: context.state.postalCode,
+        stateProvince: context.state.stateProvince,
+    }), [
+        context.state.address,
+        context.state.city,
+        context.state.country,
+        context.state.enabled,
+        context.state.familyCode,
+        context.state.id,
+        context.state.postalCode,
+        context.state.stateProvince,
+    ]);
+    const byIdParams = useMemo(() => ({ id: context.state.id }), [context.state.id]);
+    const deleteParams = useMemo(() => ({ id: context.state.id }), [context.state.id]);
+    // ============================================================================
+    // API CALLBACKS
+    // ============================================================================
+    const listCallback = ({ data, error }) => {
+        if (error) {
+            showToast(t("messagesFetchFailed"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            context.dispatch({
+                type: FAMILY_ACTION_TYPES.SET_ITEMS,
+                payload: { items: data.items || [], count: data.count || 0 },
+            });
+        }
+    };
+    const updateCallback = ({ data, error }) => {
+        const isCreated = isCreatedOrUpdated(data);
+        if (error) {
+            showToast(isCreated ? t("messagesCreateFailed") : t("messagesUpdateFailed"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            showToast(t("messagesSaveSuccess"), TOAST_VARIANT.SUCCESS);
+            invalidateFamiliesCache();
+            listFetchNow();
+            resetFormAndCloseDrawer();
+        }
+    };
+    const byIdCallback = ({ data, error }) => {
+        if (error) {
+            showToast(t("messagesDetailsFetchFailed"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            const family = data;
+            setField("id", family.id);
+            setField("address", family.address);
+            setField("city", family.city);
+            setField("country", family.country);
+            setField("enabled", family.enabled);
+            setField("familyCode", family.familyCode);
+            setField("postalCode", family.postalCode);
+            setField("stateProvince", family.state);
+            context.dispatch({
+                type: FAMILY_ACTION_TYPES.SET_FORM_DATA,
+                payload: {
+                    form: {
+                        filterEnabled: undefined,
+                    },
+                },
+            });
+        }
+    };
+    const deleteCallback = ({ data, error }) => {
+        if (error) {
+            showToast(t("messagesDeleteFailed"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            showToast(t("messagesDeleteSuccess"), TOAST_VARIANT.SUCCESS);
+            invalidateFamiliesCache();
+            listFetchNow();
+        }
+    };
+    // ============================================================================
+    // API HOOKS
+    // ============================================================================
+    const { listFetchNow, listLoading, updateFetchNow, updateLoading, byIdFetchNow, deleteFetchNow, deleteLoading, byIdLoading, } = useModuleEntityV2({
+        byIdCallback,
+        byIdParams,
+        deleteCallback,
+        deleteParams,
+        listCallback,
+        listParams,
+        listUrl: FAMILY_API_ROUTES.UNIT,
+        searchQuery: debouncedQuery,
+        unitByIdUrl: FAMILY_API_ROUTES.UNIT,
+        unitUrl: FAMILY_API_ROUTES.UNIT,
+        updateCallback,
+        updateParams,
+        headers: {
+            "Content-Type": "application/json",
+            "x-api-token": process.env.NEXT_PUBLIC_API_KEY,
+        },
+    });
+    // ============================================================================
+    // UTILITIES
+    // ============================================================================
+    const showToast = useCallback((message, variant) => {
+        generateThemeToast({ description: message, variant });
+    }, []);
+    const resetFormAndCloseDrawer = useCallback(() => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_ERRORS,
+            payload: { errors: {} },
+        });
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: false },
+        });
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: null },
+        });
+    }, [context]);
+    const setField = useCallback((key, value) => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_INPUT_FIELD,
+            payload: { key, value: value === null ? undefined : value },
+        });
+    }, [context]);
+    // ============================================================================
+    // HANDLERS
+    // ============================================================================
+    const handleChange = useCallback((field, value) => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_ERRORS,
+            payload: { errors: {} },
+        });
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: false },
+        });
+        setField(field, value);
+    }, [setField, context]);
+    const handlePageChange = useCallback((page) => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: page },
+        });
+    }, [context]);
+    const handlePageLimitChange = useCallback((limit) => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_PAGE_LIMIT,
+            payload: { pageLimit: limit },
+        });
+    }, [context]);
+    const handleCloseDrawer = useCallback(() => {
+        resetFormAndCloseDrawer();
+    }, [resetFormAndCloseDrawer]);
+    const handleCreate = useCallback(() => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: FAMILY_DRAWER.FORM_DRAWER },
+        });
+    }, [context]);
+    const handleView = useCallback((row) => {
+        byIdFetchNow === null || byIdFetchNow === void 0 ? void 0 : byIdFetchNow(undefined, { params: { id: row === null || row === void 0 ? void 0 : row.id } });
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: FAMILY_DRAWER.VIEW_DRAWER },
+        });
+    }, [context, byIdFetchNow]);
+    const handleEdit = useCallback((row) => {
+        byIdFetchNow === null || byIdFetchNow === void 0 ? void 0 : byIdFetchNow(undefined, { params: { id: row === null || row === void 0 ? void 0 : row.id } });
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: FAMILY_DRAWER.FORM_DRAWER },
+        });
+    }, [context, byIdFetchNow]);
+    const handleDelete = useCallback((row) => {
+        if (!confirm(t("areYouSureYouWantToDeleteThisFamily")))
+            return;
+        deleteFetchNow === null || deleteFetchNow === void 0 ? void 0 : deleteFetchNow(undefined, {
+            body: JSON.stringify({ id: row === null || row === void 0 ? void 0 : row.id }),
+        });
+    }, [t, deleteFetchNow]);
+    const handleFilters = useCallback(() => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: FAMILY_DRAWER.FILTER_DRAWER },
+        });
+    }, [context]);
+    const handleMoreActions = useCallback(() => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: FAMILY_DRAWER.MORE_ACTIONS_DRAWER },
+        });
+    }, [context]);
+    const clearFilters = useCallback(() => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_FILTERS,
+            payload: { filters: { filterEnabled: undefined } },
+        });
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: 1 },
+        });
+    }, [context]);
+    const handleSearch = useCallback((query) => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_SEARCH_QUERY,
+            payload: { searchQuery: query },
+        });
+    }, [context]);
+    const handleSubmit = useCallback(() => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: true },
+        });
+        validateForm({
+            params: updateParams,
+            schema: familyFormValidation,
+            successCallback: () => {
+                updateFetchNow(undefined, {
+                    body: JSON.stringify(updateParams),
+                });
+            },
+            errorCallback: (errors) => {
+                context.dispatch({
+                    type: FAMILY_ACTION_TYPES.SET_ERRORS,
+                    payload: { errors },
+                });
+                context.dispatch({
+                    type: FAMILY_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+                    payload: { disabled: false },
+                });
+                showToast(t("messagesFormErrors"), TOAST_VARIANT.ERROR);
+            },
+        });
+    }, [context, updateParams, t, showToast, updateFetchNow]);
+    const applyFilters = useCallback(() => {
+        context.dispatch({
+            type: FAMILY_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: 1 },
+        });
+        listFetchNow();
+        handleCloseDrawer();
+    }, [context, listFetchNow, handleCloseDrawer]);
+    const headerActions = useMemo(() => [
+        {
+            enabled: false,
+            handleOnClick: handleMoreActions,
+            label: t("headerActionsMoreActions"),
+            order: 1,
+            icon: MoreHorizontal,
+        },
+        {
+            enabled: true,
+            handleOnClick: handleFilters,
+            label: t("headerActionsFilters"),
+            order: 2,
+            icon: Filter,
+        },
+        {
+            enabled: false,
+            handleOnClick: handleCreate,
+            label: t("headerActionsAddFamily"),
+            order: 3,
+            icon: Plus,
+        },
+    ], [handleFilters, handleMoreActions, handleCreate, t]);
+    const rowActions = useMemo(() => [
+        {
+            enabled: true,
+            handleOnClick: handleView,
+            label: t("rowActionsView"),
+            order: 1,
+            icon: Eye,
+        },
+        {
+            enabled: true,
+            handleOnClick: handleEdit,
+            label: t("rowActionsEdit"),
+            order: 2,
+            icon: Pencil,
+        },
+    ], [handleView, handleEdit, t]);
+    // ============================================================================
+    // EFFECTS
+    // ============================================================================
+    useEffect(() => {
+        var _a;
+        if (!((_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.id))
+            return;
+        (async () => {
+            try {
+                const { count, items } = await getCachedFamilies({
+                    params: listParams,
+                });
+                context.dispatch({
+                    type: FAMILY_ACTION_TYPES.SET_ITEMS,
+                    payload: { items: items || [], count: count || 0 },
+                });
+            }
+            catch (_a) {
+                showToast(t("messagesFetchFailed"), TOAST_VARIANT.ERROR);
+            }
+        })();
+    }, [listParams, (_b = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _b === void 0 ? void 0 : _b.id, context, showToast, t]);
+    // ============================================================================
+    // RETURN
+    // ============================================================================
+    return Object.assign(Object.assign({}, context), { applyFilters,
+        byIdLoading,
+        clearFilters,
+        deleteLoading,
+        handleChange,
+        handleCloseDrawer,
+        handleCreate,
+        handleDelete,
+        handleEdit,
+        handleFilters,
+        handleMoreActions,
+        handlePageChange,
+        handlePageLimitChange,
+        handleSearch,
+        handleSubmit,
+        handleView,
+        headerActions,
+        listLoading,
+        rowActions,
+        updateLoading });
+};

package/base-modules/family/filter.d.ts

@@ -0,0 +1 @@
+export declare const FamilyFilter: () => import("react/jsx-runtime").JSX.Element;

package/base-modules/family/filter.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Family Filter Component
+ *
+ * Filter component for family records.
+ */
+import { EnhancedRadio } from "@appcorp/shadcn/components/enhanced-radio";
+import { useFamilyModule } from "./context";
+import { useTranslations } from "next-intl";
+export const FamilyFilter = () => {
+    const { state, handleChange } = useFamilyModule();
+    const { filterEnabled } = state;
+    const t = useTranslations("family");
+    const filterEnabledValue = filterEnabled === undefined
+        ? "undefined"
+        : filterEnabled
+            ? "true"
+            : "false";
+    return (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx(EnhancedRadio, { label: t("enabled"), name: "filterEnabled", value: filterEnabledValue, options: [
+                    { label: t("all"), value: "undefined" },
+                    { label: t("enabled"), value: "true" },
+                    { label: t("disabled"), value: "false" },
+                ], onValueChange: (next) => {
+                    const parsed = next === "true" ? true : next === "false" ? false : undefined;
+                    handleChange("filterEnabled", parsed);
+                } }) }) }));
+};

package/base-modules/family/form.d.ts

@@ -0,0 +1 @@
+export declare const FamilyForm: () => import("react/jsx-runtime").JSX.Element;

package/base-modules/family/form.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnhancedCheckbox } from "@appcorp/shadcn/components/enhanced-checkbox";
+import { EnhancedInput } from "@appcorp/shadcn/components/enhanced-input";
+import { useFamilyModule } from "./context";
+import { useTranslations } from "next-intl";
+export const FamilyForm = () => {
+    const { state, handleChange } = useFamilyModule();
+    const { address, city, country, enabled, errors, familyCode, postalCode, stateProvince, } = state;
+    const t = useTranslations("family");
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(EnhancedInput, { disabled: true, error: errors.familyCode, id: "familyCode", info: t("familyCodeAutoGenerated"), label: t("familyCode"), onChange: (e) => handleChange("familyCode", e.target.value), placeholder: "FAM2026001", required: true, value: familyCode }), _jsx(EnhancedInput, { error: errors.address, id: "address", info: t("streetAddressPlaceholder"), label: t("streetAddress"), onChange: (e) => handleChange("address", e.target.value), placeholder: "123 Main Street", value: address || "" }), _jsx(EnhancedInput, { error: errors.city, id: "city", info: t("cityName"), label: t("city"), onChange: (e) => handleChange("city", e.target.value), placeholder: "New York", value: city || "" }), _jsx(EnhancedInput, { error: errors.stateProvince, id: "stateProvince", info: t("stateOrProvince"), label: t("stateProvince"), onChange: (e) => handleChange("stateProvince", e.target.value), placeholder: "NY", value: stateProvince || "" }), _jsx(EnhancedInput, { error: errors.country, id: "country", info: t("countryName"), label: t("country"), onChange: (e) => handleChange("country", e.target.value), placeholder: "United States", value: country || "" }), _jsx(EnhancedInput, { error: errors.postalCode, id: "postalCode", info: t("postalOrZipCode"), label: t("postalCode"), onChange: (e) => handleChange("postalCode", e.target.value), placeholder: "10001", value: postalCode || "" }), _jsx(EnhancedCheckbox, { checked: enabled, id: "enabled", label: t("active"), onCheckedChange: (checked) => handleChange("enabled", checked) })] }));
+};

package/base-modules/family/more-actions.d.ts

@@ -0,0 +1 @@
+export declare const FamilyMoreActions: () => import("react/jsx-runtime").JSX.Element;

package/base-modules/family/more-actions.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FamilyMoreActions = () => {
+    return _jsx("div", { className: "space-y-4", children: "More actions for families" });
+};

package/base-modules/family/page.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Family Page Component
+ *
+ * Thin wrapper around GenericModulePage. All handlers, header actions, and row
+ * actions live in context.tsx — this file only owns:
+ *   - tableBodyCols  (static, module-level constant)
+ *   - familyConfig (memoised on locale change only; size fixed so the
+ *     component type produced by createGenericModulePage never changes at
+ *     runtime, preventing the infinite-remount re-render loop)
+ *   - permission guard
+ */
+import { FC } from "react";
+import { USER_ROLE } from "@/type";
+export declare const FamilyPage: FC<{
+    userRole: USER_ROLE;
+}>;

package/base-modules/family/page.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Family Page Component
+ *
+ * Thin wrapper around GenericModulePage. All handlers, header actions, and row
+ * actions live in context.tsx — this file only owns:
+ *   - tableBodyCols  (static, module-level constant)
+ *   - familyConfig (memoised on locale change only; size fixed so the
+ *     component type produced by createGenericModulePage never changes at
+ *     runtime, preventing the infinite-remount re-render loop)
+ *   - permission guard
+ */
+import { useMemo } from "react";
+import { COMPONENT_TYPE } from "@appcorp/shadcn/components/enhanced-table";
+import { createGenericModulePage, } from "@react-pakistan/util-functions/factory/generic-component-factory";
+import { useFamilyModule, FamilyProvider, FAMILY_ACTION_TYPES, } from "./context";
+import { FamilyFilter } from "./filter";
+import { FamilyForm } from "./form";
+import { FamilyMoreActions } from "./more-actions";
+import { FamilyView } from "./view";
+// import { useAuthStateContext } from "@/contexts/auth-context";
+import { resolveRbacPermissions } from "@/utils/resolve-rbac-permissions";
+import { RbacNoAccess } from "@/components/rbac-no-access";
+import { useTranslations } from "next-intl";
+// ============================================================================
+// TABLE COLUMN CONFIGURATION (static — no runtime deps)
+// ============================================================================
+const tableBodyCols = [
+    { componentType: COMPONENT_TYPE.ID, key: "id" },
+    { componentType: COMPONENT_TYPE.BOLD_TEXT, key: "familyCode" },
+    { componentType: COMPONENT_TYPE.OBJECT, key: ["user:email"] },
+    { componentType: COMPONENT_TYPE.TEXT, key: "address" },
+    { componentType: COMPONENT_TYPE.TEXT, key: "city" },
+    { componentType: COMPONENT_TYPE.BOOLEAN, key: "enabled" },
+    { componentType: COMPONENT_TYPE.ACTIONS },
+];
+const tableColumns = [
+    { label: "id", width: "5%" },
+    { label: "familyCode", width: "20%" },
+    { label: "primaryEmail", width: "20%" },
+    { label: "address", width: "20%" },
+    { label: "city", width: "15%" },
+    { label: "status", width: "15%" },
+    { label: "actions", width: "5%" },
+];
+// ============================================================================
+// TRANSLATED COLUMNS HELPER
+// ============================================================================
+const getTranslatedColumns = (t) => tableColumns.map((col) => (Object.assign(Object.assign({}, col), { label: t(col.label) })));
+// ============================================================================
+// COMPONENT FACTORY (creates JSX elements when config is created, not during render)
+// ============================================================================
+const createComponentInstances = () => ({
+    filter: _jsx(FamilyFilter, {}),
+    form: _jsx(FamilyForm, {}),
+    moreActions: _jsx(FamilyMoreActions, {}),
+    view: _jsx(FamilyView, {}),
+});
+// ============================================================================
+// CONFIG CREATION HELPER
+// ============================================================================
+const createFamilyConfig = (t, dispatch) => {
+    const components = createComponentInstances();
+    return {
+        moduleName: "family",
+        tableColumns: getTranslatedColumns(t),
+        cancelLabel: t("cancel"),
+        drawerTitle: t("family"),
+        filterContent: components.filter,
+        formContent: components.form,
+        moreActionsContent: components.moreActions,
+        saveLabel: t("save"),
+        searchPlaceholder: t("searchFamilies"),
+        tableDescription: t("manageFamilyAccountsAndTheirInformation"),
+        tableTitle: t("family"),
+        viewContent: components.view,
+        onClearFilters: () => {
+            dispatch({ type: FAMILY_ACTION_TYPES.RESET_FORM });
+        },
+    };
+};
+// ============================================================================
+// STABLE PAGE COMPONENT (created once, outside render)
+// ============================================================================
+const GenericFamilyPage = createGenericModulePage({
+    moduleName: "family",
+    tableColumns: [],
+    cancelLabel: "",
+    drawerTitle: "",
+    filterContent: _jsx(FamilyFilter, {}),
+    formContent: _jsx(FamilyForm, {}),
+    moreActionsContent: _jsx(FamilyMoreActions, {}),
+    saveLabel: "",
+    searchPlaceholder: "",
+    tableDescription: "",
+    tableTitle: "",
+    viewContent: _jsx(FamilyView, {}),
+    size: "small",
+    onClearFilters: () => { },
+});
+// ============================================================================
+// INNER PAGE (requires FamilyProvider context)
+// ============================================================================
+const FamilyPageInner = ({ userRole }) => {
+    const t = useTranslations("family");
+    const context = useFamilyModule();
+    // Memoize permission check to avoid recalculation on every render
+    const hasPermission = useMemo(() => resolveRbacPermissions({
+        userRole,
+        moduleName: "People Management",
+    }), [userRole]);
+    // Memoize config creation
+    const familyConfig = useMemo(() => createFamilyConfig(t, context.dispatch), [t, context.dispatch]);
+    if (!hasPermission) {
+        return _jsx(RbacNoAccess, { moduleName: "People Management" });
+    }
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericFamilyPage, { config: familyConfig, context: context, tableBodyCols: tableBodyCols }) }));
+};
+export const FamilyPage = ({ userRole }) => (_jsx(FamilyProvider, { children: _jsx(FamilyPageInner, { userRole: userRole }) }));

package/base-modules/family/validate.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Family Validation Schema
+ *
+ * Zod validation schemas for family form data.
+ */
+import { z } from "zod";
+export declare const familyFormValidation: z.ZodObject<{
+    familyCode: z.ZodString;
+    address: z.ZodOptional<z.ZodString>;
+    city: z.ZodOptional<z.ZodString>;
+    stateProvince: z.ZodOptional<z.ZodString>;
+    country: z.ZodOptional<z.ZodString>;
+    postalCode: z.ZodOptional<z.ZodString>;
+    enabled: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;

package/base-modules/family/validate.js

@@ -0,0 +1,18 @@
+/**
+ * Family Validation Schema
+ *
+ * Zod validation schemas for family form data.
+ */
+import { z } from "zod";
+// ============================================================================
+// VALIDATION SCHEMA
+// ============================================================================
+export const familyFormValidation = z.object({
+    familyCode: z.string().min(1, "Family code is required"),
+    address: z.string().optional(),
+    city: z.string().optional(),
+    stateProvince: z.string().optional(),
+    country: z.string().optional(),
+    postalCode: z.string().optional(),
+    enabled: z.boolean().optional(),
+});

package/base-modules/family/view.d.ts

@@ -0,0 +1 @@
+export declare const FamilyView: () => import("react/jsx-runtime").JSX.Element;