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

Project structure changes ad new files added in dashboard folders

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-23 18:32:07 +05:30
parent 1993d91319
commit 5a2ae769d8
63 changed files with 1550 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
components/dashboard/operations/equipment.tsx Normal file
View File

@@ -0,0 +1,305 @@
import {
Pencil,
FileText,
QrCode,
Search,
Plus,
AlertTriangle,
Clock,
ShieldCheck,
Target,
Download,
LayoutGrid,
} from "lucide-react";
import Table from "@/components/common/dataTable";
import InfoBanner from "@/components/common/infoBanner";
import Button from "@/components/common/button";
import NavigationTabs from "@/components/common/tabs";
import { equipmentTabs } from "@/constants/constant";
import { useState } from "react";
import StatCard from "@/components/common/dashStatCard";
const headers = [
"Code",
"Equipment",
"Group",
"Block · Floor",
"Service Provider",
"Criticality",
"PPM Status",
"Actions",
];
const Badge = ({
text,
color,
}: {
text: string;
color: string;
}) => (
<span
className={`inline-flex items-center rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${color}`}
>
<span className="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
{text}
</span>
);
const ActionButtons = () => (
<div className="flex justify-center gap-1.5">
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
<FileText size={14} />
</button>
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
<Pencil size={14} />
</button>
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
<LayoutGrid size={14} />
</button>
</div>
);
export default function EquipmentPortal() {
const [activeTab, setActiveTab] = useState<string>("Site-Wise Equipment");
const rows = [
[
<span className="font-semibold text-teal-400">APP-1100</span>,
<span className="font-bold text-slate-100">Cooling Tower</span>,
"Electrical",
"Block 1 · 2",
"Blue Star",
"Important",
<Badge text="Working" color="bg-amber-950/60 text-amber-400 border border-amber-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1103</span>,
<span className="font-bold text-slate-100">Air Handling Unit</span>,
"Plumbing",
"Tower A · 1",
"Blue Star",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1106</span>,
<span className="font-bold text-slate-100">VRV Outdoor</span>,
"Electrical",
"Tower A · G",
"Voltas",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1109</span>,
<span className="font-bold text-slate-100">VRV Outdoor</span>,
"HVAC",
"Tower A · 1",
"Voltas",
"Normal",
<Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1112</span>,
<span className="font-bold text-slate-100">Air Handling Unit</span>,
"HVAC",
"Tower A · G",
"In-house",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1115</span>,
<span className="font-bold text-slate-100">Air Handling Unit</span>,
"Electrical",
"Tower A · 2",
"Voltas",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1118</span>,
<span className="font-bold text-slate-100">Chiller</span>,
"Electrical",
"Block 1 · 1",
"In-house",
"Important",
<Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1121</span>,
<span className="font-bold text-slate-100">Cooling Tower</span>,
"Plumbing",
"Tower A · 1",
"Blue Star",
"Normal",
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
];
return (
<div className="my-15 text-slate-100 font-sans ">
<div className="flex items-center gap-2 text-[10px]
font-bold tracking-widest text-slate-500 uppercase font-mono">
<span className="text-teal-400">Apple One — HQ Tower</span>
<span>•</span>
<span>Operations</span>
<span>•</span>
<span>Equipment</span>
</div>
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
Equipment & maintenance
</h1>
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl mb-10 leading-relaxed">
Asset register, preventive (PPM) and
contract (AMC) maintenance, scoped to the active tenant.
</p>
{/* Navigation Tabs */}
<NavigationTabs
tabs={equipmentTabs}
activeTab={activeTab}
onTabChange={setActiveTab}
className="mb-6"
/>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
{/* Total equipment */}
<StatCard
variant="icon"
title="Total equipment"
value="8"
icon={Target}
badgeText="4 groups"
badgeClassName="text-slate-400 font-mono"
iconContainerClassName="bg-teal-950/60 border-teal-800/40 text-teal-400"
/>
{/* Critical assets */}
<StatCard
variant="icon"
title="Critical assets"
value="4"
icon={AlertTriangle}
badgeText="priority"
badgeClassName="text-rose-400 font-semibold font-mono"
iconContainerClassName="bg-rose-950/50 border-rose-800/40 text-rose-400"
/>
{/* PPM attention */}
<StatCard
variant="icon"
title="PPM attention"
value="3"
icon={Clock}
badgeText="due / overdue"
badgeClassName="text-amber-400 font-semibold font-mono"
iconContainerClassName="bg-amber-950/50 border-amber-800/40 text-amber-400"
/>
{/* On plan */}
<StatCard
variant="icon"
title="On plan"
value="5"
icon={ShieldCheck}
badgeText="healthy"
badgeClassName="text-emerald-400 font-semibold font-mono"
iconContainerClassName="bg-emerald-950/50 border-emerald-800/40 text-emerald-400"
/>
</div>
{/* --- ROW 2: SEARCH, FILTERS & ACTION BUTTONS --- */}
<div className="flex flex-col md:flex-row items-center justify-between gap-3 mb-6">
{/* Search & Group Dropdown */}
<div className="flex flex-1 flex-wrap items-center gap-3 w-full md:w-auto">
{/* Search Bar */}
<div className="relative flex-1 min-w-[260px] max-w-md">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
<input
type="text"
placeholder="Search code, name, block, provider..."
className="w-full bg-[#0b1727] border border-slate-800 rounded-lg pl-9 pr-4 py-2 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-teal-500/50 transition-colors"
/>
</div>
{/* All groups dropdown */}
<select className="bg-[#0b1727] border-2 border-teal-500/80 rounded-xl px-4 py-1.5 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none transition-all">
<option value="all">All groups</option>
<option value="hvac">HVAC</option>
<option value="plumbing">Plumbing</option>
<option value="electrical">Electrical</option>
<option value="fire">Fire</option>
</select>
</div>
{/* Action Buttons Right Side */}
<div className="flex items-center gap-2 w-full md:w-auto justify-end flex-wrap">
{/* All QR */}
<Button className="flex items-center gap-1.5 bg-[#0b1727] hover:bg-slate-800/80 text-slate-200 border border-slate-800 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors">
<QrCode size={14} />
<span>All QR</span>
</Button>
{/* Download */}
<Button className="flex items-center gap-1.5 bg-[#0b1727] hover:bg-slate-800/80 text-slate-200 border border-slate-800 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors">
<Download size={14} />
<span>Download</span>
</Button>
{/* Bulk upload */}
<Button className="flex items-center gap-1.5 bg-[#0b1727] hover:bg-slate-800/80 text-slate-200 border border-slate-800 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors">
<LayoutGrid size={14} />
<span>Bulk upload</span>
</Button>
{/* Add equipment */}
<Button className="flex items-center gap-1.5 bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold rounded-lg px-4 py-2 text-xs transition-colors">
<Plus size={16} className="stroke-[3]" />
<span>Add equipment</span>
</Button>
</div>
</div>
{/* Data Table */}
<div className="mt-4">
<Table headers={headers} rows={rows} />
</div>
{/* Info Banner */}
<div className="my-8">
<InfoBanner
boldText="Tip:"
normalText="click any asset to open its record — Manufacture, PPM, AMC, Request, QR, Attachment, and History Card. Use Bulk upload to import hundreds of assets from Excel/CSV, auto-linked to site, block, floor & group."
/>
</div>
</div>
);
}