Deploy ZippMart admin dashboard (Docker Space)

apps/admin-web/app/admin/dashboard/page.tsx

@@ -2,6 +2,8 @@
 
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AdminNav, type AdminSection } from "../../components/AdminNav";
+import { OverviewSection } from "../../components/admin/OverviewSection";
 import { BarcodeCameraScanner } from "../../components/BarcodeCameraScanner";
 import { OrderReceiptModal } from "../../components/OrderReceiptModal";
 import { StockAdjustModal } from "../../components/StockAdjustModal";
@@ -138,6 +140,7 @@ export default function AdminDashboardPage() {
   const [authed, setAuthed] = useState(false);
   const [stockModalProduct, setStockModalProduct] = useState<Pick<AdminProduct, "id" | "name" | "barcode" | "inStock"> | null>(null);
   const [stockModalBusy, setStockModalBusy] = useState(false);
+  const [activeSection, setActiveSection] = useState<AdminSection>("overview");
 
   const formProfit = useMemo(() => {
     const sell = Number(sellingPrice);
@@ -297,6 +300,8 @@ export default function AdminDashboardPage() {
     if (resp.ok) setAuditEntries(await resp.json());
   }, [router]);
 
+  const isManager = adminRole === "manager";
+
   useEffect(() => {
     if (!authed) return;
     void loadProducts();
@@ -305,13 +310,21 @@ export default function AdminDashboardPage() {
     void loadOrders();
   }, [authed, loadProducts, loadMetrics, loadDiscounts, loadOrders]);
 
+  useEffect(() => {
+    if (!authed || activeSection !== "audit" || !isManager) return;
+    if (auditEntries.length === 0) void loadAudit();
+  }, [activeSection, authed, isManager, auditEntries.length, loadAudit]);
+
+  function onSectionChange(section: AdminSection) {
+    setActiveSection(section);
+    if (section === "audit" && isManager) void loadAudit();
+  }
+
   function logout() {
     clearAdminToken();
     router.replace("/admin");
   }
 
-  const isManager = adminRole === "manager";
-
   async function voidOrder(orderId: string) {
     if (!confirm("Void this unpaid order? It will disappear from open totals.")) return;
     const resp = await fetch(`${apiBase}/v1/admin/orders/${encodeURIComponent(orderId)}/void`, {
@@ -604,7 +617,7 @@ export default function AdminDashboardPage() {
           <div>
             <p className="adminHeader__eyebrow">ZippMart HQ</p>
             <h1 className="adminHeader__title">Operations dashboard</h1>
-            <p className="adminHeader__sub">Catalogue economics, promotions, and store KPIs.</p>
+            <p className="adminHeader__sub">Inventory, orders, promotions, and store analytics in one place.</p>
           </div>
           <div className="adminHeader__actions">
             <select
@@ -626,7 +639,14 @@ export default function AdminDashboardPage() {
                 <button type="button" className="adminBtn adminBtn--ghost" onClick={() => void downloadOrdersCsv()}>
                   Orders CSV
                 </button>
-                <button type="button" className="adminBtn adminBtn--ghost" onClick={() => void loadAudit()}>
+                <button
+                  type="button"
+                  className="adminBtn adminBtn--ghost"
+                  onClick={() => {
+                    onSectionChange("audit");
+                    void loadAudit();
+                  }}
+                >
                   Audit
                 </button>
               </>
@@ -649,61 +669,13 @@ export default function AdminDashboardPage() {
           </div>
         </header>
 
-        {metrics ? (
-          <section className="metricsGrid" aria-label="Store KPIs">
-            <div className="metricCard">
-              <p className="metricCard__label">Paid orders</p>
-              <p className="metricCard__value">{metrics.paidOrderCount}</p>
-              <p className="metricCard__hint">All time (this server)</p>
-            </div>
-            <div className="metricCard metricCard--accent">
-              <p className="metricCard__label">Net revenue</p>
-              <p className="metricCard__value">{money(metrics.totalRevenue)}</p>
-              <p className="metricCard__hint">Completed payments</p>
-            </div>
-            <div className="metricCard">
-              <p className="metricCard__label">Open orders</p>
-              <p className="metricCard__value">{metrics.openOrderCount}</p>
-              <p className="metricCard__hint">{money(metrics.pendingOrderValue)} at counter / pending</p>
-            </div>
-            <div className="metricCard">
-              <p className="metricCard__label">Avg paid ticket</p>
-              <p className="metricCard__value">{money(metrics.averagePaidOrderValue)}</p>
-              <p className="metricCard__hint">Per settled order</p>
-            </div>
-            <div className="metricCard">
-              <p className="metricCard__label">SKU count</p>
-              <p className="metricCard__value">{metrics.productCount}</p>
-              <p className="metricCard__hint">{metrics.lowStockSkuCount} low stock (&lt; 15 units)</p>
-            </div>
-            <div className="metricCard">
-              <p className="metricCard__label">Inventory @ cost</p>
-              <p className="metricCard__value">{money(metrics.inventoryValueAtCost)}</p>
-              <p className="metricCard__hint">Stock × unit cost</p>
-            </div>
-            <div className="metricCard">
-              <p className="metricCard__label">Inventory @ list</p>
-              <p className="metricCard__value">{money(metrics.inventoryValueAtList)}</p>
-              <p className="metricCard__hint">Stock × list sell</p>
-            </div>
-            <div className="metricCard">
-              <p className="metricCard__label">Active promos</p>
-              <p className="metricCard__value">{metrics.activeDiscountCount}</p>
-              <p className="metricCard__hint">Discount rules live on shop</p>
-            </div>
-          </section>
-        ) : (
-          <p className="muted">Loading metrics…</p>
-        )}
+        <AdminNav active={activeSection} isManager={isManager} onChange={onSectionChange} />
 
-        {metrics && metrics.lowStockSkuCount > 0 ? (
-          <div className="alertBanner" role="status">
-            <strong>{metrics.lowStockSkuCount}</strong> SKU{metrics.lowStockSkuCount === 1 ? "" : "s"} below 15 units —
-            use <strong>Low stock only</strong> under inventory to focus the table.
-          </div>
+        {activeSection === "overview" ? (
+          <OverviewSection metrics={metrics} products={products} orders={orders} money={money} />
         ) : null}
 
-        {orders.length > 0 ? (
+        {activeSection === "orders" && orders.length > 0 ? (
           <section className="panel adminPanel adminPanel--orders" aria-label="Recent orders">
             <h2 className="adminPanel__title">Recent orders</h2>
             <p className="adminPanel__lede">
@@ -794,40 +766,54 @@ export default function AdminDashboardPage() {
               </table>
             </div>
           </section>
+        ) : activeSection === "orders" ? (
+          <p className="muted adminEmptyHint">No orders yet for this store filter.</p>
         ) : null}
 
-        {isManager && auditEntries.length > 0 ? (
-          <section className="panel adminPanel" aria-label="Audit log">
-            <h2 className="adminPanel__title">Audit log</h2>
-            <p className="adminPanel__lede">Last security and inventory events (newest first).</p>
-            <div className="tableWrap">
-              <table className="adminTable adminTable--compact">
-                <thead>
-                  <tr>
-                    <th>When</th>
-                    <th>Actor</th>
-                    <th>Role</th>
-                    <th>Action</th>
-                    <th>Detail</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {auditEntries.map((a) => (
-                    <tr key={a.id}>
-                      <td className="muted">{new Date(a.at).toLocaleString()}</td>
-                      <td>{a.actor}</td>
-                      <td>{a.role}</td>
-                      <td className="mono">{a.action}</td>
-                      <td className="muted">{a.detail}</td>
+        {activeSection === "audit" && isManager ? (
+          auditEntries.length > 0 ? (
+            <section className="panel adminPanel" aria-label="Audit log">
+              <h2 className="adminPanel__title">Audit log</h2>
+              <p className="adminPanel__lede">Last security and inventory events (newest first).</p>
+              <div className="tableWrap">
+                <table className="adminTable adminTable--compact">
+                  <thead>
+                    <tr>
+                      <th>When</th>
+                      <th>Actor</th>
+                      <th>Role</th>
+                      <th>Action</th>
+                      <th>Detail</th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </section>
+                  </thead>
+                  <tbody>
+                    {auditEntries.map((a) => (
+                      <tr key={a.id}>
+                        <td className="muted">{new Date(a.at).toLocaleString()}</td>
+                        <td>{a.actor}</td>
+                        <td>{a.role}</td>
+                        <td className="mono">{a.action}</td>
+                        <td className="muted">{a.detail}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </section>
+          ) : (
+            <p className="muted adminEmptyHint">No audit events yet. Actions like stock changes and voids appear here.</p>
+          )
         ) : null}
 
-        {products.length === 0 && !loading ? (
+        {activeSection === "inventory" ? (
+          <>
+            {metrics && metrics.lowStockSkuCount > 0 ? (
+              <div className="alertBanner" role="status">
+                <strong>{metrics.lowStockSkuCount}</strong> SKU{metrics.lowStockSkuCount === 1 ? "" : "s"} below 15 units —
+                use <strong>Low stock only</strong> in the table below.
+              </div>
+            ) : null}
+            {products.length === 0 && !loading ? (
           <div className="alertBanner" role="status">
             Your catalogue is empty. Use <strong>Add product</strong> on the left to create your first SKU — customers will see it on the shop once saved.
           </div>
@@ -1101,8 +1087,13 @@ export default function AdminDashboardPage() {
               </table>
             </div>
           </section>
+          </div>
+        </div>
+          </>
+        ) : null}
 
-            <section className="panel adminPanel adminPanel--promo">
+        {activeSection === "promotions" ? (
+          <section className="panel adminPanel adminPanel--promo">
               <h2 className="adminPanel__title">Discounts</h2>
               <p className="adminPanel__lede">Percentage off list price for the customer shop. Max 90%. Removes instantly when deleted.</p>
               <div className="promoRow">
@@ -1145,9 +1136,8 @@ export default function AdminDashboardPage() {
                   </div>
                 ))}
               </div>
-            </section>
-          </div>
-        </div>
+          </section>
+        ) : null}
 
         {message ? <div className="adminToast">{message}</div> : null}
 

apps/admin-web/app/components/AdminNav.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+export type AdminSection = "overview" | "inventory" | "orders" | "promotions" | "audit";
+
+const ITEMS: {
+  id: AdminSection;
+  label: string;
+  hint: string;
+  managerOnly?: boolean;
+}[] = [
+  { id: "overview", label: "Overview", hint: "KPIs & analysis" },
+  { id: "inventory", label: "Inventory", hint: "Catalogue & stock" },
+  { id: "orders", label: "Orders", hint: "Checkouts & receipts" },
+  { id: "promotions", label: "Promotions", hint: "Discount rules" },
+  { id: "audit", label: "Audit log", hint: "Manager only", managerOnly: true }
+];
+
+type Props = {
+  active: AdminSection;
+  isManager: boolean;
+  onChange: (section: AdminSection) => void;
+};
+
+export function AdminNav({ active, isManager, onChange }: Props) {
+  const visible = ITEMS.filter((item) => !item.managerOnly || isManager);
+
+  return (
+    <nav className="adminNav" aria-label="Dashboard sections">
+      {visible.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          className={`adminNav__item${active === item.id ? " adminNav__item--active" : ""}`}
+          onClick={() => onChange(item.id)}
+          aria-current={active === item.id ? "page" : undefined}
+        >
+          <span className="adminNav__label">{item.label}</span>
+          <span className="adminNav__hint">{item.hint}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}

apps/admin-web/app/components/admin/OverviewSection.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { useMemo } from "react";
+
+type Metrics = {
+  orderCount: number;
+  paidOrderCount: number;
+  openOrderCount: number;
+  totalRevenue: number;
+  pendingOrderValue: number;
+  averagePaidOrderValue: number;
+  productCount: number;
+  lowStockSkuCount: number;
+  inventoryValueAtCost: number;
+  inventoryValueAtList: number;
+  activeDiscountCount: number;
+};
+
+type Product = {
+  id: string;
+  name: string;
+  category: string;
+  inStock: number;
+  demandScore: number;
+  unitPrice: number;
+  costPrice: number;
+  profitPerUnitAtSale: number;
+};
+
+type OrderRow = {
+  orderId: string;
+  createdAt: string;
+  grandTotal: number;
+  paid: boolean;
+  voided: boolean;
+  refunded: boolean;
+  paymentMode: string;
+};
+
+type Props = {
+  metrics: Metrics | null;
+  products: Product[];
+  orders: OrderRow[];
+  money: (n: number) => string;
+};
+
+function pct(part: number, total: number) {
+  if (total <= 0) return 0;
+  return Math.round((part / total) * 100);
+}
+
+export function OverviewSection({ metrics, products, orders, money }: Props) {
+  const stockHealth = useMemo(() => {
+    let out = 0;
+    let low = 0;
+    let ok = 0;
+    for (const p of products) {
+      if (p.inStock <= 0) out += 1;
+      else if (p.inStock < 15) low += 1;
+      else ok += 1;
+    }
+    return { out, low, ok, total: products.length };
+  }, [products]);
+
+  const topDemand = useMemo(
+    () => [...products].sort((a, b) => b.demandScore - a.demandScore).slice(0, 5),
+    [products]
+  );
+
+  const categoryRows = useMemo(() => {
+    const map = new Map<string, { count: number; stock: number; listValue: number }>();
+    for (const p of products) {
+      const cur = map.get(p.category) ?? { count: 0, stock: 0, listValue: 0 };
+      cur.count += 1;
+      cur.stock += p.inStock;
+      cur.listValue += p.inStock * p.unitPrice;
+      map.set(p.category, cur);
+    }
+    return [...map.entries()]
+      .map(([category, v]) => ({ category, ...v }))
+      .sort((a, b) => b.listValue - a.listValue);
+  }, [products]);
+
+  const orderInsights = useMemo(() => {
+    const paid = orders.filter((o) => o.paid && !o.voided && !o.refunded);
+    const counter = paid.filter((o) => o.paymentMode === "COUNTER").length;
+    const online = paid.filter((o) => o.paymentMode === "ONLINE").length;
+    const last24h = orders.filter((o) => Date.now() - new Date(o.createdAt).getTime() < 86_400_000).length;
+    return { paid: paid.length, counter, online, last24h, sample: orders.length };
+  }, [orders]);
+
+  const marginAtSale = useMemo(
+    () => products.reduce((sum, p) => sum + Math.max(0, p.inStock) * p.profitPerUnitAtSale, 0),
+    [products]
+  );
+
+  if (!metrics) {
+    return <p className="muted">Loading analytics…</p>;
+  }
+
+  const revenueTotal = metrics.totalRevenue + metrics.pendingOrderValue;
+  const paidShare = pct(metrics.totalRevenue, revenueTotal);
+
+  return (
+    <>
+      <section className="metricsGrid" aria-label="Store KPIs">
+        <div className="metricCard">
+          <p className="metricCard__label">Paid orders</p>
+          <p className="metricCard__value">{metrics.paidOrderCount}</p>
+          <p className="metricCard__hint">All time (filtered store)</p>
+        </div>
+        <div className="metricCard metricCard--accent">
+          <p className="metricCard__label">Net revenue</p>
+          <p className="metricCard__value">{money(metrics.totalRevenue)}</p>
+          <p className="metricCard__hint">Completed payments</p>
+        </div>
+        <div className="metricCard">
+          <p className="metricCard__label">Open orders</p>
+          <p className="metricCard__value">{metrics.openOrderCount}</p>
+          <p className="metricCard__hint">{money(metrics.pendingOrderValue)} pending</p>
+        </div>
+        <div className="metricCard">
+          <p className="metricCard__label">Avg paid ticket</p>
+          <p className="metricCard__value">{money(metrics.averagePaidOrderValue)}</p>
+          <p className="metricCard__hint">Per settled order</p>
+        </div>
+        <div className="metricCard">
+          <p className="metricCard__label">SKU count</p>
+          <p className="metricCard__value">{metrics.productCount}</p>
+          <p className="metricCard__hint">{metrics.lowStockSkuCount} low stock (&lt; 15)</p>
+        </div>
+        <div className="metricCard">
+          <p className="metricCard__label">Inventory @ cost</p>
+          <p className="metricCard__value">{money(metrics.inventoryValueAtCost)}</p>
+          <p className="metricCard__hint">On-hand × unit cost</p>
+        </div>
+        <div className="metricCard">
+          <p className="metricCard__label">Inventory @ list</p>
+          <p className="metricCard__value">{money(metrics.inventoryValueAtList)}</p>
+          <p className="metricCard__hint">On-hand × list price</p>
+        </div>
+        <div className="metricCard">
+          <p className="metricCard__label">Active promos</p>
+          <p className="metricCard__value">{metrics.activeDiscountCount}</p>
+          <p className="metricCard__hint">Live discount rules</p>
+        </div>
+      </section>
+
+      {metrics.lowStockSkuCount > 0 ? (
+        <div className="alertBanner" role="status">
+          <strong>{metrics.lowStockSkuCount}</strong> SKU{metrics.lowStockSkuCount === 1 ? "" : "s"} below 15 units —
+          open <strong>Inventory</strong> and use low-stock filter to replenish.
+        </div>
+      ) : null}
+
+      <div className="analysisGrid">
+        <section className="panel adminPanel analysisCard">
+          <h2 className="adminPanel__title">Revenue mix</h2>
+          <p className="adminPanel__lede">Settled vs still-open order value in the current filter.</p>
+          <div className="analysisBar" aria-hidden>
+            <span className="analysisBar__paid" style={{ width: `${paidShare}%` }} />
+          </div>
+          <div className="analysisLegend">
+            <span>
+              <i className="analysisDot analysisDot--paid" /> Paid {money(metrics.totalRevenue)} ({paidShare}%)
+            </span>
+            <span>
+              <i className="analysisDot analysisDot--pending" /> Pending {money(metrics.pendingOrderValue)} (
+              {100 - paidShare}%)
+            </span>
+          </div>
+          <p className="analysisFoot">
+            Est. margin on current stock (at shelf promo prices): <strong>{money(marginAtSale)}</strong>
+          </p>
+        </section>
+
+        <section className="panel adminPanel analysisCard">
+          <h2 className="adminPanel__title">Stock health</h2>
+          <p className="adminPanel__lede">{stockHealth.total} SKUs in catalogue.</p>
+          <ul className="analysisList">
+            <li>
+              <span>Healthy (15+ units)</span>
+              <strong>{stockHealth.ok}</strong>
+            </li>
+            <li>
+              <span>Low stock</span>
+              <strong className="textWarn">{stockHealth.low}</strong>
+            </li>
+            <li>
+              <span>Out of stock</span>
+              <strong className="textDanger">{stockHealth.out}</strong>
+            </li>
+          </ul>
+        </section>
+
+        <section className="panel adminPanel analysisCard">
+          <h2 className="adminPanel__title">Orders snapshot</h2>
+          <p className="adminPanel__lede">From the latest {orderInsights.sample} orders loaded.</p>
+          <ul className="analysisList">
+            <li>
+              <span>Paid (in sample)</span>
+              <strong>{orderInsights.paid}</strong>
+            </li>
+            <li>
+              <span>Last 24 hours</span>
+              <strong>{orderInsights.last24h}</strong>
+            </li>
+            <li>
+              <span>Counter / online paid</span>
+              <strong>
+                {orderInsights.counter} / {orderInsights.online}
+              </strong>
+            </li>
+          </ul>
+        </section>
+
+        <section className="panel adminPanel analysisCard analysisCard--wide">
+          <h2 className="adminPanel__title">Top demand SKUs</h2>
+          <p className="adminPanel__lede">Higher demand score surfaces first on the customer shop.</p>
+          {topDemand.length === 0 ? (
+            <p className="emptyHint">No products yet.</p>
+          ) : (
+            <div className="tableWrap">
+              <table className="adminTable adminTable--compact">
+                <thead>
+                  <tr>
+                    <th>Product</th>
+                    <th>Category</th>
+                    <th>Demand</th>
+                    <th>Stock</th>
+                    <th>List</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {topDemand.map((p) => (
+                    <tr key={p.id}>
+                      <td>{p.name}</td>
+                      <td className="muted">{p.category}</td>
+                      <td>{p.demandScore}</td>
+                      <td>{p.inStock}</td>
+                      <td>{money(p.unitPrice)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+
+        <section className="panel adminPanel analysisCard analysisCard--wide">
+          <h2 className="adminPanel__title">Category breakdown</h2>
+          <p className="adminPanel__lede">SKU count and list-value on hand by aisle.</p>
+          {categoryRows.length === 0 ? (
+            <p className="emptyHint">No categories yet.</p>
+          ) : (
+            <div className="tableWrap">
+              <table className="adminTable adminTable--compact">
+                <thead>
+                  <tr>
+                    <th>Category</th>
+                    <th>SKUs</th>
+                    <th>Units on hand</th>
+                    <th>List value</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {categoryRows.map((row) => (
+                    <tr key={row.category}>
+                      <td>{row.category}</td>
+                      <td>{row.count}</td>
+                      <td>{row.stock}</td>
+                      <td>{money(row.listValue)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+      </div>
+    </>
+  );
+}
+

apps/admin-web/app/globals.css

@@ -480,6 +480,149 @@ button.secondary {
   font-size: 12px;
 }
 
+.adminNav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 24px;
+}
+
+.adminNav__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  min-width: 120px;
+  padding: 12px 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--olive-dark);
+  cursor: pointer;
+  text-align: left;
+  box-shadow: var(--shadow);
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.adminNav__item:hover {
+  border-color: rgba(69, 78, 56, 0.35);
+}
+
+.adminNav__item--active {
+  border-color: var(--accent);
+  background: linear-gradient(160deg, #fffdfb, var(--surface));
+}
+
+.adminNav__label {
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.adminNav__hint {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.adminEmptyHint {
+  margin: 0 0 24px;
+  padding: 20px;
+  border: 1px dashed var(--line);
+  border-radius: var(--radius);
+  text-align: center;
+}
+
+.analysisGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  margin-bottom: 28px;
+}
+
+@media (max-width: 1100px) {
+  .analysisGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.analysisCard--wide {
+  grid-column: 1 / -1;
+}
+
+.analysisBar {
+  height: 12px;
+  border-radius: 999px;
+  background: var(--line);
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+
+.analysisBar__paid {
+  display: block;
+  height: 100%;
+  min-width: 4px;
+  background: linear-gradient(90deg, var(--olive), var(--accent));
+  border-radius: 999px;
+}
+
+.analysisLegend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px 20px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.analysisDot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.analysisDot--paid {
+  background: var(--accent);
+}
+
+.analysisDot--pending {
+  background: var(--line);
+}
+
+.analysisFoot {
+  margin: 14px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.analysisList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.analysisList li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+  font-size: 14px;
+}
+
+.analysisList li:last-child {
+  border-bottom: none;
+}
+
+.textWarn {
+  color: #b45309;
+}
+
+.textDanger {
+  color: var(--danger);
+}
+
 .metricsGrid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));