spine-framework-portal 0.1.1

package/components/CommunityModerator.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import { Shield } from 'lucide-react'
+import { Card, CardContent, CardHeader } from '@core/components/ui/card'
+import { Button } from '@core/components/ui/button'
+import { Badge } from '@core/components/ui/badge'
+import { Separator } from '@core/components/ui/separator'
+
+interface PortalItem {
+  id: string
+  title: string
+  context: string
+  data?: Record<string, unknown>
+}
+
+interface CommunityModeratorProps {
+  post: PortalItem
+  onModerated?: (updates: Partial<PortalItem>) => void
+}
+
+type ModerationStatus = 'pending' | 'approved' | 'flagged'
+
+export function CommunityModerator({ post, onModerated }: CommunityModeratorProps) {
+  const [isModerating, setIsModerating] = useState(false)
+  const [showDetails, setShowDetails] = useState(false)
+
+  if (post.context !== 'community') return null
+
+  const status = (post.data?.moderation_status as ModerationStatus) || 'pending'
+
+  const handleAction = async (action: 'approve' | 'flag') => {
+    setIsModerating(true)
+    await new Promise((r) => setTimeout(r, 300))
+    onModerated?.({
+      ...post,
+      data: { ...post.data, moderation_status: action === 'approve' ? 'approved' : 'flagged', moderated_at: new Date().toISOString() },
+    })
+    setIsModerating(false)
+  }
+
+  const statusVariant: Record<ModerationStatus, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+    approved: 'secondary',
+    flagged: 'destructive',
+    pending: 'outline',
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Shield size={16} className="text-muted-foreground" />
+            <div>
+              <h3 className="font-medium text-sm">Content Moderation</h3>
+              <p className="text-xs text-muted-foreground">AI-powered review for community guidelines</p>
+            </div>
+          </div>
+          <Badge variant={statusVariant[status]}>
+            {isModerating ? 'Reviewing…' : status.charAt(0).toUpperCase() + status.slice(1)}
+          </Badge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="rounded-md border border-border bg-muted/30 p-3">
+          <p className="text-xs font-medium text-muted-foreground mb-1">Content Preview</p>
+          <p className="text-sm line-clamp-3">{String(post.data?.content || 'No content')}</p>
+        </div>
+
+        {showDetails && (
+          <>
+            <Separator />
+            <div className="grid grid-cols-2 gap-3 text-xs text-muted-foreground">
+              <div>Spam: Not detected</div>
+              <div>Toxicity: Clean</div>
+              <div>Clarity: Good</div>
+              <div>Relevance: On-topic</div>
+            </div>
+          </>
+        )}
+
+        <Separator />
+
+        <div className="flex items-center justify-between">
+          <div className="flex gap-2">
+            {status !== 'approved' && (
+              <Button size="sm" onClick={() => handleAction('approve')} disabled={isModerating}>Approve</Button>
+            )}
+            {status !== 'flagged' && (
+              <Button size="sm" variant="outline" onClick={() => handleAction('flag')} disabled={isModerating}>Flag</Button>
+            )}
+            <Button size="sm" variant="ghost" onClick={() => setShowDetails(!showDetails)}>
+              {showDetails ? 'Hide' : 'Details'}
+            </Button>
+          </div>
+          {post.data?.moderated_at && (
+            <span className="text-xs text-muted-foreground">
+              {new Date(String(post.data.moderated_at)).toLocaleString()}
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/CourseProgress.tsx

@@ -0,0 +1,169 @@
+import { useState } from 'react'
+import { CheckCircle, Circle, Lock, Play } from 'lucide-react'
+import { Card, CardContent, CardHeader } from '@core/components/ui/card'
+import { Button } from '@core/components/ui/button'
+import { Badge } from '@core/components/ui/badge'
+import { Separator } from '@core/components/ui/separator'
+import { Progress } from '@core/components/ui/progress'
+
+interface PortalItem {
+  id: string
+  title: string
+  status: string
+  data?: Record<string, unknown>
+}
+
+interface CourseProgressProps {
+  lessons: PortalItem[]
+  currentLesson?: PortalItem
+  onLessonComplete?: (lessonId: string) => void
+  onLessonSelect?: (lessonId: string) => void
+}
+
+interface ProgressState {
+  completedLessons: string[]
+}
+
+export function CourseProgress({
+  lessons,
+  currentLesson,
+  onLessonComplete,
+  onLessonSelect,
+}: CourseProgressProps) {
+  const [progress, setProgress] = useState<ProgressState>({ completedLessons: [] })
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const sortedLessons = [...lessons].sort((a, b) =>
+    (Number(a.data?.sequence) || 0) - (Number(b.data?.sequence) || 0)
+  )
+
+  const completedCount = progress.completedLessons.length
+  const totalCount = sortedLessons.length
+  const progressPct = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0
+
+  const currentIndex = currentLesson
+    ? sortedLessons.findIndex((l) => l.id === currentLesson.id)
+    : -1
+
+  const getLessonStatus = (lesson: PortalItem) => {
+    if (progress.completedLessons.includes(lesson.id)) return 'completed'
+    if (currentLesson?.id === lesson.id) return 'current'
+    const idx = sortedLessons.findIndex((l) => l.id === lesson.id)
+    if (currentIndex >= 0 && idx > currentIndex) return 'locked'
+    return 'available'
+  }
+
+  const handleCompleteLesson = (lessonId: string) => {
+    if (progress.completedLessons.includes(lessonId)) return
+    setProgress((prev) => ({ completedLessons: [...prev.completedLessons, lessonId] }))
+    onLessonComplete?.(lessonId)
+  }
+
+  const StatusIcon = ({ status }: { status: string }) => {
+    if (status === 'completed') return <CheckCircle size={15} className="text-primary shrink-0" />
+    if (status === 'current') return <Play size={15} className="text-primary shrink-0" />
+    if (status === 'locked') return <Lock size={15} className="text-muted-foreground/40 shrink-0" />
+    return <Circle size={15} className="text-muted-foreground/40 shrink-0" />
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="font-medium text-sm">Course Progress</h3>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              {completedCount} of {totalCount} lessons completed
+            </p>
+          </div>
+          <Badge variant="secondary">{progressPct}% Complete</Badge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <Progress value={progressPct} className="h-2" />
+
+        {currentLesson && (
+          <div className="rounded-md border border-border bg-muted/30 p-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Current Lesson</p>
+                <p className="text-sm font-medium mt-0.5">{currentLesson.title}</p>
+                {currentLesson.data?.estimated_duration && (
+                  <p className="text-xs text-muted-foreground">{String(currentLesson.data.estimated_duration)} min</p>
+                )}
+              </div>
+              <Button
+                size="sm"
+                variant={progress.completedLessons.includes(currentLesson.id) ? 'secondary' : 'default'}
+                onClick={() => handleCompleteLesson(currentLesson.id)}
+                disabled={progress.completedLessons.includes(currentLesson.id)}
+              >
+                {progress.completedLessons.includes(currentLesson.id) ? 'Completed' : 'Mark Complete'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <p className="text-xs font-medium">Course Curriculum</p>
+            <Button variant="ghost" size="sm" onClick={() => setIsExpanded(!isExpanded)}>
+              {isExpanded ? 'Collapse' : 'Expand'}
+            </Button>
+          </div>
+
+          <div className={`space-y-1.5 ${isExpanded ? '' : 'max-h-52 overflow-y-auto'}`}>
+            {sortedLessons.map((lesson, index) => {
+              const status = getLessonStatus(lesson)
+              const accessible = status !== 'locked'
+              return (
+                <div
+                  key={lesson.id}
+                  className={`flex items-center gap-2.5 p-2.5 rounded-md border transition-colors ${
+                    status === 'current'
+                      ? 'border-primary/40 bg-primary/5'
+                      : status === 'completed'
+                      ? 'border-border bg-muted/30'
+                      : accessible
+                      ? 'border-border hover:bg-accent/50 cursor-pointer'
+                      : 'border-border bg-muted/30 opacity-50'
+                  }`}
+                  onClick={() => accessible && onLessonSelect?.(lesson.id)}
+                >
+                  <StatusIcon status={status} />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm truncate">{index + 1}. {lesson.title}</p>
+                    {lesson.data?.estimated_duration && (
+                      <p className="text-xs text-muted-foreground">{String(lesson.data.estimated_duration)} min</p>
+                    )}
+                  </div>
+                  <Badge variant={status === 'completed' ? 'secondary' : status === 'current' ? 'default' : 'outline'} className="text-xs">
+                    {status}
+                  </Badge>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="grid grid-cols-3 gap-3 text-center">
+          <div>
+            <p className="text-lg font-semibold">{completedCount}</p>
+            <p className="text-xs text-muted-foreground">Completed</p>
+          </div>
+          <div>
+            <p className="text-lg font-semibold">{totalCount - completedCount}</p>
+            <p className="text-xs text-muted-foreground">Remaining</p>
+          </div>
+          <div>
+            <p className="text-lg font-semibold">{progressPct}%</p>
+            <p className="text-xs text-muted-foreground">Progress</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/HelpfulnessRating.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import { ThumbsUp, ThumbsDown } from 'lucide-react'
+import { Button } from '@core/components/ui/button'
+
+interface HelpfulnessRatingProps {
+  helpfulCount: number
+  notHelpfulCount: number
+  onVote?: (helpful: boolean) => void
+}
+
+export function HelpfulnessRating({ helpfulCount, notHelpfulCount, onVote }: HelpfulnessRatingProps) {
+  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)
+  }
+
+  const totalVotes = helpfulCount + notHelpfulCount
+  const helpfulPercentage = totalVotes > 0 ? Math.round((helpfulCount / totalVotes) * 100) : 0
+
+  return (
+    <div className="flex items-center gap-3">
+      <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
+        </Button>
+
+        <Button
+          variant={voteType === 'not-helpful' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => handleVote(false)}
+          disabled={hasVoted}
+          className="gap-1.5"
+        >
+          <ThumbsDown size={13} /> Not Helpful
+        </Button>
+      </div>
+
+      <div className="text-sm text-muted-foreground">
+        <span className="font-medium">{helpfulPercentage}%</span> found this helpful
+        <span className="ml-1 opacity-60">({totalVotes} votes)</span>
+      </div>
+
+      {hasVoted && (
+        <span className="text-xs text-muted-foreground">Thanks for your feedback!</span>
+      )}
+    </div>
+  )
+}

package/components/KBGenerator.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react'
+import { resolveTypeId } from '../../lib/resolveTypeId'
+import { apiFetch } from '@core/lib/api'
+import { Card, CardContent, CardHeader } from '@core/components/ui/card'
+import { Button } from '@core/components/ui/button'
+import { Input } from '@core/components/ui/input'
+import { Textarea } from '@core/components/ui/textarea'
+import { Label } from '@core/components/ui/label'
+import { Badge } from '@core/components/ui/badge'
+import { Separator } from '@core/components/ui/separator'
+
+interface PortalItem {
+  id: string
+  title: string
+  data?: Record<string, unknown>
+}
+
+interface KBGeneratorProps {
+  ticket: PortalItem
+  onGenerated?: (kbArticle: any) => void
+  onCancel?: () => void
+}
+
+export function KBGenerator({ ticket, onGenerated, onCancel }: KBGeneratorProps) {
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [generatedArticle, setGeneratedArticle] = useState<any>(null)
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedContent, setEditedContent] = useState('')
+
+  const handleGenerate = async () => {
+    if (!ticket.data?.content) return
+    setIsGenerating(true)
+    await new Promise((r) => setTimeout(r, 500))
+    const article = { title: `How to: ${ticket.title}`, content: 'Generated content…', tags: ['support', 'how-to'], confidence: 0.87 }
+    setGeneratedArticle(article)
+    setEditedContent(article.content)
+    setIsGenerating(false)
+  }
+
+  const handleSave = async () => {
+    if (!generatedArticle) return
+    try {
+      const kbArticleTypeId = await resolveTypeId('kb_article')
+      const res = await apiFetch('/.netlify/functions/admin-data', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          entity: 'items',
+          type_id: kbArticleTypeId,
+          title: generatedArticle.title,
+          status: 'published',
+          description: editedContent,
+          data: {
+            kb_type: 'article',
+            priority: 'medium',
+            security_level: 'internal',
+            tags: generatedArticle.tags,
+            source_info: {
+              source_type: 'ai_generated',
+              source_ticket_id: ticket.id,
+            },
+          },
+        }),
+      })
+      const json = await res.json()
+      onGenerated?.(json.data)
+    } catch (err) {
+      console.error('Error saving KB article:', err)
+    }
+  }
+
+  const handleDiscard = () => {
+    setGeneratedArticle(null)
+    setEditedContent('')
+    setIsEditing(false)
+    onCancel?.()
+  }
+
+  if (!generatedArticle) {
+    return (
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <h3 className="font-medium text-sm">Generate Knowledge Base Article</h3>
+            <Badge variant="secondary">AI Powered</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="rounded-md border border-border bg-muted/30 p-3 text-sm text-muted-foreground">
+            <p className="font-medium text-foreground mb-1">Source Ticket</p>
+            <p>{ticket.title}</p>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              onClick={handleGenerate}
+              disabled={isGenerating || !ticket.data?.content}
+            >
+              {isGenerating ? 'Generating…' : 'Generate KB Article'}
+            </Button>
+            <Button variant="outline" onClick={onCancel}>Cancel</Button>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <h3 className="font-medium text-sm">Generated KB Article</h3>
+          <Badge variant="secondary">{Math.round(generatedArticle.confidence * 100)}% Confidence</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <Label>Title</Label>
+          <Input
+            value={generatedArticle.title}
+            onChange={(e) => setGeneratedArticle((prev: any) => ({ ...prev, title: e.target.value }))}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label>Content</Label>
+            <Button variant="ghost" size="sm" onClick={() => setIsEditing(!isEditing)}>
+              {isEditing ? 'Preview' : 'Edit'}
+            </Button>
+          </div>
+          {isEditing ? (
+            <Textarea
+              value={editedContent}
+              onChange={(e) => setEditedContent(e.target.value)}
+              rows={8}
+            />
+          ) : (
+            <div className="rounded-md border border-border bg-muted/30 p-3 text-sm whitespace-pre-wrap min-h-24">
+              {editedContent}
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-wrap gap-1.5">
+          {generatedArticle.tags.map((tag: string, i: number) => (
+            <Badge key={i} variant="outline" className="text-xs">{tag}</Badge>
+          ))}
+        </div>
+
+        <Separator />
+
+        <div className="flex gap-2">
+          <Button onClick={handleSave}>Publish to Knowledge Base</Button>
+          <Button variant="outline" onClick={handleDiscard}>Discard</Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/ParticipationIndicator.tsx

@@ -0,0 +1,23 @@
+import { MessageCircle } from 'lucide-react'
+
+interface ParticipationIndicatorProps {
+  hasParticipation: boolean
+  hasUnread?: boolean
+  size?: 'sm' | 'md'
+}
+
+export function ParticipationIndicator({ hasParticipation, hasUnread = false, size = 'sm' }: ParticipationIndicatorProps) {
+  if (!hasParticipation && !hasUnread) return null
+
+  return (
+    <span className="relative inline-flex items-center">
+      <MessageCircle
+        size={size === 'sm' ? 13 : 15}
+        className={hasParticipation ? 'text-primary' : 'text-muted-foreground/30'}
+      />
+      {hasUnread && (
+        <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-destructive rounded-full" />
+      )}
+    </span>
+  )
+}

package/components/PortalFooter.tsx

@@ -0,0 +1,32 @@
+import { Separator } from '@core/components/ui/separator'
+
+const FOOTER_LINKS = [
+  { label: 'Privacy Policy', href: '#' },
+  { label: 'Terms of Service', href: '#' },
+  { label: 'Support', href: '#' },
+]
+
+export function PortalFooter() {
+  return (
+    <footer className="border-t border-border bg-background">
+      <div className="flex items-center justify-between px-6 h-12">
+        <p className="text-xs text-muted-foreground">
+          &copy; {new Date().getFullYear()} Customer Portal
+        </p>
+        <nav className="flex items-center gap-1">
+          {FOOTER_LINKS.map((link, i) => (
+            <span key={link.label} className="flex items-center gap-1">
+              {i > 0 && <Separator orientation="vertical" className="h-3" />}
+              <a
+                href={link.href}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors px-1"
+              >
+                {link.label}
+              </a>
+            </span>
+          ))}
+        </nav>
+      </div>
+    </footer>
+  )
+}