@syzy/apphost 1.0.1 → 1.0.2

package/dist/components/Mappings/BranchMapping/MappingTableColumns.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Status } from "../../../domain/type/StatusEnum";
+export const BranchUserTableColumns = [
+    {
+        header: "ID",
+        accessor: "userId",
+    },
+    {
+        header: "User",
+        accessor: "userName",
+    },
+    {
+        header: "Branch",
+        accessor: "branchName",
+    },
+    {
+        header: "Created",
+        accessor: "createdDt",
+    },
+    {
+        header: "Disabled",
+        accessor: (row) => row.disabledDt ? new Date(row.disabledDt).toLocaleString() : "-",
+    },
+    {
+        header: "Status",
+        accessor: (row) => (_jsx("span", { className: `status-message ${row.status === Status.Active ? "text-success" : "text-danger"}`, children: row.status })),
+        align: "center",
+    },
+];

package/dist/components/Mappings/BranchMapping/branchSchema.js

@@ -0,0 +1,34 @@
+// src/components/validation/branchSchema.ts
+import { z } from "zod";
+export const branchSchema = z.object({
+    branchName: z
+        .string()
+        .min(1, "Branch name is required")
+        .min(3, "Branch name must be at least 3 characters"),
+    branchAddress: z
+        .string()
+        .min(1, "Branch address is required")
+        .min(5, "Branch address must be at least 5 characters"),
+    branchContactNumber: z
+        .string()
+        .min(10, "Contact number must be 10 digits")
+        .max(10, "Contact number must be 10 digits")
+        .regex(/^\d{10}$/, "Enter a valid 10-digit phone number"),
+    // Required for API inputs
+    pk: z.string().optional(),
+    sk: z.string().optional(),
+    status: z.enum(["ACTIVE", "INACTIVE"]).optional(),
+    createdDt: z.string().optional(),
+});
+export const useBranchSchema = () => {
+    const initiateBranch = {
+        branchName: "",
+        branchAddress: "",
+        branchContactNumber: "",
+        pk: "",
+        sk: "",
+        status: "ACTIVE",
+        createdDt: "",
+    };
+    return { branchSchema, initiateBranch };
+};

package/dist/components/Mappings/ComponentMapping/ComponentRoleMapping.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useMemo, useState } from "react";
+import MappingForm from "../MappingForm/MappingForm";
+import FormModal from "../../common/Modal/Modal";
+import ListTable from "../../common/ListTable/ListTable";
+import { toast } from "react-toastify";
+import { MappingTypes } from "../../../domain/type/MappingTypes";
+import { getCompoMappingByRoleIdAndCompoIdFun, useCreateMappingMutation, useListComponentRoleMappings, useUpdateMappingMutation, } from "../../../api/mapping-api";
+import { EntityTypes } from "../../../domain/type/EntityTypes";
+import { Status } from "../../../domain/type/StatusEnum";
+import { SyzyDate } from "../../../util/SyzyDate";
+import { DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS } from "../../../util/dateUtils";
+import AppContext from "../../../store/AppContext";
+import { logger } from "../../../util/Logger";
+import { componentMap } from "../../../App";
+import { roles } from "../RoleMapping/MappingFormUserRole";
+import { ComponentRoleTableColumns } from "./componentRoleColumns";
+import ListHeader from "../../common/ListTable/ListHeader";
+import { ToastContainer } from "react-toastify";
+/* ---------------- Component Role Mapping ---------------- */
+const ComponentRoleMappingPage = () => {
+    const { user } = useContext(AppContext) || {};
+    const loggedInUserName = user?.userName;
+    const [showModal, setShowModal] = useState(false);
+    const [editingRow, setEditingRow] = useState();
+    const currentISODate = new SyzyDate().toDateFormatString(DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS);
+    const { data = [], isLoading, refetch } = useListComponentRoleMappings();
+    const createMappingMutation = useCreateMappingMutation();
+    const updateMappingMutation = useUpdateMappingMutation();
+    const tableLoading = isLoading || createMappingMutation.isPending || updateMappingMutation.isPending;
+    /* ---------------- Component Options ---------------- */
+    const components = useMemo(() => Object.keys(componentMap).map((key, index) => ({
+        id: `Component#${String(index + 1).padStart(2, "0")}`,
+        name: key,
+    })), []);
+    /* ---------------- Add / Edit ---------------- */
+    const handleAdd = () => {
+        setEditingRow(undefined);
+        setShowModal(true);
+    };
+    const handleEdit = (row) => {
+        setEditingRow(row);
+        setShowModal(true);
+    };
+    /* ---------------- Submit ---------------- */
+    const handleSubmit = async (mappings) => {
+        try {
+            for (const map of mappings) {
+                const role = roles.find(r => r.id === map.targetId);
+                const component = components.find(c => c.id === map.sourceId);
+                if (!role || !component || !loggedInUserName)
+                    continue;
+                const payload = {
+                    pk: role.id,
+                    sk: `COMPId#${component.id}`,
+                    entity: EntityTypes.COMPONENT,
+                    userId: "",
+                    userName: "",
+                    roleId: role.id,
+                    roleName: role.name,
+                    componentId: component.id,
+                    componentTitle: component.name,
+                    status: map.status,
+                    createdDt: editingRow?.createdDt || currentISODate,
+                    createdBy: loggedInUserName,
+                    disabledDt: map.status === Status.Inactive ? currentISODate : "",
+                };
+                const existing = await getCompoMappingByRoleIdAndCompoIdFun(payload.pk, payload.sk);
+                if (existing) {
+                    await updateMappingMutation.mutateAsync(payload);
+                }
+                else {
+                    await createMappingMutation.mutateAsync(payload);
+                }
+            }
+            toast.success("Component-Role mapping saved successfully");
+            setShowModal(false);
+            refetch();
+        }
+        catch (err) {
+            logger.error(err);
+            toast.error("Component-Role mapping failed");
+        }
+    };
+    /* ---------------- Render ---------------- */
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, {}), _jsxs("div", { className: "container", children: [_jsx(ListHeader, { title: "Users List", buttonLabel: "Add Mapping", onButtonClick: handleAdd }), isLoading ? null : (_jsx(ListTable, { columns: ComponentRoleTableColumns, data: data, emptyMessage: "No component-role mappings found", onEdit: handleEdit, loading: tableLoading })), _jsx(FormModal, { show: showModal, title: editingRow
+                            ? "Edit Component-Role Mapping"
+                            : "Assign Role to Component", onClose: () => setShowModal(false), size: "lg", children: _jsx(MappingForm, { mode: "default", hideBranch: true, hideTarget: false, sourceLabel: MappingTypes.Components, targetLabel: MappingTypes.Roles, sourceOptions: components, targetOptions: roles, onSubmit: handleSubmit, initialMapping: editingRow
+                                ? {
+                                    branchId: "DEFAULT_BRANCH",
+                                    sourceId: editingRow.sk.replace("COMPId#", ""),
+                                    sourceName: editingRow.componentTitle,
+                                    targetId: editingRow.pk,
+                                    status: editingRow.status,
+                                }
+                                : undefined }) })] })] }));
+};
+export default ComponentRoleMappingPage;

package/dist/components/Mappings/ComponentMapping/componentRoleColumns.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Status } from "../../../domain/type/StatusEnum";
+export const ComponentRoleTableColumns = [
+    {
+        header: "Role",
+        accessor: "roleName",
+    },
+    {
+        header: "Component",
+        accessor: "componentTitle",
+    },
+    {
+        header: "Created Date",
+        accessor: (row) => row.createdDt
+            ? new Date(row.createdDt).toLocaleString()
+            : "-",
+    },
+    {
+        header: "Disabled Date",
+        accessor: (row) => row.disabledDt
+            ? new Date(row.disabledDt).toLocaleString()
+            : "-",
+    },
+    {
+        header: "Status",
+        accessor: (row) => (_jsx("span", { className: `status-message ${row.status === Status.Active ? "text-success" : "text-danger"}`, children: row.status })),
+        align: "center",
+    },
+];

package/dist/components/Mappings/MappingForm/MappingForm.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Form, Col } from "react-bootstrap";
+import Select from "react-select";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import './MappingForm.css';
+import { statusOptions } from "../../../domain/type/statusOptions";
+import { Status } from "../../../domain/type/StatusEnum";
+import '../../../styles/button.css';
+import { mappingFormSchema } from "./mappingSchema";
+import FormActionButtons from "../../common/Form/FormActionButtons";
+import FormLabel from "../../common/Form/FormLabel";
+const MappingForm = ({ branchOptions = [], sourceLabel, targetLabel, sourceOptions, targetOptions, onSubmit, mode = "default", hideBranch = false, hideTarget = false, onSourceChange, selectedUserBranch, initialMapping, userHasNoBranch }) => {
+    const showBranchUserOnly = mode === "branch-user";
+    const { handleSubmit, setValue, formState: { errors } } = useForm({
+        resolver: zodResolver(mappingFormSchema),
+        defaultValues: {
+            branchSelections: [],
+            sourceSelections: [],
+            targetSelections: [],
+            status: Status.Active,
+            hideBranch,
+            hideTarget
+        }
+    });
+    const [selectedBranches, setSelectedBranches] = useState([]);
+    const [selectedSources, setSelectedSources] = useState([]);
+    const [selectedTargets, setSelectedTargets] = useState([]);
+    const [status, setStatus] = useState(Status.Active);
+    const toSelectOption = (opt, type) => {
+        if (type === "source" && sourceLabel === "User") {
+            return {
+                value: opt.id,
+                label: `${opt.name} (${opt.id})`,
+            };
+        }
+        return {
+            value: opt.id,
+            label: opt.name,
+        };
+    };
+    /** Prefill form if editing */
+    const hasInitialized = useRef(false);
+    useEffect(() => {
+        if (!initialMapping || hasInitialized.current)
+            return;
+        if (sourceOptions.length === 0)
+            return;
+        hasInitialized.current = true;
+        // Branch
+        if (!hideBranch && initialMapping.branchId) {
+            const branchOpt = branchOptions.find(b => b.id === initialMapping.branchId);
+            if (branchOpt) {
+                setSelectedBranches([branchOpt]);
+                setValue("branchSelections", [branchOpt], { shouldDirty: false });
+            }
+        }
+        // Source (User)
+        const srcOpt = sourceOptions.find(s => s.id === initialMapping.sourceId);
+        if (srcOpt) {
+            setSelectedSources([srcOpt]);
+            setValue("sourceSelections", [srcOpt], { shouldDirty: false });
+        }
+        // Target (Role)
+        if (initialMapping.targetId) {
+            const tgtOpt = targetOptions.find(t => t.id === initialMapping.targetId);
+            if (tgtOpt) {
+                setSelectedTargets([tgtOpt]);
+                setValue("targetSelections", [tgtOpt], { shouldDirty: false });
+            }
+        }
+        // Status
+        setStatus(initialMapping.status);
+        setValue("status", initialMapping.status, { shouldDirty: false });
+    }, [initialMapping, sourceOptions]);
+    /** Clear form */
+    const handleClear = () => {
+        setSelectedBranches([]);
+        setSelectedSources([]);
+        setSelectedTargets([]);
+        setStatus(Status.Active);
+        setValue("branchSelections", []);
+        setValue("sourceSelections", []);
+        setValue("targetSelections", []);
+        setValue("status", Status.Active);
+    };
+    useEffect(() => {
+        setValue("hideBranch", hideBranch, { shouldValidate: true });
+        setValue("hideTarget", hideTarget, { shouldValidate: true });
+    }, [hideBranch, hideTarget]);
+    /** Submit handler */
+    const handleZodSubmit = (formData) => {
+        let mappings = [];
+        if (hideBranch) {
+            const branchId = branchOptions?.[0]?.id || "DEFAULT_BRANCH";
+            mappings = formData.sourceSelections.flatMap(src => formData.targetSelections.map(tgt => ({
+                branchId,
+                sourceId: src.id,
+                targetId: tgt.id,
+                status: formData.status
+            })));
+        }
+        else if (showBranchUserOnly) {
+            mappings = formData.branchSelections.flatMap(branch => formData.sourceSelections.map(src => ({
+                branchId: branch.id,
+                sourceId: src.id,
+                targetId: "",
+                status: formData.status
+            })));
+        }
+        else {
+            mappings = formData.branchSelections.flatMap(branch => formData.sourceSelections.flatMap(src => formData.targetSelections.map(tgt => ({
+                branchId: branch.id,
+                sourceId: src.id,
+                targetId: tgt.id,
+                status: formData.status
+            }))));
+        }
+        onSubmit(mappings);
+        handleClear();
+    };
+    return (_jsxs(Form, { onSubmit: handleSubmit(handleZodSubmit), className: "mapping-form", children: [!hideBranch && (_jsxs(Col, { children: [_jsx(FormLabel, { label: "Branch", required: true }), _jsx(Select, { isMulti: true, options: branchOptions.map(opt => toSelectOption(opt, "branch")), value: selectedBranches.map(opt => toSelectOption(opt, "branch")), closeMenuOnSelect: false, onChange: (selected) => {
+                            const formatted = selected?.map(s => ({ id: s.value, name: s.label })) || [];
+                            setSelectedBranches(formatted);
+                            setValue("branchSelections", formatted, { shouldValidate: true, shouldDirty: true, });
+                        } }), errors.branchSelections && _jsx(Form.Text, { className: "text-danger", children: errors.branchSelections.message })] })), !hideTarget && (_jsxs(Col, { children: [_jsx(FormLabel, { label: targetLabel, required: true }), _jsx(Select, { isMulti: true, options: targetOptions.map(opt => toSelectOption(opt, "target")), value: selectedTargets.map(opt => toSelectOption(opt, "target")), closeMenuOnSelect: false, onChange: (selected) => {
+                            const formatted = selected?.map(s => ({ id: s.value, name: s.label })) || [];
+                            setSelectedTargets(formatted);
+                            setValue("targetSelections", formatted, { shouldValidate: true, shouldDirty: true, });
+                        } }), errors.targetSelections && (_jsx(Form.Text, { className: "text-danger", children: errors.targetSelections.message }))] })), _jsxs(Col, { children: [_jsx(FormLabel, { label: sourceLabel, required: true }), _jsx(Select, { isMulti: true, options: sourceOptions.map(opt => toSelectOption(opt, "source")), value: selectedSources.map(opt => toSelectOption(opt, "source")), closeMenuOnSelect: false, onChange: (selected) => {
+                            const formatted = selected?.map(s => ({ id: s.value, name: sourceOptions.find(opt => opt.id === s.value)?.name || "" })) || [];
+                            setSelectedSources(formatted);
+                            setValue("sourceSelections", formatted, { shouldValidate: true, shouldDirty: true, });
+                            onSourceChange?.(formatted);
+                        } }), errors.sourceSelections && _jsx(Form.Text, { className: "text-danger", children: errors.sourceSelections.message }), selectedUserBranch && selectedUserBranch.length > 0 && (_jsxs("div", { className: "mt-1 text-primary fw-bold", children: ["Branch: ", selectedUserBranch.join(", ")] })), userHasNoBranch && (_jsx("div", { className: "mt-2 text-danger fw-semibold", children: "\u26A0\uFE0F Selected user is not assigned to any branch. Please assign a branch before mapping roles." }))] }), _jsxs(Col, { children: [_jsx(FormLabel, { label: "Status" }), _jsx(Select, { isClearable: false, options: statusOptions, closeMenuOnSelect: false, value: statusOptions.find(s => s.value.toUpperCase() === status.toUpperCase()), onChange: (selected) => {
+                            const newStatus = selected?.value || Status.Active;
+                            setStatus(newStatus);
+                            setValue("status", newStatus);
+                        } })] }), _jsx(FormActionButtons, { isEditMode: !!initialMapping, onClear: handleClear, disableSubmit: userHasNoBranch })] }));
+};
+export default MappingForm;

package/dist/components/Mappings/MappingForm/mappingSchema.js

@@ -0,0 +1,32 @@
+import { z } from "zod";
+export const mappingOptionSchema = z.object({
+    id: z.string().min(1, "Invalid option id"),
+    name: z.string().min(1, "Invalid option name"),
+});
+export const mappingFormSchema = z.object({
+    branchSelections: z.array(mappingOptionSchema),
+    sourceSelections: z.array(mappingOptionSchema)
+        .min(1, "Please select at least one source"),
+    targetSelections: z.array(mappingOptionSchema),
+    status: z.string().min(1, "Status is required"),
+    hideBranch: z.boolean(), // REQUIRED
+    hideTarget: z.boolean(), // REQUIRED
+})
+    .refine((data) => {
+    if (!data.hideBranch && data.branchSelections.length === 0) {
+        return false;
+    }
+    return true;
+}, {
+    message: "Please select at least one branch",
+    path: ["branchSelections"]
+})
+    .refine((data) => {
+    if (!data.hideTarget && data.targetSelections.length === 0) {
+        return false;
+    }
+    return true;
+}, {
+    message: "Please select at least one target",
+    path: ["targetSelections"]
+});

package/dist/components/Mappings/RoleMapping/MappingFormUserRole.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import MappingForm from "../MappingForm/MappingForm";
+import FormModal from "../../common/Modal/Modal";
+import ListTable from "../../common/ListTable/ListTable";
+import { toast } from "react-toastify";
+import { Status } from "../../../domain/type/StatusEnum";
+import { getBranchIdByUserId, useCreateMappingMutation, useListProfiles, useUpdateMappingMutation, fetchUserRoleMappings, getBranchNameById, } from "../../../api/mapping-api";
+import { SyzyDate } from "../../../util/SyzyDate";
+import { EntityTypes } from "../../../domain/type/EntityTypes";
+import { DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS } from "../../../util/dateUtils";
+import { logger } from "../../../util/Logger";
+import { UserRoleTableColumns } from "./UserRoleTableColumns";
+import ListHeader from "../../common/ListTable/ListHeader";
+import { ToastContainer } from "react-toastify";
+/* ---------------- Roles ---------------- */
+export const roles = [
+    { id: "Role#01", name: "SUPERADMIN" },
+    { id: "Role#02", name: "SUPPORTADMIN" },
+    { id: "Role#03", name: "ADMIN" },
+    { id: "Role#04", name: "EMPLOYEE" },
+];
+const MappingFormUserRole = () => {
+    const [showModal, setShowModal] = useState(false);
+    const [editingRow, setEditingRow] = useState();
+    const [users, setUsers] = useState([]);
+    const [mappings, setMappings] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [selectedUserBranch, setSelectedUserBranch] = useState([]);
+    const [isUserSelected, setIsUserSelected] = useState(false);
+    const currentISODate = new SyzyDate().toDateFormatString(DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS);
+    const { data: profiles, isLoading } = useListProfiles();
+    const createMappingMutation = useCreateMappingMutation();
+    const updateMappingMutation = useUpdateMappingMutation();
+    const tableLoading = isLoading || createMappingMutation.isPending || updateMappingMutation.isPending;
+    const userHasNoBranch = isUserSelected && selectedUserBranch.length === 0 && !editingRow;
+    const handleUserChange = async (selectedUsers) => {
+        if (selectedUsers.length === 1) {
+            setIsUserSelected(true);
+            const userId = selectedUsers[0].id;
+            const branchPk = await getBranchIdByUserId(userId);
+            if (branchPk.length === 0) {
+                setSelectedUserBranch([]);
+                return;
+            }
+            const branchName = await Promise.all(branchPk.map(async (id) => await getBranchNameById(id)));
+            setSelectedUserBranch(branchName);
+        }
+        else {
+            setIsUserSelected(false);
+            setSelectedUserBranch([]);
+        }
+    };
+    /* ---------------- Load Users ---------------- */
+    useEffect(() => {
+        if (profiles) {
+            setUsers(profiles.map((p) => ({ id: p.sk, name: p.name })));
+        }
+    }, [profiles]);
+    /* ---------------- Load User-Role Mappings ---------------- */
+    const loadMappings = async () => {
+        try {
+            const result = await fetchUserRoleMappings();
+            const enriched = await Promise.all(result.map(async (m) => {
+                // Extract branchId from pk
+                const match = m.pk.match(/^BRANCH#([^#]+)#USER#/);
+                const branchId = match ? match[1] : "";
+                const branchName = branchId ? await getBranchNameById(branchId) : "";
+                return {
+                    ...m,
+                    branchId,
+                    branchName,
+                };
+            }));
+            setMappings(enriched);
+        }
+        catch (err) {
+            toast.error("Failed to load user-role mappings");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        loadMappings();
+    }, []);
+    /* ---------------- Add / Edit ---------------- */
+    const handleAdd = () => {
+        setEditingRow(undefined);
+        setShowModal(true);
+        setSelectedUserBranch([]);
+        setIsUserSelected(false);
+    };
+    const handleEdit = (row) => {
+        setEditingRow(row);
+        setSelectedUserBranch([row.branchName]);
+        setIsUserSelected(true);
+        setShowModal(true);
+    };
+    /* ---------------- Submit ---------------- */
+    const handleSubmit = async (data) => {
+        try {
+            for (const map of data) {
+                const user = users.find(u => u.id === map.sourceId);
+                const role = roles.find(r => r.id === map.targetId);
+                if (!user || !role)
+                    continue;
+                if (editingRow) {
+                    const isRoleChanged = editingRow.roleId !== role.id;
+                    const isUserChanged = editingRow.userId !== user.id;
+                    if (isRoleChanged || isUserChanged) {
+                        const buildInactivePayload = (row, disabledDt) => ({
+                            pk: editingRow.pk,
+                            sk: row.roleId,
+                            entity: EntityTypes.ROLE,
+                            userId: row.userId,
+                            branchName: editingRow.branchName,
+                            userName: row.userName,
+                            roleId: row.roleId,
+                            roleName: row.roleName,
+                            componentId: "null",
+                            componentTitle: "null",
+                            status: Status.Inactive,
+                            createdDt: row.createdDt,
+                            createdBy: `${user.id}#${user.name}`,
+                            disabledDt,
+                        });
+                        // 1️⃣ Deactivate OLD role for THIS branch only
+                        await updateMappingMutation.mutateAsync(buildInactivePayload(editingRow, currentISODate));
+                        // 2️⃣ Create NEW role for SAME branch only
+                        const newPayload = {
+                            pk: editingRow.pk,
+                            sk: role.id,
+                            entity: EntityTypes.ROLE,
+                            userId: user.id,
+                            branchName: editingRow.branchName,
+                            userName: user.name,
+                            roleId: role.id,
+                            roleName: role.name,
+                            componentId: "null",
+                            componentTitle: "null",
+                            status: Status.Active,
+                            createdDt: currentISODate,
+                            createdBy: `${user.id}#${user.name}`,
+                            disabledDt: "",
+                        };
+                        await createMappingMutation.mutateAsync(newPayload);
+                    }
+                }
+                else {
+                    const branchIds = await getBranchIdByUserId(user.id);
+                    for (const branchId of branchIds) {
+                        const branchName = await getBranchNameById(branchId);
+                        const payload = {
+                            pk: `${branchId}#USER#${user.id}`,
+                            sk: role.id,
+                            entity: EntityTypes.ROLE,
+                            userId: user.id,
+                            branchName,
+                            userName: user.name,
+                            roleId: role.id,
+                            roleName: role.name,
+                            componentId: "null",
+                            componentTitle: "null",
+                            status: map.status,
+                            createdDt: currentISODate,
+                            createdBy: `${user.id}#${user.name}`,
+                            disabledDt: "",
+                        };
+                        await createMappingMutation.mutateAsync(payload);
+                    }
+                }
+            }
+            toast.success("User-Role mapping saved successfully");
+            setShowModal(false);
+            loadMappings();
+        }
+        catch (err) {
+            logger.error(err);
+            toast.error("User-Role mapping failed");
+        }
+    };
+    /* ---------------- Render ---------------- */
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, {}), _jsxs("div", { className: "container", children: [_jsx(ListHeader, { title: "User & Role Mappings List", buttonLabel: "Add Mapping", onButtonClick: handleAdd }), loading ? null : (_jsx(ListTable, { columns: UserRoleTableColumns, data: mappings, emptyMessage: "No user-role mappings found", onEdit: handleEdit, loading: tableLoading })), _jsx(FormModal, { show: showModal, title: editingRow ? "Edit User-Role Mapping" : "Assign Role to User", onClose: () => setShowModal(false), size: "lg", children: _jsx(MappingForm, { mode: "default", hideBranch: true, hideTarget: false, sourceLabel: "User", targetLabel: "Role", sourceOptions: users, targetOptions: roles, onSubmit: handleSubmit, onSourceChange: handleUserChange, selectedUserBranch: selectedUserBranch ?? "", userHasNoBranch: userHasNoBranch, initialMapping: editingRow
+                                ? {
+                                    sourceId: editingRow.userId,
+                                    sourceName: editingRow.userName,
+                                    branchName: editingRow.branchName,
+                                    targetId: editingRow.roleId,
+                                    status: editingRow.status,
+                                }
+                                : undefined }) })] })] }));
+};
+export default MappingFormUserRole;

package/dist/components/Mappings/RoleMapping/UserRoleTableColumns.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Status } from "../../../domain/type/StatusEnum";
+export const UserRoleTableColumns = [
+    {
+        header: "ID",
+        accessor: "userId",
+    },
+    {
+        header: "User",
+        accessor: "userName",
+    },
+    {
+        header: "Branch",
+        accessor: (row) => row.branchName || "-",
+    },
+    {
+        header: "Role",
+        accessor: "roleName",
+    },
+    {
+        header: "Created",
+        accessor: (row) => row.createdDt ? new Date(row.createdDt).toLocaleString() : "-",
+    },
+    {
+        header: "Disabled",
+        accessor: (row) => row.disabledDt ? new Date(row.disabledDt).toLocaleString() : "-",
+    },
+    {
+        header: "Status",
+        accessor: (row) => (_jsx("span", { className: `status-message ${row.status === Status.Active ? "text-success" : "text-danger"}`, children: row.status })),
+        align: "center",
+    },
+];

package/dist/components/NavBar/Sidebar.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import { getSidebarMenu } from "../../services/navigationMenu";
+import { Link } from "react-router-dom";
+import './sidebar.css';
+import { useDispatch } from "../../hooks/useDispatch";
+import { signOut } from "aws-amplify/auth";
+import { AppActionEnum } from "../../store/AppAction";
+import { RiLogoutBoxLine } from "react-icons/ri";
+import { FaArrowRight } from "react-icons/fa";
+import { FaArrowLeft } from "react-icons/fa";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import * as FA from "react-icons/fa";
+import * as FA6 from "react-icons/fa6";
+import * as IO from "react-icons/io5";
+import * as IO4 from "react-icons/io";
+import * as RI from "react-icons/ri";
+const iconPacks = { FA, FA6, IO, IO4, RI };
+const Sidebar = () => {
+    const navigate = useNavigate();
+    const { dispatch } = useDispatch();
+    const [menus, setMenus] = useState([]);
+    const [activeMenu, setActiveMenu] = useState(null);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const handleToggle = () => {
+        setIsExpanded(prevState => !prevState);
+    };
+    const handleMenuClick = (menu) => {
+        setActiveMenu(prevMenu => (prevMenu === menu ? null : menu));
+    };
+    const signOutFn = async () => {
+        await signOut({ global: true });
+        dispatch({ type: AppActionEnum.SignOut });
+        navigate("/");
+    };
+    const getIcon = (iconName, pack = "FA") => {
+        const library = iconPacks[pack] || FA;
+        return library[iconName] ? React.createElement(library[iconName]) : null;
+    };
+    useEffect(() => {
+        const fetchMenu = async () => {
+            const data = await getSidebarMenu();
+            setMenus(data);
+        };
+        fetchMenu();
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "wrapper", children: _jsxs("aside", { id: "sidebar", className: isExpanded ? '' : 'expand', children: [_jsxs("div", { children: [_jsx("button", { type: "button", className: "toggle-btn", onClick: handleToggle, children: isExpanded ? _jsx(FaArrowRight, { className: 'icon' }) : _jsx(FaArrowLeft, { className: 'icon' }) }), _jsx("div", { className: "sidebar-logo", children: _jsxs("div", { children: [_jsx(Link, { to: '/', children: "HMS" }), _jsx("br", {}), _jsx("span", { children: "Salem" })] }) })] }), _jsxs("ul", { className: "sidebar-nav", children: [menus.map((menu, index) => (_jsx("li", { className: "sidebar-item", children: menu.children && menu.children.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Link, { to: menu.children[0].path, className: `d-flex justify-content-between sidebar-link has-dropdown ${menu.children.some((child) => location.pathname.startsWith(child.path))
+                                                ? "active" : ""}`, onClick: (e) => {
+                                                e.preventDefault();
+                                                handleMenuClick(menu.title);
+                                            }, "aria-controls": `menu-${index}`, children: [_jsxs("div", { children: [_jsx("span", { className: "icon", children: getIcon(menu.icon, menu.iconPack) }), _jsx("span", { className: "label", children: menu.title })] }), _jsx("span", { className: "arrow-icon d-flex justify-content-center align-items-center", children: activeMenu === menu.title ? _jsx(FaChevronUp, {}) : _jsx(FaChevronDown, {}) })] }), _jsx("ul", { id: `menu-${index}`, className: `sidebar-dropdown list-unstyled ${activeMenu === menu.title ? "show" : "collapse"}`, children: menu.children.map((child, cIndex) => (_jsx("li", { className: "sidebar-item", children: _jsx(Link, { to: child.path, className: `sidebar-link ${location.pathname === child.path ? "active-child" : ""}`, children: _jsx("span", { className: "label test", children: child.title }) }) }, cIndex))) })] })) : (
+                                // Normal single-level item
+                                _jsxs(NavLink, { to: menu.path, className: ({ isActive }) => `sidebar-link d-flex align-items-center ${isActive ? "active-link" : ""}`, children: [_jsx("div", { className: "icon", children: getIcon(menu.icon, menu.iconPack) }), _jsx("div", { className: "label", children: menu.title })] })) }, index))), _jsx("li", { className: "sidebar-item", children: _jsxs(Link, { to: '/', className: "sidebar-link", onClick: signOutFn, children: [_jsx(RiLogoutBoxLine, { className: 'log-icon' }), _jsx("span", { className: "label", children: "Logout" })] }) })] })] }) }) }));
+};
+export default Sidebar;