Initial UI commit for 1.3

src/ui/Homepage/HomepageAlertManager.tsx

@@ -0,0 +1,199 @@
+import React, {useEffect, useState} from "react";
+import {HomepageAlertCard} from "./HomepageAlertCard.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import axios from "axios";
+
+interface TermixAlert {
+    id: string;
+    title: string;
+    message: string;
+    expiresAt: string;
+    priority?: 'low' | 'medium' | 'high' | 'critical';
+    type?: 'info' | 'warning' | 'error' | 'success';
+    actionUrl?: string;
+    actionText?: string;
+}
+
+interface AlertManagerProps {
+    userId: string | null;
+    loggedIn: boolean;
+}
+
+const apiBase = import.meta.env.DEV ? "http://localhost:8081/alerts" : "/alerts";
+
+const API = axios.create({
+    baseURL: apiBase,
+});
+
+export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): React.ReactElement {
+    const [alerts, setAlerts] = useState<TermixAlert[]>([]);
+    const [currentAlertIndex, setCurrentAlertIndex] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (loggedIn && userId) {
+            fetchUserAlerts();
+        }
+    }, [loggedIn, userId]);
+
+    const fetchUserAlerts = async () => {
+        if (!userId) return;
+
+        setLoading(true);
+        setError(null);
+        
+        try {
+            const response = await API.get(`/user/${userId}`);
+            
+            const userAlerts = response.data.alerts || [];
+
+            const sortedAlerts = userAlerts.sort((a: TermixAlert, b: TermixAlert) => {
+                const priorityOrder = { critical: 4, high: 3, medium: 2, low: 1 };
+                const aPriority = priorityOrder[a.priority as keyof typeof priorityOrder] || 0;
+                const bPriority = priorityOrder[b.priority as keyof typeof priorityOrder] || 0;
+                
+                if (aPriority !== bPriority) {
+                    return bPriority - aPriority;
+                }
+
+                return new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime();
+            });
+
+            setAlerts(sortedAlerts);
+            setCurrentAlertIndex(0);
+        } catch (err) {
+            setError('Failed to load alerts');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDismissAlert = async (alertId: string) => {
+        if (!userId) return;
+        
+        try {
+            const response = await API.post('/dismiss', {
+                userId,
+                alertId
+            });
+
+            setAlerts(prev => {
+                const newAlerts = prev.filter(alert => alert.id !== alertId);
+                return newAlerts;
+            });
+
+            setCurrentAlertIndex(prevIndex => {
+                const newAlertsLength = alerts.length - 1;
+                if (newAlertsLength === 0) return 0;
+                if (prevIndex >= newAlertsLength) return Math.max(0, newAlertsLength - 1);
+                return prevIndex;
+            });
+        } catch (err) {
+            setError('Failed to dismiss alert');
+        }
+    };
+
+    const handleCloseCurrentAlert = () => {
+        if (alerts.length === 0) return;
+
+        if (currentAlertIndex < alerts.length - 1) {
+            setCurrentAlertIndex(currentAlertIndex + 1);
+        } else {
+            setAlerts([]);
+            setCurrentAlertIndex(0);
+        }
+    };
+
+    const handlePreviousAlert = () => {
+        if (currentAlertIndex > 0) {
+            setCurrentAlertIndex(currentAlertIndex - 1);
+        }
+    };
+
+    const handleNextAlert = () => {
+        if (currentAlertIndex < alerts.length - 1) {
+            setCurrentAlertIndex(currentAlertIndex + 1);
+        }
+    };
+
+    if (!loggedIn || !userId) {
+        return null;
+    }
+
+    if (loading) {
+        return (
+            <div className="fixed top-4 right-4 z-50">
+                <div className="bg-background border rounded-lg p-3 shadow-lg">
+                    <div className="flex items-center gap-2">
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
+                        <span className="text-sm text-muted-foreground">Loading alerts...</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (alerts.length === 0) {
+        return null;
+    }
+
+    const currentAlert = alerts[currentAlertIndex];
+
+    if (!currentAlert) {
+        return null;
+    }
+    
+    const priorityCounts = { critical: 0, high: 0, medium: 0, low: 0 };
+    alerts.forEach(alert => {
+        const priority = alert.priority || 'low';
+        priorityCounts[priority as keyof typeof priorityCounts]++;
+    });
+    const hasMultipleAlerts = alerts.length > 1;
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-10">
+            <div className="relative w-full max-w-2xl mx-4">
+                <HomepageAlertCard
+                    alert={currentAlert}
+                    onDismiss={handleDismissAlert}
+                    onClose={handleCloseCurrentAlert}
+                />
+
+                {hasMultipleAlerts && (
+                    <div className="absolute -bottom-16 left-1/2 transform -translate-x-1/2 flex items-center gap-2">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handlePreviousAlert}
+                            disabled={currentAlertIndex === 0}
+                            className="h-8 px-3"
+                        >
+                            Previous
+                        </Button>
+                        <span className="text-sm text-muted-foreground">
+                            {currentAlertIndex + 1} of {alerts.length}
+                        </span>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleNextAlert}
+                            disabled={currentAlertIndex === alerts.length - 1}
+                            className="h-8 px-3"
+                        >
+                            Next
+                        </Button>
+                    </div>
+                )}
+
+                {error && (
+                    <div className="absolute -bottom-20 left-1/2 transform -translate-x-1/2">
+                        <div className="bg-destructive text-destructive-foreground px-3 py-1 rounded text-sm">
+                            {error}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}