Initial commit

mocks/audit.ts

@@ -0,0 +1,324 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  FileText,
+  Upload,
+  Calculator,
+  CheckCircle,
+  Send,
+  Clock,
+  User,
+  AlertTriangle,
+  Settings,
+  Shield,
+} from "lucide-react";
+import { formatDate } from "@/lib/formatting";
+
+// Mock audit data - in real app this would come from API
+const mockAuditEvents = [
+  {
+    id: "audit-1",
+    type: "document_uploaded",
+    title: "Document uploaded",
+    description: "P60 Employment Certificate uploaded for John Smith",
+    clientId: "client-1",
+    clientName: "John Smith",
+    userId: "user-1",
+    userName: "Sarah Wilson",
+    userRole: "preparer",
+    timestamp: "2024-01-10T14:30:00Z",
+    metadata: {
+      fileName: "P60_2023-24.pdf",
+      fileSize: "245KB",
+      documentType: "P60",
+    },
+    severity: "info",
+  },
+  {
+    id: "audit-2",
+    type: "schedule_computed",
+    title: "Schedule computed",
+    description: "SA103 Self Employment schedule calculated for Sarah Johnson",
+    clientId: "client-2",
+    clientName: "Sarah Johnson",
+    userId: "user-2",
+    userName: "Mike Davis",
+    userRole: "reviewer",
+    timestamp: "2024-01-10T13:15:00Z",
+    metadata: {
+      scheduleType: "SA103",
+      profit: "£45,000",
+      taxLiability: "£8,500",
+    },
+    severity: "info",
+  },
+  {
+    id: "audit-3",
+    type: "coverage_check_failed",
+    title: "Coverage check failed",
+    description:
+      "Missing evidence identified for Michael Brown - 2 critical items required",
+    clientId: "client-3",
+    clientName: "Michael Brown",
+    userId: "system",
+    userName: "System",
+    userRole: "system",
+    timestamp: "2024-01-10T11:45:00Z",
+    metadata: {
+      missingItems: ["Bank statements", "Property rental agreement"],
+      coverageScore: "65%",
+    },
+    severity: "warning",
+  },
+  {
+    id: "audit-4",
+    type: "form_generated",
+    title: "Form generated",
+    description: "SA100 Main Return PDF created for Emma Davis",
+    clientId: "client-4",
+    clientName: "Emma Davis",
+    userId: "user-3",
+    userName: "Alex Thompson",
+    userRole: "preparer",
+    timestamp: "2024-01-10T10:20:00Z",
+    metadata: {
+      formType: "SA100",
+      pages: 8,
+      taxLiability: "£12,450",
+    },
+    severity: "info",
+  },
+  {
+    id: "audit-5",
+    type: "hmrc_submission",
+    title: "HMRC submission prepared",
+    description: "Tax return submitted to HMRC for David Wilson",
+    clientId: "client-5",
+    clientName: "David Wilson",
+    userId: "user-2",
+    userName: "Mike Davis",
+    userRole: "reviewer",
+    timestamp: "2024-01-10T09:30:00Z",
+    metadata: {
+      submissionId: "HMRC-2024-001234",
+      taxYear: "2023-24",
+      status: "submitted",
+    },
+    severity: "success",
+  },
+  {
+    id: "audit-6",
+    type: "user_login",
+    title: "User login",
+    description: "Sarah Wilson logged into the platform",
+    clientId: null,
+    clientName: null,
+    userId: "user-1",
+    userName: "Sarah Wilson",
+    userRole: "preparer",
+    timestamp: "2024-01-10T08:00:00Z",
+    metadata: {
+      ipAddress: "192.168.1.100",
+      userAgent: "Chrome 120.0.0.0",
+      location: "London, UK",
+    },
+    severity: "info",
+  },
+  {
+    id: "audit-7",
+    type: "policy_updated",
+    title: "Coverage policy updated",
+    description:
+      "Self employment evidence requirements updated by administrator",
+    clientId: null,
+    clientName: null,
+    userId: "admin-1",
+    userName: "Admin User",
+    userRole: "admin",
+    timestamp: "2024-01-09T16:45:00Z",
+    metadata: {
+      policyType: "self_employment",
+      changes: ["Added requirement for business bank statements"],
+    },
+    severity: "warning",
+  },
+];
+
+const eventIcons = {
+  document_uploaded: Upload,
+  schedule_computed: Calculator,
+  coverage_check_failed: AlertTriangle,
+  form_generated: FileText,
+  hmrc_submission: Send,
+  user_login: User,
+  policy_updated: Settings,
+  system_error: AlertTriangle,
+  default: Clock,
+};
+
+const severityColors = {
+  info: "bg-blue-100 text-blue-800 border-blue-200",
+  success: "bg-green-100 text-green-800 border-green-200",
+  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  error: "bg-red-100 text-red-800 border-red-200",
+};
+
+const roleColors = {
+  admin: "bg-red-100 text-red-800",
+  reviewer: "bg-blue-100 text-blue-800",
+  preparer: "bg-green-100 text-green-800",
+  system: "bg-gray-100 text-gray-800",
+};
+
+export function AuditTimeline(): JSX.Element {
+  return (
+    <div className="space-y-4">
+      {mockAuditEvents.map((event, index) => {
+        const Icon =
+          eventIcons[event.type as keyof typeof eventIcons] ||
+          eventIcons.default;
+        const isLast = index === mockAuditEvents.length - 1;
+
+        return (
+          <div key={event.id} className="relative">
+            {/* Timeline line */}
+            {!isLast && (
+              <div className="absolute left-6 top-12 w-0.5 h-full bg-border" />
+            )}
+
+            <Card className="ml-0">
+              <CardContent className="p-6">
+                <div className="flex items-start space-x-4">
+                  {/* Icon */}
+                  <div className="flex-shrink-0">
+                    <div className="h-12 w-12 rounded-full bg-background border-2 border-border flex items-center justify-center">
+                      <Icon className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between mb-2">
+                      <div className="space-y-1">
+                        <h3 className="text-lg font-semibold">{event.title}</h3>
+                        <p className="text-muted-foreground">
+                          {event.description}
+                        </p>
+                      </div>
+
+                      <div className="flex items-center space-x-2">
+                        <Badge
+                          variant="outline"
+                          className={
+                            severityColors[
+                              event.severity as keyof typeof severityColors
+                            ]
+                          }
+                        >
+                          {event.severity}
+                        </Badge>
+                        <span className="text-sm text-muted-foreground">
+                          {formatDate(event.timestamp, { relative: true })}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* User and client info */}
+                    <div className="flex items-center space-x-4 mb-3">
+                      <div className="flex items-center space-x-2">
+                        <Avatar className="h-6 w-6">
+                          <AvatarFallback className="text-xs">
+                            {event.userName === "System" ? (
+                              <Shield className="h-3 w-3" />
+                            ) : (
+                              event.userName
+                                .split(" ")
+                                .map((n) => n[0])
+                                .join("")
+                            )}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="text-sm font-medium">
+                          {event.userName}
+                        </span>
+                        <Badge
+                          variant="outline"
+                          className={`text-xs ${
+                            roleColors[
+                              event.userRole as keyof typeof roleColors
+                            ]
+                          }`}
+                        >
+                          {event.userRole}
+                        </Badge>
+                      </div>
+
+                      {event.clientName && (
+                        <>
+                          <span className="text-muted-foreground">•</span>
+                          <Link
+                            href={`/clients/${event.clientId}`}
+                            className="text-sm text-primary hover:underline"
+                          >
+                            {event.clientName}
+                          </Link>
+                        </>
+                      )}
+                    </div>
+
+                    {/* Metadata */}
+                    {event.metadata &&
+                      Object.keys(event.metadata).length > 0 && (
+                        <div className="bg-muted/50 rounded-lg p-3">
+                          <h4 className="text-sm font-medium mb-2">Details</h4>
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
+                            {Object.entries(event.metadata).map(
+                              ([key, value]) => (
+                                <div key={key} className="flex justify-between">
+                                  <span className="text-muted-foreground capitalize">
+                                    {key
+                                      .replace(/([A-Z])/g, " $1")
+                                      .toLowerCase()}
+                                    :
+                                  </span>
+                                  <span className="font-medium">
+                                    {Array.isArray(value)
+                                      ? value.join(", ")
+                                      : String(value)}
+                                  </span>
+                                </div>
+                              )
+                            )}
+                          </div>
+                        </div>
+                      )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        );
+      })}
+
+      {mockAuditEvents.length === 0 && (
+        <Card>
+          <CardContent className="p-12 text-center">
+            <Clock className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
+            <div className="text-muted-foreground">
+              <div className="text-lg font-medium mb-2">
+                No audit events found
+              </div>
+              <p className="text-sm">
+                Activity will appear here as work is completed
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}