[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match healthcare HR platform design with yellow and cyan theme */ --background: oklch(1 0 0); --foreground: oklch(0.35 0 0); --card: oklch(0.99 0.02 85); --card-foreground: oklch(0.35 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.35 0 0); --primary: oklch(0.55 0.15 85); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.7 0.15 195); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.99 0.02 85); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.7 0.15 195); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9 0.02 85); --input: oklch(1 0 0); --ring: oklch(0.7 0.15 195); --chart-1: oklch(0.55 0.15 85); --chart-2: oklch(0.7 0.15 195); --chart-3: oklch(0.6 0.1 120); --chart-4: oklch(0.65 0.12 280); --chart-5: oklch(0.577 0.245 27.325); --radius: 0.75rem; --sidebar: oklch(0.99 0.02 85); --sidebar-foreground: oklch(0.35 0 0); --sidebar-primary: oklch(0.55 0.15 85); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.7 0.15 195); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.9 0.02 85); --sidebar-ring: oklch(0.7 0.15 195); --font-inter: "Inter", sans-serif; --font-work-sans: "Work Sans", serif; } .dark { /* Updated dark mode colors to maintain yellow/cyan theme with proper contrast */ --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0.02 85); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.15 85); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.6 0.15 195); --secondary-foreground: oklch(0.1 0 0); --muted: oklch(0.15 0.02 85); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.6 0.15 195); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.6 0.25 27.325); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.2 0.02 85); --input: oklch(0.15 0.02 85); --ring: oklch(0.6 0.15 195); --chart-1: oklch(0.65 0.15 85); --chart-2: oklch(0.6 0.15 195); --chart-3: oklch(0.55 0.1 120); --chart-4: oklch(0.6 0.12 280); --chart-5: oklch(0.6 0.25 27.325); --sidebar: oklch(0.12 0.02 85); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.65 0.15 85); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.6 0.15 195); --sidebar-accent-foreground: oklch(0.1 0 0); --sidebar-border: oklch(0.2 0.02 85); --sidebar-ring: oklch(0.6 0.15 195); } @theme inline { /* Updated font variables to use Inter and Work Sans */ --font-sans: var(--font-inter); --font-serif: var(--font-work-sans); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter, Work_Sans } from "next/font/google" import { AuthProvider } from "@/components/auth-provider" import "./globals.css" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) const workSans = Work_Sans({ subsets: ["latin"], display: "swap", variable: "--font-work-sans", }) export const metadata: Metadata = { title: "Healthcare HR Document Platform", description: "Manage, share, and collaborate on HR policies and documentation for healthcare organizations", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/document-grid.tsx" "use client" import { useMemo } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Star, Download, Eye, MessageSquare, Calendar, Building2 } from "lucide-react" import { mockDocuments } from "@/lib/mock-data" interface DocumentGridProps { searchQuery: string selectedCategory: string sortBy: string } export function DocumentGrid({ searchQuery, selectedCategory, sortBy }: DocumentGridProps) { const filteredAndSortedDocuments = useMemo(() => { const filtered = mockDocuments.filter((doc) => { const matchesSearch = doc.title.toLowerCase().includes(searchQuery.toLowerCase()) || doc.description.toLowerCase().includes(searchQuery.toLowerCase()) const matchesCategory = selectedCategory === "all" || doc.category === selectedCategory return matchesSearch && matchesCategory }) // Sort documents filtered.sort((a, b) => { switch (sortBy) { case "rating": return b.rating - a.rating case "downloads": return b.downloads - a.downloads case "alphabetical": return a.title.localeCompare(b.title) case "recent": default: return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime() } }) return filtered }, [searchQuery, selectedCategory, sortBy]) const handleViewDocument = (documentId: string) => { window.location.href = `/documents/${documentId}` } return (

{filteredAndSortedDocuments.map((document) => (

{document.category}

{document.rating.toFixed(1)}

{document.title} {document.description}

{document.organization}

{new Date(document.updatedAt).toLocaleDateString()}

{document.views}

{document.downloads}

{document.comments}

v{document.version}

))} {filteredAndSortedDocuments.length === 0 && (

No documents found matching your criteria.

)}

) } [V0_FILE]typescriptreact:file="components/document-search.tsx" "use client" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, SlidersHorizontal } from "lucide-react" interface DocumentSearchProps { searchQuery: string onSearchChange: (query: string) => void sortBy: string onSortChange: (sort: string) => void } export function DocumentSearch({ searchQuery, onSearchChange, sortBy, onSortChange }: DocumentSearchProps) { return (

onSearchChange(e.target.value)} className="pl-10" />

) } [V0_FILE]typescriptreact:file="components/category-filter.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Folder, FileText } from "lucide-react" import { mockCategories } from "@/lib/mock-data" interface CategoryFilterProps { selectedCategory: string onCategoryChange: (category: string) => void } export function CategoryFilter({ selectedCategory, onCategoryChange }: CategoryFilterProps) { return ( Categories {mockCategories.map((category) => ( ))} ) } [V0_FILE]typescriptreact:file="components/document-viewer.tsx" "use client" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Download, ExternalLink, ZoomIn, ZoomOut } from "lucide-react" import type { Document } from "@/lib/mock-data" interface DocumentViewerProps { document: Document } export function DocumentViewer({ document }: DocumentViewerProps) { return (

{/* Document Header */}

{document.title}

{document.description}

{document.category}

Version {document.version} {document.fileType.toUpperCase()} {document.fileSize}

{/* Document Content */}

{/* Mock document content */}

{document.title}

Version {document.version} | {document.organization}

1. Purpose and Scope

This document outlines the comprehensive policies and procedures related to{" "} {document.title.toLowerCase()}. It applies to all healthcare staff members and is designed to ensure compliance with regulatory requirements while maintaining the highest standards of patient care and safety.

2. Policy Statement

Our organization is committed to maintaining excellence in healthcare delivery through well-defined policies and procedures. This document serves as a guide for all staff members to ensure consistent application of best practices across all departments.

3. Procedures

Initial assessment and documentation requirements
Step-by-step implementation guidelines
Quality assurance and monitoring procedures
Reporting and escalation protocols
Regular review and update processes

4. Compliance and Monitoring

Regular audits and assessments will be conducted to ensure adherence to these policies. All staff members are required to complete relevant training and demonstrate competency in the application of these procedures.

This is a preview of the document content. The full document contains detailed procedures, forms, and additional resources. Download the complete document to access all content.

) } [V0_FILE]typescriptreact:file="components/document-comments.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardContent } from "@/components/ui/card" import { MessageSquare, Reply, ThumbsUp } from "lucide-react" interface Comment { id: string author: string content: string timestamp: string likes: number replies?: Comment[] } interface DocumentCommentsProps { documentId: string } const mockComments: Comment[] = [ { id: "1", author: "Dr. Sarah Wilson", content: "This policy has been very helpful in our implementation. The step-by-step approach makes it easy to follow.", timestamp: "2024-03-15T10:30:00Z", likes: 5, replies: [ { id: "1-1", author: "Mike Johnson", content: "I agree! We've seen great results since implementing this.", timestamp: "2024-03-15T14:20:00Z", likes: 2, }, ], }, { id: "2", author: "Jennifer Lee", content: "Could we get an updated version that includes the new regulatory changes from 2024?", timestamp: "2024-03-14T16:45:00Z", likes: 3, }, ] export function DocumentComments({ documentId }: DocumentCommentsProps) { const [comments, setComments] = useState(mockComments) const [newComment, setNewComment] = useState("") const [likedComments, setLikedComments] = useState>(new Set()) const handleSubmitComment = () => { if (newComment.trim()) { const comment: Comment = { id: Date.now().toString(), author: "Current User", content: newComment, timestamp: new Date().toISOString(), likes: 0, } setComments([comment, ...comments]) setNewComment("") } } const handleLikeComment = (commentId: string) => { const isLiked = likedComments.has(commentId) if (isLiked) { setLikedComments((prev) => { const newSet = new Set(prev) newSet.delete(commentId) return newSet }) setComments((prev) => prev.map((comment) => comment.id === commentId ? { ...comment, likes: Math.max(0, comment.likes - 1) } : comment, ), ) } else { setLikedComments((prev) => new Set(prev).add(commentId)) setComments((prev) => prev.map((comment) => (comment.id === commentId ? { ...comment, likes: comment.likes + 1 } : comment)), ) } } return (

Comments ({comments.length})

{/* Add Comment */}

setNewComment(e.target.value)}
          className="min-h-[80px]"
        />
        <Button size="sm" onClick={handleSubmitComment} disabled={!newComment.trim()}>
          Post Comment
        </Button>
      </div>

{/* Comments List */}
      <div className="flex-1 overflow-auto space-y-4">
        {comments.map((comment) => (
          <Card key={comment.id} className="p-3">
            <CardContent className="p-0 space-y-2">
              <div className="flex items-start gap-3">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg" />
                  <AvatarFallback>{comment.author.charAt(0)}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-medium text-sm">{comment.author}</span>
                    <span className="text-xs text-muted-foreground">
                      {new Date(comment.timestamp).toLocaleDateString()}
                    </span>
                  </div>
                  <p className="text-sm text-foreground">{comment.content}</p>

<div className="flex items-center gap-2 mt-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className={`h-6 px-2 text-xs ${likedComments.has(comment.id) ? "text-primary" : ""}`}
                      onClick={() => handleLikeComment(comment.id)}
                    >
                      <ThumbsUp className={`h-3 w-3 mr-1 ${likedComments.has(comment.id) ? "fill-current" : ""}`} />
                      {comment.likes}
                    </Button>
                    <Button variant="ghost" size="sm" className="h-6 px-2 text-xs">
                      <Reply className="h-3 w-3 mr-1" />
                      Reply
                    </Button>
                  </div>
                </div>
              </div>

{/* Replies */}
              {comment.replies && comment.replies.length > 0 && (
                <div className="ml-11 space-y-2 pt-2 border-t">
                  {comment.replies.map((reply) => (
                    <div key={reply.id} className="flex items-start gap-3">
                      <Avatar className="h-6 w-6">
                        <AvatarImage src="/placeholder.svg" />
                        <AvatarFallback className="text-xs">{reply.author.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-xs">{reply.author}</span>
                          <span className="text-xs text-muted-foreground">
                            {new Date(reply.timestamp).toLocaleDateString()}
                          </span>
                        </div>
                        <p className="text-xs text-foreground">{reply.content}</p>
                        <Button variant="ghost" size="sm" className="h-5 px-1 text-xs mt-1">
                          <ThumbsUp className="h-2 w-2 mr-1" />
                          {reply.likes}
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/organization/documents/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { FileText, Users, Building2, Shield, TrendingUp, AlertTriangle, CheckCircle, Clock, Eye } from "lucide-react"

export default function AdminDashboard() {
  const { user } = useAuth()

if (!user || user.role !== "admin") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-7xl mx-auto">
              <Card className="border-yellow-200 bg-yellow-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-yellow-800">
                    <Shield className="h-5 w-5" />
                    Admin Dashboard Preview
                  </CardTitle>
                  <CardDescription className="text-yellow-700">
                    This is a preview of the admin dashboard. In a real application, admin access would be required.
                    Current role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-yellow-700 mb-4">
                    Switch to an admin account (use email containing "admin") to see full functionality.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const platformStats = {
    totalDocuments: 1247,
    pendingReviews: 23,
    totalUsers: 3456,
    totalOrganizations: 89,
    monthlyViews: 45678,
    flaggedContent: 5,
    approvedToday: 12,
    rejectedToday: 3,
  }

const recentActivity = [
    {
      type: "document_submitted",
      title: "New Safety Protocol submitted by General Hospital",
      time: "5 minutes ago",
      status: "pending",
    },
    {
      type: "organization_registered",
      title: "City Medical Center registered",
      time: "2 hours ago",
      status: "approved",
    },
    {
      type: "content_flagged",
      title: "Document flagged for review: HIPAA Guidelines",
      time: "4 hours ago",
      status: "flagged",
    },
    {
      type: "document_approved",
      title: "Performance Review Template approved",
      time: "6 hours ago",
      status: "approved",
    },
  ]

const getActivityIcon = (type: string) => {
    switch (type) {
      case "document_submitted":
        return <FileText className="h-4 w-4" />
      case "organization_registered":
        return <Building2 className="h-4 w-4" />
      case "content_flagged":
        return <AlertTriangle className="h-4 w-4" />
      case "document_approved":
        return <CheckCircle className="h-4 w-4" />
      default:
        return <FileText className="h-4 w-4" />
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "approved":
        return "default"
      case "pending":
        return "secondary"
      case "flagged":
        return "destructive"
      default:
        return "outline"
    }
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-7xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-serif font-bold mb-2">Platform Administration</h1>
              <p className="text-muted-foreground">
                Monitor and manage the healthcare HR document platform across all organizations.
              </p>
            </div>

{/* Key Metrics */}
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
                  <FileText className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">{platformStats.totalDocuments}</div>
                  <p className="text-xs text-muted-foreground">+12% from last month</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Pending Reviews</CardTitle>
                  <Clock className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-yellow-600">{platformStats.pendingReviews}</div>
                  <p className="text-xs text-muted-foreground">Requires attention</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Active Users</CardTitle>
                  <Users className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-accent">{platformStats.totalUsers}</div>
                  <p className="text-xs text-muted-foreground">
                    Across {platformStats.totalOrganizations} organizations
                  </p>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Monthly Views</CardTitle>
                  <Eye className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">{platformStats.monthlyViews.toLocaleString()}</div>
                  <p className="text-xs text-muted-foreground">+8% from last month</p>
                </CardContent>
              </Card>
            </div>

<div className="grid gap-6 lg:grid-cols-2 mb-8">
              {/* Daily Activity */}
              <Card>
                <CardHeader>
                  <CardTitle>Today's Activity</CardTitle>
                  <CardDescription>Document review activity for today</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-3 gap-4">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-green-600">{platformStats.approvedToday}</div>
                      <p className="text-xs text-muted-foreground">Approved</p>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-yellow-600">{platformStats.pendingReviews}</div>
                      <p className="text-xs text-muted-foreground">Pending</p>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-red-600">{platformStats.rejectedToday}</div>
                      <p className="text-xs text-muted-foreground">Rejected</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Quick Actions */}
              <Card>
                <CardHeader>
                  <CardTitle>Quick Actions</CardTitle>
                  <CardDescription>Common administrative tasks</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button className="w-full justify-start" asChild>
                    <a href="/admin/review">
                      <Shield className="mr-2 h-4 w-4" />
                      Review Queue ({platformStats.pendingReviews})
                    </a>
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                    <a href="/admin/organizations">
                      <Building2 className="mr-2 h-4 w-4" />
                      Manage Organizations
                    </a>
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                    <a href="/admin/users">
                      <Users className="mr-2 h-4 w-4" />
                      User Management
                    </a>
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                    <a href="/admin/analytics">
                      <TrendingUp className="mr-2 h-4 w-4" />
                      Platform Analytics
                    </a>
                  </Button>
                </CardContent>
              </Card>
            </div>

{/* Recent Activity */}
            <Card>
              <CardHeader>
                <CardTitle>Recent Platform Activity</CardTitle>
                <CardDescription>Latest actions across the platform</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {recentActivity.map((activity, index) => (
                    <div key={index} className="flex items-center space-x-4 p-3 border rounded-lg">
                      <div className="flex-shrink-0">{getActivityIcon(activity.type)}</div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium">{activity.title}</p>
                        <p className="text-xs text-muted-foreground">{activity.time}</p>
                      </div>
                      <Badge variant={getStatusColor(activity.status)}>{activity.status}</Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Alerts */}
            {platformStats.flaggedContent > 0 && (
              <Card className="border-destructive/50 bg-destructive/5">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-destructive">
                    <AlertTriangle className="h-5 w-5" />
                    Content Alerts
                  </CardTitle>
                  <CardDescription>Items requiring immediate attention</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between">
                    <p className="text-sm">{platformStats.flaggedContent} documents have been flagged for review</p>
                    <Button variant="destructive" size="sm" asChild>
                      <a href="/admin/moderation">Review Flagged Content</a>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/organizations/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/bulk-document-actions.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Trash2, Archive, FolderOpen, Download } from "lucide-react"

interface BulkDocumentActionsProps {
  selectedDocuments: string[]
  onClearSelection: () => void
  onBulkAction: (action: string, options?: any) => void
}

export function BulkDocumentActions({ selectedDocuments, onClearSelection, onBulkAction }: BulkDocumentActionsProps) {
  const [bulkCategory, setBulkCategory] = useState("")

if (selectedDocuments.length === 0) {
    return null
  }

const categories = [
    "recruitment",
    "onboarding",
    "performance",
    "compliance",
    "benefits",
    "training",
    "safety",
    "policies",
  ]

return (
    <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-card border rounded-lg shadow-lg p-4 z-50">
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <Checkbox checked={true} />
          <span className="text-sm font-medium">{selectedDocuments.length} documents selected</span>
        </div>

<div className="flex items-center gap-2">
          <Button size="sm" variant="outline" onClick={() => onBulkAction("download")}>
            <Download className="h-3 w-3 mr-1" />
            Download All
          </Button>

<Dialog>
            <DialogTrigger asChild>
              <Button size="sm" variant="outline">
                <FolderOpen className="h-3 w-3 mr-1" />
                Change Category
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Change Category</DialogTitle>
                <DialogDescription>
                  Update the category for {selectedDocuments.length} selected documents
                </DialogDescription>
              </DialogHeader>
              <div className="space-y-4">
                <Select value={bulkCategory} onValueChange={setBulkCategory}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select new category" />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map((category) => (
                      <SelectItem key={category} value={category}>
                        {category.charAt(0).toUpperCase() + category.slice(1)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Button
                  onClick={() => {
                    onBulkAction("changeCategory", { category: bulkCategory })
                    setBulkCategory("")
                  }}
                  disabled={!bulkCategory}
                  className="w-full"
                >
                  Update Category
                </Button>
              </div>
            </DialogContent>
          </Dialog>

<Button size="sm" variant="outline" onClick={() => onBulkAction("archive")}>
            <Archive className="h-3 w-3 mr-1" />
            Archive
          </Button>

<Button size="sm" variant="destructive" onClick={() => onBulkAction("delete")}>
            <Trash2 className="h-3 w-3 mr-1" />
            Delete
          </Button>

<Button size="sm" variant="ghost" onClick={onClearSelection}>
            Cancel
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-version-manager.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Calendar, Upload, Download, Eye, FileText } from "lucide-react"

interface DocumentVersion {
  version: string
  uploadedAt: string
  uploadedBy: string
  changeNotes: string
  fileSize: string
  downloads: number
  isCurrent: boolean
}

interface DocumentVersionManagerProps {
  documentId: string
  currentVersion: string
}

export function DocumentVersionManager({ documentId, currentVersion }: DocumentVersionManagerProps) {
  const [newVersionNotes, setNewVersionNotes] = useState("")
  const [customVersion, setCustomVersion] = useState("")
  const [useCustomVersion, setUseCustomVersion] = useState(false)

// Mock version history
  const versions: DocumentVersion[] = [
    {
      version: "2.1",
      uploadedAt: "2024-03-15T10:30:00Z",
      uploadedBy: "Dr. Sarah Johnson",
      changeNotes: "Updated safety protocols based on new CDC guidelines",
      fileSize: "2.3 MB",
      downloads: 45,
      isCurrent: true,
    },
    {
      version: "2.0",
      uploadedAt: "2024-02-20T14:15:00Z",
      uploadedBy: "Dr. Sarah Johnson",
      changeNotes: "Major revision with new compliance requirements",
      fileSize: "2.1 MB",
      downloads: 123,
      isCurrent: false,
    },
    {
      version: "1.5",
      uploadedAt: "2024-01-10T09:45:00Z",
      uploadedBy: "Mike Rodriguez",
      changeNotes: "Minor updates to formatting and contact information",
      fileSize: "2.0 MB",
      downloads: 89,
      isCurrent: false,
    },
  ]

const handleUploadNewVersion = () => {
    const nextVersion =
      useCustomVersion && customVersion ? customVersion : (Number.parseFloat(currentVersion) + 0.1).toFixed(1)

console.log("Uploading new version:", nextVersion, "with notes:", newVersionNotes)
    setNewVersionNotes("")
    setCustomVersion("")
    setUseCustomVersion(false)
  }

const nextAutoVersion = (Number.parseFloat(currentVersion) + 0.1).toFixed(1)

return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Version History
            </CardTitle>
            <CardDescription>Manage document versions and track changes</CardDescription>
          </div>
          <Dialog>
            <DialogTrigger asChild>
              <Button size="sm">
                <Upload className="h-3 w-3 mr-1" />
                Upload New Version
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Upload New Version</DialogTitle>
                <DialogDescription>Upload a new version of this document with change notes</DialogDescription>
              </DialogHeader>
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="file">Select File</Label>
                  <Input id="file" type="file" accept=".pdf,.doc,.docx" />
                </div>

<div className="space-y-3">
                  <Label>Version Number</Label>
                  <div className="space-y-2">
                    <div className="flex items-center space-x-2">
                      <input
                        type="radio"
                        id="auto-version"
                        name="version-type"
                        checked={!useCustomVersion}
                        onChange={() => setUseCustomVersion(false)}
                      />
                      <Label htmlFor="auto-version" className="text-sm">
                        Auto-increment to v{nextAutoVersion}
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input
                        type="radio"
                        id="custom-version"
                        name="version-type"
                        checked={useCustomVersion}
                        onChange={() => setUseCustomVersion(true)}
                      />
                      <Label htmlFor="custom-version" className="text-sm">
                        Custom version number
                      </Label>
                    </div>
                    {useCustomVersion && (
                      <Input
                        placeholder="e.g., 3.0, 2.5, 1.1"
                        value={customVersion}
                        onChange={(e) => setCustomVersion(e.target.value)}
                        className="ml-6"
                      />
                    )}
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="notes">Change Notes</Label>
                  <Textarea
                    id="notes"
                    placeholder="Describe what changed in this version..."
                    value={newVersionNotes}
                    onChange={(e) => setNewVersionNotes(e.target.value)}
                    rows={3}
                  />
                </div>
                <Button onClick={handleUploadNewVersion} className="w-full">
                  Upload Version {useCustomVersion && customVersion ? customVersion : nextAutoVersion}
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {versions.map((version) => (
            <div key={version.version} className="flex items-center justify-between p-4 border rounded-lg">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <span className="font-semibold">Version {version.version}</span>
                  {version.isCurrent && <Badge>Current</Badge>}
                  <span className="text-sm text-muted-foreground">{version.fileSize}</span>
                </div>
                <p className="text-sm text-muted-foreground mb-1">{version.changeNotes}</p>
                <div className="flex items-center gap-4 text-xs text-muted-foreground">
                  <div className="flex items-center gap-1">
                    <Calendar className="h-3 w-3" />
                    <span>{new Date(version.uploadedAt).toLocaleDateString()}</span>
                  </div>
                  <span>by {version.uploadedBy}</span>
                  <span>{version.downloads} downloads</span>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button size="sm" variant="outline">
                  <Eye className="h-3 w-3 mr-1" />
                  View
                </Button>
                <Button size="sm" variant="outline">
                  <Download className="h-3 w-3 mr-1" />
                  Download
                </Button>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/batch-upload.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Upload, FileText, CheckCircle, XCircle, Clock } from "lucide-react"

interface UploadFile {
  id: string
  file: File
  status: "pending" | "uploading" | "success" | "error"
  progress: number
  category?: string
  error?: string
}

export function BatchUpload() {
  const [uploadFiles, setUploadFiles] = useState<UploadFile[]>([])
  const [defaultCategory, setDefaultCategory] = useState("")
  const [isUploading, setIsUploading] = useState(false)

const categories = [
    "recruitment",
    "onboarding",
    "performance",
    "compliance",
    "benefits",
    "training",
    "safety",
    "policies",
  ]

const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || [])
    const newUploadFiles: UploadFile[] = files.map((file) => ({
      id: Math.random().toString(36).substr(2, 9),
      file,
      status: "pending",
      progress: 0,
      category: defaultCategory,
    }))
    setUploadFiles([...uploadFiles, ...newUploadFiles])
  }

const updateFileCategory = (fileId: string, category: string) => {
    setUploadFiles((files) => files.map((file) => (file.id === fileId ? { ...file, category } : file)))
  }

const removeFile = (fileId: string) => {
    setUploadFiles((files) => files.filter((file) => file.id !== fileId))
  }

const startBatchUpload = async () => {
    setIsUploading(true)

for (const file of uploadFiles) {
      if (file.status === "pending") {
        // Update status to uploading
        setUploadFiles((files) => files.map((f) => (f.id === file.id ? { ...f, status: "uploading" } : f)))

// Simulate upload progress
        for (let progress = 0; progress <= 100; progress += 10) {
          await new Promise((resolve) => setTimeout(resolve, 100))
          setUploadFiles((files) => files.map((f) => (f.id === file.id ? { ...f, progress } : f)))
        }

// Simulate success/error
        const success = Math.random() > 0.1 // 90% success rate
        setUploadFiles((files) =>
          files.map((f) =>
            f.id === file.id
              ? {
                  ...f,
                  status: success ? "success" : "error",
                  error: success ? undefined : "Upload failed. Please try again.",
                }
              : f,
          ),
        )
      }
    }

setIsUploading(false)
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "success":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "error":
        return <XCircle className="h-4 w-4 text-red-500" />
      case "uploading":
        return <Clock className="h-4 w-4 text-blue-500" />
      default:
        return <FileText className="h-4 w-4 text-muted-foreground" />
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "success":
        return "default"
      case "error":
        return "destructive"
      case "uploading":
        return "secondary"
      default:
        return "outline"
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Upload className="h-5 w-5" />
          Batch Document Upload
        </CardTitle>
        <CardDescription>Upload multiple documents at once with automatic categorization</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="default-category">Default Category</Label>
            <Select value={defaultCategory} onValueChange={setDefaultCategory}>
              <SelectTrigger>
                <SelectValue placeholder="Select default category for all files" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category.charAt(0).toUpperCase() + category.slice(1)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-6 text-center">
            <Upload className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
            <p className="text-sm font-medium mb-1">Drop files here or click to browse</p>
            <p className="text-xs text-muted-foreground mb-3">PDF, DOC, DOCX files supported</p>
            <input
              type="file"
              multiple
              accept=".pdf,.doc,.docx"
              onChange={handleFileSelect}
              className="hidden"
              id="batch-file-upload"
            />
            <Button asChild variant="outline">
              <label htmlFor="batch-file-upload" className="cursor-pointer">
                Select Files
              </label>
            </Button>
          </div>
        </div>

{uploadFiles.length > 0 && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold">Files to Upload ({uploadFiles.length})</h3>
              <div className="flex gap-2">
                <Button
                  onClick={startBatchUpload}
                  disabled={isUploading || uploadFiles.every((f) => f.status !== "pending")}
                >
                  {isUploading ? "Uploading..." : "Start Upload"}
                </Button>
                <Button variant="outline" onClick={() => setUploadFiles([])}>
                  Clear All
                </Button>
              </div>
            </div>

<div className="space-y-3 max-h-96 overflow-y-auto">
              {uploadFiles.map((uploadFile) => (
                <div key={uploadFile.id} className="flex items-center gap-3 p-3 border rounded-lg">
                  {getStatusIcon(uploadFile.status)}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <p className="font-medium text-sm truncate">{uploadFile.file.name}</p>
                      <Badge variant={getStatusColor(uploadFile.status)}>{uploadFile.status}</Badge>
                    </div>
                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
                      <span>{(uploadFile.file.size / 1024 / 1024).toFixed(2)} MB</span>
                      <Select
                        value={uploadFile.category || ""}
                        onValueChange={(value) => updateFileCategory(uploadFile.id, value)}
                        disabled={uploadFile.status === "uploading"}
                      >
                        <SelectTrigger className="w-32 h-6">
                          <SelectValue placeholder="Category" />
                        </SelectTrigger>
                        <SelectContent>
                          {categories.map((category) => (
                            <SelectItem key={category} value={category}>
                              {category.charAt(0).toUpperCase() + category.slice(1)}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    {uploadFile.status === "uploading" && <Progress value={uploadFile.progress} className="mt-2 h-1" />}
                    {uploadFile.error && <p className="text-xs text-red-500 mt-1">{uploadFile.error}</p>}
                  </div>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => removeFile(uploadFile.id)}
                    disabled={uploadFile.status === "uploading"}
                  >
                    Remove
                  </Button>
                </div>
              ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/document-sharing.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Share2, Mail, Copy, Check } from "lucide-react"
import { toast } from "@/hooks/use-toast"

interface DocumentSharingProps {
  documentId: string
  documentTitle: string
}

export function DocumentSharing({ documentId, documentTitle }: DocumentSharingProps) {
  const [copied, setCopied] = useState(false)
  const [emailRecipients, setEmailRecipients] = useState("")
  const [emailMessage, setEmailMessage] = useState("")

const shareUrl = `${window.location.origin}/documents/${documentId}`

const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      setCopied(true)
      toast({
        title: "Link copied!",
        description: "Document link has been copied to clipboard.",
      })
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      toast({
        title: "Failed to copy",
        description: "Please copy the link manually.",
        variant: "destructive",
      })
    }
  }

const handleEmailShare = () => {
    // In a real app, this would send emails via API
    toast({
      title: "Emails sent!",
      description: `Document shared with ${emailRecipients.split(",").length} recipient(s).`,
    })
    setEmailRecipients("")
    setEmailMessage("")
  }

return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          <Share2 className="h-3 w-3 mr-1" />
          Share
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Share Document</DialogTitle>
        </DialogHeader>

<Tabs defaultValue="link" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="link">Share Link</TabsTrigger>
            <TabsTrigger value="email">Send Email</TabsTrigger>
          </TabsList>

<TabsContent value="link" className="space-y-4">
            <div className="space-y-2">
              <Label>Document Link</Label>
              <div className="flex gap-2">
                <Input value={shareUrl} readOnly className="flex-1" />
                <Button size="sm" onClick={handleCopyLink}>
                  {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                </Button>
              </div>
            </div>
            <p className="text-sm text-muted-foreground">Anyone with this link can view the document.</p>
          </TabsContent>

<TabsContent value="email" className="space-y-4">
            <div className="space-y-2">
              <Label>Email Recipients</Label>
              <Input
                placeholder="Enter email addresses separated by commas"
                value={emailRecipients}
                onChange={(e) => setEmailRecipients(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label>Message (Optional)</Label>
              <Textarea
                placeholder="Add a personal message..."
                value={emailMessage}
                onChange={(e) => setEmailMessage(e.target.value)}
                rows={3}
              />
            </div>
            <Button onClick={handleEmailShare} disabled={!emailRecipients.trim()}>
              <Mail className="h-4 w-4 mr-2" />
              Send Email
            </Button>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/favorites-manager.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Heart } from "lucide-react"
import { toast } from "@/hooks/use-toast"

interface FavoritesManagerProps {
  documentId: string
  initialFavorited?: boolean
}

export function FavoritesManager({ documentId, initialFavorited = false }: FavoritesManagerProps) {
  const [isFavorited, setIsFavorited] = useState(() => {
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem(`favorite-${documentId}`)
      return saved ? JSON.parse(saved) : initialFavorited
    }
    return initialFavorited
  })

const handleToggleFavorite = () => {
    const newFavoriteState = !isFavorited
    setIsFavorited(newFavoriteState)

if (typeof window !== "undefined") {
      localStorage.setItem(`favorite-${documentId}`, JSON.stringify(newFavoriteState))
    }

toast({
      title: newFavoriteState ? "Added to favorites" : "Removed from favorites",
      description: newFavoriteState
        ? "Document saved to your favorites list."
        : "Document removed from your favorites list.",
    })
  }

return (
    <Button
      variant="ghost"
      size="sm"
      onClick={handleToggleFavorite}
      className={isFavorited ? "text-red-500 hover:text-red-600" : ""}
    >
      <Heart className={`h-4 w-4 mr-1 ${isFavorited ? "fill-current" : ""}`} />
      {isFavorited ? "Favorited" : "Add to Favorites"}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile-card.tsx"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { UserPlus, MessageSquare, Star, FileText } from "lucide-react"

interface UserProfileCardProps {
  userId: string
  name: string
  organization: string
  role: string
  documentsCount: number
  averageRating: number
  isFollowing?: boolean
}

export function UserProfileCard({
  userId,
  name,
  organization,
  role,
  documentsCount,
  averageRating,
  isFollowing = false,
}: UserProfileCardProps) {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader className="text-center pb-3">
        <Avatar className="h-16 w-16 mx-auto mb-2">
          <AvatarImage src="/placeholder.svg" />
          <AvatarFallback className="text-lg">{name.charAt(0)}</AvatarFallback>
        </Avatar>
        <h3 className="font-serif font-semibold">{name}</h3>
        <p className="text-sm text-muted-foreground">{organization}</p>
        <Badge variant="secondary" className="w-fit mx-auto">
          {role}
        </Badge>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 gap-4 text-center">
          <div>
            <div className="flex items-center justify-center gap-1 text-sm font-medium">
              <FileText className="h-3 w-3" />
              {documentsCount}
            </div>
            <p className="text-xs text-muted-foreground">Documents</p>
          </div>
          <div>
            <div className="flex items-center justify-center gap-1 text-sm font-medium">
              <Star className="h-3 w-3 fill-primary text-primary" />
              {averageRating.toFixed(1)}
            </div>
            <p className="text-xs text-muted-foreground">Avg Rating</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button size="sm" variant={isFollowing ? "outline" : "default"} className="flex-1">
            <UserPlus className="h-3 w-3 mr-1" />
            {isFollowing ? "Following" : "Follow"}
          </Button>
          <Button size="sm" variant="outline">
            <MessageSquare className="h-3 w-3" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/admin/organizations/page.tsx"
"use client"

import { CardDescription } from "@/components/ui/card"

interface Organization {
  id: string
  name: string
  type: string
  memberCount: number
  documentCount: number
  joinedAt: string
  status: "active" | "pending" | "suspended"
  subscription: "free" | "professional" | "enterprise"
  lastActivity: string
}

export default function OrganizationsPage() {
  const { user } = useAuth()
  const [searchQuery, setSearchQuery] = useState("")

if (!user || user.role !== "admin") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-7xl mx-auto">
              <Card className="border-yellow-200 bg-yellow-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-yellow-800">
                    <Shield className="h-5 w-5" />
                    Organization Management Preview
                  </CardTitle>
                  <CardDescription className="text-yellow-700">
                    This is a preview of the organization management page. In a real application, admin access would be
                    required. Current role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-yellow-700 mb-4">
                    Switch to an admin account (use email containing "admin") to manage healthcare organizations.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const organizations: Organization[] = [
    {
      id: "org-1",
      name: "General Hospital",
      type: "Hospital",
      memberCount: 45,
      documentCount: 123,
      joinedAt: "2024-01-15",
      status: "active",
      subscription: "professional",
      lastActivity: "2024-03-15",
    },
    {
      id: "org-2",
      name: "City Medical Center",
      type: "Medical Center",
      memberCount: 32,
      documentCount: 89,
      joinedAt: "2024-02-01",
      status: "active",
      subscription: "enterprise",
      lastActivity: "2024-03-14",
    },
    {
      id: "org-3",
      name: "Regional Health System",
      type: "Health System",
      memberCount: 78,
      documentCount: 234,
      joinedAt: "2024-01-20",
      status: "active",
      subscription: "enterprise",
      lastActivity: "2024-03-13",
    },
    {
      id: "org-4",
      name: "Community Clinic Network",
      type: "Clinic",
      memberCount: 12,
      documentCount: 34,
      joinedAt: "2024-03-01",
      status: "pending",
      subscription: "free",
      lastActivity: "2024-03-10",
    },
  ]

const filteredOrganizations = organizations.filter((org) =>
    org.name.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "default"
      case "pending":
        return "secondary"
      case "suspended":
        return "destructive"
      default:
        return "outline"
    }
  }

const getSubscriptionColor = (subscription: string) => {
    switch (subscription) {
      case "enterprise":
        return "default"
      case "professional":
        return "secondary"
      case "free":
        return "outline"
      default:
        return "outline"
    }
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-7xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-serif font-bold mb-2">Organization Management</h1>
              <p className="text-muted-foreground">Monitor and manage healthcare organizations on the platform.</p>
            </div>

{/* Stats Overview */}
            <div className="grid gap-4 md:grid-cols-4 mb-8">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Organizations</CardTitle>
                  <Building2 className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">{organizations.length}</div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Active</CardTitle>
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-green-600">
                    {organizations.filter((o) => o.status === "active").length}
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Pending Approval</CardTitle>
                  <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-yellow-600">
                    {organizations.filter((o) => o.status === "pending").length}
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Members</CardTitle>
                  <Users className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-accent">
                    {organizations.reduce((sum, org) => sum + org.memberCount, 0)}
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Search */}
            <div className="mb-6">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search organizations..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>

{/* Organizations List */}
            <div className="grid gap-4">
              {filteredOrganizations.map((organization) => (
                <Card key={organization.id} className="hover:shadow-md transition-shadow">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-4">
                        <Avatar className="h-12 w-12">
                          <AvatarImage src="/placeholder.svg" />
                          <AvatarFallback>{organization.name.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div>
                          <div className="flex items-center gap-2 mb-1">
                            <h3 className="font-semibold text-lg">{organization.name}</h3>
                            <Badge variant={getStatusColor(organization.status)}>{organization.status}</Badge>
                            <Badge variant={getSubscriptionColor(organization.subscription)}>
                              {organization.subscription}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground mb-2">{organization.type}</p>
                          <div className="flex items-center gap-4 text-sm text-muted-foreground">
                            <div className="flex items-center gap-1">
                              <Users className="h-3 w-3" />
                              <span>{organization.memberCount} members</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <FileText className="h-3 w-3" />
                              <span>{organization.documentCount} documents</span>
                            </div>
                            <span>Joined: {new Date(organization.joinedAt).toLocaleDateString()}</span>
                            <span>Last active: {new Date(organization.lastActivity).toLocaleDateString()}</span>
                          </div>
                        </div>
                      </div>

<div className="flex items-center space-x-2">
                        <Button variant="outline" size="sm">
                          <Eye className="h-3 w-3 mr-1" />
                          View Details
                        </Button>
                        <Button variant="outline" size="sm">
                          <Settings className="h-3 w-3 mr-1" />
                          Manage
                        </Button>
                        <Button variant="outline" size="sm">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

{filteredOrganizations.length === 0 && (
              <div className="text-center py-12">
                <p className="text-muted-foreground">No organizations found matching your search.</p>
              </div>
            )}
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx"
"use client"

import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { TrendingUp, Users, FileText, Download, Eye, Star, Shield } from "lucide-react"

export default function AnalyticsPage() {
  const { user } = useAuth()

if (!user || user.role !== "admin") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-7xl mx-auto">
              <Card className="border-yellow-200 bg-yellow-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-yellow-800">
                    <Shield className="h-5 w-5" />
                    Platform Analytics Preview
                  </CardTitle>
                  <CardDescription className="text-yellow-700">
                    This is a preview of the platform analytics dashboard. In a real application, admin access would be
                    required. Current role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-yellow-700 mb-4">
                    Switch to an admin account (use email containing "admin") to view comprehensive platform insights.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const platformMetrics = {
    totalUsers: 3456,
    userGrowth: 12.5,
    totalDocuments: 1247,
    documentGrowth: 8.3,
    totalViews: 45678,
    viewsGrowth: 15.2,
    totalDownloads: 12345,
    downloadsGrowth: 22.1,
  }

const topDocuments = [
    {
      title: "Healthcare Worker Vaccination Policy",
      category: "compliance",
      views: 1247,
      downloads: 342,
      rating: 4.8,
      organization: "General Hospital",
    },
    {
      title: "HIPAA Compliance Training Manual",
      category: "training",
      views: 2134,
      downloads: 678,
      rating: 4.7,
      organization: "Healthcare Compliance Institute",
    },
    {
      title: "Performance Review Template",
      category: "performance",
      views: 1456,
      downloads: 423,
      rating: 4.9,
      organization: "Regional Health System",
    },
  ]

const topOrganizations = [
    { name: "General Hospital", documents: 123, members: 45, views: 5678 },
    { name: "Regional Health System", documents: 234, members: 78, views: 8901 },
    { name: "City Medical Center", documents: 89, members: 32, views: 4567 },
  ]

const categoryStats = [
    { name: "Compliance", count: 67, percentage: 24 },
    { name: "Training", count: 41, percentage: 15 },
    { name: "Safety", count: 35, percentage: 13 },
    { name: "Policies", count: 52, percentage: 19 },
    { name: "Performance", count: 28, percentage: 10 },
    { name: "Benefits", count: 23, percentage: 8 },
    { name: "Recruitment", count: 45, percentage: 16 },
    { name: "Onboarding", count: 32, percentage: 12 },
  ]

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-7xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-serif font-bold mb-2">Platform Analytics</h1>
              <p className="text-muted-foreground">
                Comprehensive insights into platform usage, content performance, and user engagement.
              </p>
            </div>

{/* Key Metrics */}
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Users</CardTitle>
                  <Users className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">{platformMetrics.totalUsers.toLocaleString()}</div>
                  <div className="flex items-center text-xs text-green-600">
                    <TrendingUp className="h-3 w-3 mr-1" />+{platformMetrics.userGrowth}% from last month
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
                  <FileText className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">
                    {platformMetrics.totalDocuments.toLocaleString()}
                  </div>
                  <div className="flex items-center text-xs text-green-600">
                    <TrendingUp className="h-3 w-3 mr-1" />+{platformMetrics.documentGrowth}% from last month
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Views</CardTitle>
                  <Eye className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-accent">{platformMetrics.totalViews.toLocaleString()}</div>
                  <div className="flex items-center text-xs text-green-600">
                    <TrendingUp className="h-3 w-3 mr-1" />+{platformMetrics.viewsGrowth}% from last month
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Downloads</CardTitle>
                  <Download className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">
                    {platformMetrics.totalDownloads.toLocaleString()}
                  </div>
                  <div className="flex items-center text-xs text-green-600">
                    <TrendingUp className="h-3 w-3 mr-1" />+{platformMetrics.downloadsGrowth}% from last month
                  </div>
                </CardContent>
              </Card>
            </div>

<Tabs defaultValue="content" className="space-y-6">
              <TabsList>
                <TabsTrigger value="content">Content Performance</TabsTrigger>
                <TabsTrigger value="organizations">Organizations</TabsTrigger>
                <TabsTrigger value="categories">Categories</TabsTrigger>
              </TabsList>

<TabsContent value="content" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Top Performing Documents</CardTitle>
                    <CardDescription>Most viewed and downloaded documents this month</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {topDocuments.map((doc, index) => (
                        <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-1">
                              <span className="font-medium">{doc.title}</span>
                              <Badge variant="secondary">{doc.category}</Badge>
                            </div>
                            <p className="text-sm text-muted-foreground">{doc.organization}</p>
                          </div>
                          <div className="flex items-center gap-6 text-sm">
                            <div className="flex items-center gap-1">
                              <Eye className="h-3 w-3" />
                              <span>{doc.views}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <Download className="h-3 w-3" />
                              <span>{doc.downloads}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <Star className="h-3 w-3 fill-primary text-primary" />
                              <span>{doc.rating}</span>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="organizations" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Top Contributing Organizations</CardTitle>
                    <CardDescription>Organizations with the most content and engagement</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {topOrganizations.map((org, index) => (
                        <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                          <div>
                            <h3 className="font-medium">{org.name}</h3>
                            <p className="text-sm text-muted-foreground">{org.members} members</p>
                          </div>
                          <div className="flex items-center gap-6 text-sm">
                            <div className="flex items-center gap-1">
                              <FileText className="h-3 w-3" />
                              <span>{org.documents} docs</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <Eye className="h-3 w-3" />
                              <span>{org.views} views</span>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="categories" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Document Categories</CardTitle>
                    <CardDescription>Distribution of documents across categories</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {categoryStats.map((category, index) => (
                        <div key={index} className="flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            <span className="font-medium">{category.name}</span>
                            <Badge variant="outline">{category.count} documents</Badge>
                          </div>
                          <div className="flex items-center gap-2">
                            <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
                              <div
                                className="h-full bg-primary rounded-full"
                                style={{ width: `${category.percentage}%` }}
                              ></div>
                            </div>
                            <span className="text-sm text-muted-foreground w-8">{category.percentage}%</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/organization/analytics/page.tsx"
"use client"

import { SidebarNav } from "@/components/sidebar-nav"
import { Header } from "@/components/header"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"
import { BarChart3, FileText, Users, Eye, Download } from "lucide-react"

export default function OrganizationAnalyticsPage() {
  const { user } = useAuth()

if (user?.role !== "organization") {
    return (
      <div className="flex h-screen bg-background">
        <aside className="w-64 border-r bg-muted/40">
          <SidebarNav />
        </aside>
        <div className="flex-1 flex flex-col">
          <Header />
          <main className="flex-1 p-6">
            <Card className="max-w-md mx-auto">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <BarChart3 className="h-5 w-5 text-healthcare-cyan" />
                  Organization Analytics Preview
                </CardTitle>
                <CardDescription>
                  This page shows detailed analytics for your organization's document usage and engagement.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  Switch to an Organization account to view detailed analytics including document views, downloads, user
                  engagement, and team activity metrics.
                </p>
              </CardContent>
            </Card>
          </main>
        </div>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <aside className="w-64 border-r bg-muted/40">
        <SidebarNav />
      </aside>
      <div className="flex-1 flex flex-col">
        <Header />
        <main className="flex-1 p-6 space-y-6">
          <div>
            <h1 className="text-3xl font-serif font-bold">Organization Analytics</h1>
            <p className="text-muted-foreground">Track your organization's document performance and team engagement</p>
          </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
                <FileText className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">24</div>
                <p className="text-xs text-muted-foreground">+3 from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Views</CardTitle>
                <Eye className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,247</div>
                <p className="text-xs text-muted-foreground">+12% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Downloads</CardTitle>
                <Download className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">342</div>
                <p className="text-xs text-muted-foreground">+8% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Team Members</CardTitle>
                <Users className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">12</div>
                <p className="text-xs text-muted-foreground">+2 new this month</p>
              </CardContent>
            </Card>
          </div>

<div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Top Performing Documents</CardTitle>
                <CardDescription>Most viewed documents this month</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {[
                  { title: "Employee Handbook 2024", views: 156, downloads: 45 },
                  { title: "Remote Work Policy", views: 134, downloads: 38 },
                  { title: "Benefits Overview", views: 98, downloads: 29 },
                  { title: "Code of Conduct", views: 87, downloads: 22 },
                ].map((doc, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <div>
                      <p className="font-medium">{doc.title}</p>
                      <p className="text-sm text-muted-foreground">
                        {doc.views} views • {doc.downloads} downloads
                      </p>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Recent Activity</CardTitle>
                <CardDescription>Latest team interactions</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {[
                  {
                    user: "Sarah Chen",
                    action: "uploaded",
                    document: "Q4 Performance Review Template",
                    time: "2 hours ago",
                  },
                  { user: "Mike Johnson", action: "commented on", document: "Remote Work Policy", time: "4 hours ago" },
                  { user: "Lisa Wang", action: "downloaded", document: "Employee Handbook 2024", time: "6 hours ago" },
                  { user: "David Brown", action: "rated", document: "Benefits Overview", time: "1 day ago" },
                ].map((activity, index) => (
                  <div key={index} className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-healthcare-cyan rounded-full mt-2" />
                    <div className="flex-1">
                      <p className="text-sm">
                        <span className="font-medium">{activity.user}</span> {activity.action}{" "}
                        <span className="font-medium">{activity.document}</span>
                      </p>
                      <p className="text-xs text-muted-foreground">{activity.time}</p>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/organization/settings/page.tsx"
"use client"

import { SidebarNav } from "@/components/sidebar-nav"
import { Header } from "@/components/header"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { useAuth } from "@/components/auth-provider"
import { Settings, Building2, Users, Bell } from "lucide-react"

export default function OrganizationSettingsPage() {
  const { user } = useAuth()

if (user?.role !== "organization") {
    return (
      <div className="flex h-screen bg-background">
        <aside className="w-64 border-r bg-muted/40">
          <SidebarNav />
        </aside>
        <div className="flex-1 flex flex-col">
          <Header />
          <main className="flex-1 p-6">
            <Card className="max-w-md mx-auto">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Settings className="h-5 w-5 text-healthcare-cyan" />
                  Organization Settings Preview
                </CardTitle>
                <CardDescription>
                  This page allows organizations to manage their profile, team settings, and preferences.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  Switch to an Organization account to access settings for organization profile, team management,
                  notification preferences, and security settings.
                </p>
              </CardContent>
            </Card>
          </main>
        </div>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <aside className="w-64 border-r bg-muted/40">
        <SidebarNav />
      </aside>
      <div className="flex-1 flex flex-col">
        <Header />
        <main className="flex-1 p-6 space-y-6">
          <div>
            <h1 className="text-3xl font-serif font-bold">Organization Settings</h1>
            <p className="text-muted-foreground">Manage your organization profile and preferences</p>
          </div>

<div className="grid gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Building2 className="h-5 w-5" />
                  Organization Profile
                </CardTitle>
                <CardDescription>Update your organization's basic information</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="org-name">Organization Name</Label>
                  <Input id="org-name" defaultValue="HealthCorp Solutions" />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="org-description">Description</Label>
                  <Textarea
                    id="org-description"
                    defaultValue="Leading healthcare technology company focused on improving patient outcomes through innovative HR solutions."
                    rows={3}
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="org-website">Website</Label>
                  <Input id="org-website" defaultValue="https://healthcorp.com" />
                </div>
                <Button>Save Changes</Button>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Users className="h-5 w-5" />
                  Team Settings
                </CardTitle>
                <CardDescription>Configure team access and permissions</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Allow team members to upload documents</Label>
                    <p className="text-sm text-muted-foreground">Team members can upload documents for review</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Require approval for public submissions</Label>
                    <p className="text-sm text-muted-foreground">Documents must be approved before public submission</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Allow external collaboration</Label>
                    <p className="text-sm text-muted-foreground">
                      Enable collaboration with users outside your organization
                    </p>
                  </div>
                  <Switch />
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Bell className="h-5 w-5" />
                  Notification Preferences
                </CardTitle>
                <CardDescription>Choose what notifications you want to receive</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>New document uploads</Label>
                    <p className="text-sm text-muted-foreground">Get notified when team members upload documents</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Document comments</Label>
                    <p className="text-sm text-muted-foreground">Get notified about comments on your documents</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Weekly analytics summary</Label>
                    <p className="text-sm text-muted-foreground">Receive weekly reports about document performance</p>
                  </div>
                  <Switch />
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/login-form.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useAuth } from "./auth-provider"
import { FileText } from "lucide-react"

export function LoginForm() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { login } = useAuth()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    try {
      await login(email, password)
    } catch (error) {
      console.error("Login failed:", error)
    } finally {
      setIsLoading(false)
    }
  }

const demoUsers = [
    { email: "peer@example.com", role: "Peer User", description: "Browse and rate public documents" },
    { email: "org@example.com", role: "Organization", description: "Manage organization documents and team" },
    { email: "admin@example.com", role: "Platform Admin", description: "Full platform administration access" },
  ]

return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="w-full max-w-md space-y-6">
        <div className="flex flex-col space-y-2 text-center">
          <FileText className="mx-auto h-12 w-12 text-primary" />
          <h1 className="text-2xl font-serif font-semibold tracking-tight">Healthcare HR Document Platform</h1>
          <p className="text-sm text-muted-foreground">Manage, share, and collaborate on HR policies</p>
        </div>

<Tabs defaultValue="login" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="login">Sign In</TabsTrigger>
            <TabsTrigger value="demo">Demo Users</TabsTrigger>
          </TabsList>

<TabsContent value="login">
            <Card>
              <CardHeader>
                <CardTitle>Sign In</CardTitle>
                <CardDescription>Enter your credentials to access the platform</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="Enter your email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="password">Password</Label>
                    <Input
                      id="password"
                      type="password"
                      placeholder="Enter your password"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required
                    />
                  </div>
                  <Button type="submit" className="w-full" disabled={isLoading}>
                    {isLoading ? "Signing in..." : "Sign In"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="demo">
            <Card>
              <CardHeader>
                <CardTitle>Demo Users</CardTitle>
                <CardDescription>Try different user roles with these demo accounts</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                {demoUsers.map((user) => (
                  <div key={user.email} className="flex items-center justify-between p-3 border rounded-lg">
                    <div>
                      <p className="font-medium">{user.role}</p>
                      <p className="text-sm text-muted-foreground">{user.description}</p>
                      <p className="text-xs text-accent">{user.email}</p>
                    </div>
                    <Button
                      size="sm"
                      onClick={() => {
                        setEmail(user.email)
                        setPassword("demo123")
                        login(user.email, "demo123")
                      }}
                    >
                      Try
                    </Button>
                  </div>
                ))}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useAuth } from "@/components/auth-provider"
import { LoginForm } from "@/components/login-form"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"

export default function HomePage() {
  const { user, isLoading } = useAuth()

if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
          <p className="mt-2 text-sm text-muted-foreground">Loading...</p>
        </div>
      </div>
    )
  }

if (!user) {
    return <LoginForm />
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <SidebarNav />
        <main className="flex-1 p-4 md:p-6 overflow-auto min-w-0">
          <div className="max-w-7xl mx-auto">
            <div className="mb-6 md:mb-8">
              <h1 className="text-2xl md:text-3xl font-serif font-bold mb-2 truncate">Welcome, {user.name}</h1>
              <p className="text-muted-foreground text-sm md:text-base">
                {user.role === "admin" && "Manage the platform and review content submissions."}
                {user.role === "organization" && `Manage documents for ${user.organizationName}.`}
                {user.role === "peer" && "Browse and collaborate on HR documents."}
              </p>
            </div>

<div className="grid gap-4 md:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
              <div className="p-4 md:p-6 border rounded-lg bg-card">
                <h3 className="font-serif font-semibold mb-2 text-sm md:text-base">Quick Stats</h3>
                <p className="text-xl md:text-2xl font-bold text-primary">1,247</p>
                <p className="text-xs md:text-sm text-muted-foreground">Total Documents</p>
              </div>

<div className="p-4 md:p-6 border rounded-lg bg-card">
                <h3 className="font-serif font-semibold mb-2 text-sm md:text-base">Recent Activity</h3>
                <p className="text-xl md:text-2xl font-bold text-accent">23</p>
                <p className="text-xs md:text-sm text-muted-foreground">New This Week</p>
              </div>

<div className="p-4 md:p-6 border rounded-lg bg-card sm:col-span-2 lg:col-span-1">
                <h3 className="font-serif font-semibold mb-2 text-sm md:text-base">Your Role</h3>
                <p className="text-base md:text-lg font-medium text-foreground truncate">
                  {user.role === "admin" && "Platform Admin"}
                  {user.role === "organization" && "Organization"}
                  {user.role === "peer" && "Peer User"}
                </p>
                <p className="text-xs md:text-sm text-muted-foreground">Access Level</p>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { SidebarNav } from "@/components/sidebar-nav"
import { Header } from "@/components/header"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { useAuth } from "@/components/auth-provider"
import { UserCheck, Search, MoreHorizontal, Mail, Shield } from "lucide-react"

export default function AdminUsersPage() {
  const { user } = useAuth()

if (user?.role !== "admin") {
    return (
      <div className="flex h-screen bg-background">
        <aside className="w-64 border-r bg-muted/40">
          <SidebarNav />
        </aside>
        <div className="flex-1 flex flex-col">
          <Header />
          <main className="flex-1 p-6">
            <Card className="max-w-md mx-auto">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <UserCheck className="h-5 w-5 text-healthcare-cyan" />
                  User Management Preview
                </CardTitle>
                <CardDescription>
                  This page allows platform administrators to manage user accounts and permissions.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  Switch to an Admin account to manage user accounts, assign roles, and monitor user activity across the
                  platform.
                </p>
              </CardContent>
            </Card>
          </main>
        </div>
      </div>
    )
  }

const users = [
    {
      id: 1,
      name: "Sarah Chen",
      email: "sarah@healthcorp.com",
      role: "organization",
      status: "active",
      lastActive: "2 hours ago",
    },
    { id: 2, name: "Mike Johnson", email: "mike@medtech.com", role: "peer", status: "active", lastActive: "1 day ago" },
    {
      id: 3,
      name: "Lisa Wang",
      email: "lisa@careplus.com",
      role: "organization",
      status: "active",
      lastActive: "3 hours ago",
    },
    {
      id: 4,
      name: "David Brown",
      email: "david@healthsys.com",
      role: "peer",
      status: "inactive",
      lastActive: "1 week ago",
    },
    {
      id: 5,
      name: "Emma Davis",
      email: "emma@medcenter.com",
      role: "organization",
      status: "active",
      lastActive: "5 hours ago",
    },
  ]

const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-red-100 text-red-800"
      case "organization":
        return "bg-blue-100 text-blue-800"
      case "peer":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="flex h-screen bg-background">
      <aside className="w-64 border-r bg-muted/40">
        <SidebarNav />
      </aside>
      <div className="flex-1 flex flex-col">
        <Header />
        <main className="flex-1 p-6 space-y-6">
          <div className="grid gap-4 md:grid-cols-3">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Users</CardTitle>
                <UserCheck className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,247</div>
                <p className="text-xs text-muted-foreground">+12% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Active Users</CardTitle>
                <UserCheck className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,089</div>
                <p className="text-xs text-muted-foreground">87% of total users</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Organizations</CardTitle>
                <Shield className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">156</div>
                <p className="text-xs text-muted-foreground">+8 new this month</p>
              </CardContent>
            </Card>
          </div>

<div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-serif font-bold">User Management</h1>
              <p className="text-muted-foreground">Manage platform users and permissions</p>
            </div>
            <Button className="bg-healthcare-cyan hover:bg-healthcare-cyan/90">
              <Mail className="h-4 w-4 mr-2" />
              Invite User
            </Button>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Platform Users</CardTitle>
              <CardDescription>View and manage all registered users</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center space-x-2 mb-4">
                <Search className="h-4 w-4 text-muted-foreground" />
                <Input placeholder="Search users..." className="max-w-sm" />
              </div>

<div className="space-y-4">
                {users.map((userData) => (
                  <div key={userData.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center space-x-4">
                      <Avatar>
                        <AvatarFallback>
                          {userData.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <h3 className="font-medium">{userData.name}</h3>
                        <p className="text-sm text-muted-foreground">{userData.email}</p>
                        <p className="text-xs text-muted-foreground">Last active: {userData.lastActive}</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Badge className={getRoleBadgeColor(userData.role)}>{userData.role}</Badge>
                      <Badge variant={userData.status === "active" ? "default" : "secondary"}>{userData.status}</Badge>
                      <Button variant="ghost" size="sm">
                        <MoreHorizontal className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/moderation/page.tsx"
"use client"

import { useState } from "react"
import { SidebarNav } from "@/components/sidebar-nav"
import { Header } from "@/components/header"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { useAuth } from "@/components/auth-provider"
import { MessageSquare, Flag, CheckCircle, XCircle, Eye } from "lucide-react"
import { toast } from "sonner"

export default function AdminModerationPage() {
  const { user } = useAuth()

const [moderationItems, setModerationItems] = useState([
    {
      id: 1,
      type: "comment",
      content:
        "This policy seems outdated and doesn't reflect current best practices. We should consider updating it to align with modern remote work standards and include more flexible options for employees.",
      author: "John Smith",
      document: "Remote Work Policy",
      reportReason: "Inappropriate content",
      status: "pending",
      reportedAt: "2 hours ago",
      fullContext:
        "This comment was made in response to the Remote Work Policy section about mandatory office hours. The user suggested the policy needs updating to reflect current industry standards.",
    },
    {
      id: 2,
      type: "document",
      content: "Unofficial HR Guidelines v2.1",
      author: "Sarah Johnson",
      document: "HR Guidelines",
      reportReason: "Copyright violation",
      status: "pending",
      reportedAt: "4 hours ago",
      fullContext:
        "This document appears to contain content copied from another organization's HR manual without proper attribution or permission.",
    },
    {
      id: 3,
      type: "comment",
      content: "I disagree with this approach completely. This is terrible advice.",
      author: "Mike Davis",
      document: "Employee Benefits Guide",
      reportReason: "Harassment",
      status: "resolved",
      reportedAt: "1 day ago",
      fullContext:
        "This comment was made in response to the mental health benefits section. The user expressed strong disagreement but did not provide constructive feedback.",
    },
  ])

const handleApprove = (itemId: number) => {
    setModerationItems((items) => items.map((item) => (item.id === itemId ? { ...item, status: "resolved" } : item)))
    toast.success("Content approved and restored")
  }

const handleRemove = (itemId: number) => {
    setModerationItems((items) => items.map((item) => (item.id === itemId ? { ...item, status: "rejected" } : item)))
    toast.success("Content removed successfully")
  }

const pendingCount = moderationItems.filter((item) => item.status === "pending").length
  const resolvedToday = moderationItems.filter((item) => item.status === "resolved").length

if (user?.role !== "admin") {
    return (
      <div className="flex h-screen bg-background">
        <aside className="w-64 border-r bg-muted/40 min-h-screen">
          <SidebarNav />
        </aside>
        <div className="flex-1 flex flex-col">
          <Header />
          <main className="flex-1 p-6">
            <Card className="max-w-md mx-auto">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MessageSquare className="h-5 w-5 text-healthcare-cyan" />
                  Content Moderation Preview
                </CardTitle>
                <CardDescription>
                  This page allows platform administrators to moderate user-generated content and handle reports.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  Switch to an Admin account to moderate comments, handle content reports, and maintain community
                  standards across the platform.
                </p>
              </CardContent>
            </Card>
          </main>
        </div>
      </div>
    )
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "resolved":
        return "bg-green-100 text-green-800"
      case "rejected":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="flex h-screen bg-background">
      <aside className="w-64 border-r bg-muted/40 min-h-screen">
        <SidebarNav />
      </aside>
      <div className="flex-1 flex flex-col">
        <Header />
        <main className="flex-1 p-6 space-y-6">
          <div>
            <h1 className="text-3xl font-serif font-bold">Content Moderation</h1>
            <p className="text-muted-foreground">Review and moderate user-generated content</p>
          </div>

<div className="grid gap-4 md:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Pending Reports</CardTitle>
                <Flag className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{pendingCount}</div>
                <p className="text-xs text-muted-foreground">Requires attention</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Resolved Today</CardTitle>
                <CheckCircle className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{resolvedToday}</div>
                <p className="text-xs text-muted-foreground">+3 from yesterday</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Comments</CardTitle>
                <MessageSquare className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">2,847</div>
                <p className="text-xs text-muted-foreground">Platform wide</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Auto-Flagged</CardTitle>
                <Flag className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">3</div>
                <p className="text-xs text-muted-foreground">By AI moderation</p>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Moderation Queue</CardTitle>
              <CardDescription>Review reported content and take appropriate action</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {moderationItems.map((item) => (
                  <div key={item.id} className="border rounded-lg p-4 space-y-3">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Badge variant="outline">{item.type}</Badge>
                        <Badge className={getStatusColor(item.status)}>{item.status}</Badge>
                      </div>
                      <span className="text-sm text-muted-foreground">{item.reportedAt}</span>
                    </div>

<div className="flex items-start space-x-3">
                      <Avatar className="h-8 w-8">
                        <AvatarFallback>
                          {item.author
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <p className="font-medium text-sm">{item.author}</p>
                        <p className="text-sm text-muted-foreground">on {item.document}</p>
                        <p className="text-sm mt-1 p-2 bg-muted rounded">{item.content}</p>
                        <p className="text-xs text-red-600 mt-1">Reported for: {item.reportReason}</p>
                      </div>
                    </div>

{item.status === "pending" && (
                      <div className="flex items-center space-x-2 pt-2">
                        <Dialog>
                          <DialogTrigger asChild>
                            <Button size="sm" variant="outline">
                              <Eye className="h-4 w-4 mr-1" />
                              View Context
                            </Button>
                          </DialogTrigger>
                          <DialogContent className="max-w-2xl">
                            <DialogHeader>
                              <DialogTitle>Content Context</DialogTitle>
                              <DialogDescription>Full context and details for this reported content</DialogDescription>
                            </DialogHeader>
                            <div className="space-y-4">
                              <div>
                                <h4 className="font-medium mb-2">Reported Content:</h4>
                                <p className="text-sm p-3 bg-muted rounded">{item.content}</p>
                              </div>
                              <div>
                                <h4 className="font-medium mb-2">Full Context:</h4>
                                <p className="text-sm">{item.fullContext}</p>
                              </div>
                              <div className="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                  <span className="font-medium">Author:</span> {item.author}
                                </div>
                                <div>
                                  <span className="font-medium">Document:</span> {item.document}
                                </div>
                                <div>
                                  <span className="font-medium">Report Reason:</span> {item.reportReason}
                                </div>
                                <div>
                                  <span className="font-medium">Reported:</span> {item.reportedAt}
                                </div>
                              </div>
                            </div>
                          </DialogContent>
                        </Dialog>
                        <Button
                          size="sm"
                          className="bg-green-600 hover:bg-green-700"
                          onClick={() => handleApprove(item.id)}
                        >
                          <CheckCircle className="h-4 w-4 mr-1" />
                          Approve
                        </Button>
                        <Button size="sm" variant="destructive" onClick={() => handleRemove(item.id)}>
                          <XCircle className="h-4 w-4 mr-1" />
                          Remove
                        </Button>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/documents/[id]/page.tsx" isFixed="true" isQuickEdit="true"
"use client"
import { useParams } from "next/navigation"
import { useEffect } from "react"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { DocumentViewer } from "@/components/document-viewer"
import { DocumentMetadata } from "@/components/document-metadata"
import { DocumentComments } from "@/components/document-comments"
import { DocumentVersionManager } from "@/components/document-version-manager"
import { useAuth } from "@/components/auth-provider"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { mockDocuments } from "@/lib/mock-data"
import { DocumentSharing } from "@/components/document-sharing"
import { FavoritesManager } from "@/components/favorites-manager"
import { Button } from "@/components/ui/button"
import { ArrowLeft, FileText } from "lucide-react"
import Link from "next/link"

export default function DocumentDetailPage() {
  const { user } = useAuth()
  const params = useParams()
  const documentId = params.id as string

const document = mockDocuments.find((doc) => doc.id === documentId)

useEffect(() => {
    if (document && typeof window !== "undefined") {
      const viewKey = `viewed-${documentId}`
      const hasViewed = localStorage.getItem(viewKey)

if (!hasViewed) {
        // Mark as viewed to prevent duplicate counting
        localStorage.setItem(viewKey, "true")
        console.log(`[v0] Document ${documentId} viewed for the first time`)
      }
    }
  }, [document, documentId])

if (!document) {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <SidebarNav />
          <main className="flex-1 flex items-center justify-center p-4">
            <div className="text-center space-y-4 max-w-md">
              <FileText className="h-16 w-16 mx-auto text-muted-foreground" />
              <h1 className="text-xl md:text-2xl font-serif font-semibold">Document Not Found</h1>
              <p className="text-muted-foreground text-sm md:text-base">
                The document you're looking for doesn't exist.
              </p>
              <Button asChild>
                <Link href="/documents">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back to Documents
                </Link>
              </Button>
            </div>
          </main>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <SidebarNav />
        <main className="flex-1 min-w-0">
          <div className="flex flex-col lg:flex-row h-[calc(100vh-3.5rem)]">
            {/* Document Viewer */}
            <div className="flex-1 border-r min-w-0">
              <div className="border-b p-4 bg-card">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <div className="min-w-0 flex-1">
                    <h1 className="text-lg md:text-xl font-serif font-semibold mb-1 truncate">{document.title}</h1>
                    <p className="text-sm text-muted-foreground truncate">by {document.author}</p>
                  </div>
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <FavoritesManager documentId={document.id} />
                    <DocumentSharing documentId={document.id} documentTitle={document.title} />
                  </div>
                </div>
              </div>
              <div className="overflow-auto h-[calc(100%-5rem)]">
                <DocumentViewer document={document} />
              </div>
            </div>

<div className="flex-1 border-t min-h-0">
                <Tabs defaultValue="comments" className="h-full flex flex-col">
                  <TabsList className="grid w-full grid-cols-2 flex-shrink-0">
                    <TabsTrigger value="comments">Comments</TabsTrigger>
                    <TabsTrigger value="versions">Versions</TabsTrigger>
                  </TabsList>
                  <TabsContent value="comments" className="flex-1 overflow-hidden min-h-0">
                    <DocumentComments documentId={document.id} />
                  </TabsContent>
                  <TabsContent value="versions" className="flex-1 overflow-auto p-4 min-h-0">
                    <DocumentVersionManager documentId={document.id} currentVersion={document.version} />
                  </TabsContent>
                </Tabs>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/professional-woman-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-doctor-1PhIc0ot5WtZlqdG8B8qmD3nJBttn4.png"
[V0_FILE]png:file="public/professional-man-healthcare.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-healthcare-KtVwRkY9XXNwpNd2pOm6H4XUCIGkP2.png"
[V0_FILE]png:file="public/professional-asian-woman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-asian-woman-WViauJsmF7LGK4DWbOHdvRV1sdsp66.png"
[V0_FILE]png:file="public/professional-man-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-doctor-IvbwfVRKTSG2pd4OLdwW5qooeRFdbz.png"
[V0_FILE]typescriptreact:file="app/notifications/page.tsx" isFixed="true" isQuickEdit="true"
"use client"
import { useAuth } from "@/components/auth-provider"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { Button } from "@/components/ui/button"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bell, MessageSquare, FileText, Users, CheckCircle, AtSign } from "lucide-react"
import { mockNotifications, mockUsers } from "@/lib/mock-data"

export default function NotificationsPage() {
  const { user } = useAuth()

const notifications = mockNotifications.map((notification) => {
    const notificationUser = mockUsers.find((u) => u.id === notification.userId)
    return {
      ...notification,
      icon:
        notification.type === "comment"
          ? MessageSquare
          : notification.type === "document"
            ? FileText
            : notification.type === "team"
              ? Users
              : notification.type === "mention"
                ? AtSign
                : CheckCircle,
      user: notificationUser,
    }
  })

const unreadCount = notifications.filter((n) => !n.read).length

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar min-h-screen">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-4xl mx-auto">
            <div className="mb-8 flex items-center justify-between">
              <div>
                <h1 className="text-3xl font-serif font-bold mb-2">Notifications</h1>
                <p className="text-muted-foreground">
                  Stay updated with the latest activity
                  {unreadCount > 0 && (
                    <Badge variant="secondary" className="ml-2">
                      {unreadCount} unread
                    </Badge>
                  )}
                </p>
              </div>
              {unreadCount > 0 && <Button variant="outline">Mark all as read</Button>}
            </div>

<div className="space-y-4">
              {notifications.map((notification) => (
                <Card key={notification.id} className={`${!notification.read ? "border-primary/20 bg-primary/5" : ""}`}>
                  <CardHeader className="pb-3">
                    <div className="flex items-start gap-3">
                      <div className={`p-2 rounded-full ${!notification.read ? "bg-primary/10" : "bg-muted"}`}>
                        <notification.icon
                          className={`h-4 w-4 ${!notification.read ? "text-primary" : "text-muted-foreground"}`}
                        />
                      </div>
                      <div className="flex-1">
                        <CardTitle className="text-base font-serif mb-1">
                          {notification.title}
                          {!notification.read && (
                            <span className="ml-2 h-2 w-2 bg-primary rounded-full inline-block"></span>
                          )}
                        </CardTitle>
                        <CardDescription className="mb-2">{notification.message}</CardDescription>
                        {notification.user && (
                          <div className="flex items-center gap-2 mt-2">
                            <Avatar className="h-6 w-6">
                              <AvatarImage src={notification.user.avatar || "/placeholder.svg"} />
                              <AvatarFallback className="text-xs">{notification.user.name.charAt(0)}</AvatarFallback>
                            </Avatar>
                            <span className="text-xs text-muted-foreground">
                              {notification.user.name} • {notification.user.organization}
                            </span>
                          </div>
                        )}
                      </div>
                      <span className="text-xs text-muted-foreground">{notification.time}</span>
                    </div>
                  </CardHeader>
                </Card>
              ))}
            </div>

{notifications.length === 0 && (
              <div className="text-center py-12">
                <Bell className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                <h3 className="text-lg font-serif font-semibold mb-2">No notifications</h3>
                <p className="text-muted-foreground">You're all caught up! New notifications will appear here.</p>
              </div>
            )}
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/favorites/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useAuth } from "@/components/auth-provider"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Star, Calendar, Eye } from "lucide-react"
import Link from "next/link"
import { mockFavoriteDocuments, mockUsers } from "@/lib/mock-data"

export default function FavoritesPage() {
  const { user } = useAuth()

const favoriteDocuments = mockFavoriteDocuments.map((fav) => {
    const author = mockUsers.find((u) => u.name === fav.author)
    return {
      ...fav,
      author: author || { name: fav.author, organization: fav.organization },
    }
  })

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar min-h-screen">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-6xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-serif font-bold mb-2">My Favorites</h1>
              <p className="text-muted-foreground">
                Documents you've saved for quick access ({favoriteDocuments.length} documents)
              </p>
            </div>

<div className="grid gap-6">
              {favoriteDocuments.map((doc) => (
                <Card key={doc.id} className="hover:shadow-md transition-shadow">
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <CardTitle className="text-lg font-serif mb-2">
                          <Link href={`/documents/${doc.documentId}`} className="hover:text-primary">
                            {doc.title}
                          </Link>
                        </CardTitle>
                        <CardDescription className="flex items-center gap-4 text-sm mb-3">
                          <div className="flex items-center gap-2">
                            <Avatar className="h-5 w-5">
                              <AvatarImage src={doc.author.avatar || "/placeholder.svg"} />
                              <AvatarFallback className="text-xs">{doc.author.name.charAt(0)}</AvatarFallback>
                            </Avatar>
                            <span>{doc.author.name}</span>
                          </div>
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            Added {new Date(doc.dateAdded).toLocaleDateString()}
                          </span>
                        </CardDescription>
                        <div className="flex flex-wrap gap-1 mb-3">
                          {doc.tags.slice(0, 3).map((tag) => (
                            <Badge key={tag} variant="outline" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      <Button variant="ghost" size="sm" className="text-yellow-500 hover:text-yellow-600">
                        <Star className="h-4 w-4 fill-current" />
                      </Button>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <Badge variant="secondary">{doc.category}</Badge>
                        <div className="flex items-center gap-1">
                          <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                          <span className="text-sm text-muted-foreground">{doc.rating}</span>
                        </div>
                        <span className="text-xs text-muted-foreground">{doc.organization}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button variant="outline" size="sm" asChild>
                          <Link href={`/documents/${doc.documentId}`}>
                            <Eye className="h-3 w-3 mr-1" />
                            View
                          </Link>
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}

{favoriteDocuments.length === 0 && (
                <div className="text-center py-12">
                  <Star className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                  <h3 className="text-lg font-serif font-semibold mb-2">No favorites yet</h3>
                  <p className="text-muted-foreground mb-4">
                    Start browsing documents and save your favorites for quick access.
                  </p>
                  <Button asChild>
                    <Link href="/documents">Browse Documents</Link>
                  </Button>
                </div>
              )}
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/review/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { CheckCircle, XCircle, Eye, Download, Calendar, Building2, User, MessageSquare, Shield } from "lucide-react"

interface PendingDocument {
  id: string
  title: string
  description: string
  category: string
  organization: string
  submittedBy: string
  submittedAt: string
  fileType: string
  fileSize: string
  status: "pending" | "under-review" | "approved" | "rejected"
}

export default function ReviewQueuePage() {
  const { user } = useAuth()
  const [selectedDocument, setSelectedDocument] = useState<PendingDocument | null>(null)
  const [reviewComment, setReviewComment] = useState("")

const handlePreview = (document: PendingDocument) => {
    console.log("[v0] Previewing document:", document.title)
    // Simulate opening document preview
    window.open(`/documents/${document.id}`, "_blank")
  }

const handleDownload = (document: PendingDocument) => {
    console.log("[v0] Downloading document:", document.title)
    // Simulate file download
    const link = document.createElement("a")
    link.href = `/api/documents/${document.id}/download`
    link.download = `${document.title}.${document.fileType}`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

const handleApprove = (documentId: string) => {
    console.log("Approving document:", documentId, "with comment:", reviewComment)
    setReviewComment("")
    setSelectedDocument(null)
  }

const handleReject = (documentId: string) => {
    console.log("Rejecting document:", documentId, "with comment:", reviewComment)
    setReviewComment("")
    setSelectedDocument(null)
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "secondary"
      case "under-review":
        return "outline"
      case "approved":
        return "default"
      case "rejected":
        return "destructive"
      default:
        return "outline"
    }
  }

if (!user || user.role !== "admin") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-7xl mx-auto">
              <Card className="border-yellow-200 bg-yellow-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-yellow-800">
                    <Shield className="h-5 w-5" />
                    Review Queue Preview
                  </CardTitle>
                  <CardDescription className="text-yellow-700">
                    This is a preview of the document review queue. In a real application, admin access would be
                    required. Current role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-yellow-700 mb-4">
                    Switch to an admin account (use email containing "admin") to review and moderate document
                    submissions.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const pendingDocuments: PendingDocument[] = [
    {
      id: "pending-1",
      title: "Updated Healthcare Worker Safety Protocol",
      description:
        "Comprehensive safety guidelines for healthcare workers including new COVID-19 protocols and PPE requirements.",
      category: "safety",
      organization: "General Hospital",
      submittedBy: "Dr. Sarah Johnson",
      submittedAt: "2024-03-15T10:30:00Z",
      fileType: "pdf",
      fileSize: "2.3 MB",
      status: "pending",
    },
    {
      id: "pending-2",
      title: "Employee Mental Health Support Program",
      description: "Guidelines for supporting employee mental health and wellness in healthcare settings.",
      category: "benefits",
      organization: "City Medical Center",
      submittedBy: "Maria Rodriguez",
      submittedAt: "2024-03-14T16:45:00Z",
      fileType: "docx",
      fileSize: "1.8 MB",
      status: "under-review",
    },
    {
      id: "pending-3",
      title: "New Nurse Orientation Checklist",
      description: "Comprehensive checklist for onboarding new nursing staff with updated requirements.",
      category: "onboarding",
      organization: "Regional Health System",
      submittedBy: "James Chen",
      submittedAt: "2024-03-13T09:15:00Z",
      fileType: "pdf",
      fileSize: "1.2 MB",
      status: "pending",
    },
  ]

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-7xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-serif font-bold mb-2">Review Queue</h1>
              <p className="text-muted-foreground">Review and moderate document submissions for the public library.</p>
            </div>

<Tabs defaultValue="pending" className="space-y-6">
              <TabsList>
                <TabsTrigger value="pending">
                  Pending Review ({pendingDocuments.filter((d) => d.status === "pending").length})
                </TabsTrigger>
                <TabsTrigger value="under-review">
                  Under Review ({pendingDocuments.filter((d) => d.status === "under-review").length})
                </TabsTrigger>
                <TabsTrigger value="recent">Recent Decisions</TabsTrigger>
              </TabsList>

<TabsContent value="pending" className="space-y-4">
                <div className="grid gap-4">
                  {pendingDocuments
                    .filter((doc) => doc.status === "pending")
                    .map((document) => (
                      <Card key={document.id} className="hover:shadow-md transition-shadow">
                        <CardHeader>
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-2">
                                <Badge variant="secondary">{document.category}</Badge>
                                <Badge variant={getStatusColor(document.status)}>{document.status}</Badge>
                              </div>
                              <CardTitle className="text-xl mb-2">{document.title}</CardTitle>
                              <CardDescription className="text-base">{document.description}</CardDescription>
                            </div>
                          </div>

<div className="flex items-center gap-6 text-sm text-muted-foreground mt-4">
                            <div className="flex items-center gap-1">
                              <Building2 className="h-3 w-3" />
                              <span>{document.organization}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <User className="h-3 w-3" />
                              <span>{document.submittedBy}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <Calendar className="h-3 w-3" />
                              <span>{new Date(document.submittedAt).toLocaleDateString()}</span>
                            </div>
                            <div>
                              {document.fileType.toUpperCase()} • {document.fileSize}
                            </div>
                          </div>
                        </CardHeader>

<CardContent>
                          <div className="flex gap-3">
                            <Button
                              size="sm"
                              variant="outline"
                              className="bg-transparent"
                              onClick={() => handlePreview(document)}
                            >
                              <Eye className="h-3 w-3 mr-1" />
                              Preview
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              className="bg-transparent"
                              onClick={() => handleDownload(document)}
                            >
                              <Download className="h-3 w-3 mr-1" />
                              Download
                            </Button>

<Dialog>
                              <DialogTrigger asChild>
                                <Button size="sm" onClick={() => setSelectedDocument(document)} className="ml-auto">
                                  <CheckCircle className="h-3 w-3 mr-1" />
                                  Review
                                </Button>
                              </DialogTrigger>
                              <DialogContent className="max-w-2xl">
                                <DialogHeader>
                                  <DialogTitle>Review Document</DialogTitle>
                                  <DialogDescription>
                                    Approve or reject this document for the public library
                                  </DialogDescription>
                                </DialogHeader>

{selectedDocument && (
                                  <div className="space-y-4">
                                    <div className="p-4 bg-muted rounded-lg">
                                      <h3 className="font-semibold mb-2">{selectedDocument.title}</h3>
                                      <p className="text-sm text-muted-foreground mb-3">
                                        {selectedDocument.description}
                                      </p>
                                      <div className="flex items-center gap-4 text-xs text-muted-foreground">
                                        <span>{selectedDocument.organization}</span>
                                        <span>{selectedDocument.submittedBy}</span>
                                        <span>{selectedDocument.fileType.toUpperCase()}</span>
                                        <span>{selectedDocument.fileSize}</span>
                                      </div>
                                    </div>

<div className="space-y-2">
                                      <Label htmlFor="review-comment">Review Comment</Label>
                                      <Textarea
                                        id="review-comment"
                                        placeholder="Add a comment about your decision (optional for approval, required for rejection)"
                                        value={reviewComment}
                                        onChange={(e) => setReviewComment(e.target.value)}
                                        rows={3}
                                      />
                                    </div>

<div className="flex gap-3">
                                      <Button onClick={() => handleApprove(selectedDocument.id)} className="flex-1">
                                        <CheckCircle className="h-4 w-4 mr-2" />
                                        Approve for Public Library
                                      </Button>
                                      <Button
                                        variant="destructive"
                                        onClick={() => handleReject(selectedDocument.id)}
                                        disabled={!reviewComment.trim()}
                                      >
                                        <XCircle className="h-4 w-4 mr-2" />
                                        Reject
                                      </Button>
                                    </div>
                                  </div>
                                )}
                              </DialogContent>
                            </Dialog>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                </div>
              </TabsContent>

<TabsContent value="under-review" className="space-y-4">
                <div className="grid gap-4">
                  {pendingDocuments
                    .filter((doc) => doc.status === "under-review")
                    .map((document) => (
                      <Card key={document.id} className="border-yellow-200 bg-yellow-50/50">
                        <CardHeader>
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-2">
                                <Badge variant="secondary">{document.category}</Badge>
                                <Badge variant="outline">Under Review</Badge>
                              </div>
                              <CardTitle className="text-xl mb-2">{document.title}</CardTitle>
                              <CardDescription className="text-base">{document.description}</CardDescription>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent>
                          <div className="flex items-center justify-between">
                            <div className="text-sm text-muted-foreground">
                              Currently being reviewed by another admin
                            </div>
                            <Button size="sm" variant="outline">
                              <MessageSquare className="h-3 w-3 mr-1" />
                              Add Note
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                </div>
              </TabsContent>

<TabsContent value="recent" className="space-y-4">
                <div className="text-center py-12">
                  <p className="text-muted-foreground">Recent review decisions will appear here.</p>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/organization/team/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { UserPlus, Mail, MoreHorizontal, Shield, User, Crown, Users } from "lucide-react"

interface TeamMember {
  id: string
  name: string
  email: string
  role: "admin" | "editor" | "viewer"
  joinedAt: string
  lastActive: string
  status: "active" | "pending" | "inactive"
}

export default function TeamManagementPage() {
  const { user } = useAuth()
  const [inviteEmail, setInviteEmail] = useState("")
  const [inviteRole, setInviteRole] = useState("viewer")

if (!user || user.role !== "organization") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar min-h-screen">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-7xl mx-auto">
              <Card className="border-cyan-200 bg-cyan-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-cyan-800">
                    <Users className="h-5 w-5" />
                    Team Management Preview
                  </CardTitle>
                  <CardDescription className="text-cyan-700">
                    This is a preview of the team management feature. In a real application, organization access would
                    be required. Current role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-cyan-700 mb-4">
                    Switch to an organization account (use email containing "org") to manage team members and
                    permissions.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const teamMembers: TeamMember[] = [
    {
      id: "1",
      name: "Dr. Sarah Johnson",
      email: "sarah.johnson@generalhospital.com",
      role: "admin",
      joinedAt: "2024-01-15",
      lastActive: "2024-03-15",
      status: "active",
    },
    {
      id: "2",
      name: "Mike Rodriguez",
      email: "mike.rodriguez@generalhospital.com",
      role: "editor",
      joinedAt: "2024-02-01",
      lastActive: "2024-03-14",
      status: "active",
    },
    {
      id: "3",
      name: "Jennifer Lee",
      email: "jennifer.lee@generalhospital.com",
      role: "viewer",
      joinedAt: "2024-02-15",
      lastActive: "2024-03-10",
      status: "active",
    },
    {
      id: "4",
      name: "David Chen",
      email: "david.chen@generalhospital.com",
      role: "editor",
      joinedAt: "2024-03-01",
      lastActive: "Never",
      status: "pending",
    },
  ]

const getRoleIcon = (role: string) => {
    switch (role) {
      case "admin":
        return <Crown className="h-3 w-3" />
      case "editor":
        return <Shield className="h-3 w-3" />
      case "viewer":
      default:
        return <User className="h-3 w-3" />
    }
  }

const getRoleColor = (role: string) => {
    switch (role) {
      case "admin":
        return "default"
      case "editor":
        return "secondary"
      case "viewer":
      default:
        return "outline"
    }
  }

const handleInviteMember = () => {
    // Mock invite functionality
    console.log("Inviting:", inviteEmail, "as", inviteRole)
    setInviteEmail("")
    setInviteRole("viewer")
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-6xl mx-auto">
            <div className="flex items-center justify-between mb-8">
              <div>
                <h1 className="text-3xl font-serif font-bold mb-2">Team Management</h1>
                <p className="text-muted-foreground">
                  Manage team members and their access permissions for {user.organizationName}.
                </p>
              </div>

<Dialog>
                <DialogTrigger asChild>
                  <Button>
                    <UserPlus className="mr-2 h-4 w-4" />
                    Invite Member
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Invite Team Member</DialogTitle>
                    <DialogDescription>
                      Send an invitation to join your organization's document management team.
                    </DialogDescription>
                  </DialogHeader>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="email">Email Address</Label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="colleague@example.com"
                        value={inviteEmail}
                        onChange={(e) => setInviteEmail(e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="role">Role</Label>
                      <Select value={inviteRole} onValueChange={setInviteRole}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="viewer">Viewer - Can view documents</SelectItem>
                          <SelectItem value="editor">Editor - Can upload and edit documents</SelectItem>
                          <SelectItem value="admin">Admin - Full organization management</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <Button onClick={handleInviteMember} className="w-full">
                      <Mail className="mr-2 h-4 w-4" />
                      Send Invitation
                    </Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>

{/* Team Stats */}
            <div className="grid gap-4 md:grid-cols-4 mb-8">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Members</CardTitle>
                  <User className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">{teamMembers.length}</div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Active</CardTitle>
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-green-600">
                    {teamMembers.filter((m) => m.status === "active").length}
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Pending</CardTitle>
                  <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-yellow-600">
                    {teamMembers.filter((m) => m.status === "pending").length}
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Admins</CardTitle>
                  <Crown className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-primary">
                    {teamMembers.filter((m) => m.role === "admin").length}
                  </div>
                </CardContent>
              </Card>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Team Members</CardTitle>
                <CardDescription>Manage your team members and their permissions</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {teamMembers.map((member) => (
                    <div key={member.id} className="flex items-center justify-between p-4 border rounded-lg">
                      <div className="flex items-center space-x-4">
                        <Avatar>
                          <AvatarImage src="/placeholder.svg" />
                          <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div>
                          <div className="flex items-center gap-2">
                            <p className="font-medium">{member.name}</p>
                            <Badge variant={getRoleColor(member.role)} className="flex items-center gap-1">
                              {getRoleIcon(member.role)}
                              {member.role}
                            </Badge>
                            <Badge
                              variant={
                                member.status === "active"
                                  ? "default"
                                  : member.status === "pending"
                                    ? "secondary"
                                    : "outline"
                              }
                            >
                              {member.status}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground">{member.email}</p>
                          <p className="text-xs text-muted-foreground">
                            Joined: {new Date(member.joinedAt).toLocaleDateString()} | Last active:{" "}
                            {member.lastActive === "Never" ? "Never" : new Date(member.lastActive).toLocaleDateString()}
                          </p>
                        </div>
                      </div>

<div className="flex items-center space-x-2">
                        <Button variant="outline" size="sm">
                          Edit Role
                        </Button>
                        <Button variant="outline" size="sm">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

export default function CommunityPage() {
  const { user } = useAuth()
  const [newDiscussionTitle, setNewDiscussionTitle] = useState("")
  const [newDiscussionContent, setNewDiscussionContent] = useState("")

const documentDiscussions = [
    {
      id: "1",
      documentId: "1",
      documentTitle: "Employee Onboarding Checklist",
      title: "Question about remote employee setup process",
      content:
        "Has anyone implemented this checklist for remote employees? What modifications did you make for the IT setup section?",
      author: "Dr. Sarah Chen",
      authorId: "2",
      organization: "Metro General Hospital",
      replies: 8,
      views: 45,
      lastActivity: "2024-01-15T10:30:00Z",
      tags: ["onboarding", "remote-work", "IT-setup"],
      isSticky: false,
    },
    {
      id: "2",
      documentId: "3",
      documentTitle: "HIPAA Privacy Policy Template",
      title: "Updates needed for telehealth compliance",
      content:
        "With the new telehealth regulations, should we be updating section 4.2 of this policy template? Our legal team has some concerns.",
      author: "Michael Rodriguez",
      authorId: "3",
      organization: "Riverside Medical Center",
      replies: 12,
      views: 78,
      lastActivity: "2024-01-14T16:45:00Z",
      tags: ["HIPAA", "telehealth", "compliance", "legal"],
      isSticky: true,
    },
    {
      id: "3",
      documentId: "2",
      documentTitle: "Performance Review Template",
      title: "Adapting for nursing staff evaluations",
      content:
        "We're using this template but finding it doesn't quite fit our nursing staff needs. Has anyone created a specialized version for clinical roles?",
      author: "Jennifer Walsh",
      authorId: "4",
      organization: "St. Mary's Healthcare",
      replies: 6,
      views: 32,
      lastActivity: "2024-01-13T09:15:00Z",
      tags: ["performance-review", "nursing", "clinical-staff"],
      isSticky: false,
    },
    {
      id: "4",
      documentId: "4",
      documentTitle: "Emergency Response Procedures",
      title: "Coordination with local emergency services",
      content:
        "The procedure mentions coordination with local services but doesn't specify the communication protocols. What's been your experience?",
      author: "Dr. Robert Kim",
      authorId: "5",
      organization: "Valley Health System",
      replies: 15,
      views: 89,
      lastActivity: "2024-01-12T14:20:00Z",
      tags: ["emergency", "protocols", "communication"],
      isSticky: false,
    },
  ]

const discussions = documentDiscussions.map((discussion) => {
    const author = mockUsers.find((u) => u.id === discussion.authorId)
    return {
      ...discussion,
      authorData: author,
    }
  })

const topContributors = mockUsers.slice(0, 3).map((user) => ({
    userId: user.id,
    name: user.name,
    organization: user.organization || "Independent",
    role: user.position || "Healthcare Professional",
    documentsCount: user.documentsContributed,
    averageRating: user.averageRating,
    isFollowing: Math.random() > 0.5,
    avatar: user.avatar,
  }))

const trendingDocuments = [
    { documentId: "3", title: "HIPAA Privacy Policy Template", discussionCount: 12 },
    { documentId: "4", title: "Emergency Response Procedures", discussionCount: 15 },
    { documentId: "1", title: "Employee Onboarding Checklist", discussionCount: 8 },
    { documentId: "2", title: "Performance Review Template", discussionCount: 6 },
    { documentId: "5", title: "Staff Training Manual", discussionCount: 4 },
  ]

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex min-h-screen">
        <aside className="w-64 border-r bg-sidebar min-h-screen">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-7xl mx-auto space-y-6">
            <div>
              <h1 className="text-3xl font-serif font-bold mb-2">Community Discussions</h1>
              <p className="text-muted-foreground">
                Document-based discussions from healthcare HR professionals ({discussions.length} active discussions)
              </p>
            </div>

<Card className="border-primary/20 bg-primary/5">
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <Info className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                  <div>
                    <p className="text-sm font-medium mb-1">How to start a discussion</p>
                    <p className="text-sm text-muted-foreground">
                      Visit any document in the{" "}
                      <Link href="/documents" className="text-primary hover:underline">
                        document library
                      </Link>{" "}
                      and use the comments section to start a discussion. Your discussion will appear here for the
                      community to see.
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* Main Content Area - Document Discussions */}
              <div className="lg:col-span-2 space-y-6">
                <div>
                  <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
                    <MessageSquare className="h-5 w-5" />
                    Recent Document Discussions
                  </h2>
                  <div className="space-y-4">
                    {discussions.map((discussion) => (
                      <Card key={discussion.id} className="hover:shadow-md transition-shadow cursor-pointer">
                        <CardContent className="p-4">
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-2 text-sm text-muted-foreground">
                                <FileText className="h-4 w-4" />
                                <Link
                                  href={`/documents/${discussion.documentId}`}
                                  className="hover:text-primary transition-colors flex items-center gap-1"
                                >
                                  {discussion.documentTitle}
                                  <ExternalLink className="h-3 w-3" />
                                </Link>
                              </div>
                              <div className="flex items-center gap-2 mb-2">
                                {discussion.isSticky && <Pin className="h-4 w-4 text-primary" />}
                                <h3 className="font-medium hover:text-primary transition-colors">{discussion.title}</h3>
                              </div>
                              <p className="text-sm text-muted-foreground mb-3 line-clamp-2">{discussion.content}</p>
                              <div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
                                <div className="flex items-center gap-2">
                                  <Avatar className="h-6 w-6">
                                    <AvatarImage src={discussion.authorData?.avatar || "/placeholder.svg"} />
                                    <AvatarFallback className="text-xs">{discussion.author.charAt(0)}</AvatarFallback>
                                  </Avatar>
                                  <span>{discussion.author}</span>
                                  <span>•</span>
                                  <span>{discussion.organization}</span>
                                </div>
                              </div>
                              <div className="flex items-center gap-4">
                                <div className="flex items-center gap-1 text-sm text-muted-foreground">
                                  <MessageSquare className="h-3 w-3" />
                                  <span>{discussion.replies} replies</span>
                                </div>
                                <div className="flex items-center gap-1 text-sm text-muted-foreground">
                                  <Eye className="h-3 w-3" />
                                  <span>{discussion.views} views</span>
                                </div>
                                <span className="text-sm text-muted-foreground">
                                  {new Date(discussion.lastActivity).toLocaleDateString()}
                                </span>
                              </div>
                            </div>
                            <div className="flex flex-wrap gap-1 max-w-xs">
                              {discussion.tags.slice(0, 3).map((tag) => (
                                <Badge key={tag} variant="outline" className="text-xs">
                                  {tag}
                                </Badge>
                              ))}
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </div>
              </div>

{/* Right Sidebar - Contributors and Trending Documents */}
              <div className="space-y-6">
                {/* Top Contributors */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-lg">
                      <Users className="h-5 w-5" />
                      Top Contributors
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {topContributors.map((contributor) => (
                      <div
                        key={contributor.userId}
                        className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:shadow-sm transition-shadow"
                      >
                        <Avatar className="h-10 w-10">
                          <AvatarImage src={contributor.avatar || "/placeholder.svg"} />
                          <AvatarFallback className="text-sm">{contributor.name.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1 min-w-0">
                          <p className="font-medium truncate">{contributor.name}</p>
                          <p className="text-sm text-muted-foreground truncate">{contributor.organization}</p>
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant="outline" className="text-xs">
                              {contributor.documentsCount} docs
                            </Badge>
                            <span className="text-xs text-muted-foreground">⭐ {contributor.averageRating}</span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-lg">
                      <TrendingUp className="h-5 w-5" />
                      Most Discussed Documents
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {trendingDocuments.map(({ documentId, title, discussionCount }) => (
                        <Link
                          key={documentId}
                          href={`/documents/${documentId}`}
                          className="flex items-center justify-between p-2 rounded hover:bg-muted/50 cursor-pointer transition-colors"
                        >
                          <div className="flex items-center gap-2 flex-1 min-w-0">
                            <FileText className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                            <span className="text-sm font-medium truncate">{title}</span>
                          </div>
                          <Badge variant="secondary" className="text-xs ml-2">
                            {discussionCount}
                          </Badge>
                        </Link>
                      ))}
                    </div>
                  </CardContent>
                </Card>

{/* Active This Week */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-lg">
                      <Users className="h-5 w-5" />
                      Active This Week
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {topContributors.slice(0, 4).map((contributor) => (
                        <div key={contributor.userId} className="flex items-center gap-3">
                          <Avatar className="h-8 w-8">
                            <AvatarImage src={contributor.avatar || "/placeholder.svg"} />
                            <AvatarFallback className="text-xs">{contributor.name.charAt(0)}</AvatarFallback>
                          </Avatar>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium truncate">{contributor.name}</p>
                            <p className="text-xs text-muted-foreground truncate">{contributor.organization}</p>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {Math.floor(Math.random() * 10) + 1} posts
                          </Badge>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-metadata.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Star, Eye, Download, MessageSquare, Calendar, User, Building2 } from "lucide-react"
import type { Document } from "@/lib/mock-data"

interface DocumentMetadataProps {
  document: Document
}

export function DocumentMetadata({ document }: DocumentMetadataProps) {
  const [userRating, setUserRating] = useState(0)
  const [localStats, setLocalStats] = useState({
    views: document.views,
    downloads: document.downloads,
    rating: document.rating,
    comments: document.comments,
  })

const handleRatingSubmit = () => {
    if (userRating > 0) {
      // Calculate new average rating (simplified)
      const newRating = (localStats.rating * 10 + userRating) / 11
      setLocalStats((prev) => ({ ...prev, rating: newRating }))

// Show success feedback
      alert(`Thank you for rating this document ${userRating} stars!`)
    }
  }

const handleDownload = () => {
    setLocalStats((prev) => ({ ...prev, downloads: prev.downloads + 1 }))
    // Simulate download
    const link = document.createElement("a")
    link.href = "/placeholder-document.pdf"
    link.download = `${document.title}.pdf`
    link.click()
  }

return (
    <div className="p-4 space-y-4 bg-card border-b">
      <div>
        <h3 className="font-serif font-semibold mb-3">Document Information</h3>

<div className="space-y-3 text-sm">
          <div className="flex items-center gap-2">
            <User className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">Author:</span>
            <span>{document.author}</span>
          </div>

<div className="flex items-center gap-2">
            <Building2 className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">Organization:</span>
            <Link
              href={`/organization-profile/${encodeURIComponent(document.organization)}`}
              className="text-primary hover:underline font-medium"
            >
              {document.organization}
            </Link>
          </div>

<div className="flex items-center gap-2">
            <Calendar className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">Updated:</span>
            <span>{new Date(document.updatedAt).toLocaleDateString()}</span>
          </div>
        </div>
      </div>

<div>
        <h4 className="font-medium mb-2">Statistics</h4>
        <div className="grid grid-cols-2 gap-3 text-sm">
          <div className="flex items-center gap-1">
            <Eye className="h-3 w-3 text-muted-foreground" />
            <span>{localStats.views} views</span>
          </div>
          <div className="flex items-center gap-1 cursor-pointer" onClick={handleDownload}>
            <Download className="h-3 w-3 text-muted-foreground" />
            <span>{localStats.downloads} downloads</span>
          </div>
          <div className="flex items-center gap-1">
            <Star className="h-3 w-3 text-muted-foreground" />
            <span>{localStats.rating.toFixed(1)} rating</span>
          </div>
          <div className="flex items-center gap-1">
            <MessageSquare className="h-3 w-3 text-muted-foreground" />
            <span>{localStats.comments} comments</span>
          </div>
        </div>
      </div>

<div>
        <h4 className="font-medium mb-2">Rate this document</h4>
        <div className="flex items-center gap-1 mb-2">
          {[1, 2, 3, 4, 5].map((star) => (
            <Button key={star} variant="ghost" size="sm" className="p-0 h-6 w-6" onClick={() => setUserRating(star)}>
              <Star
                className={`h-4 w-4 ${star <= userRating ? "fill-primary text-primary" : "text-muted-foreground"}`}
              />
            </Button>
          ))}
        </div>
        {userRating > 0 && (
          <Button size="sm" className="w-full" onClick={handleRatingSubmit}>
            Submit Rating
          </Button>
        )}
      </div>

<div>
        <h4 className="font-medium mb-2">Tags</h4>
        <div className="flex flex-wrap gap-1">
          {document.tags.map((tag) => (
            <Badge key={tag} variant="outline" className="text-xs">
              {tag}
            </Badge>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/organization/page.tsx"
"use client"

import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { FileText, Users, Upload, BarChart3, Settings, Plus, Eye, Building2 } from "lucide-react"

export default function OrganizationDashboard() {
  const { user } = useAuth()

if (!user || user.role !== "organization") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <SidebarNav />
          <main className="flex-1 p-4 md:p-6 overflow-auto min-w-0">
            <div className="max-w-7xl mx-auto">
              <Card className="border-cyan-200 bg-cyan-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-cyan-800">
                    <Building2 className="h-5 w-5 flex-shrink-0" />
                    <span className="truncate">Organization Dashboard Preview</span>
                  </CardTitle>
                  <CardDescription className="text-cyan-700">
                    This is a preview of the organization dashboard. In a real application, organization access would be
                    required. Current role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-cyan-700 mb-4">
                    Switch to an organization account (use email containing "org") to see full functionality.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const stats = {
    totalDocuments: 45,
    privateDocuments: 23,
    teamMembers: 12,
    monthlyViews: 1247,
    publicContributions: 8,
    pendingReviews: 3,
  }

const recentActivity = [
    { action: "Document uploaded", item: "New Employee Handbook", time: "2 hours ago" },
    { action: "Team member added", item: "Dr. Sarah Johnson", time: "1 day ago" },
    { action: "Document updated", item: "Safety Protocols v2.1", time: "2 days ago" },
    { action: "Collection created", item: "Emergency Procedures", time: "3 days ago" },
  ]

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <SidebarNav />
        <main className="flex-1 p-4 md:p-6 overflow-auto min-w-0">
          <div className="max-w-7xl mx-auto">
            <div className="mb-6 md:mb-8">
              <h1 className="text-2xl md:text-3xl font-serif font-bold mb-2">Organization Dashboard</h1>
              <p className="text-muted-foreground text-sm md:text-base">
                <span className="truncate">
                  Manage your organization's documents, team, and settings for {user.organizationName}.
                </span>
              </p>
            </div>

<div className="grid gap-4 md:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mb-6 md:mb-8">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
                  <FileText className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                </CardHeader>
                <CardContent>
                  <div className="text-xl md:text-2xl font-bold text-primary">{stats.totalDocuments}</div>
                  <p className="text-xs text-muted-foreground">
                    {stats.privateDocuments} private, {stats.totalDocuments - stats.privateDocuments} public
                  </p>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Team Members</CardTitle>
                  <Users className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                </CardHeader>
                <CardContent>
                  <div className="text-xl md:text-2xl font-bold text-accent">{stats.teamMembers}</div>
                  <p className="text-xs text-muted-foreground">Active users this month</p>
                </CardContent>
              </Card>

<Card className="sm:col-span-2 lg:col-span-1">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Monthly Views</CardTitle>
                  <Eye className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                </CardHeader>
                <CardContent>
                  <div className="text-xl md:text-2xl font-bold text-primary">{stats.monthlyViews}</div>
                  <p className="text-xs text-muted-foreground">+12% from last month</p>
                </CardContent>
              </Card>
            </div>

<div className="grid gap-4 md:gap-6 grid-cols-1 lg:grid-cols-2">
              {/* Quick Actions */}
              <Card>
                <CardHeader>
                  <CardTitle>Quick Actions</CardTitle>
                  <CardDescription>Common tasks for your organization</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button className="w-full justify-start" asChild>
                    <a href="/organization/upload">
                      <Upload className="mr-2 h-4 w-4 flex-shrink-0" />
                      <span className="truncate">Upload New Document</span>
                    </a>
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                    <a href="/organization/team">
                      <Users className="mr-2 h-4 w-4 flex-shrink-0" />
                      <span className="truncate">Manage Team Members</span>
                    </a>
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                    <a href="/organization/collections">
                      <Plus className="mr-2 h-4 w-4 flex-shrink-0" />
                      <span className="truncate">Create Collection</span>
                    </a>
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                    <a href="/organization/analytics">
                      <BarChart3 className="mr-2 h-4 w-4 flex-shrink-0" />
                      <span className="truncate">View Analytics</span>
                    </a>
                  </Button>
                </CardContent>
              </Card>

{/* Recent Activity */}
              <Card>
                <CardHeader>
                  <CardTitle>Recent Activity</CardTitle>
                  <CardDescription>Latest updates in your organization</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recentActivity.map((activity, index) => (
                      <div key={index} className="flex items-center space-x-3 min-w-0">
                        <div className="w-2 h-2 bg-primary rounded-full flex-shrink-0"></div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium truncate">{activity.action}</p>
                          <p className="text-sm text-muted-foreground truncate">{activity.item}</p>
                        </div>
                        <div className="text-xs text-muted-foreground flex-shrink-0">{activity.time}</div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

{/* Pending Reviews */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center justify-between">
                    <span className="truncate">Pending Reviews</span>
                    <Badge variant="secondary" className="flex-shrink-0">
                      {stats.pendingReviews}
                    </Badge>
                  </CardTitle>
                  <CardDescription>Documents awaiting approval for public submission</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between p-3 border rounded-lg min-w-0">
                      <div className="min-w-0 flex-1">
                        <p className="font-medium text-sm truncate">Updated Safety Protocol</p>
                        <p className="text-xs text-muted-foreground">Submitted 2 days ago</p>
                      </div>
                      <Badge variant="outline" className="flex-shrink-0 ml-2">
                        Under Review
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between p-3 border rounded-lg min-w-0">
                      <div className="min-w-0 flex-1">
                        <p className="font-medium text-sm truncate">New Training Manual</p>
                        <p className="text-xs text-muted-foreground">Submitted 5 days ago</p>
                      </div>
                      <Badge variant="outline" className="flex-shrink-0 ml-2">
                        Under Review
                      </Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Organization Settings */}
              <Card>
                <CardHeader>
                  <CardTitle>Organization Settings</CardTitle>
                  <CardDescription>Manage your organization profile and preferences</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between min-w-0">
                      <span className="text-sm flex-shrink-0">Organization Name</span>
                      <span className="text-sm font-medium truncate ml-2">{user.organizationName}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Subscription Plan</span>
                      <Badge className="flex-shrink-0">Professional</Badge>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm">Storage Used</span>
                      <span className="text-sm flex-shrink-0">2.3 GB / 10 GB</span>
                    </div>
                    <Button variant="outline" size="sm" className="w-full bg-transparent" asChild>
                      <a href="/organization/settings">
                        <Settings className="mr-2 h-3 w-3 flex-shrink-0" />
                        <span className="truncate">Manage Settings</span>
                      </a>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/organization/documents/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checkbox } from "@/components/ui/checkbox"
import { BulkDocumentActions } from "@/components/bulk-document-actions"
import { Search, Plus, Lock, Globe, Eye, Download, Edit, Trash2 } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { toast } from "@/hooks/use-toast"

export default function OrganizationDocumentsPage() {
  const { user } = useAuth()
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedDocuments, setSelectedDocuments] = useState<string[]>([])
  const [privateDocuments, setPrivateDocuments] = useState([
    {
      id: "1",
      title: "Internal HR Policy Manual",
      description: "Confidential HR policies specific to our organization",
      category: "policies",
      version: "3.2",
      updatedAt: "2024-03-15",
      status: "published",
      views: 234,
      downloads: 45,
    },
    {
      id: "3",
      title: "Employee Performance Review Template",
      description: "Customized performance review form for our staff",
      category: "performance",
      version: "2.1",
      updatedAt: "2024-03-10",
      status: "draft",
      views: 89,
      downloads: 12,
    },
    {
      id: "6",
      title: "Confidential Salary Guidelines",
      description: "Internal compensation structure and guidelines",
      category: "benefits",
      version: "1.5",
      updatedAt: "2024-03-08",
      status: "published",
      views: 156,
      downloads: 23,
    },
  ])

const [publicContributions, setPublicContributions] = useState([
    {
      id: "5",
      title: "Healthcare Worker Safety Protocol",
      description: "Comprehensive safety guidelines for healthcare workers",
      category: "safety",
      version: "2.0",
      submittedAt: "2024-03-12",
      status: "under-review",
      publicViews: 1247,
      publicDownloads: 342,
    },
    {
      id: "4",
      title: "Patient Privacy Best Practices",
      description: "Guidelines for maintaining patient confidentiality",
      category: "compliance",
      version: "1.8",
      submittedAt: "2024-03-05",
      status: "published",
      publicViews: 892,
      publicDownloads: 267,
    },
  ])

const handleDocumentSelect = (documentId: string, checked: boolean) => {
    if (checked) {
      setSelectedDocuments([...selectedDocuments, documentId])
    } else {
      setSelectedDocuments(selectedDocuments.filter((id) => id !== documentId))
    }
  }

const handleSelectAll = (documents: any[], checked: boolean) => {
    if (checked) {
      const allIds = documents.map((doc) => doc.id)
      setSelectedDocuments([...selectedDocuments, ...allIds])
    } else {
      const documentIds = documents.map((doc) => doc.id)
      setSelectedDocuments(selectedDocuments.filter((id) => !documentIds.includes(id)))
    }
  }

const handleBulkAction = (action: string, options?: any) => {
    console.log("Bulk action:", action, "on documents:", selectedDocuments, "with options:", options)
    setSelectedDocuments([])
  }

const handleViewDocument = (documentId: string) => {
    router.push(`/documents/${documentId}`)
  }

const handleEditDocument = (documentId: string, title: string) => {
    toast({
      title: "Edit Document",
      description: `Opening editor for "${title}"`,
    })
    console.log("[v0] Editing document:", documentId)
  }

const handleDeleteDocument = (documentId: string, title: string, isPrivate: boolean) => {
    if (isPrivate) {
      setPrivateDocuments((prev) => prev.filter((doc) => doc.id !== documentId))
    } else {
      setPublicContributions((prev) => prev.filter((doc) => doc.id !== documentId))
    }

setSelectedDocuments((prev) => prev.filter((id) => id !== documentId))

toast({
      title: "Document Deleted",
      description: `"${title}" has been removed from your documents.`,
    })
    console.log("[v0] Deleted document:", documentId)
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar min-h-screen">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-4 md:p-6 overflow-auto min-w-0">
          {!user || user.role !== "organization" ? (
            <div className="max-w-4xl mx-auto">
              <div className="text-center py-8 md:py-12">
                <div className="bg-gradient-to-br from-yellow-50 to-cyan-50 rounded-xl p-6 md:p-8 border border-yellow-200">
                  <h1 className="text-2xl md:text-3xl font-serif font-bold mb-4">Organization Documents</h1>
                  <p className="text-muted-foreground mb-6 text-sm md:text-base">
                    This section allows organizations to manage their private documents and public contributions.
                  </p>
                  <div className="bg-white rounded-lg p-4 md:p-6 shadow-sm border">
                    <h3 className="font-semibold mb-2">Organization Features Preview:</h3>
                    <ul className="text-sm text-muted-foreground space-y-1 text-left max-w-md mx-auto">
                      <li>• Manage private internal documents</li>
                      <li>• Track public contributions and submissions</li>
                      <li>• Bulk document operations</li>
                      <li>• Document version control</li>
                    </ul>
                  </div>
                  <p className="text-sm text-muted-foreground mt-4">
                    Switch to "Organization" role to explore these features
                  </p>
                </div>
              </div>
            </div>
          ) : (
            <div className="max-w-7xl mx-auto">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-6 md:mb-8 gap-4">
                <div className="min-w-0 flex-1">
                  <h1 className="text-2xl md:text-3xl font-serif font-bold mb-2">Organization Documents</h1>
                  <p className="text-muted-foreground text-sm md:text-base">
                    Manage your private documents and public contributions.
                  </p>
                </div>
                <Button asChild className="flex-shrink-0">
                  <a href="/organization/upload">
                    <Plus className="mr-2 h-4 w-4" />
                    <span className="hidden sm:inline">Upload Document</span>
                    <span className="sm:hidden">Upload</span>
                  </a>
                </Button>
              </div>

<div className="mb-6">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="Search your documents..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>

<Tabs defaultValue="private" className="space-y-6">
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="private" className="flex items-center gap-2 text-xs sm:text-sm">
                    <Lock className="h-4 w-4 flex-shrink-0" />
                    <span className="truncate">Private ({privateDocuments.length})</span>
                  </TabsTrigger>
                  <TabsTrigger value="public" className="flex items-center gap-2 text-xs sm:text-sm">
                    <Globe className="h-4 w-4 flex-shrink-0" />
                    <span className="truncate">Public ({publicContributions.length})</span>
                  </TabsTrigger>
                </TabsList>

<TabsContent value="private" className="space-y-4">
                  <div className="flex items-center gap-4 p-3 bg-muted/50 rounded-lg">
                    <Checkbox
                      checked={privateDocuments.every((doc) => selectedDocuments.includes(doc.id))}
                      onCheckedChange={(checked) => handleSelectAll(privateDocuments, checked as boolean)}
                    />
                    <span className="text-sm font-medium truncate">Select All Private Documents</span>
                  </div>

<div className="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
                    {privateDocuments.map((doc) => (
                      <Card key={doc.id} className="hover:shadow-md transition-shadow">
                        <CardHeader className="pb-3">
                          <div className="flex items-start justify-between gap-2">
                            <div className="flex items-center gap-2 min-w-0 flex-1">
                              <Checkbox
                                checked={selectedDocuments.includes(doc.id)}
                                onCheckedChange={(checked) => handleDocumentSelect(doc.id, checked as boolean)}
                                className="flex-shrink-0"
                              />
                              <Badge variant="secondary" className="flex-shrink-0 text-xs">
                                {doc.category}
                              </Badge>
                            </div>
                            <div className="flex items-center gap-1 flex-shrink-0">
                              <Lock className="h-3 w-3 text-muted-foreground" />
                              <Badge variant={doc.status === "published" ? "default" : "outline"} className="text-xs">
                                {doc.status}
                              </Badge>
                            </div>
                          </div>
                          <CardTitle className="text-base md:text-lg leading-tight line-clamp-2">{doc.title}</CardTitle>
                          <CardDescription className="line-clamp-2 text-sm">{doc.description}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="flex items-center justify-between text-sm text-muted-foreground">
                            <div className="flex items-center gap-3">
                              <div className="flex items-center gap-1">
                                <Eye className="h-3 w-3 flex-shrink-0" />
                                <span className="text-xs">{doc.views}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Download className="h-3 w-3 flex-shrink-0" />
                                <span className="text-xs">{doc.downloads}</span>
                              </div>
                            </div>
                            <span className="text-xs flex-shrink-0">v{doc.version}</span>
                          </div>

<div className="flex gap-2">
                            <Button
                              size="sm"
                              variant="outline"
                              className="flex-1 bg-transparent text-xs"
                              onClick={() => handleViewDocument(doc.id)}
                            >
                              <Eye className="h-3 w-3 mr-1 flex-shrink-0" />
                              <span className="truncate">View</span>
                            </Button>
                            <Button size="sm" variant="outline" onClick={() => handleEditDocument(doc.id, doc.title)}>
                              <Edit className="h-3 w-3" />
                            </Button>
                            <AlertDialog>
                              <AlertDialogTrigger asChild>
                                <Button size="sm" variant="outline">
                                  <Trash2 className="h-3 w-3" />
                                </Button>
                              </AlertDialogTrigger>
                              <AlertDialogContent>
                                <AlertDialogHeader>
                                  <AlertDialogTitle>Delete Document</AlertDialogTitle>
                                  <AlertDialogDescription>
                                    Are you sure you want to delete "{doc.title}"? This action cannot be undone.
                                  </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                                  <AlertDialogAction
                                    onClick={() => handleDeleteDocument(doc.id, doc.title, true)}
                                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                  >
                                    Delete
                                  </AlertDialogAction>
                                </AlertDialogFooter>
                              </AlertDialogContent>
                            </AlertDialog>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </TabsContent>

<TabsContent value="public" className="space-y-4">
                  <div className="flex items-center gap-4 p-3 bg-muted/50 rounded-lg">
                    <Checkbox
                      checked={publicContributions.every((doc) => selectedDocuments.includes(doc.id))}
                      onCheckedChange={(checked) => handleSelectAll(publicContributions, checked as boolean)}
                    />
                    <span className="text-sm font-medium truncate">Select All Public Contributions</span>
                  </div>

<div className="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
                    {publicContributions.map((doc) => (
                      <Card key={doc.id} className="hover:shadow-md transition-shadow">
                        <CardHeader className="pb-3">
                          <div className="flex items-start justify-between gap-2">
                            <div className="flex items-center gap-2 min-w-0 flex-1">
                              <Checkbox
                                checked={selectedDocuments.includes(doc.id)}
                                onCheckedChange={(checked) => handleDocumentSelect(doc.id, checked as boolean)}
                                className="flex-shrink-0"
                              />
                              <Badge variant="secondary" className="flex-shrink-0 text-xs">
                                {doc.category}
                              </Badge>
                            </div>
                            <div className="flex items-center gap-1 flex-shrink-0">
                              <Globe className="h-3 w-3 text-muted-foreground" />
                              <Badge
                                variant={
                                  doc.status === "published"
                                    ? "default"
                                    : doc.status === "under-review"
                                      ? "outline"
                                      : "secondary"
                                }
                                className="text-xs"
                              >
                                {doc.status}
                              </Badge>
                            </div>
                          </div>
                          <CardTitle className="text-base md:text-lg leading-tight line-clamp-2">{doc.title}</CardTitle>
                          <CardDescription className="line-clamp-2 text-sm">{doc.description}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="flex items-center justify-between text-sm text-muted-foreground">
                            <div className="flex items-center gap-3">
                              <div className="flex items-center gap-1">
                                <Eye className="h-3 w-3 flex-shrink-0" />
                                <span className="text-xs">{doc.publicViews}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Download className="h-3 w-3 flex-shrink-0" />
                                <span className="text-xs">{doc.publicDownloads}</span>
                              </div>
                            </div>
                            <span className="text-xs flex-shrink-0">v{doc.version}</span>
                          </div>

<div className="text-xs text-muted-foreground">
                            Submitted: {new Date(doc.submittedAt).toLocaleDateString()}
                          </div>

<BulkDocumentActions
                selectedDocuments={selectedDocuments}
                onClearSelection={() => setSelectedDocuments([])}
                onBulkAction={handleBulkAction}
              />
            </div>
          )}
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useAuth } from "./auth-provider"
import { LogOut, User, Settings, FileText, Users, ChevronDown } from "lucide-react"

export function Header() {
  const { user, logout, switchUser } = useAuth()

const getRoleBadge = (role: string) => {
    switch (role) {
      case "admin":
        return "Platform Admin"
      case "organization":
        return "Organization"
      case "peer":
      default:
        return "Peer User"
    }
  }

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center">
        <div className="mr-4 flex">
          <a className="mr-6 flex items-center space-x-2" href="/">
            <FileText className="h-6 w-6 text-primary" />
            <span className="font-serif font-bold">Healthcare HR Docs</span>
          </a>
        </div>

<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
          <div className="w-full flex-1 md:w-auto md:flex-none">{/* Search will go here */}</div>

{user && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center space-x-2 h-10 px-3 rounded-lg hover:bg-accent">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                    <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div className="hidden md:flex flex-col items-start">
                    <span className="text-sm font-medium leading-none">{user.name}</span>
                    <span className="text-xs text-muted-foreground leading-none">{getRoleBadge(user.role)}</span>
                  </div>
                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="end" forceMount>
                <DropdownMenuLabel className="font-normal">
                  <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">{user.name}</p>
                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                    <p className="text-xs leading-none text-accent">{getRoleBadge(user.role)}</p>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuLabel className="text-xs text-muted-foreground">Switch Demo User</DropdownMenuLabel>
                <DropdownMenuItem onClick={() => switchUser("peer")}>
                  <Users className="mr-2 h-4 w-4" />
                  <span>Peer User</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => switchUser("organization")}>
                  <Users className="mr-2 h-4 w-4" />
                  <span>Organization</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => switchUser("admin")}>
                  <Users className="mr-2 h-4 w-4" />
                  <span>Platform Admin</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <User className="mr-2 h-4 w-4" />
                  <span>Profile</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Settings className="mr-2 h-4 w-4" />
                  <span>Settings</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={logout}>
                  <LogOut className="mr-2 h-4 w-4" />
                  <span>Log out</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )}
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/auth-provider.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import { useRouter } from "next/navigation"

type UserRole = "peer" | "organization" | "admin"

interface User {
  id: string
  email: string
  name: string
  role: UserRole
  organizationId?: string
  organizationName?: string
  avatar?: string
}

interface AuthContextType {
  user: User | null
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  switchUser: (userType: UserRole) => void
  isLoading: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

const demoUsers: Record<UserRole, User> = {
  peer: {
    id: "peer-1",
    email: "sarah.johnson@healthcorp.com",
    name: "Sarah Johnson",
    role: "peer",
    avatar: "/professional-woman-doctor.png",
  },
  organization: {
    id: "org-1",
    email: "michael.chen@generalhospital.com",
    name: "Michael Chen",
    role: "organization",
    organizationId: "org-1",
    organizationName: "General Hospital",
    avatar: "/professional-man-healthcare.png",
  },
  admin: {
    id: "admin-1",
    email: "admin@healthcareplatform.com",
    name: "Dr. Emily Rodriguez",
    role: "admin",
    avatar: "/professional-asian-woman.png",
  },
}

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    // Try to load user from localStorage
    const savedUser = localStorage.getItem("demo-user")
    if (savedUser) {
      try {
        setUser(JSON.parse(savedUser))
      } catch (error) {
        console.error("Failed to parse saved user:", error)
        localStorage.removeItem("demo-user")
      }
    }
    setIsLoading(false)
  }, [])

const login = async (email: string, password: string) => {
    setIsLoading(true)

let mockUser: User
    if (email.includes("admin")) {
      mockUser = demoUsers.admin
    } else if (email.includes("org")) {
      mockUser = demoUsers.organization
    } else {
      mockUser = demoUsers.peer
    }

setUser(mockUser)
    localStorage.setItem("demo-user", JSON.stringify(mockUser))
    setIsLoading(false)
  }

const switchUser = (userType: UserRole) => {
    const newUser = demoUsers[userType]
    setUser(newUser)
    localStorage.setItem("demo-user", JSON.stringify(newUser))
  }

const logout = () => {
    setUser(null)
    localStorage.removeItem("demo-user")
    router.push("/")
  }

return <AuthContext.Provider value={{ user, login, logout, switchUser, isLoading }}>{children}</AuthContext.Provider>
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/organization/upload/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BatchUpload } from "@/components/batch-upload"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import { toast } from "@/hooks/use-toast"
import { Upload, FileText, X, CheckCircle, Brain, Wand2, AlertCircle } from "lucide-react"

export default function DocumentUploadPage() {
  const { user } = useAuth()
  const [uploadStep, setUploadStep] = useState(1)
  const [processingProgress, setProcessingProgress] = useState(0)
  const [extractedContent, setExtractedContent] = useState("")
  const [aiSuggestions, setAiSuggestions] = useState({
    title: "",
    description: "",
    category: "",
    tags: [],
    standardizedContent: "",
    improvements: [],
  })
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    category: "",
    tags: "",
    visibility: "private",
    submitForPublic: false,
    file: null as File | null,
    useAiSuggestions: false,
  })

if (!user || user.role !== "organization") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar min-h-screen">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-7xl mx-auto">
              <Card className="border-cyan-200 bg-cyan-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-cyan-800">
                    <Upload className="h-5 w-5" />
                    Document Upload Preview
                  </CardTitle>
                  <CardDescription className="text-cyan-700">
                    This is a preview of the document upload feature. In a real application, organization access would
                    be required. Current role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-cyan-700 mb-4">
                    Switch to an organization account (use email containing "org") to upload and manage documents.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const categories = [
    "recruitment",
    "onboarding",
    "performance",
    "compliance",
    "benefits",
    "training",
    "safety",
    "policies",
  ]

const processDocumentWithAI = async (file: File) => {
    setUploadStep(2) // AI Processing step
    setProcessingProgress(0)

// Simulate file content extraction
    const progressSteps = [
      { progress: 20, message: "Extracting content from document..." },
      { progress: 40, message: "Analyzing document structure..." },
      { progress: 60, message: "Generating AI suggestions..." },
      { progress: 80, message: "Standardizing content format..." },
      { progress: 100, message: "Processing complete!" },
    ]

for (const step of progressSteps) {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setProcessingProgress(step.progress)
      toast({ description: step.message })
    }

// Mock extracted content and AI suggestions
    const mockExtractedContent = `EMPLOYEE HANDBOOK - REMOTE WORK POLICY

1. OVERVIEW
This policy outlines the guidelines and expectations for employees working remotely.

2. ELIGIBILITY
All full-time employees who have completed their probationary period are eligible for remote work arrangements.

3. REQUIREMENTS
- Reliable internet connection
- Dedicated workspace
- Regular communication with team members
- Adherence to company security protocols

4. APPROVAL PROCESS
Remote work requests must be submitted to HR and approved by direct supervisor.`

const mockAiSuggestions = {
      title: "Remote Work Policy - Employee Guidelines",
      description:
        "Comprehensive policy document outlining remote work eligibility, requirements, and approval processes for healthcare organization employees.",
      category: "policies",
      tags: ["remote-work", "employee-guidelines", "workplace-policy", "hr-policy"],
      standardizedContent: `# Remote Work Policy

## 1. Policy Overview
This document establishes the framework for remote work arrangements within our healthcare organization, ensuring operational continuity while maintaining quality standards.

## 2. Eligibility Criteria
- Full-time employees with completed probationary period (90 days)
- Demonstrated ability to work independently
- Role compatibility with remote work requirements
- Satisfactory performance review ratings

## 3. Technical Requirements
- High-speed internet connection (minimum 25 Mbps)
- HIPAA-compliant home office setup
- Company-approved security software
- Regular system updates and maintenance

## 4. Communication Standards
- Daily check-ins with direct supervisor
- Participation in scheduled team meetings
- Response time: 4 hours maximum during business hours
- Use of approved communication platforms only

## 5. Approval Workflow
1. Employee submits formal request via HR portal
2. Direct supervisor review and recommendation
3. HR department compliance verification
4. Final approval by department head
5. Signed remote work agreement

## 6. Performance Monitoring
- Weekly progress reports
- Monthly performance reviews
- Quarterly goal assessments
- Annual policy compliance audit`,
      improvements: [
        "Added HIPAA compliance requirements for healthcare context",
        "Structured content with clear headings and numbering",
        "Enhanced technical requirements with specific metrics",
        "Included performance monitoring framework",
        "Added formal approval workflow steps",
      ],
    }

setExtractedContent(mockExtractedContent)
    setAiSuggestions(mockAiSuggestions)
    setUploadStep(3) // Move to AI review step
  }

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      setFormData({ ...formData, file })
      processDocumentWithAI(file)
    }
  }

const applyAiSuggestions = () => {
    setFormData({
      ...formData,
      title: aiSuggestions.title,
      description: aiSuggestions.description,
      category: aiSuggestions.category,
      tags: aiSuggestions.tags.join(", "),
      useAiSuggestions: true,
    })
    setUploadStep(4) // Move to final metadata step
  }

const handleSubmit = () => {
    // Mock upload functionality
    console.log("Uploading document:", formData)
    console.log("AI Suggestions Applied:", formData.useAiSuggestions)
    if (formData.useAiSuggestions) {
      console.log("Standardized Content:", aiSuggestions.standardizedContent)
    }
    setUploadStep(5) // Success step
  }

if (uploadStep === 5) {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-2xl mx-auto">
              <Card className="text-center">
                <CardContent className="pt-6">
                  <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
                  <h2 className="text-2xl font-serif font-bold mb-2">Document Uploaded Successfully!</h2>
                  <p className="text-muted-foreground mb-6">
                    Your document "{formData.title}" has been uploaded and is now available to your team.
                  </p>
                  {formData.useAiSuggestions && (
                    <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg mb-6">
                      <div className="flex items-center gap-2 mb-2">
                        <Brain className="h-4 w-4 text-blue-600" />
                        <p className="text-sm font-medium text-blue-800">AI Standardization Applied</p>
                      </div>
                      <p className="text-sm text-blue-700">
                        Your document has been enhanced with AI-powered standardization for better consistency and
                        compliance.
                      </p>
                    </div>
                  )}
                  {formData.submitForPublic && (
                    <div className="bg-muted p-4 rounded-lg mb-6">
                      <p className="text-sm">
                        Your document has also been submitted for public review. It will be available in the public
                        library once approved by our moderation team.
                      </p>
                    </div>
                  )}
                  <div className="flex gap-3 justify-center">
                    <Button asChild>
                      <a href="/organization/documents">View My Documents</a>
                    </Button>
                    <Button variant="outline" onClick={() => setUploadStep(1)}>
                      Upload Another
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-6xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-serif font-bold mb-2">Upload Documents</h1>
              <p className="text-muted-foreground">
                Add documents to your organization's library with AI-powered standardization.
              </p>
            </div>

<Tabs defaultValue="single" className="space-y-6">
              <TabsList>
                <TabsTrigger value="single">Single Upload</TabsTrigger>
                <TabsTrigger value="batch">Batch Upload</TabsTrigger>
              </TabsList>

<TabsContent value="single">
                <div className="grid gap-8 lg:grid-cols-3">
                  <div className="lg:col-span-2">
                    {uploadStep === 1 && (
                      <Card>
                        <CardHeader>
                          <CardTitle>Select File</CardTitle>
                          <CardDescription>Choose a document to upload (PDF, DOC, DOCX supported)</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center">
                            <Upload className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                            <p className="text-lg font-medium mb-2">Drop your file here or click to browse</p>
                            <p className="text-sm text-muted-foreground mb-4">Maximum file size: 10MB</p>
                            <input
                              type="file"
                              accept=".pdf,.doc,.docx"
                              onChange={handleFileUpload}
                              className="hidden"
                              id="file-upload"
                            />
                            <Button asChild>
                              <label htmlFor="file-upload" className="cursor-pointer">
                                Choose File
                              </label>
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    )}

{uploadStep === 2 && (
                      <Card>
                        <CardHeader>
                          <CardTitle className="flex items-center gap-2">
                            <Brain className="h-5 w-5 text-blue-600" />
                            AI Document Processing
                          </CardTitle>
                          <CardDescription>
                            Our AI is analyzing your document and preparing standardization suggestions
                          </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                          <div className="space-y-3">
                            <div className="flex items-center justify-between">
                              <span className="text-sm font-medium">Processing Progress</span>
                              <span className="text-sm text-muted-foreground">{processingProgress}%</span>
                            </div>
                            <Progress value={processingProgress} className="h-2" />
                          </div>

<div className="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
                            <Wand2 className="h-5 w-5 text-blue-600" />
                            <div>
                              <p className="font-medium text-blue-900">AI Enhancement in Progress</p>
                              <p className="text-sm text-blue-700">
                                Extracting content, analyzing structure, and generating improvement suggestions
                              </p>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    )}

{uploadStep === 3 && (
                      <Card>
                        <CardHeader>
                          <CardTitle className="flex items-center gap-2">
                            <Brain className="h-5 w-5 text-blue-600" />
                            AI Standardization Suggestions
                          </CardTitle>
                          <CardDescription>Review and apply AI-generated improvements to your document</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                          <div className="grid gap-6 md:grid-cols-2">
                            <div>
                              <h3 className="font-medium mb-3 flex items-center gap-2">
                                <FileText className="h-4 w-4" />
                                Original Content Preview
                              </h3>
                              <div className="bg-muted p-4 rounded-lg max-h-64 overflow-y-auto">
                                <pre className="text-sm whitespace-pre-wrap">{extractedContent}</pre>
                              </div>
                            </div>

<div>
                              <h3 className="font-medium mb-3 flex items-center gap-2">
                                <Wand2 className="h-4 w-4 text-blue-600" />
                                AI Standardized Version
                              </h3>
                              <div className="bg-blue-50 p-4 rounded-lg max-h-64 overflow-y-auto">
                                <pre className="text-sm whitespace-pre-wrap">{aiSuggestions.standardizedContent}</pre>
                              </div>
                            </div>
                          </div>

<div>
                            <h3 className="font-medium mb-3">Suggested Metadata</h3>
                            <div className="grid gap-4 md:grid-cols-2">
                              <div>
                                <Label className="text-sm font-medium">Title</Label>
                                <p className="text-sm bg-muted p-2 rounded mt-1">{aiSuggestions.title}</p>
                              </div>
                              <div>
                                <Label className="text-sm font-medium">Category</Label>
                                <p className="text-sm bg-muted p-2 rounded mt-1 capitalize">{aiSuggestions.category}</p>
                              </div>
                              <div className="md:col-span-2">
                                <Label className="text-sm font-medium">Description</Label>
                                <p className="text-sm bg-muted p-2 rounded mt-1">{aiSuggestions.description}</p>
                              </div>
                              <div className="md:col-span-2">
                                <Label className="text-sm font-medium">Suggested Tags</Label>
                                <div className="flex flex-wrap gap-2 mt-1">
                                  {aiSuggestions.tags.map((tag, index) => (
                                    <Badge key={index} variant="secondary">
                                      {tag}
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            </div>
                          </div>

<div>
                            <h3 className="font-medium mb-3 flex items-center gap-2">
                              <AlertCircle className="h-4 w-4 text-green-600" />
                              AI Improvements Applied
                            </h3>
                            <ul className="space-y-2">
                              {aiSuggestions.improvements.map((improvement, index) => (
                                <li key={index} className="flex items-start gap-2 text-sm">
                                  <div className="w-1.5 h-1.5 bg-green-600 rounded-full mt-2 flex-shrink-0"></div>
                                  <span>{improvement}</span>
                                </li>
                              ))}
                            </ul>
                          </div>

<div className="flex gap-3">
                            <Button onClick={() => setUploadStep(4)} variant="outline">
                              Skip AI Suggestions
                            </Button>
                            <Button onClick={applyAiSuggestions} className="flex-1">
                              Apply AI Suggestions
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    )}

{uploadStep === 4 && (
                      <Card>
                        <CardHeader>
                          <CardTitle>Document Details</CardTitle>
                          <CardDescription>
                            {formData.useAiSuggestions
                              ? "Review AI-enhanced metadata"
                              : "Provide information about your document"}
                          </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                          {formData.file && (
                            <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
                              <FileText className="h-5 w-5 text-muted-foreground" />
                              <div className="flex-1">
                                <p className="font-medium">{formData.file.name}</p>
                                <p className="text-sm text-muted-foreground">
                                  {(formData.file.size / 1024 / 1024).toFixed(2)} MB
                                  {formData.useAiSuggestions && (
                                    <Badge variant="secondary" className="ml-2">
                                      AI Enhanced
                                    </Badge>
                                  )}
                                </p>
                              </div>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => {
                                  setFormData({ ...formData, file: null })
                                  setUploadStep(1)
                                }}
                              >
                                <X className="h-4 w-4" />
                              </Button>
                            </div>
                          )}

<div className="space-y-2">
                            <Label htmlFor="title">Document Title *</Label>
                            <Input
                              id="title"
                              placeholder="Enter document title"
                              value={formData.title}
                              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                            />
                          </div>

<div className="space-y-2">
                            <Label htmlFor="description">Description *</Label>
                            <Textarea
                              id="description"
                              placeholder="Describe what this document contains and its purpose"
                              value={formData.description}
                              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                              rows={3}
                            />
                          </div>

<div className="space-y-2">
                            <Label htmlFor="category">Category *</Label>
                            <Select
                              value={formData.category}
                              onValueChange={(value) => setFormData({ ...formData, category: value })}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select a category" />
                              </SelectTrigger>
                              <SelectContent>
                                {categories.map((category) => (
                                  <SelectItem key={category} value={category}>
                                    {category.charAt(0).toUpperCase() + category.slice(1)}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <Label htmlFor="tags">Tags</Label>
                            <Input
                              id="tags"
                              placeholder="Enter tags separated by commas (e.g., policy, safety, training)"
                              value={formData.tags}
                              onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
                            />
                          </div>

<div className="space-y-4">
                            <Label>Visibility</Label>
                            <div className="space-y-3">
                              <div className="flex items-center space-x-2">
                                <Checkbox
                                  id="private"
                                  checked={formData.visibility === "private"}
                                  onCheckedChange={() => setFormData({ ...formData, visibility: "private" })}
                                />
                                <Label htmlFor="private" className="text-sm">
                                  Private - Only visible to your organization team
                                </Label>
                              </div>
                              <div className="flex items-center space-x-2">
                                <Checkbox
                                  id="public"
                                  checked={formData.submitForPublic}
                                  onCheckedChange={(checked) =>
                                    setFormData({ ...formData, submitForPublic: checked as boolean })
                                  }
                                />
                                <Label htmlFor="public" className="text-sm">
                                  Also submit for public library (requires approval)
                                </Label>
                              </div>
                            </div>
                          </div>

<div className="flex gap-3">
                            <Button onClick={() => setUploadStep(3)} variant="outline">
                              Back
                            </Button>
                            <Button
                              onClick={handleSubmit}
                              disabled={!formData.title || !formData.description || !formData.category}
                              className="flex-1"
                            >
                              Upload Document
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    )}
                  </div>

<div className="space-y-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-lg flex items-center gap-2">
                          <Brain className="h-5 w-5 text-blue-600" />
                          AI Enhancement
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3 text-sm">
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2"></div>
                          <p>Automatic content extraction from PDF and Word documents</p>
                        </div>
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2"></div>
                          <p>AI-powered document standardization for consistency</p>
                        </div>
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2"></div>
                          <p>Healthcare compliance formatting and structure</p>
                        </div>
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2"></div>
                          <p>Intelligent metadata and tag suggestions</p>
                        </div>
                      </CardContent>
                    </Card>

<Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Upload Guidelines</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3 text-sm">
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                          <p>Ensure documents are properly formatted and contain accurate information</p>
                        </div>
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                          <p>Remove any confidential or sensitive information before public submission</p>
                        </div>
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                          <p>Use clear, descriptive titles and comprehensive descriptions</p>
                        </div>
                        <div className="flex items-start gap-2">
                          <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                          <p>Add relevant tags to help others discover your content</p>
                        </div>
                      </CardContent>
                    </Card>

<Card>
                      <CardHeader>
                        <CardTitle className="text-lg">Supported Formats</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-2">
                        <div className="flex items-center gap-2">
                          <Badge variant="outline">PDF</Badge>
                          <span className="text-sm text-muted-foreground">Recommended</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Badge variant="outline">DOC</Badge>
                          <span className="text-sm text-muted-foreground">Microsoft Word</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Badge variant="outline">DOCX</Badge>
                          <span className="text-sm text-muted-foreground">Microsoft Word</span>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              </TabsContent>

<TabsContent value="batch">
                <BatchUpload />
              </TabsContent>
            </Tabs>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/upload/page.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { useAuth } from "@/components/auth-provider"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"
import { toast } from "@/hooks/use-toast"
import { Upload, FileText, CheckCircle, Brain, Wand2, Shield } from "lucide-react"

export default function AdminUploadPage() {
  const { user } = useAuth()
  const [uploadStep, setUploadStep] = useState(1)
  const [processingProgress, setProcessingProgress] = useState(0)
  const [extractedContent, setExtractedContent] = useState("")
  const [aiSuggestions, setAiSuggestions] = useState({
    title: "",
    description: "",
    category: "",
    tags: [],
    standardizedContent: "",
    improvements: [],
  })
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    category: "",
    tags: "",
    version: "1.0",
    organization: "",
    file: null as File | null,
    useAiSuggestions: false,
  })

if (!user || user.role !== "admin") {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar min-h-screen">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-7xl mx-auto">
              <Card className="border-yellow-200 bg-yellow-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-yellow-800">
                    <Shield className="h-5 w-5" />
                    Platform Upload Preview
                  </CardTitle>
                  <CardDescription className="text-yellow-700">
                    This is a preview of the platform-level document upload feature. Admin access required. Current
                    role: {user?.role || "Not logged in"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-yellow-700 mb-4">
                    Switch to an admin account to upload documents directly to the platform library.
                  </p>
                  <Button variant="outline" onClick={() => window.location.reload()}>
                    Switch User Role
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

const categories = [
    "recruitment",
    "onboarding",
    "performance",
    "compliance",
    "benefits",
    "training",
    "safety",
    "policies",
  ]

const organizations = [
    "General Hospital",
    "City Medical Center",
    "Regional Health System",
    "University Medical Center",
    "Community Health Network",
    "Platform Administration",
  ]

const processDocumentWithAI = async (file: File) => {
    setUploadStep(2)
    setProcessingProgress(0)

const progressSteps = [
      { progress: 20, message: "Extracting content from document..." },
      { progress: 40, message: "Analyzing document structure..." },
      { progress: 60, message: "Generating AI suggestions..." },
      { progress: 80, message: "Standardizing content format..." },
      { progress: 100, message: "Processing complete!" },
    ]

for (const step of progressSteps) {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setProcessingProgress(step.progress)
      toast({ description: step.message })
    }

const mockAiSuggestions = {
      title: "Healthcare HR Best Practices - Platform Standard",
      description: "Comprehensive platform-approved guidelines for healthcare HR management across all organizations.",
      category: "policies",
      tags: ["platform-standard", "hr-guidelines", "best-practices", "healthcare-policy"],
      standardizedContent: `# Healthcare HR Best Practices - Platform Standard

## 1. Executive Summary
This document establishes platform-wide standards for healthcare HR practices, ensuring consistency and compliance across all participating organizations.

## 2. Scope and Application
- Applies to all healthcare organizations on the platform
- Mandatory compliance for platform certification
- Regular updates based on industry standards

## 3. Core HR Principles
### 3.1 Recruitment Standards
- Evidence-based hiring practices
- Diversity and inclusion requirements
- Skills-based assessment protocols

### 3.2 Employee Development
- Continuous learning frameworks
- Performance management systems
- Career progression pathways

## 4. Compliance Requirements
- HIPAA compliance verification
- State licensing requirements
- Professional certification tracking

## 5. Implementation Guidelines
- Phased rollout schedule
- Training requirements
- Monitoring and evaluation metrics`,
      improvements: [
        "Added platform-wide applicability standards",
        "Enhanced compliance framework for multi-organization use",
        "Structured content with executive summary for leadership",
        "Included implementation guidelines for scalability",
        "Added monitoring and evaluation framework",
      ],
    }

setExtractedContent("Mock extracted content for platform upload...")
    setAiSuggestions(mockAiSuggestions)
    setUploadStep(3)
  }

const handleSubmit = () => {
    console.log("Platform upload:", formData)
    console.log("Version:", formData.version)
    setUploadStep(5)
  }

if (uploadStep === 5) {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="flex">
          <aside className="w-64 border-r bg-sidebar">
            <SidebarNav />
          </aside>
          <main className="flex-1 p-6">
            <div className="max-w-2xl mx-auto">
              <Card className="text-center">
                <CardContent className="pt-6">
                  <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
                  <h2 className="text-2xl font-serif font-bold mb-2">Document Published to Platform!</h2>
                  <p className="text-muted-foreground mb-6">
                    "{formData.title}" (v{formData.version}) has been published to the platform library and is now
                    available to all organizations.
                  </p>
                  {formData.useAiSuggestions && (
                    <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg mb-6">
                      <div className="flex items-center gap-2 mb-2">
                        <Brain className="h-4 w-4 text-blue-600" />
                        <p className="text-sm font-medium text-blue-800">AI Platform Standardization Applied</p>
                      </div>
                      <p className="text-sm text-blue-700">
                        Document enhanced with platform-wide standardization for maximum compatibility and compliance.
                      </p>
                    </div>
                  )}
                  <div className="flex gap-3 justify-center">
                    <Button asChild>
                      <a href="/documents">View in Library</a>
                    </Button>
                    <Button variant="outline" onClick={() => setUploadStep(1)}>
                      Upload Another
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <aside className="w-64 border-r bg-sidebar">
          <SidebarNav />
        </aside>
        <main className="flex-1 p-6">
          <div className="max-w-6xl mx-auto">
            <div className="mb-8">
              <h1 className="text-3xl font-serif font-bold mb-2">Platform Document Upload</h1>
              <p className="text-muted-foreground">
                Upload documents directly to the platform library with AI-powered standardization.
              </p>
            </div>

<div className="grid gap-8 lg:grid-cols-3">
              <div className="lg:col-span-2">
                {uploadStep === 1 && (
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Shield className="h-5 w-5 text-primary" />
                        Platform Upload
                      </CardTitle>
                      <CardDescription>
                        Upload documents directly to the platform library (PDF, DOC, DOCX supported)
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="border-2 border-dashed border-primary/25 rounded-lg p-8 text-center bg-primary/5">
                        <Upload className="h-12 w-12 text-primary mx-auto mb-4" />
                        <p className="text-lg font-medium mb-2">Drop your file here or click to browse</p>
                        <p className="text-sm text-muted-foreground mb-4">Maximum file size: 10MB</p>
                        <input
                          type="file"
                          accept=".pdf,.doc,.docx"
                          onChange={handleFileUpload}
                          className="hidden"
                          id="platform-file-upload"
                        />
                        <Button asChild>
                          <label htmlFor="platform-file-upload" className="cursor-pointer">
                            Choose File
                          </label>
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )}

{uploadStep === 2 && (
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Brain className="h-5 w-5 text-blue-600" />
                        Platform AI Processing
                      </CardTitle>
                      <CardDescription>AI is analyzing your document for platform-wide standardization</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      <div className="space-y-3">
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium">Processing Progress</span>
                          <span className="text-sm text-muted-foreground">{processingProgress}%</span>
                        </div>
                        <Progress value={processingProgress} className="h-2" />
                      </div>

<div className="flex items-center gap-3 p-4 bg-primary/10 rounded-lg">
                        <Wand2 className="h-5 w-5 text-primary" />
                        <div>
                          <p className="font-medium text-primary">Platform Enhancement in Progress</p>
                          <p className="text-sm text-primary/80">
                            Applying platform-wide standards and compliance requirements
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )}

{uploadStep === 3 && (
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Brain className="h-5 w-5 text-blue-600" />
                        Platform Standardization Review
                      </CardTitle>
                      <CardDescription>Review AI-generated platform standards and improvements</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      {/* ... existing AI review content ... */}
                      <div className="grid gap-6 md:grid-cols-2">
                        <div>
                          <h3 className="font-medium mb-3 flex items-center gap-2">
                            <FileText className="h-4 w-4" />
                            Original Content Preview
                          </h3>
                          <div className="bg-muted p-4 rounded-lg max-h-64 overflow-y-auto">
                            <pre className="text-sm whitespace-pre-wrap">{extractedContent}</pre>
                          </div>
                        </div>

<div>
                          <h3 className="font-medium mb-3 flex items-center gap-2">
                            <Wand2 className="h-4 w-4 text-primary" />
                            Platform Standardized Version
                          </h3>
                          <div className="bg-primary/10 p-4 rounded-lg max-h-64 overflow-y-auto">
                            <pre className="text-sm whitespace-pre-wrap">{aiSuggestions.standardizedContent}</pre>
                          </div>
                        </div>
                      </div>

<div className="flex gap-3">
                        <Button onClick={() => setUploadStep(4)} variant="outline">
                          Skip AI Suggestions
                        </Button>
                        <Button onClick={applyAiSuggestions} className="flex-1">
                          Apply Platform Standards
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )}

{uploadStep === 4 && (
                  <Card>
                    <CardHeader>
                      <CardTitle>Platform Document Details</CardTitle>
                      <CardDescription>Configure document metadata and version information</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      {/* ... existing file display ... */}

<div className="grid gap-4 md:grid-cols-2">
                        <div className="space-y-2">
                          <Label htmlFor="title">Document Title *</Label>
                          <Input
                            id="title"
                            placeholder="Enter document title"
                            value={formData.title}
                            onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor="version">Initial Version *</Label>
                          <Input
                            id="version"
                            placeholder="e.g., 1.0, 2.0, 1.5"
                            value={formData.version}
                            onChange={(e) => setFormData({ ...formData, version: e.target.value })}
                          />
                          <p className="text-xs text-muted-foreground">
                            Set the initial version. Future updates will auto-increment.
                          </p>
                        </div>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="description">Description *</Label>
                        <Textarea
                          id="description"
                          placeholder="Describe the document's purpose and content"
                          value={formData.description}
                          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                          rows={3}
                        />
                      </div>

<div className="grid gap-4 md:grid-cols-2">
                        <div className="space-y-2">
                          <Label htmlFor="category">Category *</Label>
                          <Select
                            value={formData.category}
                            onValueChange={(value) => setFormData({ ...formData, category: value })}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select a category" />
                            </SelectTrigger>
                            <SelectContent>
                              {categories.map((category) => (
                                <SelectItem key={category} value={category}>
                                  {category.charAt(0).toUpperCase() + category.slice(1)}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

<div className="space-y-2">
                          <Label htmlFor="organization">Source Organization</Label>
                          <Select
                            value={formData.organization}
                            onValueChange={(value) => setFormData({ ...formData, organization: value })}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select organization" />
                            </SelectTrigger>
                            <SelectContent>
                              {organizations.map((org) => (
                                <SelectItem key={org} value={org}>
                                  {org}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="tags">Tags</Label>
                        <Input
                          id="tags"
                          placeholder="Enter tags separated by commas"
                          value={formData.tags}
                          onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
                        />
                      </div>

<div className="flex gap-3">
                        <Button onClick={() => setUploadStep(3)} variant="outline">
                          Back
                        </Button>
                        <Button
                          onClick={handleSubmit}
                          disabled={!formData.title || !formData.description || !formData.category || !formData.version}
                          className="flex-1"
                        >
                          Publish to Platform
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>

<div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center gap-2">
                      <Shield className="h-5 w-5 text-primary" />
                      Platform Authority
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3 text-sm">
                    <div className="flex items-start gap-2">
                      <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                      <p>Documents published directly to platform library</p>
                    </div>
                    <div className="flex items-start gap-2">
                      <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                      <p>Immediate availability to all organizations</p>
                    </div>
                    <div className="flex items-start gap-2">
                      <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                      <p>Platform-wide standardization applied</p>
                    </div>
                    <div className="flex items-start gap-2">
                      <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2"></div>
                      <p>Version control with auto-increment</p>
                    </div>
                  </CardContent>
                </Card>

{/* ... existing guidelines cards ... */}
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar-nav.tsx" isFixed="true" isQuickEdit="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { useAuth } from "./auth-provider"
import {
  FileText,
  Star,
  Users,
  Settings,
  Upload,
  BarChart3,
  Shield,
  Building2,
  BookOpen,
  MessageSquare,
  Bell,
  FolderOpen,
  UserCheck,
  Menu,
  X,
} from "lucide-react"
import { useState } from "react"

interface SidebarNavProps {
  className?: string
}

export function SidebarNav({ className }: SidebarNavProps) {
  const { user } = useAuth()
  const pathname = usePathname()
  const [isMobileOpen, setIsMobileOpen] = useState(false)

const peerNavItems = [
    { title: "Browse Documents", icon: FileText, href: "/documents" },
    { title: "Community", icon: MessageSquare, href: "/community" },
    { title: "My Favorites", icon: Star, href: "/favorites" },
    { title: "Notifications", icon: Bell, href: "/notifications" },
  ]

const organizationNavItems = [
    { title: "Public Library", icon: BookOpen, href: "/documents" },
    { title: "Organization Docs", icon: Building2, href: "/organization/documents" },
    { title: "Upload Document", icon: Upload, href: "/organization/upload" },
    { title: "Team Management", icon: Users, href: "/organization/team" },
    { title: "Community", icon: MessageSquare, href: "/community" },
    { title: "Analytics", icon: BarChart3, href: "/organization/analytics" },
    { title: "Settings", icon: Settings, href: "/organization/settings" },
  ]

const adminNavItems = [
    { title: "All Documents", icon: FileText, href: "/documents" },
    { title: "Platform Upload", icon: Upload, href: "/admin/upload" },
    { title: "Review Queue", icon: Shield, href: "/admin/review" },
    { title: "Categories", icon: FolderOpen, href: "/admin/categories" },
    { title: "Organizations", icon: Building2, href: "/admin/organizations" },
    { title: "Users", icon: UserCheck, href: "/admin/users" },
    { title: "Analytics", icon: BarChart3, href: "/admin/analytics" },
    { title: "Moderation", icon: MessageSquare, href: "/admin/moderation" },
  ]

const getNavItems = () => {
    switch (user?.role) {
      case "admin":
        return adminNavItems
      case "organization":
        return organizationNavItems
      case "peer":
      default:
        return peerNavItems
    }
  }

return (
    <>
      <Button
        variant="ghost"
        size="sm"
        className="fixed top-4 left-4 z-50 md:hidden"
        onClick={() => setIsMobileOpen(!isMobileOpen)}
      >
        {isMobileOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
      </Button>

{isMobileOpen && (
        <div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setIsMobileOpen(false)} />
      )}

<div
        className={cn(
          "fixed md:static inset-y-0 left-0 z-50 w-64 transform transition-transform duration-200 ease-in-out md:transform-none",
          "flex flex-col border-r bg-sidebar min-h-screen",
          isMobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
          className,
        )}
      >
        <div className="flex-1 space-y-4 py-4 overflow-y-auto">
          <div className="px-3 py-2">
            <h2 className="mb-2 px-4 text-lg font-serif font-semibold tracking-tight truncate">Healthcare HR Docs</h2>
            <div className="space-y-1">
              <div className="space-y-1">
                {getNavItems().map((item) => {
                  const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
                  return (
                    <Button
                      key={item.href}
                      variant={isActive ? "secondary" : "ghost"}
                      className={cn(
                        "w-full justify-start text-left",
                        isActive && "bg-healthcare-yellow/20 text-healthcare-yellow-dark font-medium",
                      )}
                      asChild
                      onClick={() => setIsMobileOpen(false)}
                    >
                      <Link href={item.href}>
                        <item.icon className="mr-2 h-4 w-4 flex-shrink-0" />
                        <span className="truncate">{item.title}</span>
                      </Link>
                    </Button>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescript:file="lib/mock-data.ts" isFixed="true" isQuickEdit="true"
export interface Document {
  id: string
  title: string
  description: string
  category: string
  organization: string
  author: string
  version: string
  rating: number
  views: number
  downloads: number
  comments: number
  createdAt: string
  updatedAt: string
  status: "draft" | "published" | "archived" | "under-review"
  tags: string[]
  fileType: "pdf" | "doc" | "docx"
  fileSize: string
}

export interface Category {
  id: string
  name: string
  count: number
  description: string
}

export const mockCategories: Category[] = [
  { id: "recruitment", name: "Recruitment", count: 45, description: "Hiring and recruitment policies" },
  { id: "onboarding", name: "Onboarding", count: 32, description: "New employee orientation" },
  { id: "performance", name: "Performance", count: 28, description: "Performance reviews and management" },
  { id: "compliance", name: "Compliance", count: 67, description: "Regulatory and legal compliance" },
  { id: "benefits", name: "Benefits", count: 23, description: "Employee benefits and compensation" },
  { id: "training", name: "Training", count: 41, description: "Professional development and training" },
  { id: "safety", name: "Safety", count: 35, description: "Workplace safety and health" },
  { id: "policies", name: "General Policies", count: 52, description: "General HR policies and procedures" },
]

export const mockDocuments: Document[] = [
  {
    id: "1",
    title: "Healthcare Worker Vaccination Policy",
    description:
      "Comprehensive policy outlining vaccination requirements for healthcare workers, including exemptions and compliance procedures.",
    category: "compliance",
    organization: "General Hospital",
    author: "Dr. Sarah Johnson",
    version: "2.1",
    rating: 4.8,
    views: 1247,
    downloads: 342,
    comments: 23,
    createdAt: "2024-01-15",
    updatedAt: "2024-03-10",
    status: "published",
    tags: ["vaccination", "compliance", "healthcare", "safety"],
    fileType: "pdf",
    fileSize: "2.3 MB",
  },
  {
    id: "2",
    title: "Nurse Onboarding Checklist",
    description:
      "Step-by-step onboarding process for new nursing staff, including orientation schedule and required documentation.",
    category: "onboarding",
    organization: "City Medical Center",
    author: "Maria Rodriguez",
    version: "1.5",
    rating: 4.6,
    views: 892,
    downloads: 267,
    comments: 18,
    createdAt: "2024-02-01",
    updatedAt: "2024-03-15",
    status: "published",
    tags: ["nursing", "onboarding", "checklist", "orientation"],
    fileType: "docx",
    fileSize: "1.8 MB",
  },
  {
    id: "3",
    title: "Performance Review Template for Healthcare Staff",
    description:
      "Standardized performance evaluation form designed specifically for healthcare professionals with competency-based assessments.",
    category: "performance",
    organization: "Regional Health System",
    author: "James Chen",
    version: "3.0",
    rating: 4.9,
    views: 1456,
    downloads: 423,
    comments: 31,
    createdAt: "2023-11-20",
    updatedAt: "2024-02-28",
    status: "published",
    tags: ["performance", "evaluation", "template", "competency"],
    fileType: "pdf",
    fileSize: "1.2 MB",
  },
  {
    id: "4",
    title: "HIPAA Compliance Training Manual",
    description:
      "Complete training manual covering HIPAA regulations, privacy requirements, and best practices for healthcare organizations.",
    category: "training",
    organization: "Healthcare Compliance Institute",
    author: "Dr. Michael Thompson",
    version: "4.2",
    rating: 4.7,
    views: 2134,
    downloads: 678,
    comments: 45,
    createdAt: "2023-09-10",
    updatedAt: "2024-01-20",
    status: "published",
    tags: ["HIPAA", "compliance", "training", "privacy"],
    fileType: "pdf",
    fileSize: "5.7 MB",
  },
  {
    id: "5",
    title: "Emergency Response Procedures",
    description:
      "Detailed emergency response protocols for healthcare facilities, including evacuation procedures and crisis management.",
    category: "safety",
    organization: "Metro Hospital",
    author: "Lisa Park",
    version: "2.3",
    rating: 4.5,
    views: 743,
    downloads: 198,
    comments: 12,
    createdAt: "2024-01-05",
    updatedAt: "2024-03-08",
    status: "published",
    tags: ["emergency", "safety", "procedures", "crisis"],
    fileType: "pdf",
    fileSize: "3.1 MB",
  },
  {
    id: "6",
    title: "Healthcare Benefits Package Overview",
    description:
      "Comprehensive overview of employee benefits available to healthcare workers, including health insurance and retirement plans.",
    category: "benefits",
    organization: "United Healthcare Services",
    author: "Robert Kim",
    version: "1.8",
    rating: 4.4,
    views: 567,
    downloads: 145,
    comments: 8,
    createdAt: "2024-02-15",
    updatedAt: "2024-03-12",
    status: "published",
    tags: ["benefits", "insurance", "retirement", "compensation"],
    fileType: "docx",
    fileSize: "2.9 MB",
  },
]

export interface User {
  id: string
  name: string
  email: string
  role: "peer" | "organization" | "admin"
  organization?: string
  position?: string
  avatar?: string
  joinedDate: string
  documentsContributed: number
  averageRating: number
}

export const mockUsers: User[] = [
  {
    id: "1",
    name: "Dr. Sarah Johnson",
    email: "sarah.johnson@generalhospital.com",
    role: "organization",
    organization: "General Hospital",
    position: "Chief HR Officer",
    avatar: "/professional-woman-doctor.png",
    joinedDate: "2023-06-15",
    documentsContributed: 24,
    averageRating: 4.8,
  },
  {
    id: "2",
    name: "Maria Rodriguez",
    email: "maria.rodriguez@citymedical.com",
    role: "organization",
    organization: "City Medical Center",
    position: "HR Director",
    avatar: "/professional-asian-woman.png",
    joinedDate: "2023-08-20",
    documentsContributed: 18,
    averageRating: 4.6,
  },
  {
    id: "3",
    name: "Dr. Michael Thompson",
    email: "michael.thompson@healthcompliance.org",
    role: "peer",
    organization: "Healthcare Compliance Institute",
    position: "Compliance Specialist",
    avatar: "/professional-man-doctor.png",
    joinedDate: "2023-04-10",
    documentsContributed: 31,
    averageRating: 4.9,
  },
  {
    id: "4",
    name: "James Chen",
    email: "james.chen@regionalhealth.com",
    role: "organization",
    organization: "Regional Health System",
    position: "Performance Lead",
    avatar: "/professional-man-healthcare.png",
    joinedDate: "2023-09-05",
    documentsContributed: 22,
    averageRating: 4.7,
  },
]

export interface Notification {
  id: string
  type: "comment" | "document" | "team" | "system" | "mention"
  title: string
  message: string
  time: string
  read: boolean
  userId?: string
  documentId?: string
}

export const mockNotifications: Notification[] = [
  {
    id: "1",
    type: "comment",
    title: "New comment on HIPAA Training Manual",
    message:
      "Dr. Sarah Johnson commented: 'This section on breach notification procedures needs updating for 2024 requirements.'",
    time: "2 hours ago",
    read: false,
    userId: "1",
    documentId: "4",
  },
  {
    id: "2",
    type: "document",
    title: "New document published: Mental Health Support Guidelines",
    message: "Maria Rodriguez published a new document in the Employee Wellness category.",
    time: "4 hours ago",
    read: false,
    userId: "2",
  },
  {
    id: "3",
    type: "mention",
    title: "You were mentioned in a discussion",
    message: "Dr. Michael Thompson mentioned you in 'Best practices for healthcare worker retention strategies'",
    time: "1 day ago",
    read: false,
    userId: "3",
  },
  {
    id: "4",
    type: "system",
    title: "Document approved: Updated Vaccination Policy",
    message: "Your submitted document 'COVID-19 Vaccination Requirements Update' has been approved and published.",
    time: "2 days ago",
    read: true,
    documentId: "1",
  },
  {
    id: "5",
    type: "team",
    title: "New team member added",
    message: "Lisa Park has been added to your organization team as HR Coordinator.",
    time: "3 days ago",
    read: true,
    userId: "5",
  },
  {
    id: "6",
    type: "comment",
    title: "High-rated comment on your document",
    message: "Your response to 'Emergency preparedness protocols' received 15 likes from the community.",
    time: "1 week ago",
    read: true,
    documentId: "5",
  },
]

export interface FavoriteDocument {
  id: string
  documentId: string
  title: string
  category: string
  author: string
  organization: string
  dateAdded: string
  rating: number
  tags: string[]
}

export const mockFavoriteDocuments: FavoriteDocument[] = [
  {
    id: "fav1",
    documentId: "1",
    title: "Healthcare Worker Vaccination Policy",
    category: "Compliance",
    author: "Dr. Sarah Johnson",
    organization: "General Hospital",
    dateAdded: "2024-03-10",
    rating: 4.8,
    tags: ["vaccination", "compliance", "healthcare", "safety"],
  },
  {
    id: "fav2",
    documentId: "4",
    title: "HIPAA Compliance Training Manual",
    category: "Training",
    author: "Dr. Michael Thompson",
    organization: "Healthcare Compliance Institute",
    dateAdded: "2024-03-08",
    rating: 4.7,
    tags: ["HIPAA", "compliance", "training", "privacy"],
  },
  {
    id: "fav3",
    documentId: "3",
    title: "Performance Review Template for Healthcare Staff",
    category: "Performance",
    author: "James Chen",
    organization: "Regional Health System",
    dateAdded: "2024-03-05",
    rating: 4.9,
    tags: ["performance", "evaluation", "template", "competency"],
  },
  {
    id: "fav4",
    documentId: "2",
    title: "Nurse Onboarding Checklist",
    category: "Onboarding",
    author: "Maria Rodriguez",
    organization: "City Medical Center",
    dateAdded: "2024-03-01",
    rating: 4.6,
    tags: ["nursing", "onboarding", "checklist", "orientation"],
  },
]

export interface CommunityDiscussion {
  id: string
  title: string
  content: string
  author: string
  authorId: string
  organization: string
  replies: number
  views: number
  lastActivity: string
  tags: string[]
  isSticky?: boolean
}

export const mockCommunityDiscussions: CommunityDiscussion[] = [
  {
    id: "disc1",
    title: "Best practices for remote healthcare worker onboarding during staff shortages",
    content:
      "With the ongoing healthcare staffing crisis, we've had to adapt our onboarding process for remote and hybrid workers. What strategies have worked best for your organization?",
    author: "Dr. Sarah Johnson",
    authorId: "1",
    organization: "General Hospital",
    replies: 23,
    views: 156,
    lastActivity: "2024-03-15T14:30:00Z",
    tags: ["onboarding", "remote-work", "staffing", "best-practices"],
    isSticky: true,
  },
  {
    id: "disc2",
    title: "New CMS guidelines for healthcare worker mental health support - Implementation strategies",
    content:
      "The recent CMS updates require enhanced mental health support programs. How are you implementing these changes while managing budget constraints?",
    author: "Maria Rodriguez",
    authorId: "2",
    organization: "City Medical Center",
    replies: 18,
    views: 134,
    lastActivity: "2024-03-14T16:45:00Z",
    tags: ["mental-health", "cms-guidelines", "employee-wellness", "compliance"],
  },
  {
    id: "disc3",
    title: "HIPAA compliance in the age of AI: What HR needs to know",
    content:
      "As healthcare organizations adopt AI tools, HR departments need to understand the privacy implications. Let's discuss the key considerations and best practices.",
    author: "Dr. Michael Thompson",
    authorId: "3",
    organization: "Healthcare Compliance Institute",
    replies: 31,
    views: 289,
    lastActivity: "2024-03-13T11:20:00Z",
    tags: ["hipaa", "ai", "privacy", "technology", "compliance"],
  },
  {
    id: "disc4",
    title: "Performance evaluation challenges for traveling nurses and contract staff",
    content:
      "How do you effectively evaluate performance for temporary and contract healthcare workers? Looking for practical frameworks and tools.",
    author: "James Chen",
    authorId: "4",
    organization: "Regional Health System",
    replies: 15,
    views: 98,
    lastActivity: "2024-03-12T09:15:00Z",
    tags: ["performance-management", "contract-staff", "evaluation", "traveling-nurses"],
  },
]
[V0_FILE]typescriptreact:file="app/admin/categories/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { SidebarNav } from "@/components/sidebar-nav"
import { Header } from "@/components/header"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/components/auth-provider"
import { FolderOpen, Plus, Edit, Trash2 } from "lucide-react"

export default function AdminCategoriesPage() {
  const { user } = useAuth()

if (user?.role !== "admin") {
    return (
      <div className="flex h-screen bg-background">
        <aside className="w-64 border-r bg-muted/40">
          <SidebarNav />
        </aside>
        <div className="flex-1 flex flex-col">
          <Header />
          <main className="flex-1 p-6">
            <Card className="max-w-md mx-auto">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <FolderOpen className="h-5 w-5 text-healthcare-cyan" />
                  Category Management Preview
                </CardTitle>
                <CardDescription>
                  This page allows platform administrators to manage document categories and organization.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  Switch to an Admin account to manage document categories, create new categories, and organize the
                  platform's content structure.
                </p>
              </CardContent>
            </Card>
          </main>
        </div>
      </div>
    )
  }

const categories = [
    { id: 1, name: "HR Policies", count: 45, description: "Human resources policies and procedures" },
    { id: 2, name: "Employee Benefits", count: 23, description: "Benefits information and enrollment guides" },
    { id: 3, name: "Compliance", count: 18, description: "Regulatory compliance documents" },
    { id: 4, name: "Training Materials", count: 32, description: "Employee training and development resources" },
    { id: 5, name: "Safety Protocols", count: 15, description: "Workplace safety and emergency procedures" },
    { id: 6, name: "Performance", count: 12, description: "Performance review and evaluation materials" },
  ]

<Card>
            <CardHeader>
              <CardTitle>Add New Category</CardTitle>
              <CardDescription>Create a new document category</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-2">
                <label htmlFor="category-name" className="text-sm font-medium">
                  Category Name
                </label>
                <Input id="category-name" placeholder="Enter category name" />
              </div>
              <div className="grid gap-2">
                <label htmlFor="category-description" className="text-sm font-medium">
                  Description
                </label>
                <Input id="category-description" placeholder="Enter category description" />
              </div>
              <Button>Create Category</Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Document Categories</CardTitle>
              <CardDescription>Manage how documents are organized on the platform</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {categories.map((category) => (
                  <div key={category.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center space-x-4">
                      <FolderOpen className="h-5 w-5 text-healthcare-cyan" />
                      <div>
                        <h3 className="font-medium">{category.name}</h3>
                        <p className="text-sm text-muted-foreground">{category.description}</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Badge variant="secondary">{category.count} documents</Badge>
                      <Button variant="ghost" size="sm">
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="sm">
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/organization-profile/[name]/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Building2, Users, FileText, Calendar, MapPin, Globe, Mail, Phone } from "lucide-react"
import { mockDocuments } from "@/lib/mock-data"

// Mock organization data
const organizationProfiles = {
  "Mayo Clinic": {
    name: "Mayo Clinic",
    description:
      "Mayo Clinic is a nonprofit American academic medical center focused on integrated health care, education, and research.",
    location: "Rochester, Minnesota",
    website: "mayoclinic.org",
    email: "hr@mayoclinic.org",
    phone: "+1 (507) 284-2511",
    founded: "1889",
    employees: "65,000+",
    specialties: ["Healthcare", "Medical Research", "Patient Care", "Medical Education"],
    documentsPublished: 12,
    totalViews: 45600,
    totalDownloads: 8900,
  },
  "Cleveland Clinic": {
    name: "Cleveland Clinic",
    description:
      "Cleveland Clinic is a nonprofit multispecialty academic medical center that integrates clinical and hospital care with research and education.",
    location: "Cleveland, Ohio",
    website: "clevelandclinic.org",
    email: "hr@clevelandclinic.org",
    phone: "+1 (216) 444-2200",
    founded: "1921",
    employees: "70,000+",
    specialties: ["Cardiology", "Neurology", "Oncology", "Orthopedics"],
    documentsPublished: 8,
    totalViews: 32400,
    totalDownloads: 6200,
  },
  "Johns Hopkins": {
    name: "Johns Hopkins",
    description:
      "Johns Hopkins Medicine is a leading academic medical enterprise and global leader in medical research, patient care and education.",
    location: "Baltimore, Maryland",
    website: "hopkinsmedicine.org",
    email: "hr@jhmi.edu",
    phone: "+1 (410) 955-5000",
    founded: "1889",
    employees: "50,000+",
    specialties: ["Research", "Medical Education", "Patient Care", "Public Health"],
    documentsPublished: 15,
    totalViews: 58200,
    totalDownloads: 11400,
  },
  "Regional Health System": {
    name: "Regional Health System",
    description:
      "Regional Health System is a comprehensive healthcare network providing quality medical services and innovative care solutions to communities across multiple states.",
    location: "Denver, Colorado",
    website: "regionalhealthsystem.org",
    email: "hr@regionalhealthsystem.org",
    phone: "+1 (303) 555-0100",
    founded: "1995",
    employees: "25,000+",
    specialties: ["Community Healthcare", "Emergency Services", "Preventive Care", "Telehealth"],
    documentsPublished: 6,
    totalViews: 18500,
    totalDownloads: 3200,
  },
  "Metro Healthcare": {
    name: "Metro Healthcare",
    description:
      "Metro Healthcare is an urban healthcare provider focused on accessible, high-quality medical services for diverse metropolitan communities.",
    location: "Chicago, Illinois",
    website: "metrohealthcare.org",
    email: "hr@metrohealthcare.org",
    phone: "+1 (312) 555-0200",
    founded: "2001",
    employees: "18,000+",
    specialties: ["Urban Healthcare", "Community Outreach", "Mental Health", "Pediatrics"],
    documentsPublished: 4,
    totalViews: 12300,
    totalDownloads: 2100,
  },
  "Coastal Medical Center": {
    name: "Coastal Medical Center",
    description:
      "Coastal Medical Center provides specialized healthcare services with a focus on innovation, patient-centered care, and medical excellence.",
    location: "San Diego, California",
    website: "coastalmedicalcenter.org",
    email: "hr@coastalmedicalcenter.org",
    phone: "+1 (619) 555-0300",
    founded: "1987",
    employees: "12,000+",
    specialties: ["Specialized Care", "Medical Innovation", "Research", "Rehabilitation"],
    documentsPublished: 7,
    totalViews: 21800,
    totalDownloads: 4500,
  },
  "General Hospital": {
    name: "General Hospital",
    description:
      "General Hospital is a leading community healthcare provider committed to delivering comprehensive medical services with a focus on patient safety and clinical excellence.",
    location: "Phoenix, Arizona",
    website: "generalhospital.org",
    email: "hr@generalhospital.org",
    phone: "+1 (602) 555-0400",
    founded: "1978",
    employees: "15,000+",
    specialties: ["Emergency Medicine", "Surgery", "Internal Medicine", "Pediatrics"],
    documentsPublished: 8,
    totalViews: 24700,
    totalDownloads: 4800,
  },
  "City Medical Center": {
    name: "City Medical Center",
    description:
      "City Medical Center is a comprehensive urban healthcare facility providing advanced medical care, emergency services, and specialized treatments to the metropolitan community.",
    location: "Atlanta, Georgia",
    website: "citymedicalcenter.org",
    email: "hr@citymedicalcenter.org",
    phone: "+1 (404) 555-0500",
    founded: "1985",
    employees: "22,000+",
    specialties: ["Trauma Care", "Cardiology", "Oncology", "Women's Health"],
    documentsPublished: 11,
    totalViews: 31200,
    totalDownloads: 6700,
  },
  "Healthcare Compliance Institute": {
    name: "Healthcare Compliance Institute",
    description:
      "Healthcare Compliance Institute is a specialized organization dedicated to healthcare regulatory compliance, training, and best practices for medical institutions nationwide.",
    location: "Washington, D.C.",
    website: "healthcarecomplianceinstitute.org",
    email: "hr@healthcarecomplianceinstitute.org",
    phone: "+1 (202) 555-0600",
    founded: "1992",
    employees: "500+",
    specialties: ["Regulatory Compliance", "Training & Education", "Policy Development", "Risk Management"],
    documentsPublished: 25,
    totalViews: 67800,
    totalDownloads: 15200,
  },
  "Metro Hospital": {
    name: "Metro Hospital",
    description:
      "Metro Hospital is a state-of-the-art medical facility serving the metropolitan area with advanced healthcare services, emergency care, and specialized medical programs.",
    location: "Dallas, Texas",
    website: "metrohospital.org",
    email: "hr@metrohospital.org",
    phone: "+1 (214) 555-0700",
    founded: "1990",
    employees: "18,500+",
    specialties: ["Emergency Services", "Critical Care", "Rehabilitation", "Outpatient Services"],
    documentsPublished: 9,
    totalViews: 28400,
    totalDownloads: 5300,
  },
  "United Healthcare Services": {
    name: "United Healthcare Services",
    description:
      "United Healthcare Services is a comprehensive healthcare organization providing insurance, benefits administration, and healthcare management solutions to organizations nationwide.",
    location: "Minneapolis, Minnesota",
    website: "unitedhealthcareservices.com",
    email: "hr@unitedhealthcareservices.com",
    phone: "+1 (612) 555-0800",
    founded: "1977",
    employees: "35,000+",
    specialties: ["Healthcare Insurance", "Benefits Administration", "Healthcare Management", "Wellness Programs"],
    documentsPublished: 14,
    totalViews: 42600,
    totalDownloads: 9100,
  },
}

export default function OrganizationProfilePage() {
  const params = useParams()
  const orgName = decodeURIComponent(params.name as string)
  const org = organizationProfiles[orgName as keyof typeof organizationProfiles]

if (!org) {
    return (
      <div className="flex-1 p-6">
        <Card>
          <CardContent className="p-8 text-center">
            <Building2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
            <h2 className="text-xl font-semibold mb-2">Organization Not Found</h2>
            <p className="text-muted-foreground">The organization profile you're looking for doesn't exist.</p>
          </CardContent>
        </Card>
      </div>
    )
  }

// Get documents published by this organization
  const orgDocuments = mockDocuments.filter((doc) => doc.organization === orgName)

return (
    <div className="flex-1 p-6 space-y-6">
      {/* Organization Header */}
      <Card>
        <CardHeader>
          <div className="flex items-start gap-4">
            <div className="p-3 bg-primary/10 rounded-lg">
              <Building2 className="h-8 w-8 text-primary" />
            </div>
            <div className="flex-1">
              <CardTitle className="text-2xl font-serif mb-2">{org.name}</CardTitle>
              <p className="text-muted-foreground mb-4">{org.description}</p>
              <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
                <div className="flex items-center gap-1">
                  <MapPin className="h-4 w-4" />
                  {org.location}
                </div>
                <div className="flex items-center gap-1">
                  <Calendar className="h-4 w-4" />
                  Founded {org.founded}
                </div>
                <div className="flex items-center gap-1">
                  <Users className="h-4 w-4" />
                  {org.employees} employees
                </div>
              </div>
            </div>
          </div>
        </CardHeader>
      </Card>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Statistics */}
        <div className="lg:col-span-2 space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardContent className="p-4 text-center">
                <FileText className="h-8 w-8 mx-auto mb-2 text-primary" />
                <div className="text-2xl font-bold">{org.documentsPublished}</div>
                <div className="text-sm text-muted-foreground">Documents Published</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Users className="h-8 w-8 mx-auto mb-2 text-primary" />
                <div className="text-2xl font-bold">{org.totalViews.toLocaleString()}</div>
                <div className="text-sm text-muted-foreground">Total Views</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4 text-center">
                <Building2 className="h-8 w-8 mx-auto mb-2 text-primary" />
                <div className="text-2xl font-bold">{org.totalDownloads.toLocaleString()}</div>
                <div className="text-sm text-muted-foreground">Total Downloads</div>
              </CardContent>
            </Card>
          </div>

{/* Published Documents */}
          <Card>
            <CardHeader>
              <CardTitle>Published Documents</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {orgDocuments.map((doc) => (
                  <div key={doc.id} className="flex items-center justify-between p-3 border rounded-lg">
                    <div>
                      <h4 className="font-medium">{doc.title}</h4>
                      <p className="text-sm text-muted-foreground">{doc.category}</p>
                    </div>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                      <span>{doc.views} views</span>
                      <Button variant="outline" size="sm" asChild>
                        <a href={`/documents/${doc.id}`}>View</a>
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Contact & Specialties */}
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Contact Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center gap-2">
                <Globe className="h-4 w-4 text-muted-foreground" />
                <a href={`https://${org.website}`} className="text-primary hover:underline">
                  {org.website}
                </a>
              </div>
              <div className="flex items-center gap-2">
                <Mail className="h-4 w-4 text-muted-foreground" />
                <a href={`mailto:${org.email}`} className="text-primary hover:underline">
                  {org.email}
                </a>
              </div>
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4 text-muted-foreground" />
                <span>{org.phone}</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Specialties</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-2">
                {org.specialties.map((specialty) => (
                  <Badge key={specialty} variant="secondary">
                    {specialty}
                  </Badge>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-chat-interface.tsx"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Star, Download, Eye, Building2, Send, Bot, User } from "lucide-react"
import { mockDocuments } from "@/lib/mock-data"

interface DocumentChatInterfaceProps {
  selectedCategory: string
}

interface ChatMessage {
  id: string
  type: "user" | "assistant"
  content: string
  documents?: typeof mockDocuments
  timestamp: Date
}

export function DocumentChatInterface({ selectedCategory }: DocumentChatInterfaceProps) {
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: "1",
      type: "assistant",
      content: "Hi! I'm here to help you find relevant HR documents and policies. What are you looking for today?",
      timestamp: new Date(),
    },
  ])
  const [inputValue, setInputValue] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const findRelevantDocuments = (query: string) => {
    if (!query.trim()) return []

const filtered = mockDocuments.filter((doc) => {
      const matchesSearch =
        doc.title.toLowerCase().includes(query.toLowerCase()) ||
        doc.description.toLowerCase().includes(query.toLowerCase()) ||
        doc.tags.some((tag) => tag.toLowerCase().includes(query.toLowerCase()))
      const matchesCategory = selectedCategory === "all" || doc.category === selectedCategory
      return matchesSearch && matchesCategory
    })

// Sort by relevance (rating and downloads)
    return filtered
      .sort((a, b) => {
        const scoreA = a.rating * 0.7 + (a.downloads / 1000) * 0.3
        const scoreB = b.rating * 0.7 + (b.downloads / 1000) * 0.3
        return scoreB - scoreA
      })
      .slice(0, 6) // Limit to top 6 results
  }

const handleSendMessage = async () => {
    if (!inputValue.trim()) return

const userMessage: ChatMessage = {
      id: Date.now().toString(),
      type: "user",
      content: inputValue,
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInputValue("")
    setIsTyping(true)

// Simulate AI response delay
    setTimeout(() => {
      const relevantDocs = findRelevantDocuments(inputValue)

let responseContent = ""
      if (relevantDocs.length > 0) {
        responseContent = `I found ${relevantDocs.length} relevant document${relevantDocs.length > 1 ? "s" : ""} that might help with "${inputValue}". Here are the most relevant ones:`
      } else {
        responseContent = `I couldn't find any documents matching "${inputValue}". Try using different keywords or check if the category filter is limiting your results.`
      }

const assistantMessage: ChatMessage = {
        id: (Date.now() + 1).toString(),
        type: "assistant",
        content: responseContent,
        documents: relevantDocs.length > 0 ? relevantDocs : undefined,
        timestamp: new Date(),
      }

setMessages((prev) => [...prev, assistantMessage])
      setIsTyping(false)
    }, 1000)
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

const handleViewDocument = (documentId: string) => {
    window.location.href = `/documents/${documentId}`
  }

return (
    <div className="flex flex-col h-[calc(100vh-12rem)] max-h-[800px]">
      {/* Chat Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-muted/20 rounded-t-lg">
        {messages.map((message) => (
          <div key={message.id} className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}>
            <div className={`flex gap-3 max-w-[80%] ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`}>
              <div
                className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
                  message.type === "user" ? "bg-primary text-primary-foreground" : "bg-secondary"
                }`}
              >
                {message.type === "user" ? <User className="h-4 w-4" /> : <Bot className="h-4 w-4" />}
              </div>

<div className="space-y-3">
                <div
                  className={`p-3 rounded-lg ${
                    message.type === "user" ? "bg-primary text-primary-foreground" : "bg-background border"
                  }`}
                >
                  <p className="text-sm">{message.content}</p>
                </div>

{/* Document Results */}
                {message.documents && message.documents.length > 0 && (
                  <div className="grid gap-3 md:grid-cols-2">
                    {message.documents.map((document) => (
                      <Card key={document.id} className="hover:shadow-md transition-shadow cursor-pointer group">
                        <CardHeader className="pb-2">
                          <div className="flex items-start justify-between">
                            <Badge variant="secondary" className="mb-1 text-xs">
                              {document.category}
                            </Badge>
                            <div className="flex items-center gap-1 text-xs text-muted-foreground">
                              <Star className="h-3 w-3 fill-primary text-primary" />
                              <span>{document.rating.toFixed(1)}</span>
                            </div>
                          </div>
                          <CardTitle className="text-sm leading-tight group-hover:text-primary transition-colors">
                            {document.title}
                          </CardTitle>
                          <CardDescription className="line-clamp-2 text-xs">{document.description}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-2">
                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
                            <div className="flex items-center gap-1">
                              <Building2 className="h-3 w-3" />
                              <span className="truncate">{document.organization}</span>
                            </div>
                          </div>

<div className="flex items-center justify-between text-xs text-muted-foreground">
                            <div className="flex items-center gap-2">
                              <div className="flex items-center gap-1">
                                <Eye className="h-3 w-3" />
                                <span>{document.views}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Download className="h-3 w-3" />
                                <span>{document.downloads}</span>
                              </div>
                            </div>
                            <span className="text-xs">v{document.version}</span>
                          </div>

<div className="flex gap-2">
                            <Button
                              size="sm"
                              className="flex-1 text-xs h-7"
                              onClick={() => handleViewDocument(document.id)}
                            >
                              <Eye className="h-3 w-3 mr-1" />
                              View
                            </Button>
                            <Button size="sm" variant="outline" className="text-xs h-7 bg-transparent">
                              <Download className="h-3 w-3 mr-1" />
                              Download
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}

{/* Typing Indicator */}
        {isTyping && (
          <div className="flex justify-start">
            <div className="flex gap-3">
              <div className="w-8 h-8 rounded-full bg-secondary flex items-center justify-center">
                <Bot className="h-4 w-4" />
              </div>
              <div className="bg-background border p-3 rounded-lg">
                <div className="flex gap-1">
                  <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"></div>
                  <div
                    className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"
                    style={{ animationDelay: "0.1s" }}
                  ></div>
                  <div
                    className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"
                    style={{ animationDelay: "0.2s" }}
                  ></div>
                </div>
              </div>
            </div>
          </div>
        )}

{/* Chat Input */}
      <div className="border-t bg-background p-4 rounded-b-lg">
        <div className="flex gap-2">
          <Input
            placeholder="Ask me about HR policies, procedures, or search for specific documents..."
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyPress={handleKeyPress}
            className="flex-1"
            disabled={isTyping}
          />
          <Button onClick={handleSendMessage} disabled={!inputValue.trim() || isTyping} size="icon">
            <Send className="h-4 w-4" />
          </Button>
        </div>
        <p className="text-xs text-muted-foreground mt-2">
          Press Enter to send, or describe what you're looking for and I'll find relevant documents.
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/documents/page.tsx"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"
import { SidebarNav } from "@/components/sidebar-nav"
import { DocumentChatInterface } from "@/components/document-chat-interface"
import { CategoryFilter } from "@/components/category-filter"
import { useAuth } from "@/components/auth-provider"

export default function DocumentsPage() {
  const { user } = useAuth()
  const [selectedCategory, setSelectedCategory] = useState("all")

return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <SidebarNav />
        <main className="flex-1 p-4 md:p-6 overflow-auto min-w-0">
          <div className="max-w-7xl mx-auto">
            <div className="mb-6 md:mb-8">
              <h1 className="text-2xl md:text-3xl font-serif font-bold mb-2">Public Document Library</h1>
              <p className="text-muted-foreground text-sm md:text-base">
                Chat with our AI assistant to find HR policies and documentation shared by the healthcare community.
              </p>
            </div>