Implementation Plan

Overview

Implement a comprehensive admin dashboard with full CRUD operations for artist management, Cloudflare R2 file upload system, appointment scheduling interface, and database population from existing artist data.

This implementation extends the existing United Tattoo Studio platform by building out the admin interface components, integrating Cloudflare R2 for portfolio image uploads, creating a full appointment management system with calendar views, and migrating the current mock artist data into the Cloudflare D1 database. The admin dashboard will provide complete management capabilities for studio operations while maintaining the existing public-facing website functionality.

Types

Define comprehensive type system for admin dashboard components and enhanced database operations.

// Admin Dashboard Types
interface AdminDashboardStats {
  totalArtists: number
  activeArtists: number
  totalAppointments: number
  pendingAppointments: number
  totalUploads: number
  recentUploads: number
}

interface FileUploadProgress {
  id: string
  filename: string
  progress: number
  status: 'uploading' | 'processing' | 'complete' | 'error'
  url?: string
  error?: string
}

interface CalendarEvent {
  id: string
  title: string
  start: Date
  end: Date
  artistId: string
  clientId: string
  status: AppointmentStatus
  description?: string
}

// Enhanced Artist Types
interface ArtistFormData {
  name: string
  bio: string
  specialties: string[]
  instagramHandle?: string
  hourlyRate?: number
  isActive: boolean
  email?: string
  portfolioImages?: File[]
}

interface PortfolioImageUpload {
  file: File
  caption?: string
  tags: string[]
  orderIndex: number
}

// File Upload Types
interface R2UploadResponse {
  success: boolean
  url?: string
  key?: string
  error?: string
}

interface BulkUploadResult {
  successful: FileUpload[]
  failed: { filename: string; error: string }[]
  total: number
}

Files

Create new admin dashboard pages and components while enhancing existing database and upload functionality.

New Files to Create:

app/admin/artists/page.tsx - Artist management list view
app/admin/artists/new/page.tsx - Create new artist form
app/admin/artists/[id]/page.tsx - Edit artist details
app/admin/artists/[id]/portfolio/page.tsx - Manage artist portfolio
app/admin/calendar/page.tsx - Appointment calendar interface
app/admin/uploads/page.tsx - File upload management
app/admin/settings/page.tsx - Studio settings management
components/admin/artist-form.tsx - Artist creation/editing form
components/admin/portfolio-manager.tsx - Portfolio image management
components/admin/file-uploader.tsx - Cloudflare R2 file upload component
components/admin/appointment-calendar.tsx - Calendar component for appointments
components/admin/stats-dashboard.tsx - Dashboard statistics display
components/admin/data-table.tsx - Reusable data table component
lib/r2-upload.ts - Cloudflare R2 upload utilities
lib/data-migration.ts - Artist data migration utilities
hooks/use-file-upload.ts - File upload hook with progress tracking
hooks/use-calendar.ts - Calendar state management hook

Files to Modify:

app/api/artists/route.ts - Enhance with real database operations
app/api/artists/[id]/route.ts - Add portfolio image management
app/api/upload/route.ts - Implement Cloudflare R2 integration
app/api/settings/route.ts - Add site settings CRUD operations
app/api/appointments/route.ts - Create appointment management API
lib/db.ts - Update database functions to work with runtime environment
lib/validations.ts - Add admin form validation schemas
components/admin/sidebar.tsx - Update navigation for new pages

Functions

Implement comprehensive CRUD operations and file management functionality.

New Functions:

uploadToR2(file: File, key: string): Promise<R2UploadResponse> in lib/r2-upload.ts
bulkUploadToR2(files: File[]): Promise<BulkUploadResult> in lib/r2-upload.ts
migrateArtistData(): Promise<void> in lib/data-migration.ts
getArtistStats(): Promise<AdminDashboardStats> in lib/db.ts
createAppointment(data: CreateAppointmentInput): Promise<Appointment> in lib/db.ts
getAppointmentsByDateRange(start: Date, end: Date): Promise<CalendarEvent[]> in lib/db.ts
useFileUpload(): FileUploadHook in hooks/use-file-upload.ts
useCalendar(): CalendarHook in hooks/use-calendar.ts

Modified Functions:

Update getArtists() in lib/db.ts to use actual D1 database
Enhance createArtist() to handle portfolio image uploads
Modify updateArtist() to support portfolio management
Update API route handlers to use enhanced database functions

Classes

Create reusable component classes and utility classes for admin functionality.

New Classes:

FileUploadManager class in lib/r2-upload.ts for managing multiple file uploads
CalendarManager class in lib/calendar.ts for appointment scheduling logic
DataMigrator class in lib/data-migration.ts for database migration operations

Component Classes:

ArtistForm component class with form validation and submission
PortfolioManager component class for drag-and-drop image management
FileUploader component class with progress tracking and error handling
AppointmentCalendar component class with scheduling capabilities

Dependencies

Add required packages for enhanced admin functionality.

New Dependencies:

@aws-sdk/client-s3 (already installed) - For Cloudflare R2 operations
react-big-calendar (already installed) - For appointment calendar
react-dropzone (already installed) - For file upload interface
@tanstack/react-query (already installed) - For data fetching and caching

Configuration Updates:

Update wrangler.toml with R2 bucket configuration
Add environment variables for R2 access keys
Configure Next.js for file upload handling

Testing

Implement comprehensive testing for admin dashboard functionality.

Test Files to Create:

__tests__/admin/artist-form.test.tsx - Artist form component tests
__tests__/admin/file-upload.test.tsx - File upload functionality tests
__tests__/api/artists.test.ts - Artist API endpoint tests
__tests__/lib/r2-upload.test.ts - R2 upload utility tests
__tests__/lib/data-migration.test.ts - Data migration tests

Testing Strategy:

Unit tests for all new utility functions
Component tests for admin dashboard components
Integration tests for API endpoints with database operations
E2E tests for complete admin workflows (create artist, upload portfolio, schedule appointment)

Implementation Order

Sequential implementation steps to ensure proper integration and minimal conflicts.

Database Migration and Population
- Implement data migration utilities in lib/data-migration.ts
- Create migration script to populate D1 database with existing artist data
- Update database functions in lib/db.ts to work with runtime environment
- Test database operations with migrated data
Cloudflare R2 File Upload System
- Implement R2 upload utilities in lib/r2-upload.ts
- Create file upload hook in hooks/use-file-upload.ts
- Update upload API route in app/api/upload/route.ts
- Create file uploader component in components/admin/file-uploader.tsx
Artist Management Interface
- Create artist form component in components/admin/artist-form.tsx
- Implement artist management pages (app/admin/artists/)
- Create portfolio manager component in components/admin/portfolio-manager.tsx
- Update artist API routes with enhanced functionality
Appointment Calendar System
- Create calendar hook in hooks/use-calendar.ts
- Implement appointment calendar component in components/admin/appointment-calendar.tsx
- Create appointment API routes in app/api/appointments/
- Build calendar page in app/admin/calendar/page.tsx
Admin Dashboard Enhancement
- Create stats dashboard component in components/admin/stats-dashboard.tsx
- Implement settings management in app/admin/settings/page.tsx
- Create data table component in components/admin/data-table.tsx
- Update main dashboard page with real data integration
Testing and Validation
- Implement unit tests for all new functionality
- Create integration tests for API endpoints
- Add E2E tests for admin workflows
- Validate all CRUD operations and file uploads
Final Integration and Optimization
- Update sidebar navigation for all new pages
- Implement error handling and loading states
- Add proper TypeScript types throughout
- Optimize performance and add caching where appropriate

8.6 KiB Raw Blame History