Implement history page with real data from Drive_log API

- Removed v0 generated HistoryEntry type and mock data
- Updated HistoryView to use DriveLogEntry from our Drive_log API
- Added proper loading and error states
- Reversed log output to show latest entries first (as requested)
- Added formatFileSize utility function to utils.ts and used it for file sizes
- Updated action types and badges to match actual drive log actions
- Convert Unix timestamps to proper date formatting
- Show real user emails, file paths, and file sizes from actual drive log

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

2 files changed, 98 insertions, 147 deletions

diff --git a/frontend/history-view.tsx b/frontend/history-view.tsx
index 8cec793..2faa1c0 100644
--- a/frontend/history-view.tsx
+++ b/frontend/history-view.tsx
@@ -1,131 +1,15 @@
 "use client"
 
+import { useState, useEffect } from "react"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Badge } from "@/components/ui/badge"
-import { FileText, Folder, Trash2, Edit } from "lucide-react"
+import { FileText, Folder, Trash2, Edit, Plus } from "lucide-react"
+import { DriveLogEntry } from "@/lib/drive_types"
+import { formatFileSize } from "@/lib/utils"
 
-interface HistoryEntry {
-  id: string
-  type: "file_create" | "file_remove" | "dir_create" | "rename"
-  fileName: string
-  userEmail: string
-  timestamp: string
-  details?: string
-}
-
-const mockHistoryData: HistoryEntry[] = [
-  {
-    id: "h1",
-    type: "file_create",
-    fileName: "Database Backup and Migration Scripts - Production Environment.sql",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-16T09:30:00Z",
-  },
-  {
-    id: "h2",
-    type: "rename",
-    fileName: "Configuration Files and System Settings - Development Environment Setup.txt",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-16T09:25:00Z",
-    details: "Renamed from 'config.txt'",
-  },
-  {
-    id: "h3",
-    type: "file_create",
-    fileName: "E-commerce Platform with React and Node.js - Full Stack Implementation.zip",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-16T08:35:00Z",
-  },
-  {
-    id: "h4",
-    type: "dir_create",
-    fileName: "Web Applications and Frontend Projects",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-16T08:30:00Z",
-  },
-  {
-    id: "h5",
-    type: "file_create",
-    fileName: "Dashboard Analytics Tool with Real-time Data Visualization Components.zip",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-15T22:10:00Z",
-  },
-  {
-    id: "h6",
-    type: "file_remove",
-    fileName: "old_backup_file.sql",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-15T20:45:00Z",
-  },
-  {
-    id: "h7",
-    type: "rename",
-    fileName: "Mobile App Development and Cross-Platform Solutions.zip",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-14T13:25:00Z",
-    details: "Renamed from 'mobile_app_v1.zip'",
-  },
-  {
-    id: "h8",
-    type: "file_create",
-    fileName: "Corporate Training Videos and Educational Content Series - Complete Collection.mp4",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-13T14:15:00Z",
-  },
-  {
-    id: "h9",
-    type: "dir_create",
-    fileName: "Video Content and Multimedia Projects",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-13T14:00:00Z",
-  },
-  {
-    id: "h10",
-    type: "file_remove",
-    fileName: "temp_presentation.pptx",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-13T11:30:00Z",
-  },
-  {
-    id: "h11",
-    type: "file_create",
-    fileName: "Professional Headshots and Corporate Event Photography - High Resolution.png",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-13T11:15:00Z",
-  },
-  {
-    id: "h12",
-    type: "rename",
-    fileName: "Travel and Vacation Photos Collection",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-12T20:50:00Z",
-    details: "Renamed from 'Vacation Photos'",
-  },
-  {
-    id: "h13",
-    type: "dir_create",
-    fileName: "Photography and Visual Content",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-12T16:00:00Z",
-  },
-  {
-    id: "h14",
-    type: "file_create",
-    fileName: "Professional Resume and Cover Letter Templates - Updated 2024.docx",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-12T12:00:00Z",
-  },
-  {
-    id: "h15",
-    type: "file_remove",
-    fileName: "draft_document.docx",
-    userEmail: "[email protected]",
-    timestamp: "2024-01-11T16:20:00Z",
-  },
-]
 
-function formatTimestamp(timestamp: string): string {
-  const date = new Date(timestamp)
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp * 1000) // Convert Unix timestamp to milliseconds
   return date.toLocaleString("en-US", {
     year: "numeric",
     month: "short",
@@ -136,49 +20,106 @@ function formatTimestamp(timestamp: string): string {
   })
 }
 
-function getActionIcon(type: HistoryEntry["type"]) {
-  switch (type) {
-    case "file_create":
+function getActionIcon(action: string) {
+  switch (action) {
+    case "create_file":
       return <FileText className="h-4 w-4 text-green-600" />
-    case "dir_create":
+    case "create_dir":
       return <Folder className="h-4 w-4 text-blue-600" />
-    case "file_remove":
+    case "remove":
       return <Trash2 className="h-4 w-4 text-red-600" />
-    case "rename":
-      return <Edit className="h-4 w-4 text-orange-600" />
+    default:
+      return <Plus className="h-4 w-4 text-gray-600" />
   }
 }
 
-function getActionBadge(type: HistoryEntry["type"]) {
-  switch (type) {
-    case "file_create":
+function getActionBadge(action: string) {
+  switch (action) {
+    case "create_file":
       return (
         <Badge variant="outline" className="text-green-700 border-green-300 bg-green-50">
           File Created
         </Badge>
       )
-    case "dir_create":
+    case "create_dir":
       return (
         <Badge variant="outline" className="text-blue-700 border-blue-300 bg-blue-50">
           Directory Created
         </Badge>
       )
-    case "file_remove":
+    case "remove":
       return (
         <Badge variant="outline" className="text-red-700 border-red-300 bg-red-50">
-          File Removed
+          File/Directory Removed
         </Badge>
       )
-    case "rename":
+    default:
       return (
-        <Badge variant="outline" className="text-orange-700 border-orange-300 bg-orange-50">
-          Renamed
+        <Badge variant="outline" className="text-gray-700 border-gray-300 bg-gray-50">
+          {action}
         </Badge>
       )
   }
 }
 
 export default function HistoryView() {
+  const [logEntries, setLogEntries] = useState<DriveLogEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchLogEntries() {
+      try {
+        setLoading(true)
+        const response = await fetch('/api/log')
+        if (!response.ok) {
+          throw new Error('Failed to fetch log entries')
+        }
+        const data: DriveLogEntry[] = await response.json()
+        // Reverse to show latest entries first
+        setLogEntries(data.reverse())
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchLogEntries()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-semibold">Activity History</h2>
+            <p className="text-sm text-muted-foreground">Recent filesystem modifications and changes</p>
+          </div>
+        </div>
+        <div className="text-center py-8">
+          <p>Loading history...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-semibold">Activity History</h2>
+            <p className="text-sm text-muted-foreground">Recent filesystem modifications and changes</p>
+          </div>
+        </div>
+        <div className="text-center py-8 text-red-600">
+          <p>Error: {error}</p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-6">
       {/* History Header */}
@@ -187,7 +128,7 @@ export default function HistoryView() {
           <h2 className="text-xl font-semibold">Activity History</h2>
           <p className="text-sm text-muted-foreground">Recent filesystem modifications and changes</p>
         </div>
-        <Badge variant="secondary">{mockHistoryData.length} total entries</Badge>
+        <Badge variant="secondary">{logEntries.length} total entries</Badge>
       </div>
 
       {/* History Table */}
@@ -200,25 +141,27 @@ export default function HistoryView() {
               <TableHead>File/Directory Name</TableHead>
               <TableHead>User</TableHead>
               <TableHead>Timestamp</TableHead>
-              <TableHead>Details</TableHead>
+              <TableHead>Size</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {mockHistoryData.map((entry) => (
-              <TableRow key={entry.id} className="hover:bg-muted/50">
-                <TableCell>{getActionIcon(entry.type)}</TableCell>
-                <TableCell>{getActionBadge(entry.type)}</TableCell>
+            {logEntries.map((entry) => (
+              <TableRow key={`${entry.log_id}`} className="hover:bg-muted/50">
+                <TableCell>{getActionIcon(entry.action)}</TableCell>
+                <TableCell>{getActionBadge(entry.action)}</TableCell>
                 <TableCell className="font-medium">
-                  <span className="break-words">{entry.fileName}</span>
+                  <span className="break-words">{entry.path}</span>
                 </TableCell>
                 <TableCell>
-                  <span className="text-sm font-mono">{entry.userEmail}</span>
+                  <span className="text-sm font-mono">{entry.email}</span>
                 </TableCell>
                 <TableCell>
                   <span className="text-sm">{formatTimestamp(entry.timestamp)}</span>
                 </TableCell>
                 <TableCell>
-                  <span className="text-sm text-muted-foreground">{entry.details || "—"}</span>
+                  <span className="text-sm text-muted-foreground">
+                    {entry.size ? formatFileSize(entry.size) : "—"}
+                  </span>
                 </TableCell>
               </TableRow>
             ))}
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index bd0c391..200e3e7 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -4,3 +4,11 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes"
+  const k = 1024
+  const sizes = ["Bytes", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+}