feat: Morning NOC Summary adaptive card for Teams
- Add MorningSummaryService with Zabbix aggregation and adaptive card builder - Add webhook delivery system with Teams incoming webhooks - Add admin UI at /admin/morning-summary for webhook/config management - Add API routes: /send, /test, /webhooks, /webhooks/[id], /config, /history - Register morning-summary cron job in SyncScheduler (Mon-Fri 6:30 AM) - Add outages_only filter (Unavailable triggers only) - Fix host resolution: use getTriggerEnabledHosts to exclude disabled hosts - Fix resolved events: event.get value:1 scoped to window with r_eventid filter - Remove emojis from fact rows and section headers in card - Remove Open Zabbix button (duplicate of View Problems) - Add migrations: morning_summary_config + morning_summaries tables - Add outages_only column to morning_summary_config
This commit is contained in:
parent
19605f82aa
commit
c518eefdb2
61 changed files with 11236 additions and 237 deletions
|
|
@ -1,9 +1,15 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
@ -12,7 +18,7 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Search } from 'lucide-react';
|
||||
import { Search, CheckCircle2, XCircle, Loader2, ExternalLink, Package } from 'lucide-react';
|
||||
|
||||
interface ComplianceMismatch {
|
||||
id: number;
|
||||
|
|
@ -25,15 +31,224 @@ interface ComplianceMismatch {
|
|||
device_name: string;
|
||||
contract_name: string | null;
|
||||
veeam_workload_name: string | null;
|
||||
billing_covered: boolean | null;
|
||||
billing_contract_name: string | null;
|
||||
billing_contracted_qty: number | null;
|
||||
billing_contract_id: number | null;
|
||||
coverage_source: string | null;
|
||||
}
|
||||
|
||||
interface ContractService {
|
||||
id: number;
|
||||
service_id: number | null;
|
||||
display_name: string;
|
||||
description: string | null;
|
||||
unit_price: number | null;
|
||||
unit_cost: number | null;
|
||||
quantity: number | null;
|
||||
adjusted_price: number | null;
|
||||
period_label: string | null;
|
||||
start_date: string | null;
|
||||
end_date: string | null;
|
||||
}
|
||||
|
||||
interface ContractDetail {
|
||||
id: number;
|
||||
contract_name: string;
|
||||
company_name: string;
|
||||
status: number;
|
||||
contract_type: number | null;
|
||||
start_date: string | null;
|
||||
end_date: string | null;
|
||||
description: string | null;
|
||||
}
|
||||
|
||||
interface ComplianceDetailTableProps {
|
||||
mismatches: ComplianceMismatch[];
|
||||
}
|
||||
|
||||
const BACKUP_SERVICE_PATTERNS = [
|
||||
/workstation.*backup/i,
|
||||
/w\/ backup/i,
|
||||
/windows server/i,
|
||||
/server virtual/i,
|
||||
/server phys/i,
|
||||
/esxi host/i,
|
||||
/wulf 365 it complete (endpoint|server)/i,
|
||||
/wulf it complete \((server|endpoint)\)/i,
|
||||
];
|
||||
|
||||
function isBackupService(name: string): boolean {
|
||||
return BACKUP_SERVICE_PATTERNS.some((re) => re.test(name));
|
||||
}
|
||||
|
||||
function ContractCoverageModal({
|
||||
contractId,
|
||||
companyName,
|
||||
open,
|
||||
onClose,
|
||||
}: {
|
||||
contractId: number | null;
|
||||
companyName: string | null;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [data, setData] = useState<{ contract: ContractDetail; services: ContractService[] } | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loadedId, setLoadedId] = useState<number | null>(null);
|
||||
|
||||
const load = useCallback(async (id: number) => {
|
||||
if (loadedId === id) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/data/contracts/${id}/services`);
|
||||
if (!res.ok) throw new Error('Failed to load contract details');
|
||||
const json = await res.json();
|
||||
setData(json);
|
||||
setLoadedId(id);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Unknown error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [loadedId]);
|
||||
|
||||
if (open && contractId && loadedId !== contractId && !loading) {
|
||||
load(contractId);
|
||||
}
|
||||
|
||||
const contract = data?.contract;
|
||||
const services = data?.services ?? [];
|
||||
const backupServices = services.filter((s) => isBackupService(s.display_name));
|
||||
const otherServices = services.filter((s) => !isBackupService(s.display_name));
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
Contract Coverage
|
||||
{contract && (
|
||||
<span className="text-muted-foreground font-normal text-sm ml-1">— {contract.company_name}</span>
|
||||
)}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-red-500 py-4">{error}</p>
|
||||
)}
|
||||
|
||||
{!loading && !error && contract && (
|
||||
<div className="space-y-5">
|
||||
{/* Contract header */}
|
||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-2">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="font-semibold text-base">{contract.contract_name}</p>
|
||||
<p className="text-sm text-muted-foreground">{contract.company_name}</p>
|
||||
</div>
|
||||
<a
|
||||
href={`https://ww1.autotask.net/contracts/views/contractView.asp?contractID=${contract.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 text-xs text-blue-500 hover:text-blue-600 shrink-0 mt-0.5"
|
||||
>
|
||||
View in Autotask <ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground">
|
||||
{contract.start_date && (
|
||||
<span>Start: {new Date(contract.start_date).toLocaleDateString()}</span>
|
||||
)}
|
||||
{contract.end_date && (
|
||||
<span>End: {new Date(contract.end_date).toLocaleDateString()}</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<span className={`inline-block h-1.5 w-1.5 rounded-full ${contract.status === 1 ? 'bg-green-500' : 'bg-gray-400'}`} />
|
||||
{contract.status === 1 ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Backup-relevant services */}
|
||||
{backupServices.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-green-600 dark:text-green-400">Backup-Covered Services</p>
|
||||
<ServiceTable services={backupServices} highlight />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Other services */}
|
||||
{otherServices.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">All Services ({services.length})</p>
|
||||
<ServiceTable services={otherServices} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{services.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">No service lines found for this contract.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceTable({ services, highlight }: { services: ContractService[]; highlight?: boolean }) {
|
||||
return (
|
||||
<div className="rounded-md border overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/40">
|
||||
<TableHead className="text-xs">Service</TableHead>
|
||||
<TableHead className="text-xs w-28 text-right">Unit Price</TableHead>
|
||||
<TableHead className="text-xs w-28 text-right">Unit Cost</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{services.map((s) => (
|
||||
<TableRow key={s.id} className={highlight ? 'bg-green-500/5' : undefined}>
|
||||
<TableCell className="text-sm py-2">
|
||||
{highlight && <CheckCircle2 className="inline h-3 w-3 text-green-500 mr-1.5 shrink-0" />}
|
||||
{s.display_name}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm py-2 text-right">
|
||||
{s.unit_price != null ? `$${Number(s.unit_price).toFixed(2)}` : '—'}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm py-2 text-right text-muted-foreground">
|
||||
{s.unit_cost != null ? `$${Number(s.unit_cost).toFixed(2)}` : '—'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ComplianceDetailTable({ mismatches }: ComplianceDetailTableProps) {
|
||||
const [search, setSearch] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all');
|
||||
const [modalContractId, setModalContractId] = useState<number | null>(null);
|
||||
const [modalCompanyName, setModalCompanyName] = useState<string | null>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const openModal = (contractId: number, companyName: string | null) => {
|
||||
setModalContractId(contractId);
|
||||
setModalCompanyName(companyName);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const filtered = mismatches.filter((m) => {
|
||||
const matchesSearch =
|
||||
|
|
@ -82,7 +297,7 @@ export function ComplianceDetailTable({ mismatches }: ComplianceDetailTableProps
|
|||
<TableHead>Device</TableHead>
|
||||
<TableHead>Issue</TableHead>
|
||||
<TableHead>Backup UDF</TableHead>
|
||||
<TableHead>Contract</TableHead>
|
||||
<TableHead>Contract Coverage</TableHead>
|
||||
<TableHead>Veeam Workload</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
|
@ -114,7 +329,34 @@ export function ComplianceDetailTable({ mismatches }: ComplianceDetailTableProps
|
|||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{m.backup_type_udf || '-'}</TableCell>
|
||||
<TableCell className="text-sm">{m.contract_name || '-'}</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{m.billing_covered && m.billing_contract_id ? (
|
||||
<button
|
||||
onClick={() => openModal(m.billing_contract_id!, m.company_name)}
|
||||
className="flex items-center gap-1.5 text-left hover:underline cursor-pointer group"
|
||||
>
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
|
||||
<span className="text-green-700 dark:text-green-400 font-medium group-hover:underline">
|
||||
{m.billing_contract_name || 'Active'}
|
||||
</span>
|
||||
{m.billing_contracted_qty != null && (
|
||||
<span className="text-muted-foreground">({m.billing_contracted_qty} seats)</span>
|
||||
)}
|
||||
</button>
|
||||
) : m.billing_covered ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
|
||||
<span className="text-green-700 dark:text-green-400 font-medium">
|
||||
{m.billing_contract_name || 'Active'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<XCircle className="h-3.5 w-3.5 text-red-500 shrink-0" />
|
||||
<span className="text-red-700 dark:text-red-400">No backup contract</span>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{m.veeam_workload_name || '-'}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
|
|
@ -122,6 +364,13 @@ export function ComplianceDetailTable({ mismatches }: ComplianceDetailTableProps
|
|||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<ContractCoverageModal
|
||||
contractId={modalContractId}
|
||||
companyName={modalCompanyName}
|
||||
open={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
362
components/backup/contract-coverage-table.tsx
Normal file
362
components/backup/contract-coverage-table.tsx
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Search,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Server,
|
||||
Monitor,
|
||||
Mail,
|
||||
Package,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ServiceLine {
|
||||
cs_id: number;
|
||||
contract_id: number;
|
||||
contract_name: string;
|
||||
line_name: string;
|
||||
unit_price: number | null;
|
||||
unit_cost: number | null;
|
||||
category: 'server' | 'workstation' | 'm365' | 'other';
|
||||
}
|
||||
|
||||
interface CoverageRow {
|
||||
company_id: number;
|
||||
company_name: string;
|
||||
contracted: { servers: number; workstations: number; m365: number; other: number };
|
||||
deployed: { servers: number; workstations: number; other: number };
|
||||
lines: ServiceLine[];
|
||||
}
|
||||
|
||||
const CATEGORY_COLORS: Record<string, string> = {
|
||||
server: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
|
||||
workstation: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
|
||||
m365: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
|
||||
other: 'bg-muted text-muted-foreground',
|
||||
};
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
server: 'Server',
|
||||
workstation: 'Workstation',
|
||||
m365: 'M365',
|
||||
other: 'Other',
|
||||
};
|
||||
|
||||
function DeltaBadge({ contracted, deployed }: { contracted: number; deployed: number }) {
|
||||
const delta = deployed - contracted;
|
||||
if (contracted === 0 && deployed === 0) return <span className="text-muted-foreground text-xs">—</span>;
|
||||
if (delta === 0) return <span className="text-xs text-green-600 dark:text-green-400 font-medium">✓</span>;
|
||||
if (delta > 0)
|
||||
return (
|
||||
<span className="text-xs font-medium text-amber-600 dark:text-amber-400">
|
||||
+{delta}
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="text-xs font-medium text-red-600 dark:text-red-400">
|
||||
{delta}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function CountCell({
|
||||
contracted,
|
||||
deployed,
|
||||
}: {
|
||||
contracted: number;
|
||||
deployed: number;
|
||||
}) {
|
||||
const delta = deployed - contracted;
|
||||
const hasData = contracted > 0 || deployed > 0;
|
||||
if (!hasData) return <span className="text-muted-foreground text-xs">—</span>;
|
||||
|
||||
const color =
|
||||
delta === 0
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: delta > 0
|
||||
? 'text-amber-600 dark:text-amber-400'
|
||||
: 'text-red-600 dark:text-red-400';
|
||||
|
||||
return (
|
||||
<span className={`text-sm font-medium tabular-nums ${color}`}>
|
||||
{deployed}/{contracted}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ClientRow({ row }: { row: CoverageRow }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const hasAnyData =
|
||||
row.contracted.servers + row.contracted.workstations + row.contracted.m365 +
|
||||
row.deployed.servers + row.deployed.workstations > 0;
|
||||
|
||||
// Group service lines by contract
|
||||
const byContract = useMemo(() => {
|
||||
const map = new Map<number, { contract_name: string; lines: ServiceLine[] }>();
|
||||
for (const l of row.lines) {
|
||||
if (!map.has(l.contract_id)) {
|
||||
map.set(l.contract_id, { contract_name: l.contract_name, lines: [] });
|
||||
}
|
||||
map.get(l.contract_id)!.lines.push(l);
|
||||
}
|
||||
return [...map.values()];
|
||||
}, [row.lines]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableRow
|
||||
className="cursor-pointer hover:bg-muted/40 group"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
>
|
||||
{/* Expand toggle + Client */}
|
||||
<TableCell className="font-medium py-2.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground group-hover:text-foreground transition-colors">
|
||||
{expanded ? (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</span>
|
||||
<span className="truncate max-w-[240px]">{row.company_name}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
{/* Servers deployed/contracted */}
|
||||
<TableCell className="text-center py-2.5">
|
||||
<CountCell contracted={row.contracted.servers} deployed={row.deployed.servers} />
|
||||
</TableCell>
|
||||
|
||||
{/* Workstations deployed/contracted */}
|
||||
<TableCell className="text-center py-2.5">
|
||||
<CountCell contracted={row.contracted.workstations} deployed={row.deployed.workstations} />
|
||||
</TableCell>
|
||||
|
||||
{/* M365 contracted (no Veeam deployed count for M365) */}
|
||||
<TableCell className="text-center py-2.5">
|
||||
{row.contracted.m365 > 0 ? (
|
||||
<span className="text-sm font-medium tabular-nums text-amber-600 dark:text-amber-400">
|
||||
{row.contracted.m365}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-xs">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
{/* Total service lines */}
|
||||
<TableCell className="text-center py-2.5">
|
||||
<span className="text-xs text-muted-foreground tabular-nums">{row.lines.length}</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{/* Expanded detail rows */}
|
||||
{expanded && (
|
||||
<TableRow className="hover:bg-transparent">
|
||||
<TableCell colSpan={5} className="p-0 border-b">
|
||||
<div className="bg-muted/20 px-4 py-3 space-y-3">
|
||||
{byContract.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground py-1">No contract service lines found.</p>
|
||||
) : (
|
||||
byContract.map((contract) => {
|
||||
const backupLines = contract.lines.filter(
|
||||
(l) => l.category === 'server' || l.category === 'workstation'
|
||||
);
|
||||
if (backupLines.length === 0) return null;
|
||||
return (
|
||||
<div key={contract.contract_name} className="space-y-1.5">
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
{contract.contract_name}
|
||||
</p>
|
||||
<div className="rounded border overflow-hidden">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="bg-muted/40 border-b">
|
||||
<th className="px-3 py-1.5 text-left font-medium">Service</th>
|
||||
<th className="px-3 py-1.5 text-left font-medium w-28">Category</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{backupLines.map((line) => (
|
||||
<tr key={line.cs_id} className="border-b last:border-0 hover:bg-muted/30">
|
||||
<td className="px-3 py-1.5">
|
||||
{line.category === 'server' ? (
|
||||
<Server className="inline h-3 w-3 mr-1.5 text-blue-500 shrink-0" />
|
||||
) : (
|
||||
<Monitor className="inline h-3 w-3 mr-1.5 text-purple-500 shrink-0" />
|
||||
)}
|
||||
{line.line_name}
|
||||
</td>
|
||||
<td className="px-3 py-1.5">
|
||||
<span
|
||||
className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-medium ${CATEGORY_COLORS[line.category]}`}
|
||||
>
|
||||
{CATEGORY_LABELS[line.category]}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ContractCoverageTable() {
|
||||
const [rows, setRows] = useState<CoverageRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
const [filter, setFilter] = useState<'all' | 'gap' | 'over' | 'matched'>('all');
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/veeam/contract-coverage')
|
||||
.then((r) => r.json())
|
||||
.then((d) => setRows(d.rows ?? []))
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return rows.filter((r) => {
|
||||
const matchesSearch = r.company_name.toLowerCase().includes(search.toLowerCase());
|
||||
if (!matchesSearch) return false;
|
||||
if (filter === 'all') return true;
|
||||
|
||||
const serverDelta = r.deployed.servers - r.contracted.servers;
|
||||
const wsDelta = r.deployed.workstations - r.contracted.workstations;
|
||||
|
||||
if (filter === 'gap') return serverDelta < 0 || wsDelta < 0;
|
||||
if (filter === 'over') return serverDelta > 0 || wsDelta > 0;
|
||||
if (filter === 'matched')
|
||||
return (
|
||||
r.contracted.servers > 0 || r.contracted.workstations > 0
|
||||
? serverDelta === 0 && wsDelta === 0
|
||||
: false
|
||||
);
|
||||
return true;
|
||||
});
|
||||
}, [rows, search, filter]);
|
||||
|
||||
const FILTERS: { key: typeof filter; label: string }[] = [
|
||||
{ key: 'all', label: 'All' },
|
||||
{ key: 'gap', label: 'Under-deployed' },
|
||||
{ key: 'over', label: 'Over-deployed' },
|
||||
{ key: 'matched', label: 'Matched' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<div className="relative flex-1 max-w-xs">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search clients..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-9 h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
{FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
className={`px-3 py-1 rounded text-xs font-medium transition-colors border ${
|
||||
filter === f.key
|
||||
? 'bg-primary text-primary-foreground border-primary'
|
||||
: 'bg-transparent text-muted-foreground border-border hover:border-foreground/40'
|
||||
}`}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground ml-auto">{filtered.length} clients</span>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="font-medium">Counts: deployed / contracted</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-green-500" /> Matched
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-amber-500" /> Over-deployed
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-red-500" /> Gap
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="rounded-md border">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/40">
|
||||
<TableHead className="text-xs">Client</TableHead>
|
||||
<TableHead className="text-xs text-center w-28">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Server className="h-3 w-3" /> Servers
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-xs text-center w-28">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Monitor className="h-3 w-3" /> Workstations
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-xs text-center w-24">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Mail className="h-3 w-3" /> M365
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-xs text-center w-20">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Package className="h-3 w-3" /> Lines
|
||||
</div>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center text-muted-foreground py-12">
|
||||
No clients match the current filter
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filtered.map((row) => <ClientRow key={row.company_id} row={row} />)
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue