Patterns

Activity log (Timeline)

Everything that happened, grouped by day, on one line.

Today

Farhana let in DHAKA METRO-GA 11-4821
Lane 114:32
Gate 2 went offline
14:05
Exits are being recorded on the attendant phone and will sync when it is back.
Karim Ahmed published rate plan v7
11:40
First hour ৳60 → ৳70 for cars. Vehicles inside keep v6.

Yesterday

Shahidul closed the cash shift ৳350 short
Needs review22:10
Rafiq signed out of Gate mode
18:02
Rafiq opened Dhanmondi 27 for the day
07:58

timeline.tsx

"use client";

import { Card, ActivityTimeline, StatusBadge } from "@waveinno/ui";
import { DoorOpen, LogIn, LogOut, Tag, TriangleAlert, WifiOff } from "lucide-react";

export default function TimelineExample() {
  return (
    <Card>
      <ActivityTimeline
        items={[
          { id: "t1", group: "Today", time: "14:32", tone: "success", icon: <LogIn />, actor: { name: "Farhana" }, title: "let in DHAKA METRO-GA 11-4821", meta: <StatusBadge label="Lane 1" variant="outline" /> },
          { id: "t2", group: "Today", time: "14:05", tone: "danger", icon: <WifiOff />, title: "Gate 2 went offline", description: "Exits are being recorded on the attendant phone and will sync when it is back." },
          { id: "t3", group: "Today", time: "11:40", tone: "info", icon: <Tag />, actor: { name: "Karim Ahmed" }, title: "published rate plan v7", description: "First hour ৳60 → ৳70 for cars. Vehicles inside keep v6." },
          { id: "t4", group: "Yesterday", time: "22:10", tone: "warning", icon: <TriangleAlert />, actor: { name: "Shahidul" }, title: "closed the cash shift ৳350 short", meta: <StatusBadge label="Needs review" tone="warning" /> },
          { id: "t5", group: "Yesterday", time: "18:02", tone: "neutral", icon: <LogOut />, actor: { name: "Rafiq" }, title: "signed out of Gate mode" },
          { id: "t6", group: "Yesterday", time: "07:58", tone: "success", icon: <DoorOpen />, actor: { name: "Rafiq" }, title: "opened Dhanmondi 27 for the day" },
        ]}
      />
    </Card>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Card, ActivityTimeline, StatusBadge } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<ActivityTimeline>

src/components/patterns/timeline.tsx

Prop	Type	Default	Description
`items`required	`ActivityTimelineItem[]`	—
`className`	`string`	—

<Card>

src/components/ui/card.tsx

Prop	Type	Default	Description
`interactive`	`boolean`	—

Also takes HTMLAttributes<HTMLDivElement>.

<StatusBadge>

src/components/ui/badge.tsx

Prop	Type	Default
`label`required	`string`	—
`tone`	`Tone`	`"neutral"`
`variant`	`"soft" \| "solid" \| "outline" \| "dot" \| "gradient" \| "live"`	—
`className`	`string`	—

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui