vforclaude2 0.3.87

package/src/shared/components/UsageStats.js

@@ -0,0 +1,465 @@
+"use client";
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import Badge from "./Badge";
+import Card from "./Card";
+import OverviewCards from "@/app/(dashboard)/dashboard/usage/components/OverviewCards";
+import UsageTable, { fmt, fmtTime } from "@/app/(dashboard)/dashboard/usage/components/UsageTable";
+import ProviderTopology from "@/app/(dashboard)/dashboard/usage/components/ProviderTopology";
+import UsageChart from "@/app/(dashboard)/dashboard/usage/components/UsageChart";
+
+function timeAgo(timestamp) {
+  const diff = Math.floor((Date.now() - new Date(timestamp)) / 1000);
+  if (diff < 60) return `${diff}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+// Auto-update time display every second without re-rendering parent
+function TimeAgo({ timestamp }) {
+  const [, setTick] = useState(0);
+  
+  useEffect(() => {
+    const timer = setInterval(() => setTick(t => t + 1), 1000);
+    return () => clearInterval(timer);
+  }, []);
+  
+  return <>{timeAgo(timestamp)}</>;
+}
+
+function RecentRequests({ requests = [] }) {
+  return (
+    <Card className="flex flex-col overflow-hidden" padding="sm" style={{ height: 480 }}>
+      {/* Header */}
+      <div className="px-1 py-2 border-b border-border shrink-0">
+        <span className="text-xs font-semibold text-text-muted uppercase tracking-wide">Recent Requests</span>
+      </div>
+
+      {!requests.length ? (
+        <div className="flex-1 flex items-center justify-center text-text-muted text-sm">No requests yet.</div>
+      ) : (
+        <div className="flex-1 overflow-y-auto">
+          <table className="w-full text-xs border-collapse">
+            <thead className="sticky top-0 bg-bg z-10">
+              <tr className="border-b border-border">
+                <th className="py-1.5 text-left font-semibold text-text-muted w-2"></th>
+                <th className="py-1.5 text-left font-semibold text-text-muted">Model</th>
+                <th className="py-1.5 text-right font-semibold text-text-muted whitespace-nowrap">In / Out</th>
+                <th className="py-1.5 text-right font-semibold text-text-muted">When</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/50">
+              {requests.map((r, i) => {
+                const ok = !r.status || r.status === "ok" || r.status === "success";
+                return (
+                  <tr key={i} className="hover:bg-bg-subtle transition-colors">
+                    <td className="py-1.5">
+                      <span className={`block w-1.5 h-1.5 rounded-full ${ok ? "bg-success" : "bg-error"}`} />
+                    </td>
+                    <td className="py-1.5 font-mono truncate max-w-[120px]" title={r.model}>{r.model}</td>
+                    <td className="py-1.5 text-right whitespace-nowrap">
+                      <span className="text-primary">{fmt(r.promptTokens)}↑</span>
+                      {" "}
+                      <span className="text-success">{fmt(r.completionTokens)}↓</span>
+                    </td>
+                    <td className="py-1.5 text-right text-text-muted whitespace-nowrap"><TimeAgo timestamp={r.timestamp} /></td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+function sortData(dataMap, pendingMap = {}, sortBy, sortOrder) {
+  return Object.entries(dataMap || {})
+    .map(([key, data]) => {
+      const totalTokens = (data.promptTokens || 0) + (data.completionTokens || 0);
+      const totalCost = data.cost || 0;
+      const inputCost = totalTokens > 0 ? (data.promptTokens || 0) * (totalCost / totalTokens) : 0;
+      const outputCost = totalTokens > 0 ? (data.completionTokens || 0) * (totalCost / totalTokens) : 0;
+      return { ...data, key, totalTokens, totalCost, inputCost, outputCost, pending: pendingMap[key] || 0 };
+    })
+    .sort((a, b) => {
+      let valA = a[sortBy];
+      let valB = b[sortBy];
+      if (typeof valA === "string") valA = valA.toLowerCase();
+      if (typeof valB === "string") valB = valB.toLowerCase();
+      if (valA < valB) return sortOrder === "asc" ? -1 : 1;
+      if (valA > valB) return sortOrder === "asc" ? 1 : -1;
+      return 0;
+    });
+}
+
+function getGroupKey(item, keyField) {
+  switch (keyField) {
+    case "rawModel": return item.rawModel || "Unknown Model";
+    case "accountName": return item.accountName || `Account ${item.connectionId?.slice(0, 8)}...` || "Unknown Account";
+    case "keyName": return item.keyName || "Unknown Key";
+    case "endpoint": return item.endpoint || "Unknown Endpoint";
+    default: return item[keyField] || "Unknown";
+  }
+}
+
+function groupDataByKey(data, keyField) {
+  if (!Array.isArray(data)) return [];
+  const groups = {};
+  data.forEach((item) => {
+    const gk = getGroupKey(item, keyField);
+    if (!groups[gk]) {
+      groups[gk] = {
+        groupKey: gk,
+        summary: { requests: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0, cost: 0, inputCost: 0, outputCost: 0, lastUsed: null, pending: 0 },
+        items: [],
+      };
+    }
+    const s = groups[gk].summary;
+    s.requests += item.requests || 0;
+    s.promptTokens += item.promptTokens || 0;
+    s.completionTokens += item.completionTokens || 0;
+    s.totalTokens += item.totalTokens || 0;
+    s.cost += item.cost || 0;
+    s.inputCost += item.inputCost || 0;
+    s.outputCost += item.outputCost || 0;
+    s.pending += item.pending || 0;
+    if (item.lastUsed && (!s.lastUsed || new Date(item.lastUsed) > new Date(s.lastUsed))) {
+      s.lastUsed = item.lastUsed;
+    }
+    groups[gk].items.push(item);
+  });
+  return Object.values(groups);
+}
+
+const MODEL_COLUMNS = [
+  { field: "rawModel", label: "Model" },
+  { field: "provider", label: "Provider" },
+  { field: "requests", label: "Requests", align: "right" },
+  { field: "lastUsed", label: "Last Used", align: "right" },
+];
+
+const ACCOUNT_COLUMNS = [
+  { field: "rawModel", label: "Model" },
+  { field: "provider", label: "Provider" },
+  { field: "accountName", label: "Account" },
+  { field: "requests", label: "Requests", align: "right" },
+  { field: "lastUsed", label: "Last Used", align: "right" },
+];
+
+const API_KEY_COLUMNS = [
+  { field: "keyName", label: "API Key Name" },
+  { field: "rawModel", label: "Model" },
+  { field: "provider", label: "Provider" },
+  { field: "requests", label: "Requests", align: "right" },
+  { field: "lastUsed", label: "Last Used", align: "right" },
+];
+
+const ENDPOINT_COLUMNS = [
+  { field: "endpoint", label: "Endpoint" },
+  { field: "rawModel", label: "Model" },
+  { field: "provider", label: "Provider" },
+  { field: "requests", label: "Requests", align: "right" },
+  { field: "lastUsed", label: "Last Used", align: "right" },
+];
+
+const TABLE_OPTIONS = [
+  { value: "model", label: "Usage by Model" },
+  { value: "account", label: "Usage by Account" },
+  { value: "apiKey", label: "Usage by API Key" },
+  { value: "endpoint", label: "Usage by Endpoint" },
+];
+
+const PERIODS = [
+  { value: "24h", label: "24h" },
+  { value: "7d", label: "7D" },
+  { value: "30d", label: "30D" },
+  { value: "60d", label: "60D" },
+];
+
+export default function UsageStats() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const sortBy = searchParams.get("sortBy") || "rawModel";
+  const sortOrder = searchParams.get("sortOrder") || "asc";
+
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [fetching, setFetching] = useState(false);
+  const [tableView, setTableView] = useState("model");
+  const [providers, setProviders] = useState([]);
+  const [period, setPeriod] = useState("7d");
+
+  // Fetch connected providers once, deduplicate by provider type
+  useEffect(() => {
+    fetch("/api/providers")
+      .then((r) => r.ok ? r.json() : null)
+      .then((d) => {
+        if (!d?.connections) return;
+        const seen = new Set();
+        const unique = d.connections.filter((c) => {
+          if (seen.has(c.provider)) return false;
+          seen.add(c.provider);
+          return true;
+        });
+        setProviders(unique);
+      })
+      .catch(() => {});
+  }, []);
+
+  // Fetch filtered stats via REST when period changes
+  useEffect(() => {
+    // First load: show full spinner; subsequent: show subtle fetching indicator
+    if (!stats) setLoading(true);
+    else setFetching(true);
+
+    fetch(`/api/usage/stats?period=${period}`)
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => {
+        if (data) setStats((prev) => ({ ...prev, ...data }));
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+        setFetching(false);
+      });
+  }, [period]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // SSE connection - real-time updates for activeRequests + recentRequests only
+  useEffect(() => {
+    const es = new EventSource("/api/usage/stream");
+
+    es.onmessage = (e) => {
+      try {
+        const data = JSON.parse(e.data);
+        // Only update real-time fields from SSE, keep filtered stats intact
+        setStats((prev) => prev ? {
+          ...prev,
+          activeRequests: data.activeRequests,
+          recentRequests: data.recentRequests,
+          errorProvider: data.errorProvider,
+          pending: data.pending,
+        } : data);
+        setLoading(false);
+      } catch (err) {
+        console.error("[SSE CLIENT] parse error:", err);
+      }
+    };
+
+    es.onerror = () => setLoading(false);
+
+    return () => es.close();
+  }, []);
+
+  const toggleSort = useCallback((tableType, field) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (params.get("sortBy") === field) {
+      params.set("sortOrder", params.get("sortOrder") === "asc" ? "desc" : "asc");
+    } else {
+      params.set("sortBy", field);
+      params.set("sortOrder", "asc");
+    }
+    router.replace(`?${params.toString()}`, { scroll: false });
+  }, [searchParams, router]);
+
+  // Compute active table data
+  const activeTableConfig = useMemo(() => {
+    if (!stats) return null;
+    switch (tableView) {
+      case "model": {
+        const pendingMap = stats.pending?.byModel || {};
+        return {
+          columns: MODEL_COLUMNS,
+          groupedData: groupDataByKey(sortData(stats.byModel, pendingMap, sortBy, sortOrder), "rawModel"),
+          storageKey: "usage-stats:expanded-models",
+          emptyMessage: "No usage recorded yet.",
+          renderSummaryCells: (group) => (
+            <>
+              <td className="px-6 py-3 text-text-muted">—</td>
+              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
+            </>
+          ),
+          renderDetailCells: (item) => (
+            <>
+              <td className={`px-6 py-3 font-medium transition-colors ${item.pending > 0 ? "text-primary" : ""}`}>{item.rawModel}</td>
+              <td className="px-6 py-3"><Badge variant={item.pending > 0 ? "primary" : "neutral"} size="sm">{item.provider}</Badge></td>
+              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
+            </>
+          ),
+        };
+      }
+      case "account": {
+        const pendingMap = {};
+        if (stats?.pending?.byAccount) {
+          Object.entries(stats.byAccount || {}).forEach(([accountKey, data]) => {
+            const connPending = stats.pending.byAccount[data.connectionId];
+            if (connPending) {
+              const modelKey = data.provider ? `${data.rawModel} (${data.provider})` : data.rawModel;
+              pendingMap[accountKey] = connPending[modelKey] || 0;
+            }
+          });
+        }
+        return {
+          columns: ACCOUNT_COLUMNS,
+          groupedData: groupDataByKey(sortData(stats.byAccount, pendingMap, sortBy, sortOrder), "accountName"),
+          storageKey: "usage-stats:expanded-accounts",
+          emptyMessage: "No account-specific usage recorded yet.",
+          renderSummaryCells: (group) => (
+            <>
+              <td className="px-6 py-3 text-text-muted">—</td>
+              <td className="px-6 py-3 text-text-muted">—</td>
+              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
+            </>
+          ),
+          renderDetailCells: (item) => (
+            <>
+              <td className={`px-6 py-3 font-medium transition-colors ${item.pending > 0 ? "text-primary" : ""}`}>{item.accountName || `Account ${item.connectionId?.slice(0, 8)}...`}</td>
+              <td className={`px-6 py-3 font-medium transition-colors ${item.pending > 0 ? "text-primary" : ""}`}>{item.rawModel}</td>
+              <td className="px-6 py-3"><Badge variant={item.pending > 0 ? "primary" : "neutral"} size="sm">{item.provider}</Badge></td>
+              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
+            </>
+          ),
+        };
+      }
+      case "apiKey": {
+        return {
+          columns: API_KEY_COLUMNS,
+          groupedData: groupDataByKey(sortData(stats.byApiKey, {}, sortBy, sortOrder), "keyName"),
+          storageKey: "usage-stats:expanded-apikeys",
+          emptyMessage: "No API key usage recorded yet.",
+          renderSummaryCells: (group) => (
+            <>
+              <td className="px-6 py-3 text-text-muted">—</td>
+              <td className="px-6 py-3 text-text-muted">—</td>
+              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
+            </>
+          ),
+          renderDetailCells: (item) => (
+            <>
+              <td className="px-6 py-3 font-medium">{item.keyName}</td>
+              <td className="px-6 py-3">{item.rawModel}</td>
+              <td className="px-6 py-3"><Badge variant="neutral" size="sm">{item.provider}</Badge></td>
+              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
+            </>
+          ),
+        };
+      }
+      case "endpoint":
+      default: {
+        return {
+          columns: ENDPOINT_COLUMNS,
+          groupedData: groupDataByKey(sortData(stats.byEndpoint, {}, sortBy, sortOrder), "endpoint"),
+          storageKey: "usage-stats:expanded-endpoints",
+          emptyMessage: "No endpoint usage recorded yet.",
+          renderSummaryCells: (group) => (
+            <>
+              <td className="px-6 py-3 text-text-muted">—</td>
+              <td className="px-6 py-3 text-text-muted">—</td>
+              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
+            </>
+          ),
+          renderDetailCells: (item) => (
+            <>
+              <td className="px-6 py-3 font-medium font-mono text-sm">{item.endpoint}</td>
+              <td className="px-6 py-3">{item.rawModel}</td>
+              <td className="px-6 py-3"><Badge variant="neutral" size="sm">{item.provider}</Badge></td>
+              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
+              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
+            </>
+          ),
+        };
+      }
+    }
+  }, [stats, tableView, sortBy, sortOrder]);
+
+  if (!stats && !loading) return <div className="text-text-muted">Failed to load usage statistics.</div>;
+
+  const spinner = (
+    <div className="flex items-center justify-center py-12 text-text-muted">
+      <span className="material-symbols-outlined text-[32px] animate-spin">progress_activity</span>
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Period selector */}
+      <div className="flex items-center gap-2 self-end">
+        <div className="flex items-center gap-1 bg-bg-subtle rounded-lg p-1 border border-border">
+          {PERIODS.map((p) => (
+            <button
+              key={p.value}
+              onClick={() => setPeriod(p.value)}
+              disabled={fetching}
+              className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${period === p.value ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+        {fetching && (
+          <span className="material-symbols-outlined text-[16px] text-text-muted animate-spin">progress_activity</span>
+        )}
+      </div>
+
+      {/* Overview cards */}
+      {loading ? spinner : <OverviewCards stats={stats} />}
+
+      {/* Provider topology + Recent Requests */}
+      {loading ? spinner : (
+        <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-2 items-stretch">
+          <ProviderTopology
+            providers={providers}
+            activeRequests={stats.activeRequests || []}
+            lastProvider={stats.recentRequests?.[0]?.provider || ""}
+            errorProvider={stats.errorProvider || ""}
+          />
+          <RecentRequests requests={stats.recentRequests || []} />
+        </div>
+      )}
+
+      {/* Token / Cost chart - sync period */}
+      {loading ? spinner : <UsageChart period={period} />}
+
+      {/* Table with dropdown selector */}
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <select
+            value={tableView}
+            onChange={(e) => setTableView(e.target.value)}
+            className="px-3 py-1.5 rounded-lg border border-border bg-bg-subtle text-sm font-medium text-text focus:outline-none focus:ring-2 focus:ring-primary/50"
+          >
+            {TABLE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </div>
+        {loading ? spinner : activeTableConfig && (
+          <UsageTable
+            title=""
+            columns={activeTableConfig.columns}
+            groupedData={activeTableConfig.groupedData}
+            tableType={tableView}
+            sortBy={sortBy}
+            sortOrder={sortOrder}
+            onToggleSort={toggleSort}
+            storageKey={activeTableConfig.storageKey}
+            renderSummaryCells={activeTableConfig.renderSummaryCells}
+            renderDetailCells={activeTableConfig.renderDetailCells}
+            emptyMessage={activeTableConfig.emptyMessage}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/shared/components/index.js

@@ -0,0 +1,33 @@
+// Shared Components - Export all
+export { default as Button } from "./Button";
+export { default as Input } from "./Input";
+export { default as Select } from "./Select";
+export { default as Card } from "./Card";
+export { default as Modal, ConfirmModal } from "./Modal";
+export { default as Loading, Spinner, PageLoading, Skeleton, CardSkeleton } from "./Loading";
+export { default as Avatar } from "./Avatar";
+export { default as Badge } from "./Badge";
+export { default as Toggle } from "./Toggle";
+export { default as ThemeToggle } from "./ThemeToggle";
+export { ThemeProvider } from "./ThemeProvider";
+export { default as Sidebar } from "./Sidebar";
+export { default as Header } from "./Header";
+export { default as Footer } from "./Footer";
+export { default as OAuthModal } from "./OAuthModal";
+export { default as ModelSelectModal } from "./ModelSelectModal";
+export { default as ManualConfigModal } from "./ManualConfigModal";
+export { default as UsageStats } from "./UsageStats";
+export { default as LanguageSwitcher } from "./LanguageSwitcher";
+export { default as RequestLogger } from "./RequestLogger";
+export { default as KiroAuthModal } from "./KiroAuthModal";
+export { default as KiroOAuthWrapper } from "./KiroOAuthWrapper";
+export { default as KiroSocialOAuthModal } from "./KiroSocialOAuthModal";
+export { default as CursorAuthModal } from "./CursorAuthModal";
+export { default as IFlowCookieModal } from "./IFlowCookieModal";
+export { default as SegmentedControl } from "./SegmentedControl";
+export { default as Tooltip } from "./Tooltip";
+
+// Layouts
+export * from "./layouts";
+
+

package/src/shared/components/layouts/AuthLayout.js

@@ -0,0 +1,29 @@
+"use client";
+
+import PropTypes from "prop-types";
+import ThemeToggle from "../ThemeToggle";
+
+export default function AuthLayout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col relative bg-bg transition-colors duration-500 overflow-x-hidden selection:bg-primary/20 selection:text-primary">
+      {/* Background effects */}
+      <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 dark:bg-primary/5 rounded-full blur-[100px] pointer-events-none z-0" />
+      <div className="fixed bottom-0 right-0 w-[600px] h-[600px] bg-orange-200/20 dark:bg-orange-900/10 rounded-full blur-[120px] pointer-events-none z-0 translate-y-1/3 translate-x-1/3" />
+
+      {/* Theme toggle */}
+      <div className="absolute top-6 right-6 z-20">
+        <ThemeToggle variant="card" />
+      </div>
+
+      {/* Content */}
+      <main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 z-10 w-full h-full">
+        {children}
+      </main>
+    </div>
+  );
+}
+
+AuthLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+

package/src/shared/components/layouts/DashboardLayout.js

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import { useNotificationStore } from "@/store/notificationStore";
+import Sidebar from "../Sidebar";
+import Header from "../Header";
+
+function getToastStyle(type) {
+  if (type === "success") {
+    return {
+      wrapper: "border-green-500/30 bg-green-500/10 text-green-600 dark:text-green-400",
+      icon: "check_circle",
+    };
+  }
+  if (type === "error") {
+    return {
+      wrapper: "border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400",
+      icon: "error",
+    };
+  }
+  if (type === "warning") {
+    return {
+      wrapper: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400",
+      icon: "warning",
+    };
+  }
+  return {
+    wrapper: "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400",
+    icon: "info",
+  };
+}
+
+export default function DashboardLayout({ children }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const pathname = usePathname();
+  const notifications = useNotificationStore((state) => state.notifications);
+  const removeNotification = useNotificationStore((state) => state.removeNotification);
+
+  return (
+    <div className="flex h-screen w-full overflow-hidden bg-bg">
+      <div className="fixed top-4 right-4 z-[80] flex w-[min(92vw,380px)] flex-col gap-2">
+        {notifications.map((n) => {
+          const style = getToastStyle(n.type);
+          return (
+            <div
+              key={n.id}
+              className={`rounded-lg border px-3 py-2 shadow-lg backdrop-blur-sm ${style.wrapper}`}
+            >
+              <div className="flex items-start gap-2">
+                <span className="material-symbols-outlined text-[18px] leading-5">{style.icon}</span>
+                <div className="min-w-0 flex-1">
+                  {n.title ? <p className="text-xs font-semibold mb-0.5">{n.title}</p> : null}
+                  <p className="text-xs whitespace-pre-wrap break-words">{n.message}</p>
+                </div>
+                {n.dismissible ? (
+                  <button
+                    type="button"
+                    onClick={() => removeNotification(n.id)}
+                    className="text-current/70 hover:text-current"
+                    aria-label="Dismiss notification"
+                  >
+                    <span className="material-symbols-outlined text-[16px]">close</span>
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {/* Mobile sidebar overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar - Desktop */}
+      <div className="hidden lg:flex">
+        <Sidebar />
+      </div>
+
+      {/* Sidebar - Mobile */}
+      <div
+        className={`fixed inset-y-0 left-0 z-50 transform lg:hidden transition-transform duration-300 ease-in-out ${
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <Sidebar onClose={() => setSidebarOpen(false)} />
+      </div>
+
+      {/* Main content */}
+      <main className="flex flex-col flex-1 h-full min-w-0 relative transition-colors duration-300">
+        <Header key={pathname} onMenuClick={() => setSidebarOpen(true)} />
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-6 lg:p-10">
+          <div className="max-w-7xl mx-auto">{children}</div>
+        </div>
+      </main>
+    </div>
+  );
+}

package/src/shared/components/layouts/index.js

@@ -0,0 +1,4 @@
+// Layout Components - Export all
+export { default as DashboardLayout } from "./DashboardLayout";
+export { default as AuthLayout } from "./AuthLayout";
+