@appcorp/fusion-storybook 0.1.75 → 0.1.76

package/base-modules/teacher/context.js

@@ -27,6 +27,7 @@ import { createGenericModule } from "@react-pakistan/util-functions/factory/gene
 import { DRAWER_TYPES } from "@react-pakistan/util-functions/factory/generic-component-factory";
 import { generateThemeToast, TOAST_VARIANT, } from "@appcorp/shadcn/lib/toast-utils";
 import { GENDER } from "../../type";
+import { formatPhoneDisplay, normalizePhone } from "../../utils/phone-helpers";
 import { TEACHER_API_ROUTES, pageLimit } from "./constants";
 import { teacherFormValidation } from "./validate";
 import { getCachedTeachers, invalidateTeachersCache } from "./cache";
@@ -123,7 +124,7 @@ export const useTeacherModule = () => {
         city: state.city,
         country: state.country,
         dateOfBirth: state.dateOfBirth,
-        emergencyPhone: state.emergencyPhone,
+        emergencyPhone: normalizePhone(state.emergencyPhone),
         enabled: state.enabled,
         experience: state.experience,
         firstName: state.firstName,
@@ -131,7 +132,7 @@ export const useTeacherModule = () => {
         id: state.id,
         joiningDate: state.joiningDate,
         lastName: state.lastName,
-        phone: state.phone,
+        phone: normalizePhone(state.phone),
         postalCode: state.postalCode,
         qualification: state.qualification,
         schoolId,
@@ -203,9 +204,12 @@ export const useTeacherModule = () => {
             return;
         }
         if (data) {
+            const teacher = data;
             dispatch({
                 type: TEACHER_ACTION_TYPES.SET_FORM_DATA,
-                payload: { form: Object.assign(Object.assign({}, data), { filterEnabled: undefined }) },
+                payload: {
+                    form: Object.assign(Object.assign({}, teacher), { phone: formatPhoneDisplay(teacher.phone) || "", emergencyPhone: formatPhoneDisplay(teacher.emergencyPhone) || "", filterEnabled: undefined }),
+                },
             });
         }
     }, [dispatch, showToast, t]);
@@ -412,7 +416,7 @@ export const useTeacherModule = () => {
         {
             enabled: true,
             handleOnClick: handleCreate,
-            label: t("headerActionsAddTeacher"),
+            label: t("headerActionsAdd"),
             order: 2,
         },
     ], [handleCreate, handleFilters, handleMoreActions, t]);
@@ -424,16 +428,17 @@ export const useTeacherModule = () => {
             order: 1,
         },
         {
-            enabled: true,
+            enabled: (row) => (row === null || row === void 0 ? void 0 : row.enabled) === true,
             handleOnClick: handleEdit,
             label: t("rowActionsEdit"),
             order: 2,
         },
         {
-            enabled: false,
+            enabled: (row) => (row === null || row === void 0 ? void 0 : row.enabled) === false,
             handleOnClick: handleDelete,
             label: t("rowActionsDelete"),
             order: 3,
+            variant: "destructive",
         },
         {
             enabled: false,

package/base-modules/teacher/view.js

@@ -7,6 +7,7 @@ import { Avatar, AvatarFallback, AvatarImage, } from "@appcorp/shadcn/components
 import { User, Phone, MapPin, Calendar, GraduationCap, CheckCircle2, XCircle, Briefcase, } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { formatValue } from "../../utils/format-value";
+import { formatPhoneDisplay } from "../../utils/phone-helpers";
 import { formatDate, DATE_FORMATS } from "@react-pakistan/util-functions";
 import { useTeacherModule } from "./context";
 export const TeacherView = () => {
@@ -21,7 +22,8 @@ export const TeacherView = () => {
         const last = (lastName === null || lastName === void 0 ? void 0 : lastName.charAt(0)) || "";
         return (first + last).toUpperCase() || "T";
     };
-    return (_jsxs("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("basicInformation") })] }), _jsx(CardDescription, { children: t("teachersPersonalDetails") })] }), _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("profilePicture") }), _jsxs(Avatar, { className: "h-20 w-20", children: [_jsx(AvatarImage, { src: avatar || undefined, alt: fullName }), _jsx(AvatarFallback, { className: "text-lg", children: getInitials() })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("teacherCode") }), _jsx("p", { className: "font-mono text-base", children: formatValue(teacherCode) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("name") }), _jsx("p", { className: "text-base", children: fullName })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("gender") }), _jsx("p", { className: "text-base", children: formatValue(gender) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("dateOfBirth") })] }), _jsx("p", { className: "text-base", children: formatDateValue(dateOfBirth) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("status") }), _jsx("div", { className: "flex items-center gap-2", children: enabled ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx(Badge, { variant: "default", children: t("active") })] })) : (_jsxs(_Fragment, { children: [_jsx(XCircle, { className: "h-4 w-4 text-red-600" }), _jsx(Badge, { variant: "destructive", children: t("inactive") })] })) })] })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Phone, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("contactInformation") })] }), _jsx(CardDescription, { children: t("howToReachTheTeacher") })] }), _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(Phone, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("phone") })] }), _jsx("p", { className: "text-base", children: formatValue(phone) })] }), _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("emergencyPhone") })] }), _jsx("p", { className: "text-base", children: formatValue(emergencyPhone) })] })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GraduationCap, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("professionalInformation") })] }), _jsx(CardDescription, { children: t("teachingCredentialsAndExperience") })] }), _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: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("qualification") }), _jsx("p", { className: "text-base", children: formatValue(qualification) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("specialization") }), _jsx("p", { className: "text-base", children: formatValue(specialization) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Briefcase, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("experience") })] }), _jsx("p", { className: "text-base", children: experience
+    return (_jsxs("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("basicInformation") })] }), _jsx(CardDescription, { children: t("teachersPersonalDetails") })] }), _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("profilePicture") }), _jsxs(Avatar, { className: "h-20 w-20", children: [_jsx(AvatarImage, { src: avatar || undefined, alt: fullName }), _jsx(AvatarFallback, { className: "text-lg", children: getInitials() })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("teacherCode") }), _jsx("p", { className: "font-mono text-base", children: formatValue(teacherCode) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("name") }), _jsx("p", { className: "text-base", children: fullName })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("gender") }), _jsx("p", { className: "text-base", children: formatValue(gender) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("dateOfBirth") })] }), _jsx("p", { className: "text-base", children: formatDateValue(dateOfBirth) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("status") }), _jsx("div", { className: "flex items-center gap-2", children: enabled ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx(Badge, { variant: "default", children: t("active") })] })) : (_jsxs(_Fragment, { children: [_jsx(XCircle, { className: "h-4 w-4 text-red-600" }), _jsx(Badge, { variant: "destructive", children: t("inactive") })] })) })] })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Phone, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("contactInformation") })] }), _jsx(CardDescription, { children: t("howToReachTheTeacher") })] }), _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(Phone, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("phone") })] }), _jsx("p", { className: "text-base", children: formatPhoneDisplay(phone) || formatValue(phone) })] }), _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("emergencyPhone") })] }), _jsx("p", { className: "text-base", children: formatPhoneDisplay(emergencyPhone) ||
+                                                formatValue(emergencyPhone) })] })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GraduationCap, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("professionalInformation") })] }), _jsx(CardDescription, { children: t("teachingCredentialsAndExperience") })] }), _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: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("qualification") }), _jsx("p", { className: "text-base", children: formatValue(qualification) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("specialization") }), _jsx("p", { className: "text-base", children: formatValue(specialization) })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Briefcase, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("experience") })] }), _jsx("p", { className: "text-base", children: experience
                                                 ? t("experienceYears", { years: experience })
                                                 : "\u2014" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("joiningDate") })] }), _jsx("p", { className: "text-base", children: formatDateValue(joiningDate) })] })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("addressInformation") })] }), _jsx(CardDescription, { children: t("teachersResidentialAddress") })] }), _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: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("address") }), _jsx("p", { className: "text-base", children: formatValue(address) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("city") }), _jsx("p", { className: "text-base", children: formatValue(city) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("stateProvince") }), _jsx("p", { className: "text-base", children: formatValue(stateValue) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("country") }), _jsx("p", { className: "text-base", children: formatValue(country) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("postalCode") }), _jsx("p", { className: "text-base", children: formatValue(postalCode) })] })] })] }) })] }), bio && (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-lg", children: t("biography") }), _jsx(CardDescription, { children: t("aboutTheTeacher") })] }), _jsx(Separator, {}), _jsx(CardContent, { className: "pt-6", children: _jsx("p", { className: "text-base", children: bio }) })] }))] }));
 };

package/base-modules/user/context.js

@@ -34,6 +34,7 @@ import { invalidateWorkspaceUsersCache } from "../workspace-user/cache";
 import { blobToWebP } from "webp-converter-browser";
 import { supabasePublicStorageUrl } from "../../constants";
 import { toastNetworkError } from "../../utils/toast-network-error";
+import { formatPhoneDisplay, normalizePhone } from "../../utils/phone-helpers";
 // ============================================================================
 // 1.1 DRAWER TYPES
 // ============================================================================
@@ -110,7 +111,7 @@ export const useUserModule = () => {
         id: state.id,
         name: (state.name || "").trim(),
         password: state.password,
-        phone: (state.phone || "").trim(),
+        phone: normalizePhone(state.phone),
         userRole: state.userRole,
         workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id,
     }), [state, workspace === null || workspace === void 0 ? void 0 : workspace.id]);
@@ -203,7 +204,7 @@ export const useUserModule = () => {
                         id: user.id,
                         name: user.name || "",
                         email: user.email,
-                        phone: user.phone || "",
+                        phone: formatPhoneDisplay(user.phone) || "",
                         avatar: user.avatar || "",
                         enabled: user.enabled,
                         userRole: parsedUserRole,

package/base-modules/user/view.js

@@ -7,6 +7,7 @@ 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";
+import { formatPhoneDisplay } from "../../utils/phone-helpers";
 const getInitials = (fullName) => {
     if (!fullName)
         return "U";
@@ -20,5 +21,5 @@ const getInitials = (fullName) => {
 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"] })] })] }) })] }) }));
+    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: formatPhoneDisplay(phone) || 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/package.json

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