chore(web): update ESLint configuration and improve component layouts

- Modified ESLint configuration to include additional global ignores for better linting control.
- Updated component layouts in the ReUI kit to use flexbox for improved spacing and alignment.
- Refactored the CertificatesPage to optimize chart data handling and state management.
- Enhanced DashboardPage with state management for current timestamp to streamline expiration checks.

Co-authored-by: Cursor <[email protected]>

apps/web/src/routes/_auth/certificates.tsx

@@ -62,10 +62,9 @@ function CertificatesPage() {
   const filterFields = useCertFilterFields()
   const columns = useCertificateColumns()
 
-  const chartData = summary?.map(([status, count]) => ({ status, count })) ?? []
-
-  const kpiStrip = useMemo(
-    () => (
+  const kpiStrip = useMemo(() => {
+    const chartData = summary?.map(([status, count]) => ({ status, count })) ?? []
+    return (
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {chartData.length === 0 ? (
           <Frame dense spacing="sm" className="sm:col-span-2 lg:col-span-4">
@@ -91,9 +90,8 @@ function CertificatesPage() {
           ))
         )}
       </div>
-    ),
-    [chartData],
-  )
+    )
+  }, [summary])
 
   const primaryAction = (
     <LoadingButton

apps/web/src/routes/_auth/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import {
   Bar,
   BarChart,
@@ -113,16 +113,17 @@ function DashboardPage() {
       .slice(0, 6)
   }, [groups, domains])
 
+  const [nowMs] = useState(() => Date.now())
+
   const expiringCerts = useMemo(() => {
-    const now = Date.now()
     const warnMs = 14 * 24 * 60 * 60 * 1000
     return (certs ?? [])
       .filter((c) => c.expires_at)
       .map((c) => ({ cert: c, ts: new Date(c.expires_at as string).getTime() }))
-      .filter((e) => !Number.isNaN(e.ts) && e.ts - now <= warnMs)
+      .filter((e) => !Number.isNaN(e.ts) && e.ts - nowMs <= warnMs)
       .sort((a, b) => a.ts - b.ts)
       .slice(0, 8)
-  }, [certs])
+  }, [certs, nowMs])
 
   const ungroupedDomains = useMemo(
     () => (domains ?? []).filter((d) => d.group_id == null).slice(0, 5),