Added PFM Console UI project

2026-09-11 12:13:25 +02:00
parent a15b25248d
commit 99ab5b2ce6
35 changed files with 12231 additions and 0 deletions
@@ -0,0 +1,79 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { CheckCircle2, AlertCircle, Info, X } from 'lucide-react';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+interface ToastItem {
+    id: string;
+    type: ToastType;
+    title: string;
+    message?: string;
+}
+
+interface ToastContextType {
+    toast: (type: ToastType, title: string, message?: string) => void;
+    success: (title: string, message?: string) => void;
+    error: (title: string, message?: string) => void;
+    info: (title: string, message?: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+    const removeToast = (id: string) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    };
+
+    const addToast = (type: ToastType, title: string, message?: string) => {
+        const id = Math.random().toString(36).substring(2, 9);
+        setToasts((prev) => [...prev, { id, type, title, message }]);
+        setTimeout(() => removeToast(id), 5000);
+    };
+
+    const success = (title: string, message?: string) => addToast('success', title, message);
+    const error = (title: string, message?: string) => addToast('error', title, message);
+    const info = (title: string, message?: string) => addToast('info', title, message);
+
+    return (
+        <ToastContext.Provider value={{ toast: addToast, success, error, info }}>
+            {children}
+            <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-md w-full pointer-events-none p-2">
+                {toasts.map((t) => (
+                    <div
+                        key={t.id}
+                        className={`pointer-events-auto flex items-start gap-3 p-4 rounded-xl border shadow-2xl transition-all duration-200 bg-[#141414] ${t.type === 'success'
+                                ? 'border-green-500/30 text-gray-200'
+                                : t.type === 'error'
+                                    ? 'border-rose-500/30 text-gray-200'
+                                    : 'border-indigo-500/30 text-gray-200'
+                            }`}
+                    >
+                        {t.type === 'success' && <CheckCircle2 className="w-5 h-5 text-green-400 shrink-0 mt-0.5" />}
+                        {t.type === 'error' && <AlertCircle className="w-5 h-5 text-rose-400 shrink-0 mt-0.5" />}
+                        {t.type === 'info' && <Info className="w-5 h-5 text-indigo-400 shrink-0 mt-0.5" />}
+                        <div className="flex-1">
+                            <h4 className="text-sm font-semibold text-white">{t.title}</h4>
+                            {t.message && <p className="text-xs mt-0.5 text-gray-400 leading-relaxed">{t.message}</p>}
+                        </div>
+                        <button
+                            onClick={() => removeToast(t.id)}
+                            className="text-gray-400 hover:text-white p-0.5 rounded transition-colors"
+                        >
+                            <X className="w-4 h-4" />
+                        </button>
+                    </div>
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+};
+
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+};