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

Changes done in ui screens

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-28 19:11:10 +05:30
parent b8e833dbb9
commit 7ce1f2705e
33 changed files with 1944 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
components/dashboard/operations/vendorService.tsx
View File

@@ -1,16 +1,18 @@
import { useState } from 'react';
import {
Star,
ShieldCheck,
Activity,
Clock,
BarChart2,
Plus
Plus,
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from "@/components/common/infoBanner";
import { fieldCrewData, vendorData } from '@/constants/constant';
import Table from "@/components/common/dataTable";
import { teamStatusRows, teamStatusHeaders, vendorPerformanceHeaders, vendorPerformanceRows } from "@/constants/tabledata";
export default function VendorServicePortal() {
@@ -99,111 +101,23 @@ export default function VendorServicePortal() {
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6 items-start">
{/* LEFT TABLE: VENDOR SCORECARD */}
<div className="xl:col-span-2 bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
<div className="xl:col-span-2 border border-slate-800/80 rounded-lg overflow-hidden">
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/80">
<h2 className="text-base font-semibold text-white">Vendor scorecard</h2>
<span className="text-xs font-mono text-slate-500 lowercase">
SLA • rating • jobs
</span>
</div>
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
<thead>
<tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
<th className="py-3 px-6">Vendor</th>
<th className="py-3 px-4">Scope</th>
<th className="py-3 px-4">Rating</th>
<th className="py-3 px-4">SLA</th>
<th className="py-3 px-4">Response</th>
<th className="py-3 px-6">Open</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/40">
{vendorData.map((row, index) => (
<tr key={index} className="hover:bg-slate-800/30 transition-colors">
<td className="py-4 px-6">
<div className="font-semibold text-slate-100">{row.name}</div>
<div className="text-xs font-mono text-slate-500 mt-0.5">{row.id}</div>
</td>
<td className="py-4 px-4 text-slate-300 font-medium whitespace-nowrap">
{row.scope}
</td>
<td className="py-4 px-4 font-medium text-slate-200 whitespace-nowrap">
<div className="flex items-center gap-1">
<span>{row.rating}</span>
<Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
</div>
</td>
<td className={`py-4 px-4 font-semibold whitespace-nowrap ${row.slaColor}`}>
{row.sla}
</td>
<td className="py-4 px-4 text-slate-300 font-medium whitespace-nowrap">
{row.response}
</td>
<td className="py-4 px-6 font-semibold text-blue-400 whitespace-nowrap">
{row.openJobs}
</td>
</tr>
))}
</tbody>
</table>
</div>
<Table headers={vendorPerformanceHeaders} rows={vendorPerformanceRows} />
</div>
{/* RIGHT TABLE: FIELD CREW • LIVE */}
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
<div className=" border border-slate-800/80 rounded-lg overflow-hidden">
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/80">
<h2 className="text-base font-semibold text-white">Field crew • live</h2>
<span className="text-xs font-mono text-slate-500 lowercase">
4 on site
</span>
</div>
<div className="p-4 space-y-3">
{fieldCrewData.map((crew, index) => {
return (
<div
key={index}
className="flex items-center justify-between p-3 rounded-lg bg-[#0d1835]/50 hover:bg-slate-800/30 transition-colors border border-slate-800/40"
>
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-lg bg-teal-950/60 border border-teal-800/30 text-teal-400 text-xs font-bold flex items-center justify-center shrink-0">
{crew.initials}
</div>
<div>
<div className="font-semibold text-slate-100 text-sm">{crew.name}</div>
<div className="text-xs text-slate-400 mt-0.5">{crew.role}</div>
</div>
</div>
<div className="text-right shrink-0">
{crew.statusType === "onsite" && (
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider bg-emerald-950/60 text-emerald-400 border border-emerald-800/30">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
{crew.status}
</span>
)}
{crew.statusType === "enroute" && (
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider bg-amber-950/60 text-amber-400 border border-amber-800/30">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
{crew.status}
</span>
)}
{crew.statusType === "offsite" && (
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider bg-slate-800/80 text-slate-400 border border-slate-700/50">
<span className="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
{crew.status}
</span>
)}
<div className="text-[11px] font-mono text-slate-500 mt-1">
{crew.time}
</div>
</div>
</div>
);
})}
</div>
<Table headers={teamStatusHeaders} rows={teamStatusRows} />
</div>
</div>