@locusai/web 0.1.7 → 0.2.2

package/src/app/(dashboard)/backlog/page.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { closestCenter, DndContext, DragOverlay } from "@dnd-kit/core";
+import { AnimatePresence } from "framer-motion";
+import { Layers, Plus } from "lucide-react";
+import { BacklogList } from "@/components/backlog/BacklogList";
+import { CompletedSprintsSection } from "@/components/backlog/CompletedSprintsSection";
+import { SprintSection } from "@/components/backlog/SprintSection";
+import { PageLayout } from "@/components/PageLayout";
+import { SprintCreateModal } from "@/components/SprintCreateModal";
+import { TaskCard } from "@/components/TaskCard";
+import { TaskCreateModal } from "@/components/TaskCreateModal";
+import { TaskPanel } from "@/components/TaskPanel";
+import { Button, Spinner } from "@/components/ui";
+import { useBacklog } from "@/hooks/useBacklog";
+
+export default function BacklogPage() {
+  const {
+    tasks,
+    sprints,
+    backlogTasks,
+    activeSprint,
+    plannedSprints,
+    completedSprints,
+    getSprintTasks,
+    isLoading,
+    isTaskModalOpen,
+    setIsTaskModalOpen,
+    isSprintModalOpen,
+    setIsSprintModalOpen,
+    selectedTaskId,
+    setSelectedTaskId,
+    activeTask,
+    expandedSections,
+    isSubmitting,
+    sensors,
+    toggleSection,
+    handleDragStart,
+    handleDragEnd,
+    handleCreateSprint,
+    handleStartSprint,
+    handleCompleteSprint,
+    handleDeleteTask,
+    refetchTasks,
+  } = useBacklog();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  const headerActions = (
+    <div className="flex items-center gap-3">
+      <Button
+        variant="outline"
+        onClick={() => setIsSprintModalOpen(true)}
+        className="h-9 border-border/50"
+      >
+        <Layers size={16} className="mr-2" />
+        New Sprint
+      </Button>
+      <Button
+        onClick={() => setIsTaskModalOpen(true)}
+        className="h-9 shadow-lg shadow-primary/20"
+      >
+        <Plus size={16} className="mr-2" />
+        New Task
+      </Button>
+    </div>
+  );
+
+  const headerStats = (
+    <div className="flex items-center gap-2">
+      <span className="text-primary font-bold">{tasks.length} tasks</span>
+      <span className="w-1 h-1 rounded-full bg-muted-foreground/30" />
+      <span>{sprints.length} sprints</span>
+    </div>
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <PageLayout
+        title="Backlog"
+        description={headerStats}
+        actions={headerActions}
+      >
+        <div className="space-y-4">
+          <AnimatePresence mode="popLayout">
+            {/* 1. Active Sprint */}
+            {activeSprint && (
+              <SprintSection
+                key={`section-active-${activeSprint.id}`}
+                sprint={activeSprint}
+                tasks={getSprintTasks(activeSprint.id)}
+                isExpanded={expandedSections.has("active")}
+                onToggle={() => toggleSection("active")}
+                isActive={true}
+                onComplete={handleCompleteSprint}
+                onTaskClick={setSelectedTaskId}
+                onTaskDelete={handleDeleteTask}
+                isSubmitting={isSubmitting}
+              />
+            )}
+
+            {/* 2. Planned Sprints */}
+            {plannedSprints.map((sprint) => (
+              <SprintSection
+                key={`section-planned-${sprint.id}`}
+                sprint={sprint}
+                tasks={getSprintTasks(sprint.id)}
+                isExpanded={expandedSections.has(`planned-${sprint.id}`)}
+                onToggle={() => toggleSection(`planned-${sprint.id}`)}
+                canStart={!activeSprint}
+                onStart={handleStartSprint}
+                onTaskClick={setSelectedTaskId}
+                onTaskDelete={handleDeleteTask}
+                isSubmitting={isSubmitting}
+              />
+            ))}
+
+            {/* 3. Backlog Section */}
+            <BacklogList
+              key="backlog-list"
+              tasks={backlogTasks}
+              isExpanded={expandedSections.has("backlog")}
+              onToggle={() => toggleSection("backlog")}
+              onTaskClick={setSelectedTaskId}
+              onTaskDelete={handleDeleteTask}
+            />
+
+            {/* 4. Completed Sprints */}
+            <CompletedSprintsSection
+              key="completed-sprints"
+              sprints={completedSprints}
+              isExpanded={expandedSections.has("completed")}
+              onToggle={() => toggleSection("completed")}
+              getSprintTasks={getSprintTasks}
+              expandedSprints={expandedSections}
+              onToggleSprint={toggleSection}
+              onTaskClick={setSelectedTaskId}
+            />
+          </AnimatePresence>
+        </div>
+      </PageLayout>
+
+      {/* Drag Overlay */}
+      <DragOverlay>
+        {activeTask && (
+          <div className="opacity-80 rotate-1 shadow-2xl cursor-grabbing scale-105 transition-transform duration-200">
+            <TaskCard task={activeTask} variant="list" />
+          </div>
+        )}
+      </DragOverlay>
+
+      {/* Modals */}
+      <TaskCreateModal
+        isOpen={isTaskModalOpen}
+        onClose={() => setIsTaskModalOpen(false)}
+        onCreated={() => {
+          refetchTasks();
+          setIsTaskModalOpen(false);
+        }}
+      />
+
+      <SprintCreateModal
+        isOpen={isSprintModalOpen}
+        onClose={() => setIsSprintModalOpen(false)}
+        onCreated={handleCreateSprint}
+        isSubmitting={isSubmitting}
+      />
+
+      {selectedTaskId && (
+        <TaskPanel
+          taskId={selectedTaskId}
+          onClose={() => setSelectedTaskId(null)}
+          onUpdated={() => {
+            refetchTasks();
+          }}
+          onDeleted={() => {
+            refetchTasks();
+            setSelectedTaskId(null);
+          }}
+        />
+      )}
+    </DndContext>
+  );
+}

package/src/app/(dashboard)/board/page.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { LayoutGrid, Map as MapIcon } from "lucide-react";
+import {
+  BoardFilter,
+  PageLayout,
+  TaskCreateModal,
+  TaskPanel,
+} from "@/components";
+import { BoardContent, BoardHeader, SprintMindmap } from "@/components/board";
+import { Button, Spinner } from "@/components/ui";
+import { useBoard } from "@/hooks";
+
+export default function BoardPage() {
+  const {
+    activeSprint,
+    filteredTasks,
+    tasksByStatus,
+    activeTask,
+    isLoading,
+    shouldShowEmptyState,
+    isCreateModalOpen,
+    setIsCreateModalOpen,
+    selectedTaskId,
+    setSelectedTaskId,
+    searchQuery,
+    setSearchQuery,
+    priorityFilter,
+    setPriorityFilter,
+    roleFilter,
+    setRoleFilter,
+    view,
+    setView,
+    sensors,
+    handleDragStart,
+    handleDragEnd,
+    handleDeleteTask,
+    refetch,
+  } = useBoard();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  const { title, description, actions } = BoardHeader({
+    activeSprint,
+    filteredTasksCount: filteredTasks.length,
+    onNewTask: () => setIsCreateModalOpen(true),
+  });
+
+  return (
+    <>
+      <PageLayout
+        title={title}
+        description={description}
+        actions={actions}
+        contentClassName="flex flex-col"
+      >
+        {activeSprint != null && (
+          <div className="flex items-center justify-between gap-4 mb-6">
+            <BoardFilter
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              priorityFilter={priorityFilter}
+              onPriorityChange={setPriorityFilter}
+              roleFilter={roleFilter}
+              onRoleChange={setRoleFilter}
+            />
+
+            <div className="flex items-center bg-muted/50 p-1 rounded-lg border">
+              <Button
+                variant={view === "board" ? "secondary" : "ghost"}
+                size="sm"
+                className="gap-2"
+                onClick={() => setView("board")}
+              >
+                <LayoutGrid className="w-4 h-4" />
+                Board
+              </Button>
+              <Button
+                variant={view === "mindmap" ? "secondary" : "ghost"}
+                size="sm"
+                className="gap-2"
+                onClick={() => setView("mindmap")}
+              >
+                <MapIcon className="w-4 h-4" />
+                Mindmap
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {view === "board" ? (
+          <BoardContent
+            filteredTasks={filteredTasks}
+            tasksByStatus={tasksByStatus}
+            shouldShowEmptyState={shouldShowEmptyState}
+            activeTask={activeTask}
+            sensors={sensors}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            onTaskClick={setSelectedTaskId}
+            onTaskDelete={handleDeleteTask}
+            onNewTask={() => setIsCreateModalOpen(true)}
+          />
+        ) : (
+          <SprintMindmap mindmap={activeSprint?.mindmap || null} />
+        )}
+      </PageLayout>
+
+      {/* Modals */}
+      <TaskCreateModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onCreated={() => {
+          refetch();
+          setIsCreateModalOpen(false);
+        }}
+        defaultSprintId={activeSprint?.id}
+      />
+
+      {selectedTaskId && (
+        <TaskPanel
+          taskId={selectedTaskId}
+          onClose={() => setSelectedTaskId(null)}
+          onUpdated={() => {
+            refetch();
+          }}
+          onDeleted={() => {
+            refetch();
+            setSelectedTaskId(null);
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Sidebar, WorkspaceProtected } from "@/components";
+import { LoadingSkeleton } from "@/components/ui";
+import { useDashboardLayout } from "@/hooks/useDashboardLayout";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { isLoading, isAuthenticated, shouldShowUI } = useDashboardLayout();
+
+  // Show loading skeleton while authenticating
+  if (isLoading) {
+    return <LoadingSkeleton />;
+  }
+
+  // Don't render anything if not authenticated (redirect happens in hook)
+  if (!shouldShowUI) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      {isAuthenticated && <Sidebar />}
+      <main className="flex-1 overflow-auto bg-background p-6">
+        <WorkspaceProtected>{children}</WorkspaceProtected>
+      </main>
+    </div>
+  );
+}

package/src/app/(dashboard)/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Dashboard = dynamic(
+  () => import("@/views/Dashboard").then((mod) => mod.Dashboard),
+  {
+    ssr: false,
+  }
+);
+
+export default function Home() {
+  return <Dashboard />;
+}

package/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { ChevronRight, Trash2, Users } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { PageLayout } from "@/components/PageLayout";
+import { ApiKeysSettings } from "@/components/settings/ApiKeysSettings";
+import { SettingItem } from "@/components/settings/SettingItem";
+import { SettingSection } from "@/components/settings/SettingSection";
+import { Button, Input, Modal } from "@/components/ui";
+import { useAuth } from "@/context";
+import { useAuthenticatedUser, useOrganizationQuery } from "@/hooks";
+import { locusClient } from "@/lib/api-client";
+
+export default function SettingsPage() {
+  const user = useAuthenticatedUser();
+  const { logout } = useAuth();
+  const router = useRouter();
+  const { data: organization } = useOrganizationQuery();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [deleteConfirmation, setDeleteConfirmation] = useState("");
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const orgName = organization?.name || "organization";
+
+  const handleDeleteOrganization = async () => {
+    if (!user?.orgId) return;
+
+    const expectedConfirmation = `delete ${orgName}`.toLowerCase();
+    if (deleteConfirmation.toLowerCase() !== expectedConfirmation) {
+      toast.error(`Please type "delete ${orgName}" to confirm`);
+      return;
+    }
+
+    setIsDeleting(true);
+    try {
+      await locusClient.organizations.delete(user.orgId);
+      toast.success("Organization deleted");
+
+      // Logout the user
+      logout();
+
+      // Redirect to login
+      router.push("/login");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete organization"
+      );
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Settings"
+      description="Manage your workspace preferences and configuration."
+    >
+      <div className="max-w-5xl space-y-8">
+        {/* Organization Section */}
+        <SettingSection title="Organization">
+          <Link href="/settings/team">
+            <SettingItem
+              icon={<Users size={18} />}
+              title="Team"
+              description="Invite and manage organization members"
+            >
+              <div className="text-muted-foreground">
+                <ChevronRight size={20} />
+              </div>
+            </SettingItem>
+          </Link>
+        </SettingSection>
+
+        {/* API Keys Section */}
+        <ApiKeysSettings />
+
+        {/* Danger Zone */}
+        <div>
+          <h3 className="text-xs font-bold uppercase tracking-widest text-destructive mb-4 px-4">
+            Danger Zone
+          </h3>
+          <div className="bg-destructive/5 border border-destructive/20 rounded-2xl p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="font-medium text-foreground">
+                  Delete Organization
+                </h4>
+                <p className="text-sm text-muted-foreground mt-0.5">
+                  Permanently delete this organization and all its data
+                </p>
+              </div>
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={() => setIsDeleteModalOpen(true)}
+              >
+                <Trash2 size={18} />
+                Delete
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Delete Organization Modal */}
+      <Modal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+      >
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-xl font-bold text-foreground">
+              Delete Organization
+            </h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              This action cannot be undone. All organization data will be
+              permanently deleted.
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-foreground">
+              Type "delete {orgName}" to confirm
+            </label>
+            <Input
+              placeholder={`delete ${orgName}`}
+              value={deleteConfirmation}
+              onChange={(e) => setDeleteConfirmation(e.target.value)}
+              disabled={isDeleting}
+            />
+          </div>
+
+          <div className="flex gap-3 justify-end pt-4">
+            <Button
+              variant="secondary"
+              onClick={() => setIsDeleteModalOpen(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="danger"
+              onClick={handleDeleteOrganization}
+              disabled={
+                isDeleting ||
+                deleteConfirmation.toLowerCase() !==
+                  `delete ${orgName}`.toLowerCase()
+              }
+              isLoading={isDeleting}
+            >
+              Delete Organization
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </PageLayout>
+  );
+}

package/src/app/(dashboard)/settings/team/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { UserPlus } from "lucide-react";
+import { PageLayout } from "@/components";
+import { InviteMemberModal } from "@/components/settings";
+import { TeamInvitationsList } from "@/components/settings/TeamInvitationsList";
+import { TeamMembersList } from "@/components/settings/TeamMembersList";
+import { Button } from "@/components/ui";
+import { useTeamManagement } from "@/hooks/useTeamManagement";
+
+export default function TeamPage() {
+  const {
+    currentUser,
+    members,
+    invitations,
+    isLoading,
+    canManage,
+    isInviteModalOpen,
+    setIsInviteModalOpen,
+    handleRemoveMember,
+    handleRevokeInvitation,
+    handleCopyLink,
+  } = useTeamManagement();
+
+  return (
+    <PageLayout
+      title="Team Management"
+      description="Manage your organization members and invitations."
+      actions={
+        canManage ? (
+          <Button onClick={() => setIsInviteModalOpen(true)}>
+            <UserPlus size={18} />
+            Invite Member
+          </Button>
+        ) : undefined
+      }
+    >
+      <div className="space-y-8">
+        {/* Members List */}
+        <section className="space-y-4">
+          <div className="flex items-center justify-between px-1">
+            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
+              Members ({members.length})
+            </h3>
+          </div>
+
+          <div className="bg-card/50 border border-secondary/20 rounded-2xl overflow-hidden">
+            <TeamMembersList
+              members={members}
+              currentUserId={currentUser.id}
+              canManage={canManage}
+              isLoading={isLoading}
+              onRemoveMember={handleRemoveMember}
+            />
+          </div>
+        </section>
+
+        {/* Pending Invitations */}
+        {!isLoading && (
+          <TeamInvitationsList
+            invitations={invitations}
+            canManage={canManage}
+            onCopyLink={handleCopyLink}
+            onRevokeInvitation={handleRevokeInvitation}
+          />
+        )}
+      </div>
+
+      <InviteMemberModal
+        isOpen={isInviteModalOpen}
+        onClose={() => setIsInviteModalOpen(false)}
+      />
+    </PageLayout>
+  );
+}