Merge pull request 'azeem' (#41) from azeem into development

Reviewed-on: https://gitea.maskantech.in/gitea_admin/aeroresolve_frontend/pulls/41

src/AppRoutes.tsx

@@ -1,7 +1,7 @@
 import { lazy, Suspense } from 'react'
 import { Route, Routes, Navigate } from 'react-router-dom'
 import Layout from './layout/AppLayout'
-import CustomAppLoader from './components/custom/CustomAppLoader'
+
 
 const HomePage = lazy(() => import('./app/dashboard'))
 const CohortManage = lazy(() => import('./app/cohartManage'))
@@ -15,7 +15,7 @@ const ConfigurationPage = lazy(() => import('./app/configuration'))
 function AppRoutes() {
   return (
     <Layout>
-      <Suspense fallback={<CustomAppLoader />}>
+      <Suspense fallback={null}>
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/cohorts" element={<CohortManage />} />

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]">

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">

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]">

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]">

src/app/dashboard/index.tsx

@@ -53,11 +53,11 @@ export default function HomePage() {
 
   if (loading) {
     return (
-      <div>
+      <div className="p-2 md:p-2 lg:p-4 space-y-4">
         {/* Top Stat Cards Skeleton */}
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
           {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="bg-white rounded-[14px] p-5 border border-gray-100/80 flex flex-col justify-between h-[100px]">
+            <div key={i} className="bg-white rounded-[14px] py-4 px-5 border border-gray-100/80 shadow-[0_2px_4px_rgba(0,0,0,0.02)] flex flex-col justify-between h-[102px]">
               <div className="space-y-2">
                 <Skeleton width="60%" height={16} />
                 <Skeleton width="40%" height={28} />
@@ -72,7 +72,7 @@ export default function HomePage() {
 
         {/* Middle Section Skeleton */}
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
-          <div className="lg:col-span-8 bg-white rounded-[16px] border border-gray-100 p-6 flex flex-col justify-between h-[360px]">
+          <div className="lg:col-span-8 bg-white rounded-[16px] border border-gray-100 p-6 shadow-[0_2px_4px_rgba(0,0,0,0.02)] flex flex-col justify-between h-[360px]">
             <div className="space-y-2">
               <Skeleton width="40%" height={22} />
               <Skeleton width="60%" height={14} />
@@ -85,7 +85,7 @@ export default function HomePage() {
             </div>
           </div>
 
-          <div className="lg:col-span-4 bg-white rounded-[16px] border border-gray-100 p-6 flex flex-col justify-between h-[360px]">
+          <div className="lg:col-span-4 bg-white rounded-[16px] border border-gray-100 p-6 shadow-[0_2px_4px_rgba(0,0,0,0.02)] flex flex-col justify-between h-[360px]">
             <div className="space-y-2">
               <Skeleton width="50%" height={22} />
               <Skeleton width="70%" height={14} />
@@ -102,7 +102,7 @@ export default function HomePage() {
         </div>
 
         {/* Bottom Table Skeleton */}
-        <div className="bg-white rounded-[16px] border border-gray-100 p-6 space-y-4">
+        <div className="bg-white rounded-[16px] border border-gray-100 p-6 shadow-[0_2px_4px_rgba(0,0,0,0.02)] flex flex-col gap-5">
           <div className="space-y-2">
             <Skeleton width="30%" height={22} />
             <Skeleton width="50%" height={14} />
@@ -119,7 +119,7 @@ export default function HomePage() {
   }
 
   return (
-    <div className="p-4 md:p-6 lg:p-4 space-y-6">
+    <div className="p-2 md:p-2 lg:p-4 space-y-4">
       {/* 1. Top Stat Cards Row */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
         {metrics.map((metric) => (

src/app/recoveryIncidents/tabs/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { User, Checks, X, ClockCounterClockwiseIcon, ArrowLeftIcon, ArrowsClockwiseIcon, AirplaneTiltIcon } from '@phosphor-icons/react';
-import { CustomButton, CustomTabs, CustomBackButton, CustomStatus } from '../../../components/custom';
+import { CustomButton, CustomTabs, CustomBackButton, CustomStatus, Skeleton } from '../../../components/custom';
 import SummaryTab from './SummaryTab';
 import CaseDetailsTab from './CaseDetailsTab';
 import RecoveryPlanTab from './RecoveryPlanTab';
@@ -96,7 +96,58 @@ export default function RecoveryIncidentTabs() {
   ];
 
   if (loading) {
-    return <div className="p-8 text-center text-gray-500">Loading incident...</div>;
+    return (
+      <div className="w-full flex flex-col h-full relative space-y-6">
+        {/* Header Skeleton */}
+        <div className="flex items-start justify-between pb-6 border-b border-gray-100">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-3">
+              <Skeleton width={32} height={32} variant="circular" />
+              <Skeleton width={150} height={28} />
+              <Skeleton width={80} height={24} className="rounded-full" />
+            </div>
+            <div className="flex items-center gap-3 ml-8">
+              <Skeleton width={120} height={16} />
+              <Skeleton width={180} height={16} />
+            </div>
+          </div>
+          <Skeleton width={160} height={42} className="rounded-lg" />
+        </div>
+
+        {/* Tabs Row Skeleton */}
+        <div className="flex items-center justify-between py-6">
+          <div className="flex-1 flex gap-6">
+            <Skeleton width={80} height={24} />
+            <Skeleton width={100} height={24} />
+            <Skeleton width={120} height={24} />
+            <Skeleton width={90} height={24} />
+          </div>
+          <div className="flex items-center gap-3">
+            <Skeleton width={140} height={42} className="rounded-lg" />
+            <Skeleton width={160} height={42} className="rounded-lg" />
+          </div>
+        </div>
+
+        {/* Main Content Area Skeleton */}
+        <div className="flex gap-6 items-start pb-24">
+          <div className="flex-1 bg-white rounded-[24px] p-6 border border-gray-100 h-[400px]">
+            <div className="space-y-4">
+              <Skeleton width="40%" height={24} />
+              <Skeleton width="100%" height={100} />
+              <Skeleton width="100%" height={100} />
+            </div>
+          </div>
+          <div className="w-[360px] flex-shrink-0 bg-white rounded-[16px] border border-gray-100 p-6 h-[400px]">
+            <div className="space-y-6">
+              <Skeleton width={180} height={20} />
+              <Skeleton width="100%" height={60} />
+              <Skeleton width="100%" height={60} />
+              <Skeleton width="100%" height={40} className="mt-8" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   const currentStatus = incident?.status || "Pending";
@@ -220,7 +271,7 @@ export default function RecoveryIncidentTabs() {
       </div>
 
       {/* Bottom Sticky Action Bar */}
-      <div className="sticky bottom-[-24px] -mx-8 px-8 py-4 bg-white/90 backdrop-blur-md border-t border-gray-100 flex justify-between items-center z-10 mt-auto shadow-[0_-10px_20px_-10px_rgba(0,0,0,0.05)]">
+      <div className="sticky bottom-[-16px] -mx-4 px-4 py-4 bg-white/90 backdrop-blur-md border-t border-gray-100 flex justify-between items-center z-10 mt-auto shadow-[0_-10px_20px_-10px_rgba(0,0,0,0.05)]">
         <div></div>
         <div className="flex gap-4">
           <CustomButton

src/layout/AppLayout.tsx

@@ -17,7 +17,7 @@ function Layout({ children }: LayoutProps) {
       {/* Main Content Area Wrapper */}
       <div className="flex-1 flex flex-col overflow-hidden bg-white rounded-[12px] shadow-[0px_0px_10px_rgba(0,0,0,0.05)] border border-gray-100/50 relative z-10 my-2 mr-2 ml-1">
         <AppHeader onMenuClick={() => setIsSidebarOpen(true)} />
-        <main className="flex-1 overflow-y-auto px-8 py-6 bg-white rounded-b-[12px]">
+        <main className="flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 bg-white rounded-b-[12px]">
           {children}
         </main>
       </div>