easy-starter 1.2.1 → 2.0.0

package/template/src/pages/admin/Admin.tsx

@@ -1,20 +1,218 @@
 import React, { useEffect, useState } from "react";
-import { useGroup, GroupTable, getGroupedCount } from "easy-analytics/react";
 import { Link } from "easy-page-router/react";
 
 import { useHead } from "../../services/common";
 import { api, handleError } from "../../services/api";
 
-export default function Admin() {
-    useHead({ title: "Analytics Dashboard", description: "View statistics and analytics for your application." });
+// --- ANALYTICS START ---
+import AnalyticsTab from "./AnalyticsTab";
+// --- ANALYTICS END ---
 
-    const [password, setPassword] = useState("");
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [error, setError] = useState("");
+// --- ADMIN_ERRORS START ---
+import ErrorsTab from "./ErrorsTab";
+// --- ADMIN_ERRORS END ---
+
+// --- ADMIN_USERS START ---
+import UsersTab from "./UsersTab";
+// --- ADMIN_USERS END ---
+
+// --- AUTH START ---
+import { useUser } from "easy-user-auth/react";
+import { UserProfile } from "../../../types";
+// --- AUTH END ---
+
+type AdminProps = {
+    path: string[];
+};
+
+export default function Admin({ path }: AdminProps) {
+    useHead({ title: "Admin Dashboard", description: "Admin section for managing the application." });
 
     const [month, setMonth] = useState(new Date().toISOString().slice(0, 7));
     const [records, setRecords] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    const defaultTab = 
+        // --- ANALYTICS START ---
+        "analytics"
+        // --- ANALYTICS END ---
+        // --- NO_ANALYTICS START ---
+        // --- ADMIN_ERRORS START ---
+        "errors"
+        // --- ADMIN_ERRORS END ---
+        // --- NO_ADMIN_ERRORS START ---
+        // --- ADMIN_USERS START ---
+        "users"
+        // --- ADMIN_USERS END ---
+        // --- NO_ADMIN_USERS START ---
+        "dashboard"
+        // --- NO_ADMIN_USERS END ---
+        // --- NO_ADMIN_ERRORS END ---
+        // --- NO_ANALYTICS END ---
+    ;
+
+    const activeTab = path[1] || defaultTab;
+
+    // --- ADMIN_ERRORS START ---
+    const [errorsList, setErrorsList] = useState<any[]>([]);
+    const [loadingErrors, setLoadingErrors] = useState(false);
+    const [errorLogsError, setErrorLogsError] = useState("");
+    // --- ADMIN_ERRORS END ---
+
+    // --- ADMIN_USERS START ---
+    const [usersList, setUsersList] = useState<any[]>([]);
+    const [loadingUsers, setLoadingUsers] = useState(false);
+    const [usersError, setUsersError] = useState("");
+    // --- ADMIN_USERS END ---
+
+    // --- ADMIN_WITH_AUTH START ---
+    const { isLoggedIn, user, loginUser, showUserDialog } = useUser<UserProfile>();
+
+    // --- ADMIN_USERS START ---
+    const fetchUsers = async () => {
+        setLoadingUsers(true);
+        setUsersError("");
+        try {
+            const [data, err] = await api.getUsers({});
+            if (data) {
+                setUsersList(data);
+            } else if (err) {
+                setUsersError(err.message || String(err));
+            }
+        } catch (e) {
+            setUsersError(String(e));
+        }
+        setLoadingUsers(false);
+    };
+
+    const handleRoleChange = async (userId: string, newRole: "admin" | "user") => {
+        try {
+            const [success, err] = await api.updateUserRole({ userId, role: newRole });
+            if (success) {
+                setUsersList(prev => prev.map(u => u._id === userId ? { ...u, role: newRole } : u));
+            } else if (err) {
+                alert("Failed to update role: " + err.message);
+            }
+        } catch (e) {
+            alert(String(e));
+        }
+    };
+    // --- ADMIN_USERS END ---
+
+    // --- ADMIN_ERRORS_WITH_AUTH START ---
+    const fetchErrors = async (m: string) => {
+        setLoadingErrors(true);
+        setErrorLogsError("");
+        try {
+            const [data, err] = await api.getEasyAnalyticsErrors({ month: m });
+            if (data) {
+                setErrorsList(data);
+            } else if (err) {
+                setErrorLogsError(err.message || String(err));
+            }
+        } catch (e) {
+            setErrorLogsError(String(e));
+        }
+        setLoadingErrors(false);
+    };
+    // --- ADMIN_ERRORS_WITH_AUTH END ---
+
+    useEffect(() => {
+        if (isLoggedIn && user?.role === "admin") {
+            if (activeTab === "analytics") {
+                fetchData(month);
+            }
+            // --- ADMIN_ERRORS START ---
+            if (activeTab === "errors") {
+                fetchErrors(month);
+            }
+            // --- ADMIN_ERRORS END ---
+            // --- ADMIN_USERS START ---
+            if (activeTab === "users") {
+                fetchUsers();
+            }
+            // --- ADMIN_USERS END ---
+        }
+    }, [isLoggedIn, user, month, activeTab]);
+
+    const fetchData = async (m: string) => {
+        setLoading(true);
+        setError("");
+        try {
+            // --- ANALYTICS START ---
+            const [data, err] = await api.getEasyAnalyticsData({ month: m });
+            if (data) {
+                setRecords(data as any);
+            } else if (err) {
+                setError(err.message || String(err));
+            }
+            // --- ANALYTICS END ---
+        } catch (e) {
+            setError(String(e));
+            handleError(e as Error);
+        }
+        setLoading(false);
+    };
+
+    const handleMonthChange = (move: number) => {
+        const newMonth = new Date(month);
+        newMonth.setMonth(newMonth.getMonth() + move);
+        const nextM = newMonth.toISOString().slice(0, 7);
+        setMonth(nextM);
+    };
+
+    if (!isLoggedIn || user?.role !== "admin") {
+        return (
+            <div className="admin-login" style={{ padding: 40, textAlign: 'center' }}>
+                {!isLoggedIn ? (
+                    <>
+                        <h2>Admin Login Required</h2>
+                        <p>Please log in using an account with administrative permissions.</p>
+                        <div style={{ display: 'flex', gap: 15, justifyContent: 'center', marginTop: 20 }}>
+                            <button onClick={showUserDialog}>Log In</button>
+                            <Link href="/">Back to website</Link>
+                        </div>
+                        <div style={{ marginTop: 30, fontSize: '0.85em', color: 'var(--text-muted)' }}>
+                            💡 <strong>Tip:</strong> You can create the first admin by manually changing <code>"role": "user"</code> to <code>"role": "admin"</code> in <code>easy-db/user.json</code> for your user record.
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <h2>Access Denied</h2>
+                        <p>You do not have administrative permissions. (Logged in as <strong>{user?.name || user?.email}</strong>)</p>
+                        <div style={{ display: 'flex', gap: 15, justifyContent: 'center', marginTop: 20 }}>
+                            <button onClick={() => loginUser(null)}>Log Out</button>
+                            <Link href="/">Back to website</Link>
+                        </div>
+                    </>
+                )}
+            </div>
+        );
+    }
+    // --- ADMIN_WITH_AUTH END ---
+
+    // --- ADMIN_NO_AUTH START ---
+    const [password, setPassword] = useState("");
+    const [loggedIn, setLoggedIn] = useState(false);
+
+    // --- ADMIN_ERRORS_NO_AUTH START ---
+    const fetchErrors = async (pwd: string, m: string) => {
+        setLoadingErrors(true);
+        setErrorLogsError("");
+        try {
+            const [data, err] = await api.getEasyAnalyticsErrors({ password: pwd, month: m });
+            if (data) {
+                setErrorsList(data);
+            } else if (err) {
+                setErrorLogsError(err.message || String(err));
+            }
+        } catch (e) {
+            setErrorLogsError(String(e));
+        }
+        setLoadingErrors(false);
+    };
+    // --- ADMIN_ERRORS_NO_AUTH END ---
 
     useEffect(() => {
         const savedPwd = localStorage.getItem("admin_pwd");
@@ -28,17 +226,31 @@ export default function Admin() {
         setLoading(true);
         setError("");
         try {
+            // --- ANALYTICS START ---
             const [data, err] = await api.getEasyAnalyticsData({ password: pwd, month: m });
-
             if (data) {
                 setRecords(data as any);
                 setLoggedIn(true);
                 localStorage.setItem("admin_pwd", pwd);
             } else if (err) {
-                setError(err);
+                setError(err.message || String(err));
+                setLoggedIn(false);
+                localStorage.removeItem("admin_pwd");
+            }
+            // --- ANALYTICS END ---
+            // --- NO_ANALYTICS START ---
+            // --- ADMIN_ERRORS START ---
+            const [data, err] = await api.getEasyAnalyticsErrors({ password: pwd, month: m });
+            if (data || !err) {
+                setLoggedIn(true);
+                localStorage.setItem("admin_pwd", pwd);
+            } else {
+                setError(err.message || String(err));
                 setLoggedIn(false);
                 localStorage.removeItem("admin_pwd");
             }
+            // --- ADMIN_ERRORS END ---
+            // --- NO_ANALYTICS END ---
         } catch (e) {
             setError(String(e));
             handleError(e as Error);
@@ -46,6 +258,19 @@ export default function Admin() {
         setLoading(false);
     };
 
+    useEffect(() => {
+        if (loggedIn) {
+            if (activeTab === "analytics") {
+                fetchData(password, month);
+            }
+            // --- ADMIN_ERRORS START ---
+            if (activeTab === "errors") {
+                fetchErrors(password, month);
+            }
+            // --- ADMIN_ERRORS END ---
+        }
+    }, [loggedIn, password, month, activeTab]);
+
     const handleLogin = (e: React.FormEvent) => {
         e.preventDefault();
         fetchData(password, month);
@@ -56,112 +281,162 @@ export default function Admin() {
         newMonth.setMonth(newMonth.getMonth() + move);
         const nextM = newMonth.toISOString().slice(0, 7);
         setMonth(nextM);
-        if (loggedIn) fetchData(password, nextM);
-    };
-
-    const byURL = useGroup(records, (r: any) => {
-        try {
-            return new URL(r.url).pathname;
-        } catch (e) {
-            return r.url || "Unknown";
+        if (loggedIn) {
+            if (activeTab === "analytics") {
+                fetchData(password, nextM);
+            }
+            // --- ADMIN_ERRORS START ---
+            if (activeTab === "errors") {
+                fetchErrors(password, nextM);
+            }
+            // --- ADMIN_ERRORS END ---
         }
-    });
-
-    const byReferrer = useGroup(records, (r: any) => r.referrer || "Direct", (rs: any) => getGroupedCount(rs, (row: any) => row.localId));
-
-    const byWidth = useGroup(records, (r: any) => {
-        const w = r.window?.innerWidth || 0;
-        if (w >= 1920) return ">= 1920px Full HD";
-        if (w >= 1280) return "1280px - 1920px HD";
-        if (w >= 768) return "768px - 1280px Tablet";
-        if (w > 0) return "< 768px Mobile";
-        return "Unknown";
-    });
-
-    // Simplified UA parser - for production consider using a library like 'ua-parser-js'
-    const byBrowserLike = useGroup(records, (r: any) => {
-        const ua = (r.userAgent || "").toLowerCase();
-        if (ua.includes("firefox")) return "Firefox";
-        if (ua.includes("edg")) return "Edge";
-        if (ua.includes("chrome")) return "Chrome";
-        if (ua.includes("safari")) return "Safari";
-        return "Other/Unknown";
-    }, (rs: any) => getGroupedCount(rs, (row: any) => row.localId));
+    };
 
     if (!loggedIn) {
         return (
-            <div className="admin-login">
-                <h2>Analytics Login</h2>
-                <div className="back-link">
-                    <Link href="/">Back to website</Link>
-                </div>
-                <form onSubmit={handleLogin}>
+            <div className="admin-login" style={{ padding: 40, textAlign: 'center' }}>
+                <h2>Admin Login Required</h2>
+                <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 300, margin: '20px auto' }}>
                     <input
                         type="password"
                         placeholder="Enter admin password"
                         value={password}
                         onChange={e => setPassword(e.target.value)}
+                        style={{ padding: 10, background: 'var(--surface)', border: '1px solid var(--border)', color: 'var(--text)', borderRadius: 4 }}
+                        required
                     />
-                    <button type="submit">Login</button>
-                    {error && <p style={{ color: "#ef4444", marginTop: "10px" }}>{error}</p>}
+                    <button type="submit" disabled={loading} style={{ padding: 10, background: 'var(--primary)', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}>
+                        {loading ? "Logging in..." : "Login"}
+                    </button>
                 </form>
+                {error && <p style={{ color: "#ef4444" }}>{error}</p>}
+                <div style={{ marginTop: 20 }}>
+                    <Link href="/">Back to website</Link>
+                </div>
             </div>
         );
     }
-
-    // Daily visits counter
-    const daysInMonth = new Date(parseInt(month.slice(0, 4)), parseInt(month.slice(5, 7)), 0).getDate();
-    const dailyStats = Array.from({ length: daysInMonth }, (_, i) => {
-        const d = i + 1;
-        const dateStr = `${month}-${d.toString().padStart(2, "0")}`;
-        const count = records.filter((r: any) => r.serverDate && r.serverDate.startsWith(dateStr)).length;
-        return { date: d, count };
-    });
-    const maxVisits = Math.max(...dailyStats.map(s => s.count), 1);
+    // --- ADMIN_NO_AUTH END ---
 
     return (
         <div className="admin-container">
             <div className="header">
-                <h2>Analytics ({records.length} events)</h2>
+                <h2>Admin Dashboard</h2>
                 <Link href="/">Back to website</Link>
             </div>
 
+            <div className="admin-tabs" style={{ display: 'flex', gap: 10, margin: '20px 0', borderBottom: '1px solid var(--border)', paddingBottom: 10 }}>
+                {/* --- ANALYTICS START --- */}
+                <Link 
+                    href="/admin/analytics" 
+                    style={{ 
+                        padding: '8px 16px', 
+                        background: activeTab === "analytics" ? 'var(--primary)' : 'transparent',
+                        color: activeTab === "analytics" ? '#fff' : 'var(--text-muted)',
+                        border: 'none',
+                        borderRadius: 4,
+                        cursor: 'pointer',
+                        fontWeight: 'bold',
+                        textDecoration: 'none'
+                    }}
+                >
+                    Analytics
+                </Link>
+                {/* --- ANALYTICS END --- */}
+                {/* --- ADMIN_ERRORS START --- */}
+                <Link 
+                    href="/admin/errors" 
+                    style={{ 
+                        padding: '8px 16px', 
+                        background: activeTab === "errors" ? 'var(--primary)' : 'transparent',
+                        color: activeTab === "errors" ? '#fff' : 'var(--text-muted)',
+                        border: 'none',
+                        borderRadius: 4,
+                        cursor: 'pointer',
+                        fontWeight: 'bold',
+                        textDecoration: 'none'
+                    }}
+                >
+                    Error Logs
+                </Link>
+                {/* --- ADMIN_ERRORS END --- */}
+                {/* --- ADMIN_USERS START --- */}
+                <Link 
+                    href="/admin/users" 
+                    style={{ 
+                        padding: '8px 16px', 
+                        background: activeTab === "users" ? 'var(--primary)' : 'transparent',
+                        color: activeTab === "users" ? '#fff' : 'var(--text-muted)',
+                        border: 'none',
+                        borderRadius: 4,
+                        cursor: 'pointer',
+                        fontWeight: 'bold',
+                        textDecoration: 'none'
+                    }}
+                >
+                    User Management
+                </Link>
+                {/* --- ADMIN_USERS END --- */}
+            </div>
+
             <div className="controls">
-                <button onClick={() => handleMonthChange(-1)}>{"< Month"}</button>
+                {/* --- ANALYTICS START --- */}
+                <button onClick={() => handleMonthChange(-1)}>← Previous Month</button>
+                <strong>{month}</strong>
+                <button onClick={() => handleMonthChange(1)}>Next Month →</button>
+                {/* --- ANALYTICS END --- */}
+                {/* --- NO_ANALYTICS START --- */}
+                {/* --- ADMIN_ERRORS START --- */}
+                <button onClick={() => handleMonthChange(-1)}>← Previous Month</button>
                 <strong>{month}</strong>
-                <button onClick={() => handleMonthChange(1)}>{"Month >"}</button>
-                <button onClick={() => fetchData(password, month)} disabled={loading}>
-                    {loading ? "Loading..." : "Refresh"}
-                </button>
+                <button onClick={() => handleMonthChange(1)}>Next Month →</button>
+                {/* --- ADMIN_ERRORS END --- */}
+                {/* --- NO_ANALYTICS END --- */}
+
+                {/* --- ADMIN_WITH_AUTH START --- */}
+                <button className="btn-logout" onClick={() => loginUser(null)}>Log Out</button>
+                {/* --- ADMIN_WITH_AUTH END --- */}
+
+                {/* --- ADMIN_NO_AUTH START --- */}
                 <button className="btn-logout" onClick={() => {
-                    setLoggedIn(false);
-                    setPassword("");
                     localStorage.removeItem("admin_pwd");
-                }}>Logout</button>
+                    window.location.reload();
+                }}>Log Out</button>
+                {/* --- ADMIN_NO_AUTH END --- */}
             </div>
 
-            <div className="chart-container">
-                <h3>Pageviews per day</h3>
-                <div className="chart">
-                    {dailyStats.map(({ date, count }) => (
-                        <div key={date} className="bar-wrapper">
-                            <span className="count">{count > 0 ? count : ""}</span>
-                            <div className={`bar ${count > 0 ? 'active' : ''}`} style={{
-                                height: `${(count / maxVisits) * 100}%`,
-                                minHeight: count > 0 ? "4px" : "0",
-                            }}></div>
-                            <span className="date">{date}.</span>
-                        </div>
-                    ))}
-                </div>
-            </div>
+            {loading && activeTab === "analytics" && <p style={{ textAlign: "center" }}>Loading...</p>}
+            {error && activeTab === "analytics" && <p style={{ color: "#ef4444", textAlign: "center" }}>{error}</p>}
+
+            {/* --- ANALYTICS START --- */}
+            {activeTab === "analytics" && (
+                <AnalyticsTab records={records} month={month} />
+            )}
+            {/* --- ANALYTICS END --- */}
+
+            {/* --- ADMIN_ERRORS START --- */}
+            {activeTab === "errors" && (
+                <ErrorsTab errors={errorsList} loading={loadingErrors} errorMsg={errorLogsError} />
+            )}
+            {/* --- ADMIN_ERRORS END --- */}
+
+            {/* --- ADMIN_USERS START --- */}
+            {activeTab === "users" && (
+                <UsersTab users={usersList} loading={loadingUsers} errorMsg={usersError} onRoleChange={handleRoleChange} />
+            )}
+            {/* --- ADMIN_USERS END --- */}
 
-            <div className="grid">
-                <GroupTable title="Pageviews" data={byURL} mainColor="#6366f1" />
-                <GroupTable title="Traffic Sources (Unique)" data={byReferrer} mainColor="#34d399" />
-                <GroupTable title="Screen Resolution" data={byWidth} mainColor="#fbbf24" />
-                <GroupTable title="Browser (Unique)" data={byBrowserLike} mainColor="#c084fc" />
+            {/* --- NO_ANALYTICS START --- */}
+            {/* --- NO_ADMIN_ERRORS START --- */}
+            {/* --- NO_ADMIN_USERS START --- */}
+            <div style={{ textAlign: 'center', padding: 40, border: '1px dashed var(--border)', borderRadius: 8 }}>
+                <h3>Generic Admin Panel</h3>
+                <p style={{ color: 'var(--text-muted)' }}>Welcome to the admin panel.</p>
             </div>
+            {/* --- NO_ADMIN_USERS END --- */}
+            {/* --- NO_ADMIN_ERRORS END --- */}
+            {/* --- NO_ANALYTICS END --- */}
         </div>
     );
 }

package/template/src/pages/admin/AnalyticsTab.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { useGroup, GroupTable, getGroupedCount } from "easy-analytics/react";
+
+type AnalyticsTabProps = {
+    records: any[];
+    month: string;
+};
+
+export default function AnalyticsTab({ records, month }: AnalyticsTabProps) {
+    const byURL = useGroup(records, (r: any) => {
+        try {
+            return new URL(r.url).pathname;
+        } catch (e) {
+            return r.url || "Unknown";
+        }
+    });
+
+    const byReferrer = useGroup(records, (r: any) => r.referrer || "Direct", (rs: any) => getGroupedCount(rs, (row: any) => row.localId));
+
+    const byWidth = useGroup(records, (r: any) => {
+        const w = r.window?.innerWidth || 0;
+        if (w >= 1920) return ">= 1920px Full HD";
+        if (w >= 1280) return "1280px - 1920px HD";
+        if (w >= 768) return "768px - 1280px Tablet";
+        if (w > 0) return "< 768px Mobile";
+        return "Unknown";
+    });
+
+    const byBrowserLike = useGroup(records, (r: any) => {
+        const ua = (r.userAgent || "").toLowerCase();
+        if (ua.includes("firefox")) return "Firefox";
+        if (ua.includes("edg")) return "Edge";
+        if (ua.includes("chrome")) return "Chrome";
+        if (ua.includes("safari")) return "Safari";
+        return "Other/Unknown";
+    }, (rs: any) => getGroupedCount(rs, (row: any) => row.localId));
+
+    return (
+        <div>
+            <div className="chart-container">
+                <h3>Visits per day</h3>
+                <div className="chart">
+                    {Array.from({ length: new Date(month.slice(0, 4) as any, month.slice(5, 7) as any, 0).getDate() }, (_, i) => {
+                        const dayStr = String(i + 1).padStart(2, "0");
+                        const fullDate = `${month}-${dayStr}`;
+                        const count = records.filter((r: any) => r.created && r.created.slice(0, 10) === fullDate).length;
+                        const maxCount = Math.max(...Array.from({ length: 31 }, (_, dayIndex) => {
+                            const dStr = String(dayIndex + 1).padStart(2, "0");
+                            return records.filter((r: any) => r.created && r.created.slice(0, 10) === `${month}-${dStr}`).length;
+                        }));
+                        const heightPercent = maxCount > 0 ? (count / maxCount) * 80 : 0;
+                        return (
+                            <div key={i} className="bar-wrapper">
+                                <span className="count">{count || ""}</span>
+                                <div className="bar active" style={{ height: `${heightPercent}%` }}></div>
+                                <span className="date">{i + 1}</span>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+
+            <div className="grid">
+                <GroupTable title="Most visited paths" data={byURL} columnName="Path" />
+                <GroupTable title="Referrers" data={byReferrer} columnName="Source" />
+                <GroupTable title="Browsers" data={byBrowserLike} columnName="Browser" />
+                <GroupTable title="Display resolutions" data={byWidth} columnName="Resolution" />
+            </div>
+        </div>
+    );
+}

package/template/src/pages/admin/ErrorsTab.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+type ErrorsTabProps = {
+    errors: any[];
+    loading: boolean;
+    errorMsg: string;
+};
+
+export default function ErrorsTab({ errors, loading, errorMsg }: ErrorsTabProps) {
+    return (
+        <div>
+            <h3 style={{ marginBottom: 15 }}>Logged Errors</h3>
+            {loading && <p>Loading error logs...</p>}
+            {errorMsg && <p style={{ color: "#ef4444" }}>{errorMsg}</p>}
+            {!loading && !errorMsg && errors.length === 0 && (
+                <p style={{ color: "var(--text-muted)" }}>No errors logged for this month.</p>
+            )}
+            {!loading && !errorMsg && errors.length > 0 && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
+                    {errors.map((errRecord: any, i: number) => (
+                        <div key={i} style={{ padding: 15, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 6 }}>
+                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, fontSize: '0.9em' }}>
+                                <span style={{ color: 'var(--primary)', fontWeight: 'bold' }}>{errRecord.name || "Error"}</span>
+                                <span style={{ color: 'var(--text-muted)' }}>{errRecord.created ? new Date(errRecord.created).toLocaleString() : ""}</span>
+                            </div>
+                            <p style={{ margin: '5px 0', fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: '#f87171' }}>
+                                {errRecord.message}
+                            </p>
+                            {errRecord.stack && (
+                                <details style={{ marginTop: 10 }}>
+                                    <summary style={{ cursor: 'pointer', color: 'var(--text-muted)', fontSize: '0.85em' }}>Show Stack Trace</summary>
+                                    <pre style={{ marginTop: 5, padding: 10, background: '#09090b', overflowX: 'auto', fontSize: '0.8em', color: 'var(--text-muted)' }}>
+                                        {errRecord.stack}
+                                    </pre>
+                                </details>
+                            )}
+                            <div style={{ marginTop: 10, fontSize: '0.8em', color: 'var(--text-muted)' }}>
+                                URL: {errRecord.url} | User Agent: {errRecord.userAgent}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}