@assistkick/create 1.0.0

package/templates/product-system/packages/frontend/src/routes/dashboard.tsx

@@ -0,0 +1,221 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Toolbar } from '../components/Toolbar';
+import { GraphView } from '../components/GraphView';
+import type { GraphViewHandle } from '../components/GraphView';
+import { GraphLegend } from '../components/GraphLegend';
+import { GraphSettings } from '../components/GraphSettings';
+import { KanbanView } from '../components/KanbanView';
+import { CoherenceView } from '../components/CoherenceView';
+import { TerminalView } from '../components/TerminalView';
+import { UsersView } from '../components/UsersView';
+import { SidePanel, openSidePanel, closeSidePanel } from '../components/SidePanel';
+import { QaIssueSheet } from '../components/QaIssueSheet';
+import { useTheme } from '../hooks/useTheme';
+import { useGraph } from '../hooks/useGraph';
+import { useAuth } from '../hooks/useAuth';
+import { useProjects } from '../hooks/useProjects';
+import { apiClient } from '../api/client';
+import { ToastProvider } from '../hooks/useToast';
+
+const VALID_TABS = new Set(['graph', 'kanban', 'coherence', 'users', 'terminal']);
+
+function tabFromPath(pathname: string): string {
+  const seg = pathname.replace(/^\//, '');
+  return VALID_TABS.has(seg) ? seg : 'graph';
+}
+
+export function DashboardRoute() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { theme, toggleTheme } = useTheme();
+  const { user } = useAuth();
+  const isAdmin = user?.role === 'admin';
+  const {
+    projects, selectedProjectId, selectProject,
+    createProject, renameProject, archiveProject,
+  } = useProjects();
+  const { graphData, error: graphError } = useGraph(selectedProjectId);
+  const graphRef = useRef<GraphViewHandle>(null);
+  const activeTab = tabFromPath(location.pathname);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [legendVisible, setLegendVisible] = useState(true);
+  const [hiddenTypes, setHiddenTypes] = useState<Set<string>>(new Set());
+
+  // QA Issue Sheet state
+  const [qaOpen, setQaOpen] = useState(false);
+  const [qaFeatureId, setQaFeatureId] = useState<string | null>(null);
+  const [qaFeatureName, setQaFeatureName] = useState('');
+  const [qaColumn, setQaColumn] = useState('');
+  const [qaNotes, setQaNotes] = useState<any[]>([]);
+  const [qaReviews, setQaReviews] = useState<any[]>([]);
+
+  const completeness = graphData
+    ? Math.round((graphData.nodes.reduce((acc: number, n: any) => acc + (n.completeness || 0), 0) / Math.max(graphData.nodes.length, 1)) * 100)
+    : 0;
+
+  const switchTab = useCallback((tab: string) => {
+    navigate(`/${tab}`);
+  }, [navigate]);
+
+  const handleLogout = useCallback(async () => {
+    try {
+      await apiClient.logout();
+    } catch {
+      // Clear cookies failed on server — still redirect
+    }
+    navigate('/login', { replace: true });
+  }, [navigate]);
+
+  // Keyboard
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closeSidePanel();
+        setSettingsOpen(false);
+        setQaOpen(false);
+        graphRef.current?.clearSelection();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  // Window resize
+  useEffect(() => {
+    const handler = () => graphRef.current?.fitToView();
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, []);
+
+  const handleNodeClick = useCallback(async (node: any) => {
+    openSidePanel(node);
+  }, []);
+
+  const handleEdgeClick = useCallback((neighborId: string) => {
+    const node = graphRef.current?.getNodeById(neighborId);
+    if (node) {
+      graphRef.current?.focusNode(neighborId);
+      openSidePanel(node);
+    }
+  }, []);
+
+  const handleFit = useCallback(() => {
+    graphRef.current?.fitToView();
+  }, []);
+
+  const handleTypeToggle = useCallback((newHiddenTypes: Set<string>) => {
+    setHiddenTypes(newHiddenTypes);
+    graphRef.current?.setHiddenTypes(newHiddenTypes);
+  }, []);
+
+  const handleSearchChange = useCallback((query: string) => {
+    graphRef.current?.highlightBySearch(query);
+  }, []);
+
+  const handleIssuesClick = useCallback((featureId: string, featureName: string, column: string, notes: any[], reviews: any[]) => {
+    setQaFeatureId(featureId);
+    setQaFeatureName(featureName);
+    setQaColumn(column);
+    setQaNotes(notes);
+    setQaReviews(reviews);
+    setQaOpen(true);
+  }, []);
+
+  const handleNotesChanged = useCallback(() => {
+    // The kanban view will re-fetch on its own
+  }, []);
+
+  return (
+    <ToastProvider>
+    <div className="app-container">
+      <Toolbar
+        activeTab={activeTab}
+        onTabChange={switchTab}
+        completeness={completeness}
+        onFit={handleFit}
+        onSettingsToggle={() => setSettingsOpen(v => !v)}
+        settingsOpen={settingsOpen}
+        theme={theme}
+        onThemeToggle={toggleTheme}
+        isAdmin={isAdmin}
+        onLogout={handleLogout}
+        projects={projects}
+        selectedProjectId={selectedProjectId}
+        onProjectSelect={selectProject}
+        onProjectCreate={createProject}
+        onProjectRename={renameProject}
+        onProjectArchive={archiveProject}
+      />
+
+      <div className="main-content">
+        {/* Graph View */}
+        {graphError ? (
+          <div id="graph-container" style={{ display: activeTab === 'graph' ? 'block' : 'none' }}>
+            <div className="error-msg">Failed to load graph data. Is the server running?</div>
+          </div>
+        ) : graphData ? (
+          <GraphView ref={graphRef} graphData={graphData} onNodeClick={handleNodeClick} visible={activeTab === 'graph'} />
+        ) : null}
+
+        {/* Graph Legend */}
+        {activeTab === 'graph' && (
+          <GraphLegend
+            visible={legendVisible}
+            onTypeToggle={handleTypeToggle}
+            onSearchChange={handleSearchChange}
+          />
+        )}
+
+        {/* Graph Settings */}
+        <GraphSettings
+          isOpen={settingsOpen && activeTab === 'graph'}
+          onClose={() => setSettingsOpen(false)}
+          graphRef={graphRef}
+        />
+
+        {/* Kanban View */}
+        <div id="kanban-container" style={{ display: activeTab === 'kanban' ? 'flex' : 'none' }}>
+          {activeTab === 'kanban' && graphData && (
+            <KanbanView
+              graphData={graphData}
+              projectId={selectedProjectId}
+              onCardClick={handleNodeClick}
+              onIssuesClick={handleIssuesClick}
+            />
+          )}
+        </div>
+
+        {/* Coherence View */}
+        <div id="coherence-container" style={{ display: activeTab === 'coherence' ? 'block' : 'none' }}>
+          {activeTab === 'coherence' && graphData && (
+            <CoherenceView graphData={graphData} onNodeClick={handleNodeClick} projectId={selectedProjectId} />
+          )}
+        </div>
+
+        {/* Users View (admin-only) */}
+        {isAdmin && <UsersView visible={activeTab === 'users'} />}
+
+        {/* Terminal View (admin-only) */}
+        {isAdmin && <TerminalView visible={activeTab === 'terminal'} />}
+
+        {/* Side Panel */}
+        <SidePanel graphData={graphData} onEdgeClick={handleEdgeClick} />
+
+        {/* QA Issue Sheet */}
+        <QaIssueSheet
+          isOpen={qaOpen}
+          featureId={qaFeatureId}
+          featureName={qaFeatureName}
+          column={qaColumn}
+          notes={qaNotes}
+          reviews={qaReviews}
+          onClose={() => setQaOpen(false)}
+          onNotesChanged={handleNotesChanged}
+        />
+      </div>
+
+    </div>
+    </ToastProvider>
+  );
+}

package/templates/product-system/packages/frontend/src/routes/forgot_password.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { ForgotPasswordPage } from '../pages/forgot_password_page';
+import { useAuth } from '../hooks/useAuth';
+
+export function ForgotPasswordRoute() {
+  const { user, loading } = useAuth();
+
+  if (loading) return null;
+  if (user) return <Navigate to="/" replace />;
+
+  return <ForgotPasswordPage />;
+}

package/templates/product-system/packages/frontend/src/routes/login.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { LoginPage } from '../components/LoginPage';
+import { useAuth } from '../hooks/useAuth';
+
+export function LoginRoute() {
+  const { user, loading } = useAuth();
+  const navigate = useNavigate();
+
+  if (loading) return null;
+  if (user) return <Navigate to="/" replace />;
+
+  return <LoginPage onLoginSuccess={() => navigate('/', { replace: true })} />;
+}

package/templates/product-system/packages/frontend/src/routes/register.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { RegisterPage } from '../pages/register_page';
+import { useAuth } from '../hooks/useAuth';
+
+export function RegisterRoute() {
+  const { user, loading } = useAuth();
+  const navigate = useNavigate();
+
+  if (loading) return null;
+  if (user) return <Navigate to="/" replace />;
+
+  return <RegisterPage onSuccess={() => navigate('/', { replace: true })} />;
+}

package/templates/product-system/packages/frontend/src/routes/reset_password.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { ResetPasswordPage } from '../pages/reset_password_page';
+import { useAuth } from '../hooks/useAuth';
+
+export function ResetPasswordRoute() {
+  const { user, loading } = useAuth();
+
+  if (loading) return null;
+  if (user) return <Navigate to="/" replace />;
+
+  return <ResetPasswordPage />;
+}