Table component is added and visitor management screen is added

This commit is contained in:
2026-07-23 12:50:44 +05:30
parent 89e93366e1
commit 1993d91319
7 changed files with 1204 additions and 857 deletions

View File

@@ -5,6 +5,190 @@ import LocationTable from '@/utils/dataTable';
import NavigationTabs from '@/utils/tabs';
import { Reqeusttabs,statusFilters } from '@/constants/constant';
import FilterTabs from '@/utils/roundedFilters';
import Table from '@/utils/dataTable';
const StatusBadge = ({
text,
color,
}: {
text: string;
color: string;
}) => (
<span
className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
>
<span className="h-1.5 w-1.5 rounded-full bg-current" />
{text}
</span>
);
const headers = [
"Request No.",
"Department",
"Issue",
"Location",
"Assignee",
"Source",
"Status",
];
const rows = [
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1009</span>,
"Electrical",
"Lighting out",
"Block 1 · G",
"ME Local",
<span className="font-mono">Line</span>,
<StatusBadge
text="Overdue"
color="bg-red-500/15 text-red-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1016</span>,
"HVAC",
"AHU not cooling",
"Lobby · 1",
"Dhananjay T.",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Registered"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1023</span>,
"HVAC",
"Thermostat fault",
"Block 1 · 1",
"ME Local",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Assigned"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1030</span>,
"HVAC",
"Thermostat fault",
"Block 1 · 1",
"Dhananjay T.",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Working"
color="bg-amber-500/15 text-amber-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1037</span>,
"Civil",
"Glass break",
"Block 1 · 1",
"Local Helpdesk",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Completed"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1044</span>,
"HVAC",
"Chiller alarm",
"Block 1 · 1",
"Dhananjay T.",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Overdue"
color="bg-red-500/15 text-red-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1051</span>,
"Plumbing",
"Water leakage",
"Lobby · 1",
"Local Helpdesk",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Registered"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1058</span>,
"Civil",
"Glass break",
"Block 2 · 2",
"Dhananjay T.",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Assigned"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1065</span>,
"Civil",
"Ceiling crack",
"Lobby · G",
"ME Local",
<span className="font-mono">Line</span>,
<StatusBadge
text="Working"
color="bg-amber-500/15 text-amber-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1072</span>,
"Plumbing",
"Water leakage",
"Block 2 · G",
"TECH Local",
<span className="font-mono">Line</span>,
<StatusBadge
text="Completed"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1079</span>,
"Electrical",
"DB switch fault",
"Tower A · 1",
"TECH Local",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Overdue"
color="bg-red-500/15 text-red-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1086</span>,
"HVAC",
"AHU not cooling",
"Lobby · 3",
"TECH Local",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Registered"
color="bg-blue-500/15 text-blue-400"
/>,
],
];
export default function ServiceRequestsPortal() {
const [activeTab, setActiveTab] = useState<string>('TFM Requests');
@@ -36,7 +220,9 @@ export default function ServiceRequestsPortal() {
</div>
{/* --- NAVIGATION TABS & TOP ACTION BUTTONS --- */}
<div className="flex flex-col md:flex-row md:items-center justify-between border-b border-slate-800/80 mb-6 gap-4">
<div className="flex flex-col
md:flex-row md:items-center justify-between
border-b border-slate-800/80 mb-4 gap-4">
{/* Navigation Tabs */}
<NavigationTabs
tabs={Reqeusttabs}
@@ -64,7 +250,10 @@ export default function ServiceRequestsPortal() {
activeFilter={activeFilter}
onChange={setActiveFilter}
/>
<LocationTable/>
<div className='mt-5'>
<Table headers={headers} rows={rows}/>
</div>
</div>
);
}