documentation-hub 5.7.2

package/src/pages/Dashboard.tsx

@@ -0,0 +1,319 @@
+import { Button } from '@/components/common/Button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/common/Card';
+import { SessionManager } from '@/components/sessions/SessionManager';
+import { useGlobalStats } from '@/contexts/GlobalStatsContext';
+import { useSession } from '@/contexts/SessionContext';
+import { cn } from '@/utils/cn';
+import { motion } from 'framer-motion';
+import {
+  ArrowUpRight,
+  Calendar,
+  Clock,
+  FileCheck,
+  FileText,
+  FolderOpen,
+  Link,
+  MessageSquare,
+  Minus,
+  Plus,
+  TrendingDown,
+  TrendingUp,
+} from 'lucide-react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+export function Dashboard() {
+  const { recentSessions, loadSession } = useSession();
+  const { stats: globalStats, getTodayStats, getTodayChange } = useGlobalStats();
+  const navigate = useNavigate();
+  const [showSessionManager, setShowSessionManager] = useState(false);
+  const [sessionManagerMode, setSessionManagerMode] = useState<'new' | 'load'>('new');
+
+  // Get today's stats and changes from yesterday
+  const todayStats = getTodayStats();
+  const todayChange = getTodayChange();
+
+  const stats = [
+    {
+      title: 'Documents Processed',
+      value: globalStats.allTime.documentsProcessed.toString(),
+      todayValue: todayStats.documentsProcessed,
+      change: todayChange.documentsProcessed || 0,
+      icon: FileCheck,
+      gradient: 'from-green-400 to-emerald-600',
+      bgGradient: 'from-green-500/20 to-emerald-500/10',
+    },
+    {
+      title: 'Hyperlinks Checked',
+      value: globalStats.allTime.hyperlinksChecked.toString(),
+      todayValue: todayStats.hyperlinksChecked,
+      change: todayChange.hyperlinksChecked || 0,
+      icon: Link,
+      gradient: 'from-blue-400 to-indigo-600',
+      bgGradient: 'from-blue-500/20 to-indigo-500/10',
+    },
+    {
+      title: 'Feedback Imported',
+      value: globalStats.allTime.feedbackImported.toString(),
+      todayValue: todayStats.feedbackImported,
+      change: todayChange.feedbackImported || 0,
+      icon: MessageSquare,
+      gradient: 'from-purple-400 to-pink-600',
+      bgGradient: 'from-purple-500/20 to-pink-500/10',
+    },
+    {
+      title: 'Time Saved',
+      value: `${globalStats.allTime.timeSaved}m`,
+      todayValue: todayStats.timeSaved,
+      change: todayChange.timeSaved || 0,
+      icon: Clock,
+      gradient: 'from-orange-400 to-red-600',
+      bgGradient: 'from-orange-500/20 to-red-500/10',
+    },
+  ];
+
+  const handleNewSession = () => {
+    setSessionManagerMode('new');
+    setShowSessionManager(true);
+  };
+
+  const handleLoadSession = () => {
+    setSessionManagerMode('load');
+    setShowSessionManager(true);
+  };
+
+  const handleSessionCreated = (sessionId: string) => {
+    navigate(`/session/${sessionId}`);
+  };
+
+  const handleRecentSessionClick = (sessionId: string) => {
+    loadSession(sessionId);
+    navigate(`/session/${sessionId}`);
+  };
+
+  const formatDate = (date: Date) => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+
+    if (hours < 1) {
+      const minutes = Math.floor(diff / (1000 * 60));
+      return `${minutes} minutes ago`;
+    } else if (hours < 24) {
+      return `${hours} hours ago`;
+    } else {
+      const days = Math.floor(hours / 24);
+      return `${days} day${days > 1 ? 's' : ''} ago`;
+    }
+  };
+
+  return (
+    <motion.div
+      className="p-6 space-y-6"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      <motion.div className="flex justify-end" variants={itemVariants}>
+        <div className="flex gap-2">
+          <Button
+            onClick={handleNewSession}
+            variant="default"
+            size="sm"
+            icon={<Plus className="w-4 h-4" />}
+          >
+            New Session
+          </Button>
+          <Button
+            onClick={handleLoadSession}
+            variant="outline"
+            size="sm"
+            icon={<FolderOpen className="w-4 h-4" />}
+          >
+            Load Session
+          </Button>
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
+        variants={itemVariants}
+      >
+        {stats.map((stat) => {
+          const Icon = stat.icon;
+
+          return (
+            <motion.div key={stat.title} whileHover={{ y: -4 }} transition={{ duration: 0.2 }}>
+              <Card className="relative overflow-hidden group cursor-pointer border-0 shadow-lg hover:shadow-2xl transition-all">
+                <div
+                  className={cn(
+                    'absolute inset-0 bg-linear-to-br opacity-5 group-hover:opacity-10 transition-opacity',
+                    stat.bgGradient
+                  )}
+                />
+                <CardContent className="p-6 relative">
+                  <div className="flex items-center justify-between mb-4">
+                    <div
+                      className={cn('p-3 rounded-xl bg-linear-to-br', stat.gradient, 'shadow-lg')}
+                    >
+                      <Icon className="w-6 h-6 text-white" />
+                    </div>
+                    <motion.button
+                      whileHover={{ scale: 1.1 }}
+                      whileTap={{ scale: 0.95 }}
+                      className="p-2 rounded-lg hover:bg-muted transition-colors"
+                    >
+                      <ArrowUpRight className="w-4 h-4 text-muted-foreground" />
+                    </motion.button>
+                  </div>
+
+                  <div className="space-y-1">
+                    <p className="text-xs font-medium text-foreground uppercase tracking-wide">
+                      {stat.title}
+                    </p>
+                    <p className="text-3xl font-bold tracking-tight">{stat.value}</p>
+                    <div className="flex items-center gap-2 pt-2">
+                      {stat.todayValue > 0 ? (
+                        <>
+                          <div className="flex items-center gap-1">
+                            {stat.change > 0 ? (
+                              <div className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                                <TrendingUp className="w-3 h-3" />
+                                <span>+{stat.change}</span>
+                              </div>
+                            ) : stat.change < 0 ? (
+                              <div className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">
+                                <TrendingDown className="w-3 h-3" />
+                                <span>{stat.change}</span>
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-muted text-muted-foreground">
+                                <Minus className="w-3 h-3" />
+                                <span>No change</span>
+                              </div>
+                            )}
+                          </div>
+                          <span className="text-xs text-muted-foreground">vs yesterday</span>
+                        </>
+                      ) : (
+                        <span className="text-xs text-muted-foreground">No activity today</span>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          );
+        })}
+      </motion.div>
+
+      <motion.div variants={itemVariants}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Sessions</CardTitle>
+            <CardDescription>Your recently accessed document processing sessions</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {recentSessions.length === 0 ? (
+              <div className="text-center py-8">
+                <FileText className="w-12 h-12 mx-auto text-muted-foreground mb-3" />
+                <p className="text-muted-foreground">No sessions yet</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Create a new session to start processing documents
+                </p>
+                <Button
+                  onClick={handleNewSession}
+                  variant="outline"
+                  size="sm"
+                  className="mt-4"
+                  icon={<Plus className="w-4 h-4" />}
+                >
+                  Create First Session
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {recentSessions.map((session) => (
+                  <motion.div
+                    key={session.id}
+                    className="flex items-center justify-between p-4 rounded-lg border border-border hover:bg-muted/50 transition-all cursor-pointer group"
+                    whileHover={{ x: 4 }}
+                    onClick={() => handleRecentSessionClick(session.id)}
+                  >
+                    <div className="flex items-center gap-4">
+                      <div className="p-2 rounded-lg bg-primary/10">
+                        <FileText className="w-5 h-5 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-lg font-medium">{session.name}</p>
+                        <div className="flex items-center gap-4 text-sm text-muted-foreground mt-1">
+                          <span className="flex items-center gap-1">
+                            <FileCheck className="w-3 h-3" />
+                            {session.documents.length} documents
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <Calendar className="w-3 h-3" />
+                            {formatDate(session.lastModified)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={cn(
+                          'text-xs px-2 py-1 rounded-full',
+                          session.status === 'active'
+                            ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                            : 'bg-muted text-muted-foreground'
+                        )}
+                      >
+                        {session.status}
+                      </span>
+                      <ArrowUpRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {showSessionManager && (
+        <SessionManager
+          mode={sessionManagerMode}
+          onClose={() => setShowSessionManager(false)}
+          onSessionCreated={handleSessionCreated}
+          onSessionLoaded={handleSessionCreated}
+        />
+      )}
+    </motion.div>
+  );
+}

package/src/pages/Documents.tsx

@@ -0,0 +1,317 @@
+import { useState, useMemo } from 'react';
+import { useSession } from '@/contexts/SessionContext';
+import { motion } from 'framer-motion';
+import {
+  FileText,
+  FolderOpen,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+  Search,
+  Filter,
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/common/Card';
+import { Input } from '@/components/common/Input';
+import { Button } from '@/components/common/Button';
+import { cn } from '@/utils/cn';
+import logger from '@/utils/logger';
+import type { Document } from '@/types/session';
+
+interface DocumentWithSession extends Document {
+  sessionName: string;
+  sessionId: string;
+}
+
+export function Documents() {
+  const { sessions } = useSession();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'completed' | 'pending' | 'error'>(
+    'all'
+  );
+
+  // Collect all documents from all sessions
+  const allDocuments = useMemo(() => {
+    const docs: DocumentWithSession[] = [];
+    sessions.forEach((session) => {
+      session.documents.forEach((doc) => {
+        docs.push({
+          ...doc,
+          sessionName: session.name,
+          sessionId: session.id,
+        });
+      });
+    });
+    return docs;
+  }, [sessions]);
+
+  // Filter documents
+  const filteredDocuments = useMemo(() => {
+    return allDocuments.filter((doc) => {
+      // Filter by search query
+      const matchesSearch =
+        searchQuery === '' ||
+        doc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        doc.sessionName.toLowerCase().includes(searchQuery.toLowerCase());
+
+      // Filter by status
+      const matchesStatus = statusFilter === 'all' || doc.status === statusFilter;
+
+      return matchesSearch && matchesStatus;
+    });
+  }, [allDocuments, searchQuery, statusFilter]);
+
+  const handleOpenLocation = async (path?: string) => {
+    if (!path) {
+      logger.warn('No path available for document');
+      return;
+    }
+
+    try {
+      await window.electronAPI.showInFolder(path);
+    } catch (err) {
+      logger.error('Failed to open file location:', err);
+    }
+  };
+
+  const handleOpenDocument = async (path?: string) => {
+    if (!path) {
+      logger.warn('No path available for document');
+      return;
+    }
+
+    try {
+      await window.electronAPI.openDocument(path);
+      logger.info('Document opened successfully');
+    } catch (err) {
+      logger.error('Failed to open document:', err);
+    }
+  };
+
+  const getStatusIcon = (status: Document['status']) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle className="w-4 h-4 text-green-500" />;
+      case 'error':
+        return <AlertCircle className="w-4 h-4 text-red-500" />;
+      case 'pending':
+        return <Clock className="w-4 h-4 text-muted-foreground" />;
+      default:
+        return <FileText className="w-4 h-4 text-muted-foreground" />;
+    }
+  };
+
+  const getStatusBadge = (status: Document['status']) => {
+    const styles = {
+      completed: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+      error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+      pending: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+      processing: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+    };
+
+    return (
+      <span className={cn('px-2 py-1 text-xs rounded-full font-medium', styles[status])}>
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </span>
+    );
+  };
+
+  const formatDate = (date?: Date) => {
+    if (!date) return 'N/A';
+    return new Date(date).toLocaleString();
+  };
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold mb-2">Documents</h1>
+        <p className="text-muted-foreground">
+          View and manage all processed documents across all sessions
+        </p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <FileText className="w-8 h-8 text-blue-500" />
+              <div>
+                <p className="text-sm text-foreground">Total</p>
+                <p className="text-2xl font-bold">{allDocuments.length}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <CheckCircle className="w-8 h-8 text-green-500" />
+              <div>
+                <p className="text-sm text-foreground">Completed</p>
+                <p className="text-2xl font-bold">
+                  {allDocuments.filter((d) => d.status === 'completed').length}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <Clock className="w-8 h-8 text-yellow-500" />
+              <div>
+                <p className="text-sm text-foreground">Pending</p>
+                <p className="text-2xl font-bold">
+                  {allDocuments.filter((d) => d.status === 'pending').length}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <AlertCircle className="w-8 h-8 text-red-500" />
+              <div>
+                <p className="text-sm text-foreground">Errors</p>
+                <p className="text-2xl font-bold">
+                  {allDocuments.filter((d) => d.status === 'error').length}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Filters</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="flex-1">
+              <Input
+                type="search"
+                placeholder="Search documents..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                leftIcon={<Search className="w-4 h-4" />}
+              />
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant={statusFilter === 'all' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setStatusFilter('all')}
+              >
+                All
+              </Button>
+              <Button
+                variant={statusFilter === 'completed' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setStatusFilter('completed')}
+              >
+                Completed
+              </Button>
+              <Button
+                variant={statusFilter === 'pending' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setStatusFilter('pending')}
+              >
+                Pending
+              </Button>
+              <Button
+                variant={statusFilter === 'error' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setStatusFilter('error')}
+              >
+                Errors
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Documents List */}
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {filteredDocuments.length} Document{filteredDocuments.length !== 1 ? 's' : ''}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {filteredDocuments.length === 0 ? (
+            <div className="text-center py-12">
+              <FileText className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-medium mb-2">No documents found</h3>
+              <p className="text-muted-foreground">
+                {searchQuery || statusFilter !== 'all'
+                  ? 'Try adjusting your filters'
+                  : 'Start by creating a session and adding documents'}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {filteredDocuments.map((doc) => (
+                <motion.div
+                  key={`${doc.sessionId}-${doc.id}`}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex items-center justify-between p-4 rounded-lg border border-border hover:bg-muted/50 transition-all group"
+                >
+                  <div className="flex items-center gap-4 flex-1 min-w-0">
+                    {getStatusIcon(doc.status)}
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium truncate">{doc.name}</p>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <span className="truncate">{doc.sessionName}</span>
+                        {doc.processedAt && (
+                          <>
+                            <span>•</span>
+                            <span>{formatDate(doc.processedAt)}</span>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-3">
+                    {getStatusBadge(doc.status)}
+                    {doc.status === 'completed' && doc.path && (
+                      <Button
+                        variant="ghost"
+                        size="xs"
+                        icon={<FileText className="w-4 h-4" />}
+                        onClick={() => handleOpenDocument(doc.path)}
+                        title="Open document in Word"
+                        className="text-green-600 hover:text-green-700 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-950"
+                      >
+                        Open Document
+                      </Button>
+                    )}
+                    {doc.path && (
+                      <Button
+                        variant="ghost"
+                        size="xs"
+                        icon={<FolderOpen className="w-4 h-4" />}
+                        onClick={() => handleOpenLocation(doc.path)}
+                        title="Open file location"
+                      >
+                        Open Location
+                      </Button>
+                    )}
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}