Changes done in ui screens
This commit is contained in:
@@ -42,17 +42,35 @@ export default function EnergyPortal() {
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* --- TABLES GRID (SIDE-BY-SIDE) --- */}
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-start">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-start">
|
||||
|
||||
{/* LEFT TABLE: METER MASTER */}
|
||||
<Table headers={meterHeaders} rows={meterRows}/>
|
||||
{/* Right table */}
|
||||
<Table headers={readingHeaders} rows={readingRows}/>
|
||||
</div>
|
||||
{/* LEFT TABLE: STOCK MASTER */}
|
||||
<div className=" border border-slate-800/80 rounded-lg ">
|
||||
<div className="flex items-center justify-between px-4
|
||||
py-4 border-b border-slate-800/80">
|
||||
<h2 className="text-base font-semibold text-white">Meter Master</h2>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Corrected column layout and removed horizontal scrollbar to align with the right UI. */}
|
||||
<Table headers={meterHeaders} rows={meterRows}/>
|
||||
</div>
|
||||
|
||||
{/* RIGHT TABLE: CONSUMPTION LEDGER */}
|
||||
<div className=" w-full 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">Latest Readings</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<Table headers={readingHeaders} rows={readingRows}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ import {
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
import { consumptionLedger, stockItems } from "@/constants/constant";
|
||||
import Table from "@/components/common/dataTable";
|
||||
import { consumptionHeaders, consumptionRows, inventoryHeaders, inventoryRows, } from "@/constants/tabledata";
|
||||
|
||||
|
||||
|
||||
@@ -104,87 +105,19 @@ export default function InventoryPortal() {
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-start">
|
||||
|
||||
{/* LEFT TABLE: STOCK MASTER */}
|
||||
<div className="bg-[#0b1329] 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">
|
||||
<div className=" border border-slate-800/80 rounded-lg ">
|
||||
<div className="flex items-center justify-between px-4
|
||||
py-4 border-b border-slate-800/80">
|
||||
<h2 className="text-base font-semibold text-white">Stock master</h2>
|
||||
<span className="text-xs font-mono text-slate-500">7 items</span>
|
||||
</div>
|
||||
|
||||
{/* Corrected column layout and removed horizontal scrollbar to align with the right UI. */}
|
||||
<div className="">
|
||||
<table className="w-full h-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-4">Item</th>
|
||||
<th className="py-3 px-4">Group</th>
|
||||
<th className="py-3 px-4">Store</th>
|
||||
<th className="py-3 px-4">Min</th>
|
||||
<th className="py-3 px-4">Present</th>
|
||||
<th className="py-3 px-4">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/40">
|
||||
{stockItems.map((row, index) => {
|
||||
const isOverdue = row.status === "OVERDUE";
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className={`transition-colors relative ${
|
||||
row.isHighlighted
|
||||
? "bg-[#0e2238]"
|
||||
: "hover:bg-slate-800/30"
|
||||
}`}
|
||||
>
|
||||
<td className="py-3 px-4 font-semibold text-slate-100 relative">
|
||||
{row.isHighlighted && (
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[3px] bg-teal-400" />
|
||||
)}
|
||||
{row.item}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.group}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.store}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.min}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-semibold whitespace-nowrap">
|
||||
<span className={isOverdue ? "text-rose-400" : "text-white"}>
|
||||
{row.presentValue}{" "}
|
||||
</span>
|
||||
<span
|
||||
className={`font-mono text-xs ${
|
||||
isOverdue ? "text-rose-400" : "text-slate-300"
|
||||
}`}
|
||||
>
|
||||
{row.unit}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{row.status === "COMPLETED" ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 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>
|
||||
COMPLETED
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold tracking-wider bg-rose-950/40 text-rose-400 border border-rose-900/30">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
|
||||
OVERDUE
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Table headers={inventoryHeaders} rows={inventoryRows} />
|
||||
</div>
|
||||
|
||||
{/* RIGHT TABLE: CONSUMPTION LEDGER */}
|
||||
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
|
||||
<div className="h-full w-full 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">Consumption ledger</h2>
|
||||
<span className="text-xs font-mono text-slate-500 lowercase">
|
||||
@@ -192,54 +125,7 @@ export default function InventoryPortal() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<table className="w-full h-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-4">Txn</th>
|
||||
<th className="py-3 px-4">Item</th>
|
||||
<th className="py-3 px-4">Type</th>
|
||||
<th className="py-3 px-4">Qty</th>
|
||||
<th className="py-3 px-4">Job Card</th>
|
||||
<th className="py-3 px-4">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/40">
|
||||
{consumptionLedger.map((row, index) => (
|
||||
<tr key={index} className="hover:bg-slate-800/30 transition-colors">
|
||||
<td className="py-3 px-4 font-mono text-teal-400 font-medium text-xs whitespace-nowrap">
|
||||
{row.txn}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-semibold text-slate-100 max-w-[140px]">
|
||||
{row.item}
|
||||
</td>
|
||||
<td className="py-3 px-4 whitespace-nowrap">
|
||||
{row.type === "Consume" ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-950/40 text-amber-300 border border-amber-800/30">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
|
||||
Consume
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-950/40 text-blue-300 border border-blue-800/30">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
|
||||
Receipt
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-medium text-slate-200 whitespace-nowrap">
|
||||
{row.qty}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-mono text-teal-400 text-xs whitespace-nowrap">
|
||||
{row.jobCard}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
|
||||
{row.date}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Table headers={consumptionHeaders} rows={consumptionRows} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -5,6 +5,8 @@ import { permitsData, workPermitFilters } from '@/constants/constant';
|
||||
import FilterTabs from '@/components/common/roundedFilters';
|
||||
import StatCard from '@/components/common/dashStatCard';
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { workPermitHeaders, workPermitRows } from '@/constants/tabledata';
|
||||
|
||||
export default function WorkPermitPortal() {
|
||||
|
||||
@@ -13,61 +15,7 @@ export default function WorkPermitPortal() {
|
||||
// Permit Data matching the UI
|
||||
|
||||
|
||||
const renderStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "ACTIVE":
|
||||
return (
|
||||
<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/40">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||
ACTIVE
|
||||
</span>
|
||||
);
|
||||
case "SUBMITTED":
|
||||
return (
|
||||
<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/50 text-amber-300 border border-amber-800/40">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
|
||||
SUBMITTED
|
||||
</span>
|
||||
);
|
||||
case "APPROVED":
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider bg-blue-950/60 text-blue-400 border border-blue-800/40">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
|
||||
APPROVED
|
||||
</span>
|
||||
);
|
||||
case "EXPIRED":
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider bg-rose-950/40 text-rose-400 border border-rose-900/30">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
|
||||
EXPIRED
|
||||
</span>
|
||||
);
|
||||
case "CLOSED":
|
||||
return (
|
||||
<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-400"></span>
|
||||
CLOSED
|
||||
</span>
|
||||
);
|
||||
case "REJECTED":
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold tracking-wider bg-rose-950/40 text-rose-400 border border-rose-900/30">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
|
||||
REJECTED
|
||||
</span>
|
||||
);
|
||||
case "DRAFT":
|
||||
return (
|
||||
<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-400"></span>
|
||||
DRAFT
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
@@ -103,10 +51,7 @@ export default function WorkPermitPortal() {
|
||||
</div>
|
||||
</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">
|
||||
{/* Navigation tabs component if needed */}
|
||||
</div>
|
||||
|
||||
|
||||
{/* --- STAT CARDS --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
@@ -166,94 +111,7 @@ export default function WorkPermitPortal() {
|
||||
|
||||
{/* --- PERMIT TABLE SECTION --- */}
|
||||
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/80 text-[11px] font-bold uppercase tracking-wider text-slate-400">
|
||||
<th className="py-3 px-4">Permit</th>
|
||||
<th className="py-3 px-4">Working Type</th>
|
||||
<th className="py-3 px-4">Location</th>
|
||||
<th className="py-3 px-4">Contractor</th>
|
||||
<th className="py-3 px-4">Validity</th>
|
||||
<th className="py-3 px-4">Crew</th>
|
||||
<th className="py-3 px-4">Status</th>
|
||||
<th className="py-3 px-4 text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/40">
|
||||
{permitsData.map((row, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className={`transition-colors relative ${
|
||||
row.isHighlighted ? "bg-[#0e2238]" : "hover:bg-slate-800/30"
|
||||
}`}
|
||||
>
|
||||
{/* Permit ID */}
|
||||
<td className="py-4 px-4 font-mono text-teal-400 font-medium text-xs whitespace-nowrap relative">
|
||||
{row.isHighlighted && (
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[3px] bg-teal-400" />
|
||||
)}
|
||||
{row.permit}
|
||||
</td>
|
||||
|
||||
{/* Working Type */}
|
||||
<td className="py-4 px-4 font-semibold text-slate-100 whitespace-nowrap">
|
||||
{row.workingType}
|
||||
</td>
|
||||
|
||||
{/* Location */}
|
||||
<td className="py-4 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.location}
|
||||
</td>
|
||||
|
||||
{/* Contractor */}
|
||||
<td className="py-4 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.contractor}
|
||||
</td>
|
||||
|
||||
{/* Validity */}
|
||||
<td className="py-4 px-4 whitespace-nowrap">
|
||||
<div className="text-xs text-slate-300 font-medium">{row.validityDate}</div>
|
||||
<div className="text-[11px] font-mono text-slate-500">{row.validityTime}</div>
|
||||
</td>
|
||||
|
||||
{/* Crew */}
|
||||
<td className="py-4 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.crew}
|
||||
</td>
|
||||
|
||||
{/* Status Badge */}
|
||||
<td className="py-4 px-4 whitespace-nowrap">
|
||||
{renderStatusBadge(row.status)}
|
||||
</td>
|
||||
|
||||
{/* Actions */}
|
||||
<td className="py-4 px-4 text-right whitespace-nowrap">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{row.hasViewIconOnly ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<button className="p-1.5 text-slate-400 hover:text-white bg-slate-800/40 hover:bg-slate-800 rounded border border-slate-700/50 transition-colors">
|
||||
<FileText size={14} />
|
||||
</button>
|
||||
<button className="p-1.5 text-slate-400 hover:text-white bg-slate-800/40 hover:bg-slate-800 rounded border border-slate-700/50 transition-colors">
|
||||
<Eye size={14} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<button className="p-1.5 text-slate-400 hover:text-white bg-slate-800/40 hover:bg-slate-800 rounded border border-slate-700/50 transition-colors">
|
||||
<FileText size={14} />
|
||||
</button>
|
||||
<button className="text-teal-400 hover:text-teal-300 text-xs font-semibold hover:underline">
|
||||
{row.actionText}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Table headers={workPermitHeaders} rows={workPermitRows}/>
|
||||
</div>
|
||||
|
||||
<div className="mb-10 mt-10">
|
||||
|
||||
Reference in New Issue
Block a user