v1.0 with SW PWA enabled

frontend/src/components/NodeCard.tsx

@@ -0,0 +1,46 @@
+import { Node } from '@/types/monitoring';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { StatusIndicator } from './StatusIndicator';
+import { ServiceCard } from './ServiceCard';
+import { Server, Clock } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { fr } from 'date-fns/locale';
+
+interface NodeCardProps {
+  node: Node;
+}
+
+export function NodeCard({ node }: NodeCardProps) {
+  return (
+    <div className="space-y-3 sm:space-y-4 animate-fade-in">
+      <Card className="glass-card border-l-4 border-l-primary">
+        <CardHeader className="pb-2 sm:pb-3 p-3 sm:p-6">
+          <div className="flex items-start sm:items-center justify-between gap-2">
+            <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+              <div className="p-1.5 sm:p-2 rounded-lg bg-primary/10 flex-shrink-0">
+                <Server className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
+              </div>
+              <div className="min-w-0">
+                <CardTitle className="text-base sm:text-lg font-semibold truncate">{node.name}</CardTitle>
+                <p className="text-xs sm:text-sm text-muted-foreground font-mono truncate">{node.address}</p>
+              </div>
+            </div>
+            <StatusIndicator status={node.status} showLabel size="lg" className="flex-shrink-0" />
+          </div>
+        </CardHeader>
+        <CardContent className="p-3 sm:p-6 pt-0 sm:pt-0">
+          <div className="flex items-center gap-2 text-[10px] sm:text-xs text-muted-foreground">
+            <Clock className="w-3 h-3 flex-shrink-0" />
+            <span className="truncate">Dernière connexion: {formatDistanceToNow(node.lastSeen, { addSuffix: true, locale: fr })}</span>
+          </div>
+        </CardContent>
+      </Card>
+      
+      <div className="grid gap-3 sm:gap-4 grid-cols-1 md:grid-cols-2">
+        {node.services.map((service) => (
+          <ServiceCard key={service.id} service={service} />
+        ))}
+      </div>
+    </div>
+  );
+}