latest

frontend/src/components/desktop/ActivityTimeline.tsx

@@ -0,0 +1,37 @@
+import { Card } from './Card'
+
+export interface ActivityItem {
+  action: string
+  actor_name: string
+  created_at: string
+}
+
+interface ActivityTimelineProps {
+  items: ActivityItem[]
+}
+
+export function ActivityTimeline({ items }: ActivityTimelineProps) {
+  return (
+    <Card title="Recent activity">
+      {items.length === 0 ? (
+        <p className="text-sm text-gray-500 dark:text-gray-500">No activity yet.</p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {items.map((item, i) => (
+            <li key={i} className="flex items-start gap-3 text-sm">
+              <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500" />
+              <div>
+                <p className="text-gray-800 dark:text-gray-200">
+                  <span className="font-medium">{item.actor_name}</span> — {item.action.replace('.', ' ')}
+                </p>
+                <p className="text-xs text-gray-500 dark:text-gray-500">
+                  {new Date(item.created_at).toLocaleString()}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Card>
+  )
+}