Initial commit

mocks/actvity.ts

@@ -0,0 +1,200 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  FileText,
+  Upload,
+  Calculator,
+  CheckCircle,
+  Send,
+  Clock,
+} from "lucide-react";
+import { formatDate } from "@/lib/formatting";
+
+// Mock data - in real app this would come from API
+const mockActivity = [
+  {
+    id: "1",
+    type: "document_uploaded",
+    title: "P60 uploaded for John Smith",
+    description: "Employment certificate for 2023-24",
+    clientId: "client-1",
+    clientName: "John Smith",
+    userId: "user-1",
+    userName: "Sarah Wilson",
+    timestamp: "2024-01-10T14:30:00Z",
+    status: "completed",
+  },
+  {
+    id: "2",
+    type: "schedule_computed",
+    title: "SA103 calculated for Sarah Johnson",
+    description: "Self-employment schedule completed",
+    clientId: "client-2",
+    clientName: "Sarah Johnson",
+    userId: "user-2",
+    userName: "Mike Davis",
+    timestamp: "2024-01-10T13:15:00Z",
+    status: "completed",
+  },
+  {
+    id: "3",
+    type: "coverage_checked",
+    title: "Coverage check completed",
+    description: "2 missing items identified for Michael Brown",
+    clientId: "client-3",
+    clientName: "Michael Brown",
+    userId: "user-1",
+    userName: "Sarah Wilson",
+    timestamp: "2024-01-10T11:45:00Z",
+    status: "attention_required",
+  },
+  {
+    id: "4",
+    type: "form_generated",
+    title: "SA100 form generated",
+    description: "Main return PDF created for Emma Davis",
+    clientId: "client-4",
+    clientName: "Emma Davis",
+    userId: "user-3",
+    userName: "Alex Thompson",
+    timestamp: "2024-01-10T10:20:00Z",
+    status: "completed",
+  },
+  {
+    id: "5",
+    type: "submission_prepared",
+    title: "HMRC submission ready",
+    description: "Return prepared for David Wilson",
+    clientId: "client-5",
+    clientName: "David Wilson",
+    userId: "user-2",
+    userName: "Mike Davis",
+    timestamp: "2024-01-10T09:30:00Z",
+    status: "pending_review",
+  },
+];
+
+const activityIcons = {
+  document_uploaded: Upload,
+  schedule_computed: Calculator,
+  coverage_checked: CheckCircle,
+  form_generated: FileText,
+  submission_prepared: Send,
+  default: Clock,
+};
+
+const statusColors = {
+  completed: "bg-green-100 text-green-800",
+  attention_required: "bg-yellow-100 text-yellow-800",
+  pending_review: "bg-blue-100 text-blue-800",
+  failed: "bg-red-100 text-red-800",
+};
+
+export function RecentActivity(): JSX.Element {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Recent Activity</CardTitle>
+        <Badge variant="outline">Last 24 hours</Badge>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {mockActivity.map((activity) => {
+            const Icon =
+              activityIcons[activity.type as keyof typeof activityIcons] ||
+              activityIcons.default;
+
+            return (
+              <div
+                key={activity.id}
+                className="flex items-start space-x-4 p-3 border rounded-lg hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex-shrink-0">
+                  <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                    <Icon className="h-4 w-4 text-primary" />
+                  </div>
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between mb-1">
+                    <h4 className="text-sm font-medium truncate">
+                      {activity.title}
+                    </h4>
+                    <Badge
+                      variant="outline"
+                      className={
+                        statusColors[
+                          activity.status as keyof typeof statusColors
+                        ]
+                      }
+                    >
+                      {activity.status.replace("_", " ")}
+                    </Badge>
+                  </div>
+
+                  <p className="text-sm text-muted-foreground mb-2">
+                    {activity.description}
+                  </p>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <Avatar className="h-5 w-5">
+                        <AvatarFallback className="text-xs">
+                          {activity.userName
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-xs text-muted-foreground">
+                        {activity.userName}
+                      </span>
+                    </div>
+
+                    <span className="text-xs text-muted-foreground">
+                      {formatDate(activity.timestamp, { relative: true })}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex-shrink-0">
+                  <Link
+                    href={`/clients/${activity.clientId}`}
+                    className="text-xs text-primary hover:underline"
+                  >
+                    View Client
+                  </Link>
+                </div>
+              </div>
+            );
+          })}
+
+          {mockActivity.length === 0 && (
+            <div className="text-center py-8 text-muted-foreground">
+              <Clock className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <p>No recent activity</p>
+              <p className="text-sm">
+                Activity will appear here as work is completed
+              </p>
+            </div>
+          )}
+        </div>
+
+        {mockActivity.length > 0 && (
+          <div className="mt-4 pt-4 border-t">
+            <Link
+              href="/audit"
+              className="text-sm text-primary hover:underline"
+            >
+              View full audit trail →
+            </Link>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}