From a1ea47c0f5345858772c1f6c02c4dc08d747dc95 Mon Sep 17 00:00:00 2001
From: azeeee05 <azeemazm31@gmail.com>
Date: Tue, 18 Aug 2026 18:20:12 +0530
Subject: [PATCH] feat: implement master data management components including
 sidebar navigation and item table view

---
 .../components/ConfigurationFieldsColumn.tsx  |  8 +++---
 src/app/configuration/actionBuilder/index.tsx | 25 ++++++++++++++---
 .../masterData/components/CategorySidebar.tsx |  8 +++---
 .../masterData/components/MasterItemTable.tsx | 27 ++++++++++++++++---
 4 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/app/configuration/actionBuilder/components/ConfigurationFieldsColumn.tsx b/src/app/configuration/actionBuilder/components/ConfigurationFieldsColumn.tsx
index de8a510..2c8ec28 100644
--- a/src/app/configuration/actionBuilder/components/ConfigurationFieldsColumn.tsx
+++ b/src/app/configuration/actionBuilder/components/ConfigurationFieldsColumn.tsx
@@ -7,7 +7,7 @@ import {
   TrashIcon,
   DotsSixVerticalIcon,
 } from '@phosphor-icons/react';
-import { CustomInput, CustomLoader, CustomButton } from '../../../../components/custom';
+import { CustomInput, CustomLoader, CustomButton, Skeleton } from '../../../../components/custom';
 import type { FieldDefinition } from '../ActionBuilderTypes';
 
 interface ConfigurationFieldsColumnProps {
@@ -73,8 +73,10 @@ export function ConfigurationFieldsColumn({
       {/* Field Cards List */}
       <div className="space-y-3 flex-1 overflow-y-auto max-h-[580px] pr-0.5">
         {loading ? (
-          <div className="py-16 flex justify-center">
-            <CustomLoader label="Loading fields..." />
+          <div className="flex flex-col gap-3">
+            <Skeleton width="100%" height={100} className="rounded-[16px]" />
+            <Skeleton width="100%" height={100} className="rounded-[16px]" />
+            <Skeleton width="100%" height={100} className="rounded-[16px]" />
           </div>
         ) : !selectedActionTypeId ? (
           <div className="py-12 text-center text-slate-400 text-[13px]">
diff --git a/src/app/configuration/actionBuilder/index.tsx b/src/app/configuration/actionBuilder/index.tsx
index b9ef2b8..c7d8a6c 100644
--- a/src/app/configuration/actionBuilder/index.tsx
+++ b/src/app/configuration/actionBuilder/index.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { CheckCircleIcon } from '@phosphor-icons/react';
-import { CustomConfirmationModal, CustomLoader } from '../../../components/custom';
+import { CustomConfirmationModal, CustomLoader, Skeleton } from '../../../components/custom';
 
 import {
   CategoriesColumn,
@@ -507,8 +507,27 @@ export default function ActionBuilderPage() {
 
       {/* 3-Column Drilldown Layout */}
       {loadingCategories && categories.length === 0 ? (
-        <div className="py-20 flex justify-center bg-white rounded-[20px] border border-gray-100 shadow-sm">
-          <CustomLoader label="Loading Action Builder Configurations..." />
+        <div className="grid grid-cols-1 lg:grid-cols-10 gap-2 items-start">
+          <div className="lg:col-span-3 bg-white rounded-[16px] border border-gray-100 p-4 h-[600px] flex flex-col gap-4">
+            <Skeleton width={150} height={24} />
+            <Skeleton width="100%" height={40} className="rounded-lg" />
+            <Skeleton width="100%" height={60} className="rounded-xl" />
+            <Skeleton width="100%" height={60} className="rounded-xl" />
+            <Skeleton width="100%" height={60} className="rounded-xl" />
+          </div>
+          <div className="lg:col-span-3 bg-white rounded-[16px] border border-gray-100 p-4 h-[600px] flex flex-col gap-4">
+            <Skeleton width={150} height={24} />
+            <Skeleton width="100%" height={40} className="rounded-lg" />
+            <Skeleton width="100%" height={60} className="rounded-xl" />
+            <Skeleton width="100%" height={60} className="rounded-xl" />
+            <Skeleton width="100%" height={60} className="rounded-xl" />
+          </div>
+          <div className="lg:col-span-4 bg-white rounded-[16px] border border-gray-100 p-4 h-[600px] flex flex-col gap-4">
+            <Skeleton width={200} height={24} />
+            <Skeleton width="100%" height={40} className="rounded-lg" />
+            <Skeleton width="100%" height={80} className="rounded-xl" />
+            <Skeleton width="100%" height={80} className="rounded-xl" />
+          </div>
         </div>
       ) : (
         <div className="grid grid-cols-1 lg:grid-cols-10 gap-2 items-start">
diff --git a/src/app/configuration/masterData/components/CategorySidebar.tsx b/src/app/configuration/masterData/components/CategorySidebar.tsx
index 7bfa628..c6cd528 100644
--- a/src/app/configuration/masterData/components/CategorySidebar.tsx
+++ b/src/app/configuration/masterData/components/CategorySidebar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ListBulletsIcon, MagnifyingGlassIcon, DatabaseIcon } from '@phosphor-icons/react';
-import { CustomInput, CustomLoader } from '../../../../components/custom';
+import { CustomInput, Skeleton } from '../../../../components/custom';
 import type { MasterDataCategoryItem } from '../MasterDataTypes';
 
 interface CategorySidebarProps {
@@ -43,8 +43,10 @@ export const CategorySidebar: React.FC<CategorySidebarProps> = ({
 
       {/* Categories Selector List */}
       {loading ? (
-        <div className="py-8 flex justify-center">
-          <CustomLoader label="Loading Categories..." />
+        <div className="py-2 flex flex-col gap-2">
+          {Array.from({ length: 12 }).map((_, i) => (
+            <Skeleton key={i} width="100%" height={38} className="rounded-[10px]" />
+          ))}
         </div>
       ) : filteredCategories.length === 0 ? (
         <div className="py-8 text-center text-slate-400 text-[13px]">
diff --git a/src/app/configuration/masterData/components/MasterItemTable.tsx b/src/app/configuration/masterData/components/MasterItemTable.tsx
index b2d572f..ac7ab20 100644
--- a/src/app/configuration/masterData/components/MasterItemTable.tsx
+++ b/src/app/configuration/masterData/components/MasterItemTable.tsx
@@ -10,7 +10,7 @@ import {
 import {
   CustomButton,
   CustomInput,
-  CustomLoader,
+  Skeleton,
   CustomStatus,
 } from '../../../../components/custom';
 import type { MasterDataCategoryItem, MasterDataItem } from '../MasterDataTypes';
@@ -87,8 +87,29 @@ export const MasterItemTable: React.FC<MasterItemTableProps> = ({
 
         {/* Items Table */}
         {loading ? (
-          <div className="py-16 flex justify-center">
-            <CustomLoader label="Loading Category Values..." />
+          <div className="overflow-x-auto border border-gray-100 rounded-[16px]">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="bg-slate-50/80 border-b border-gray-100 text-[12px] font-bold text-slate-600 uppercase tracking-wider">
+                  <th className="py-3 px-4 w-16">Seq</th>
+                  <th className="py-3 px-4">Value / Label</th>
+                  <th className="py-3 px-4">Code</th>
+                  <th className="py-3 px-4">Status</th>
+                  <th className="py-3 px-4 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <tr key={i}>
+                    <td className="py-3 px-4"><Skeleton width={20} height={16} /></td>
+                    <td className="py-3 px-4"><Skeleton width={120} height={16} /></td>
+                    <td className="py-3 px-4"><Skeleton width={80} height={16} /></td>
+                    <td className="py-3 px-4"><Skeleton width={60} height={20} className="rounded-full" /></td>
+                    <td className="py-3 px-4 flex justify-end"><Skeleton width={40} height={24} /></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
         ) : !selectedCategory ? (
           <div className="py-16 text-center text-slate-400 text-[14px]">