Dashboard allows for manual inventory updates and shows relevant info.

components/Dashboard.tsx

@@ -1,19 +1,21 @@
+import { useEffect, useState } from "react";
 import { Card } from "./ui/card";
 import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
 import {
   AlertTriangle,
-  CheckCircle2, 
   Clock,
-  TrendingUp,
   Package,
   FileCheck,
   MessageSquare,
   ArrowRight,
   Bell,
   Camera,
-  Activity
+  Activity,
+  Loader2,
 } from "lucide-react";
+import { chemicalsApi, protocolsApi } from "../lib/api";
+import type { ChemicalInventory, Protocol } from "../shared/types";
 
 type Tab = "dashboard" | "inventory" | "protocol";
 
@@ -21,56 +23,124 @@ 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: "252", icon: Package, color: "text-[#5a9584]" },
-    { label: "Low Stock (<20%)", value: "2", icon: AlertTriangle, color: "text-amber-600" },
-    { label: "Expiring Soon", value: "3", icon: Clock, color: "text-red-600" },
-    { label: "Protocols Reviewed", value: "12", icon: FileCheck, color: "text-[#2d5a4a]" },
+    { 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]" },
   ];
 
-  const lowStockAlerts = [
-    { chemical: "Sodium Hydroxide", location: "Cabinet B-1", percentFull: 15, lab: "Lab 305" },
-    { chemical: "Ethanol", location: "Cabinet A-5", percentFull: 18, lab: "Lab 201" },
-  ];
+  // 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);
 
-  const expirationAlerts = [
-    { chemical: "Hydrochloric Acid", location: "Acid Cabinet", daysLeft: -2, status: "expired", lab: "Lab 201" },
-    { chemical: "Benzene", location: "Flammables Cabinet", daysLeft: 15, status: "expiring-soon", lab: "Lab 305" },
-    { chemical: "Acetone", location: "Cabinet A-3", daysLeft: 28, status: "expiring-soon", lab: "Lab 201" },
-  ];
+  // 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
+  );
 
-  const recentActivity = [
-    { action: "Scanned and added Methanol via photo", time: "30 mins ago", type: "inventory" },
-    { action: "Protocol safety review completed", time: "2 hours ago", type: "protocol" },
-    { action: "Low stock alert: Sodium Hydroxide", time: "4 hours ago", type: "alert" },
-    { action: "Expiration reminder sent for 3 chemicals", time: "1 day ago", type: "reminder" },
-  ];
-
-  const alerts = [
-    { message: "Hydrochloric Acid expired 2 days ago - requires disposal", severity: "critical" },
-    { message: "Sodium Hydroxide below 20% full - reorder needed", severity: "warning" },
-    { message: "3 chemicals expiring in next 30 days", severity: "warning" },
+  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>
+          <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) => {
+          {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={`${stat.color}`}>{stat.value}</p>
+                    <p className={`text-2xl font-bold ${stat.color}`}>{stat.value}</p>
                   </div>
                   <Icon className={`w-8 h-8 ${stat.color}`} />
                 </div>
@@ -91,10 +161,7 @@ export function Dashboard({ setActiveTab }: DashboardProps) {
                 <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"
-            >
+            <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>
@@ -109,11 +176,7 @@ export function Dashboard({ setActiveTab }: DashboardProps) {
                 <p className="text-muted-foreground">Get AI safety feedback</p>
               </div>
             </div>
-            <Button 
-              onClick={() => setActiveTab("protocol")}
-              variant="outline"
-              className="w-full"
-            >
+            <Button onClick={() => setActiveTab("protocol")} variant="outline" className="w-full">
               Upload Protocol <ArrowRight className="w-4 h-4 ml-2" />
             </Button>
           </Card>
@@ -128,11 +191,7 @@ export function Dashboard({ setActiveTab }: DashboardProps) {
                 <p className="text-muted-foreground">Photo capture with auto-fill</p>
               </div>
             </div>
-            <Button 
-              onClick={() => setActiveTab("inventory")}
-              variant="outline"
-              className="w-full"
-            >
+            <Button onClick={() => setActiveTab("inventory")} variant="outline" className="w-full">
               Scan Label <Camera className="w-4 h-4 ml-2" />
             </Button>
           </Card>
@@ -146,31 +205,31 @@ export function Dashboard({ setActiveTab }: DashboardProps) {
                 <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")}
-              >
+              <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">
-              {lowStockAlerts.map((alert, idx) => (
+                {lowStockChems.slice(0, 3).map(c => (
                   <div
-                  key={idx} 
+                    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">
-                    <p className="text-foreground">{alert.chemical}</p>
-                    <p className="text-muted-foreground text-sm">{alert.lab} • {alert.location}</p>
+                    <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="bg-amber-100 text-amber-700 border-amber-200">
-                    {alert.percentFull}% full
+                    <Badge className="ml-2 shrink-0 bg-amber-100 text-amber-700 border-amber-200">
+                      {c.percentageFull}% full
                     </Badge>
                   </div>
                 ))}
               </div>
+            )}
           </Card>
 
           {/* Expiration Alerts */}
@@ -180,45 +239,39 @@ export function Dashboard({ setActiveTab }: DashboardProps) {
                 <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")}
-              >
+              <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">
-              {expirationAlerts.map((alert, idx) => (
+                {expirationChems.slice(0, 4).map(c => {
+                  const days = daysUntil(c.expirationDate!);
+                  const expired = days < 0;
+                  return (
                     <div
-                  key={idx} 
+                      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">
-                    <div className={`w-2 h-2 rounded-full ${
-                      alert.status === 'expired' 
-                        ? 'bg-red-500' 
-                        : 'bg-amber-500'
-                    }`} />
-                    <div className="flex-1">
-                      <p className="text-foreground">{alert.chemical}</p>
-                      <p className="text-muted-foreground text-sm">{alert.lab} • {alert.location}</p>
+                      <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={`${
-                    alert.status === 'expired' 
-                      ? 'bg-red-100 text-red-700 border-red-200' 
-                      : 'bg-amber-100 text-amber-700 border-amber-200'
-                  } border`}>
+                      <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" />
-                    {alert.status === 'expired' 
-                      ? `Expired ${Math.abs(alert.daysLeft)}d ago` 
-                      : `${alert.daysLeft}d left`}
+                        {expired ? `Expired ${Math.abs(days)}d ago` : `${days}d left`}
                       </Badge>
                     </div>
-              ))}
+                  );
+                })}
               </div>
+            )}
           </Card>
         </div>
 
@@ -226,47 +279,52 @@ export function Dashboard({ setActiveTab }: DashboardProps) {
           {/* 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">
-              {recentActivity.map((activity, idx) => (
+                {activity.map((item, idx) => (
                   <div key={idx} className="flex items-start gap-3">
-                  <Clock className="w-5 h-5 text-muted-foreground mt-0.5" />
-                  <div className="flex-1">
-                    <p className="text-foreground">{activity.action}</p>
-                    <p className="text-muted-foreground">{activity.time}</p>
+                    <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">
-              {alerts.map((alert, idx) => (
+                {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"
-                      : alert.severity === "warning" 
-                      ? "bg-amber-50 border border-amber-200" 
-                      : "bg-accent border border-border"
+                        : "bg-amber-50 border border-amber-200"
                     }`}
                   >
                     <AlertTriangle
-                    className={`w-5 h-5 mt-0.5 ${
-                      alert.severity === "critical"
-                        ? "text-red-600"
-                        : alert.severity === "warning" 
-                        ? "text-amber-600" 
-                        : "text-primary"
+                      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>

server/src/routes/chemicals.ts

@@ -45,11 +45,11 @@ router.post('/', async (req, res) => {
         req.user!.id, b.piFirstName, b.physicalState, b.chemicalName, b.bldgCode, b.lab,
         b.storageLocation, b.storageDevice, b.numberOfContainers, b.amountPerContainer,
         b.unitOfMeasure, b.casNumber,
-        b.chemicalFormula ?? null, b.molecularWeight ?? null, b.vendor ?? null,
-        b.catalogNumber ?? null, b.lotNumber ?? null,
-        b.expirationDate ?? null, b.concentration ?? null,
+        b.chemicalFormula || null, b.molecularWeight || null, b.vendor || null,
+        b.catalogNumber || null, b.lotNumber || null,
+        b.expirationDate || null, b.concentration || null,
         b.percentageFull ?? null, b.needsManualEntry ?? null,
-        b.scannedImage ?? null, b.comments ?? null, b.barcode ?? null, b.contact ?? null,
+        b.scannedImage || null, b.comments || null, b.barcode || null, b.contact || null,
       ]
     );
     res.status(201).json(snakeToCamel(result.rows[0]));
@@ -62,12 +62,13 @@ router.post('/', async (req, res) => {
 // PATCH /api/chemicals/:id
 router.patch('/:id', async (req, res) => {
   try {
-    const fields = Object.keys(req.body);
+    const skip = new Set(['id', 'user_id', 'created_at', 'updated_at']);
+    const fields = Object.keys(req.body).filter(k => !skip.has(k) && !skip.has(camelToSnake(k)));
     if (fields.length === 0) return res.status(400).json({ error: 'No fields to update' });
 
     const snakeFields = fields.map(camelToSnake);
     const setClauses = snakeFields.map((f, i) => `${f} = $${i + 3}`).join(', ');
-    const values = fields.map(f => req.body[f]);
+    const values = fields.map(f => req.body[f] || null);
 
     const result = await pool.query(
       `UPDATE chemicals SET ${setClauses}, updated_at = NOW()