@syzy/apphost 1.0.1 → 1.0.3

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, Col } from "react-bootstrap";
+import { toast, ToastContainer } from "react-toastify";
+import { useBranchSchema } from "./branchSchema";
+import { useCreateBranchMutation, useUpdateBranchMutation, useListBranches } from "../../../api/mapping-api";
+import { logger } from "../../../util/Logger";
+import "../../../styles/button.css";
+import "../../Mappings/MappingForm/MappingForm.css";
+import { SyzyDate } from "../../../util/SyzyDate";
+import { DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM } from "../../../util/dateUtils";
+import FormModal from "../../common/Modal/Modal";
+import ListTable from "../../common/ListTable/ListTable";
+import { BranchTableColumns } from "./BranchTableColumns";
+import FormLabel from "../../common/Form/FormLabel";
+import FormActionButtons from "../../common/Form/FormActionButtons";
+import ListHeader from "../../common/ListTable/ListHeader";
+const BranchMapping = () => {
+    const { branchSchema, initiateBranch } = useBranchSchema();
+    const createBranchMutation = useCreateBranchMutation();
+    const updateBranchMutation = useUpdateBranchMutation();
+    const { data: branches, isLoading } = useListBranches();
+    // Modal and form states
+    const [showModal, setShowModal] = useState(false);
+    const [editingBranch, setEditingBranch] = useState(null);
+    const isEditMode = Boolean(editingBranch && editingBranch.pk);
+    const loading = isEditMode ? updateBranchMutation.isPending : createBranchMutation.isPending;
+    const tableLoading = isLoading || createBranchMutation.isPending || updateBranchMutation.isPending;
+    const { register, handleSubmit, reset, formState: { errors }, } = useForm({
+        resolver: zodResolver(branchSchema),
+        defaultValues: initiateBranch,
+        mode: "onChange",
+    });
+    // Reset form values when editing
+    useEffect(() => {
+        if (isEditMode && editingBranch) {
+            reset({
+                ...editingBranch,
+                branchName: editingBranch.sk,
+                status: editingBranch.status ?? "ACTIVE",
+                createdDt: editingBranch.createdDt ?? new SyzyDate().toDateFormatString(DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM),
+            });
+        }
+        else {
+            reset(initiateBranch);
+        }
+    }, [editingBranch, isEditMode, reset]);
+    // Open modal for editing
+    const handleEdit = (branch) => {
+        setEditingBranch(branch);
+        setShowModal(true);
+        reset({
+            ...branch,
+            branchName: branch.sk,
+            status: branch.status ?? "ACTIVE",
+            createdDt: branch.createdDt ?? new SyzyDate().toDateFormatString(DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM),
+        });
+    };
+    // Form submit handler
+    const onSubmit = async (data) => {
+        try {
+            // EDIT MODE
+            if (isEditMode && editingBranch?.pk) {
+                const skChanged = data.branchName !== editingBranch.sk;
+                if (skChanged) {
+                    // Step 1: mark old row as INACTIVE
+                    await updateBranchMutation.mutateAsync({
+                        pk: editingBranch.pk,
+                        sk: editingBranch.sk,
+                        branchAddress: editingBranch.branchAddress,
+                        branchContactNumber: editingBranch.branchContactNumber,
+                        status: "INACTIVE",
+                        createdDt: editingBranch.createdDt,
+                    });
+                    // Step 2: create new row with new SK
+                    await updateBranchMutation.mutateAsync({
+                        pk: editingBranch.pk,
+                        sk: data.branchName,
+                        branchAddress: data.branchAddress,
+                        branchContactNumber: data.branchContactNumber,
+                        status: "ACTIVE",
+                        createdDt: new SyzyDate().toDateFormatString(DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM),
+                    });
+                    toast.success("Branch renamed and updated successfully!");
+                    setShowModal(false);
+                    setEditingBranch(null);
+                    return;
+                }
+                // NORMAL update (no rename)
+                await updateBranchMutation.mutateAsync({
+                    pk: editingBranch.pk,
+                    sk: data.branchName,
+                    branchAddress: data.branchAddress,
+                    branchContactNumber: data.branchContactNumber,
+                    status: data.status ?? "ACTIVE",
+                    createdDt: editingBranch.createdDt ?? new Date().toISOString(),
+                });
+                toast.success("Branch updated successfully!");
+                setShowModal(false);
+                setEditingBranch(null);
+                return;
+            }
+            // CREATE MODE
+            await createBranchMutation.mutateAsync({
+                branchName: data.branchName,
+                branchAddress: data.branchAddress,
+                branchContactNumber: data.branchContactNumber,
+                status: data.status ?? "ACTIVE",
+            });
+            toast.success("Branch created successfully!");
+            setShowModal(false);
+            reset(initiateBranch);
+        }
+        catch (err) {
+            logger.error("Branch operation error", err);
+            toast.error("Branch operation failed");
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, {}), _jsxs("div", { className: "container", children: [_jsx(ListHeader, { title: "Branches List", buttonLabel: "Add Branch", onButtonClick: () => {
+                            reset(initiateBranch);
+                            setEditingBranch(null);
+                            setShowModal(true);
+                        } }), isLoading ? null : (_jsx(ListTable, { columns: BranchTableColumns, data: branches ?? [], emptyMessage: "No branches found", onEdit: handleEdit, loading: tableLoading }))] }), _jsx(FormModal, { show: showModal, title: isEditMode ? "Edit Branch" : "Create Branch", onClose: () => {
+                    setShowModal(false);
+                    setEditingBranch(null);
+                    reset(initiateBranch);
+                }, children: _jsxs(Form, { className: "branch-form", onSubmit: handleSubmit(onSubmit), children: [_jsxs(Col, { children: [_jsx(FormLabel, { label: "Branch Name", required: true }), _jsx(Form.Control, { ...register("branchName"), isInvalid: !!errors.branchName, placeholder: "Enter branch name" }), _jsx(Form.Text, { className: "text-danger", children: errors.branchName?.message })] }), _jsxs(Col, { children: [_jsx(FormLabel, { label: "Branch Address", required: true }), _jsx(Form.Control, { ...register("branchAddress"), isInvalid: !!errors.branchAddress, placeholder: "Enter branch address" }), _jsx(Form.Text, { className: "text-danger", children: errors.branchAddress?.message })] }), _jsxs(Col, { children: [_jsx(FormLabel, { label: "Contact Number", required: true }), _jsx(Form.Control, { ...register("branchContactNumber"), isInvalid: !!errors.branchContactNumber, placeholder: "Enter branch contact number" }), _jsx(Form.Text, { className: "text-danger", children: errors.branchContactNumber?.message })] }), _jsxs(Col, { children: [_jsx(FormLabel, { label: "Status" }), _jsxs(Form.Select, { ...register("status"), children: [_jsx("option", { value: "ACTIVE", children: "ACTIVE" }), _jsx("option", { value: "INACTIVE", children: "INACTIVE" })] })] }), _jsx(FormActionButtons, { isEditMode: isEditMode, loading: loading, onClear: () => {
+                                setShowModal(false);
+                                setEditingBranch(null);
+                                reset(initiateBranch);
+                            } })] }) })] }));
+};
+export default BranchMapping;

package/dist/components/Mappings/BranchMapping/BranchTableColumns.d.ts

@@ -0,0 +1,10 @@
+import { TableColumn } from "../../common/ListTable/ListTable";
+export interface BranchRow {
+    pk: string;
+    sk: string;
+    branchAddress: string;
+    branchContactNumber: string;
+    createdDt: string;
+    status: string;
+}
+export declare const BranchTableColumns: TableColumn<BranchRow>[];

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Status } from "../../../domain/type/StatusEnum";
+export const BranchTableColumns = [
+    {
+        header: "Branch Name",
+        accessor: (row) => row.sk,
+    },
+    {
+        header: "Address",
+        accessor: "branchAddress",
+    },
+    {
+        header: "Contact Number",
+        accessor: "branchContactNumber",
+    },
+    {
+        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/MappingFormBranchUser.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const MappingFormBranchUser: React.FC;
+export default MappingFormBranchUser;

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

@@ -0,0 +1,150 @@
+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, ToastContainer } from "react-toastify";
+import { Status } from "../../../domain/type/StatusEnum";
+import { useListBranches, useListProfiles, useCreateMappingMutation, useUpdateMappingMutation, getRoleMappingByUserIdAndRoleNameFun, fetchBranchUserMappings } from "../../../api/mapping-api";
+import { EntityTypes } from "../../../domain/type/EntityTypes";
+import { SyzyDate } from "../../../util/SyzyDate";
+import { DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS } from "../../../util/dateUtils";
+import { logger } from "../../../util/Logger";
+import { BranchUserTableColumns } from "./MappingTableColumns";
+import ListHeader from "../../common/ListTable/ListHeader";
+const MappingFormBranchUser = () => {
+    const [showModal, setShowModal] = useState(false);
+    const [editingRow, setEditingRow] = useState();
+    const [branches, setBranches] = useState([]);
+    const [users, setUsers] = useState([]);
+    const [mappings, setMappings] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const currentISODate = new SyzyDate().toDateFormatString(DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS);
+    const { data: branchList, isLoading } = useListBranches();
+    const { data: profiles, isLoading: isProfilesLoading } = useListProfiles();
+    const createMappingMutation = useCreateMappingMutation();
+    const updateMappingMutation = useUpdateMappingMutation();
+    const tableLoading = isLoading || isProfilesLoading || createMappingMutation.isPending || updateMappingMutation.isPending;
+    /** Load branches */
+    useEffect(() => {
+        if (branchList) {
+            setBranches(branchList.map((b) => ({ id: b.pk, name: b.sk })));
+        }
+    }, [branchList]);
+    /** Load users */
+    useEffect(() => {
+        if (profiles) {
+            setUsers(profiles.map((p) => ({ id: p.sk, name: p.name })));
+        }
+    }, [profiles]);
+    /* ---------------- Load Mappings ---------------- */
+    const loadMappings = async () => {
+        try {
+            if (!branchList)
+                return;
+            const branchMap = {};
+            branchList.forEach((b) => {
+                branchMap[b.pk.replace("BRANCH#", "")] = b.sk;
+            });
+            const result = await fetchBranchUserMappings(branchMap);
+            const enriched = result.map((m) => {
+                const branchId = m.pk.replace("BRANCH#", "");
+                return {
+                    ...m,
+                    branchId,
+                    branchName: branchMap[branchId] ?? "Unknown Branch",
+                };
+            });
+            setMappings(enriched);
+        }
+        catch (err) {
+            toast.error("Failed to load mappings");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        loadMappings();
+    }, [branchList]);
+    /* ---------------- Edit / Add ---------------- */
+    const handleEdit = (row) => {
+        setEditingRow(row);
+        setShowModal(true);
+    };
+    const handleAdd = () => {
+        setEditingRow(undefined);
+        setShowModal(true);
+    };
+    /* ---------------- Submit ---------------- */
+    const handleSubmit = async (data) => {
+        try {
+            for (const map of data) {
+                const user = users.find(u => u.id === map.sourceId);
+                const branch = branches.find(b => b.id === map.branchId);
+                if (!user || !branch)
+                    continue;
+                const payload = {
+                    pk: `BRANCH#${map.branchId}`,
+                    sk: `USER#${user.id}`,
+                    branchName: branch.name,
+                    entity: EntityTypes.USER,
+                    userId: user.id,
+                    userName: user.name,
+                    roleId: "null",
+                    roleName: "null",
+                    componentId: "null",
+                    componentTitle: "null",
+                    status: map.status,
+                    createdDt: editingRow?.createdDt || currentISODate,
+                    createdBy: `${user.id}#${user.name}`,
+                    disabledDt: map.status === Status.Inactive ? currentISODate : "",
+                };
+                const isBranchChanged = editingRow && editingRow.branchId !== map.branchId;
+                const isUserChanged = editingRow && editingRow.userId !== user.id;
+                if (editingRow && (isBranchChanged || isUserChanged)) {
+                    await updateMappingMutation.mutateAsync({
+                        pk: editingRow.pk,
+                        sk: `USER#${editingRow.userId}`,
+                        branchName: editingRow.branchName,
+                        entity: EntityTypes.USER,
+                        userId: editingRow.userId,
+                        userName: editingRow.userName,
+                        roleId: "null",
+                        roleName: "null",
+                        componentId: "null",
+                        componentTitle: "null",
+                        status: Status.Inactive,
+                        createdDt: editingRow.createdDt,
+                        createdBy: `${user.id}#${user.name}`,
+                        disabledDt: currentISODate,
+                    });
+                }
+                const existing = await getRoleMappingByUserIdAndRoleNameFun(payload.pk, payload.sk);
+                if (existing) {
+                    await updateMappingMutation.mutateAsync(payload);
+                }
+                else {
+                    await createMappingMutation.mutateAsync(payload);
+                }
+            }
+            toast.success("Branch-User mapping saved successfully");
+            setShowModal(false);
+            loadMappings();
+        }
+        catch (err) {
+            logger.error(err);
+            toast.error("Mapping failed");
+        }
+    };
+    /* ---------------- Render ---------------- */
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, {}), _jsxs("div", { className: "container", children: [_jsx(ListHeader, { title: "Branch & User Mappings List", buttonLabel: "Add Mapping", onButtonClick: handleAdd }), loading ? null : (_jsx(ListTable, { columns: BranchUserTableColumns, data: mappings, emptyMessage: "No branch-user mappings found", onEdit: handleEdit, loading: tableLoading })), _jsx(FormModal, { show: showModal, title: editingRow ? "Edit Branch-User Mapping" : "Assign Branch to User", onClose: () => setShowModal(false), size: "lg", children: _jsx(MappingForm, { mode: "branch-user", hideBranch: false, hideTarget: true, branchOptions: branches, sourceLabel: "User", targetLabel: "", sourceOptions: users, targetOptions: [], onSubmit: handleSubmit, initialMapping: editingRow
+                                ? {
+                                    branchId: editingRow.branchId,
+                                    sourceId: editingRow.userId,
+                                    sourceName: editingRow.userName,
+                                    status: editingRow.status,
+                                }
+                                : undefined }) })] })] }));
+};
+export default MappingFormBranchUser;

package/dist/components/Mappings/BranchMapping/MappingTableColumns.d.ts

@@ -0,0 +1,14 @@
+import { TableColumn } from "../../common/ListTable/ListTable";
+import { Status } from "../../../domain/type/StatusEnum";
+export interface BranchUserRow {
+    pk: string;
+    sk: string;
+    branchId: string;
+    branchName: string;
+    userId: string;
+    userName: string;
+    status: Status;
+    createdDt: string;
+    disabledDt?: string;
+}
+export declare const BranchUserTableColumns: TableColumn<BranchUserRow>[];

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.d.ts

@@ -0,0 +1,37 @@
+import { z } from "zod";
+export declare const branchSchema: z.ZodObject<{
+    branchName: z.ZodString;
+    branchAddress: z.ZodString;
+    branchContactNumber: z.ZodString;
+    pk: z.ZodOptional<z.ZodString>;
+    sk: z.ZodOptional<z.ZodString>;
+    status: z.ZodOptional<z.ZodEnum<{
+        ACTIVE: "ACTIVE";
+        INACTIVE: "INACTIVE";
+    }>>;
+    createdDt: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type BranchFormInputs = z.infer<typeof branchSchema>;
+export declare const useBranchSchema: () => {
+    branchSchema: z.ZodObject<{
+        branchName: z.ZodString;
+        branchAddress: z.ZodString;
+        branchContactNumber: z.ZodString;
+        pk: z.ZodOptional<z.ZodString>;
+        sk: z.ZodOptional<z.ZodString>;
+        status: z.ZodOptional<z.ZodEnum<{
+            ACTIVE: "ACTIVE";
+            INACTIVE: "INACTIVE";
+        }>>;
+        createdDt: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    initiateBranch: {
+        branchName: string;
+        branchAddress: string;
+        branchContactNumber: string;
+        pk?: string | undefined;
+        sk?: string | undefined;
+        status?: "ACTIVE" | "INACTIVE" | undefined;
+        createdDt?: string | undefined;
+    };
+};

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.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ComponentRoleMappingPage: React.FC;
+export default ComponentRoleMappingPage;

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.d.ts

@@ -0,0 +1,3 @@
+import { TableColumn } from "../../common/ListTable/ListTable";
+import { ComponentRoleMapping } from "../../../domain/model/ComponentMappingDto";
+export declare const ComponentRoleTableColumns: TableColumn<ComponentRoleMapping>[];

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.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import './MappingForm.css';
+import type { MappingOptions } from "../../../domain/type/MappingOptions";
+import { Status } from "../../../domain/type/StatusEnum";
+import '../../../styles/button.css';
+interface MappingFormProps {
+    branchOptions?: MappingOptions[];
+    sourceLabel: string;
+    targetLabel: string;
+    sourceOptions: MappingOptions[];
+    targetOptions: MappingOptions[];
+    onSubmit: (mappings: {
+        branchId: string;
+        sourceId: string;
+        targetId: string;
+        status: string;
+    }[]) => void;
+    mode?: "default" | "branch-user";
+    hideBranch?: boolean;
+    hideTarget?: boolean;
+    onSourceChange?: (selected: MappingOptions[]) => void;
+    selectedUserBranch?: string[];
+    userHasNoBranch?: boolean;
+    /** Used when editing */
+    initialMapping?: {
+        branchId?: string;
+        sourceId: string;
+        sourceName: string;
+        branchName?: string;
+        targetId?: string;
+        status: Status;
+    };
+}
+declare const MappingForm: React.FC<MappingFormProps>;
+export default MappingForm;