spine-framework-portal 0.1.1

package/components/PortalHeader.tsx

@@ -0,0 +1,149 @@
+import { useState } from 'react'
+import { NavLink, useNavigate } from 'react-router-dom'
+import { Ticket, Users, BookOpen, GraduationCap, Store, LayoutGrid, User, LogOut, Save } from 'lucide-react'
+import { useAuth } from '@core/contexts/AuthContext'
+import { Button } from '@core/components/ui/button'
+import { Avatar, AvatarFallback } from '@core/components/ui/avatar'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@core/components/ui/dialog'
+import { Input } from '@core/components/ui/input'
+import { Label } from '@core/components/ui/label'
+import { Separator } from '@core/components/ui/separator'
+
+const NAV_ITEMS = [
+  { label: 'Tickets',        path: '/portal/tickets',     icon: Ticket },
+  { label: 'Knowledge Base', path: '/portal/kb',          icon: BookOpen },
+  { label: 'Courses',        path: '/portal/courses',     icon: GraduationCap },
+  { label: 'Community',      path: '/portal/community',   icon: Users },
+  { label: 'Marketplace',    path: '/portal/marketplace', icon: Store },
+]
+
+export function PortalHeader() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+  const [accountOpen, setAccountOpen] = useState(false)
+  const [displayName, setDisplayName] = useState(user?.full_name || user?.email?.split('@')[0] || '')
+
+  const initials = (displayName || user?.email || 'U')
+    .split(' ')
+    .map((w: string) => w[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+
+  const handleSave = () => {
+    setAccountOpen(false)
+  }
+
+  const handleSignOut = async () => {
+    await logout()
+    navigate('/login')
+  }
+
+  return (
+    <>
+      <header className="sticky top-0 z-50 bg-background border-b border-border shadow-sm">
+        <div className="flex items-center h-14 px-6 gap-6">
+          <NavLink to="/portal" className="flex items-center gap-2 shrink-0 text-foreground hover:text-primary transition-colors">
+            <LayoutGrid size={18} className="text-primary" />
+            <span className="font-semibold tracking-tight text-sm">Customer Portal</span>
+          </NavLink>
+
+          <nav className="flex items-center gap-1 flex-1">
+            {NAV_ITEMS.map(({ label, path, icon: Icon }) => (
+              <NavLink
+                key={path}
+                to={path}
+                className={({ isActive }) =>
+                  [
+                    'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-accent text-accent-foreground'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-accent/50',
+                  ].join(' ')
+                }
+              >
+                <Icon size={14} />
+                {label}
+              </NavLink>
+            ))}
+          </nav>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="shrink-0 gap-2"
+            onClick={() => setAccountOpen(true)}
+          >
+            <Avatar className="h-6 w-6">
+              <AvatarFallback className="text-xs bg-primary text-primary-foreground">{initials}</AvatarFallback>
+            </Avatar>
+            <span className="text-sm font-medium hidden sm:inline">{displayName || user?.email}</span>
+          </Button>
+        </div>
+      </header>
+
+      <Dialog open={accountOpen} onOpenChange={setAccountOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Account</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            <div className="flex items-center gap-4">
+              <Avatar className="h-14 w-14">
+                <AvatarFallback className="text-lg bg-primary text-primary-foreground">{initials}</AvatarFallback>
+              </Avatar>
+              <div>
+                <p className="font-medium">{displayName || '—'}</p>
+                <p className="text-sm text-muted-foreground">{user?.email}</p>
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="space-y-4">
+              <div className="space-y-1.5">
+                <Label htmlFor="display-name">Display Name</Label>
+                <Input
+                  id="display-name"
+                  value={displayName}
+                  onChange={e => setDisplayName(e.target.value)}
+                  placeholder="Your name"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label>Email</Label>
+                <Input value={user?.email || ''} disabled className="text-muted-foreground" />
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="space-y-1.5">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Account Info</p>
+              <div className="text-sm text-muted-foreground space-y-1">
+                <p>Role: <span className="text-foreground font-medium capitalize">{user?.roles?.[0] || 'member'}</span></p>
+                <p>Account: <span className="text-foreground font-medium">{user?.account?.display_name || '—'}</span></p>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="flex-col sm:flex-row gap-2">
+            <Button
+              variant="outline"
+              className="text-destructive hover:text-destructive gap-2 sm:mr-auto"
+              onClick={handleSignOut}
+            >
+              <LogOut size={14} />
+              Sign Out
+            </Button>
+            <Button onClick={handleSave} className="gap-2">
+              <Save size={14} />
+              Save Changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/components/PortalSidebar.tsx

@@ -0,0 +1,140 @@
+/**
+ * @module PortalSidebar
+ * @audience installer
+ * @layer frontend-component
+ * @stability stable
+ *
+ * Sidebar for Customer Portal with ticket/content navigation.
+ */
+
+import * as React from "react"
+import { PlusIcon, Ticket, BookOpen, GraduationCap, MessageSquare, HelpCircle, Settings, Layout } from "lucide-react"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@core/components/ui/sidebar"
+import { Button } from "@core/components/ui/button"
+
+const navItems = [
+  {
+    title: "Tickets",
+    url: "/portal/tickets",
+    icon: Ticket,
+  },
+  {
+    title: "Knowledge Base",
+    url: "/portal/kb",
+    icon: BookOpen,
+  },
+  {
+    title: "Courses",
+    url: "/portal/courses",
+    icon: GraduationCap,
+  },
+  {
+    title: "Community",
+    url: "/portal/community",
+    icon: MessageSquare,
+  },
+]
+
+const supportItems = [
+  {
+    title: "Help Center",
+    url: "/portal/help",
+    icon: HelpCircle,
+  },
+  {
+    title: "Settings",
+    url: "/portal/settings",
+    icon: Settings,
+  },
+]
+
+export function PortalSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        {/* Brand Header */}
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="/portal">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <span className="text-sm font-bold">P</span>
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">Portal</span>
+                  <span className="text-xs text-muted-foreground">Support</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+
+        {/* Quick Create Button */}
+        <SidebarGroup className="py-2">
+          <Button className="w-full" size="sm">
+            <PlusIcon className="mr-2 h-4 w-4" />
+            New Ticket
+          </Button>
+        </SidebarGroup>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Support</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon className="h-4 w-4" />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Resources</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {supportItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon className="h-4 w-4" />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="p-4">
+        <div className="text-xs text-muted-foreground">
+          Customer Portal
+        </div>
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  )
+}

package/components/ProgressTracker.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { CheckCircle, Circle } from 'lucide-react'
+import { Button } from '@core/components/ui/button'
+
+interface ProgressTrackerProps {
+  sequence?: number
+  onComplete?: () => void
+  completed?: boolean
+}
+
+export function ProgressTracker({ sequence, onComplete, completed = false }: ProgressTrackerProps) {
+  const [isCompleted, setIsCompleted] = useState(completed)
+
+  const handleComplete = () => {
+    if (isCompleted) return
+    setIsCompleted(true)
+    onComplete?.()
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      {sequence && (
+        <span className="text-sm text-muted-foreground">Lesson {sequence}</span>
+      )}
+
+      <Button
+        variant={isCompleted ? 'default' : 'outline'}
+        size="sm"
+        onClick={handleComplete}
+        disabled={isCompleted}
+        className="gap-1.5"
+      >
+        {isCompleted ? <><CheckCircle size={13} /> Completed</> : <><Circle size={13} /> Mark Complete</>}
+      </Button>
+
+      {isCompleted && (
+        <span className="text-xs text-muted-foreground">Progress saved!</span>
+      )}
+    </div>
+  )
+}

package/components/SearchFilterBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Search } from 'lucide-react'
+import { Input } from '@core/components/ui/input'
+
+interface SearchFilterBarProps {
+  placeholder?: string
+  value: string
+  onChange: (value: string) => void
+  children?: React.ReactNode
+}
+
+export function SearchFilterBar({ placeholder = 'Search…', value, onChange, children }: SearchFilterBarProps) {
+  return (
+    <div className="relative flex-1">
+      <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+      <Input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="pl-9 h-9"
+      />
+      {children}
+    </div>
+  )
+}

package/components/StatusBadge.tsx

@@ -0,0 +1,44 @@
+import { Badge } from '@core/components/ui/badge'
+
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
+
+const STATUS_VARIANTS: Record<string, BadgeVariant> = {
+  new:         'default',
+  open:        'default',
+  working:     'outline',
+  pending:     'outline',
+  in_progress: 'outline',
+  returned:    'destructive',
+  resolved:    'secondary',
+  completed:   'secondary',
+  closed:      'secondary',
+  not_started: 'secondary',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  new:         'New',
+  working:     'Working',
+  pending:     'Pending',
+  returned:    'Returned',
+  resolved:    'Resolved',
+  closed:      'Closed',
+  open:        'Open',
+  completed:   'Completed',
+  not_started: 'Not Started',
+  in_progress: 'In Progress',
+}
+
+interface StatusBadgeProps {
+  status: string
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  const variant = STATUS_VARIANTS[status] ?? 'secondary'
+  const label = STATUS_LABELS[status] ?? status
+
+  return (
+    <Badge variant={variant} className="text-xs">
+      {label}
+    </Badge>
+  )
+}

package/components/ThreadPanel.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import { Send } from 'lucide-react'
+import { usePortalThreads, usePortalMessages } from '../hooks/usePortalData'
+import { Button } from '@core/components/ui/button'
+import { Input } from '@core/components/ui/input'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+
+interface ThreadPanelProps {
+  itemId: string
+  itemType: string
+  context: string
+  collapsible?: boolean
+}
+
+export function ThreadPanel({ itemId, itemType, context, collapsible = false }: ThreadPanelProps) {
+  const [expanded, setExpanded] = useState(!collapsible)
+  const [newMessage, setNewMessage] = useState('')
+
+  const { threads, loading: threadsLoading } = usePortalThreads(itemId)
+  const { messages, loading: messagesLoading } = usePortalMessages(threads[0]?.id || '')
+
+  const handleSendMessage = async () => {
+    if (!newMessage.trim()) return
+    console.log('Sending message:', newMessage)
+    setNewMessage('')
+  }
+
+  if (threadsLoading) {
+    return (
+      <div className="p-4 space-y-2">
+        <Skeleton className="h-10 w-2/3" />
+        <Skeleton className="h-10 w-1/2 ml-auto" />
+      </div>
+    )
+  }
+
+  if (threads.length === 0) {
+    return (
+      <div className="text-center py-8 text-sm text-muted-foreground">
+        No conversation yet. Be the first to start the discussion!
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {collapsible && (
+        <div className="flex items-center justify-between">
+          <h4 className="font-medium text-sm">Discussion</h4>
+          <Button variant="ghost" size="sm" onClick={() => setExpanded(!expanded)}>
+            {expanded ? 'Hide' : 'Show'}
+          </Button>
+        </div>
+      )}
+
+      {expanded && (
+        <>
+          <ScrollArea className="max-h-96">
+            <div className="space-y-3">
+              {messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={`flex ${message.direction === 'in' ? 'justify-start' : 'justify-end'}`}
+                >
+                  <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg text-sm border ${
+                    message.direction === 'in'
+                      ? 'bg-muted text-foreground border-border'
+                      : 'bg-primary text-primary-foreground border-primary'
+                  }`}>
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="text-xs font-medium">
+                        {(message as any).author_name || (message.direction === 'in' ? 'Customer' : 'Support')}
+                      </span>
+                      <span className="text-xs opacity-75">
+                        {new Date(message.created_at).toLocaleTimeString()}
+                      </span>
+                    </div>
+                    <p className="whitespace-pre-wrap">{message.content}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+
+          <div className="flex gap-2">
+            <Input
+              value={newMessage}
+              onChange={(e) => setNewMessage(e.target.value)}
+              placeholder="Type your message…"
+              onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+              className="flex-1"
+            />
+            <Button onClick={handleSendMessage} disabled={!newMessage.trim()} size="icon">
+              <Send size={14} />
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/components/UnifiedItemCard.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import { PortalItem } from '../hooks/usePortalData'
+import { ThreadPanel } from './ThreadPanel'
+import { Button } from '@core/components/ui/button'
+import { Badge } from '@core/components/ui/badge'
+import { StatusBadge } from './StatusBadge'
+
+interface UnifiedItemCardProps {
+  item: PortalItem
+  compact?: boolean
+  onVote?: (helpful: boolean) => void
+  onProgress?: () => void
+  onAIResponse?: () => void
+  onClick?: () => void
+  showThread?: boolean
+}
+
+export function UnifiedItemCard({
+  item,
+  compact = false,
+  onVote,
+  onProgress,
+  onAIResponse,
+  onClick,
+  showThread = false,
+}: UnifiedItemCardProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  const getContextIcon = (context: string) => {
+    switch (context) {
+      case 'support': return '🎫'
+      case 'community': return '💬'
+      case 'kb': return '📚'
+      case 'course': return '🎓'
+      default: return '📄'
+    }
+  }
+
+  const renderContent = () => {
+    if (compact) return null
+    const text = String(item.data?.description || item.data?.summary || 'No description provided.')
+    return <p className="text-sm text-muted-foreground mt-2">{text}</p>
+  }
+
+  const renderActions = () => {
+    if (compact) return null
+    return (
+      <div className="flex items-center gap-2 mt-4">
+        {item.context === 'support' && onAIResponse && (
+          <Button variant="outline" size="sm" onClick={onAIResponse}>Get AI Help</Button>
+        )}
+        {(item.context === 'community' || item.context === 'kb') && onVote && (
+          <>
+            <Button variant="ghost" size="sm" onClick={() => onVote(true)}>👍 Helpful</Button>
+            <Button variant="ghost" size="sm" onClick={() => onVote(false)}>👎 Not Helpful</Button>
+          </>
+        )}
+        {item.context === 'course' && onProgress && (
+          <Button variant="outline" size="sm" onClick={onProgress}>Mark Complete</Button>
+        )}
+        {showThread && (
+          <Button variant="ghost" size="sm" onClick={() => setExpanded(!expanded)}>
+            {expanded ? 'Hide' : 'Show'} Discussion
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`border border-border rounded-lg ${compact ? 'p-3' : 'p-4'} hover:shadow-sm transition-shadow cursor-pointer bg-card`}
+      onClick={onClick}
+    >
+      <div className="space-y-3">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <h3 className="font-medium text-sm">{item.title}</h3>
+            <div className="flex items-center gap-2 mt-1.5 flex-wrap">
+              <span className="text-xs text-muted-foreground flex items-center gap-1">
+                {getContextIcon(item.context)} {item.context}
+              </span>
+              <StatusBadge status={item.status} />
+              {item.data?.priority && (
+                <Badge variant="outline" className="text-xs">
+                  Priority: {String(item.data.priority)}
+                </Badge>
+              )}
+              <span className="text-xs text-muted-foreground">
+                {new Date(item.created_at).toLocaleDateString()}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {renderContent()}
+        {renderActions()}
+      </div>
+
+      {expanded && showThread && (
+        <div className="mt-4 pt-4 border-t border-border">
+          <ThreadPanel itemId={item.id} itemType="content" context="portal" />
+        </div>
+      )}
+    </div>
+  )
+}

package/components/VotingComponent.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { ThumbsUp, ThumbsDown } from 'lucide-react'
+import { Button } from '@core/components/ui/button'
+
+interface VotingComponentProps {
+  helpfulCount: number
+  notHelpfulCount?: number
+  onVote?: (helpful: boolean) => void
+}
+
+export function VotingComponent({ helpfulCount, notHelpfulCount = 0, onVote }: VotingComponentProps) {
+  const [hasVoted, setHasVoted] = useState(false)
+  const [voteType, setVoteType] = useState<'helpful' | 'not-helpful' | null>(null)
+
+  const handleVote = (helpful: boolean) => {
+    if (hasVoted) return
+    setHasVoted(true)
+    setVoteType(helpful ? 'helpful' : 'not-helpful')
+    onVote?.(helpful)
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant={voteType === 'helpful' ? 'default' : 'outline'}
+        size="sm"
+        onClick={() => handleVote(true)}
+        disabled={hasVoted}
+        className="gap-1.5"
+      >
+        <ThumbsUp size={13} /> Helpful {helpfulCount > 0 && `(${helpfulCount})`}
+      </Button>
+
+      {notHelpfulCount > 0 && (
+        <Button
+          variant={voteType === 'not-helpful' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => handleVote(false)}
+          disabled={hasVoted}
+          className="gap-1.5"
+        >
+          <ThumbsDown size={13} /> Not Helpful ({notHelpfulCount})
+        </Button>
+      )}
+
+      {hasVoted && (
+        <span className="text-xs text-muted-foreground">Thanks for your feedback!</span>
+      )}
+    </div>
+  )
+}