spine-framework-portal 0.1.1

package/pages/ContentPage.tsx

@@ -0,0 +1,269 @@
+import { useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { usePortalItems, usePipelineIntegration, useItemManagement } from '../hooks/usePortalHooks'
+import { UnifiedItemCard } from '../components/UnifiedItemCard'
+
+// Simple UI components to avoid import issues
+function Button({ children, variant = 'primary', onClick, disabled, loading }: { 
+  children: React.ReactNode; 
+  variant?: 'primary' | 'outline' | 'ghost'; 
+  onClick?: () => void; 
+  disabled?: boolean; 
+  loading?: boolean; 
+}) {
+  const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"
+  const variantClasses = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-400",
+    outline: "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50",
+    ghost: "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+  }
+  
+  return (
+    <button 
+      className={`${baseClasses} ${variantClasses[variant]}`}
+      onClick={onClick}
+      disabled={disabled || loading}
+    >
+      {loading ? 'Loading...' : children}
+    </button>
+  )
+}
+
+function Card({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={`bg-white rounded-lg shadow border border-gray-200 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+Card.Header = function({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="px-6 py-4 border-b border-gray-200">
+      {children}
+    </div>
+  )
+}
+
+Card.Content = function({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="px-6 py-4">
+      {children}
+    </div>
+  )
+}
+
+function Badge({ children, variant = 'default' }: { children: React.ReactNode; variant?: string }) {
+  const variantClasses = {
+    default: "bg-gray-100 text-gray-800",
+    success: "bg-green-100 text-green-800",
+    error: "bg-red-100 text-red-800",
+    warning: "bg-yellow-100 text-yellow-800",
+    info: "bg-blue-100 text-blue-800"
+  }
+  
+  return (
+    <span className={`px-2 py-1 rounded-full text-xs font-medium ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default}`}>
+      {children}
+    </span>
+  )
+}
+
+// Mock data for content items
+const mockContentItems = [
+  {
+    id: 'kb1',
+    type_slug: 'kb_article',
+    context: 'kb',
+    title: 'Getting Started with Spine Portal',
+    status: 'published',
+    created_at: new Date().toISOString(),
+    helpful_count: 12,
+    not_helpful_count: 1
+  },
+  {
+    id: 'course1',
+    type_slug: 'course_lesson',
+    context: 'course',
+    title: 'Introduction to Customer Support',
+    status: 'published',
+    created_at: new Date().toISOString(),
+    helpful_count: 8,
+    not_helpful_count: 0
+  }
+]
+
+/**
+ * Content Page - Unified view for Knowledge Base articles and Course lessons
+ */
+export function ContentPage() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const [filter, setFilter] = useState<'all' | 'kb' | 'course'>('all')
+  
+  // Use the unified portal hooks (automatically switches between mock/real)
+  const { items, loading, error, refetch } = usePortalItems('content', {
+    context: filter === 'all' ? undefined : filter
+  })
+  
+  const { triggerPipeline, loading: pipelineLoading } = usePipelineIntegration()
+  const { createItem } = useItemManagement()
+
+  // Find selected item based on URL parameter
+  const selectedItem = id ? items.find(item => item.id === id) : null
+
+  const handleVote = (itemId: string, helpful: boolean) => {
+    // TODO: Implement voting functionality
+    console.log('Vote for item', itemId, helpful ? 'helpful' : 'not helpful')
+  }
+
+  const handleProgress = (itemId: string) => {
+    // TODO: Implement progress tracking
+    console.log('Progress updated for item:', itemId)
+  }
+
+  const handleGenerateKB = async (sourceItemId: string, sourceType: 'ticket' | 'question') => {
+    try {
+      const pipelineId = sourceType === 'ticket' 
+        ? 'kb-generation-from-tickets' 
+        : 'kb-generation-from-questions'
+      
+      const execution = await triggerPipeline(pipelineId, {
+        source_item_id: sourceItemId,
+        source_type: sourceType,
+        triggered_by: 'user_action'
+      })
+      console.log('KB generation started via core pipeline:', execution)
+    } catch (error) {
+      console.error('KB generation failed:', error)
+    }
+  }
+
+  const handleCreateArticle = async () => {
+    try {
+      const newItem = await createItem({
+        type_slug: 'kb_article',
+        context: 'kb',
+        title: 'New KB Article',
+        status: 'draft'
+      })
+      console.log('Created article:', newItem)
+      refetch()
+    } catch (error) {
+      console.error('Failed to create article:', error)
+    }
+  }
+
+  const handleCreateLesson = async () => {
+    try {
+      const newItem = await createItem({
+        type_slug: 'course_lesson',
+        context: 'course',
+        title: 'New Course Lesson',
+        status: 'draft'
+      })
+      console.log('Created lesson:', newItem)
+      refetch()
+    } catch (error) {
+      console.error('Failed to create lesson:', error)
+    }
+  }
+
+  // Handle loading state
+  if (loading) {
+    return (
+      <div className="max-w-6xl mx-auto space-y-6">
+        <div className="flex justify-center py-8">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        </div>
+      </div>
+    )
+  }
+
+  // Handle error state
+  if (error) {
+    return (
+      <div className="max-w-6xl mx-auto space-y-6">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <h3 className="text-red-800 font-medium">Error loading content</h3>
+          <p className="text-red-600">{error.message}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (selectedItem) {
+    return (
+      <div className="max-w-4xl mx-auto space-y-6">
+        <Button variant="ghost" onClick={() => navigate('/portal/content')}>
+          ← Back to Content
+        </Button>
+
+        <UnifiedItemCard
+          item={selectedItem}
+          onVote={(helpful) => handleVote(selectedItem.id, helpful)}
+          onProgress={() => handleProgress(selectedItem.id)}
+          showThread={true}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Knowledge Base & Courses</h1>
+          <p className="text-gray-600">Articles and learning materials</p>
+        </div>
+        <div className="flex gap-2">
+          <Button onClick={handleCreateArticle}>
+            + New Article
+          </Button>
+          <Button onClick={handleCreateLesson}>
+            + New Lesson
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        <Button 
+          variant={filter === 'all' ? 'primary' : 'outline'}
+          onClick={() => setFilter('all')}
+        >
+          All
+        </Button>
+        <Button 
+          variant={filter === 'kb' ? 'primary' : 'outline'}
+          onClick={() => setFilter('kb')}
+        >
+          Knowledge Base
+        </Button>
+        <Button 
+          variant={filter === 'course' ? 'primary' : 'outline'}
+          onClick={() => setFilter('course')}
+        >
+          Courses
+        </Button>
+      </div>
+
+      <div className="space-y-4">
+        {items.map(item => (
+          <UnifiedItemCard
+            key={item.id}
+            item={item}
+            onVote={(helpful) => handleVote(item.id, helpful)}
+            onProgress={() => handleProgress(item.id)}
+            onClick={() => navigate(`/portal/content/${item.id}`)}
+          />
+        ))}
+        
+        {items.length === 0 && (
+          <div className="text-center py-8 text-gray-500">
+            No content found. Create your first KB article or course lesson!
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/pages/CoursesPage.tsx

@@ -0,0 +1,253 @@
+import { useState, useEffect, useRef } from 'react'
+import { CheckCircle, Circle, PlayCircle, GraduationCap, Send } from 'lucide-react'
+import { useCourseLessons, type CourseItem } from '../hooks/useCourses'
+import { usePortalSignal } from '../hooks/usePortalSignal'
+import { useItemProgress, useUpsertProgress } from '../hooks/useItemProgress'
+import { usePortalThread } from '../hooks/usePortalThreads'
+import { getTypeIdAsync } from '../hooks/useTypeRegistry'
+import { useAuth } from '@core/contexts/AuthContext'
+import { SearchFilterBar } from '../components/SearchFilterBar'
+import { Button } from '@core/components/ui/button'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { Badge } from '@core/components/ui/badge'
+import { Separator } from '@core/components/ui/separator'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+import { Progress } from '@core/components/ui/progress'
+import { Textarea } from '@core/components/ui/textarea'
+
+const PROGRESS_TYPE_SLUG = 'course_lesson_progress'
+const LAST_LESSON_KEY = 'portal:last-lesson'
+
+function groupByCourse(lessons: CourseItem[]): Map<string, CourseItem[]> {
+  const map = new Map<string, CourseItem[]>()
+  for (const lesson of lessons) {
+    const courseKey = (lesson.data?.course_title as string) || (lesson.data?.course_id as string) || 'General'
+    if (!map.has(courseKey)) map.set(courseKey, [])
+    map.get(courseKey)!.push(lesson)
+  }
+  for (const [key, list] of map) {
+    map.set(key, [...list].sort((a, b) => {
+      const sa = (a.data?.sequence as number) ?? 9999
+      const sb = (b.data?.sequence as number) ?? 9999
+      return sa - sb
+    }))
+  }
+  return map
+}
+
+export function CoursesPage() {
+  const { user } = useAuth()
+  const [search, setSearch] = useState('')
+  const [selectedCourse, setSelectedCourse] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(() => localStorage.getItem(LAST_LESSON_KEY))
+  const [replyText, setReplyText] = useState('')
+  const [replying, setReplying] = useState(false)
+  const progressTypeIdRef = useRef<string | null>(null)
+
+  const { lessons, loading, error } = useCourseLessons()
+  const lessonIds = lessons.map((l) => l.id)
+  const { progressMap, refetch: refetchProgress } = useItemProgress(user?.id ?? null, lessonIds)
+  const { upsert } = useUpsertProgress()
+  const { messages, reply } = usePortalThread('items', selectedId)
+  const { sendSignal } = usePortalSignal()
+
+  useEffect(() => {
+    if (!selectedId || lessons.length === 0) return
+    const lesson = lessons.find((l) => l.id === selectedId)
+    if (lesson) {
+      const key = (lesson.data?.course_title as string) || (lesson.data?.course_id as string) || 'General'
+      setSelectedCourse(key)
+    }
+  }, [lessons, selectedId])
+
+  useEffect(() => {
+    getTypeIdAsync(PROGRESS_TYPE_SLUG).then((id) => { progressTypeIdRef.current = id })
+  }, [])
+
+  const courseMap = groupByCourse(lessons)
+  const courseNames = Array.from(courseMap.keys())
+  const filteredCourses = courseNames.filter((c) => c.toLowerCase().includes(search.toLowerCase()))
+  const chaptersForCourse = selectedCourse ? (courseMap.get(selectedCourse) ?? []) : []
+  const selected = lessons.find((l) => l.id === selectedId) ?? null
+
+  const getStatus = (id: string) => progressMap.get(id)?.status ?? 'not_started'
+
+  const handleSelectLesson = async (lessonId: string) => {
+    setSelectedId(lessonId)
+    localStorage.setItem(LAST_LESSON_KEY, lessonId)
+    const typeId = progressTypeIdRef.current
+    if (!typeId || !user?.id || !user?.account_id) return
+    const existing = progressMap.get(lessonId)
+    if (!existing || existing.status === 'not_started') {
+      await upsert({ personId: user.id, itemId: lessonId, typeId, accountId: user.account_id, status: 'in_progress' })
+      refetchProgress()
+      sendSignal('lesson_start', 'Started a course lesson')
+    }
+  }
+
+  const handleComplete = async () => {
+    if (!selectedId || !user?.id || !user?.account_id) return
+    const typeId = progressTypeIdRef.current
+    if (!typeId) return
+    await upsert({ personId: user.id, itemId: selectedId, typeId, accountId: user.account_id, status: 'completed' })
+    refetchProgress()
+    sendSignal('lesson_complete', 'Completed a course lesson')
+  }
+
+  const handleReply = async () => {
+    if (!replyText.trim()) return
+    setReplying(true)
+    try { await reply(replyText.trim()); setReplyText('') }
+    finally { setReplying(false) }
+  }
+
+  const isCompleted = selectedId ? getStatus(selectedId) === 'completed' : false
+  const videoUrl = selected?.data?.video_url as string | undefined
+  const content = selected?.data?.content as string | undefined
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border bg-background shrink-0">
+        <SearchFilterBar placeholder="Search courses…" value={search} onChange={setSearch} />
+      </div>
+      {error && <div className="px-4 py-2 text-sm text-destructive border-b border-border shrink-0">{error}</div>}
+      <div className="flex flex-1 min-h-0">
+
+        {/* Col 1 — course list */}
+        <div className="w-48 shrink-0 border-r border-border flex flex-col min-h-0">
+          <div className="px-4 py-2 border-b border-border shrink-0">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Courses</p>
+          </div>
+          <div className="flex-1 overflow-y-auto">
+            {loading ? (
+              <div className="p-4 space-y-2">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+            ) : filteredCourses.length === 0 ? (
+              <div className="p-4 text-sm text-muted-foreground">No courses found.</div>
+            ) : filteredCourses.map((courseName) => {
+              const cl = courseMap.get(courseName) ?? []
+              const done = cl.filter((l) => getStatus(l.id) === 'completed').length
+              const pct = cl.length > 0 ? Math.round((done / cl.length) * 100) : 0
+              return (
+                <button key={courseName}
+                  onClick={() => { setSelectedCourse(courseName); setSelectedId(null); sendSignal('course_view', `Viewed course: ${courseName}`) }}
+                  className={`w-full text-left px-4 py-3 border-b border-border hover:bg-accent/50 transition-colors ${selectedCourse === courseName ? 'bg-accent border-l-2 border-l-primary' : ''}`}
+                >
+                  <p className={`text-sm font-medium truncate ${selectedCourse === courseName ? 'text-primary' : ''}`}>{courseName}</p>
+                  <div className="mt-1.5 space-y-0.5">
+                    <Progress value={pct} className="h-1" />
+                    <p className="text-xs text-muted-foreground">{done}/{cl.length} done</p>
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Col 2 — chapters */}
+        <div className="w-72 shrink-0 border-r border-border flex flex-col min-h-0">
+          <div className="px-4 py-2 border-b border-border shrink-0">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Chapters</p>
+          </div>
+          <div className="flex-1 overflow-y-auto">
+            {!selectedCourse ? (
+              <div className="p-4 text-sm text-muted-foreground">Select a course</div>
+            ) : chaptersForCourse.length === 0 ? (
+              <div className="p-4 text-sm text-muted-foreground">No chapters.</div>
+            ) : chaptersForCourse.map((lesson) => {
+              const seq = (lesson.data?.sequence as number) ?? null
+              const status = getStatus(lesson.id)
+              return (
+                <button key={lesson.id} onClick={() => handleSelectLesson(lesson.id)}
+                  className={`w-full text-left px-4 py-3 border-b border-border hover:bg-accent/50 flex items-center gap-2 transition-colors ${selectedId === lesson.id ? 'bg-accent border-l-2 border-l-primary' : ''}`}
+                >
+                  {status === 'completed'
+                    ? <CheckCircle size={14} className="text-primary shrink-0" />
+                    : status === 'in_progress'
+                      ? <PlayCircle size={14} className="text-amber-500 shrink-0" />
+                      : <Circle size={14} className="text-muted-foreground/40 shrink-0" />
+                  }
+                  <p className={`text-sm truncate ${selectedId === lesson.id ? 'text-primary font-medium' : ''}`}>
+                    {seq != null ? `${seq}. ` : ''}{lesson.title}
+                  </p>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Col 3 — content + discussion */}
+        <div className="flex-1 min-h-0 flex flex-col">
+          {!selected ? (
+            <div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+              <GraduationCap size={32} className="opacity-30" />
+              <p className="text-sm">{selectedCourse ? 'Select a chapter to begin' : 'Select a course to get started'}</p>
+            </div>
+          ) : (
+            <>
+              <div className="px-6 py-3 border-b border-border flex items-center justify-between shrink-0">
+                <div>
+                  <h2 className="text-base font-semibold">{selected.title}</h2>
+                  {selected.description && <p className="text-xs text-muted-foreground mt-0.5">{selected.description}</p>}
+                </div>
+                <div className="flex items-center gap-2">
+                  {isCompleted
+                    ? <Badge variant="secondary" className="gap-1"><CheckCircle size={12} /> Completed</Badge>
+                    : <Button size="sm" onClick={handleComplete}>Mark Complete</Button>
+                  }
+                </div>
+              </div>
+
+              <ScrollArea className="flex-1 border-b border-border">
+                <div className="px-6 py-5 max-w-2xl space-y-6">
+                  {videoUrl && (
+                    <div className="aspect-video bg-muted rounded-lg overflow-hidden flex items-center justify-center border border-border">
+                      <a href={videoUrl} target="_blank" rel="noopener noreferrer"
+                        className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
+                        <PlayCircle size={48} />
+                        <span className="text-sm">Watch Video</span>
+                      </a>
+                    </div>
+                  )}
+                  {content && (<><Separator /><div className="text-sm leading-relaxed whitespace-pre-wrap">{content}</div></>)}
+                  {!videoUrl && !content && (
+                    <p className="text-sm text-muted-foreground italic">No content available for this chapter.</p>
+                  )}
+                </div>
+              </ScrollArea>
+
+              {/* Discussion panel */}
+              <div className="shrink-0 border-t border-border flex flex-col" style={{ maxHeight: '260px' }}>
+                <div className="px-4 py-2 border-b border-border shrink-0">
+                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Discussion</p>
+                </div>
+                <ScrollArea className="flex-1 px-4 py-2">
+                  {messages.length === 0 ? (
+                    <p className="text-xs text-muted-foreground py-2">No discussion yet. Be the first to comment.</p>
+                  ) : messages.map((msg) => (
+                    <div key={msg.id} className="mb-3">
+                      <p className="text-xs text-muted-foreground mb-0.5">{new Date(msg.created_at).toLocaleString()}</p>
+                      <p className="text-sm">{msg.content}</p>
+                    </div>
+                  ))}
+                </ScrollArea>
+                <div className="px-4 py-2 flex gap-2 shrink-0">
+                  <Textarea
+                    value={replyText}
+                    onChange={(e) => setReplyText(e.target.value)}
+                    placeholder="Add a comment…"
+                    className="text-sm resize-none"
+                    rows={2}
+                    onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleReply() }}
+                  />
+                  <Button size="sm" onClick={handleReply} disabled={replying || !replyText.trim()} className="self-end">
+                    <Send size={14} />
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/pages/HomePage.tsx

@@ -0,0 +1,137 @@
+import { useNavigate } from 'react-router-dom'
+import { Ticket, Users, BookOpen, GraduationCap, Store, ArrowRight } from 'lucide-react'
+import { useAuth } from '@core/contexts/AuthContext'
+import { Card, CardContent, CardHeader } from '@core/components/ui/card'
+import { Button } from '@core/components/ui/button'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { Badge } from '@core/components/ui/badge'
+import { useTickets } from '../hooks/useTickets'
+import { useKBArticles } from '../hooks/useKBArticles'
+import { useCourseLessons } from '../hooks/useCourses'
+import { useCommunityPosts } from '../hooks/useCommunity'
+
+function StatSkeleton() {
+  return <Skeleton className="h-4 w-20 mt-1" />
+}
+
+export function HomePage() {
+  const { user } = useAuth()
+  const navigate = useNavigate()
+
+  const { tickets, loading: ticketsLoading } = useTickets()
+  const { articles, loading: articlesLoading } = useKBArticles()
+  const { lessons, loading: lessonsLoading } = useCourseLessons()
+  const { posts, loading: postsLoading } = useCommunityPosts()
+
+  const openTickets = tickets.filter(t => t.status !== 'closed' && t.status !== 'resolved').length
+  const firstName = user?.full_name?.split(' ')[0] || user?.email?.split('@')[0] || 'there'
+
+  const SECTIONS = [
+    {
+      icon: Ticket,
+      label: 'Tickets',
+      path: '/portal/tickets',
+      description: 'Submit and track your support requests. Get help from our team and stay updated on your issues.',
+      stat: ticketsLoading ? null : `${openTickets} open ticket${openTickets !== 1 ? 's' : ''}`,
+      loading: ticketsLoading,
+      badgeVariant: openTickets > 0 ? 'default' : 'secondary',
+    },
+    {
+      icon: Users,
+      label: 'Community',
+      path: '/portal/community',
+      description: 'Join discussions, ask questions, and connect with other users in our community forums.',
+      stat: postsLoading ? null : `${posts.length} discussion${posts.length !== 1 ? 's' : ''}`,
+      loading: postsLoading,
+      badgeVariant: 'secondary',
+    },
+    {
+      icon: GraduationCap,
+      label: 'Courses',
+      path: '/portal/courses',
+      description: 'Learn at your own pace with guided courses and lessons tailored to help you get the most out of the platform.',
+      stat: lessonsLoading ? null : `${lessons.length} lesson${lessons.length !== 1 ? 's' : ''} available`,
+      loading: lessonsLoading,
+      badgeVariant: 'secondary',
+    },
+    {
+      icon: BookOpen,
+      label: 'Knowledge Base',
+      path: '/portal/kb',
+      description: 'Browse articles, guides, and documentation to find answers quickly without waiting for support.',
+      stat: articlesLoading ? null : `${articles.length} article${articles.length !== 1 ? 's' : ''}`,
+      loading: articlesLoading,
+      badgeVariant: 'secondary',
+    },
+  ] as const
+
+  return (
+    <div className="flex flex-col min-h-full">
+      <div className="flex-1 max-w-4xl mx-auto w-full px-6 py-10 space-y-10">
+        {/* Hero */}
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Welcome back, {firstName}
+          </h1>
+          <p className="text-muted-foreground">
+            Your portal for support, learning, and community. What do you need today?
+          </p>
+        </div>
+
+        {/* 2×2 grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {SECTIONS.map(({ icon: Icon, label, path, description, stat, loading, badgeVariant }) => (
+            <Card
+              key={path}
+              className="group cursor-pointer hover:border-primary/40 hover:shadow-sm transition-all"
+              onClick={() => navigate(path)}
+            >
+              <CardHeader className="pb-2">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-2.5">
+                    <div className="p-2 rounded-md bg-primary/10 text-primary">
+                      <Icon size={18} />
+                    </div>
+                    <span className="font-semibold text-base">{label}</span>
+                  </div>
+                  <ArrowRight size={16} className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity mt-1" />
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
+                {loading ? (
+                  <StatSkeleton />
+                ) : (
+                  <Badge variant={badgeVariant as any} className="text-xs">
+                    {stat}
+                  </Badge>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Marketplace — full width */}
+        <Card
+          className="group cursor-pointer hover:border-primary/40 hover:shadow-sm transition-all border-dashed"
+          onClick={() => navigate('/portal/marketplace')}
+        >
+          <CardContent className="flex items-center gap-6 py-6">
+            <div className="p-3 rounded-md bg-primary/10 text-primary shrink-0">
+              <Store size={22} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-semibold text-base">Marketplace</p>
+              <p className="text-sm text-muted-foreground mt-0.5">
+                Browse plugins, integrations, and apps to extend your portal experience.
+              </p>
+            </div>
+            <Button variant="outline" size="sm" className="shrink-0 gap-1.5">
+              Explore <ArrowRight size={14} />
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}