@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/admin/audit-log-table.tsx

@@ -0,0 +1,383 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { format } from 'date-fns';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Eye,
+  Clock,
+  User,
+  Database,
+  ChevronLeft,
+  ChevronRight,
+  ShieldAlert,
+  Info,
+  Calendar,
+  Globe,
+  Hash,
+} from 'lucide-react';
+
+export interface AuditLogItem {
+  id: string;
+  timestamp: string | Date;
+  actorUserId: string | null;
+  actorUser?: {
+    id: string;
+    fullName: string;
+    email: string;
+  } | null;
+  entityType: string;
+  entityId: string;
+  actionType: string;
+  changeReason?: string | null;
+  previousState?: any;
+  newState?: any;
+  ipAddress?: string | null;
+  sessionId?: string | null;
+}
+
+export interface AuditLogTableProps {
+  logs: AuditLogItem[];
+  pagination: {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+function getActionBadgeStyle(action: string) {
+  switch (action) {
+    case 'CREATE':
+      return 'bg-emerald-100 text-emerald-800 border-emerald-300 dark:bg-emerald-950 dark:text-emerald-300 dark:border-emerald-800';
+    case 'UPDATE':
+      return 'bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800';
+    case 'DEACTIVATE':
+    case 'PURGE':
+      return 'bg-red-100 text-red-800 border-red-300 dark:bg-red-950 dark:text-red-300 dark:border-red-800';
+    case 'LOGIN':
+      return 'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950 dark:text-teal-300 dark:border-teal-800';
+    case 'LOGOUT':
+      return 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800';
+    case 'FAILED_LOGIN':
+      return 'bg-rose-100 text-rose-800 border-rose-300 dark:bg-rose-950 dark:text-rose-300 dark:border-rose-800';
+    case 'ARCHIVE':
+      return 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800';
+    case 'TRANSFER':
+      return 'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950 dark:text-indigo-300 dark:border-indigo-800';
+    case 'SIGN':
+    case 'POLICY_CHANGE':
+      return 'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950 dark:text-cyan-300 dark:border-cyan-800';
+    default:
+      return 'bg-slate-100 text-slate-800 border-slate-300 dark:bg-slate-800 dark:text-slate-200';
+  }
+}
+
+function parseJsonState(val: any): string | null {
+  if (val === null || val === undefined) return null;
+  if (typeof val === 'string') {
+    try {
+      const parsed = JSON.parse(val);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return val;
+    }
+  }
+  return JSON.stringify(val, null, 2);
+}
+
+/**
+ * Audit log data table with color-coded badges, row inspector dialog,
+ * and responsive pagination controls.
+ */
+export function AuditLogTable({ logs, pagination }: AuditLogTableProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [selectedLog, setSelectedLog] = useState<AuditLogItem | null>(null);
+
+  const { page, pageSize, total, totalPages } = pagination;
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > totalPages) return;
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('page', newPage.toString());
+    router.push(`?${params.toString()}`);
+  };
+
+  const startEntry = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const endEntry = Math.min(page * pageSize, total);
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border bg-card overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className="w-[180px]">Timestamp</TableHead>
+              <TableHead className="w-[180px]">Actor</TableHead>
+              <TableHead className="w-[130px]">Action</TableHead>
+              <TableHead className="w-[140px]">Entity Type</TableHead>
+              <TableHead className="w-[160px]">Entity ID</TableHead>
+              <TableHead>Reason</TableHead>
+              <TableHead className="w-[80px] text-right">Details</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {logs.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="h-40 text-center">
+                  <div className="flex flex-col items-center justify-center text-muted-foreground space-y-2">
+                    <Database className="h-8 w-8 text-muted-foreground/50" />
+                    <p className="text-sm font-medium">No audit logs found.</p>
+                    <p className="text-xs">Try adjusting your filters or search term.</p>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ) : (
+              logs.map((log) => {
+                let formattedTime = 'Invalid Date';
+                try {
+                  formattedTime = format(new Date(log.timestamp), 'MMM dd, yyyy HH:mm:ss');
+                } catch {
+                  formattedTime = String(log.timestamp);
+                }
+
+                const actorName = log.actorUser?.fullName || 'System';
+                const actorEmail = log.actorUser?.email || '';
+
+                return (
+                  <TableRow
+                    key={log.id}
+                    onClick={() => setSelectedLog(log)}
+                    className="cursor-pointer hover:bg-muted/60 transition-colors"
+                  >
+                    <TableCell className="font-mono text-xs whitespace-nowrap text-muted-foreground">
+                      <div className="flex items-center gap-1.5">
+                        <Clock className="h-3.5 w-3.5 text-muted-foreground/70" />
+                        <span>{formattedTime}</span>
+                      </div>
+                    </TableCell>
+
+                    <TableCell>
+                      <div className="flex items-center gap-1.5 min-w-0">
+                        <User className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                        <div className="truncate text-xs">
+                          <p className="font-medium text-foreground truncate">{actorName}</p>
+                          {actorEmail && (
+                            <p className="text-[11px] text-muted-foreground truncate">{actorEmail}</p>
+                          )}
+                        </div>
+                      </div>
+                    </TableCell>
+
+                    <TableCell>
+                      <Badge
+                        variant="outline"
+                        className={`text-xs font-semibold px-2 py-0.5 border ${getActionBadgeStyle(
+                          log.actionType
+                        )}`}
+                      >
+                        {log.actionType}
+                      </Badge>
+                    </TableCell>
+
+                    <TableCell className="text-xs font-medium text-foreground">
+                      <Badge variant="secondary" className="font-mono text-[11px]">
+                        {log.entityType}
+                      </Badge>
+                    </TableCell>
+
+                    <TableCell className="text-xs font-mono text-muted-foreground truncate max-w-[150px]" title={log.entityId}>
+                      {log.entityId}
+                    </TableCell>
+
+                    <TableCell className="text-xs text-muted-foreground max-w-[200px] truncate" title={log.changeReason || ''}>
+                      {log.changeReason || <span className="text-muted-foreground/50 italic">None</span>}
+                    </TableCell>
+
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedLog(log);
+                        }}
+                        title="View details"
+                      >
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination Controls */}
+      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 px-1 text-sm text-muted-foreground">
+        <div>
+          Showing <span className="font-medium text-foreground">{startEntry}</span> to{' '}
+          <span className="font-medium text-foreground">{endEntry}</span> of{' '}
+          <span className="font-medium text-foreground">{total}</span> entries
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handlePageChange(page - 1)}
+            disabled={page <= 1}
+            className="h-8 px-2.5"
+          >
+            <ChevronLeft className="h-4 w-4 mr-1" />
+            Previous
+          </Button>
+
+          <span className="text-xs font-medium px-2">
+            Page {page} of {totalPages}
+          </span>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handlePageChange(page + 1)}
+            disabled={page >= totalPages}
+            className="h-8 px-2.5"
+          >
+            Next
+            <ChevronRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Audit Log Detail Dialog */}
+      <Dialog open={Boolean(selectedLog)} onOpenChange={(open) => !open && setSelectedLog(null)}>
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
+          {selectedLog && (
+            <>
+              <DialogHeader>
+                <div className="flex items-center justify-between gap-2 mr-6">
+                  <DialogTitle className="flex items-center gap-2 text-lg">
+                    <Info className="h-5 w-5 text-primary" />
+                    Audit Log Entry #{selectedLog.id}
+                  </DialogTitle>
+                  <Badge
+                    variant="outline"
+                    className={`text-xs font-semibold px-2 py-0.5 border ${getActionBadgeStyle(
+                      selectedLog.actionType
+                    )}`}
+                  >
+                    {selectedLog.actionType}
+                  </Badge>
+                </div>
+              </DialogHeader>
+
+              {/* Metadata grid */}
+              <div className="grid grid-cols-2 gap-3 p-3 bg-muted/40 rounded-lg text-xs mt-2">
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <div>
+                    <span className="text-muted-foreground">Timestamp: </span>
+                    <span className="font-mono font-medium">
+                      {new Date(selectedLog.timestamp).toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <User className="h-4 w-4 text-muted-foreground" />
+                  <div>
+                    <span className="text-muted-foreground">Actor: </span>
+                    <span className="font-medium">
+                      {selectedLog.actorUser?.fullName || selectedLog.actorUserId || 'System'}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Hash className="h-4 w-4 text-muted-foreground" />
+                  <div>
+                    <span className="text-muted-foreground">Entity: </span>
+                    <span className="font-mono font-medium">
+                      {selectedLog.entityType} ({selectedLog.entityId})
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Globe className="h-4 w-4 text-muted-foreground" />
+                  <div>
+                    <span className="text-muted-foreground">IP Address: </span>
+                    <span className="font-mono">{selectedLog.ipAddress || 'N/A'}</span>
+                  </div>
+                </div>
+              </div>
+
+              {selectedLog.changeReason && (
+                <div className="space-y-1">
+                  <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    Reason / Context
+                  </h4>
+                  <p className="text-sm bg-muted/30 p-2.5 rounded border">
+                    {selectedLog.changeReason}
+                  </p>
+                </div>
+              )}
+
+              {/* State Diffs / JSON viewer */}
+              <div className="space-y-4">
+                {selectedLog.previousState ? (
+                  <div>
+                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1.5">
+                      Previous State
+                    </h4>
+                    <pre className="bg-slate-950 text-slate-100 p-3.5 rounded-md text-xs font-mono overflow-x-auto max-h-60 border border-slate-800">
+                      {parseJsonState(selectedLog.previousState)}
+                    </pre>
+                  </div>
+                ) : null}
+
+                {selectedLog.newState ? (
+                  <div>
+                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1.5">
+                      New State / Details
+                    </h4>
+                    <pre className="bg-slate-950 text-slate-100 p-3.5 rounded-md text-xs font-mono overflow-x-auto max-h-60 border border-slate-800">
+                      {parseJsonState(selectedLog.newState)}
+                    </pre>
+                  </div>
+                ) : null}
+
+                {!selectedLog.previousState && !selectedLog.newState && (
+                  <p className="text-xs text-muted-foreground italic py-2 text-center">
+                    No state payload recorded for this event.
+                  </p>
+                )}
+              </div>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/components/admin/data-management/danger-zone.tsx

@@ -0,0 +1,301 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { AlertTriangle, Trash2, RotateCcw, ShieldAlert, Lock, Loader2, CheckCircle2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { purgeData } from '@/lib/actions/data-management';
+
+export function DangerZone() {
+  const router = useRouter();
+  const [selectedScope, setSelectedScope] = useState<'test_transactions' | 'factory_reset'>('test_transactions');
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
+  const [password, setPassword] = useState('');
+  const [reason, setReason] = useState('');
+  const [purging, setPurging] = useState(false);
+
+  const expectedPhrase = selectedScope === 'test_transactions' ? 'CLEAR TEST DATA' : 'RESET ALL DATA';
+
+  const normalizePhrase = (s: string) => s.trim().toUpperCase().replace(/[_-\s]+/g, ' ');
+  const isPhraseMatch = selectedScope === 'test_transactions'
+    ? normalizePhrase(confirmText) === 'CLEAR TEST DATA' || normalizePhrase(confirmText) === 'PURGE TEST DATA'
+    : normalizePhrase(confirmText) === 'RESET ALL DATA';
+
+  const handleOpenDialog = (scope: 'test_transactions' | 'factory_reset') => {
+    setSelectedScope(scope);
+    setConfirmText('');
+    setPassword('');
+    setReason('');
+    setDialogOpen(true);
+  };
+
+  const handleConfirmPurge = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!isPhraseMatch) {
+      toast.error(`Confirmation phrase must match "${expectedPhrase}"`);
+      return;
+    }
+
+    if (!password) {
+      toast.error('Administrator password is required to re-authenticate');
+      return;
+    }
+
+    setPurging(true);
+
+    try {
+      const res = await purgeData({
+        scope: selectedScope,
+        confirmText: expectedPhrase,
+        password,
+        reason: reason.trim() || undefined,
+      });
+
+      if (res.success) {
+        toast.success(res.message || 'Operation executed successfully');
+        setDialogOpen(false);
+        router.refresh();
+      } else {
+        toast.error(res.error || 'Failed to execute data reset');
+      }
+    } catch {
+      toast.error('An unexpected error occurred');
+    } finally {
+      setPurging(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card className="border-destructive/40 bg-destructive/5">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center shrink-0">
+              <AlertTriangle className="h-6 w-6" />
+            </div>
+            <div>
+              <CardTitle className="text-xl text-destructive flex items-center gap-2">
+                Danger Zone & Data Reset
+              </CardTitle>
+              <CardDescription>
+                High-friction administrative tools for clearing test records or resetting the environment prior to clinical launch.
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          {/* Action 1: Clear Test Data */}
+          <div className="p-5 border rounded-lg bg-background flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div className="space-y-1">
+              <h5 className="font-semibold text-base flex items-center gap-2">
+                <Trash2 className="h-4 w-4 text-destructive" />
+                Clear Test & Transactional Records
+              </h5>
+              <p className="text-xs text-muted-foreground max-w-xl">
+                Deletes all service tickets, sample work orders, and test maintenance logs generated during user training.
+                <strong className="text-foreground block mt-1">
+                  Preserves: Medical equipment inventory, hospital departments, users, and system roles.
+                </strong>
+              </p>
+            </div>
+            <Button
+              variant="destructive"
+              onClick={() => handleOpenDialog('test_transactions')}
+              className="shrink-0 gap-2"
+            >
+              <Trash2 className="h-4 w-4" />
+              Clear Test Data
+            </Button>
+          </div>
+
+          {/* Action 2: Full Factory Reset */}
+          <div className="p-5 border rounded-lg bg-background flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div className="space-y-1">
+              <h5 className="font-semibold text-base flex items-center gap-2 text-destructive">
+                <RotateCcw className="h-4 w-4" />
+                Full System Factory Reset
+              </h5>
+              <p className="text-xs text-muted-foreground max-w-xl">
+                Restores the BEMMS application back to its fresh post-installation state. Clears devices, tickets,
+                and custom data while re-establishing default system administrative access.
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => handleOpenDialog('factory_reset')}
+              className="border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground shrink-0 gap-2"
+            >
+              <RotateCcw className="h-4 w-4" />
+              Factory Reset
+            </Button>
+          </div>
+
+          {/* Section 16 Regulatory Notice */}
+          <div className="p-4 border rounded-lg bg-muted/60 flex items-start gap-3">
+            <ShieldAlert className="h-5 w-5 text-muted-foreground shrink-0 mt-0.5" />
+            <div className="text-xs text-muted-foreground space-y-1">
+              <p className="font-semibold text-foreground">
+                FDA 21 CFR Part 11 & BEMMS Section 16 Regulatory Safeguard:
+              </p>
+              <p>
+                In clinical hospital deployments, signed medical equipment maintenance histories are permanent legal records.
+                All data purge actions require administrator re-authentication and are permanently recorded in the immutable audit log.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Confirmation & Re-auth Modal */}
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <form onSubmit={handleConfirmPurge}>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2 text-destructive">
+                <AlertTriangle className="h-5 w-5" />
+                {selectedScope === 'test_transactions'
+                  ? 'Confirm Clear Test Data'
+                  : 'Confirm Full Factory Reset'}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                This operation is irreversible. Please follow the two-factor safety confirmation steps below.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 py-4">
+              {/* Step 1: Confirmation Phrase */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="confirmPhrase" className="text-xs font-semibold">
+                    1. Type confirmation phrase:
+                  </Label>
+                  <button
+                    type="button"
+                    onClick={() => setConfirmText(expectedPhrase)}
+                    className="text-[11px] text-primary hover:underline cursor-pointer font-medium"
+                  >
+                    Auto-fill
+                  </button>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setConfirmText(expectedPhrase)}
+                    className="cursor-pointer inline-flex items-center gap-1 font-mono text-xs font-bold px-2 py-0.5 rounded bg-destructive/15 text-destructive border border-destructive/30 hover:bg-destructive/25 transition-colors"
+                    title="Click to auto-fill"
+                  >
+                    {expectedPhrase}
+                  </button>
+                  <span className="text-[11px] text-muted-foreground">(click to fill or type)</span>
+                </div>
+                <Input
+                  id="confirmPhrase"
+                  value={confirmText}
+                  onChange={(e) => setConfirmText(e.target.value)}
+                  placeholder={expectedPhrase}
+                  className={`font-mono text-xs transition-colors ${
+                    isPhraseMatch
+                      ? 'border-emerald-500 ring-1 ring-emerald-500 bg-emerald-500/5'
+                      : confirmText.length > 0
+                      ? 'border-amber-500 ring-1 ring-amber-500/30'
+                      : ''
+                  }`}
+                  autoComplete="off"
+                />
+                {isPhraseMatch ? (
+                  <p className="text-[11px] text-emerald-600 dark:text-emerald-400 font-medium flex items-center gap-1">
+                    <CheckCircle2 className="h-3.5 w-3.5" />
+                    Confirmation phrase matched
+                  </p>
+                ) : confirmText.length > 0 ? (
+                  <p className="text-[11px] text-amber-600 dark:text-amber-400">
+                    Type &quot;{expectedPhrase}&quot; (spaces or underscores, case-insensitive)
+                  </p>
+                ) : null}
+              </div>
+
+              {/* Step 2: Password Re-Authentication */}
+              <div className="space-y-2">
+                <Label htmlFor="adminPassword" className="text-xs font-semibold flex items-center gap-1.5">
+                  <Lock className="h-3.5 w-3.5 text-muted-foreground" />
+                  2. Enter Administrator Password:
+                </Label>
+                <Input
+                  id="adminPassword"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Your current account password"
+                  autoComplete="current-password"
+                />
+              </div>
+
+              {/* Step 3: Justification Note */}
+              <div className="space-y-2">
+                <Label htmlFor="purgeReason" className="text-xs font-semibold">
+                  3. Audit Justification Reason:
+                </Label>
+                <Input
+                  id="purgeReason"
+                  value={reason}
+                  onChange={(e) => setReason(e.target.value)}
+                  placeholder="e.g., Pre-go-live test data cleanup"
+                />
+              </div>
+            </div>
+
+            <DialogFooter className="flex gap-2 sm:justify-end">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDialogOpen(false)}
+                disabled={purging}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="destructive"
+                disabled={purging || !isPhraseMatch || !password}
+                className="gap-2"
+              >
+                {purging ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {selectedScope === 'test_transactions' ? 'Clearing Test Data...' : 'Resetting System...'}
+                  </>
+                ) : selectedScope === 'test_transactions' ? (
+                  <>
+                    <Trash2 className="h-4 w-4" />
+                    Clear Test Data
+                  </>
+                ) : (
+                  <>
+                    <RotateCcw className="h-4 w-4" />
+                    Execute Factory Reset
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+