@appcorp/fusion-storybook 0.1.21 → 0.1.24

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

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { downloadFromUrl, API_METHODS } from "@react-pakistan/util-functions";
+import { getCachedWorkspaceSync } from "../workspace/cache";
+import converter from "json-2-csv";
+import { Timeline } from "../../components/timeline";
+export const UserMoreActions = () => {
+    const workspace = getCachedWorkspaceSync();
+    const handleGetAllRecords = async (schoolId) => {
+        const response = await fetch(`/api/user?pageLimit=1000&currentPage=1&schoolId=${schoolId}`, { method: API_METHODS.GET });
+        const result = await response.json();
+        const csv = await converter.json2csv(result.items || [], {});
+        const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+        await downloadFromUrl(blob, "user.csv");
+    };
+    const create = [
+        {
+            id: "1",
+            title: "Download empty csv template",
+            handleOnClick: async () => {
+                await downloadFromUrl("https://nwolvgylwmjuqxsngjxt.supabase.co/storage/v1/object/public/public-blob/common-assets/user.csv", "user-template.csv");
+            },
+        },
+        { id: "2", title: "Add your data to the csv" },
+        {
+            id: "3",
+            title: "Upload the completed csv to the system",
+            handleOnClick: () => { },
+        },
+    ];
+    const update = [
+        {
+            id: "1",
+            title: "Download populated csv template",
+            handleOnClick: async () => {
+                var _a;
+                await handleGetAllRecords(((_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.id) || "");
+            },
+        },
+        { id: "2", title: "Update your data to the csv" },
+        {
+            id: "3",
+            title: "Upload the completed csv to the system",
+            handleOnClick: () => { },
+        },
+    ];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Timeline, { events: create, heading: "Bulk Create" }), _jsx(Timeline, { events: update, heading: "Bulk Update" })] }));
+};

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

@@ -0,0 +1,30 @@
+/**
+ * User 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)
+ *   - userConfig (memoised on locale change only; size fixed per drawer 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";
+interface UserPageProps {
+    cancelLabel: string;
+    drawerTitle: string;
+    labelActions: string;
+    labelEmail: string;
+    labelEnabled: string;
+    labelId: string;
+    labelName: string;
+    labelPhone: string;
+    saveLabel: string;
+    searchPlaceholder: string;
+    tableDescription: string;
+    tableTitle: string;
+    userRole: USER_ROLE;
+}
+export declare const UserPage: FC<UserPageProps>;
+export {};

package/base-modules/user/page.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * User 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)
+ *   - userConfig (memoised on locale change only; size fixed per drawer 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 { useUserModule, UserProvider, USER_DRAWER, USER_ACTION_TYPES, } from "./context";
+import { UserFilter } from "./filter";
+import { UserForm } from "./form";
+import { UserView } from "./view";
+import { UserMoreActions } from "./more-actions";
+import { resolveRbacPermissions } from "../../utils/resolve-rbac-permissions";
+import { RbacNoAccess } from "../../components/rbac-no-access";
+// ============================================================================
+// TABLE COLUMN CONFIGURATION (static — no runtime deps)
+// ============================================================================
+const tableBodyCols = [
+    { componentType: COMPONENT_TYPE.ID, key: "id" },
+    { componentType: COMPONENT_TYPE.TEXT, key: "name" },
+    { componentType: COMPONENT_TYPE.TEXT, key: "email" },
+    { componentType: COMPONENT_TYPE.TEXT, key: "phone" },
+    { componentType: COMPONENT_TYPE.BOOLEAN, key: "enabled" },
+    { componentType: COMPONENT_TYPE.ACTIONS },
+];
+// ============================================================================
+// COMPONENT FACTORY (creates JSX elements when config is created, not during render)
+// ============================================================================
+const createComponentInstances = () => ({
+    filter: _jsx(UserFilter, {}),
+    form: _jsx(UserForm, {}),
+    moreActions: _jsx(UserMoreActions, {}),
+    view: _jsx(UserView, {}),
+});
+const createUserConfig = ({ cancelLabel, dispatch, drawer, drawerTitle, labelActions, labelEmail, labelEnabled, labelId, labelName, labelPhone, saveLabel, searchPlaceholder, tableDescription, tableTitle, }) => {
+    const components = createComponentInstances();
+    return {
+        moduleName: "user",
+        tableColumns: [
+            { label: labelId, width: "5%" },
+            { label: labelName, width: "30%" },
+            { label: labelEmail, width: "30%" },
+            { label: labelPhone, width: "20%" },
+            { label: labelEnabled, width: "10%" },
+            { label: labelActions, width: "5%" },
+        ],
+        cancelLabel,
+        drawerTitle,
+        filterContent: components.filter,
+        formContent: components.form,
+        moreActionsContent: components.moreActions,
+        saveLabel,
+        searchPlaceholder,
+        tableDescription,
+        tableTitle,
+        viewContent: components.view,
+        size: drawer === USER_DRAWER.FORM_DRAWER ? "full" : "small",
+        onClearFilters: () => {
+            dispatch({ type: USER_ACTION_TYPES.RESET_FORM });
+        },
+    };
+};
+// ============================================================================
+// STABLE PAGE COMPONENT (created once, outside render)
+// ============================================================================
+const GenericUserPage = createGenericModulePage();
+const UserPageInner = (props) => {
+    const context = useUserModule();
+    const userConfig = useMemo(() => createUserConfig({
+        dispatch: context.dispatch,
+        drawer: context.state.drawer,
+        cancelLabel: props.cancelLabel,
+        drawerTitle: props.drawerTitle,
+        labelActions: props.labelActions,
+        labelEmail: props.labelEmail,
+        labelEnabled: props.labelEnabled,
+        labelId: props.labelId,
+        labelName: props.labelName,
+        labelPhone: props.labelPhone,
+        saveLabel: props.saveLabel,
+        searchPlaceholder: props.searchPlaceholder,
+        tableDescription: props.tableDescription,
+        tableTitle: props.tableTitle,
+    }), [
+        context.dispatch,
+        context.state.drawer,
+        props.cancelLabel,
+        props.drawerTitle,
+        props.labelActions,
+        props.labelEmail,
+        props.labelEnabled,
+        props.labelId,
+        props.labelName,
+        props.labelPhone,
+        props.saveLabel,
+        props.searchPlaceholder,
+        props.tableDescription,
+        props.tableTitle,
+    ]);
+    const hasPermission = resolveRbacPermissions({
+        userRole: props.userRole,
+        moduleName: "People Management",
+    });
+    if (!hasPermission) {
+        return _jsx(RbacNoAccess, { moduleName: "People Management" });
+    }
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericUserPage, { overrideConfig: userConfig, context: context, tableBodyCols: tableBodyCols }) }));
+};
+export const UserPage = (props) => {
+    return (_jsx(UserProvider, { children: _jsx(UserPageInner, Object.assign({}, props)) }));
+};

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

@@ -0,0 +1,16 @@
+/**
+ * User Validation Schema
+ *
+ * Zod validation schemas for user form data.
+ */
+import { z } from "zod";
+import { USER_ROLE } from "../../type";
+export declare const userFormValidation: z.ZodObject<{
+    name: z.ZodString;
+    email: z.ZodEmail;
+    password: z.ZodOptional<z.ZodString>;
+    phone: z.ZodOptional<z.ZodString>;
+    avatar: z.ZodOptional<z.ZodString>;
+    enabled: z.ZodOptional<z.ZodBoolean>;
+    userRole: z.ZodEnum<typeof USER_ROLE> & z.ZodType<USER_ROLE.SUPER_ADMIN | USER_ROLE.TEACHER | USER_ROLE.STUDENT | USER_ROLE.PARENT | USER_ROLE.STAFF, USER_ROLE, z.core.$ZodTypeInternals<USER_ROLE.SUPER_ADMIN | USER_ROLE.TEACHER | USER_ROLE.STUDENT | USER_ROLE.PARENT | USER_ROLE.STAFF, USER_ROLE>>;
+}, z.core.$strip>;

package/base-modules/user/validate.js

@@ -0,0 +1,29 @@
+/**
+ * User Validation Schema
+ *
+ * Zod validation schemas for user form data.
+ */
+import { z } from "zod";
+import { USER_ROLE } from "../../type";
+// ============================================================================
+// VALIDATION SCHEMA
+// ============================================================================
+export const userFormValidation = z.object({
+    name: z.string().min(1, "Name is required"),
+    email: z.email("Invalid email address"),
+    password: z.string().optional(),
+    phone: z
+        .string()
+        .optional()
+        .refine((val) => !val ||
+        /^([+]?[\s0-9]+)?(\d{3}|[(]?[0-9]+[)]?)?([-]?[\s]?[0-9])+$/.test(val), "Invalid phone number format"),
+    avatar: z.string().optional(),
+    enabled: z.boolean().optional(),
+    userRole: z
+        .nativeEnum(USER_ROLE, {
+        error: "Invalid or missing role",
+    })
+        .refine((v) => v !== USER_ROLE.SCHOOL_ADMIN, {
+        message: "Selecting SCHOOL_ADMIN is not allowed",
+    }),
+});

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

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

package/base-modules/user/view.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUserModule } from "./context";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@appcorp/shadcn/components/ui/card";
+import { Badge } from "@appcorp/shadcn/components/ui/badge";
+import { Separator } from "@appcorp/shadcn/components/ui/separator";
+import { Avatar, AvatarFallback, AvatarImage, } from "@appcorp/shadcn/components/ui/avatar";
+import { User, Phone, Mail, CheckCircle2, XCircle } from "lucide-react";
+import { formatValue } from "../../utils/format-value";
+const getInitials = (fullName) => {
+    if (!fullName)
+        return "U";
+    return fullName
+        .split(" ")
+        .map((n) => n[0] || "")
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+};
+export const UserView = () => {
+    const { state } = useUserModule();
+    const { avatar, email, enabled, name, phone } = state;
+    return (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: "User Information" })] }), _jsx(CardDescription, { children: "User account details" })] }), _jsx(Separator, {}), _jsx(CardContent, { className: "pt-6", children: _jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Profile Picture" }), _jsxs(Avatar, { className: "h-20 w-20", children: [_jsx(AvatarImage, { src: avatar || undefined, alt: name || "User" }), _jsx(AvatarFallback, { className: "text-lg", children: getInitials(name) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Name" }), _jsx("p", { className: "text-base", children: formatValue(name) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Mail, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Email Address" })] }), _jsx("p", { className: "text-base", children: formatValue(email) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Phone, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Phone Number" })] }), _jsx("p", { className: "text-base", children: formatValue(phone) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Status" }), _jsxs(Badge, { variant: enabled ? "default" : "destructive", className: "gap-1", children: [enabled ? (_jsx(CheckCircle2, { className: "h-3 w-3" })) : (_jsx(XCircle, { className: "h-3 w-3" })), enabled ? "Active" : "Inactive"] })] })] }) })] }) }));
+};

package/base-modules/workspace-user/cache.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Workspace User Module Cache Utilities
+ *
+ * Provides localStorage-based caching for workspace users using generic cache system.
+ */
+import { WorkspaceUserBE } from "../../type";
+export declare const getCachedWorkspaceUsersSync: () => import("@react-pakistan/util-functions").ListResponse<WorkspaceUserBE>;
+export declare const getCachedWorkspaceUsers: ({ params, }: {
+    params: Record<string, unknown>;
+}) => Promise<import("@react-pakistan/util-functions").ListResponse<WorkspaceUserBE>>;
+export declare const getCachedWorkspaceUserById: (workspaceUserId: string) => WorkspaceUserBE | null;
+export declare const invalidateWorkspaceUsersCache: () => void;
+export declare const preloadWorkspaceUsers: () => Promise<import("@react-pakistan/util-functions").ListResponse<WorkspaceUserBE>>;
+export declare const isWorkspaceUsersCacheStale: () => boolean;

package/base-modules/workspace-user/cache.js

@@ -0,0 +1,31 @@
+/**
+ * Workspace User Module Cache Utilities
+ *
+ * Provides localStorage-based caching for workspace users using generic cache system.
+ */
+import { LS_KEYS } from "../../constants";
+import { WORKSPACE_USER_API_ROUTES } from "./constants";
+import { getCachedData, getCachedDataSync, getCachedItemById, invalidateCache, isCacheStale, preloadCache, } from "@react-pakistan/util-functions";
+// ============================================================================
+// CACHE CONFIGURATION
+// ============================================================================
+const WORKSPACE_USER_CACHE_CONFIG = {
+    cacheKey: LS_KEYS.WORKSPACE_USERS,
+    apiUrl: WORKSPACE_USER_API_ROUTES.UNIT,
+};
+// ============================================================================
+// WORKSPACE_USER-SPECIFIC CACHE FUNCTIONS
+// ============================================================================
+export const getCachedWorkspaceUsersSync = () => getCachedDataSync(LS_KEYS.WORKSPACE_USERS);
+export const getCachedWorkspaceUsers = ({ params, }) => getCachedData({
+    config: WORKSPACE_USER_CACHE_CONFIG,
+    params,
+    headers: {
+        "Content-Type": "application/json",
+        "x-api-token": process.env.NEXT_PUBLIC_API_KEY,
+    },
+});
+export const getCachedWorkspaceUserById = (workspaceUserId) => getCachedItemById(LS_KEYS.WORKSPACE_USERS, workspaceUserId);
+export const invalidateWorkspaceUsersCache = () => invalidateCache(LS_KEYS.WORKSPACE_USERS);
+export const preloadWorkspaceUsers = () => preloadCache(WORKSPACE_USER_CACHE_CONFIG);
+export const isWorkspaceUsersCacheStale = () => isCacheStale(LS_KEYS.WORKSPACE_USERS);

package/base-modules/workspace-user/constants.d.ts

@@ -0,0 +1,21 @@
+/**
+ * WorkspaceUser Constants
+ *
+ * Organization:
+ * - Page Configuration
+ * - API Routes
+ * - Table Configuration
+ * - Filter Options
+ */
+export declare const pageLimit: number;
+export declare const WORKSPACE_USER_API_ROUTES: Record<string, string>;
+export declare const ENABLED_OPTIONS: readonly [{
+    readonly label: "All";
+    readonly value: "";
+}, {
+    readonly label: "Enabled";
+    readonly value: "true";
+}, {
+    readonly label: "Disabled";
+    readonly value: "false";
+}];

package/base-modules/workspace-user/constants.js

@@ -0,0 +1,27 @@
+/**
+ * WorkspaceUser Constants
+ *
+ * Organization:
+ * - Page Configuration
+ * - API Routes
+ * - Table Configuration
+ * - Filter Options
+ */
+// ============================================================================
+// PAGE CONFIGURATION
+// ============================================================================
+export const pageLimit = Number(process.env.NEXT_PUBLIC_PAGE_LIMIT) || 10;
+// ============================================================================
+// API ROUTES
+// ============================================================================
+export const WORKSPACE_USER_API_ROUTES = {
+    UNIT: "/api/v1/workspace-user",
+};
+// ============================================================================
+// ENABLED OPTIONS
+// ============================================================================
+export const ENABLED_OPTIONS = [
+    { label: "All", value: "" },
+    { label: "Enabled", value: "true" },
+    { label: "Disabled", value: "false" },
+];

package/base-modules/workspace-user/context.d.ts

@@ -0,0 +1,155 @@
+import { RoleBE, WorkspaceBE, WorkspaceUserBE } from "../../type";
+import { type RowAction } from "@appcorp/shadcn/components/enhanced-table";
+export declare const WORKSPACE_USER_DRAWER: {
+    readonly FILTER_DRAWER: string;
+    readonly FORM_DRAWER: string;
+    readonly MORE_ACTIONS_DRAWER: string;
+    readonly VIEW_DRAWER: string;
+};
+export declare const WORKSPACE_USER_ACTION_TYPES: {
+    readonly RESET_FORM: "RESET_FORM";
+    readonly SET_CURRENT_PAGE: "SET_CURRENT_PAGE";
+    readonly SET_PAGE_LIMIT: "SET_PAGE_LIMIT";
+    readonly SET_SEARCH_QUERY: "SET_SEARCH_QUERY";
+    readonly SET_DRAWER: "SET_DRAWER";
+    readonly SET_ITEMS: "SET_ITEMS";
+    readonly SET_FORM_DATA: "SET_FORM_DATA";
+    readonly SET_DISABLE_SAVE_BUTTON: "SET_DISABLE_SAVE_BUTTON";
+    readonly SET_INPUT_FIELD: "SET_INPUT_FIELD";
+    readonly SET_ERRORS: "SET_ERRORS";
+    readonly SET_FILTERS: "SET_FILTERS";
+}, workspaceUserModuleConfig: import("@react-pakistan/util-functions/factory/generic-module-factory").ModuleConfig<{
+    items: WorkspaceUserBE[];
+    count: number;
+    currentPage: number;
+    pageLimit: number;
+    searchQuery: string;
+    disableSaveButton: boolean;
+    drawer: string | null;
+    enabled: boolean;
+    errors: Record<string, string>;
+    filterEnabled: boolean | undefined;
+    id: string;
+    roleId: string | null;
+    userId: string;
+    workspaceId: string;
+    role: RoleBE | undefined;
+    workspace: WorkspaceBE | undefined;
+}>, initialWorkspaceUserState: {
+    items: WorkspaceUserBE[];
+    count: number;
+    currentPage: number;
+    pageLimit: number;
+    searchQuery: string;
+    disableSaveButton: boolean;
+    drawer: string | null;
+    enabled: boolean;
+    errors: Record<string, string>;
+    filterEnabled: boolean | undefined;
+    id: string;
+    roleId: string | null;
+    userId: string;
+    workspaceId: string;
+    role: RoleBE | undefined;
+    workspace: WorkspaceBE | undefined;
+}, WorkspaceUserProvider: import("react").FC<{
+    children: React.ReactNode;
+}>, workspaceUserReducer: (state: {
+    items: WorkspaceUserBE[];
+    count: number;
+    currentPage: number;
+    pageLimit: number;
+    searchQuery: string;
+    disableSaveButton: boolean;
+    drawer: string | null;
+    enabled: boolean;
+    errors: Record<string, string>;
+    filterEnabled: boolean | undefined;
+    id: string;
+    roleId: string | null;
+    userId: string;
+    workspaceId: string;
+    role: RoleBE | undefined;
+    workspace: WorkspaceBE | undefined;
+}, action: any) => {
+    items: WorkspaceUserBE[];
+    count: number;
+    currentPage: number;
+    pageLimit: number;
+    searchQuery: string;
+    disableSaveButton: boolean;
+    drawer: string | null;
+    enabled: boolean;
+    errors: Record<string, string>;
+    filterEnabled: boolean | undefined;
+    id: string;
+    roleId: string | null;
+    userId: string;
+    workspaceId: string;
+    role: RoleBE | undefined;
+    workspace: WorkspaceBE | undefined;
+}, useWorkspaceUserContext: () => import("@react-pakistan/util-functions/factory/generic-module-factory").GenericModuleContext<{
+    items: WorkspaceUserBE[];
+    count: number;
+    currentPage: number;
+    pageLimit: number;
+    searchQuery: string;
+    disableSaveButton: boolean;
+    drawer: string | null;
+    enabled: boolean;
+    errors: Record<string, string>;
+    filterEnabled: boolean | undefined;
+    id: string;
+    roleId: string | null;
+    userId: string;
+    workspaceId: string;
+    role: RoleBE | undefined;
+    workspace: WorkspaceBE | undefined;
+}>;
+export declare const useWorkspaceUserModule: () => {
+    applyFilters: () => void;
+    byIdLoading: boolean;
+    clearFilters: () => void;
+    deleteLoading: boolean;
+    handleChange: (field: string, value: string | number | boolean | undefined | Record<string, string>) => void;
+    handleCloseDrawer: () => void;
+    handleCreate: () => void;
+    handleDelete: (row?: WorkspaceUserBE) => void;
+    handleEdit: () => void;
+    handleFilters: () => void;
+    handleMoreActions: () => void;
+    handlePageChange: (page: number) => void;
+    handlePageLimitChange: (limit: number) => void;
+    handleSearch: (query: string) => void;
+    handleSubmit: () => void;
+    handleView: () => void;
+    headerActions: {
+        enabled: boolean;
+        handleOnClick: () => void;
+        label: string;
+        order: number;
+        icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    }[];
+    listLoading: boolean;
+    rowActions: RowAction[];
+    updateLoading: boolean;
+    state: {
+        items: WorkspaceUserBE[];
+        count: number;
+        currentPage: number;
+        pageLimit: number;
+        searchQuery: string;
+        disableSaveButton: boolean;
+        drawer: string | null;
+        enabled: boolean;
+        errors: Record<string, string>;
+        filterEnabled: boolean | undefined;
+        id: string;
+        roleId: string | null;
+        userId: string;
+        workspaceId: string;
+        role: RoleBE | undefined;
+        workspace: WorkspaceBE | undefined;
+    };
+    dispatch: React.Dispatch<any>;
+};