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/eslint.config.js

@@ -8,7 +8,7 @@ import { defineConfig, globalIgnores } from 'eslint/config'
 const rawHtmlElements = ['table', 'select', 'hr']
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'src/components/blocks/**']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [
@@ -83,11 +83,8 @@ export default defineConfig([
   {
     files: [
       'src/components/reui/**/*.{ts,tsx}',
-      'src/components/data-grid-card.tsx',
-      'src/components/data-grid-types.ts',
-      'src/components/data-grid-cells.tsx',
-      'src/components/domains-filters-toolbar.tsx',
-      'src/components/list-filters-bar.tsx',
+      'src/components/reui-kit/**/*.{ts,tsx}',
+      'src/components/columns/**/*.{ts,tsx}',
     ],
     rules: {
       'react-refresh/only-export-components': 'off',
@@ -98,6 +95,7 @@ export default defineConfig([
       'no-restricted-syntax': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
       'prefer-const': 'off',
     },
   },

apps/web/src/components/reui-kit/detail-panel.tsx

@@ -49,7 +49,7 @@ function DetailPanelHeader({
         </div>
         {actions ? <div className="shrink-0">{actions}</div> : null}
       </FrameHeader>
-      {children ? <FramePanel className="space-y-4">{children}</FramePanel> : null}
+      {children ? <FramePanel className="flex flex-col gap-4">{children}</FramePanel> : null}
     </Frame>
   )
 }
@@ -68,7 +68,7 @@ function DetailPanelMetrics({ cards }: { cards: DetailMetricCard[] }) {
                 </span>
               </div>
             </FrameHeader>
-            <FramePanel className="space-y-2">
+            <FramePanel className="flex flex-col gap-2">
               <p className="text-muted-foreground text-xs leading-relaxed">
                 {card.description}
               </p>

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -51,7 +51,7 @@ function KpiCardItem({ card }: { card: OpsKpiCard }) {
           <h3 className="truncate text-sm leading-tight font-medium">{card.title}</h3>
         </div>
       </div>
-      <div className="mt-5 space-y-1.5">
+      <div className="mt-5 flex flex-col gap-1.5">
         <p className="text-muted-foreground text-sm leading-tight">
           {card.metricLabel}
         </p>

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -48,7 +48,7 @@ export function SettingsShell({
 
   return (
     <PageShell>
-      <div className="w-full max-w-4xl space-y-6">
+      <div className="flex w-full max-w-4xl flex-col gap-6">
         <header className="px-1">
           <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
           <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">

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),