Build the document list page

frontend/cmmty/components/empty-state.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+import { FileX } from "lucide-react";
+
+export default function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <div className="rounded-full bg-muted p-4">
+        <FileX className="h-8 w-8 text-muted-foreground" />
+      </div>
+      <h3 className="mt-4 text-lg font-semibold text-foreground">
+        No documents found
+      </h3>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Get started by uploading your first document.
+      </p>
+    </div>
+  );
+}

frontend/cmmty/components/pagination.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationProps) {
+  return (
+    <div className="flex items-center justify-between border-t border-border px-4 py-3 sm:px-6">
+      <div className="flex flex-1 justify-between sm:hidden">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className="relative inline-flex items-center rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Previous
+        </button>
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className="relative ml-3 inline-flex items-center rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Next
+        </button>
+      </div>
+      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <p className="text-sm text-muted-foreground">
+          Page <span className="font-medium">{currentPage}</span> of{" "}
+          <span className="font-medium">{totalPages}</span>
+        </p>
+        <nav
+          className="isolate inline-flex -space-x-px rounded-md shadow-sm"
+          aria-label="Pagination"
+        >
+          <button
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+            className="relative inline-flex items-center rounded-l-md px-2 py-2 text-foreground ring-1 ring-inset ring-border hover:bg-muted focus:z-20 focus:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <span className="sr-only">Previous</span>
+            <ChevronLeft className="h-5 w-5" aria-hidden="true" />
+          </button>
+          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+            <button
+              key={page}
+              onClick={() => onPageChange(page)}
+              className={`relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-border focus:z-20 focus:outline-offset-0 ${
+                page === currentPage
+                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                  : "text-foreground hover:bg-muted"
+              }`}
+            >
+              {page}
+            </button>
+          ))}
+          <button
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            className="relative inline-flex items-center rounded-r-md px-2 py-2 text-foreground ring-1 ring-inset ring-border hover:bg-muted focus:z-20 focus:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <span className="sr-only">Next</span>
+            <ChevronRight className="h-5 w-5" aria-hidden="true" />
+          </button>
+        </nav>
+      </div>
+    </div>
+  );
+}

frontend/cmmty/components/risk-score.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+
+interface RiskScoreProps {
+  score?: number;
+}
+
+export default function RiskScore({ score }: RiskScoreProps) {
+  if (score === undefined || score === null) {
+    return <span className="text-sm text-muted-foreground">—</span>;
+  }
+
+  let colorClass = "text-emerald-600 dark:text-emerald-400";
+  if (score >= 70) {
+    colorClass = "text-rose-600 dark:text-rose-400";
+  } else if (score >= 40) {
+    colorClass = "text-amber-600 dark:text-amber-400";
+  } else if (score >= 20) {
+    colorClass = "text-yellow-600 dark:text-yellow-400";
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="h-2 w-16 overflow-hidden rounded-full bg-muted">
+        <div
+          className={`h-full rounded-full ${
+            score >= 70
+              ? "bg-rose-500"
+              : score >= 40
+                ? "bg-amber-500"
+                : score >= 20
+                  ? "bg-yellow-500"
+                  : "bg-emerald-500"
+          }`}
+          style={{ width: `${Math.min(score, 100)}%` }}
+        />
+      </div>
+      <span className={`text-sm font-medium ${colorClass}`}>{score}</span>
+    </div>
+  );
+}

frontend/cmmty/components/status-badge.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+import { DocumentStatus } from "../types/document";
+
+interface StatusBadgeProps {
+  status: DocumentStatus;
+}
+
+const statusConfig: Record<
+  DocumentStatus,
+  { label: string; className: string }
+> = {
+  [DocumentStatus.PENDING]: {
+    label: "Pending",
+    className:
+      "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  },
+  [DocumentStatus.ANALYZING]: {
+    label: "Analyzing",
+    className:
+      "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+  },
+  [DocumentStatus.VERIFIED]: {
+    label: "Verified",
+    className:
+      "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+  },
+  [DocumentStatus.FLAGGED]: {
+    label: "Flagged",
+    className:
+      "bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300",
+  },
+  [DocumentStatus.REJECTED]: {
+    label: "Rejected",
+    className: "bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-300",
+  },
+};
+
+export default function StatusBadge({ status }: StatusBadgeProps) {
+  const config = statusConfig[status];
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${config.className}`}
+    >
+      {config.label}
+    </span>
+  );
+}

frontend/cmmty/lib/data.ts

@@ -0,0 +1,172 @@
+import { Document, DocumentStatus } from "../types/document";
+
+export const mockDocuments: Document[] = [
+  {
+    id: "1",
+    ownerId: "user-1",
+    title: "Land Deed - Plot 42A Nairobi",
+    filePath: "/uploads/deed_42a.pdf",
+    fileHash: "a1b2c3d4e5f6",
+    fileSize: 2457600,
+    mimeType: "application/pdf",
+    status: DocumentStatus.VERIFIED,
+    riskScore: 12,
+    riskFlags: [],
+    createdAt: "2026-04-10T08:30:00Z",
+    updatedAt: "2026-04-12T14:20:00Z",
+  },
+  {
+    id: "2",
+    ownerId: "user-1",
+    title: "Title Certificate - Mombasa Region",
+    filePath: "/uploads/title_mombasa.pdf",
+    fileHash: "b2c3d4e5f6g7",
+    fileSize: 1892000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.FLAGGED,
+    riskScore: 78,
+    riskFlags: ["duplicate_claim", "boundary_dispute"],
+    createdAt: "2026-04-08T11:15:00Z",
+    updatedAt: "2026-04-11T09:45:00Z",
+  },
+  {
+    id: "3",
+    ownerId: "user-1",
+    title: "Survey Plan - Kisumu Township",
+    filePath: "/uploads/survey_kisumu.pdf",
+    fileHash: "c3d4e5f6g7h8",
+    fileSize: 3200000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.PENDING,
+    riskScore: 0,
+    riskFlags: [],
+    createdAt: "2026-04-15T16:00:00Z",
+    updatedAt: "2026-04-15T16:00:00Z",
+  },
+  {
+    id: "4",
+    ownerId: "user-1",
+    title: "Lease Agreement - Plot 12B",
+    filePath: "/uploads/lease_12b.pdf",
+    fileHash: "d4e5f6g7h8i9",
+    fileSize: 1560000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.ANALYZING,
+    riskScore: 35,
+    riskFlags: ["encoding_issue"],
+    createdAt: "2026-04-14T10:30:00Z",
+    updatedAt: "2026-04-16T08:15:00Z",
+  },
+  {
+    id: "5",
+    ownerId: "user-1",
+    title: "Land Transfer Form - Eldoret",
+    filePath: "/uploads/transfer_eldoret.pdf",
+    fileHash: "e5f6g7h8i9j0",
+    fileSize: 2100000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.REJECTED,
+    riskScore: 92,
+    riskFlags: ["forged_signature", "invalid_notary"],
+    createdAt: "2026-04-05T09:00:00Z",
+    updatedAt: "2026-04-07T11:30:00Z",
+  },
+  {
+    id: "6",
+    ownerId: "user-1",
+    title: "Property Tax Receipt 2026",
+    filePath: "/uploads/tax_receipt_2026.pdf",
+    fileHash: "f6g7h8i9j0k1",
+    fileSize: 890000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.VERIFIED,
+    riskScore: 5,
+    riskFlags: [],
+    createdAt: "2026-04-01T07:45:00Z",
+    updatedAt: "2026-04-02T10:00:00Z",
+  },
+  {
+    id: "7",
+    ownerId: "user-1",
+    title: "Boundary Dispute Resolution",
+    filePath: "/uploads/boundary_resolution.pdf",
+    fileHash: "g7h8i9j0k1l2",
+    fileSize: 2750000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.FLAGGED,
+    riskScore: 65,
+    riskFlags: ["boundary_dispute"],
+    createdAt: "2026-04-12T13:20:00Z",
+    updatedAt: "2026-04-13T15:10:00Z",
+  },
+  {
+    id: "8",
+    ownerId: "user-1",
+    title: "Coastal Zone Land Permit",
+    filePath: "/uploads/coastal_permit.pdf",
+    fileHash: "h8i9j0k1l2m3",
+    fileSize: 1340000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.PENDING,
+    riskScore: 0,
+    riskFlags: [],
+    createdAt: "2026-04-18T08:00:00Z",
+    updatedAt: "2026-04-18T08:00:00Z",
+  },
+  {
+    id: "9",
+    ownerId: "user-1",
+    title: "Inheritance Declaration - Nakuru",
+    filePath: "/uploads/inheritance_nakuru.pdf",
+    fileHash: "i9j0k1l2m3n4",
+    fileSize: 1980000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.ANALYZING,
+    riskScore: 42,
+    riskFlags: ["missing_heir"],
+    createdAt: "2026-04-13T11:00:00Z",
+    updatedAt: "2026-04-16T14:30:00Z",
+  },
+  {
+    id: "10",
+    ownerId: "user-1",
+    title: "Mortgage Agreement - ABC Bank",
+    filePath: "/uploads/mortgage_abc.pdf",
+    fileHash: "j0k1l2m3n4o5",
+    fileSize: 2560000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.VERIFIED,
+    riskScore: 18,
+    riskFlags: [],
+    createdAt: "2026-03-28T09:30:00Z",
+    updatedAt: "2026-04-01T10:15:00Z",
+  },
+  {
+    id: "11",
+    ownerId: "user-1",
+    title: "Subdivision Approval - Kitale",
+    filePath: "/uploads/subdivision_kitale.pdf",
+    fileHash: "k1l2m3n4o5p6",
+    fileSize: 3100000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.PENDING,
+    riskScore: 0,
+    riskFlags: [],
+    createdAt: "2026-04-20T07:00:00Z",
+    updatedAt: "2026-04-20T07:00:00Z",
+  },
+  {
+    id: "12",
+    ownerId: "user-1",
+    title: "Environmental Impact Assessment",
+    filePath: "/uploads/eia_report.pdf",
+    fileHash: "l2m3n4o5p6q7",
+    fileSize: 4500000,
+    mimeType: "application/pdf",
+    status: DocumentStatus.FLAGGED,
+    riskScore: 58,
+    riskFlags: ["expired_permit"],
+    createdAt: "2026-04-09T12:00:00Z",
+    updatedAt: "2026-04-11T16:45:00Z",
+  },
+];

frontend/cmmty/types/document.ts

@@ -0,0 +1,22 @@
+export enum DocumentStatus {
+  PENDING = "pending",
+  ANALYZING = "analyzing",
+  VERIFIED = "verified",
+  FLAGGED = "flagged",
+  REJECTED = "rejected",
+}
+
+export interface Document {
+  id: string;
+  ownerId: string;
+  title: string;
+  filePath: string;
+  fileHash: string;
+  fileSize: number;
+  mimeType: string;
+  status: DocumentStatus;
+  riskScore?: number;
+  riskFlags?: string[];
+  createdAt: string;
+  updatedAt: string;
+}