session-wrap-dashboard 3.9.0

package/src/hooks/useAuth.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as authService from '../auth'
+import { userAPI } from '../api'
+import * as types from '../types'
+
+interface UseAuthReturn {
+  user: types.User | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  login: (claudeToken: string) => Promise<void>
+  logout: () => void
+}
+
+export const useAuth = (): UseAuthReturn => {
+  const [user, setUser] = useState<types.User | null>(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Initialize auth state
+  useEffect(() => {
+    const initAuth = async () => {
+      const authState = await authService.initAuth()
+      setIsAuthenticated(authState.isAuthenticated)
+
+      if (authState.isAuthenticated) {
+        try {
+          const response = await userAPI.getProfile()
+          setUser(response.data.user)
+        } catch (error) {
+          console.error('Failed to fetch user profile:', error)
+          authService.logout()
+          setIsAuthenticated(false)
+        }
+      }
+
+      setIsLoading(false)
+    }
+
+    initAuth()
+  }, [])
+
+  const login = useCallback(async (claudeToken: string) => {
+    setIsLoading(true)
+    try {
+      const response = await authService.login(claudeToken)
+      setUser(response.user)
+      setIsAuthenticated(true)
+    } catch (error) {
+      console.error('Login failed:', error)
+      throw error
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  const logout = useCallback(() => {
+    authService.logout()
+    setUser(null)
+    setIsAuthenticated(false)
+  }, [])
+
+  return {
+    user,
+    isAuthenticated,
+    isLoading,
+    login,
+    logout
+  }
+}

package/src/hooks/useWorkspace.ts

@@ -0,0 +1,130 @@
+import { useState, useEffect, useCallback } from 'react'
+import { workspaceAPI, rbacAPI } from '../api'
+import * as types from '../types'
+
+interface UseWorkspaceReturn {
+  workspaces: types.Workspace[]
+  currentWorkspace: types.Workspace | null
+  members: types.WorkspaceMember[]
+  roles: types.Role[]
+  isLoading: boolean
+  error: string | null
+  setCurrentWorkspace: (workspace: types.Workspace | null) => void
+  createWorkspace: (name: string, isPublic: boolean) => Promise<void>
+  addMember: (userId: string, roleName: string) => Promise<void>
+  removeMember: (userId: string) => Promise<void>
+  updateMember: (userId: string, roleName: string) => Promise<void>
+}
+
+export const useWorkspace = (): UseWorkspaceReturn => {
+  const [workspaces, setWorkspaces] = useState<types.Workspace[]>([])
+  const [currentWorkspace, setCurrentWorkspace] = useState<types.Workspace | null>(null)
+  const [members, setMembers] = useState<types.WorkspaceMember[]>([])
+  const [roles, setRoles] = useState<types.Role[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Fetch workspaces and roles
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setIsLoading(true)
+        const [workspacesRes, rolesRes] = await Promise.all([
+          workspaceAPI.list(),
+          rbacAPI.getRoles()
+        ])
+        setWorkspaces(workspacesRes.data)
+        setRoles(rolesRes.data)
+
+        // Set first workspace as current
+        if (workspacesRes.data.length > 0) {
+          setCurrentWorkspace(workspacesRes.data[0])
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load workspaces')
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadData()
+  }, [])
+
+  // Fetch members when workspace changes
+  useEffect(() => {
+    const loadMembers = async () => {
+      if (!currentWorkspace) {
+        setMembers([])
+        return
+      }
+
+      try {
+        const res = await workspaceAPI.getMembers(currentWorkspace.id)
+        setMembers(res.data)
+      } catch (err) {
+        console.error('Failed to load members:', err)
+      }
+    }
+
+    loadMembers()
+  }, [currentWorkspace])
+
+  const createWorkspace = useCallback(async (name: string, isPublic: boolean) => {
+    try {
+      const res = await workspaceAPI.create(name, isPublic)
+      setWorkspaces([...workspaces, res.data])
+    } catch (err) {
+      throw err
+    }
+  }, [workspaces])
+
+  const addMember = useCallback(async (userId: string, roleName: string) => {
+    if (!currentWorkspace) throw new Error('No workspace selected')
+
+    try {
+      await workspaceAPI.addMember(currentWorkspace.id, userId, roleName)
+      // Refresh members
+      const res = await workspaceAPI.getMembers(currentWorkspace.id)
+      setMembers(res.data)
+    } catch (err) {
+      throw err
+    }
+  }, [currentWorkspace])
+
+  const removeMember = useCallback(async (userId: string) => {
+    if (!currentWorkspace) throw new Error('No workspace selected')
+
+    try {
+      await workspaceAPI.removeMember(currentWorkspace.id, userId)
+      setMembers(members.filter(m => m.id !== userId))
+    } catch (err) {
+      throw err
+    }
+  }, [currentWorkspace, members])
+
+  const updateMember = useCallback(async (userId: string, roleName: string) => {
+    if (!currentWorkspace) throw new Error('No workspace selected')
+
+    try {
+      await workspaceAPI.updateMember(currentWorkspace.id, userId, roleName)
+      const res = await workspaceAPI.getMembers(currentWorkspace.id)
+      setMembers(res.data)
+    } catch (err) {
+      throw err
+    }
+  }, [currentWorkspace])
+
+  return {
+    workspaces,
+    currentWorkspace,
+    members,
+    roles,
+    isLoading,
+    error,
+    setCurrentWorkspace,
+    createWorkspace,
+    addMember,
+    removeMember,
+    updateMember
+  }
+}

package/src/index.css

@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Global Styles */
+* {
+  @apply transition-colors duration-200;
+}
+
+body {
+  @apply bg-slate-50 text-slate-900;
+}
+
+/* Utility Classes */
+.btn {
+  @apply px-4 py-2 rounded font-medium cursor-pointer transition-colors;
+}
+
+.btn-primary {
+  @apply bg-blue-600 text-white hover:bg-blue-700;
+}
+
+.btn-secondary {
+  @apply bg-slate-200 text-slate-900 hover:bg-slate-300;
+}
+
+.btn-sm {
+  @apply px-3 py-1 text-sm;
+}
+
+.card {
+  @apply bg-white rounded-lg border border-slate-200 p-4 shadow-sm;
+}
+
+.input {
+  @apply px-3 py-2 border border-slate-300 rounded font-medium focus:outline-none focus:border-blue-500;
+}
+
+.badge {
+  @apply inline-block px-2 py-1 text-sm font-medium rounded;
+}
+
+.badge-success {
+  @apply bg-green-100 text-green-800;
+}
+
+.badge-warning {
+  @apply bg-yellow-100 text-yellow-800;
+}
+
+.badge-danger {
+  @apply bg-red-100 text-red-800;
+}
+
+.loading-spinner {
+  @apply inline-block w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin;
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)

package/src/pages/DashboardPage.tsx

@@ -0,0 +1,13 @@
+import { useSearchParams } from 'react-router-dom'
+import { AnalyticsDashboard } from '../components'
+
+export const DashboardPage = () => {
+  const [searchParams] = useSearchParams()
+  const workspaceId = searchParams.get('workspace')
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <AnalyticsDashboard workspaceId={workspaceId} />
+    </div>
+  )
+}

package/src/pages/HomePage.tsx

@@ -0,0 +1,156 @@
+import { useNavigate } from 'react-router-dom'
+import { useWorkspace } from '../hooks'
+import { BarChart3, Users, Zap, ArrowRight } from 'lucide-react'
+
+export const HomePage = () => {
+  const navigate = useNavigate()
+  const { currentWorkspace } = useWorkspace()
+
+  const features = [
+    {
+      icon: BarChart3,
+      title: 'Analytics Dashboard',
+      description: 'Track task completion, decision quality, and agent performance in real-time.',
+      color: 'blue',
+      href: '/dashboard'
+    },
+    {
+      icon: Users,
+      title: 'Workspace Management',
+      description: 'Manage team members and control access with role-based permissions.',
+      color: 'green',
+      href: '/workspaces'
+    },
+    {
+      icon: Zap,
+      title: 'Integrations',
+      description: 'Connect with Slack, GitHub, and Jira to enhance your workflow.',
+      color: 'yellow',
+      href: '/integrations'
+    }
+  ]
+
+  const colorClasses = {
+    blue: 'bg-blue-50 text-blue-600 border-blue-200',
+    green: 'bg-green-50 text-green-600 border-green-200',
+    yellow: 'bg-yellow-50 text-yellow-600 border-yellow-200'
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Hero Section */}
+      <div className="p-6 max-w-6xl mx-auto">
+        <div className="mb-12">
+          <h1 className="text-4xl font-bold text-slate-900 mb-4">
+            Welcome to Session Wrap
+          </h1>
+          <p className="text-xl text-slate-600 max-w-2xl">
+            Empower your team with real-time analytics, collaboration tools, and seamless integrations.
+          </p>
+        </div>
+
+        {/* Quick Stats */}
+        {currentWorkspace && (
+          <div className="grid grid-cols-3 gap-4 mb-12">
+            <div className="card">
+              <p className="text-sm text-slate-600">Current Workspace</p>
+              <p className="text-2xl font-bold text-slate-900 mt-2">{currentWorkspace.name}</p>
+              <p className="text-xs text-slate-500 mt-2">
+                {currentWorkspace.is_public ? '🌍 Public' : '🔒 Private'}
+              </p>
+            </div>
+            <div className="card">
+              <p className="text-sm text-slate-600">Member Access</p>
+              <p className="text-2xl font-bold text-slate-900 mt-2">
+                {currentWorkspace.roles?.length || 0}
+              </p>
+              <p className="text-xs text-slate-500 mt-2">roles configured</p>
+            </div>
+            <div className="card">
+              <p className="text-sm text-slate-600">Features</p>
+              <p className="text-2xl font-bold text-slate-900 mt-2">6+</p>
+              <p className="text-xs text-slate-500 mt-2">available modules</p>
+            </div>
+          </div>
+        )}
+
+        {/* Features Grid */}
+        <div className="mb-12">
+          <h2 className="text-2xl font-bold text-slate-900 mb-6">Core Features</h2>
+          <div className="grid grid-cols-3 gap-6">
+            {features.map(({ icon: Icon, title, description, color, href }) => (
+              <button
+                key={href}
+                onClick={() => navigate(href)}
+                className={`card border-2 transition-all hover:shadow-lg cursor-pointer ${
+                  colorClasses[color as keyof typeof colorClasses]
+                }`}
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <Icon size={32} />
+                  <ArrowRight size={18} className="opacity-0 group-hover:opacity-100" />
+                </div>
+                <h3 className="text-lg font-semibold text-slate-900 text-left mb-2">
+                  {title}
+                </h3>
+                <p className="text-sm text-slate-600 text-left">
+                  {description}
+                </p>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Quick Links */}
+        <div className="bg-white rounded-lg border border-slate-200 p-6">
+          <h2 className="text-lg font-semibold text-slate-900 mb-4">Quick Actions</h2>
+          <div className="grid grid-cols-2 gap-4">
+            <button
+              onClick={() => navigate('/workspaces')}
+              className="btn btn-primary text-left"
+            >
+              🏢 Create Workspace
+            </button>
+            <button
+              onClick={() => navigate('/roles')}
+              className="btn btn-secondary text-left"
+            >
+              👥 Manage Members
+            </button>
+            <button
+              onClick={() => navigate('/integrations')}
+              className="btn btn-secondary text-left"
+            >
+              ⚡ Setup Integrations
+            </button>
+            <button
+              onClick={() => navigate('/settings')}
+              className="btn btn-secondary text-left"
+            >
+              ⚙️ Adjust Settings
+            </button>
+          </div>
+        </div>
+
+        {/* Getting Started Tips */}
+        <div className="mt-12 bg-blue-50 border border-blue-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-blue-900 mb-3">Getting Started</h3>
+          <ul className="space-y-2 text-sm text-blue-800">
+            <li>
+              <span className="font-semibold">1. Create a Workspace</span> — Start by creating a workspace for your team
+            </li>
+            <li>
+              <span className="font-semibold">2. Add Members</span> — Invite team members and assign roles
+            </li>
+            <li>
+              <span className="font-semibold">3. Setup Integrations</span> — Connect with Slack, GitHub, or Jira
+            </li>
+            <li>
+              <span className="font-semibold">4. Monitor Analytics</span> — Track progress and performance
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/IntegrationsPage.tsx

@@ -0,0 +1,9 @@
+import { IntegrationManager } from '../components'
+
+export const IntegrationsPage = () => {
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <IntegrationManager />
+    </div>
+  )
+}

package/src/pages/RolesPage.tsx

@@ -0,0 +1,9 @@
+import { RoleManager } from '../components'
+
+export const RolesPage = () => {
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <RoleManager />
+    </div>
+  )
+}

package/src/pages/SettingsPage.tsx

@@ -0,0 +1,118 @@
+import { useAuth } from '../hooks'
+import { Save } from 'lucide-react'
+
+export const SettingsPage = () => {
+  const { user } = useAuth()
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-slate-900">Settings</h1>
+        <p className="text-slate-600 mt-2">Manage your preferences and account settings</p>
+      </div>
+
+      {/* User Profile Section */}
+      <div className="card mb-6">
+        <h2 className="text-lg font-semibold mb-4">Account</h2>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-2">GitHub Login</label>
+            <input
+              type="text"
+              value={user?.github_login || ''}
+              disabled
+              className="input w-full bg-slate-100"
+            />
+          </div>
+
+          {user?.email && (
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-2">Email</label>
+              <input
+                type="email"
+                value={user.email}
+                disabled
+                className="input w-full bg-slate-100"
+              />
+            </div>
+          )}
+
+          {user?.subscription && (
+            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+              <p className="text-sm font-medium text-green-800">
+                ✓ Subscription Active
+              </p>
+              <p className="text-xs text-green-700 mt-1">
+                Expires: {new Date(user.subscription.expires_at).toLocaleDateString()}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Preferences Section */}
+      <div className="card mb-6">
+        <h2 className="text-lg font-semibold mb-4">Preferences</h2>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-2">
+              <input type="checkbox" defaultChecked className="mr-2" />
+              Email notifications
+            </label>
+            <p className="text-xs text-slate-600 ml-6">
+              Receive email updates for important workspace events
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-2">
+              <input type="checkbox" defaultChecked className="mr-2" />
+              Analytics summaries
+            </label>
+            <p className="text-xs text-slate-600 ml-6">
+              Weekly analytics digest to your email
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-2">
+              <input type="checkbox" className="mr-2" />
+              Slack notifications
+            </label>
+            <p className="text-xs text-slate-600 ml-6">
+              Send real-time alerts to Slack (requires Slack integration)
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Theme Section */}
+      <div className="card mb-6">
+        <h2 className="text-lg font-semibold mb-4">Theme</h2>
+        <div className="space-y-3">
+          <label className="flex items-center gap-3">
+            <input type="radio" name="theme" defaultChecked />
+            <span className="text-sm">Light (default)</span>
+          </label>
+          <label className="flex items-center gap-3">
+            <input type="radio" name="theme" />
+            <span className="text-sm">Dark</span>
+          </label>
+          <label className="flex items-center gap-3">
+            <input type="radio" name="theme" />
+            <span className="text-sm">System</span>
+          </label>
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex gap-3">
+        <button className="btn btn-primary flex items-center gap-2">
+          <Save size={18} />
+          Save Settings
+        </button>
+        <button className="btn btn-secondary">Cancel</button>
+      </div>
+    </div>
+  )
+}

package/src/pages/WorkspacesPage.tsx

@@ -0,0 +1,9 @@
+import { WorkspaceSelector } from '../components'
+
+export const WorkspacesPage = () => {
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <WorkspaceSelector />
+    </div>
+  )
+}

package/src/pages/index.ts

@@ -0,0 +1,6 @@
+export { HomePage } from './HomePage'
+export { DashboardPage } from './DashboardPage'
+export { WorkspacesPage } from './WorkspacesPage'
+export { RolesPage } from './RolesPage'
+export { IntegrationsPage } from './IntegrationsPage'
+export { SettingsPage } from './SettingsPage'

package/src/test/setup.ts

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+
+// Mock import.meta.env
+Object.defineProperty(import.meta, 'env', {
+  value: {
+    VITE_API_URL: 'http://localhost:3000',
+    VITE_JWT_STORAGE_KEY: 'auth_token',
+    VITE_ENV: 'test'
+  }
+})
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn()
+}
+global.localStorage = localStorageMock as any
+
+// Mock window.location.href
+delete (window as any).location
+window.location = { href: '' } as any
+
+// Suppress console errors in tests
+global.console = {
+  ...console,
+  error: vi.fn(),
+  warn: vi.fn()
+}

package/src/test/utils.tsx

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react'
+import { render, RenderOptions } from '@testing-library/react'
+import { BrowserRouter } from 'react-router-dom'
+
+const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+  return <BrowserRouter>{children}</BrowserRouter>
+}
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) => render(ui, { wrapper: AllTheProviders, ...options })
+
+export * from '@testing-library/react'
+export { customRender as render }