easy-starter 2.0.0 → 2.1.0

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

@@ -78,7 +78,7 @@ export default function Admin({ path }: AdminProps) {
             if (data) {
                 setUsersList(data);
             } else if (err) {
-                setUsersError(err.message || String(err));
+                setUsersError((err as any)?.message || String(err));
             }
         } catch (e) {
             setUsersError(String(e));
@@ -92,7 +92,7 @@ export default function Admin({ path }: AdminProps) {
             if (success) {
                 setUsersList(prev => prev.map(u => u._id === userId ? { ...u, role: newRole } : u));
             } else if (err) {
-                alert("Failed to update role: " + err.message);
+                alert("Failed to update role: " + ((err as any)?.message || String(err)));
             }
         } catch (e) {
             alert(String(e));
@@ -109,7 +109,7 @@ export default function Admin({ path }: AdminProps) {
             if (data) {
                 setErrorsList(data);
             } else if (err) {
-                setErrorLogsError(err.message || String(err));
+                setErrorLogsError((err as any)?.message || String(err));
             }
         } catch (e) {
             setErrorLogsError(String(e));
@@ -145,7 +145,7 @@ export default function Admin({ path }: AdminProps) {
             if (data) {
                 setRecords(data as any);
             } else if (err) {
-                setError(err.message || String(err));
+                setError((err as any)?.message || String(err));
             }
             // --- ANALYTICS END ---
         } catch (e) {
@@ -164,24 +164,24 @@ export default function Admin({ path }: AdminProps) {
 
     if (!isLoggedIn || user?.role !== "admin") {
         return (
-            <div className="admin-login" style={{ padding: 40, textAlign: 'center' }}>
+            <div className="admin-login">
                 {!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 }}>
+                        <div className="btn-center-group">
                             <button onClick={showUserDialog}>Log In</button>
                             <Link href="/">Back to website</Link>
                         </div>
-                        <div style={{ marginTop: 30, fontSize: '0.85em', color: 'var(--text-muted)' }}>
+                        <div className="tip-box">
                             💡 <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 }}>
+                        <p>You do not have administrative permissions. (Logged in as <strong>{user?.name || (user as any)?.email}</strong>)</p>
+                        <div className="btn-center-group">
                             <button onClick={() => loginUser(null)}>Log Out</button>
                             <Link href="/">Back to website</Link>
                         </div>
@@ -192,7 +192,7 @@ export default function Admin({ path }: AdminProps) {
     }
     // --- ADMIN_WITH_AUTH END ---
 
-    // --- ADMIN_NO_AUTH START ---
+    /* --- ADMIN_NO_AUTH START --- */
     const [password, setPassword] = useState("");
     const [loggedIn, setLoggedIn] = useState(false);
 
@@ -201,11 +201,11 @@ export default function Admin({ path }: AdminProps) {
         setLoadingErrors(true);
         setErrorLogsError("");
         try {
-            const [data, err] = await api.getEasyAnalyticsErrors({ password: pwd, month: m });
+            const [data, err] = await (api as any).getEasyAnalyticsErrors({ password: pwd, month: m });
             if (data) {
                 setErrorsList(data);
             } else if (err) {
-                setErrorLogsError(err.message || String(err));
+                setErrorLogsError((err as any)?.message || String(err));
             }
         } catch (e) {
             setErrorLogsError(String(e));
@@ -227,25 +227,25 @@ export default function Admin({ path }: AdminProps) {
         setError("");
         try {
             // --- ANALYTICS START ---
-            const [data, err] = await api.getEasyAnalyticsData({ password: pwd, month: m });
+            const [data, err] = await (api as any).getEasyAnalyticsData({ password: pwd, month: m });
             if (data) {
                 setRecords(data as any);
                 setLoggedIn(true);
                 localStorage.setItem("admin_pwd", pwd);
             } else if (err) {
-                setError(err.message || String(err));
+                setError((err as any)?.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) {
+            const [errData, fetchErr] = await (api as any).getEasyAnalyticsErrors({ password: pwd, month: m });
+            if (errData || !fetchErr) {
                 setLoggedIn(true);
                 localStorage.setItem("admin_pwd", pwd);
             } else {
-                setError(err.message || String(err));
+                setError((fetchErr as any)?.message || String(fetchErr));
                 setLoggedIn(false);
                 localStorage.removeItem("admin_pwd");
             }
@@ -295,29 +295,28 @@ export default function Admin({ path }: AdminProps) {
 
     if (!loggedIn) {
         return (
-            <div className="admin-login" style={{ padding: 40, textAlign: 'center' }}>
+            <div className="admin-login">
                 <h2>Admin Login Required</h2>
-                <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 300, margin: '20px auto' }}>
+                <form onSubmit={handleLogin} className="admin-login-form">
                     <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" disabled={loading} style={{ padding: 10, background: 'var(--primary)', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}>
+                    <button type="submit" disabled={loading}>
                         {loading ? "Logging in..." : "Login"}
                     </button>
                 </form>
-                {error && <p style={{ color: "#ef4444" }}>{error}</p>}
-                <div style={{ marginTop: 20 }}>
+                {error && <p className="text-error">{error}</p>}
+                <div className="admin-link-wrapper">
                     <Link href="/">Back to website</Link>
                 </div>
             </div>
         );
     }
-    // --- ADMIN_NO_AUTH END ---
+    /* --- ADMIN_NO_AUTH END --- */
 
     return (
         <div className="admin-container">
@@ -326,20 +325,11 @@ export default function Admin({ path }: AdminProps) {
                 <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 }}>
+            <div className="admin-tabs">
                 {/* --- 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'
-                    }}
+                    className={`tab-btn ${activeTab === "analytics" ? "active" : ""}`}
                 >
                     Analytics
                 </Link>
@@ -347,16 +337,7 @@ export default function Admin({ path }: AdminProps) {
                 {/* --- 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'
-                    }}
+                    className={`tab-btn ${activeTab === "errors" ? "active" : ""}`}
                 >
                     Error Logs
                 </Link>
@@ -364,16 +345,7 @@ export default function Admin({ path }: AdminProps) {
                 {/* --- 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'
-                    }}
+                    className={`tab-btn ${activeTab === "users" ? "active" : ""}`}
                 >
                     User Management
                 </Link>
@@ -406,8 +378,8 @@ export default function Admin({ path }: AdminProps) {
                 {/* --- ADMIN_NO_AUTH END --- */}
             </div>
 
-            {loading && activeTab === "analytics" && <p style={{ textAlign: "center" }}>Loading...</p>}
-            {error && activeTab === "analytics" && <p style={{ color: "#ef4444", textAlign: "center" }}>{error}</p>}
+            {loading && activeTab === "analytics" && <p>Loading...</p>}
+            {error && activeTab === "analytics" && <p className="text-error">{error}</p>}
 
             {/* --- ANALYTICS START --- */}
             {activeTab === "analytics" && (
@@ -430,9 +402,9 @@ export default function Admin({ path }: AdminProps) {
             {/* --- NO_ANALYTICS START --- */}
             {/* --- NO_ADMIN_ERRORS START --- */}
             {/* --- NO_ADMIN_USERS START --- */}
-            <div style={{ textAlign: 'center', padding: 40, border: '1px dashed var(--border)', borderRadius: 8 }}>
+            <div className="admin-card">
                 <h3>Generic Admin Panel</h3>
-                <p style={{ color: 'var(--text-muted)' }}>Welcome to the admin panel.</p>
+                <p>Welcome to the admin panel.</p>
             </div>
             {/* --- NO_ADMIN_USERS END --- */}
             {/* --- NO_ADMIN_ERRORS END --- */}

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

@@ -61,10 +61,10 @@ export default function AnalyticsTab({ records, month }: AnalyticsTabProps) {
             </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" />
+                <GroupTable title="Most visited paths" data={byURL} />
+                <GroupTable title="Referrers" data={byReferrer} />
+                <GroupTable title="Browsers" data={byBrowserLike} />
+                <GroupTable title="Display resolutions" data={byWidth} />
             </div>
         </div>
     );

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

@@ -9,32 +9,32 @@ type ErrorsTabProps = {
 export default function ErrorsTab({ errors, loading, errorMsg }: ErrorsTabProps) {
     return (
         <div>
-            <h3 style={{ marginBottom: 15 }}>Logged Errors</h3>
+            <h3>Logged Errors</h3>
             {loading && <p>Loading error logs...</p>}
-            {errorMsg && <p style={{ color: "#ef4444" }}>{errorMsg}</p>}
+            {errorMsg && <p className="text-error">{errorMsg}</p>}
             {!loading && !errorMsg && errors.length === 0 && (
-                <p style={{ color: "var(--text-muted)" }}>No errors logged for this month.</p>
+                <p>No errors logged for this month.</p>
             )}
             {!loading && !errorMsg && errors.length > 0 && (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
+                <div className="error-list">
                     {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 key={i} className="error-item">
+                            <div className="error-item-header">
+                                <span className="error-name">{errRecord.name || "Error"}</span>
+                                <span>{errRecord.created ? new Date(errRecord.created).toLocaleString() : ""}</span>
                             </div>
-                            <p style={{ margin: '5px 0', fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: '#f87171' }}>
+                            <p className="error-message">
                                 {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)' }}>
+                                <details className="error-details">
+                                    <summary>Show Stack Trace</summary>
+                                    <pre>
                                         {errRecord.stack}
                                     </pre>
                                 </details>
                             )}
-                            <div style={{ marginTop: 10, fontSize: '0.8em', color: 'var(--text-muted)' }}>
+                            <div>
                                 URL: {errRecord.url} | User Agent: {errRecord.userAgent}
                             </div>
                         </div>

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

@@ -10,41 +10,34 @@ type UsersTabProps = {
 export default function UsersTab({ users, loading, errorMsg, onRoleChange }: UsersTabProps) {
     return (
         <div>
-            <h3 style={{ marginBottom: 15 }}>User Management</h3>
+            <h3>User Management</h3>
             {loading && <p>Loading users...</p>}
-            {errorMsg && <p style={{ color: "#ef4444" }}>{errorMsg}</p>}
+            {errorMsg && <p className="text-error">{errorMsg}</p>}
             {!loading && !errorMsg && (
-                <div style={{ overflowX: 'auto' }}>
-                    <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
+                <div className="table-wrapper">
+                    <table className="admin-table">
                         <thead>
-                            <tr style={{ borderBottom: '2px solid var(--border)' }}>
-                                <th style={{ padding: 10 }}>Email</th>
-                                <th style={{ padding: 10 }}>Name</th>
-                                <th style={{ padding: 10 }}>Role</th>
-                                <th style={{ padding: 10 }}>Actions</th>
+                            <tr>
+                                <th>Email</th>
+                                <th>Name</th>
+                                <th>Role</th>
+                                <th>Actions</th>
                             </tr>
                         </thead>
                         <tbody>
                             {users.map((usr: any) => (
-                                <tr key={usr._id} style={{ borderBottom: '1px solid var(--border)' }}>
-                                    <td style={{ padding: 10 }}>{usr.email}</td>
-                                    <td style={{ padding: 10 }}>{usr.name || "N/A"}</td>
-                                    <td style={{ padding: 10 }}>
-                                        <span style={{ 
-                                            padding: '2px 6px', 
-                                            borderRadius: 4, 
-                                            fontSize: '0.85em', 
-                                            background: usr.role === 'admin' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(255, 255, 255, 0.05)',
-                                            color: usr.role === 'admin' ? 'var(--primary-hover)' : 'var(--text-muted)'
-                                        }}>
+                                <tr key={usr._id}>
+                                    <td>{usr.email}</td>
+                                    <td>{usr.name || "N/A"}</td>
+                                    <td>
+                                        <span className={`role-badge ${usr.role === 'admin' ? 'admin' : ''}`}>
                                             {usr.role || "user"}
                                         </span>
                                     </td>
-                                    <td style={{ padding: 10 }}>
+                                    <td>
                                         <select 
                                             value={usr.role || "user"} 
                                             onChange={(e) => onRoleChange(usr._id, e.target.value as any)}
-                                            style={{ padding: '4px 8px', background: 'var(--surface)', border: '1px solid var(--border)', color: 'var(--text)', borderRadius: 4 }}
                                         >
                                             <option value="user">User</option>
                                             <option value="admin">Admin</option>

package/template/src/services/common.ts

@@ -16,11 +16,21 @@ type UseHeadProps = {
 };
 
 export function useHead({ title, description, image, canonical, lang }: UseHeadProps) {
+    // --- OGIMAGE START ---
+    const defaultOgImage = typeof window !== "undefined"
+        ? `${window.location.origin}/og-image.png?path=${encodeURIComponent(window.location.pathname)}`
+        : "/og-image.png";
+    const resolvedImage = image || defaultOgImage;
+    // --- OGIMAGE END ---
+    /* --- NO_OGIMAGE START --- */
+    const resolvedImage = image || "/images/icon.png";
+    /* --- NO_OGIMAGE END --- */
+
     // --- SSR START ---
     useHeaders({
         title,
         description,
-        image: image || `/images/icon.png`, // Images must be placed in the public directory to be accessible
+        image: resolvedImage,
         canonical: canonical || (typeof window !== "undefined" ? window.location.origin + window.location.pathname : ""),
         lang,
     });

package/template/src/styles.css

@@ -458,3 +458,210 @@ button {
     margin-top: 4px;
 }
 /* --- AUTH END --- */
+
+/* Helper & UI Utility Classes */
+.auth-bar {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 20px;
+}
+
+.auth-user-info {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.admin-link-wrapper {
+    margin-top: 20px;
+}
+
+.not-found {
+    padding: 40px;
+    text-align: center;
+}
+
+.loading-fallback {
+    padding: 40px;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.text-error {
+    color: #ef4444;
+}
+
+.text-success {
+    color: #34d399;
+}
+
+.alert-success {
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    color: #34d399;
+}
+
+.reset-password-main {
+    max-width: 450px;
+    margin: 60px auto;
+}
+
+.btn-group {
+    display: flex;
+    gap: 15px;
+    margin-top: 10px;
+
+    & > * {
+        flex: 1;
+    }
+}
+
+.btn-center-group {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.tip-box {
+    margin-top: 30px;
+    font-size: 0.85em;
+    color: var(--text-muted);
+}
+
+.admin-tabs {
+    display: flex;
+    gap: 10px;
+    margin: 20px 0;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 10px;
+}
+
+.tab-btn {
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background 0.2s, color 0.2s;
+
+    &:hover {
+        color: var(--text);
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    &.active {
+        background: var(--primary);
+        color: #fff;
+    }
+}
+
+.admin-card {
+    padding: 40px;
+    text-align: center;
+    border: 1px dashed var(--border);
+    border-radius: 8px;
+}
+
+.admin-login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 300px;
+    margin: 20px auto;
+
+    input {
+        padding: 10px;
+    }
+
+    button {
+        padding: 10px;
+    }
+}
+
+.error-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.error-item {
+    padding: 15px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+}
+
+.error-item-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-size: 0.9em;
+}
+
+.error-name {
+    color: var(--primary);
+    font-weight: bold;
+}
+
+.error-message {
+    margin: 5px 0;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: #f87171;
+}
+
+.error-details {
+    margin-top: 10px;
+
+    summary {
+        cursor: pointer;
+        color: var(--text-muted);
+        font-size: 0.85em;
+    }
+
+    pre {
+        margin-top: 5px;
+        padding: 10px;
+        background: #09090b;
+        overflow-x: auto;
+        font-size: 0.8em;
+        color: var(--text-muted);
+    }
+}
+
+.table-wrapper {
+    overflow-x: auto;
+}
+
+.role-badge {
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.85em;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+
+    &.admin {
+        background: rgba(99, 102, 241, 0.2);
+        color: var(--primary-hover);
+    }
+}
+
+.admin-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+
+    tr {
+        border-bottom: 1px solid var(--border);
+    }
+
+    th, td {
+        padding: 12px 16px;
+    }
+}

package/template/tsconfig.json

@@ -14,7 +14,11 @@
     "strictNullChecks": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": [
+      "node",
+      "vite/client"
+    ]
   },
   "include": [
     "src/**/*",

package/template/types.ts

@@ -28,16 +28,16 @@ export type API = APIDefinition<{
     addItem: Endpoint<Omit<Item, "_id">, string>;
     removeItem: Endpoint<{ id: string }, boolean>;
 
-    // --- ADMIN_NO_AUTH START ---
+    /* --- ADMIN_NO_AUTH START --- */
     getEasyAnalyticsData: Endpoint<{ password: string, month: string }, any[]>;
-    // --- ADMIN_NO_AUTH END ---
+    /* --- ADMIN_NO_AUTH END --- */
     // --- ADMIN_WITH_AUTH START ---
     getEasyAnalyticsData: Endpoint<{ month: string }, any[]>;
     // --- ADMIN_WITH_AUTH END ---
 
-    // --- ADMIN_ERRORS_NO_AUTH START ---
+    /* --- ADMIN_ERRORS_NO_AUTH START --- */
     getEasyAnalyticsErrors: Endpoint<{ password: string, month: string }, any[]>;
-    // --- ADMIN_ERRORS_NO_AUTH END ---
+    /* --- ADMIN_ERRORS_NO_AUTH END --- */
     // --- ADMIN_ERRORS_WITH_AUTH START ---
     getEasyAnalyticsErrors: Endpoint<{ month: string }, any[]>;
     // --- ADMIN_ERRORS_WITH_AUTH END ---

package/template/vite.config.ts

@@ -1,9 +1,8 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { imagetools } from "vite-imagetools";
 
 export default defineConfig({
-  plugins: [react(), imagetools()],
+  plugins: [react()],
   define: {
     "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
     "global": "globalThis",
@@ -19,6 +18,12 @@ export default defineConfig({
         target: "http://localhost:1111",
         changeOrigin: true,
       },
+      // --- RESIZER START ---
+      "/images": {
+        target: "http://localhost:1111",
+        changeOrigin: true,
+      },
+      // --- RESIZER END ---
     },
   },
 });