@appcorp/fusion-storybook 0.1.21 → 0.1.23

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

@@ -0,0 +1,382 @@
+"use client";
+/**
+ * WorkspaceUser Module — business logic + API integration
+ *
+ * This module wires the generic module state (created by
+ * `createGenericModule`) to network actions using `useModuleEntityV2`.
+ * It contains the domain-specific handlers (create/view/edit/delete),
+ * local validation wiring, and optimistic UI helpers.
+ *
+ * Key responsibilities:
+ * - expose `useWorkspaceUserModule()` which UI components call for actions
+ * - keep the module-specific `apiParams` and callbacks in one place
+ * - ensure cache invalidation and toast notifications on mutation
+ *
+ * Exported utilities:
+ * - `WorkspaceUserProvider` — provider component used by the page
+ * - `WorkspaceUserStateContextProvider` — backward-compat alias for dashboard-providers.tsx
+ * - `useWorkspaceUserModule()` — hook that returns handlers and state
+ */
+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 { WORKSPACE_USER_API_ROUTES, pageLimit } from "./constants";
+import { getCachedWorkspaceUsers, invalidateWorkspaceUsersCache, } from "./cache";
+import { workspaceUserFormValidation } 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, Plus } from "lucide-react";
+// ============================================================================
+// DRAWER TYPES
+// ============================================================================
+export const WORKSPACE_USER_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 workspaceUserConfig = {
+    name: "WorkspaceUser",
+    displayName: "Workspace User",
+    initialState: {
+        // List Data
+        items: [],
+        count: 0,
+        // Search & Pagination
+        currentPage: 1,
+        pageLimit,
+        searchQuery: "",
+        // UI State
+        disableSaveButton: false,
+        drawer: null,
+        // Form State
+        enabled: true,
+        errors: {},
+        filterEnabled: undefined,
+        id: "",
+        roleId: null,
+        userId: "",
+        workspaceId: "",
+        // Relations (populated from byId fetch)
+        role: undefined,
+        workspace: undefined,
+    },
+    drawerTypes: DRAWER_TYPES,
+};
+// ============================================================================
+// CREATE WORKSPACE USER MODULE
+// ============================================================================
+export const { actionTypes: WORKSPACE_USER_ACTION_TYPES, config: workspaceUserModuleConfig, initialState: initialWorkspaceUserState, Provider: WorkspaceUserProvider, reducer: workspaceUserReducer, useContext: useWorkspaceUserContext, } = createGenericModule(workspaceUserConfig);
+// ============================================================================
+// ENHANCED WORKSPACE USER HOOK WITH API INTEGRATION
+// ============================================================================
+export const useWorkspaceUserModule = () => {
+    var _a;
+    const context = useWorkspaceUserContext();
+    const { state, dispatch } = context;
+    const t = useTranslations("workspaceUser");
+    const debouncedQuery = useDebounce(state.searchQuery, 800);
+    const workspace = getCachedWorkspaceSync();
+    const schoolId = ((_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.id) || "";
+    // ============================================================================
+    // API PARAMETERS
+    // ============================================================================
+    const listParams = useMemo(() => (Object.assign(Object.assign({ currentPage: state.currentPage, pageLimit: state.pageLimit, schoolId }, (debouncedQuery ? { searchQuery: debouncedQuery } : {})), (state.filterEnabled !== undefined
+        ? { filterEnabled: String(state.filterEnabled) }
+        : {}))), [
+        state.currentPage,
+        state.filterEnabled,
+        state.pageLimit,
+        debouncedQuery,
+        schoolId,
+    ]);
+    const updateParams = useMemo(() => ({
+        enabled: state.enabled,
+        id: state.id,
+        roleId: state.roleId,
+        schoolId,
+        userId: state.userId,
+        workspaceId: state.workspaceId,
+    }), [state, schoolId]);
+    const byIdParams = useMemo(() => ({ id: state.id }), [state.id]);
+    const deleteParams = useMemo(() => ({ id: state.id }), [state.id]);
+    // ============================================================================
+    // UTILITIES
+    // ============================================================================
+    const showToast = useCallback((message, variant) => {
+        generateThemeToast({ description: message, variant });
+    }, []);
+    const resetFormAndCloseDrawer = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_ERRORS,
+            payload: { errors: {} },
+        });
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: false },
+        });
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: null },
+        });
+    }, [dispatch]);
+    // ============================================================================
+    // API CALLBACKS
+    // ============================================================================
+    const listCallback = ({ data, error }) => {
+        var _a, _b;
+        if (error) {
+            showToast(t("messagesFetchFailed"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            const response = data;
+            const items = (_a = response.items) !== null && _a !== void 0 ? _a : [];
+            const count = (_b = response.count) !== null && _b !== void 0 ? _b : 0;
+            context.dispatch({
+                type: WORKSPACE_USER_ACTION_TYPES.SET_ITEMS,
+                payload: { items, count },
+            });
+        }
+    };
+    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);
+            invalidateWorkspaceUsersCache();
+            listFetchNow();
+            resetFormAndCloseDrawer();
+        }
+    };
+    const byIdCallback = ({ data, error }) => {
+        if (error) {
+            showToast(t("messagesDetailsFetchFailed"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            context.dispatch({
+                type: WORKSPACE_USER_ACTION_TYPES.SET_FORM_DATA,
+                payload: { form: Object.assign(Object.assign({}, data), { filterEnabled: undefined }) },
+            });
+        }
+    };
+    const deleteCallback = ({ data, error }) => {
+        if (error) {
+            showToast(t("messagesDeleteFailed"), TOAST_VARIANT.ERROR);
+            return;
+        }
+        if (data) {
+            showToast(t("messagesDeleteSuccess"), TOAST_VARIANT.SUCCESS);
+            invalidateWorkspaceUsersCache();
+            listFetchNow();
+        }
+    };
+    // ============================================================================
+    // API HOOKS
+    // ============================================================================
+    const { listFetchNow, listLoading, updateFetchNow, updateLoading, deleteFetchNow, deleteLoading, byIdLoading, } = useModuleEntityV2({
+        byIdCallback,
+        byIdParams,
+        deleteCallback,
+        deleteParams,
+        listCallback,
+        listParams,
+        listUrl: WORKSPACE_USER_API_ROUTES.UNIT,
+        searchQuery: debouncedQuery,
+        unitByIdUrl: WORKSPACE_USER_API_ROUTES.UNIT,
+        unitUrl: WORKSPACE_USER_API_ROUTES.UNIT,
+        updateCallback,
+        updateParams,
+        headers: {
+            "Content-Type": "application/json",
+            "x-api-token": process.env.NEXT_PUBLIC_API_KEY,
+        },
+    });
+    // ============================================================================
+    // HANDLERS
+    // ============================================================================
+    const handleChange = useCallback((field, value) => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_INPUT_FIELD,
+            payload: { field, value },
+        });
+    }, [dispatch]);
+    const handleFilters = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: WORKSPACE_USER_DRAWER.FILTER_DRAWER },
+        });
+    }, [dispatch]);
+    const handleMoreActions = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: WORKSPACE_USER_DRAWER.FORM_DRAWER },
+        });
+    }, [dispatch]);
+    const handleView = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: WORKSPACE_USER_DRAWER.VIEW_DRAWER },
+        });
+    }, [dispatch]);
+    const handleSearch = useCallback((query) => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_SEARCH_QUERY,
+            payload: { searchQuery: query },
+        });
+    }, [dispatch]);
+    const handleCloseDrawer = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: null },
+        });
+    }, [dispatch]);
+    const applyFilters = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: 1 },
+        });
+        listFetchNow();
+        handleCloseDrawer();
+    }, [dispatch, listFetchNow, handleCloseDrawer]);
+    const clearFilters = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_FILTERS,
+            payload: { filters: { filterEnabled: undefined } },
+        });
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: 1 },
+        });
+    }, [dispatch]);
+    const handleDelete = useCallback((row) => {
+        if (row === null || row === void 0 ? void 0 : row.id) {
+            deleteFetchNow === null || deleteFetchNow === void 0 ? void 0 : deleteFetchNow(undefined, {
+                body: JSON.stringify({ id: row.id }),
+            });
+        }
+    }, [deleteFetchNow]);
+    const handleCreate = useCallback(() => { }, []);
+    const handleEdit = useCallback(() => { }, []);
+    const handlePageChange = useCallback((page) => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_CURRENT_PAGE,
+            payload: { currentPage: page },
+        });
+    }, [dispatch]);
+    const handlePageLimitChange = useCallback((limit) => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_PAGE_LIMIT,
+            payload: { pageLimit: limit },
+        });
+    }, [dispatch]);
+    const handleSubmit = useCallback(() => {
+        dispatch({
+            type: WORKSPACE_USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: true },
+        });
+        validateForm({
+            params: updateParams,
+            schema: workspaceUserFormValidation,
+            successCallback: () => {
+                updateFetchNow(undefined, {
+                    body: JSON.stringify(updateParams),
+                });
+            },
+            errorCallback: (errors) => {
+                dispatch({
+                    type: WORKSPACE_USER_ACTION_TYPES.SET_ERRORS,
+                    payload: { errors },
+                });
+                dispatch({
+                    type: WORKSPACE_USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+                    payload: { disabled: false },
+                });
+                showToast(t("messagesFormErrors"), TOAST_VARIANT.ERROR);
+            },
+        });
+    }, [dispatch, updateParams, updateFetchNow, t, showToast]);
+    // ============================================================================
+    // HEADER & ROW ACTIONS
+    // ============================================================================
+    const headerActions = useMemo(() => [
+        {
+            enabled: true,
+            handleOnClick: handleFilters,
+            label: t("headerActionsFilters"),
+            order: 1,
+            icon: Filter,
+        },
+        {
+            enabled: true,
+            handleOnClick: handleMoreActions,
+            label: t("headerActionsMoreActions"),
+            order: 2,
+            icon: Plus,
+        },
+    ], [handleFilters, handleMoreActions, t]);
+    const rowActions = useMemo(() => [
+        {
+            enabled: true,
+            handleOnClick: handleView,
+            label: t("rowActionsView"),
+            order: 1,
+            icon: Eye,
+        },
+    ], [handleView, t]);
+    // ============================================================================
+    // EFFECTS
+    // ============================================================================
+    useEffect(() => {
+        if (!(workspace === null || workspace === void 0 ? void 0 : workspace.id))
+            return;
+        (async () => {
+            try {
+                const { count, items } = await getCachedWorkspaceUsers({
+                    params: listParams,
+                });
+                context.dispatch({
+                    type: WORKSPACE_USER_ACTION_TYPES.SET_ITEMS,
+                    payload: { items: items || [], count: count || 0 },
+                });
+            }
+            catch (_a) {
+                showToast(t("messagesFetchFailed"), TOAST_VARIANT.ERROR);
+            }
+        })();
+    }, [listParams, context, showToast, t, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
+    // ============================================================================
+    // 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/workspace-user/filter.d.ts

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

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EnhancedRadio } from "@appcorp/shadcn/components/enhanced-radio";
+import { useWorkspaceUserModule } from "./context";
+import { useTranslations } from "next-intl";
+export const WorkspaceUserFilter = () => {
+    const { state, handleChange } = useWorkspaceUserModule();
+    const { filterEnabled } = state;
+    const t = useTranslations("workspaceUser");
+    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/workspace-user/form.d.ts

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

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnhancedInput } from "@appcorp/shadcn/components/enhanced-input";
+import { EnhancedCheckbox } from "@appcorp/shadcn/components/enhanced-checkbox";
+import { useWorkspaceUserModule } from "./context";
+import { useTranslations } from "next-intl";
+export const WorkspaceUserForm = () => {
+    const { state, handleChange } = useWorkspaceUserModule();
+    const { enabled, errors, roleId, userId, workspaceId } = state;
+    const t = useTranslations("workspaceUser");
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: t("workspaceUserInformation") }), _jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsx(EnhancedInput, { error: errors.workspaceId, id: "workspaceId", info: t("enterTheWorkspaceId"), label: t("workspaceId"), onChange: (e) => handleChange("workspaceId", e.target.value), placeholder: t("enterWorkspaceId"), required: true, value: workspaceId }), _jsx(EnhancedInput, { error: errors.userId, id: "userId", info: t("enterTheUserId"), label: t("userId"), onChange: (e) => handleChange("userId", e.target.value), placeholder: t("enterUserId"), required: true, value: userId }), _jsx(EnhancedInput, { error: errors.roleId, id: "roleId", info: t("enterTheRoleId"), label: t("roleId"), onChange: (e) => handleChange("roleId", e.target.value), placeholder: t("enterRoleId"), value: roleId || "" })] }), _jsx(EnhancedCheckbox, { defaultChecked: enabled, label: t("active"), onCheckedChange: (checked) => handleChange("enabled", checked) })] }) }));
+};

package/base-modules/workspace-user/more-actions.d.ts

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

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

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { API_METHODS } from "@react-pakistan/util-functions";
+import { getCachedWorkspaceSync } from "../workspace/cache";
+import converter from "json-2-csv";
+import { Timeline } from "../../components/timeline";
+import { downloadFromUrl } from "@react-pakistan/util-functions";
+import { useTranslations } from "next-intl";
+export const WorkspaceUserMoreActions = () => {
+    const t = useTranslations("workspaceUser");
+    const workspace = getCachedWorkspaceSync();
+    const handleGetAllRecords = async (schoolId) => {
+        const response = await fetch(`/api/workspace-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, "workspace-user.csv");
+    };
+    const create = [
+        {
+            id: "1",
+            title: t("downloadEmptyCsvTemplate"),
+            handleOnClick: async () => {
+                await downloadFromUrl("https://nwolvgylwmjuqxsngjxt.supabase.co/storage/v1/object/public/public-blob/common-assets/workspace-user.csv", "workspace-user-template.csv");
+            },
+        },
+        { id: "2", title: t("addYourDataToTheCsv") },
+        {
+            id: "3",
+            title: t("uploadTheCompletedCsvToTheSystem"),
+            handleOnClick: () => console.log("clicked"),
+        },
+    ];
+    const update = [
+        {
+            id: "1",
+            title: t("downloadPopulatedCsvTemplate"),
+            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: t("updateYourDataInTheCsv") },
+        {
+            id: "3",
+            title: t("uploadTheCompletedCsvToTheSystem"),
+            handleOnClick: () => console.log("clicked"),
+        },
+    ];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Timeline, { events: create, heading: t("bulkCreate") }), _jsx(Timeline, { events: update, heading: t("bulkUpdate") })] }));
+};

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

@@ -0,0 +1,28 @@
+/**
+ * WorkspaceUser 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)
+ *   - workspaceUserConfig (memoised on locale change only)
+ *   - permission guard
+ */
+import { FC } from "react";
+import { USER_ROLE } from "../../type";
+interface Props {
+    cancelLabel: string;
+    drawerTitle: string;
+    saveLabel: string;
+    searchPlaceholder: string;
+    tableDescription: string;
+    tableTitle: string;
+    labelActions: string;
+    labelId: string;
+    labelRole: string;
+    labelSystemRole: string;
+    labelUser: string;
+    labelWorkspace: string;
+    userRole: USER_ROLE;
+}
+export declare const WorkspaceUserPage: FC<Props>;
+export {};

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

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * WorkspaceUser 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)
+ *   - workspaceUserConfig (memoised on locale change only)
+ *   - 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 { useWorkspaceUserModule, WorkspaceUserProvider, WORKSPACE_USER_DRAWER, WORKSPACE_USER_ACTION_TYPES, } from "./context";
+import { WorkspaceUserFilter } from "./filter";
+import { WorkspaceUserForm } from "./form";
+import { WorkspaceUserMoreActions } from "./more-actions";
+import { WorkspaceUserView } from "./view";
+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.OBJECT, key: ["user:name"] },
+    { componentType: COMPONENT_TYPE.OBJECT, key: ["workspace:name"] },
+    { componentType: COMPONENT_TYPE.OBJECT, key: ["role:userRole"] },
+    { componentType: COMPONENT_TYPE.OBJECT, key: ["role:isSystem"] },
+    { componentType: COMPONENT_TYPE.ACTIONS },
+];
+// ============================================================================
+// GENERIC PAGE COMPONENT
+// ============================================================================
+const GenericWorkspaceUserPage = createGenericModulePage();
+const createWorkspaceUserConfig = ({ cancelLabel, dispatch, drawer, drawerTitle, saveLabel, searchPlaceholder, tableDescription, tableTitle, labelActions, labelId, labelRole, labelSystemRole, labelUser, labelWorkspace, }) => {
+    return {
+        moduleName: "workspaceUser",
+        tableColumns: [
+            { label: labelId, width: "5%" },
+            { label: labelUser, width: "30%" },
+            { label: labelWorkspace, width: "20%" },
+            { label: labelRole, width: "15%" },
+            { label: labelSystemRole, width: "15%" },
+            { label: labelActions, width: "15%" },
+        ],
+        cancelLabel,
+        drawerTitle,
+        filterContent: _jsx(WorkspaceUserFilter, {}),
+        formContent: _jsx(WorkspaceUserForm, {}),
+        moreActionsContent: _jsx(WorkspaceUserMoreActions, {}),
+        saveLabel,
+        searchPlaceholder,
+        tableDescription,
+        tableTitle,
+        viewContent: _jsx(WorkspaceUserView, {}),
+        size: drawer === WORKSPACE_USER_DRAWER.FORM_DRAWER ? "full" : "small",
+        onClearFilters: () => {
+            dispatch({ type: WORKSPACE_USER_ACTION_TYPES.RESET_FORM });
+        },
+    };
+};
+const WorkspaceUserPageInner = (props) => {
+    const context = useWorkspaceUserModule();
+    const workspaceUserConfig = useMemo(() => createWorkspaceUserConfig({
+        dispatch: context.dispatch,
+        drawer: context.state.drawer,
+        cancelLabel: props.cancelLabel,
+        drawerTitle: props.drawerTitle,
+        saveLabel: props.saveLabel,
+        searchPlaceholder: props.searchPlaceholder,
+        tableDescription: props.tableDescription,
+        tableTitle: props.tableTitle,
+        labelActions: props.labelActions,
+        labelId: props.labelId,
+        labelRole: props.labelRole,
+        labelSystemRole: props.labelSystemRole,
+        labelUser: props.labelUser,
+        labelWorkspace: props.labelWorkspace,
+    }), [
+        context.dispatch,
+        context.state.drawer,
+        props.cancelLabel,
+        props.drawerTitle,
+        props.saveLabel,
+        props.searchPlaceholder,
+        props.tableDescription,
+        props.tableTitle,
+        props.labelActions,
+        props.labelId,
+        props.labelRole,
+        props.labelSystemRole,
+        props.labelUser,
+        props.labelWorkspace,
+    ]);
+    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(GenericWorkspaceUserPage, { overrideConfig: workspaceUserConfig, context: context, tableBodyCols: tableBodyCols }) }));
+};
+export const WorkspaceUserPage = (props) => (_jsx(WorkspaceUserProvider, { children: _jsx(WorkspaceUserPageInner, Object.assign({}, props)) }));

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

@@ -0,0 +1,12 @@
+/**
+ * WorkspaceUser Validation Schema
+ *
+ * Zod validation schemas for workspace-user form data.
+ */
+import { z } from "zod";
+export declare const workspaceUserFormValidation: z.ZodObject<{
+    workspaceId: z.ZodString;
+    userId: z.ZodString;
+    roleId: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    enabled: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;

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

@@ -0,0 +1,15 @@
+/**
+ * WorkspaceUser Validation Schema
+ *
+ * Zod validation schemas for workspace-user form data.
+ */
+import { z } from "zod";
+// ============================================================================
+// VALIDATION SCHEMA
+// ============================================================================
+export const workspaceUserFormValidation = z.object({
+    workspaceId: z.string().min(1, "workspaceIsRequired"),
+    userId: z.string().min(1, "userIsRequired"),
+    roleId: z.string().nullable().optional(),
+    enabled: z.boolean().optional(),
+});

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

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

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

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * WorkspaceUser View
+ *
+ * Read-only details view for a workspace user record.
+ */
+import { useWorkspaceUserModule } 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 { Users, Building2, Shield, CheckCircle2, XCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { formatValue } from "../../utils/format-value";
+export const WorkspaceUserView = () => {
+    const { state } = useWorkspaceUserModule();
+    const { enabled, role, workspace, workspaceId } = state;
+    const t = useTranslations("workspaceUser");
+    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(Users, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("workspaceUserInformation") })] }), _jsx(CardDescription, { children: t("workspaceUserAssignmentDetails") })] }), _jsx(Separator, {}), _jsx(CardContent, { className: "pt-6", children: _jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Building2, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("workspace") })] }), _jsx("p", { className: "text-base", children: formatValue((workspace === null || workspace === void 0 ? void 0 : workspace.name) || workspaceId) }), (workspace === null || workspace === void 0 ? void 0 : workspace.subdomain) && (_jsxs("p", { className: "text-muted-foreground text-sm", children: [t("subdomain"), workspace.subdomain] }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Shield, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("role") })] }), _jsx(Badge, { variant: "secondary", className: "gap-1", children: (role === null || role === void 0 ? void 0 : role.userRole) || t("noRoleAssigned") })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("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 ? t("active") : t("inactive")] })] })] }) })] }) }));
+};