shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin part is added and navbar context file is added

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-27 19:05:11 +05:30
parent cdb52e717e
commit 954de712a7
23 changed files with 2525 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
components/dashboard/admin/Configuration/modules.tsx Normal file
View File

@@ -0,0 +1,219 @@
"use client";
import { useState } from "react";
import {
LayoutGrid,
CheckSquare,
Crosshair,
FileText,
Box,
Zap,
ClipboardCheck,
BarChart2,
Pencil,
Plus,
Sparkles,
} from "lucide-react";
// Mock Data matching the design
const initialModules = [
{
id: "MOD-01",
title: "Dashboard",
description: "Operational overview & live KPIs",
icon: LayoutGrid,
menus: [], // Currently empty as per screenshot
},
{
id: "MOD-02",
title: "Helpdesk",
description: "Tickets, requests & SLA tracking",
icon: CheckSquare,
menus: ["Tickets", "SLA Settings", "Queues"],
},
{
id: "MOD-03",
title: "Equipment",
description: "Asset register & equipment groups",
icon: Crosshair,
menus: ["Asset Register", "Categories"],
},
{
id: "MOD-04",
title: "Request",
description: "Service requests & approvals",
icon: FileText,
menus: ["My Requests", "Approvals"],
},
{
id: "MOD-05",
title: "Inventory",
description: "Stock, spares & consumables",
icon: Box,
menus: ["Stock Levels", "Suppliers"],
},
{
id: "MOD-06",
title: "Energy",
description: "Meters, consumption & analytics",
icon: Zap,
menus: ["Meters", "Analytics"],
},
{
id: "MOD-07",
title: "Inspections",
description: "QR rounds & checklists",
icon: ClipboardCheck,
menus: ["Rounds", "Checklists"],
},
{
id: "MOD-08",
title: "Reports",
description: "Analytics & export tools",
icon: BarChart2,
menus: ["Scheduled Reports", "Custom Builder"],
},
];
export default function ModulesPortal() {
const [selectedModuleId, setSelectedModuleId] = useState("MOD-01");
const activeModule = initialModules.find((m) => m.id === selectedModuleId);
return (
<div className="my-15 text-slate-100 font-saas">
{/* Header Section */}
<div className="mb-6">
<div className="flex items-center gap-2 text-[10px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
<span>PLATFORM</span>
<span>•</span>
<span>MODULES</span>
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">Modules</h1>
<p className="text-sm text-slate-400 mt-1 max-w-2xl">
The catalog of system modules and their menus. These are what you switch on per tenant under feature access.
</p>
</div>
{/* Main Grid Container */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
{/* Left Column: Modules List */}
<div className="lg:col-span-6 bg-[#0E1A2B]/60 border border-slate-800/80 rounded-xl p-5 backdrop-blur-sm">
{/* Section Header */}
<div className="flex items-center justify-between mb-4">
<div>
<h2 className="text-base font-semibold text-white">Modules</h2>
<span className="text-xs font-mono text-slate-400">
{initialModules.length} available
</span>
</div>
<button className="flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 text-xs font-semibold transition-colors">
<Plus className="w-4 h-4" />
<span>Add module</span>
</button>
</div>
{/* Module Items */}
<div className="space-y-2 max-h-[620px] overflow-y-auto pr-1 custom-scrollbar">
{initialModules.map((module) => {
const Icon = module.icon;
const isSelected = module.id === selectedModuleId;
return (
<div
key={module.id}
onClick={() => setSelectedModuleId(module.id)}
className={`group relative flex items-center justify-between p-3.5 rounded-lg border cursor-pointer transition-all ${
isSelected
? "bg-teal-950/30 border-teal-500/40"
: "bg-[#09111E]/40 border-slate-800/60 hover:border-slate-700 hover:bg-[#0D1726]"
}`}
>
<div className="flex items-center gap-3.5 min-w-0">
<div
className={`p-2.5 rounded-lg border shrink-0 ${
isSelected
? "bg-teal-500/10 border-teal-500/30 text-teal-400"
: "bg-slate-900/80 border-slate-800 text-slate-400 group-hover:text-slate-200"
}`}
>
<Icon className="w-4 h-4" />
</div>
<div className="truncate">
<h3 className="text-sm font-semibold text-white truncate">
{module.title}
</h3>
<p className="text-xs text-slate-400 truncate mt-0.5">
{module.description}
</p>
</div>
</div>
<div className="flex items-center gap-2 shrink-0 ml-3">
<span className="text-[11px] font-mono bg-slate-900 border border-slate-800 text-slate-400 px-2 py-0.5 rounded">
{module.id}
</span>
<button
onClick={(e) => {
e.stopPropagation();
// Edit logic here
}}
className="p-1.5 text-slate-400 hover:text-white rounded-md hover:bg-slate-800 transition-colors"
title="Edit module"
>
<Pencil className="w-3.5 h-3.5" />
</button>
</div>
</div>
);
})}
</div>
</div>
{/* Right Column: Menus Panel */}
<div className="lg:col-span-6 bg-[#0E1A2B]/60 border border-slate-800/80 rounded-xl p-5 min-h-[500px] flex flex-col justify-between backdrop-blur-sm">
<div>
{/* Menus Header */}
<div className="flex items-center justify-between mb-4">
<div>
<h2 className="text-base font-semibold text-white">Menus</h2>
<span className="text-xs font-mono text-slate-400">
Under {activeModule?.title || "Module"}
</span>
</div>
<button className="flex items-center gap-1.5 text-teal-400 hover:text-teal-300 text-xs font-semibold transition-colors">
<Plus className="w-4 h-4" />
<span>Add menu</span>
</button>
</div>
{/* Empty State / Menus List */}
{activeModule?.menus && activeModule.menus.length > 0 ? (
<div className="space-y-2 mt-4">
{activeModule.menus.map((menu, idx) => (
<div
key={idx}
className="flex items-center justify-between p-3 rounded-lg bg-[#09111E]/40 border border-slate-800/60"
>
<span className="text-sm font-medium text-slate-200">{menu}</span>
<button className="text-xs text-slate-400 hover:text-white">
Edit
</button>
</div>
))}
</div>
) : (
<div className="flex flex-col items-center justify-center h-80 text-center">
<p className="text-sm text-slate-400 font-medium">
No menus under this module yet.
</p>
</div>
)}
</div>
</div>
</div>
</div>
);
}