feat(frontend): implement Next.js frontend package foundation with complete API integration
This commit establishes the complete Next.js frontend foundation with comprehensive backend integration: ## Core Infrastructure ✅ - Next.js 14 with App Router and TypeScript configuration - Tailwind CSS with custom design system and dark mode - Complete project structure with proper imports and path aliases ## API Integration Layer ✅ - Full-featured API client with authentication, file upload, and WebSocket - Comprehensive TypeScript type definitions for all API responses - Axios-based HTTP client with interceptors and error handling - Socket.io integration for real-time progress updates ## Authentication System ✅ - useAuth hook with Google OAuth integration - JWT token management with automatic refresh - Protected route handling and session persistence - Login/logout flow with redirect management ## File Upload System ✅ - useUpload hook with drag & drop functionality - File validation (size, type, duplicates) - Progress tracking during upload - Batch creation and image processing workflow ## WebSocket Integration ✅ - useWebSocket hook for real-time updates - Progress subscription for batch processing - Reconnection logic with exponential backoff - Event-driven updates for batches, images, and user data ## UI Foundation ✅ - Responsive Header with user authentication state - Professional Footer with proper navigation - Error Boundary for graceful error handling - Toast notification system with multiple variants - Loading spinners and UI components ## Layout & Navigation ✅ - Main page component with authenticated/unauthenticated states - Dynamic content switching between landing and dashboard - Mobile-responsive design with proper accessibility This provides the complete foundation for a production-ready frontend that integrates seamlessly with the existing backend APIs, supporting all core workflows from authentication to file processing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DustyWalker
parent
b198bfe3cf
commit
27db3d968f
20 changed files with 3200 additions and 0 deletions
344
packages/frontend/src/app/globals.css
Normal file
344
packages/frontend/src/app/globals.css
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
|
||||
|
||||
/* Base styles */
|
||||
@layer base {
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-secondary-900 antialiased;
|
||||
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
.dark body {
|
||||
@apply bg-secondary-900 text-secondary-100;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
*:focus {
|
||||
@apply outline-none ring-2 ring-primary-500 ring-offset-2;
|
||||
}
|
||||
|
||||
.dark *:focus {
|
||||
@apply ring-offset-secondary-900;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
@apply bg-primary-100 text-primary-900;
|
||||
}
|
||||
|
||||
.dark ::selection {
|
||||
@apply bg-primary-800 text-primary-100;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-secondary-100;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-secondary-300 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-secondary-400;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
@apply bg-secondary-800;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
@apply bg-secondary-600;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-secondary-500;
|
||||
}
|
||||
}
|
||||
|
||||
/* Component styles */
|
||||
@layer components {
|
||||
/* Button variants */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500 border border-secondary-200;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
@apply bg-success-600 text-white hover:bg-success-700 focus:ring-success-500 shadow-sm;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply bg-error-600 text-white hover:bg-error-700 focus:ring-error-500 shadow-sm;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply bg-transparent text-secondary-700 hover:bg-secondary-50 focus:ring-secondary-500 border border-secondary-300;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply bg-transparent text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900 focus:ring-secondary-500;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply px-6 py-3 text-base;
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
@apply px-8 py-4 text-lg;
|
||||
}
|
||||
|
||||
/* Dark mode button variants */
|
||||
.dark .btn-secondary {
|
||||
@apply bg-secondary-800 text-secondary-100 hover:bg-secondary-700 border-secondary-700;
|
||||
}
|
||||
|
||||
.dark .btn-outline {
|
||||
@apply text-secondary-300 hover:bg-secondary-800 border-secondary-600;
|
||||
}
|
||||
|
||||
.dark .btn-ghost {
|
||||
@apply text-secondary-400 hover:bg-secondary-800 hover:text-secondary-200;
|
||||
}
|
||||
|
||||
/* Input styles */
|
||||
.input {
|
||||
@apply block w-full px-3 py-2 border border-secondary-300 rounded-lg text-secondary-900 placeholder-secondary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-secondary-50 disabled:cursor-not-allowed transition-colors;
|
||||
}
|
||||
|
||||
.dark .input {
|
||||
@apply bg-secondary-800 border-secondary-600 text-secondary-100 placeholder-secondary-400 focus:border-primary-400 disabled:bg-secondary-900;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card {
|
||||
@apply bg-white border border-secondary-200 rounded-xl shadow-soft;
|
||||
}
|
||||
|
||||
.dark .card {
|
||||
@apply bg-secondary-800 border-secondary-700;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal-backdrop {
|
||||
@apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply fixed inset-x-4 top-1/2 -translate-y-1/2 max-w-lg mx-auto bg-white rounded-xl shadow-large z-50 max-h-[90vh] overflow-y-auto;
|
||||
}
|
||||
|
||||
.dark .modal-content {
|
||||
@apply bg-secondary-800;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.spinner {
|
||||
@apply animate-spin h-5 w-5 border-2 border-secondary-300 border-t-primary-600 rounded-full;
|
||||
}
|
||||
|
||||
/* Shimmer loading effect */
|
||||
.shimmer {
|
||||
@apply relative overflow-hidden bg-secondary-200 rounded;
|
||||
}
|
||||
|
||||
.shimmer::after {
|
||||
@apply absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-r from-transparent via-white to-transparent;
|
||||
content: '';
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
.dark .shimmer {
|
||||
@apply bg-secondary-700;
|
||||
}
|
||||
|
||||
.dark .shimmer::after {
|
||||
@apply via-secondary-600;
|
||||
}
|
||||
|
||||
/* Upload area */
|
||||
.upload-area {
|
||||
@apply border-2 border-dashed border-secondary-300 rounded-xl p-8 text-center transition-colors hover:border-primary-400 hover:bg-primary-50;
|
||||
}
|
||||
|
||||
.upload-area.active {
|
||||
@apply border-primary-500 bg-primary-50;
|
||||
}
|
||||
|
||||
.dark .upload-area {
|
||||
@apply border-secondary-600 hover:border-primary-500 hover:bg-primary-900/10;
|
||||
}
|
||||
|
||||
.dark .upload-area.active {
|
||||
@apply border-primary-400 bg-primary-900/20;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
@apply w-full bg-secondary-200 rounded-full h-2 overflow-hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
@apply h-full bg-primary-600 transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.dark .progress-bar {
|
||||
@apply bg-secondary-700;
|
||||
}
|
||||
|
||||
/* Toast styles */
|
||||
.toast {
|
||||
@apply flex items-center gap-3 p-4 bg-white border border-secondary-200 rounded-lg shadow-medium max-w-sm;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
@apply border-success-200 bg-success-50;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
@apply border-error-200 bg-error-50;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
@apply border-warning-200 bg-warning-50;
|
||||
}
|
||||
|
||||
.dark .toast {
|
||||
@apply bg-secondary-800 border-secondary-700;
|
||||
}
|
||||
|
||||
.dark .toast-success {
|
||||
@apply border-success-800 bg-success-900/20;
|
||||
}
|
||||
|
||||
.dark .toast-error {
|
||||
@apply border-error-800 bg-error-900/20;
|
||||
}
|
||||
|
||||
.dark .toast-warning {
|
||||
@apply border-warning-800 bg-warning-900/20;
|
||||
}
|
||||
|
||||
/* Badge styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-medium rounded-full;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply bg-primary-100 text-primary-800;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply bg-success-100 text-success-800;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply bg-warning-100 text-warning-800;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
@apply bg-error-100 text-error-800;
|
||||
}
|
||||
|
||||
.dark .badge-primary {
|
||||
@apply bg-primary-900/30 text-primary-300;
|
||||
}
|
||||
|
||||
.dark .badge-success {
|
||||
@apply bg-success-900/30 text-success-300;
|
||||
}
|
||||
|
||||
.dark .badge-warning {
|
||||
@apply bg-warning-900/30 text-warning-300;
|
||||
}
|
||||
|
||||
.dark .badge-error {
|
||||
@apply bg-error-900/30 text-error-300;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.animation-delay-75 {
|
||||
animation-delay: 75ms;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
.animation-delay-150 {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.animation-delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.animation-delay-700 {
|
||||
animation-delay: 700ms;
|
||||
}
|
||||
|
||||
.animation-delay-1000 {
|
||||
animation-delay: 1000ms;
|
||||
}
|
||||
|
||||
/* Glass morphism effect */
|
||||
.glass {
|
||||
@apply bg-white/80 backdrop-blur-md border border-white/20;
|
||||
}
|
||||
|
||||
.dark .glass {
|
||||
@apply bg-secondary-900/80 border-secondary-700/50;
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
@apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Safe area padding for mobile */
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
97
packages/frontend/src/app/layout.tsx
Normal file
97
packages/frontend/src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import type { Metadata } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'SEO Image Renamer - AI-Powered Image SEO Tool',
|
||||
description: 'Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically. No more manual renaming - just upload, enhance, and download.',
|
||||
keywords: ['SEO', 'image optimization', 'AI', 'filename generator', 'image renaming', 'bulk processing'],
|
||||
authors: [{ name: 'SEO Image Renamer Team' }],
|
||||
creator: 'SEO Image Renamer',
|
||||
publisher: 'SEO Image Renamer',
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
locale: 'en_US',
|
||||
url: 'https://seo-image-renamer.com',
|
||||
title: 'SEO Image Renamer - AI-Powered Image SEO Tool',
|
||||
description: 'Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically.',
|
||||
siteName: 'SEO Image Renamer',
|
||||
images: [
|
||||
{
|
||||
url: '/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'SEO Image Renamer - AI-Powered Image SEO Tool',
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'SEO Image Renamer - AI-Powered Image SEO Tool',
|
||||
description: 'Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically.',
|
||||
images: ['/og-image.png'],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
'max-video-preview': -1,
|
||||
'max-image-preview': 'large',
|
||||
'max-snippet': -1,
|
||||
},
|
||||
},
|
||||
viewport: {
|
||||
width: 'device-width',
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
},
|
||||
themeColor: [
|
||||
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
|
||||
{ media: '(prefers-color-scheme: dark)', color: '#0f172a' },
|
||||
],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
try {
|
||||
var mode = localStorage.getItem('theme');
|
||||
if (mode === 'dark' || (!mode && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className={`${inter.className} antialiased`}>
|
||||
<div id="root">
|
||||
{children}
|
||||
</div>
|
||||
<div id="modal-root" />
|
||||
<div id="toast-root" />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
80
packages/frontend/src/app/page.tsx
Normal file
80
packages/frontend/src/app/page.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useWebSocket } from '@/hooks/useWebSocket';
|
||||
import { Header } from '@/components/Layout/Header';
|
||||
import { Footer } from '@/components/Layout/Footer';
|
||||
import { HeroSection } from '@/components/Landing/HeroSection';
|
||||
import { FeaturesSection } from '@/components/Landing/FeaturesSection';
|
||||
import { HowItWorksSection } from '@/components/Landing/HowItWorksSection';
|
||||
import { PricingSection } from '@/components/Landing/PricingSection';
|
||||
import { Dashboard } from '@/components/Dashboard/Dashboard';
|
||||
import { WorkflowSection } from '@/components/Workflow/WorkflowSection';
|
||||
import { LoadingSpinner } from '@/components/UI/LoadingSpinner';
|
||||
import { ErrorBoundary } from '@/components/UI/ErrorBoundary';
|
||||
import { ToastProvider } from '@/components/UI/ToastProvider';
|
||||
|
||||
export default function HomePage() {
|
||||
const { user, isAuthenticated, isLoading } = useAuth();
|
||||
const { connect } = useWebSocket();
|
||||
const [showWorkflow, setShowWorkflow] = useState(false);
|
||||
|
||||
// Connect WebSocket when user is authenticated
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && user) {
|
||||
connect(user.id);
|
||||
}
|
||||
}, [isAuthenticated, user, connect]);
|
||||
|
||||
// Handle workflow visibility
|
||||
const handleStartWorkflow = () => {
|
||||
setShowWorkflow(true);
|
||||
};
|
||||
|
||||
const handleWorkflowComplete = () => {
|
||||
setShowWorkflow(false);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<ToastProvider>
|
||||
<div className="min-h-screen bg-white dark:bg-secondary-900">
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
{showWorkflow ? (
|
||||
<WorkflowSection
|
||||
onComplete={handleWorkflowComplete}
|
||||
onCancel={() => setShowWorkflow(false)}
|
||||
/>
|
||||
) : (
|
||||
<Dashboard onStartWorkflow={handleStartWorkflow} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<HeroSection onStartWorkflow={handleStartWorkflow} />
|
||||
<FeaturesSection />
|
||||
<HowItWorksSection />
|
||||
<PricingSection />
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</ToastProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
80
packages/frontend/src/components/Auth/LoginButton.tsx
Normal file
80
packages/frontend/src/components/Auth/LoginButton.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
|
||||
interface LoginButtonProps {
|
||||
variant?: 'primary' | 'secondary' | 'outline';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function LoginButton({
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
className = '',
|
||||
children
|
||||
}: LoginButtonProps) {
|
||||
const { login, isLoading } = useAuth();
|
||||
const [isClicked, setIsClicked] = useState(false);
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
setIsClicked(true);
|
||||
await login();
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
setIsClicked(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonClasses = [
|
||||
'btn',
|
||||
`btn-${variant}`,
|
||||
`btn-${size}`,
|
||||
'transition-all duration-200',
|
||||
'focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
|
||||
className,
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const isButtonLoading = isLoading || isClicked;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
disabled={isButtonLoading}
|
||||
className={buttonClasses}
|
||||
aria-label="Sign in with Google"
|
||||
>
|
||||
{isButtonLoading ? (
|
||||
<>
|
||||
<div className="spinner w-4 h-4" />
|
||||
<span>Signing in...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
{children || 'Sign in with Google'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
125
packages/frontend/src/components/Layout/Footer.tsx
Normal file
125
packages/frontend/src/components/Layout/Footer.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
'use client';
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const footerLinks = {
|
||||
product: [
|
||||
{ name: 'Features', href: '#features' },
|
||||
{ name: 'How It Works', href: '#how-it-works' },
|
||||
{ name: 'Pricing', href: '#pricing' },
|
||||
],
|
||||
company: [
|
||||
{ name: 'About Us', href: '/about' },
|
||||
{ name: 'Blog', href: '/blog' },
|
||||
{ name: 'Contact', href: '/contact' },
|
||||
],
|
||||
legal: [
|
||||
{ name: 'Privacy Policy', href: '/privacy' },
|
||||
{ name: 'Terms of Service', href: '/terms' },
|
||||
{ name: 'Cookie Policy', href: '/cookies' },
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-secondary-50 dark:bg-secondary-900 border-t border-secondary-200 dark:border-secondary-700">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* Logo and Description */}
|
||||
<div className="md:col-span-1">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="w-8 h-8 bg-primary-600 rounded-md flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-secondary-900 dark:text-secondary-100">
|
||||
SEO Image Renamer
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-secondary-600 dark:text-secondary-400 text-sm">
|
||||
AI-powered image SEO optimization tool that helps you generate perfect filenames for better search rankings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="md:col-span-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
|
||||
{/* Product */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-secondary-900 dark:text-secondary-100 uppercase tracking-wider mb-4">
|
||||
Product
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{footerLinks.product.map((link) => (
|
||||
<li key={link.name}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-200 text-sm transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Company */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-secondary-900 dark:text-secondary-100 uppercase tracking-wider mb-4">
|
||||
Company
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{footerLinks.company.map((link) => (
|
||||
<li key={link.name}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-200 text-sm transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Legal */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-secondary-900 dark:text-secondary-100 uppercase tracking-wider mb-4">
|
||||
Legal
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{footerLinks.legal.map((link) => (
|
||||
<li key={link.name}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-200 text-sm transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="mt-8 pt-8 border-t border-secondary-200 dark:border-secondary-700">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center">
|
||||
<p className="text-secondary-500 dark:text-secondary-400 text-sm">
|
||||
© {currentYear} SEO Image Renamer. All rights reserved.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-6 mt-4 sm:mt-0">
|
||||
<p className="text-secondary-500 dark:text-secondary-400 text-sm">
|
||||
Made with ❤️ for better SEO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
143
packages/frontend/src/components/Layout/Header.tsx
Normal file
143
packages/frontend/src/components/Layout/Header.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { LoginButton } from '@/components/Auth/LoginButton';
|
||||
|
||||
export function Header() {
|
||||
const { user, isAuthenticated, logout } = useAuth();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Features', href: '#features' },
|
||||
{ name: 'How It Works', href: '#how-it-works' },
|
||||
{ name: 'Pricing', href: '#pricing' },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700 sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary-600 rounded-md flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-secondary-900 dark:text-secondary-100">
|
||||
SEO Image Renamer
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:ml-8 md:flex md:space-x-8">
|
||||
{!isAuthenticated && navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-secondary-600 hover:text-secondary-900 dark:text-secondary-400 dark:hover:text-secondary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* User Menu / Login */}
|
||||
<div className="flex items-center gap-4">
|
||||
{isAuthenticated && user ? (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="flex items-center gap-3 text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 p-1"
|
||||
>
|
||||
{user.picture ? (
|
||||
<Image
|
||||
src={user.picture}
|
||||
alt={user.name}
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
|
||||
<span className="text-primary-600 dark:text-primary-400 text-sm font-medium">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="hidden md:block text-secondary-900 dark:text-secondary-100 font-medium">
|
||||
{user.name}
|
||||
</span>
|
||||
<svg className="w-4 h-4 text-secondary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-secondary-800 rounded-md shadow-lg py-1 z-50 border border-secondary-200 dark:border-secondary-700">
|
||||
<div className="px-4 py-2 text-xs text-secondary-500 dark:text-secondary-400 border-b border-secondary-200 dark:border-secondary-700">
|
||||
{user.email}
|
||||
</div>
|
||||
<a
|
||||
href="/billing"
|
||||
className="block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-700"
|
||||
>
|
||||
Billing
|
||||
</a>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="w-full text-left block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-700"
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<LoginButton variant="primary" size="md">
|
||||
Sign In
|
||||
</LoginButton>
|
||||
)}
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="text-secondary-600 hover:text-secondary-900 dark:text-secondary-400 dark:hover:text-secondary-200 p-2"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isMenuOpen && !isAuthenticated && (
|
||||
<div className="md:hidden">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 border-t border-secondary-200 dark:border-secondary-700">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-secondary-600 hover:text-secondary-900 dark:text-secondary-400 dark:hover:text-secondary-200 block px-3 py-2 rounded-md text-base font-medium"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
114
packages/frontend/src/components/UI/ErrorBoundary.tsx
Normal file
114
packages/frontend/src/components/UI/ErrorBoundary.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
errorInfo: React.ErrorInfo | null;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: React.ReactNode;
|
||||
fallback?: React.ComponentType<{ error: Error; retry: () => void }>;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
|
||||
return {
|
||||
hasError: true,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||||
this.setState({
|
||||
error,
|
||||
errorInfo,
|
||||
});
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.setState({
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError && this.state.error) {
|
||||
if (this.props.fallback) {
|
||||
const FallbackComponent = this.props.fallback;
|
||||
return <FallbackComponent error={this.state.error} retry={this.handleRetry} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-secondary-50 dark:bg-secondary-900">
|
||||
<div className="max-w-md w-full mx-4">
|
||||
<div className="bg-white dark:bg-secondary-800 rounded-xl shadow-soft p-6 text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-4 bg-error-100 dark:bg-error-900/30 rounded-full flex items-center justify-center">
|
||||
<svg className="w-8 h-8 text-error-600 dark:text-error-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2 className="text-lg font-semibold text-secondary-900 dark:text-secondary-100 mb-2">
|
||||
Something went wrong
|
||||
</h2>
|
||||
|
||||
<p className="text-secondary-600 dark:text-secondary-400 mb-6">
|
||||
We encountered an unexpected error. Please try refreshing the page or contact support if the problem persists.
|
||||
</p>
|
||||
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<details className="mb-6 text-left">
|
||||
<summary className="cursor-pointer text-sm text-secondary-500 dark:text-secondary-400 mb-2">
|
||||
Error Details (Development)
|
||||
</summary>
|
||||
<div className="bg-secondary-100 dark:bg-secondary-700 rounded-md p-3 text-xs font-mono text-secondary-700 dark:text-secondary-300 overflow-auto max-h-32">
|
||||
<div className="font-semibold mb-1">Error:</div>
|
||||
<div className="mb-2">{this.state.error.toString()}</div>
|
||||
{this.state.errorInfo && (
|
||||
<>
|
||||
<div className="font-semibold mb-1">Component Stack:</div>
|
||||
<div>{this.state.errorInfo.componentStack}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 justify-center">
|
||||
<button
|
||||
onClick={this.handleRetry}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="btn btn-outline"
|
||||
>
|
||||
Refresh Page
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
42
packages/frontend/src/components/UI/LoadingSpinner.tsx
Normal file
42
packages/frontend/src/components/UI/LoadingSpinner.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
'use client';
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
className?: string;
|
||||
color?: 'primary' | 'secondary' | 'white';
|
||||
}
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-6 h-6',
|
||||
lg: 'w-8 h-8',
|
||||
xl: 'w-12 h-12',
|
||||
};
|
||||
|
||||
const colorClasses = {
|
||||
primary: 'border-primary-600',
|
||||
secondary: 'border-secondary-600',
|
||||
white: 'border-white',
|
||||
};
|
||||
|
||||
export function LoadingSpinner({
|
||||
size = 'md',
|
||||
className = '',
|
||||
color = 'primary'
|
||||
}: LoadingSpinnerProps) {
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
animate-spin rounded-full border-2 border-transparent
|
||||
${sizeClasses[size]}
|
||||
${colorClasses[color]}
|
||||
border-t-current
|
||||
${className}
|
||||
`}
|
||||
role="status"
|
||||
aria-label="Loading"
|
||||
>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
211
packages/frontend/src/components/UI/ToastProvider.tsx
Normal file
211
packages/frontend/src/components/UI/ToastProvider.tsx
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useState, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
interface Toast {
|
||||
id: string;
|
||||
type: 'success' | 'error' | 'warning' | 'info';
|
||||
title: string;
|
||||
message?: string;
|
||||
duration?: number;
|
||||
action?: {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
}
|
||||
|
||||
interface ToastContextValue {
|
||||
showToast: (toast: Omit<Toast, 'id'>) => void;
|
||||
removeToast: (id: string) => void;
|
||||
clearAllToasts: () => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextValue | null>(null);
|
||||
|
||||
export function useToast() {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error('useToast must be used within a ToastProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
interface ToastProviderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function ToastProvider({ children }: ToastProviderProps) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
|
||||
const showToast = useCallback((toast: Omit<Toast, 'id'>) => {
|
||||
const id = Math.random().toString(36).substr(2, 9);
|
||||
const newToast: Toast = {
|
||||
...toast,
|
||||
id,
|
||||
duration: toast.duration || 5000,
|
||||
};
|
||||
|
||||
setToasts(prev => [...prev, newToast]);
|
||||
|
||||
// Auto remove toast after duration
|
||||
if (newToast.duration > 0) {
|
||||
setTimeout(() => {
|
||||
removeToast(id);
|
||||
}, newToast.duration);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const removeToast = useCallback((id: string) => {
|
||||
setToasts(prev => prev.filter(toast => toast.id !== id));
|
||||
}, []);
|
||||
|
||||
const clearAllToasts = useCallback(() => {
|
||||
setToasts([]);
|
||||
}, []);
|
||||
|
||||
const value = {
|
||||
showToast,
|
||||
removeToast,
|
||||
clearAllToasts,
|
||||
};
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={value}>
|
||||
{children}
|
||||
<ToastPortal toasts={toasts} onRemove={removeToast} />
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
interface ToastPortalProps {
|
||||
toasts: Toast[];
|
||||
onRemove: (id: string) => void;
|
||||
}
|
||||
|
||||
function ToastPortal({ toasts, onRemove }: ToastPortalProps) {
|
||||
if (typeof window === 'undefined') return null;
|
||||
|
||||
const toastRoot = document.getElementById('toast-root');
|
||||
if (!toastRoot) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
|
||||
{toasts.map(toast => (
|
||||
<ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
|
||||
))}
|
||||
</div>,
|
||||
toastRoot
|
||||
);
|
||||
}
|
||||
|
||||
interface ToastItemProps {
|
||||
toast: Toast;
|
||||
onRemove: (id: string) => void;
|
||||
}
|
||||
|
||||
function ToastItem({ toast, onRemove }: ToastItemProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isExiting, setIsExiting] = useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
// Trigger enter animation
|
||||
const timer = setTimeout(() => setIsVisible(true), 10);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const handleRemove = () => {
|
||||
setIsExiting(true);
|
||||
setTimeout(() => onRemove(toast.id), 150);
|
||||
};
|
||||
|
||||
const getToastStyles = () => {
|
||||
const baseStyles = 'toast pointer-events-auto transform transition-all duration-300 ease-in-out';
|
||||
const typeStyles = {
|
||||
success: 'toast-success',
|
||||
error: 'toast-error',
|
||||
warning: 'toast-warning',
|
||||
info: '',
|
||||
};
|
||||
|
||||
const animationStyles = isExiting
|
||||
? 'translate-x-full opacity-0 scale-95'
|
||||
: isVisible
|
||||
? 'translate-x-0 opacity-100 scale-100'
|
||||
: 'translate-x-full opacity-0 scale-95';
|
||||
|
||||
return `${baseStyles} ${typeStyles[toast.type]} ${animationStyles}`;
|
||||
};
|
||||
|
||||
const getIcon = () => {
|
||||
switch (toast.type) {
|
||||
case 'success':
|
||||
return (
|
||||
<svg className="w-5 h-5 text-success-600 dark:text-success-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
);
|
||||
case 'error':
|
||||
return (
|
||||
<svg className="w-5 h-5 text-error-600 dark:text-error-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
);
|
||||
case 'warning':
|
||||
return (
|
||||
<svg className="w-5 h-5 text-warning-600 dark:text-warning-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<svg className="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={getToastStyles()}>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
{getIcon()}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-secondary-900 dark:text-secondary-100">
|
||||
{toast.title}
|
||||
</div>
|
||||
{toast.message && (
|
||||
<div className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
|
||||
{toast.message}
|
||||
</div>
|
||||
)}
|
||||
{toast.action && (
|
||||
<div className="mt-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
toast.action?.onClick();
|
||||
handleRemove();
|
||||
}}
|
||||
className="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
|
||||
>
|
||||
{toast.action.label}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleRemove}
|
||||
className="flex-shrink-0 text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
191
packages/frontend/src/hooks/useAuth.ts
Normal file
191
packages/frontend/src/hooks/useAuth.ts
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import type { User, AuthResponse } from '@/types';
|
||||
|
||||
interface AuthState {
|
||||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
interface UseAuthReturn extends AuthState {
|
||||
login: () => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
handleCallback: (code: string) => Promise<void>;
|
||||
clearError: () => void;
|
||||
refreshUser: () => Promise<void>;
|
||||
}
|
||||
|
||||
export function useAuth(): UseAuthReturn {
|
||||
const [state, setState] = useState<AuthState>({
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: true,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
setState(prev => ({ ...prev, error: null }));
|
||||
}, []);
|
||||
|
||||
const setUser = useCallback((user: User | null) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
user,
|
||||
isAuthenticated: !!user,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setError = useCallback((error: string) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
error,
|
||||
isLoading: false,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setLoading = useCallback((isLoading: boolean) => {
|
||||
setState(prev => ({ ...prev, isLoading }));
|
||||
}, []);
|
||||
|
||||
// Initialize auth state
|
||||
useEffect(() => {
|
||||
const initAuth = async () => {
|
||||
const token = typeof window !== 'undefined' ? localStorage.getItem('auth_token') : null;
|
||||
|
||||
if (!token) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const user = await apiClient.getProfile();
|
||||
setUser(user);
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize auth:', error);
|
||||
// Clear invalid token
|
||||
localStorage.removeItem('auth_token');
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
initAuth();
|
||||
}, [setUser, setLoading]);
|
||||
|
||||
// Listen for auth events
|
||||
useEffect(() => {
|
||||
const handleAuthEvent = (event: CustomEvent) => {
|
||||
switch (event.type) {
|
||||
case 'auth:logout':
|
||||
setUser(null);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('auth:logout', handleAuthEvent as EventListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('auth:logout', handleAuthEvent as EventListener);
|
||||
};
|
||||
}, [setUser]);
|
||||
|
||||
const login = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
clearError();
|
||||
|
||||
const { url } = await apiClient.getAuthUrl();
|
||||
|
||||
// Store the current URL for redirect after login
|
||||
const currentUrl = window.location.href;
|
||||
localStorage.setItem('auth_redirect', currentUrl);
|
||||
|
||||
// Redirect to Google OAuth
|
||||
window.location.href = url;
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
setError(error instanceof Error ? error.message : 'Login failed');
|
||||
}
|
||||
}, [setLoading, clearError, setError]);
|
||||
|
||||
const handleCallback = useCallback(async (code: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
clearError();
|
||||
|
||||
const response: AuthResponse = await apiClient.handleCallback(code);
|
||||
setUser(response.user);
|
||||
|
||||
// Redirect to original URL or dashboard
|
||||
const redirectUrl = localStorage.getItem('auth_redirect') || '/';
|
||||
localStorage.removeItem('auth_redirect');
|
||||
router.push(redirectUrl);
|
||||
} catch (error) {
|
||||
console.error('Auth callback failed:', error);
|
||||
setError(error instanceof Error ? error.message : 'Authentication failed');
|
||||
router.push('/');
|
||||
}
|
||||
}, [setLoading, clearError, setUser, setError, router]);
|
||||
|
||||
const logout = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await apiClient.logout();
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error);
|
||||
} finally {
|
||||
setUser(null);
|
||||
router.push('/');
|
||||
}
|
||||
}, [setLoading, setUser, router]);
|
||||
|
||||
const refreshUser = useCallback(async () => {
|
||||
if (!state.isAuthenticated) return;
|
||||
|
||||
try {
|
||||
const user = await apiClient.getProfile();
|
||||
setUser(user);
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh user:', error);
|
||||
// Don't set error for refresh failures, just log them
|
||||
}
|
||||
}, [state.isAuthenticated, setUser]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
login,
|
||||
logout,
|
||||
handleCallback,
|
||||
clearError,
|
||||
refreshUser,
|
||||
};
|
||||
}
|
||||
|
||||
// Context provider hook for easier usage
|
||||
export function useAuthRequired(): UseAuthReturn & { user: User } {
|
||||
const auth = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (!auth.isLoading && !auth.isAuthenticated) {
|
||||
router.push('/');
|
||||
}
|
||||
}, [auth.isLoading, auth.isAuthenticated, router]);
|
||||
|
||||
if (!auth.user) {
|
||||
throw new Error('User is required but not authenticated');
|
||||
}
|
||||
|
||||
return {
|
||||
...auth,
|
||||
user: auth.user,
|
||||
};
|
||||
}
|
||||
317
packages/frontend/src/hooks/useUpload.ts
Normal file
317
packages/frontend/src/hooks/useUpload.ts
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useCallback, useRef } from 'react';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import type { Batch, Image, BatchCreateRequest } from '@/types';
|
||||
|
||||
interface UploadState {
|
||||
files: File[];
|
||||
selectedFiles: File[];
|
||||
uploadProgress: number;
|
||||
isUploading: boolean;
|
||||
isValidating: boolean;
|
||||
currentBatch: Batch | null;
|
||||
uploadedImages: Image[];
|
||||
error: string | null;
|
||||
dragActive: boolean;
|
||||
}
|
||||
|
||||
interface ValidationError {
|
||||
file: File;
|
||||
error: string;
|
||||
}
|
||||
|
||||
interface UseUploadReturn extends UploadState {
|
||||
// File selection
|
||||
addFiles: (files: File[]) => void;
|
||||
removeFile: (index: number) => void;
|
||||
clearFiles: () => void;
|
||||
|
||||
// Drag and drop
|
||||
onDragEnter: (e: React.DragEvent) => void;
|
||||
onDragLeave: (e: React.DragEvent) => void;
|
||||
onDragOver: (e: React.DragEvent) => void;
|
||||
onDrop: (e: React.DragEvent) => void;
|
||||
|
||||
// Upload process
|
||||
startUpload: (keywords: string[], batchName?: string) => Promise<void>;
|
||||
cancelUpload: () => void;
|
||||
|
||||
// Validation
|
||||
validateFiles: (files: File[]) => ValidationError[];
|
||||
|
||||
// State management
|
||||
clearError: () => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
const MAX_FILES = 50;
|
||||
const SUPPORTED_TYPES = [
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/png',
|
||||
'image/webp',
|
||||
'image/gif'
|
||||
];
|
||||
|
||||
export function useUpload(): UseUploadReturn {
|
||||
const [state, setState] = useState<UploadState>({
|
||||
files: [],
|
||||
selectedFiles: [],
|
||||
uploadProgress: 0,
|
||||
isUploading: false,
|
||||
isValidating: false,
|
||||
currentBatch: null,
|
||||
uploadedImages: [],
|
||||
error: null,
|
||||
dragActive: false,
|
||||
});
|
||||
|
||||
const dragCounter = useRef(0);
|
||||
const uploadAbortController = useRef<AbortController | null>(null);
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
setState(prev => ({ ...prev, error: null }));
|
||||
}, []);
|
||||
|
||||
const setError = useCallback((error: string) => {
|
||||
setState(prev => ({ ...prev, error, isUploading: false }));
|
||||
}, []);
|
||||
|
||||
const validateFiles = useCallback((files: File[]): ValidationError[] => {
|
||||
const errors: ValidationError[] = [];
|
||||
|
||||
for (const file of files) {
|
||||
// Check file size
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
errors.push({
|
||||
file,
|
||||
error: `File "${file.name}" is too large. Maximum size is ${MAX_FILE_SIZE / 1024 / 1024}MB.`
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check file type
|
||||
if (!SUPPORTED_TYPES.includes(file.type)) {
|
||||
errors.push({
|
||||
file,
|
||||
error: `File "${file.name}" has unsupported format. Supported formats: JPG, PNG, WebP, GIF.`
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check for duplicates
|
||||
const existingFile = state.files.find(f =>
|
||||
f.name === file.name && f.size === file.size && f.lastModified === file.lastModified
|
||||
);
|
||||
if (existingFile) {
|
||||
errors.push({
|
||||
file,
|
||||
error: `File "${file.name}" is already selected.`
|
||||
});
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Check total file count
|
||||
if (state.files.length + files.length - errors.length > MAX_FILES) {
|
||||
const allowedCount = MAX_FILES - state.files.length;
|
||||
errors.push({
|
||||
file: files[0], // Use first file as reference
|
||||
error: `Too many files. You can only upload ${MAX_FILES} files at once. You can add ${allowedCount} more files.`
|
||||
});
|
||||
}
|
||||
|
||||
return errors;
|
||||
}, [state.files]);
|
||||
|
||||
const addFiles = useCallback((newFiles: File[]) => {
|
||||
setState(prev => ({ ...prev, isValidating: true, error: null }));
|
||||
|
||||
const validationErrors = validateFiles(newFiles);
|
||||
|
||||
if (validationErrors.length > 0) {
|
||||
const errorMessage = validationErrors.map(e => e.error).join('\n');
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
error: errorMessage,
|
||||
isValidating: false
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
const validFiles = newFiles.filter(file =>
|
||||
!validationErrors.some(error => error.file === file)
|
||||
);
|
||||
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
files: [...prev.files, ...validFiles],
|
||||
selectedFiles: [...prev.selectedFiles, ...validFiles],
|
||||
isValidating: false,
|
||||
}));
|
||||
}, [validateFiles]);
|
||||
|
||||
const removeFile = useCallback((index: number) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
files: prev.files.filter((_, i) => i !== index),
|
||||
selectedFiles: prev.selectedFiles.filter((_, i) => i !== index),
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const clearFiles = useCallback(() => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
files: [],
|
||||
selectedFiles: [],
|
||||
uploadedImages: [],
|
||||
currentBatch: null,
|
||||
uploadProgress: 0,
|
||||
error: null,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// Drag and drop handlers
|
||||
const onDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounter.current++;
|
||||
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
||||
setState(prev => ({ ...prev, dragActive: true }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounter.current--;
|
||||
if (dragCounter.current === 0) {
|
||||
setState(prev => ({ ...prev, dragActive: false }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const onDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
setState(prev => ({ ...prev, dragActive: false }));
|
||||
dragCounter.current = 0;
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
addFiles(files);
|
||||
}
|
||||
}, [addFiles]);
|
||||
|
||||
const startUpload = useCallback(async (keywords: string[], batchName?: string) => {
|
||||
if (state.files.length === 0) {
|
||||
setError('No files selected for upload');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
isUploading: true,
|
||||
uploadProgress: 0,
|
||||
error: null
|
||||
}));
|
||||
|
||||
// Create abort controller
|
||||
uploadAbortController.current = new AbortController();
|
||||
|
||||
// Create batch
|
||||
const batchData: BatchCreateRequest = {
|
||||
name: batchName || `Batch ${new Date().toLocaleString()}`,
|
||||
keywords,
|
||||
};
|
||||
|
||||
const batch = await apiClient.createBatch(batchData);
|
||||
|
||||
setState(prev => ({ ...prev, currentBatch: batch }));
|
||||
|
||||
// Upload images with progress tracking
|
||||
const uploadedImages = await apiClient.uploadImages(
|
||||
state.files,
|
||||
batch.id,
|
||||
(progress) => {
|
||||
setState(prev => ({ ...prev, uploadProgress: progress }));
|
||||
}
|
||||
);
|
||||
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
uploadedImages,
|
||||
uploadProgress: 100,
|
||||
isUploading: false,
|
||||
}));
|
||||
|
||||
} catch (error) {
|
||||
console.error('Upload failed:', error);
|
||||
|
||||
if (error instanceof Error) {
|
||||
if (error.name === 'AbortError') {
|
||||
setState(prev => ({ ...prev, isUploading: false, uploadProgress: 0 }));
|
||||
} else {
|
||||
setError(error.message);
|
||||
}
|
||||
} else {
|
||||
setError('Upload failed. Please try again.');
|
||||
}
|
||||
} finally {
|
||||
uploadAbortController.current = null;
|
||||
}
|
||||
}, [state.files, setError]);
|
||||
|
||||
const cancelUpload = useCallback(() => {
|
||||
if (uploadAbortController.current) {
|
||||
uploadAbortController.current.abort();
|
||||
uploadAbortController.current = null;
|
||||
}
|
||||
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
isUploading: false,
|
||||
uploadProgress: 0,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
cancelUpload();
|
||||
setState({
|
||||
files: [],
|
||||
selectedFiles: [],
|
||||
uploadProgress: 0,
|
||||
isUploading: false,
|
||||
isValidating: false,
|
||||
currentBatch: null,
|
||||
uploadedImages: [],
|
||||
error: null,
|
||||
dragActive: false,
|
||||
});
|
||||
dragCounter.current = 0;
|
||||
}, [cancelUpload]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
addFiles,
|
||||
removeFile,
|
||||
clearFiles,
|
||||
onDragEnter,
|
||||
onDragLeave,
|
||||
onDragOver,
|
||||
onDrop,
|
||||
startUpload,
|
||||
cancelUpload,
|
||||
validateFiles,
|
||||
clearError,
|
||||
reset,
|
||||
};
|
||||
}
|
||||
297
packages/frontend/src/hooks/useWebSocket.ts
Normal file
297
packages/frontend/src/hooks/useWebSocket.ts
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { Socket } from 'socket.io-client';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import type { ProgressUpdate, Batch, Image, UserQuota, Subscription } from '@/types';
|
||||
|
||||
interface WebSocketState {
|
||||
isConnected: boolean;
|
||||
isConnecting: boolean;
|
||||
error: string | null;
|
||||
reconnectAttempts: number;
|
||||
}
|
||||
|
||||
interface UseWebSocketReturn extends WebSocketState {
|
||||
connect: (userId?: string) => void;
|
||||
disconnect: () => void;
|
||||
subscribeToProgress: (batchId: string, callback: (update: ProgressUpdate) => void) => () => void;
|
||||
subscribeToBatch: (batchId: string, callbacks: BatchCallbacks) => () => void;
|
||||
subscribeToUser: (callbacks: UserCallbacks) => () => void;
|
||||
}
|
||||
|
||||
interface BatchCallbacks {
|
||||
onBatchUpdated?: (batch: Batch) => void;
|
||||
onBatchCompleted?: (batch: Batch) => void;
|
||||
onBatchFailed?: (batch: Batch) => void;
|
||||
onImageProcessing?: (image: Image) => void;
|
||||
onImageCompleted?: (image: Image) => void;
|
||||
onImageFailed?: (image: Image) => void;
|
||||
onProgress?: (update: ProgressUpdate) => void;
|
||||
}
|
||||
|
||||
interface UserCallbacks {
|
||||
onQuotaUpdated?: (quota: UserQuota) => void;
|
||||
onSubscriptionUpdated?: (subscription: Subscription) => void;
|
||||
}
|
||||
|
||||
const MAX_RECONNECT_ATTEMPTS = 5;
|
||||
const RECONNECT_INTERVAL = 5000;
|
||||
|
||||
export function useWebSocket(): UseWebSocketReturn {
|
||||
const [state, setState] = useState<WebSocketState>({
|
||||
isConnected: false,
|
||||
isConnecting: false,
|
||||
error: null,
|
||||
reconnectAttempts: 0,
|
||||
});
|
||||
|
||||
const socketRef = useRef<Socket | null>(null);
|
||||
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const subscriptionsRef = useRef<Map<string, () => void>>(new Map());
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
setState(prev => ({ ...prev, error: null }));
|
||||
}, []);
|
||||
|
||||
const setError = useCallback((error: string) => {
|
||||
setState(prev => ({ ...prev, error, isConnecting: false }));
|
||||
}, []);
|
||||
|
||||
const setConnected = useCallback((connected: boolean) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
isConnected: connected,
|
||||
isConnecting: false,
|
||||
reconnectAttempts: connected ? 0 : prev.reconnectAttempts,
|
||||
error: connected ? null : prev.error,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setConnecting = useCallback((connecting: boolean) => {
|
||||
setState(prev => ({ ...prev, isConnecting: connecting }));
|
||||
}, []);
|
||||
|
||||
const incrementReconnectAttempts = useCallback(() => {
|
||||
setState(prev => ({ ...prev, reconnectAttempts: prev.reconnectAttempts + 1 }));
|
||||
}, []);
|
||||
|
||||
const scheduleReconnect = useCallback(() => {
|
||||
if (state.reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
|
||||
setError('Maximum reconnection attempts reached. Please refresh the page.');
|
||||
return;
|
||||
}
|
||||
|
||||
const delay = Math.min(RECONNECT_INTERVAL * Math.pow(2, state.reconnectAttempts), 30000);
|
||||
|
||||
reconnectTimeoutRef.current = setTimeout(() => {
|
||||
if (!state.isConnected && socketRef.current) {
|
||||
incrementReconnectAttempts();
|
||||
socketRef.current.connect();
|
||||
}
|
||||
}, delay);
|
||||
}, [state.reconnectAttempts, state.isConnected, incrementReconnectAttempts, setError]);
|
||||
|
||||
const connect = useCallback((userId?: string) => {
|
||||
if (socketRef.current?.connected) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setConnecting(true);
|
||||
clearError();
|
||||
|
||||
const socket = apiClient.connectWebSocket(userId);
|
||||
socketRef.current = socket;
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('WebSocket connected');
|
||||
setConnected(true);
|
||||
|
||||
// Clear any pending reconnect timeout
|
||||
if (reconnectTimeoutRef.current) {
|
||||
clearTimeout(reconnectTimeoutRef.current);
|
||||
reconnectTimeoutRef.current = null;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('disconnect', (reason: string) => {
|
||||
console.log('WebSocket disconnected:', reason);
|
||||
setConnected(false);
|
||||
|
||||
// Only attempt to reconnect if it wasn't a manual disconnect
|
||||
if (reason !== 'io client disconnect' && reason !== 'io server disconnect') {
|
||||
scheduleReconnect();
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('connect_error', (error: Error) => {
|
||||
console.error('WebSocket connection error:', error);
|
||||
setError(`Connection failed: ${error.message}`);
|
||||
scheduleReconnect();
|
||||
});
|
||||
|
||||
// Handle auth errors
|
||||
socket.on('error', (error: any) => {
|
||||
console.error('WebSocket error:', error);
|
||||
if (error.type === 'UnauthorizedError') {
|
||||
setError('Authentication failed. Please log in again.');
|
||||
disconnect();
|
||||
} else {
|
||||
setError(error.message || 'WebSocket error occurred');
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to create WebSocket connection:', error);
|
||||
setError(error instanceof Error ? error.message : 'Failed to connect');
|
||||
}
|
||||
}, [setConnecting, clearError, setConnected, setError, scheduleReconnect]);
|
||||
|
||||
const disconnect = useCallback(() => {
|
||||
if (reconnectTimeoutRef.current) {
|
||||
clearTimeout(reconnectTimeoutRef.current);
|
||||
reconnectTimeoutRef.current = null;
|
||||
}
|
||||
|
||||
// Clean up all subscriptions
|
||||
subscriptionsRef.current.forEach(unsubscribe => unsubscribe());
|
||||
subscriptionsRef.current.clear();
|
||||
|
||||
if (socketRef.current) {
|
||||
socketRef.current.disconnect();
|
||||
socketRef.current = null;
|
||||
}
|
||||
|
||||
setConnected(false);
|
||||
}, [setConnected]);
|
||||
|
||||
const subscribeToProgress = useCallback((batchId: string, callback: (update: ProgressUpdate) => void) => {
|
||||
if (!socketRef.current) {
|
||||
throw new Error('WebSocket not connected');
|
||||
}
|
||||
|
||||
const eventName = `progress:${batchId}`;
|
||||
const socket = socketRef.current;
|
||||
|
||||
socket.on(eventName, callback);
|
||||
socket.emit('subscribe:progress', { batchId });
|
||||
|
||||
const unsubscribe = () => {
|
||||
socket.off(eventName, callback);
|
||||
socket.emit('unsubscribe:progress', { batchId });
|
||||
subscriptionsRef.current.delete(`progress:${batchId}`);
|
||||
};
|
||||
|
||||
subscriptionsRef.current.set(`progress:${batchId}`, unsubscribe);
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
|
||||
const subscribeToBatch = useCallback((batchId: string, callbacks: BatchCallbacks) => {
|
||||
if (!socketRef.current) {
|
||||
throw new Error('WebSocket not connected');
|
||||
}
|
||||
|
||||
const socket = socketRef.current;
|
||||
const unsubscribeFns: (() => void)[] = [];
|
||||
|
||||
// Subscribe to batch events
|
||||
if (callbacks.onBatchUpdated) {
|
||||
const eventName = `batch:updated:${batchId}`;
|
||||
socket.on(eventName, callbacks.onBatchUpdated);
|
||||
unsubscribeFns.push(() => socket.off(eventName, callbacks.onBatchUpdated!));
|
||||
}
|
||||
|
||||
if (callbacks.onBatchCompleted) {
|
||||
const eventName = `batch:completed:${batchId}`;
|
||||
socket.on(eventName, callbacks.onBatchCompleted);
|
||||
unsubscribeFns.push(() => socket.off(eventName, callbacks.onBatchCompleted!));
|
||||
}
|
||||
|
||||
if (callbacks.onBatchFailed) {
|
||||
const eventName = `batch:failed:${batchId}`;
|
||||
socket.on(eventName, callbacks.onBatchFailed);
|
||||
unsubscribeFns.push(() => socket.off(eventName, callbacks.onBatchFailed!));
|
||||
}
|
||||
|
||||
// Subscribe to image events
|
||||
if (callbacks.onImageProcessing) {
|
||||
const eventName = `image:processing:${batchId}`;
|
||||
socket.on(eventName, callbacks.onImageProcessing);
|
||||
unsubscribeFns.push(() => socket.off(eventName, callbacks.onImageProcessing!));
|
||||
}
|
||||
|
||||
if (callbacks.onImageCompleted) {
|
||||
const eventName = `image:completed:${batchId}`;
|
||||
socket.on(eventName, callbacks.onImageCompleted);
|
||||
unsubscribeFns.push(() => socket.off(eventName, callbacks.onImageCompleted!));
|
||||
}
|
||||
|
||||
if (callbacks.onImageFailed) {
|
||||
const eventName = `image:failed:${batchId}`;
|
||||
socket.on(eventName, callbacks.onImageFailed);
|
||||
unsubscribeFns.push(() => socket.off(eventName, callbacks.onImageFailed!));
|
||||
}
|
||||
|
||||
// Subscribe to progress updates
|
||||
if (callbacks.onProgress) {
|
||||
const progressUnsubscribe = subscribeToProgress(batchId, callbacks.onProgress);
|
||||
unsubscribeFns.push(progressUnsubscribe);
|
||||
}
|
||||
|
||||
// Join batch room
|
||||
socket.emit('join:batch', { batchId });
|
||||
|
||||
const unsubscribe = () => {
|
||||
unsubscribeFns.forEach(fn => fn());
|
||||
socket.emit('leave:batch', { batchId });
|
||||
subscriptionsRef.current.delete(`batch:${batchId}`);
|
||||
};
|
||||
|
||||
subscriptionsRef.current.set(`batch:${batchId}`, unsubscribe);
|
||||
return unsubscribe;
|
||||
}, [subscribeToProgress]);
|
||||
|
||||
const subscribeToUser = useCallback((callbacks: UserCallbacks) => {
|
||||
if (!socketRef.current) {
|
||||
throw new Error('WebSocket not connected');
|
||||
}
|
||||
|
||||
const socket = socketRef.current;
|
||||
const unsubscribeFns: (() => void)[] = [];
|
||||
|
||||
if (callbacks.onQuotaUpdated) {
|
||||
socket.on('quota:updated', callbacks.onQuotaUpdated);
|
||||
unsubscribeFns.push(() => socket.off('quota:updated', callbacks.onQuotaUpdated!));
|
||||
}
|
||||
|
||||
if (callbacks.onSubscriptionUpdated) {
|
||||
socket.on('subscription:updated', callbacks.onSubscriptionUpdated);
|
||||
unsubscribeFns.push(() => socket.off('subscription:updated', callbacks.onSubscriptionUpdated!));
|
||||
}
|
||||
|
||||
const unsubscribe = () => {
|
||||
unsubscribeFns.forEach(fn => fn());
|
||||
subscriptionsRef.current.delete('user');
|
||||
};
|
||||
|
||||
subscriptionsRef.current.set('user', unsubscribe);
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, [disconnect]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
connect,
|
||||
disconnect,
|
||||
subscribeToProgress,
|
||||
subscribeToBatch,
|
||||
subscribeToUser,
|
||||
};
|
||||
}
|
||||
340
packages/frontend/src/lib/api-client.ts
Normal file
340
packages/frontend/src/lib/api-client.ts
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
import type {
|
||||
User,
|
||||
AuthResponse,
|
||||
Batch,
|
||||
BatchCreateRequest,
|
||||
BatchStatus,
|
||||
Image,
|
||||
UpdateFilenameRequest,
|
||||
EnhanceKeywordsRequest,
|
||||
EnhanceKeywordsResponse,
|
||||
CheckoutSessionRequest,
|
||||
CheckoutSessionResponse,
|
||||
PortalSessionRequest,
|
||||
PortalSessionResponse,
|
||||
Subscription,
|
||||
UserQuota,
|
||||
UserStats,
|
||||
DownloadRequest,
|
||||
DownloadResponse,
|
||||
DownloadStatus,
|
||||
Plan,
|
||||
ProgressUpdate,
|
||||
} from '@/types/api';
|
||||
|
||||
export class APIClient {
|
||||
private axios: AxiosInstance;
|
||||
private socket: Socket | null = null;
|
||||
private baseURL: string;
|
||||
private wsURL: string;
|
||||
|
||||
constructor() {
|
||||
this.baseURL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
this.wsURL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:3001';
|
||||
|
||||
this.axios = axios.create({
|
||||
baseURL: this.baseURL,
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
this.setupInterceptors();
|
||||
}
|
||||
|
||||
private setupInterceptors() {
|
||||
// Request interceptor to add auth token
|
||||
this.axios.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = this.getToken();
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => Promise.reject(error)
|
||||
);
|
||||
|
||||
// Response interceptor for error handling
|
||||
this.axios.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
this.clearToken();
|
||||
// Redirect to login or emit auth error event
|
||||
window.dispatchEvent(new CustomEvent('auth:logout'));
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Token management
|
||||
private getToken(): string | null {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem('auth_token');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
setToken(token: string | null) {
|
||||
if (typeof window !== 'undefined') {
|
||||
if (token) {
|
||||
localStorage.setItem('auth_token', token);
|
||||
} else {
|
||||
localStorage.removeItem('auth_token');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private clearToken() {
|
||||
this.setToken(null);
|
||||
}
|
||||
|
||||
// WebSocket connection
|
||||
connectWebSocket(userId?: string): Socket {
|
||||
if (this.socket?.connected) {
|
||||
return this.socket;
|
||||
}
|
||||
|
||||
const token = this.getToken();
|
||||
this.socket = io(this.wsURL, {
|
||||
auth: {
|
||||
token,
|
||||
},
|
||||
query: userId ? { userId } : undefined,
|
||||
transports: ['websocket', 'polling'],
|
||||
upgrade: true,
|
||||
rememberUpgrade: true,
|
||||
});
|
||||
|
||||
this.socket.on('connect', () => {
|
||||
console.log('WebSocket connected');
|
||||
});
|
||||
|
||||
this.socket.on('disconnect', () => {
|
||||
console.log('WebSocket disconnected');
|
||||
});
|
||||
|
||||
this.socket.on('connect_error', (error) => {
|
||||
console.error('WebSocket connection error:', error);
|
||||
});
|
||||
|
||||
return this.socket;
|
||||
}
|
||||
|
||||
disconnectWebSocket() {
|
||||
if (this.socket) {
|
||||
this.socket.disconnect();
|
||||
this.socket = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress subscription
|
||||
subscribeToProgress(batchId: string, callback: (update: ProgressUpdate) => void) {
|
||||
if (!this.socket) {
|
||||
throw new Error('WebSocket not connected');
|
||||
}
|
||||
|
||||
this.socket.on(`progress:${batchId}`, callback);
|
||||
this.socket.emit('subscribe:progress', { batchId });
|
||||
|
||||
return () => {
|
||||
this.socket?.off(`progress:${batchId}`, callback);
|
||||
this.socket?.emit('unsubscribe:progress', { batchId });
|
||||
};
|
||||
}
|
||||
|
||||
// Authentication API
|
||||
async getAuthUrl(): Promise<{ url: string }> {
|
||||
const response = await this.axios.get<{ url: string }>('/api/auth/google');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async handleCallback(code: string): Promise<AuthResponse> {
|
||||
const response = await this.axios.post<AuthResponse>('/api/auth/callback', { code });
|
||||
const { token } = response.data;
|
||||
this.setToken(token);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getProfile(): Promise<User> {
|
||||
const response = await this.axios.get<User>('/api/auth/me');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async logout(): Promise<void> {
|
||||
try {
|
||||
await this.axios.post('/api/auth/logout');
|
||||
} finally {
|
||||
this.clearToken();
|
||||
this.disconnectWebSocket();
|
||||
}
|
||||
}
|
||||
|
||||
// Users API
|
||||
async getUserStats(): Promise<UserStats> {
|
||||
const response = await this.axios.get<UserStats>('/api/users/stats');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getUserQuota(): Promise<UserQuota> {
|
||||
const response = await this.axios.get<UserQuota>('/api/users/quota');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Batches API
|
||||
async createBatch(data: BatchCreateRequest): Promise<Batch> {
|
||||
const response = await this.axios.post<Batch>('/api/batches', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getBatch(batchId: string): Promise<Batch> {
|
||||
const response = await this.axios.get<Batch>(`/api/batches/${batchId}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getBatchStatus(batchId: string): Promise<BatchStatus> {
|
||||
const response = await this.axios.get<BatchStatus>(`/api/batches/${batchId}/status`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getBatchImages(batchId: string): Promise<Image[]> {
|
||||
const response = await this.axios.get<Image[]>(`/api/batches/${batchId}/images`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getBatches(page = 1, limit = 10): Promise<{ batches: Batch[]; total: number; pages: number }> {
|
||||
const response = await this.axios.get(`/api/batches?page=${page}&limit=${limit}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Images API
|
||||
async uploadImages(files: File[], batchId: string, onProgress?: (progress: number) => void): Promise<Image[]> {
|
||||
const formData = new FormData();
|
||||
formData.append('batchId', batchId);
|
||||
|
||||
files.forEach((file) => {
|
||||
formData.append('images', file);
|
||||
});
|
||||
|
||||
const config: AxiosRequestConfig = {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
onUploadProgress: onProgress ? (progressEvent) => {
|
||||
const progress = progressEvent.total
|
||||
? Math.round((progressEvent.loaded * 100) / progressEvent.total)
|
||||
: 0;
|
||||
onProgress(progress);
|
||||
} : undefined,
|
||||
};
|
||||
|
||||
const response = await this.axios.post<Image[]>('/api/images/upload', formData, config);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async updateImageFilename(imageId: string, data: UpdateFilenameRequest): Promise<Image> {
|
||||
const response = await this.axios.put<Image>(`/api/images/${imageId}`, data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Keywords API
|
||||
async enhanceKeywords(data: EnhanceKeywordsRequest): Promise<EnhanceKeywordsResponse> {
|
||||
const response = await this.axios.post<EnhanceKeywordsResponse>('/api/keywords/enhance', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Payments API
|
||||
async getPlans(): Promise<Plan[]> {
|
||||
const response = await this.axios.get<Plan[]>('/api/payments/plans');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getSubscription(): Promise<Subscription | null> {
|
||||
try {
|
||||
const response = await this.axios.get<Subscription>('/api/payments/subscription');
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (axios.isAxiosError(error) && error.response?.status === 404) {
|
||||
return null;
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async createCheckoutSession(data: CheckoutSessionRequest): Promise<CheckoutSessionResponse> {
|
||||
const response = await this.axios.post<CheckoutSessionResponse>('/api/payments/checkout', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async createPortalSession(data: PortalSessionRequest): Promise<PortalSessionResponse> {
|
||||
const response = await this.axios.post<PortalSessionResponse>('/api/payments/portal', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Downloads API
|
||||
async createDownload(data: DownloadRequest): Promise<DownloadResponse> {
|
||||
const response = await this.axios.post<DownloadResponse>('/api/downloads/create', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getDownloadStatus(downloadId: string): Promise<DownloadStatus> {
|
||||
const response = await this.axios.get<DownloadStatus>(`/api/downloads/${downloadId}/status`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
getDownloadUrl(downloadId: string): string {
|
||||
return `${this.baseURL}/api/downloads/${downloadId}`;
|
||||
}
|
||||
|
||||
async getDownloadHistory(): Promise<DownloadResponse[]> {
|
||||
const response = await this.axios.get<DownloadResponse[]>('/api/downloads/user/history');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Health check
|
||||
async healthCheck(): Promise<boolean> {
|
||||
try {
|
||||
await this.axios.get('/api/health');
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Admin API (if user has admin role)
|
||||
async getAdminStats(): Promise<any> {
|
||||
const response = await this.axios.get('/api/admin/stats');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async getUsers(page = 1, limit = 10): Promise<any> {
|
||||
const response = await this.axios.get(`/api/admin/users?page=${page}&limit=${limit}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async updateUserPlan(userId: string, plan: string): Promise<any> {
|
||||
const response = await this.axios.put(`/api/admin/users/${userId}/plan`, { plan });
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async banUser(userId: string, reason: string): Promise<any> {
|
||||
const response = await this.axios.post(`/api/admin/users/${userId}/ban`, { reason });
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async unbanUser(userId: string): Promise<any> {
|
||||
const response = await this.axios.delete(`/api/admin/users/${userId}/ban`);
|
||||
return response.data;
|
||||
}
|
||||
}
|
||||
|
||||
// Create a singleton instance
|
||||
export const apiClient = new APIClient();
|
||||
|
||||
// Export for easier imports
|
||||
export default apiClient;
|
||||
361
packages/frontend/src/types/api.ts
Normal file
361
packages/frontend/src/types/api.ts
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
// User Types
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
picture?: string;
|
||||
plan: UserPlan;
|
||||
isActive: boolean;
|
||||
isBanned: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export enum UserPlan {
|
||||
BASIC = 'BASIC',
|
||||
PRO = 'PRO',
|
||||
MAX = 'MAX',
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
user: User;
|
||||
token: string;
|
||||
}
|
||||
|
||||
export interface UserStats {
|
||||
totalImages: number;
|
||||
totalBatches: number;
|
||||
totalDownloads: number;
|
||||
imagesThisMonth: number;
|
||||
averageProcessingTime: number;
|
||||
lastActivity: string;
|
||||
}
|
||||
|
||||
export interface UserQuota {
|
||||
used: number;
|
||||
limit: number;
|
||||
resetDate: string;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
// Batch Types
|
||||
export interface Batch {
|
||||
id: string;
|
||||
userId: string;
|
||||
name: string;
|
||||
keywords: string[];
|
||||
status: BatchStatus;
|
||||
totalImages: number;
|
||||
processedImages: number;
|
||||
failedImages: number;
|
||||
progress: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
completedAt?: string;
|
||||
images?: Image[];
|
||||
}
|
||||
|
||||
export enum BatchStatus {
|
||||
CREATED = 'CREATED',
|
||||
UPLOADING = 'UPLOADING',
|
||||
PROCESSING = 'PROCESSING',
|
||||
COMPLETED = 'COMPLETED',
|
||||
FAILED = 'FAILED',
|
||||
CANCELLED = 'CANCELLED',
|
||||
}
|
||||
|
||||
export interface BatchCreateRequest {
|
||||
name: string;
|
||||
keywords: string[];
|
||||
}
|
||||
|
||||
// Image Types
|
||||
export interface Image {
|
||||
id: string;
|
||||
batchId: string;
|
||||
originalFilename: string;
|
||||
newFilename: string;
|
||||
fileSize: number;
|
||||
mimeType: string;
|
||||
width: number;
|
||||
height: number;
|
||||
status: ImageStatus;
|
||||
thumbnailUrl?: string;
|
||||
downloadUrl?: string;
|
||||
processingError?: string;
|
||||
aiDescription?: string;
|
||||
keywords?: string[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
processedAt?: string;
|
||||
}
|
||||
|
||||
export enum ImageStatus {
|
||||
UPLOADED = 'UPLOADED',
|
||||
PROCESSING = 'PROCESSING',
|
||||
COMPLETED = 'COMPLETED',
|
||||
FAILED = 'FAILED',
|
||||
}
|
||||
|
||||
export interface UpdateFilenameRequest {
|
||||
filename: string;
|
||||
}
|
||||
|
||||
// Keywords Types
|
||||
export interface EnhanceKeywordsRequest {
|
||||
keywords: string[];
|
||||
}
|
||||
|
||||
export interface EnhanceKeywordsResponse {
|
||||
originalKeywords: string[];
|
||||
enhancedKeywords: string[];
|
||||
suggestions: string[];
|
||||
}
|
||||
|
||||
// Payment Types
|
||||
export interface Plan {
|
||||
id: string;
|
||||
name: string;
|
||||
displayName: string;
|
||||
price: number;
|
||||
currency: string;
|
||||
interval: 'month' | 'year';
|
||||
imageLimit: number;
|
||||
features: string[];
|
||||
popular?: boolean;
|
||||
stripePriceId: string;
|
||||
}
|
||||
|
||||
export interface Subscription {
|
||||
id: string;
|
||||
userId: string;
|
||||
stripeSubscriptionId: string;
|
||||
stripePriceId: string;
|
||||
status: SubscriptionStatus;
|
||||
currentPeriodStart: string;
|
||||
currentPeriodEnd: string;
|
||||
cancelAtPeriodEnd: boolean;
|
||||
canceledAt?: string;
|
||||
plan: Plan;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export enum SubscriptionStatus {
|
||||
ACTIVE = 'active',
|
||||
CANCELED = 'canceled',
|
||||
INCOMPLETE = 'incomplete',
|
||||
INCOMPLETE_EXPIRED = 'incomplete_expired',
|
||||
PAST_DUE = 'past_due',
|
||||
TRIALING = 'trialing',
|
||||
UNPAID = 'unpaid',
|
||||
}
|
||||
|
||||
export interface CheckoutSessionRequest {
|
||||
priceId: string;
|
||||
successUrl: string;
|
||||
cancelUrl: string;
|
||||
}
|
||||
|
||||
export interface CheckoutSessionResponse {
|
||||
sessionId: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface PortalSessionRequest {
|
||||
returnUrl: string;
|
||||
}
|
||||
|
||||
export interface PortalSessionResponse {
|
||||
url: string;
|
||||
}
|
||||
|
||||
// Download Types
|
||||
export interface DownloadRequest {
|
||||
batchId: string;
|
||||
}
|
||||
|
||||
export interface DownloadResponse {
|
||||
id: string;
|
||||
batchId: string;
|
||||
userId: string;
|
||||
status: DownloadStatus;
|
||||
fileName: string;
|
||||
fileSize?: number;
|
||||
downloadUrl?: string;
|
||||
expiresAt?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export enum DownloadStatus {
|
||||
PREPARING = 'PREPARING',
|
||||
READY = 'READY',
|
||||
EXPIRED = 'EXPIRED',
|
||||
FAILED = 'FAILED',
|
||||
}
|
||||
|
||||
// WebSocket Types
|
||||
export interface ProgressUpdate {
|
||||
batchId: string;
|
||||
type: 'batch' | 'image';
|
||||
status: BatchStatus | ImageStatus;
|
||||
progress: number;
|
||||
message: string;
|
||||
imageId?: string;
|
||||
error?: string;
|
||||
data?: any;
|
||||
}
|
||||
|
||||
export interface WebSocketEvents {
|
||||
// Connection events
|
||||
connect: () => void;
|
||||
disconnect: (reason: string) => void;
|
||||
connect_error: (error: Error) => void;
|
||||
|
||||
// Progress events
|
||||
'progress:update': (update: ProgressUpdate) => void;
|
||||
'batch:created': (batch: Batch) => void;
|
||||
'batch:updated': (batch: Batch) => void;
|
||||
'batch:completed': (batch: Batch) => void;
|
||||
'batch:failed': (batch: Batch) => void;
|
||||
|
||||
// Image events
|
||||
'image:processing': (image: Image) => void;
|
||||
'image:completed': (image: Image) => void;
|
||||
'image:failed': (image: Image) => void;
|
||||
|
||||
// User events
|
||||
'quota:updated': (quota: UserQuota) => void;
|
||||
'subscription:updated': (subscription: Subscription) => void;
|
||||
}
|
||||
|
||||
// Error Types
|
||||
export interface APIError {
|
||||
message: string;
|
||||
code?: string;
|
||||
status?: number;
|
||||
details?: any;
|
||||
}
|
||||
|
||||
// Form Types
|
||||
export interface LoginForm {
|
||||
redirectUrl?: string;
|
||||
}
|
||||
|
||||
export interface UploadForm {
|
||||
files: File[];
|
||||
keywords: string[];
|
||||
batchName?: string;
|
||||
}
|
||||
|
||||
export interface KeywordForm {
|
||||
keywords: string;
|
||||
}
|
||||
|
||||
export interface FilenameEditForm {
|
||||
filename: string;
|
||||
}
|
||||
|
||||
// UI State Types
|
||||
export interface LoadingState {
|
||||
isLoading: boolean;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export interface ErrorState {
|
||||
hasError: boolean;
|
||||
message?: string;
|
||||
retry?: () => void;
|
||||
}
|
||||
|
||||
// Store Types
|
||||
export interface AuthState {
|
||||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface BatchState {
|
||||
batches: Batch[];
|
||||
currentBatch: Batch | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface UploadState {
|
||||
files: File[];
|
||||
progress: number;
|
||||
isUploading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface PaymentState {
|
||||
subscription: Subscription | null;
|
||||
plans: Plan[];
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
// Admin Types (if admin functionality is needed)
|
||||
export interface AdminStats {
|
||||
totalUsers: number;
|
||||
totalImages: number;
|
||||
totalBatches: number;
|
||||
activeSubscriptions: number;
|
||||
monthlyRevenue: number;
|
||||
systemHealth: {
|
||||
api: boolean;
|
||||
database: boolean;
|
||||
storage: boolean;
|
||||
queue: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export interface AdminUser extends User {
|
||||
subscription?: Subscription;
|
||||
stats: {
|
||||
totalImages: number;
|
||||
totalBatches: number;
|
||||
lastActivity: string;
|
||||
};
|
||||
}
|
||||
|
||||
// Utility Types
|
||||
export type SortOrder = 'asc' | 'desc';
|
||||
export type SortField = 'createdAt' | 'updatedAt' | 'name' | 'status';
|
||||
|
||||
export interface PaginationParams {
|
||||
page: number;
|
||||
limit: number;
|
||||
sortBy?: SortField;
|
||||
sortOrder?: SortOrder;
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
data: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
pages: number;
|
||||
}
|
||||
|
||||
// Configuration Types
|
||||
export interface AppConfig {
|
||||
apiUrl: string;
|
||||
wsUrl: string;
|
||||
stripePublishableKey: string;
|
||||
googleClientId: string;
|
||||
maxFileSize: number;
|
||||
maxFiles: number;
|
||||
supportedFormats: string[];
|
||||
features: {
|
||||
googleAuth: boolean;
|
||||
stripePayments: boolean;
|
||||
websocketUpdates: boolean;
|
||||
imagePreview: boolean;
|
||||
batchProcessing: boolean;
|
||||
downloadTracking: boolean;
|
||||
};
|
||||
}
|
||||
34
packages/frontend/src/types/index.ts
Normal file
34
packages/frontend/src/types/index.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
export * from './api';
|
||||
|
||||
// Additional component prop types
|
||||
export interface BaseComponentProps {
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'outline' | 'ghost';
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
loading?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
}
|
||||
|
||||
export interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
||||
}
|
||||
|
||||
export interface ToastOptions {
|
||||
type?: 'success' | 'error' | 'warning' | 'info';
|
||||
duration?: number;
|
||||
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue