Activity Timeline

import { ActivityTimelineList } from "@/components/micto/activity-timeline"
import { Badge } from "@/components/ui/badge"

const history = [
  {
    id: 1,
    title: "Purchase Request Submitted",
    description: "PR-2026-009 submitted for IT Equipment procurement.",
    timestamp: "Oct 24, 2026 · 09:15 AM",
    status: "completed" as const,
    actor: { name: "Nehry Dedoro", avatar: "/avatars/nehry.jpg", role: "Lead Architect" },
    metadata: [<Badge key="1">ICT Fund</Badge>],
    attachments: [{ label: "Specs.pdf", url: "#" }]
  },
  {
    id: 2,
    title: "Pending Budget Clearance",
    description: "Forwarded to Municipal Budget Office.",
    status: "in-progress" as const,
  }
]

export default function DocumentHistory() {
  return <ActivityTimelineList items={history} orientation="vertical" />
}

import { ActivityTimelineList } from "@/components/micto/activity-timeline"

const steps = [
  { id: 1, title: "Filing", description: "Submit Form 6", status: "completed" as const },
  { id: 2, title: "HRMO Review", description: "Leave credits check", status: "in-progress" as const },
  { id: 3, title: "Supervisor Approval", description: "Workload clearance", status: "pending" as const },
]

export default function LeaveStepper() {
  return <ActivityTimelineList items={steps} orientation="horizontal" />
}

import {
  ActivityTimeline,
  ActivityTimelineItem,
  ActivityTimelineTrack,
  ActivityTimelineConnector,
  ActivityTimelineDot,
  ActivityTimelineContent,
} from "@/components/micto/activity-timeline"
import { UserCheck, AlertTriangle } from "lucide-react"

export default function SystemAuditLog() {
  return (
    <ActivityTimeline orientation="vertical" className="gap-2">
      <ActivityTimelineItem status="completed">
        <ActivityTimelineTrack>
          <ActivityTimelineConnector />
          <ActivityTimelineDot className="border-blue-500 bg-blue-50 text-blue-600">
            <UserCheck className="size-4" />
          </ActivityTimelineDot>
        </ActivityTimelineTrack>
        <ActivityTimelineContent>
          <div className="flex justify-between items-center">
            <span className="text-xs font-bold">User Auth Success</span>
            <span className="text-[10px] text-muted-foreground">10:02:14 AM</span>
          </div>
          <p className="text-[11px] text-muted-foreground">IP: 192.168.1.45 via Biometrics Gateway</p>
        </ActivityTimelineContent>
      </ActivityTimelineItem>
    </ActivityTimeline>
  )
}