Create web/src/app/page.tsx

web/src/app/page.tsx

@@ -0,0 +1,211 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import {
+  Plus, Upload, Grid, List, Search, Filter,
+  Download, Trash2, Share2, Clock, Image,
+  Video, FileText, Settings, CreditCard
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { ProjectCard } from '@/components/dashboard/project-card'
+import { StatsCard } from '@/components/dashboard/stats-card'
+import { UsageChart } from '@/components/dashboard/usage-chart'
+import { QuickActions } from '@/components/dashboard/quick-actions'
+import { useProjects } from '@/lib/hooks/use-projects'
+import { formatDate } from '@/lib/utils'
+
+export default function DashboardPage() {
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
+  const [searchQuery, setSearchQuery] = useState('')
+  const { projects, isLoading } = useProjects()
+
+  const stats = [
+    {
+      title: 'Images Processed',
+      value: '1,234',
+      change: '+12%',
+      icon: <Image className="w-5 h-5" />,
+    },
+    {
+      title: 'Videos Processed',
+      value: '56',
+      change: '+8%',
+      icon: <Video className="w-5 h-5" />,
+    },
+    {
+      title: 'Storage Used',
+      value: '2.4 GB',
+      change: '+5%',
+      icon: <FileText className="w-5 h-5" />,
+    },
+    {
+      title: 'API Calls',
+      value: '8,901',
+      change: '+23%',
+      icon: <Clock className="w-5 h-5" />,
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-gray-900">
+      {/* Header */}
+      <header className="border-b border-gray-800 bg-gray-900/95 backdrop-blur sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center gap-8">
+              <Link href="/" className="text-xl font-semibold text-white">
+                BackgroundFX Pro
+              </Link>
+              <nav className="hidden md:flex items-center gap-6">
+                <Link href="/dashboard" className="text-white">
+                  Dashboard
+                </Link>
+                <Link href="/editor" className="text-gray-400 hover:text-white">
+                  Editor
+                </Link>
+                <Link href="/dashboard/projects" className="text-gray-400 hover:text-white">
+                  Projects
+                </Link>
+              </nav>
+            </div>
+            
+            <div className="flex items-center gap-4">
+              <Button variant="ghost" size="sm">
+                <Settings className="w-4 h-4" />
+              </Button>
+              <Button variant="ghost" size="sm">
+                <CreditCard className="w-4 h-4" />
+              </Button>
+              <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-400 to-pink-600" />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Welcome Section */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-white mb-2">
+            Welcome back, John!
+          </h1>
+          <p className="text-gray-400">
+            Here's what's happening with your projects today.
+          </p>
+        </div>
+
+        {/* Quick Actions */}
+        <QuickActions />
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          {stats.map((stat) => (
+            <StatsCard key={stat.title} {...stat} />
+          ))}
+        </div>
+
+        {/* Usage Chart */}
+        <div className="bg-gray-800 rounded-xl p-6 mb-8">
+          <h2 className="text-lg font-semibold text-white mb-4">
+            Usage Overview
+          </h2>
+          <UsageChart />
+        </div>
+
+        {/* Projects Section */}
+        <div className="bg-gray-800 rounded-xl p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-lg font-semibold text-white">
+              Recent Projects
+            </h2>
+            
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Input
+                  type="search"
+                  placeholder="Search projects..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 w-64"
+                />
+              </div>
+              
+              <Button variant="outline" size="sm">
+                <Filter className="w-4 h-4 mr-2" />
+                Filter
+              </Button>
+              
+              <div className="flex items-center border border-gray-700 rounded-lg">
+                <Button
+                  variant={viewMode === 'grid' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setViewMode('grid')}
+                  className="rounded-r-none"
+                >
+                  <Grid className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant={viewMode === 'list' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setViewMode('list')}
+                  className="rounded-l-none"
+                >
+                  <List className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <Tabs defaultValue="all" className="w-full">
+            <TabsList>
+              <TabsTrigger value="all">All</TabsTrigger>
+              <TabsTrigger value="images">Images</TabsTrigger>
+              <TabsTrigger value="videos">Videos</TabsTrigger>
+              <TabsTrigger value="batch">Batch</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="all" className="mt-6">
+              {isLoading ? (
+                <div className="text-center py-12">
+                  <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+                </div>
+              ) : (
+                <div className={
+                  viewMode === 'grid' 
+                    ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
+                    : 'space-y-4'
+                }>
+                  {projects?.map((project) => (
+                    <ProjectCard
+                      key={project.id}
+                      project={project}
+                      viewMode={viewMode}
+                    />
+                  ))}
+                </div>
+              )}
+              
+              {!isLoading && projects?.length === 0 && (
+                <div className="text-center py-12">
+                  <Image className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+                  <p className="text-gray-400 mb-4">No projects yet</p>
+                  <Link href="/editor">
+                    <Button>
+                      <Plus className="w-4 h-4 mr-2" />
+                      Create First Project
+                    </Button>
+                  </Link>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        </div>
+      </main>
+    </div>
+  )
+}