maskantech/aeroresolve_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement application layout, routing configuration, dashboard home page, and recovery incident details view

Browse Source
This commit is contained in:
azeeee05
2026-08-18 18:09:50 +05:30
parent 2bc8ba9bdc
commit ee83c09c2d
4 changed files with 63 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AppRoutes.tsx
+2 -2
View File
@@ -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/dashboard/index.tsx
+6 -6
View File
@@ -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
+54 -3
View File
@@ -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
+1 -1
View File
@@ -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>