feat: implement master data management components including sidebar navigation and item table view

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">
+          <div className="flex flex-col gap-3">
-            <CustomLoader label="Loading fields..." />
+            <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]">

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">
+        <div className="grid grid-cols-1 lg:grid-cols-10 gap-2 items-start">
-          <CustomLoader label="Loading Action Builder Configurations..." />
+          <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">

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">
+        <div className="py-2 flex flex-col gap-2">
-          <CustomLoader label="Loading Categories..." />
+          {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]">

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">
+          <div className="overflow-x-auto border border-gray-100 rounded-[16px]">
-            <CustomLoader label="Loading Category Values..." />
+            <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]">