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

feat: add sidebar navigation and recovery incident management components

Browse Source
This commit is contained in:
azeeee05
2026-07-21 11:29:54 +05:30
parent 3048435468
commit bce1b088ea
3 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/recoveryIncidents/components/AddRecoveryIncidents.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { FileText, User, Plane, AlertCircle, ChevronRight } from 'lucide-react';
import { FileText, User, Airplane, WarningCircle, CaretRight } from '@phosphor-icons/react';
import {
CustomModal,
CustomInput,
@@ -25,7 +25,7 @@ export default function AddRecoveryIncidents({ isOpen, onClose }: AddRecoveryInc
primaryAction={{
label: "Assess & Log Incident",
onClick: onClose,
icon: <ChevronRight size={16} />
icon: <CaretRight size={16} />
}}
secondaryAction={{
label: "Discard",
@@ -63,7 +63,7 @@ export default function AddRecoveryIncidents({ isOpen, onClose }: AddRecoveryInc
{/* FLIGHT CONTEXT */}
<div className={SECTION_CONTAINER_CLASS}>
<div className={SECTION_TITLE_CLASS}>
<Plane size={16} />
<Airplane size={16} />
<span>Flight Context</span>
</div>
<div className="grid grid-cols-2 gap-4">
@@ -105,7 +105,7 @@ export default function AddRecoveryIncidents({ isOpen, onClose }: AddRecoveryInc
{/* DISRUPTION & JURISDICTION */}
<div className={SECTION_CONTAINER_CLASS}>
<div className={SECTION_TITLE_CLASS}>
<AlertCircle size={16} />
<WarningCircle size={16} />
<span>Disruption & Jurisdiction</span>
</div>
<div className="grid grid-cols-2 gap-4">
src/app/recoveryIncidents/components/RecoveryIncidentsList.tsx
+16 -16
View File
@@ -1,13 +1,13 @@
import { useState, useEffect, useCallback, useMemo } from "react";
import {
Plus,
Search,
ChevronUp,
ChevronDown,
MoreVertical,
SlidersHorizontal,
LayoutGrid,
} from "lucide-react";
MagnifyingGlass,
CaretUp,
CaretDown,
DotsThreeVertical,
FadersHorizontal,
SquaresFour,
} from "@phosphor-icons/react";
import {
CustomTable,
CustomInput,
@@ -417,7 +417,7 @@ export default function RecoveryIncidentsList() {
header: (
<HeaderLabel
text="Passenger / PNR"
rightIcon={<SlidersHorizontal size={12} className="rotate-90" />}
rightIcon={<FadersHorizontal size={12} className="rotate-90" />}
/>
),
accessor: (row) =>
@@ -432,7 +432,7 @@ export default function RecoveryIncidentsList() {
header: (
<HeaderLabel
text="Flight"
rightIcon={<SlidersHorizontal size={12} className="rotate-90" />}
rightIcon={<FadersHorizontal size={12} className="rotate-90" />}
/>
),
accessor: (row) => (
@@ -465,7 +465,7 @@ export default function RecoveryIncidentsList() {
header: (
<HeaderLabel
text="Value"
rightIcon={<SlidersHorizontal size={12} className="rotate-90" />}
rightIcon={<FadersHorizontal size={12} className="rotate-90" />}
/>
),
accessor: (row) => <PrimaryText text={row.value} />,
@@ -481,14 +481,14 @@ export default function RecoveryIncidentsList() {
onClick={(e) => toggleGroup(row.recoveryId, e)}
>
{collapsedGroups.has(row.recoveryId) ? (
<ChevronDown size={20} />
<CaretDown size={20} />
) : (
<ChevronUp size={20} />
<CaretUp size={20} />
)}
</div>
) : (
<div className="cursor-pointer text-gray-500 hover:text-gray-900 transition-colors p-1">
<MoreVertical size={20} />
<DotsThreeVertical size={20} />
</div>
)}
</div>
@@ -567,7 +567,7 @@ export default function RecoveryIncidentsList() {
placeholder="Search framework registry..."
value={search}
onChange={(e) => handleSearchChange(e.target.value)}
leftIcon={<Search size={16} />}
leftIcon={<MagnifyingGlass size={16} />}
className="!bg-[#F3F6F5] !rounded-[10px] !h-[40px] !border !border-[#E5E7EB]"
containerClassName="!gap-0"
/>
@@ -578,7 +578,7 @@ export default function RecoveryIncidentsList() {
<CustomButton
variant="outlined"
size="md"
leftIcon={<SlidersHorizontal size={16} />}
leftIcon={<FadersHorizontal size={16} />}
className="!rounded-[10px] !gap-[8px] !h-[40px] !border-primary !text-primary hover:!bg-primary/5"
>
Filters
@@ -586,7 +586,7 @@ export default function RecoveryIncidentsList() {
<CustomButton
variant="outlined"
size="md"
leftIcon={<LayoutGrid size={16} />}
leftIcon={<SquaresFour size={16} />}
className="!rounded-[10px] !gap-[8px] !h-[40px] !border-primary !text-primary hover:!bg-primary/5"
onClick={() => setIsGrouped(!isGrouped)}
>
src/layout/AppSidebar.tsx
+23 -23
View File
@@ -1,27 +1,27 @@
import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import {
ShieldCheckIcon,
GearIcon,
ClockCounterClockwiseIcon,
CaretDoubleRightIcon,
SquaresFourIcon,
FadersIcon,
ArrowsClockwiseIcon,
UsersFourIcon,
CaretDoubleLeftIcon,
SignOutIcon,
QuestionIcon
ShieldCheck,
Gear,
ClockCounterClockwise,
CaretDoubleRight,
SquaresFour,
Faders,
ArrowsClockwise,
UsersFour,
CaretDoubleLeft,
SignOut,
Question
} from '@phosphor-icons/react';
const NAV_ITEMS = [
{ label: 'Dashboard', path: '/', icon: SquaresFourIcon },
{ label: 'Simulation Engine', path: '/simulation', icon: FadersIcon },
{ label: 'Recovery Incidents', path: '/recovery', icon: ArrowsClockwiseIcon },
{ label: 'Cohort Management', path: '/cohorts', icon: UsersFourIcon },
{ label: 'Policy Engine', path: '/policy-engine', icon: ShieldCheckIcon },
{ label: 'Configuration', path: '/config', icon: GearIcon },
{ label: 'Audit Logs', path: '/audit', icon: ClockCounterClockwiseIcon },
{ label: 'Dashboard', path: '/', icon: SquaresFour },
{ label: 'Simulation Engine', path: '/simulation', icon: Faders },
{ label: 'Recovery Incidents', path: '/recovery', icon: ArrowsClockwise },
{ label: 'Cohort Management', path: '/cohorts', icon: UsersFour },
{ label: 'Policy Engine', path: '/policy-engine', icon: ShieldCheck },
{ label: 'Configuration', path: '/config', icon: Gear },
{ label: 'Audit Logs', path: '/audit', icon: ClockCounterClockwise },
];
interface AppSidebarProps {
@@ -60,13 +60,13 @@ export default function AppSidebar({ isOpen, onClose }: AppSidebarProps) {
)}
</div>
<button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors lg:hidden">
<CaretDoubleLeftIcon size={20} weight="bold" />
<CaretDoubleLeft size={20} weight="bold" />
</button>
<button
onClick={() => setIsCollapsed(!isCollapsed)}
className="text-slate-400 hover:text-slate-600 transition-colors hidden lg:block"
className="hidden lg:block text-slate-400 hover:text-slate-600 transition-colors ml-auto"
>
{isCollapsed ? <CaretDoubleRightIcon size={20} weight="bold" /> : <CaretDoubleLeftIcon size={20} weight="bold" />}
{isCollapsed ? <CaretDoubleRight size={20} weight="bold" /> : <CaretDoubleLeft size={20} weight="bold" />}
</button>
</div>
@@ -113,11 +113,11 @@ export default function AppSidebar({ isOpen, onClose }: AppSidebarProps) {
<div className={`relative z-10 flex flex-col ${isCollapsed ? 'gap-2 w-full' : 'gap-0.5'}`}>
<button title={isCollapsed ? "Sign Out" : undefined} className={`flex items-center ${isCollapsed ? 'justify-center px-0 h-10 w-full' : 'gap-3 px-3 py-2'} text-[13px] font-semibold text-[#E02424] hover:bg-red-50/50 rounded-[10px] transition-colors`}>
<SignOutIcon size={17} className="text-[#E02424] shrink-0" weight="bold" />
<SignOut size={17} className="text-[#E02424] shrink-0" weight="bold" />
{!isCollapsed && <span className="whitespace-nowrap">Sign Out</span>}
</button>
<button title={isCollapsed ? "Help Center" : undefined} className={`flex items-center ${isCollapsed ? 'justify-center px-0 h-10 w-full' : 'gap-3 px-3 py-2'} text-[13px] font-medium text-slate-700 hover:bg-white/40 rounded-[10px] transition-colors`}>
<QuestionIcon size={17} className="text-slate-700 shrink-0" weight="regular" />
<Question size={17} className="text-slate-700 shrink-0" weight="regular" />
{!isCollapsed && <span className="whitespace-nowrap">Help center</span>}
</button>