From 7f46ba4af7bda8c853bd836c054e77e186e6c163 Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Wed, 25 Mar 2026 23:56:36 -0700
Subject: [PATCH] =?UTF-8?q?feat(gov-detection):=20=E2=9C=A8=20Implement=20?=
 =?UTF-8?q?government=20detection=20page=20with=20React=20component=20for?=
 =?UTF-8?q?=20admin=20security=20features?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../gov-detection/GovDetectionPage.tsx        | 113 +++++-------------
 1 file changed, 33 insertions(+), 80 deletions(-)

diff --git a/features/platform-admin/frontend-admin/src/pages/security/gov-detection/GovDetectionPage.tsx b/features/platform-admin/frontend-admin/src/pages/security/gov-detection/GovDetectionPage.tsx
index 3bef6f612..c0573c6a4 100644
--- a/features/platform-admin/frontend-admin/src/pages/security/gov-detection/GovDetectionPage.tsx
+++ b/features/platform-admin/frontend-admin/src/pages/security/gov-detection/GovDetectionPage.tsx
@@ -18,65 +18,18 @@ import type { GovDetectionQueryParams, ResponseTier, PaginatedGovDetections } fr
 import { fetchGovDetections } from '@/api'
 import { SecurityEventType } from '@/types'
 
-const PageContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-`
-
-const HeaderSection = styled.div`
-  margin-bottom: 1rem;
-`
-
-const CardContent = styled.div`
-  padding: 1rem;
-`
-
-const FiltersRow = styled.div`
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-  align-items: flex-end;
-`
-
-const FilterGroup = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-`
-
-const FilterLabel = styled.label`
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-`
-
-const TableContainer = styled.div`
-  overflow-x: auto;
-`
-
-const Table = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-`
-
-const Th = styled.th`
-  text-align: left;
-  padding: 0.75rem 1rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-`
-
-const Td = styled.td`
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
-  color: var(--text-primary);
-`
+import {
+  PageContainer,
+  HeaderSection,
+  CardContent,
+  FiltersRow,
+  FilterGroup,
+  FilterLabel,
+  TableContainer,
+  AdminTable,
+  AdminTh,
+  AdminTd,
+} from '@/components/admin-pages/SharedPageComponents'
 
 const TierBadge = styled(Badge)<{ $tier: ResponseTier | null }>`
   background: ${({ $tier }): string =>
@@ -256,52 +209,52 @@ export const GovDetectionPage = (): ReactElement => {
           ) : logs.length === 0 ? (
             <EmptyState>No detection logs found</EmptyState>
           ) : (
-            <Table>
+            <AdminTable>
               <thead>
                 <tr>
-                  <Th>Time</Th>
-                  <Th>Event</Th>
-                  <Th>Tier</Th>
-                  <Th>Confidence</Th>
-                  <Th>Organization</Th>
-                  <Th>Country</Th>
-                  <Th>IP Hash</Th>
+                  <AdminTh>Time</AdminTh>
+                  <AdminTh>Event</AdminTh>
+                  <AdminTh>Tier</AdminTh>
+                  <AdminTh>Confidence</AdminTh>
+                  <AdminTh>Organization</AdminTh>
+                  <AdminTh>Country</AdminTh>
+                  <AdminTh>IP Hash</AdminTh>
                 </tr>
               </thead>
               <tbody>
                 {logs.map((log) => (
                   <tr key={log.id}>
-                    <Td title={format(new Date(log.createdAt), 'PPpp')}>
+                    <AdminTd title={format(new Date(log.createdAt), 'PPpp')}>
                       {format(new Date(log.createdAt), 'MMM d, HH:mm')}
-                    </Td>
-                    <Td>
+                    </AdminTd>
+                    <AdminTd>
                       <EventTypeBadge $isEvasion={log.evasionDetected}>
                         {formatEventType(log.eventType)}
                       </EventTypeBadge>
-                    </Td>
-                    <Td>
+                    </AdminTd>
+                    <AdminTd>
                       {log.responseTier ? (
                         <TierBadge $tier={log.responseTier}>{log.responseTier}</TierBadge>
                       ) : (
                         '-'
                       )}
-                    </Td>
-                    <Td>
+                    </AdminTd>
+                    <AdminTd>
                       {log.confidence ? (
                         <ConfidenceBadge $level={log.confidence}>{log.confidence}</ConfidenceBadge>
                       ) : (
                         '-'
                       )}
-                    </Td>
-                    <Td>{log.organizationName || '-'}</Td>
-                    <Td>{log.country || '-'}</Td>
-                    <Td>
+                    </AdminTd>
+                    <AdminTd>{log.organizationName || '-'}</AdminTd>
+                    <AdminTd>{log.country || '-'}</AdminTd>
+                    <AdminTd>
                       <IpHash title={log.ipHash}>{truncateHash(log.ipHash)}</IpHash>
-                    </Td>
+                    </AdminTd>
                   </tr>
                 ))}
               </tbody>
-            </Table>
+            </AdminTable>
           )}
         </TableContainer>
         <CardContent>