@locusai/web 0.1.7 → 0.2.2

package/src/components/common/ErrorState.tsx

@@ -0,0 +1,124 @@
+/**
+ * Error State Component
+ *
+ * Unified error display with recovery options.
+ * Use to display errors in a consistent, user-friendly way.
+ */
+
+"use client";
+
+import { AlertTriangle, RotateCcw } from "lucide-react";
+import { Button } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+/**
+ * Error state component props
+ *
+ * @property variant - Display variant (page, section, or inline)
+ * @property title - Error title text
+ * @property message - Error description
+ * @property onRetry - Callback for retry button
+ */
+interface ErrorStateProps {
+  /** Display variant */
+  variant?: "page" | "section" | "inline";
+  /** Error title */
+  title?: string;
+  /** Error description message */
+  message?: string;
+  /** Callback when user clicks retry */
+  onRetry?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Error state component
+ *
+ * Displays error messages with optional retry functionality.
+ * Three variants for different contexts.
+ *
+ * @example
+ * // Page-level error
+ * <ErrorState
+ *   title="Failed to load data"
+ *   message="Please try again"
+ *   onRetry={handleRetry}
+ * />
+ *
+ * @example
+ * // Inline error (e.g., in a form)
+ * <ErrorState
+ *   variant="inline"
+ *   message="Invalid email address"
+ * />
+ *
+ * @example
+ * // Section error (e.g., in a card)
+ * <ErrorState
+ *   variant="section"
+ *   title="Failed to load"
+ *   onRetry={refetch}
+ * />
+ */
+export function ErrorState({
+  variant = "page",
+  title = "Something went wrong",
+  message = "An error occurred. Please try again.",
+  onRetry,
+  className,
+}: ErrorStateProps) {
+  const variantClasses = {
+    page: "flex flex-col items-center justify-center min-h-[400px] w-full gap-4 py-12",
+    section:
+      "flex flex-col items-center justify-center py-12 w-full gap-3 px-4",
+    inline:
+      "flex items-center gap-2 p-3 bg-destructive/10 rounded-lg border border-destructive/20",
+  };
+
+  const iconSize = {
+    page: 48,
+    section: 32,
+    inline: 16,
+  } as const;
+
+  return (
+    <div
+      className={cn(variantClasses[variant], className)}
+      role="alert"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <div className="flex flex-col items-center gap-2">
+        <AlertTriangle
+          size={iconSize[variant]}
+          className="text-destructive/70"
+          aria-hidden="true"
+        />
+        {variant !== "inline" && (
+          <>
+            <h3 className="text-lg font-semibold text-destructive">{title}</h3>
+            <p className="text-sm text-muted-foreground text-center max-w-sm">
+              {message}
+            </p>
+          </>
+        )}
+        {variant === "inline" && (
+          <p className="text-sm text-destructive font-medium">{message}</p>
+        )}
+      </div>
+      {onRetry && (
+        <Button
+          variant="outline"
+          size={variant === "inline" ? "sm" : "md"}
+          onClick={onRetry}
+          className="gap-2"
+          aria-label="Retry the failed action"
+        >
+          <RotateCcw size={16} aria-hidden="true" />
+          Try Again
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/common/LoadingState.tsx

@@ -0,0 +1,83 @@
+/**
+ * Loading State Component
+ *
+ * Unified loading state display with consistent sizing.
+ * Use for data fetching, form submission, and async operations.
+ */
+
+"use client";
+
+import { Spinner } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+/**
+ * Loading state component props
+ *
+ * @property variant - Display variant (page, section, or inline)
+ * @property message - Optional loading message
+ */
+interface LoadingStateProps {
+  /** Display variant */
+  variant?: "page" | "section" | "inline";
+  /** Optional loading message */
+  message?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Loading state component
+ *
+ * Displays loading indicator with optional message.
+ * Three variants for different contexts.
+ *
+ * @example
+ * // Page-level loading
+ * <LoadingState
+ *   variant="page"
+ *   message="Loading data..."
+ * />
+ *
+ * @example
+ * // Inline loading (e.g., in a button)
+ * <LoadingState
+ *   variant="inline"
+ * />
+ *
+ * @example
+ * // Section loading (e.g., in a card)
+ * <LoadingState
+ *   variant="section"
+ *   message="Fetching results..."
+ * />
+ */
+export function LoadingState({
+  variant = "page",
+  message,
+  className,
+}: LoadingStateProps) {
+  const variantClasses = {
+    page: "flex flex-col items-center justify-center min-h-[400px] w-full gap-4",
+    section: "flex flex-col items-center justify-center py-12 w-full gap-3",
+    inline: "flex items-center gap-2",
+  };
+
+  const spinnerSize = {
+    page: "lg" as const,
+    section: "md" as const,
+    inline: "sm" as const,
+  };
+
+  return (
+    <output
+      className={cn(variantClasses[variant], className)}
+      aria-live="polite"
+      aria-label={message || "Loading"}
+    >
+      <Spinner size={spinnerSize[variant]} />
+      {message && (
+        <p className="text-muted-foreground text-sm font-medium">{message}</p>
+      )}
+    </output>
+  );
+}

package/src/components/common/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Common Components
+ *
+ * Reusable components for standardized UI patterns across the application.
+ *
+ * ## Error State
+ * Use `ErrorState` to display error messages with optional retry functionality.
+ * Supports three variants: page, section, and inline.
+ *
+ * ```tsx
+ * <ErrorState
+ *   title="Failed to load"
+ *   message="Please try again"
+ *   onRetry={handleRetry}
+ * />
+ * ```
+ *
+ * ## Loading State
+ * Use `LoadingState` to display loading indicators while data is being fetched.
+ * Supports three variants: page, section, and inline.
+ *
+ * ```tsx
+ * <LoadingState
+ *   variant="section"
+ *   message="Loading data..."
+ * />
+ * ```
+ *
+ * ## Usage Pattern
+ * Use these components for:
+ * - Data fetching states
+ * - Form submission feedback
+ * - API error handling
+ * - Async operation feedback
+ *
+ * Keep error and loading states visible and accessible.
+ */
+
+export * from "./ErrorState";
+export * from "./LoadingState";

package/src/components/dashboard/ActivityFeed.tsx

@@ -0,0 +1,77 @@
+/**
+ * Activity Feed Component
+ *
+ * Displays recent workspace activity and events.
+ * Shows recent actions performed by team members.
+ *
+ * @example
+ * <ActivityFeed activity={workspaceEvents} />
+ */
+
+"use client";
+
+import { type Event as WorkspaceEvent } from "@locusai/shared";
+import { Activity } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui";
+import { ActivityItem } from "./ActivityItem";
+
+interface ActivityFeedProps {
+  /** Array of workspace events to display */
+  activity: WorkspaceEvent[];
+}
+
+/**
+ * Activity Feed Component
+ *
+ * Features:
+ * - Displays recent workspace events
+ * - Shows activity items with timestamps
+ * - Empty state when no activity
+ * - View all button for navigation
+ *
+ * @component
+ */
+export function ActivityFeed({ activity }: ActivityFeedProps) {
+  const router = useRouter();
+
+  return (
+    <div className="bg-card border border-border/50 rounded-2xl p-6 shadow-sm h-full">
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="font-semibold text-lg flex items-center gap-2">
+          <Activity size={20} className="text-primary" />
+          Recent Activity
+        </h3>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-xs"
+          onClick={() => router.push("/activity")}
+        >
+          View All
+        </Button>
+      </div>
+      <div className="space-y-4">
+        {activity.length > 0 ? (
+          activity
+            .slice(0, 10)
+            .map((event) => <ActivityItem key={event.id} event={event} />)
+        ) : (
+          <div className="py-12 flex flex-col items-center justify-center text-center space-y-3">
+            <div className="p-3 bg-secondary/30 rounded-full">
+              <Activity size={24} className="text-muted-foreground/50" />
+            </div>
+            <div className="max-w-[200px]">
+              <p className="text-sm font-medium text-foreground">
+                No activity yet
+              </p>
+              <p className="text-xs text-muted-foreground">
+                When you or your team take actions, they will appear here.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/ActivityItem.tsx

@@ -0,0 +1,207 @@
+/**
+ * Activity Item Component
+ *
+ * Displays a single activity event from the workspace.
+ * Shows event type, details, and relative timestamp.
+ */
+
+"use client";
+
+import {
+  type EventPayload,
+  type Event as WorkspaceEvent,
+} from "@locusai/shared";
+import { formatDistanceToNow } from "date-fns";
+import {
+  Activity,
+  CheckCircle2,
+  Clock,
+  MessageSquare,
+  Plus,
+  Rocket,
+  ShieldCheck,
+  UserPlus,
+} from "lucide-react";
+import { useAuth } from "@/context/AuthContext";
+
+interface ActivityItemProps {
+  /** Workspace event to display */
+  event: WorkspaceEvent;
+}
+
+const formatStatus = (status: string) => {
+  return status
+    .toLowerCase()
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+export function ActivityItem({ event }: ActivityItemProps) {
+  const { user } = useAuth();
+  const { type, payload } = event;
+
+  const getEventConfig = () => {
+    switch (type) {
+      case "TASK_CREATED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "TASK_CREATED" }
+        >["payload"];
+        return {
+          icon: Plus,
+          color: "text-emerald-500",
+          action: "created task",
+          target: p.title,
+        };
+      }
+      case "STATUS_CHANGED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "STATUS_CHANGED" }
+        >["payload"];
+        return {
+          icon: Activity,
+          color: "text-primary",
+          action: `moved task to ${formatStatus(p.newStatus)}`,
+          target: p.title,
+        };
+      }
+      case "COMMENT_ADDED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "COMMENT_ADDED" }
+        >["payload"];
+        return {
+          icon: MessageSquare,
+          color: "text-blue-500",
+          action: "commented on",
+          target: p.title,
+        };
+      }
+      case "WORKSPACE_CREATED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "WORKSPACE_CREATED" }
+        >["payload"];
+        return {
+          icon: Rocket,
+          color: "text-purple-500",
+          action: "created the workspace",
+          target: p.name,
+        };
+      }
+      case "MEMBER_INVITED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "MEMBER_INVITED" }
+        >["payload"];
+        return {
+          icon: UserPlus,
+          color: "text-amber-500",
+          action: `invited ${p.email} to the team`,
+          target: "",
+        };
+      }
+      case "SPRINT_CREATED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "SPRINT_CREATED" }
+        >["payload"];
+        return {
+          icon: Clock,
+          color: "text-primary",
+          action: "created sprint",
+          target: p.name,
+        };
+      }
+      case "SPRINT_STATUS_CHANGED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "SPRINT_STATUS_CHANGED" }
+        >["payload"];
+        return {
+          icon: Rocket,
+          color: "text-orange-500",
+          action: `moved sprint to ${formatStatus(p.newStatus)}`,
+          target: p.name,
+        };
+      }
+      case "TASK_DELETED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "TASK_DELETED" }
+        >["payload"];
+        return {
+          icon: Activity,
+          color: "text-red-500",
+          action: "deleted task",
+          target: p.title,
+        };
+      }
+      case "CI_RAN": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "CI_RAN" }
+        >["payload"];
+        return {
+          icon: ShieldCheck,
+          color: p.ok ? "text-emerald-500" : "text-rose-500",
+          action: `ran verification: ${p.ok ? "Passed" : "Failed"}`,
+          target: p.preset,
+        };
+      }
+      case "CHECKLIST_INITIALIZED": {
+        const p = payload as Extract<
+          EventPayload,
+          { type: "CHECKLIST_INITIALIZED" }
+        >["payload"];
+        return {
+          icon: CheckCircle2,
+          color: "text-blue-500",
+          action: `initialized ${p.itemCount} checklist items`,
+          target: "",
+        };
+      }
+      default:
+        return {
+          icon: Activity,
+          color: "text-muted-foreground",
+          action: type.toLowerCase().replace(/_/g, " "),
+          target: "",
+        };
+    }
+  };
+
+  const config = getEventConfig();
+  const Icon = config.icon;
+
+  const parseDate = (date: string | number | Date | null | undefined) => {
+    if (!date) return new Date();
+    return new Date(date);
+  };
+
+  const eventDate = parseDate(event.createdAt);
+
+  return (
+    <div className="flex items-start gap-4 p-3 hover:bg-secondary/20 rounded-xl transition-colors group">
+      <div className={`p-2 rounded-lg bg-secondary/50 ${config.color}`}>
+        <Icon size={16} />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-foreground leading-relaxed">
+          <span className="font-semibold text-foreground/90">
+            {event.userId === user?.id ? "You" : "Team member"}
+          </span>{" "}
+          <span className="text-muted-foreground">{config.action}</span>{" "}
+          {config.target && (
+            <span className="font-medium text-primary">"{config.target}"</span>
+          )}
+        </p>
+        <p className="text-[11px] text-muted-foreground mt-0.5">
+          {formatDistanceToNow(eventDate, { addSuffix: true })}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/QuickActions.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Clock, Plus, Users } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui";
+
+export function QuickActions() {
+  const router = useRouter();
+
+  return (
+    <div className="bg-card border border-border/50 rounded-2xl p-6 shadow-sm">
+      <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
+        <Plus size={20} className="text-primary" />
+        Quick Actions
+      </h3>
+      <div className="grid grid-cols-1 gap-3">
+        <Button
+          variant="outline"
+          className="justify-start gap-3 h-12 rounded-xl group"
+          onClick={() => router.push("/backlog?createTask=true")}
+        >
+          <div className="p-1.5 bg-primary/10 rounded-lg group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
+            <Plus size={16} />
+          </div>
+          New Task
+        </Button>
+        <Button
+          variant="outline"
+          className="justify-start gap-3 h-12 rounded-xl group"
+          onClick={() => router.push("/backlog?createSprint=true")}
+        >
+          <div className="p-1.5 bg-amber-500/10 text-amber-500 rounded-lg group-hover:bg-amber-500 group-hover:text-white transition-colors">
+            <Clock size={16} />
+          </div>
+          Start Sprint
+        </Button>
+        <Button
+          variant="outline"
+          className="justify-start gap-3 h-12 rounded-xl group"
+          onClick={() => router.push("/settings/team")}
+        >
+          <div className="p-1.5 bg-purple-500/10 text-purple-500 rounded-lg group-hover:bg-purple-500 group-hover:text-white transition-colors">
+            <Users size={16} />
+          </div>
+          Invite Team
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/StatCard.tsx

@@ -0,0 +1,79 @@
+/**
+ * Stat Card Component
+ *
+ * Displays a statistic with icon, value, title, and trend.
+ * Used on dashboard to show key metrics.
+ *
+ * @example
+ * <StatCard
+ *   title="Active Tasks"
+ *   value={24}
+ *   icon={CheckCircle}
+ *   trend="+5% this week"
+ *   color="success"
+ * />
+ */
+
+"use client";
+
+import { type LucideIcon } from "lucide-react";
+import { Badge } from "@/components/ui";
+
+export interface StatCardProps {
+  /** Display title */
+  title: string;
+  /** Statistic value */
+  value: number | string;
+  /** Icon component to display */
+  icon: LucideIcon;
+  /** Trend or additional info text */
+  trend: string;
+  /** Color theme */
+  color: "primary" | "warning" | "success" | "purple";
+}
+
+const colors = {
+  primary: "text-primary bg-primary/10",
+  warning: "text-amber-500 bg-amber-500/10",
+  success: "text-emerald-500 bg-emerald-500/10",
+  purple: "text-purple-500 bg-purple-500/10",
+};
+
+/**
+ * Stat Card Component
+ *
+ * Features:
+ * - Icon display with color theming
+ * - Value and title display
+ * - Trend badge
+ * - Hover effect for interactivity
+ *
+ * @component
+ */
+export function StatCard({
+  title,
+  value,
+  icon: Icon,
+  trend,
+  color,
+}: StatCardProps) {
+  return (
+    <div className="bg-card border border-border/50 rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
+      <div className="flex items-center justify-between mb-4">
+        <div className={`p-2 rounded-xl ${colors[color]}`}>
+          <Icon size={20} />
+        </div>
+        <Badge
+          variant="outline"
+          className="text-[10px] font-medium border-border/50"
+        >
+          {trend}
+        </Badge>
+      </div>
+      <div>
+        <div className="text-3xl font-bold text-foreground">{value}</div>
+        <div className="text-sm text-muted-foreground mt-1">{title}</div>
+      </div>
+    </div>
+  );
+}