334 lines
14 KiB
TypeScript
334 lines
14 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Card } from "./ui/card";
|
|
import { Button } from "./ui/button";
|
|
import { Badge } from "./ui/badge";
|
|
import {
|
|
AlertTriangle,
|
|
Clock,
|
|
Package,
|
|
FileCheck,
|
|
MessageSquare,
|
|
ArrowRight,
|
|
Bell,
|
|
Camera,
|
|
Activity,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { chemicalsApi, protocolsApi } from "../lib/api";
|
|
import type { ChemicalInventory, Protocol } from "../shared/types";
|
|
|
|
type Tab = "dashboard" | "inventory" | "protocol";
|
|
|
|
interface DashboardProps {
|
|
setActiveTab: (tab: Tab) => void;
|
|
}
|
|
|
|
function daysUntil(dateStr: string): number {
|
|
const expDate = new Date(dateStr);
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
return Math.ceil((expDate.getTime() - today.getTime()) / 86400000);
|
|
}
|
|
|
|
function timeAgo(dateStr: string): string {
|
|
const diffMs = Date.now() - new Date(dateStr).getTime();
|
|
const mins = Math.floor(diffMs / 60000);
|
|
const hours = Math.floor(mins / 60);
|
|
const days = Math.floor(hours / 24);
|
|
if (mins < 60) return `${mins}m ago`;
|
|
if (hours < 24) return `${hours}h ago`;
|
|
return `${days}d ago`;
|
|
}
|
|
|
|
export function Dashboard({ setActiveTab }: DashboardProps) {
|
|
const [chemicals, setChemicals] = useState<ChemicalInventory[]>([]);
|
|
const [protocols, setProtocols] = useState<Protocol[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
Promise.all([chemicalsApi.list(), protocolsApi.list()])
|
|
.then(([chems, protos]) => {
|
|
setChemicals(chems);
|
|
setProtocols(protos);
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-8">
|
|
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Derived data ──────────────────────────────────────────────────────────
|
|
|
|
const lowStockChems = chemicals
|
|
.filter(c => c.percentageFull != null && c.percentageFull < 20)
|
|
.sort((a, b) => (a.percentageFull ?? 0) - (b.percentageFull ?? 0));
|
|
|
|
const expirationChems = chemicals
|
|
.filter(c => c.expirationDate && daysUntil(c.expirationDate) <= 30)
|
|
.sort((a, b) => daysUntil(a.expirationDate!) - daysUntil(b.expirationDate!));
|
|
|
|
const analyzedProtocols = protocols.filter(p => p.analysis_results?.length);
|
|
|
|
const stats = [
|
|
{ label: "Chemicals Tracked", value: chemicals.length, icon: Package, color: "text-[#5a9584]" },
|
|
{ label: "Low Stock (<20%)", value: lowStockChems.length, icon: AlertTriangle, color: "text-amber-600" },
|
|
{ label: "Expiring ≤30 Days", value: expirationChems.length, icon: Clock, color: "text-red-600" },
|
|
{ label: "Protocols Reviewed", value: analyzedProtocols.length, icon: FileCheck, color: "text-[#2d5a4a]" },
|
|
];
|
|
|
|
// Recent activity: merge newest chemicals + protocols, take top 4
|
|
type ActivityItem = { label: string; time: string; ts: number; type: string };
|
|
const activity: ActivityItem[] = [
|
|
...chemicals
|
|
.filter(c => c.created_at)
|
|
.map(c => ({
|
|
label: `Added ${c.chemicalName} to inventory`,
|
|
time: timeAgo(c.created_at!),
|
|
ts: new Date(c.created_at!).getTime(),
|
|
type: "inventory",
|
|
})),
|
|
...protocols.map(p => ({
|
|
label: `${p.title} protocol ${p.analysis_results?.length ? "reviewed" : "uploaded"}`,
|
|
time: timeAgo(p.created_at),
|
|
ts: new Date(p.created_at).getTime(),
|
|
type: "protocol",
|
|
})),
|
|
]
|
|
.sort((a, b) => b.ts - a.ts)
|
|
.slice(0, 4);
|
|
|
|
// Safety alerts derived from real data
|
|
const expiredChems = chemicals.filter(c => c.expirationDate && daysUntil(c.expirationDate) < 0);
|
|
const soonChems = chemicals.filter(
|
|
c => c.expirationDate && daysUntil(c.expirationDate) >= 0 && daysUntil(c.expirationDate) <= 30
|
|
);
|
|
|
|
type AlertItem = { message: string; severity: "critical" | "warning" | "info" };
|
|
const safetyAlerts: AlertItem[] = [
|
|
...expiredChems.map(c => ({
|
|
message: `${c.chemicalName} expired ${Math.abs(daysUntil(c.expirationDate!))}d ago — verify disposal`,
|
|
severity: "critical" as const,
|
|
})),
|
|
...lowStockChems.slice(0, 2).map(c => ({
|
|
message: `${c.chemicalName} is ${c.percentageFull}% full — consider reordering`,
|
|
severity: "warning" as const,
|
|
})),
|
|
...(soonChems.length > 0
|
|
? [{ message: `${soonChems.length} chemical${soonChems.length > 1 ? "s" : ""} expiring in the next 30 days`, severity: "warning" as const }]
|
|
: []),
|
|
];
|
|
|
|
return (
|
|
<div className="p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-foreground mb-2">Welcome to LabWise</h1>
|
|
<p className="text-muted-foreground">Your AI-powered lab safety and compliance assistant</p>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
{stats.map(stat => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<Card key={stat.label} className="p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-muted-foreground mb-1">{stat.label}</p>
|
|
<p className={`text-2xl font-bold ${stat.color}`}>{stat.value}</p>
|
|
</div>
|
|
<Icon className={`w-8 h-8 ${stat.color}`} />
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
<Card className="p-6">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="p-3 bg-accent rounded-lg">
|
|
<MessageSquare className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-foreground mb-1">AI Safety Assistant</h3>
|
|
<p className="text-muted-foreground">Ask questions with sourced answers</p>
|
|
</div>
|
|
</div>
|
|
<Button onClick={() => setActiveTab("protocol")} className="w-full bg-primary hover:bg-primary/90">
|
|
Ask Question <ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</Card>
|
|
|
|
<Card className="p-6">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="p-3 bg-accent rounded-lg">
|
|
<FileCheck className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-foreground mb-1">Check Protocol</h3>
|
|
<p className="text-muted-foreground">Get AI safety feedback</p>
|
|
</div>
|
|
</div>
|
|
<Button onClick={() => setActiveTab("protocol")} variant="outline" className="w-full">
|
|
Upload Protocol <ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</Card>
|
|
|
|
<Card className="p-6">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="p-3 bg-accent rounded-lg">
|
|
<Camera className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-foreground mb-1">Scan Chemical</h3>
|
|
<p className="text-muted-foreground">Photo capture with auto-fill</p>
|
|
</div>
|
|
</div>
|
|
<Button onClick={() => setActiveTab("inventory")} variant="outline" className="w-full">
|
|
Scan Label <Camera className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
{/* Low Stock Alerts */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className="w-5 h-5 text-amber-600" />
|
|
<h3 className="text-foreground">Low Stock Alerts</h3>
|
|
</div>
|
|
<Button variant="ghost" className="text-primary" onClick={() => setActiveTab("inventory")}>
|
|
View All
|
|
</Button>
|
|
</div>
|
|
{lowStockChems.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground py-4 text-center">No low stock items.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{lowStockChems.slice(0, 3).map(c => (
|
|
<div
|
|
key={c.id}
|
|
className="flex items-center justify-between p-3 rounded-lg border border-amber-200 bg-amber-50 hover:shadow-sm transition-shadow cursor-pointer"
|
|
onClick={() => setActiveTab("inventory")}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-foreground truncate">{c.chemicalName}</p>
|
|
<p className="text-muted-foreground text-sm">{c.lab} · {c.storageLocation}</p>
|
|
</div>
|
|
<Badge className="ml-2 shrink-0 bg-amber-100 text-amber-700 border-amber-200">
|
|
{c.percentageFull}% full
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Expiration Alerts */}
|
|
<Card className="p-6 lg:col-span-2">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<Bell className="w-5 h-5 text-primary" />
|
|
<h3 className="text-foreground">Expiration Alerts</h3>
|
|
</div>
|
|
<Button variant="ghost" className="text-primary" onClick={() => setActiveTab("inventory")}>
|
|
View All
|
|
</Button>
|
|
</div>
|
|
{expirationChems.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground py-4 text-center">No chemicals expiring within 30 days.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{expirationChems.slice(0, 4).map(c => {
|
|
const days = daysUntil(c.expirationDate!);
|
|
const expired = days < 0;
|
|
return (
|
|
<div
|
|
key={c.id}
|
|
className="flex items-center justify-between p-4 rounded-lg border border-border hover:shadow-sm transition-shadow cursor-pointer"
|
|
onClick={() => setActiveTab("inventory")}
|
|
>
|
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
|
<div className={`w-2 h-2 rounded-full shrink-0 ${expired ? "bg-red-500" : "bg-amber-500"}`} />
|
|
<div className="min-w-0">
|
|
<p className="text-foreground truncate">{c.chemicalName}</p>
|
|
<p className="text-muted-foreground text-sm">{c.lab} · {c.storageLocation}</p>
|
|
</div>
|
|
</div>
|
|
<Badge className={`ml-2 shrink-0 border ${expired ? "bg-red-100 text-red-700 border-red-200" : "bg-amber-100 text-amber-700 border-amber-200"}`}>
|
|
<Clock className="w-3 h-3 mr-1" />
|
|
{expired ? `Expired ${Math.abs(days)}d ago` : `${days}d left`}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Recent Activity */}
|
|
<Card className="p-6">
|
|
<h3 className="text-foreground mb-4">Recent Activity</h3>
|
|
{activity.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground py-4 text-center">No activity yet. Add chemicals or upload a protocol to get started.</p>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{activity.map((item, idx) => (
|
|
<div key={idx} className="flex items-start gap-3">
|
|
<Activity className="w-5 h-5 text-muted-foreground mt-0.5 shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-foreground truncate">{item.label}</p>
|
|
<p className="text-muted-foreground text-sm">{item.time}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Safety Alerts */}
|
|
<Card className="p-6">
|
|
<h3 className="text-foreground mb-4">Safety Alerts</h3>
|
|
{safetyAlerts.length === 0 ? (
|
|
<div className="flex items-start gap-3 p-3 rounded-lg bg-accent border border-border">
|
|
<AlertTriangle className="w-5 h-5 mt-0.5 text-primary" />
|
|
<p className="text-foreground">All clear — no active safety alerts.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{safetyAlerts.map((alert, idx) => (
|
|
<div
|
|
key={idx}
|
|
className={`flex items-start gap-3 p-3 rounded-lg ${
|
|
alert.severity === "critical"
|
|
? "bg-red-50 border border-red-200"
|
|
: "bg-amber-50 border border-amber-200"
|
|
}`}
|
|
>
|
|
<AlertTriangle
|
|
className={`w-5 h-5 mt-0.5 shrink-0 ${
|
|
alert.severity === "critical" ? "text-red-600" : "text-amber-600"
|
|
}`}
|
|
/>
|
|
<p className="text-foreground flex-1">{alert.message}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|