@locusai/web 0.1.7 → 0.2.2

package/src/views/ActivityView.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { type Event as WorkspaceEvent } from "@locusai/shared";
+import { Activity, ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ActivityItem } from "@/components/dashboard/ActivityItem";
+import { PageLayout } from "@/components/PageLayout";
+import { Button, LoadingPage } from "@/components/ui";
+import { useAuthenticatedUser } from "@/hooks";
+import { locusClient } from "@/lib/api-client";
+
+const ITEMS_PER_PAGE = 20;
+
+export function ActivityView() {
+  const user = useAuthenticatedUser();
+  const [activity, setActivity] = useState<WorkspaceEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+
+  useEffect(() => {
+    async function loadActivity() {
+      if (!user?.workspaceId) return;
+
+      setLoading(true);
+      try {
+        // Assuming the API supports skip/limit or we filter client-side for now
+        // if the backend doesn't support pagination yet.
+        // For now, we'll fetch all and paginate client-side to satisfy the UI requirement.
+        const data = await locusClient.workspaces.getActivity(user.workspaceId);
+
+        const start = (page - 1) * ITEMS_PER_PAGE;
+        const paginatedData = data.slice(start, start + ITEMS_PER_PAGE);
+
+        setActivity(paginatedData);
+        setHasMore(data.length > start + ITEMS_PER_PAGE);
+      } catch (error) {
+        console.error("Failed to load activity:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadActivity();
+  }, [user?.workspaceId, page]);
+
+  if (loading && page === 1) {
+    return <LoadingPage />;
+  }
+
+  return (
+    <PageLayout
+      title="Activity Log"
+      description="A complete history of everything happening in your workspace."
+    >
+      <div className="max-w-4xl mx-auto space-y-6">
+        <div className="bg-card border border-border/50 rounded-2xl overflow-hidden shadow-sm">
+          <div className="p-6 border-b border-border/50 flex items-center justify-between">
+            <h3 className="font-semibold text-lg flex items-center gap-2">
+              <Activity size={20} className="text-primary" />
+              All Events
+            </h3>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={page === 1}
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+              >
+                <ChevronLeft size={16} />
+              </Button>
+              <span className="text-sm font-medium px-2">Page {page}</span>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!hasMore}
+                onClick={() => setPage((p) => p + 1)}
+              >
+                <ChevronRight size={16} />
+              </Button>
+            </div>
+          </div>
+
+          <div className="divide-y divide-border/30">
+            {activity.length > 0 ? (
+              activity.map((event) => (
+                <div key={event.id} className="p-1">
+                  <ActivityItem event={event} />
+                </div>
+              ))
+            ) : (
+              <div className="py-20 text-center text-muted-foreground italic">
+                No activity found.
+              </div>
+            )}
+          </div>
+
+          {(page > 1 || hasMore) && (
+            <div className="p-4 border-t border-border/50 flex items-center justify-center gap-4">
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={page === 1}
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                className="gap-2"
+              >
+                <ChevronLeft size={16} /> Previous
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={!hasMore}
+                onClick={() => setPage((p) => p + 1)}
+                className="gap-2"
+              >
+                Next <ChevronRight size={16} />
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/views/Dashboard.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { type Event as WorkspaceEvent } from "@locusai/shared";
+import { CheckCircle2, Clock, LayoutDashboard } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ActivityFeed } from "@/components/dashboard/ActivityFeed";
+import { QuickActions } from "@/components/dashboard/QuickActions";
+import { StatCard } from "@/components/dashboard/StatCard";
+import { PageLayout } from "@/components/PageLayout";
+import { LoadingPage } from "@/components/ui";
+import { useAuthenticatedUser } from "@/hooks";
+import { locusClient } from "@/lib/api-client";
+
+interface WorkspaceStats {
+  taskCounts: Record<string, number>;
+  memberCount: number;
+  workspaceName: string;
+}
+
+export function Dashboard() {
+  const user = useAuthenticatedUser();
+  const [stats, setStats] = useState<WorkspaceStats | null>(null);
+  const [activity, setActivity] = useState<WorkspaceEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadData() {
+      if (!user?.workspaceId) {
+        setLoading(false);
+        return;
+      }
+      try {
+        const [statsData, activityData] = await Promise.all([
+          locusClient.workspaces.getStats(user.workspaceId),
+          locusClient.workspaces.getActivity(user.workspaceId),
+        ]);
+        setStats(statsData);
+        setActivity(activityData);
+      } catch (error) {
+        console.error("Failed to load dashboard data:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [user?.workspaceId]);
+
+  if (loading) {
+    return <LoadingPage />;
+  }
+
+  const totalTasks = Object.values(stats?.taskCounts || {}).reduce(
+    (a, b) => a + b,
+    0
+  );
+  const doneTasks = stats?.taskCounts?.DONE || 0;
+  const inProgressTasks = stats?.taskCounts?.IN_PROGRESS || 0;
+  const verificationTasks = stats?.taskCounts?.VERIFICATION || 0;
+  const backlogTasks = stats?.taskCounts?.BACKLOG || 0;
+
+  const welcomeTitle = `Welcome back, ${user?.name.split(" ")[0]}!`;
+  const welcomeDesc = (
+    <>
+      Here's what's happening in{" "}
+      <span className="text-primary font-medium">
+        {stats?.workspaceName || "your workspace"}
+      </span>{" "}
+      today.
+    </>
+  );
+
+  return (
+    <PageLayout title={welcomeTitle} description={welcomeDesc}>
+      <div className="max-w-7xl mx-auto space-y-8 pt-4">
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <StatCard
+            title="Total Tasks"
+            value={totalTasks}
+            icon={LayoutDashboard}
+            trend={`${backlogTasks} in backlog`}
+            color="primary"
+          />
+          <StatCard
+            title="In Progress"
+            value={inProgressTasks}
+            icon={Clock}
+            trend={inProgressTasks > 5 ? "High workload" : "Manageable"}
+            color="warning"
+          />
+          <StatCard
+            title="Verification"
+            value={verificationTasks}
+            icon={CheckCircle2}
+            trend={
+              verificationTasks > 0
+                ? `${verificationTasks} needs review`
+                : "All clear"
+            }
+            color="purple"
+          />
+          <StatCard
+            title="Completed"
+            value={doneTasks}
+            icon={CheckCircle2}
+            trend={`${
+              totalTasks > 0 ? Math.round((doneTasks / totalTasks) * 100) : 0
+            }% completion rate`}
+            color="success"
+          />
+        </div>
+
+        {/* Feed & Quick Actions Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+          <div className="lg:col-span-8">
+            <ActivityFeed activity={activity} />
+          </div>
+
+          <div className="lg:col-span-4 space-y-6">
+            <QuickActions />
+          </div>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}