@appcorp/fusion-storybook 0.5.3 → 0.5.6

package/base-modules/user/context/use-user-module.d.ts

@@ -13,7 +13,6 @@ export declare const useUserModule: () => {
     handleDelete: (row?: TableRow) => void;
     handleEdit: (row?: TableRow) => void;
     handleFilters: () => void;
-    handleMoreActions: () => void;
     handlePageChange: (page: number | unknown) => void;
     handlePageLimitChange: (k: string, value: object) => void;
     handleSearch: (query: string) => void;

package/base-modules/user/context/use-user-module.js

@@ -57,8 +57,10 @@ export const useUserModule = () => {
             workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id,
         });
     }, [state, workspace === null || workspace === void 0 ? void 0 : workspace.id, (_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.country]);
-    const byIdParams = useMemo(() => ({ id: state.id }), [state.id]);
-    const deleteParams = useMemo(() => ({ id: state.id }), [state.id]);
+    // Browser callers must always name the tenant (the API/tenant guard needs it
+    // to scope every single-record operation).
+    const byIdParams = useMemo(() => ({ id: state.id, workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id }), [state.id, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
+    const deleteParams = useMemo(() => ({ id: state.id, workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id }), [state.id, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
     // ============================================================================
     // 1.4.3 UTILITIES
     // ============================================================================
@@ -100,7 +102,6 @@ export const useUserModule = () => {
                     avatar: "",
                     email: "",
                     enabled: true,
-                    filterEnabled: undefined,
                     id: "",
                     name: "",
                     password: "",
@@ -121,9 +122,16 @@ export const useUserModule = () => {
         }
         if (data) {
             const response = data;
+            // The API scopes `workspaces` to the current tenant; surface that
+            // membership role so the table/view can render it.
+            const items = ((_a = response.items) !== null && _a !== void 0 ? _a : []).map((item) => {
+                var _a, _b, _c;
+                const membership = (_a = item.workspaces) === null || _a === void 0 ? void 0 : _a[0];
+                return Object.assign(Object.assign({}, item), { userRole: (_c = (_b = membership === null || membership === void 0 ? void 0 : membership.role) === null || _b === void 0 ? void 0 : _b.userRole) !== null && _c !== void 0 ? _c : "" });
+            });
             dispatch({
                 type: USER_ACTION_TYPES.SET_ITEMS,
-                payload: { items: (_a = response.items) !== null && _a !== void 0 ? _a : [], count: (_b = response.count) !== null && _b !== void 0 ? _b : 0 },
+                payload: { items, count: (_b = response.count) !== null && _b !== void 0 ? _b : 0 },
             });
         }
     }, [dispatch, showToast, t]);
@@ -240,11 +248,12 @@ export const useUserModule = () => {
         resetFormAndCloseDrawer();
     }, [resetFormAndCloseDrawer]);
     const handleCreate = useCallback(() => {
+        resetRecordFormState();
         dispatch({
             type: USER_ACTION_TYPES.SET_DRAWER,
             payload: { drawer: USER_DRAWER.FORM_DRAWER },
         });
-    }, [dispatch]);
+    }, [dispatch, resetRecordFormState]);
     const handleView = useCallback((row) => {
         resetRecordFormState();
         byIdFetchNow === null || byIdFetchNow === void 0 ? void 0 : byIdFetchNow(undefined, { params: { id: row === null || row === void 0 ? void 0 : row.id } });
@@ -265,21 +274,15 @@ export const useUserModule = () => {
         if (!confirm(t("messagesDeleteConfirmation")))
             return;
         deleteFetchNow === null || deleteFetchNow === void 0 ? void 0 : deleteFetchNow(undefined, {
-            body: JSON.stringify({ id: row === null || row === void 0 ? void 0 : row.id }),
+            body: JSON.stringify({ id: row === null || row === void 0 ? void 0 : row.id, workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id }),
         });
-    }, [deleteFetchNow, t]);
+    }, [deleteFetchNow, t, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
     const handleFilters = useCallback(() => {
         dispatch({
             type: USER_ACTION_TYPES.SET_DRAWER,
             payload: { drawer: USER_DRAWER.FILTER_DRAWER },
         });
     }, [dispatch]);
-    const handleMoreActions = useCallback(() => {
-        dispatch({
-            type: USER_ACTION_TYPES.SET_DRAWER,
-            payload: { drawer: USER_DRAWER.MORE_ACTIONS_DRAWER },
-        });
-    }, [dispatch]);
     const handlePageChange = useCallback((page) => {
         const nextPage = typeof page === "number" ? page : state.currentPage + 1;
         dispatch({
@@ -339,18 +342,33 @@ export const useUserModule = () => {
         });
     }, [dispatch]);
     const toggleStatus = useCallback((row) => {
+        if (!(row === null || row === void 0 ? void 0 : row.id))
+            return;
+        if (!confirm(t("messagesToggleConfirmation")))
+            return;
         updateFetchNow(undefined, {
-            body: JSON.stringify(Object.assign(Object.assign({}, row), { workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id, enabled: !(row === null || row === void 0 ? void 0 : row.enabled) })),
+            body: JSON.stringify({
+                id: row.id,
+                workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id,
+                enabled: !row.enabled,
+            }),
         });
-    }, [updateFetchNow, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
+    }, [updateFetchNow, t, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
     // ============================================================================
     // 1.4.7 NETWORK ACTIONS
     // ============================================================================
     const handleUploadImage = useCallback(async () => {
         var _a;
         if (!((_a = state.avatar) === null || _a === void 0 ? void 0 : _a.startsWith("blob:")))
-            return undefined;
-        const fileRef = `${workspace === null || workspace === void 0 ? void 0 : workspace.id}/${updateParams.id}/avatar/${updateParams.id}.webp`;
+            return {};
+        if (!(workspace === null || workspace === void 0 ? void 0 : workspace.id)) {
+            toastNetworkError();
+            return { failed: true };
+        }
+        // The Supabase user id does not exist yet on create — use a random path so
+        // the upload never lands on an empty/overwritten key.
+        const userKey = updateParams.id || crypto.randomUUID();
+        const fileRef = `${workspace.id}/users/${userKey}/${crypto.randomUUID()}.webp`;
         try {
             const blob = await fetch(state.avatar).then((r) => r.blob());
             const webpBlob = await blobToWebP(blob, { quality: 0.8 });
@@ -383,36 +401,44 @@ export const useUserModule = () => {
                     type: USER_ACTION_TYPES.SET_INPUT_FIELD,
                     payload: { key: "avatar", value: url },
                 });
-                return url;
+                return { url };
             }
         }
         catch (_b) {
             toastNetworkError();
+            return { failed: true };
         }
-        return undefined;
+        return {};
     }, [state.avatar, dispatch, workspace === null || workspace === void 0 ? void 0 : workspace.id, updateParams.id]);
     const checkUserEmailExists = useCallback(async (emailParam) => {
-        var _a;
+        var _a, _b;
         const targetEmail = (typeof emailParam === "string" && emailParam) || state.email;
         if (!targetEmail)
             return null;
         const result = await fetchData({
-            url: `${USER_API_ROUTES.UNIT_BY_EMAIL}?email=${encodeURIComponent(String(targetEmail))}`,
+            url: `${USER_API_ROUTES.UNIT_BY_EMAIL}?email=${encodeURIComponent(String(targetEmail))}&workspaceId=${encodeURIComponent((_a = workspace === null || workspace === void 0 ? void 0 : workspace.id) !== null && _a !== void 0 ? _a : "")}`,
             method: API_METHODS.GET,
             headers: {
             // "x-api-token": process.env.NEXT_PUBLIC_API_KEY!,
             },
         });
-        return (_a = result === null || result === void 0 ? void 0 : result.data) !== null && _a !== void 0 ? _a : null;
-    }, [state.email]);
+        return (_b = result === null || result === void 0 ? void 0 : result.data) !== null && _b !== void 0 ? _b : null;
+    }, [state.email, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
     const handleSubmit = useCallback(async () => {
         dispatch({
             type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
             payload: { disabled: true },
         });
-        const uploadedUrl = await handleUploadImage();
-        const finalParams = uploadedUrl
-            ? Object.assign(Object.assign({}, updateParams), { avatar: uploadedUrl }) : updateParams;
+        const upload = await handleUploadImage();
+        if (upload.failed) {
+            dispatch({
+                type: USER_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+                payload: { disabled: false },
+            });
+            return;
+        }
+        const finalParams = upload.url
+            ? Object.assign(Object.assign({}, updateParams), { avatar: upload.url }) : updateParams;
         validateForm({
             params: finalParams,
             schema: userFormValidation,
@@ -470,13 +496,7 @@ export const useUserModule = () => {
     // ============================================================================
     const headerActions = useMemo(() => [
         {
-            enabled: false,
-            handleOnClick: handleMoreActions,
-            label: t("actionsButtonMoreActions"),
-            order: 0,
-        },
-        {
-            enabled: false,
+            enabled: true,
             handleOnClick: handleFilters,
             label: t("actionsButtonFilters"),
             order: 1,
@@ -487,7 +507,7 @@ export const useUserModule = () => {
             label: t("actionsButtonAdd"),
             order: 2,
         },
-    ], [handleCreate, handleFilters, handleMoreActions, t]);
+    ], [handleCreate, handleFilters, t]);
     const rowActions = useMemo(() => [
         {
             enabled: true,
@@ -502,13 +522,14 @@ export const useUserModule = () => {
             order: 2,
         },
         {
-            enabled: false,
+            enabled: true,
             handleOnClick: handleDelete,
             label: t("actionsButtonDelete"),
             order: 3,
+            variant: "destructive",
         },
         {
-            enabled: false,
+            enabled: true,
             handleOnClick: toggleStatus,
             label: t("actionsButtonToggleStatus"),
             order: 4,
@@ -541,7 +562,6 @@ export const useUserModule = () => {
         handleDelete,
         handleEdit,
         handleFilters,
-        handleMoreActions,
         handlePageChange,
         handlePageLimitChange,
         handleSearch,

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

@@ -2,7 +2,6 @@ import { UserBE, USER_ROLE } from "../../type";
 export declare const USER_DRAWER: {
     readonly FILTER_DRAWER: string;
     readonly FORM_DRAWER: string;
-    readonly MORE_ACTIONS_DRAWER: string;
     readonly VIEW_DRAWER: string;
 };
 export declare const USER_ACTION_TYPES: {

package/base-modules/user/context.js

@@ -26,7 +26,6 @@ import { pageLimit } from "./constants";
 export const USER_DRAWER = {
     FILTER_DRAWER: DRAWER_TYPES.FILTER_DRAWER,
     FORM_DRAWER: DRAWER_TYPES.FORM_DRAWER,
-    MORE_ACTIONS_DRAWER: DRAWER_TYPES.MORE_ACTIONS_DRAWER,
     VIEW_DRAWER: DRAWER_TYPES.VIEW_DRAWER,
 };
 // ============================================================================

package/base-modules/user/form.js

@@ -3,19 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { EnhancedInput } from "@appcorp/shadcn/components/enhanced-input";
 import { EnhancedCheckbox } from "@appcorp/shadcn/components/enhanced-checkbox";
-import { useEnhancedCombobox } from "@appcorp/shadcn/hooks/use-enhanced-combobox";
+import { EnhancedCombobox } from "@appcorp/shadcn/components/enhanced-combobox";
 import { EnhancedDropzone } from "@appcorp/shadcn/components/enhanced-dropzone";
 import { useUserModule } from "./context";
 import { USER_ROLE } from "../../type";
-import { USER_API_ROUTES } from "../../constants";
 import { formatPhone } from "@react-pakistan/util-functions/general/format-phone";
 import { useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { getTranslatedError } from "../../utils/get-translated-error";
+import { MIN_PASSWORD_LENGTH } from "./validate";
 export const UserForm = () => {
     const t = useTranslations("user");
     const { handleAvatar, handleChange, state } = useUserModule();
     const { avatar, email, enabled, errors, name, password, phone, userRole } = state;
+    const isEdit = Boolean(state.id);
     const roleLabelMap = {
         SCHOOL_ADMIN: t("formOptionAdmin"),
         TEACHER: t("formOptionTeacher"),
@@ -25,36 +26,19 @@ export const UserForm = () => {
     const roleOptions = Object.values(USER_ROLE)
         .filter((roleOption) => roleOption !== USER_ROLE.SUPER_ADMIN &&
         roleOption !== USER_ROLE.STUDENT &&
-        roleOption !== USER_ROLE.PARENT)
+        roleOption !== USER_ROLE.PARENT &&
+        roleOption !== USER_ROLE.SCHOOL_ADMIN)
         .map((roleOption) => ({
         id: roleOption,
         name: roleLabelMap[roleOption] || roleOption.replace(/_/g, " "),
     }));
-    const { enhancedComboboxElement: userRoleCombo } = useEnhancedCombobox({
-        emptyText: t("formNoRoleEmpty"),
-        id: "userRole",
-        info: t("formRoleIdInfo"),
-        label: t("formRoleIdLabel"),
-        onValueChange: (value) => handleChange("userRole", value),
-        options: roleOptions.map((opt) => ({
-            value: opt.id,
-            label: opt.name,
-        })),
-        placeholder: t("formRoleIdPlaceholder"),
-        required: true,
-        searchEndpoint: USER_API_ROUTES.ROLE,
-        searchPlaceholder: t("formSearchRolePlaceholder"),
-        formatSearchResult: (item) => {
-            var _a, _b;
-            return ({
-                label: String((_a = item.label) !== null && _a !== void 0 ? _a : ""),
-                value: String((_b = item.value) !== null && _b !== void 0 ? _b : ""),
-            });
-        },
-        value: userRole !== null && userRole !== void 0 ? userRole : "",
-    });
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "name", t }), id: "name", info: t("formNameInfo"), label: t("formNameLabel"), onChange: (e) => handleChange("name", e.target.value), placeholder: t("formNamePlaceholder"), required: true, value: name || "" }), _jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "email", t }), id: "email", info: t("formEmailInfo"), label: t("formEmailLabel"), onChange: (e) => handleChange("email", e.target.value), placeholder: t("formEmailPlaceholder"), required: true, type: "email", value: email }), _jsxs("div", { className: "relative", children: [_jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "password", t }), id: "password", info: t("formPasswordInfo"), label: t("formPasswordLabel"), onChange: (e) => handleChange("password", e.target.value), placeholder: t("formPasswordPlaceholder"), type: passwordVisible ? "text" : "password", value: password || "" }), _jsx("button", { type: "button", "aria-label": passwordVisible ? t("actionHidePassword") : t("actionShowPassword"), onClick: () => setPasswordVisible(!passwordVisible), className: "text-muted-foreground hover:text-foreground absolute inset-y-0 top-1 right-3 flex items-center justify-center p-1 text-sm", children: passwordVisible ? (_jsx(EyeOff, { className: "h-4 w-4" })) : (_jsx(Eye, { className: "h-4 w-4" })) })] }), _jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "phone", t }), id: "phone", info: t("formPhoneInfo"), label: t("formPhoneLabel"), onChange: (e) => {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "name", t }), id: "name", info: t("formNameInfo"), label: t("formNameLabel"), onChange: (e) => handleChange("name", e.target.value), placeholder: t("formNamePlaceholder"), required: true, value: name || "" }), _jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "email", t }), id: "email", info: isEdit ? t("formEmailImmutableInfo") : t("formEmailInfo"), label: t("formEmailLabel"), onChange: (e) => handleChange("email", e.target.value), placeholder: t("formEmailPlaceholder"), readOnly: isEdit, required: true, type: "email", value: email }), _jsxs("div", { className: "relative", children: [_jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "password", t }), id: "password", info: isEdit
+                            ? t("formPasswordEditInfo", { length: MIN_PASSWORD_LENGTH })
+                            : t("formPasswordCreateInfo", { length: MIN_PASSWORD_LENGTH }), label: t("formPasswordLabel"), onChange: (e) => handleChange("password", e.target.value), placeholder: t("formPasswordPlaceholder"), required: !isEdit, type: passwordVisible ? "text" : "password", value: password || "" }), _jsx("button", { type: "button", "aria-label": passwordVisible ? t("actionHidePassword") : t("actionShowPassword"), onClick: () => setPasswordVisible(!passwordVisible), className: "text-muted-foreground hover:text-foreground absolute inset-y-0 top-1 right-3 flex items-center justify-center p-1 text-sm", children: passwordVisible ? (_jsx(EyeOff, { className: "h-4 w-4" })) : (_jsx(Eye, { className: "h-4 w-4" })) })] }), _jsx(EnhancedInput, { error: getTranslatedError({ errors, key: "phone", t }), id: "phone", info: t("formPhoneInfo"), label: t("formPhoneLabel"), onChange: (e) => {
                     var _a;
                     return handleChange("phone", ((_a = formatPhone(e.target.value)) === null || _a === void 0 ? void 0 : _a.international) || e.target.value);
-                }, placeholder: t("formPhonePlaceholder"), type: "tel", value: phone || "" }), _jsx(EnhancedDropzone, { accept: ["image/*"], error: getTranslatedError({ errors, key: "avatar", t }), id: "avatar", info: t("formAvatarInfo"), label: t("formAvatarLabel"), maxFiles: 1, maxSize: 0.25 * 1024 * 1024, onChange: handleAvatar, onRemoveRemote: () => handleChange("avatar", ""), resize: true, value: avatar ? [avatar] : [] }), _jsx(EnhancedCheckbox, { checked: enabled, error: getTranslatedError({ errors, key: "enabled", t }), id: "enabled", info: t("formEnabledInfo"), label: t("formEnabledLabel"), onCheckedChange: (checked) => handleChange("enabled", checked) }), userRoleCombo] }));
+                }, placeholder: t("formPhonePlaceholder"), type: "tel", value: phone || "" }), _jsx(EnhancedDropzone, { accept: ["image/*"], error: getTranslatedError({ errors, key: "avatar", t }), id: "avatar", info: t("formAvatarInfo"), label: t("formAvatarLabel"), maxFiles: 1, maxSize: 0.25 * 1024 * 1024, onChange: handleAvatar, onRemoveRemote: () => handleChange("avatar", ""), resize: true, value: avatar ? [avatar] : [] }), _jsx(EnhancedCheckbox, { checked: enabled, error: getTranslatedError({ errors, key: "enabled", t }), id: "enabled", info: t("formEnabledInfo"), label: t("formEnabledLabel"), onCheckedChange: (checked) => handleChange("enabled", checked) }), _jsx(EnhancedCombobox, { emptyText: t("formNoRoleEmpty"), error: getTranslatedError({ errors, key: "userRole", t }), id: "userRole", info: t("formRoleIdInfo"), label: t("formRoleIdLabel"), onValueChange: (value) => handleChange("userRole", value), options: roleOptions.map((opt) => ({
+                    value: opt.id,
+                    label: opt.name,
+                })), placeholder: t("formRoleIdPlaceholder"), required: true, searchPlaceholder: t("formSearchRolePlaceholder"), value: userRole !== null && userRole !== void 0 ? userRole : "" })] }));
 };

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

@@ -34,6 +34,11 @@ interface Props {
     tableColumnHeaderId: string;
     tableColumnHeaderName: string;
     tableColumnHeaderPhone: string;
+    /**
+     * Optional so consumers on an older package release still compile; defaults
+     * to the `user` namespace translation.
+     */
+    tableColumnHeaderRole?: string;
     tableDescription: string;
     tableSearchPlaceholder: string;
     tableTitle: string;

package/base-modules/user/page.js

@@ -18,13 +18,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { useTranslations } from "next-intl";
 import { COMPONENT_TYPE } from "@appcorp/shadcn/components/enhanced-table";
 import { createGenericModulePage, } from "@react-pakistan/util-functions/factory/generic-component-factory";
 import { useUserModule, UserProvider, 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";
 // ============================================================================
@@ -34,6 +34,7 @@ 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: "userRole" },
     { componentType: COMPONENT_TYPE.TEXT, key: "phone" },
     { componentType: COMPONENT_TYPE.BOOLEAN, key: "enabled" },
     { componentType: COMPONENT_TYPE.ACTIONS },
@@ -44,20 +45,20 @@ const tableBodyCols = [
 const createComponentInstances = () => ({
     filter: _jsx(UserFilter, {}),
     form: _jsx(UserForm, {}),
-    moreActions: _jsx(UserMoreActions, {}),
     view: _jsx(UserView, {}),
 });
-const createUserConfig = ({ dispatch, drawerButtonCancel, drawerButtonSave, drawerFilterDescription, drawerFilterTitle, drawerFormDescription, drawerFormTitle, drawerMoreActionsDescription, drawerMoreActionsTitle, drawerViewDescription, drawerViewTitle, tableColumnHeaderActions, tableColumnHeaderEmail, tableColumnHeaderEnabled, tableColumnHeaderId, tableColumnHeaderName, tableColumnHeaderPhone, tableDescription, tableSearchPlaceholder, tableTitle, }) => {
+const createUserConfig = ({ dispatch, drawerButtonCancel, drawerButtonSave, drawerFilterDescription, drawerFilterTitle, drawerFormDescription, drawerFormTitle, drawerMoreActionsDescription, drawerMoreActionsTitle, drawerViewDescription, drawerViewTitle, tableColumnHeaderActions, tableColumnHeaderEmail, tableColumnHeaderEnabled, tableColumnHeaderId, tableColumnHeaderName, tableColumnHeaderPhone, tableColumnHeaderRole, tableDescription, tableSearchPlaceholder, tableTitle, }) => {
     const components = createComponentInstances();
     return {
         moduleName: "user",
         tableColumns: [
             { label: tableColumnHeaderId, width: "5%" },
-            { label: tableColumnHeaderName, width: "30%" },
-            { label: tableColumnHeaderEmail, width: "30%" },
-            { label: tableColumnHeaderPhone, width: "20%" },
+            { label: tableColumnHeaderName, width: "22%" },
+            { label: tableColumnHeaderEmail, width: "24%" },
+            { label: tableColumnHeaderRole, width: "13%" },
+            { label: tableColumnHeaderPhone, width: "17%" },
             { label: tableColumnHeaderEnabled, width: "10%" },
-            { label: tableColumnHeaderActions, width: "5%" },
+            { label: tableColumnHeaderActions, width: "9%" },
         ],
         cancelLabel: drawerButtonCancel,
         drawerFilterDescription,
@@ -70,7 +71,7 @@ const createUserConfig = ({ dispatch, drawerButtonCancel, drawerButtonSave, draw
         drawerViewTitle,
         filterContent: components.filter,
         formContent: components.form,
-        moreActionsContent: components.moreActions,
+        moreActionsContent: null,
         saveLabel: drawerButtonSave,
         searchPlaceholder: tableSearchPlaceholder,
         tableDescription,
@@ -86,7 +87,10 @@ const createUserConfig = ({ dispatch, drawerButtonCancel, drawerButtonSave, draw
 // ============================================================================
 const GenericUserPage = createGenericModulePage();
 const UserPageInner = (props) => {
+    var _a;
     const context = useUserModule();
+    const t = useTranslations("user");
+    const roleHeader = (_a = props.tableColumnHeaderRole) !== null && _a !== void 0 ? _a : t("tableColumnHeaderRole");
     const userConfig = useMemo(() => createUserConfig({
         dispatch: context.dispatch,
         drawerButtonCancel: props.drawerButtonCancel,
@@ -105,6 +109,7 @@ const UserPageInner = (props) => {
         tableColumnHeaderId: props.tableColumnHeaderId,
         tableColumnHeaderName: props.tableColumnHeaderName,
         tableColumnHeaderPhone: props.tableColumnHeaderPhone,
+        tableColumnHeaderRole: roleHeader,
         tableDescription: props.tableDescription,
         tableSearchPlaceholder: props.tableSearchPlaceholder,
         tableTitle: props.tableTitle,
@@ -126,16 +131,17 @@ const UserPageInner = (props) => {
         props.tableColumnHeaderId,
         props.tableColumnHeaderName,
         props.tableColumnHeaderPhone,
+        roleHeader,
         props.tableDescription,
         props.tableSearchPlaceholder,
         props.tableTitle,
     ]);
     const hasPermission = resolveRbacPermissions({
         userRole: props.userRole,
-        moduleName: "People Management",
+        moduleName: "User",
     });
     if (!hasPermission) {
-        return _jsx(RbacNoAccess, { moduleName: "People Management" });
+        return _jsx(RbacNoAccess, { moduleName: "User" });
     }
     return (_jsx("div", { className: "p-4", children: _jsx(GenericUserPage, { overrideConfig: userConfig, context: context, tableBodyCols: tableBodyCols }) }));
 };

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

@@ -2,17 +2,26 @@
  * User Validation Schema
  *
  * Zod validation schemas for user form data with i18n-ready error keys.
+ *
+ * Password rules:
+ * - required on create (the onboarding email delivers it),
+ * - optional on edit (an empty value keeps the current password),
+ * - at least `MIN_PASSWORD_LENGTH` characters whenever provided.
  */
 import { z } from "zod";
 import { USER_ROLE } from "../../type";
+export declare const MIN_PASSWORD_LENGTH = 8;
 export declare const VALIDATION_KEYS: {
     readonly name: "validationUserNameRequired";
     readonly emailInvalid: "validationUserEmailInvalid";
     readonly phoneInvalid: "validationUserPhoneInvalid";
     readonly roleInvalid: "validationUserRoleInvalid";
     readonly roleSchoolAdminNotAllowed: "validationUserRoleSchoolAdminNotAllowed";
+    readonly passwordRequired: "validationUserPasswordRequired";
+    readonly passwordMinLength: "validationUserPasswordMinLength";
 };
 export declare const userFormValidation: z.ZodObject<{
+    id: z.ZodOptional<z.ZodString>;
     name: z.ZodString;
     email: z.ZodEmail;
     password: z.ZodOptional<z.ZodString>;
@@ -21,3 +30,4 @@ export declare const userFormValidation: z.ZodObject<{
     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>;
+export type UserForm = z.infer<typeof userFormValidation>;

package/base-modules/user/validate.js

@@ -2,6 +2,11 @@
  * User Validation Schema
  *
  * Zod validation schemas for user form data with i18n-ready error keys.
+ *
+ * Password rules:
+ * - required on create (the onboarding email delivers it),
+ * - optional on edit (an empty value keeps the current password),
+ * - at least `MIN_PASSWORD_LENGTH` characters whenever provided.
  */
 import { z } from "zod";
 import { USER_ROLE } from "../../type";
@@ -9,24 +14,29 @@ import { toE164Phone } from "../../utils/to-e164-phone";
 // ============================================================================
 // VALIDATION KEYS
 // ============================================================================
+export const MIN_PASSWORD_LENGTH = 8;
 export const VALIDATION_KEYS = {
     name: "validationUserNameRequired",
     emailInvalid: "validationUserEmailInvalid",
     phoneInvalid: "validationUserPhoneInvalid",
     roleInvalid: "validationUserRoleInvalid",
     roleSchoolAdminNotAllowed: "validationUserRoleSchoolAdminNotAllowed",
+    passwordRequired: "validationUserPasswordRequired",
+    passwordMinLength: "validationUserPasswordMinLength",
 };
 // ============================================================================
 // VALIDATION SCHEMA
 // ============================================================================
-export const userFormValidation = z.object({
+export const userFormValidation = z
+    .object({
+    id: z.string().optional(),
     name: z.string().min(1, VALIDATION_KEYS.name),
     email: z.email(VALIDATION_KEYS.emailInvalid),
     password: z.string().optional(),
     phone: z
         .string()
         .optional()
-        .transform((val) => { var _a; return (val ? (_a = toE164Phone(val)) !== null && _a !== void 0 ? _a : val : val); }),
+        .transform((val) => { var _a; return (val ? ((_a = toE164Phone(val)) !== null && _a !== void 0 ? _a : val) : val); }),
     avatar: z.string().optional(),
     enabled: z.boolean().optional(),
     userRole: z
@@ -36,4 +46,24 @@ export const userFormValidation = z.object({
         .refine((v) => v !== USER_ROLE.SCHOOL_ADMIN, {
         message: VALIDATION_KEYS.roleSchoolAdminNotAllowed,
     }),
+})
+    .superRefine((value, ctx) => {
+    var _a, _b;
+    const password = (_b = (_a = value.password) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+    const isCreate = !value.id;
+    if (isCreate && !password) {
+        ctx.addIssue({
+            code: "custom",
+            message: VALIDATION_KEYS.passwordRequired,
+            path: ["password"],
+        });
+        return;
+    }
+    if (password && password.length < MIN_PASSWORD_LENGTH) {
+        ctx.addIssue({
+            code: "custom",
+            message: VALIDATION_KEYS.passwordMinLength,
+            path: ["password"],
+        });
+    }
 });

package/base-modules/user/view.js

@@ -6,7 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@app
 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 { User, Phone, Mail, Shield, CheckCircle2, XCircle } from "lucide-react";
 import { formatValue } from "@react-pakistan/util-functions/general/format-value";
 import { formatPhoneDisplay } from "@react-pakistan/util-functions/general/format-phone-display";
 const getInitials = (fullName) => {
@@ -22,6 +22,6 @@ const getInitials = (fullName) => {
 export const UserView = () => {
     const t = useTranslations("user");
     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: t("viewFieldUserInformation") })] }), _jsx(CardDescription, { children: t("viewUserAccountDetails") })] }), _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: t("viewFieldProfilePicture") }), _jsxs(Avatar, { className: "h-20 w-20", children: [_jsx(AvatarImage, { src: avatar || undefined, alt: name || t("viewFieldName") }), _jsx(AvatarFallback, { className: "text-lg", children: getInitials(name) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("p", { className: "text-muted-foreground text-sm font-medium", children: ["                ", t("formNameLabel")] }), _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: t("formEmailLabel") })] }), _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: t("formPhoneLabel") })] }), _jsx("p", { className: "text-base", children: formatPhoneDisplay(phone) || formatValue(phone) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldStatus") }), _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("badgeActive") : t("badgeInactive")] })] })] }) })] }) }));
+    const { avatar, email, enabled, name, phone, userRole } = 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: t("viewFieldUserInformation") })] }), _jsx(CardDescription, { children: t("viewUserAccountDetails") })] }), _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: t("viewFieldProfilePicture") }), _jsxs(Avatar, { className: "h-20 w-20", children: [_jsx(AvatarImage, { src: avatar || undefined, alt: name || t("viewFieldName") }), _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: t("formNameLabel") }), _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(Shield, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldRole") })] }), _jsx("p", { className: "text-base", children: formatValue(userRole) })] }), _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: t("formEmailLabel") })] }), _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: t("formPhoneLabel") })] }), _jsx("p", { className: "text-base", children: formatPhoneDisplay(phone) || formatValue(phone) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldStatus") }), _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("badgeActive") : t("badgeInactive")] })] })] }) })] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/fusion-storybook",
-  "version": "0.5.3",
+  "version": "0.5.6",
   "scripts": {
     "build-storybook": "storybook build",
     "build:next": "next build",