session-wrap-dashboard 3.9.0

package/src/components/Header.tsx

@@ -0,0 +1,62 @@
+import { memo } from 'react'
+import { useAuth, useWorkspace } from '../hooks'
+import { LogOut, User } from 'lucide-react'
+
+interface HeaderProps {
+  title?: string
+}
+
+const HeaderComponent = ({ title = 'Dashboard' }: HeaderProps) => {
+  const { user, logout } = useAuth()
+  const { currentWorkspace, workspaces, setCurrentWorkspace } = useWorkspace()
+
+  return (
+    <header className="bg-white border-b border-slate-200 px-6 py-4 shadow-sm">
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
+
+          {/* Workspace Selector */}
+          <select
+            value={currentWorkspace?.id || ''}
+            onChange={(e) => {
+              const workspace = workspaces.find(w => w.id === e.target.value)
+              setCurrentWorkspace(workspace || null)
+            }}
+            className="input text-sm"
+          >
+            <option value="" disabled>
+              Select workspace...
+            </option>
+            {workspaces.map((ws) => (
+              <option key={ws.id} value={ws.id}>
+                {ws.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* User Menu */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-slate-600">
+            <User size={16} />
+            <span>{user?.github_login}</span>
+          </div>
+
+          <button
+            onClick={() => {
+              logout()
+              window.location.href = '/login'
+            }}
+            className="btn btn-secondary btn-sm flex items-center gap-2"
+          >
+            <LogOut size={16} />
+            Logout
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export const Header = memo(HeaderComponent)

package/src/components/IntegrationManager.tsx

@@ -0,0 +1,292 @@
+import { useState, useEffect } from 'react'
+import { useWorkspace } from '../hooks'
+import { integrationAPI } from '../api'
+import { Trash2, Plus, Check, AlertCircle } from 'lucide-react'
+
+interface Integration {
+  id: string
+  service_name: 'slack' | 'github' | 'jira'
+  is_active: boolean
+  created_at: string
+  updated_at: string
+}
+
+const ServiceConfig = {
+  slack: {
+    name: 'Slack',
+    icon: '💬',
+    description: 'Send notifications to Slack channels',
+    fields: [
+      { name: 'webhook_url', label: 'Webhook URL', type: 'password' },
+      { name: 'channel_id', label: 'Channel ID', type: 'text' }
+    ]
+  },
+  github: {
+    name: 'GitHub',
+    icon: '🐙',
+    description: 'Sync tasks with GitHub Issues',
+    fields: [
+      { name: 'api_token', label: 'API Token', type: 'password' },
+      { name: 'owner', label: 'Repository Owner', type: 'text' },
+      { name: 'repo', label: 'Repository Name', type: 'text' }
+    ]
+  },
+  jira: {
+    name: 'Jira',
+    icon: '📊',
+    description: 'Integrate with Jira projects',
+    fields: [
+      { name: 'api_token', label: 'API Token', type: 'password' },
+      { name: 'host', label: 'Jira Host', type: 'text' },
+      { name: 'email', label: 'Email', type: 'email' },
+      { name: 'project_key', label: 'Project Key', type: 'text' }
+    ]
+  }
+}
+
+export const IntegrationManager = () => {
+  const { currentWorkspace, isLoading: wsLoading } = useWorkspace()
+  const [integrations, setIntegrations] = useState<Integration[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [showSetupForm, setShowSetupForm] = useState<'slack' | 'github' | 'jira' | null>(null)
+  const [formData, setFormData] = useState<Record<string, string>>({})
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // Load integrations
+  useEffect(() => {
+    if (!currentWorkspace) return
+
+    const loadIntegrations = async () => {
+      try {
+        setIsLoading(true)
+        const res = await integrationAPI.list(currentWorkspace.id)
+        setIntegrations(res.data.integrations || [])
+      } catch (err) {
+        console.error('Failed to load integrations:', err)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadIntegrations()
+  }, [currentWorkspace])
+
+  if (!currentWorkspace) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-slate-600">Please select a workspace</p>
+      </div>
+    )
+  }
+
+  if (wsLoading || isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="loading-spinner"></div>
+      </div>
+    )
+  }
+
+  const handleSetup = async (e: React.FormEvent, service: 'slack' | 'github' | 'jira') => {
+    e.preventDefault()
+
+    try {
+      setIsSubmitting(true)
+      setError(null)
+
+      await integrationAPI.setup(currentWorkspace.id, service, formData)
+
+      // Reload integrations
+      const res = await integrationAPI.list(currentWorkspace.id)
+      setIntegrations(res.data.integrations || [])
+
+      setShowSetupForm(null)
+      setFormData({})
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to setup integration')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleToggle = async (integrationId: string) => {
+    try {
+      await integrationAPI.toggle(integrationId)
+      const res = await integrationAPI.list(currentWorkspace.id)
+      setIntegrations(res.data.integrations || [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to toggle integration')
+    }
+  }
+
+  const handleDelete = async (integrationId: string) => {
+    if (!window.confirm('Are you sure you want to remove this integration?')) return
+
+    try {
+      await integrationAPI.delete(integrationId)
+      const res = await integrationAPI.list(currentWorkspace.id)
+      setIntegrations(res.data.integrations || [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete integration')
+    }
+  }
+
+  const handleTestIntegration = async (service: 'slack' | 'github' | 'jira') => {
+    try {
+      if (service === 'slack') {
+        await integrationAPI.testSlack(currentWorkspace.id)
+      } else if (service === 'github') {
+        await integrationAPI.testGitHub(currentWorkspace.id)
+      } else if (service === 'jira') {
+        await integrationAPI.testJira(currentWorkspace.id)
+      }
+      alert('Test successful!')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Test failed')
+    }
+  }
+
+  const getIntegration = (service: 'slack' | 'github' | 'jira') => {
+    return integrations.find((i) => i.service_name === service)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-900">Integrations</h1>
+        <p className="text-slate-600 mt-2">
+          Connect with external tools and services to enhance your workflow
+        </p>
+      </div>
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded flex gap-2">
+          <AlertCircle size={18} className="flex-shrink-0 mt-0.5" />
+          <div>
+            <p className="font-medium">Error</p>
+            <p className="text-sm">{error}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Integration Cards Grid */}
+      <div className="grid grid-cols-3 gap-6">
+        {(Object.entries(ServiceConfig) as [string, any][]).map(([key, config]) => {
+          const integration = getIntegration(key as any)
+          const isConfigured = !!integration
+
+          return (
+            <div key={key} className="card space-y-4">
+              <div className="flex items-start justify-between">
+                <div>
+                  <div className="text-3xl mb-2">{config.icon}</div>
+                  <h3 className="text-lg font-semibold text-slate-900">{config.name}</h3>
+                  <p className="text-sm text-slate-600 mt-1">{config.description}</p>
+                </div>
+
+                {isConfigured && (
+                  <div className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1">
+                    <Check size={12} />
+                    Connected
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-2 flex-1">
+                {isConfigured && (
+                  <>
+                    <button
+                      onClick={() => handleTestIntegration(key as any)}
+                      className="btn btn-secondary w-full text-sm"
+                    >
+                      Test Connection
+                    </button>
+                    <button
+                      onClick={() => handleToggle(integration.id)}
+                      className={`btn w-full text-sm ${
+                        integration.is_active
+                          ? 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200'
+                          : 'bg-green-100 text-green-800 hover:bg-green-200'
+                      }`}
+                    >
+                      {integration.is_active ? 'Disable' : 'Enable'}
+                    </button>
+                  </>
+                )}
+
+                <button
+                  onClick={() => {
+                    setShowSetupForm(key as any)
+                    setFormData({})
+                  }}
+                  className="btn btn-primary w-full text-sm flex items-center justify-center gap-2"
+                >
+                  <Plus size={14} />
+                  {isConfigured ? 'Update' : 'Connect'}
+                </button>
+
+                {isConfigured && (
+                  <button
+                    onClick={() => handleDelete(integration.id)}
+                    className="btn btn-secondary w-full text-sm text-red-600 hover:bg-red-50"
+                  >
+                    <Trash2 size={14} className="mx-auto" />
+                  </button>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Setup Form Modal */}
+      {showSetupForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4 max-h-screen overflow-y-auto">
+            <h2 className="text-xl font-bold mb-4">
+              Configure {ServiceConfig[showSetupForm].name}
+            </h2>
+
+            <form
+              onSubmit={(e) => handleSetup(e, showSetupForm)}
+              className="space-y-4"
+            >
+              {ServiceConfig[showSetupForm].fields.map((field: any) => (
+                <div key={field.name}>
+                  <label className="block text-sm font-medium text-slate-700 mb-2">
+                    {field.label}
+                  </label>
+                  <input
+                    type={field.type}
+                    value={formData[field.name] || ''}
+                    onChange={(e) =>
+                      setFormData({ ...formData, [field.name]: e.target.value })
+                    }
+                    className="input w-full"
+                    placeholder={field.label}
+                    disabled={isSubmitting}
+                  />
+                </div>
+              ))}
+
+              <div className="flex gap-3 pt-4">
+                <button type="submit" disabled={isSubmitting} className="btn btn-primary flex-1">
+                  {isSubmitting ? 'Saving...' : 'Save'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowSetupForm(null)}
+                  disabled={isSubmitting}
+                  className="btn btn-secondary flex-1"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/RoleManager.tsx

@@ -0,0 +1,230 @@
+import { useState } from 'react'
+import { useWorkspace } from '../hooks'
+import { Trash2, Edit2, Plus } from 'lucide-react'
+
+export const RoleManager = () => {
+  const { currentWorkspace, members, roles, addMember, removeMember, updateMember, isLoading } =
+    useWorkspace()
+  const [showAddForm, setShowAddForm] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [formData, setFormData] = useState({ userId: '', roleName: '' })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  if (!currentWorkspace) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-slate-600">Please select a workspace</p>
+      </div>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="loading-spinner"></div>
+      </div>
+    )
+  }
+
+  const handleAddMember = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!formData.userId || !formData.roleName) {
+      setError('Please fill in all fields')
+      return
+    }
+
+    try {
+      setIsSubmitting(true)
+      setError(null)
+      await addMember(formData.userId, formData.roleName)
+      setFormData({ userId: '', roleName: '' })
+      setShowAddForm(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to add member')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleUpdateRole = async (memberId: string, newRole: string) => {
+    try {
+      setError(null)
+      await updateMember(memberId, newRole)
+      setEditingId(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update role')
+    }
+  }
+
+  const handleRemoveMember = async (memberId: string) => {
+    if (!window.confirm('Are you sure you want to remove this member?')) return
+
+    try {
+      setError(null)
+      await removeMember(memberId)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to remove member')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900">Roles & Members</h1>
+          <p className="text-slate-600 mt-2">Manage workspace members and their permissions</p>
+        </div>
+        <button
+          onClick={() => setShowAddForm(true)}
+          className="btn btn-primary flex items-center gap-2"
+        >
+          <Plus size={18} />
+          Add Member
+        </button>
+      </div>
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+          {error}
+        </div>
+      )}
+
+      {/* Members Table */}
+      <div className="card">
+        {members.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-slate-600">No members yet. Add one to get started.</p>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-slate-200">
+                  <th className="text-left py-3 px-4 font-semibold text-slate-700">Login</th>
+                  <th className="text-left py-3 px-4 font-semibold text-slate-700">Email</th>
+                  <th className="text-left py-3 px-4 font-semibold text-slate-700">Role</th>
+                  <th className="text-center py-3 px-4 font-semibold text-slate-700">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {members.map((member) => (
+                  <tr key={member.id} className="border-b border-slate-100 hover:bg-slate-50">
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-2">
+                        {member.avatar_url && (
+                          <img
+                            src={member.avatar_url}
+                            alt={member.github_login}
+                            className="w-8 h-8 rounded-full"
+                          />
+                        )}
+                        <span className="font-medium text-slate-900">
+                          {member.github_login}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="py-3 px-4 text-slate-600">{member.email}</td>
+                    <td className="py-3 px-4">
+                      {editingId === member.id ? (
+                        <select
+                          value={member.roles[0] || ''}
+                          onChange={(e) => handleUpdateRole(member.id, e.target.value)}
+                          className="input text-sm"
+                        >
+                          {roles.map((role) => (
+                            <option key={role.id} value={role.name}>
+                              {role.name}
+                            </option>
+                          ))}
+                        </select>
+                      ) : (
+                        <span className="badge badge-success">{member.roles[0] || 'N/A'}</span>
+                      )}
+                    </td>
+                    <td className="py-3 px-4">
+                      <div className="flex items-center justify-center gap-2">
+                        <button
+                          onClick={() =>
+                            setEditingId(editingId === member.id ? null : member.id)
+                          }
+                          className="text-blue-600 hover:text-blue-700 p-2"
+                          title="Edit role"
+                        >
+                          <Edit2 size={16} />
+                        </button>
+                        <button
+                          onClick={() => handleRemoveMember(member.id)}
+                          className="text-red-600 hover:text-red-700 p-2"
+                          title="Remove member"
+                        >
+                          <Trash2 size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Add Member Modal */}
+      {showAddForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h2 className="text-xl font-bold mb-4">Add Member</h2>
+
+            <form onSubmit={handleAddMember} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-2">
+                  User ID
+                </label>
+                <input
+                  type="text"
+                  value={formData.userId}
+                  onChange={(e) => setFormData({ ...formData, userId: e.target.value })}
+                  className="input w-full"
+                  placeholder="GitHub user ID"
+                  disabled={isSubmitting}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-2">Role</label>
+                <select
+                  value={formData.roleName}
+                  onChange={(e) => setFormData({ ...formData, roleName: e.target.value })}
+                  className="input w-full"
+                  disabled={isSubmitting}
+                >
+                  <option value="">Select a role</option>
+                  {roles.map((role) => (
+                    <option key={role.id} value={role.name}>
+                      {role.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="flex gap-3 pt-4">
+                <button type="submit" disabled={isSubmitting} className="btn btn-primary flex-1">
+                  {isSubmitting ? 'Adding...' : 'Add'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowAddForm(false)}
+                  disabled={isSubmitting}
+                  className="btn btn-secondary flex-1"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/Sidebar.tsx

@@ -0,0 +1,62 @@
+import { memo } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import {
+  Home,
+  BarChart3,
+  Folder,
+  Shield,
+  Zap,
+  Settings
+} from 'lucide-react'
+
+const navigationItems = [
+  { path: '/', label: 'Home', icon: Home },
+  { path: '/dashboard', label: 'Analytics', icon: BarChart3 },
+  { path: '/workspaces', label: 'Workspaces', icon: Folder },
+  { path: '/roles', label: 'Roles & Members', icon: Shield },
+  { path: '/integrations', label: 'Integrations', icon: Zap },
+  { path: '/settings', label: 'Settings', icon: Settings }
+]
+
+const SidebarComponent = () => {
+  const location = useLocation()
+
+  return (
+    <aside className="w-64 bg-slate-900 text-white p-4 border-r border-slate-800 flex flex-col h-screen">
+      {/* Logo */}
+      <div className="mb-8">
+        <h1 className="text-xl font-bold flex items-center gap-2">
+          <span className="text-blue-400">🎯</span> Session Wrap
+        </h1>
+      </div>
+
+      {/* Navigation */}
+      <nav className="space-y-2 flex-1">
+        {navigationItems.map(({ path, label, icon: Icon }) => {
+          const isActive = location.pathname === path
+          return (
+            <Link
+              key={path}
+              to={path}
+              className={`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors ${
+                isActive
+                  ? 'bg-blue-600 text-white'
+                  : 'text-slate-300 hover:bg-slate-800'
+              }`}
+            >
+              <Icon size={18} />
+              <span>{label}</span>
+            </Link>
+          )
+        })}
+      </nav>
+
+      {/* Footer */}
+      <div className="border-t border-slate-700 pt-4 text-xs text-slate-400">
+        <p>v3.9.0</p>
+      </div>
+    </aside>
+  )
+}
+
+export const Sidebar = memo(SidebarComponent)