docs/IMPLEMENTATION_PLAN.md

# Digi-Biz Next.js Implementation Plan

**Date:** March 18, 2026  
**Based on:** User Requirements (Answers to 10 Questions)  
**Status:** Ready to Implement  

---

## 🎯 **USER REQUIREMENTS SUMMARY**

| # | Feature | Choice | Implementation |
|---|---------|--------|----------------|
| 1 | User Flow | **Option C** | Hybrid (Upload → Auto-redirect to Profile) |
| 2 | Processing | **Option A** | Progress bar with agent status |
| 3 | Profile Design | **Option A** | Business website + More details |
| 4 | Edit Interface | **Option B** | Separate edit page with forms |
| 5 | Data Storage | **Demo Mode** | No DB, Export functionality |
| 6 | Image Storage | **Option A** | Local file system |
| 7 | Service Details | **Option B** | Tabs (Overview | Itinerary | Info | FAQ) |
| 8 | Multiple Profiles | **Option B** | Dashboard to select profiles |
| 9 | API Endpoints | **Full CRUD** | All REST endpoints |
| 10 | Design System | **A + B** | Tailwind CSS + shadcn/ui |

---

## 🏗️ **ARCHITECTURE OVERVIEW**

### **User Flow:**
```
┌─────────────────┐
│  Landing Page   │
│  (Upload ZIP)   │
└────────┬────────┘
         │
         ↓ Upload Complete
┌─────────────────┐
│  Processing     │
│  (Real-time     │
│   Progress)     │
└────────┬────────┘
         │
         ↓ Processing Complete
┌─────────────────┐
│  Profile        │
│  Dashboard      │
│  (All Profiles) │
└────────┬────────┘
         │
         ↓ Select Profile
┌─────────────────┐
│  Profile View   │
│  (Landing Page) │
└────────┬────────┘
         │
         ↓ Click Edit
┌─────────────────┐
│  Edit Page      │
│  (Forms)        │
└─────────────────┘
```

---

## 📁 **FILE STRUCTURE**

```
digi-biz/
├── backend/
│   ├── api/
│   │   ├── main.py              # FastAPI server
│   │   ├── routes/
│   │   │   ├── upload.py        # POST /api/upload
│   │   │   ├── status.py        # GET /api/status/{job_id}
│   │   │   ├── profile.py       # GET/PUT/DELETE /api/profile/{job_id}
│   │   │   └── export.py        # POST /api/profile/{job_id}/export
│   │   └── middleware/
│   │       └── cors.py
│   ├── agents/                  # Existing agents (unchanged)
│   └── storage/
│       └── profiles/            # Store profiles as JSON files
│
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx         # Landing page (upload)
│   │   │   ├── processing/
│   │   │   │   └── [job_id]/
│   │   │   │       └── page.tsx # Processing page
│   │   │   ├── profiles/
│   │   │   │   ├── page.tsx     # Profile dashboard
│   │   │   │   └── [job_id]/
│   │   │   │       ├── page.tsx # Profile view (landing page)
│   │   │   │       └── edit/
│   │   │   │           └── page.tsx # Edit page
│   │   │   ├── layout.tsx
│   │   │   └── globals.css
│   │   ├── components/
│   │   │   ├── ui/              # shadcn/ui components
│   │   │   │   ├── button.tsx
│   │   │   │   ├── card.tsx
│   │   │   │   ├── progress.tsx
│   │   │   │   ├── tabs.tsx
│   │   │   │   └── ...
│   │   │   ├── UploadZone.tsx
│   │   │   ├── ProcessingProgress.tsx
│   │   │   ├── ProfileDashboard.tsx
│   │   │   ├── BusinessProfile.tsx
│   │   │   ├── ServiceCard.tsx
│   │   │   ├── ServiceDetails.tsx
│   │   │   ├── EditForms.tsx
│   │   │   └── ImageGallery.tsx
│   │   ├── lib/
│   │   │   ├── api.ts           # API client
│   │   │   ├── utils.ts
│   │   │   └── types.ts
│   │   └── data/
│   │       └── mockData.json
│   ├── package.json
│   └── tailwind.config.ts
│
└── api.py                       # Update existing FastAPI
```

---

## 🔧 **BACKEND CHANGES**

### **1. Update api.py - Add All Endpoints**

**File:** `backend/api/main.py`

```python
from fastapi import FastAPI, UploadFile, File, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import JSONResponse
import os
import json
from pathlib import Path
from datetime import datetime
import uuid

app = FastAPI(title="Digi-Biz API")

# CORS for Next.js
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Storage paths
PROFILES_DIR = Path("./storage/profiles")
PROFILES_DIR.mkdir(parents=True, exist_ok=True)

# In-memory job status (replace with DB in production)
jobs = {}

@app.post("/api/upload")
async def upload_zip(file: UploadFile = File(...)):
    """Upload ZIP and start processing"""
    job_id = str(uuid.uuid4())
    
    # Save file
    upload_path = PROFILES_DIR / f"{job_id}_{file.filename}"
    with open(upload_path, "wb") as f:
        content = await file.read()
        f.write(content)
    
    # Initialize job status
    jobs[job_id] = {
        "job_id": job_id,
        "status": "processing",
        "progress": 0.0,
        "current_phase": "upload",
        "created_at": datetime.now().isoformat(),
        "profile_path": None
    }
    
    # Start background processing
    import asyncio
    asyncio.create_task(process_job(job_id, str(upload_path)))
    
    return {"job_id": job_id, "status": "processing"}

@app.get("/api/status/{job_id}")
async def get_status(job_id: str):
    """Get processing status"""
    job = jobs.get(job_id)
    if not job:
        raise HTTPException(404, "Job not found")
    
    return job

@app.get("/api/profiles")
async def list_profiles():
    """List all profiles"""
    profiles = []
    for profile_file in PROFILES_DIR.glob("*.json"):
        if profile_file.name.startswith("profile_"):
            with open(profile_file) as f:
                profile = json.load(f)
                profiles.append({
                    "job_id": profile.get("job_id"),
                    "name": profile.get("business_info", {}).get("name"),
                    "created_at": profile.get("created_at"),
                    "service_count": len(profile.get("services", []))
                })
    return {"profiles": profiles}

@app.get("/api/profile/{job_id}")
async def get_profile(job_id: str):
    """Get complete profile"""
    profile_path = PROFILES_DIR / f"profile_{job_id}.json"
    
    if not profile_path.exists():
        raise HTTPException(404, "Profile not found")
    
    with open(profile_path) as f:
        profile = json.load(f)
    
    return profile

@app.put("/api/profile/{job_id}")
async def update_profile(job_id: str, profile: dict):
    """Update profile (edit)"""
    profile_path = PROFILES_DIR / f"profile_{job_id}.json"
    
    if not profile_path.exists():
        raise HTTPException(404, "Profile not found")
    
    # Add updated timestamp
    profile["updated_at"] = datetime.now().isoformat()
    
    # Save
    with open(profile_path, "w") as f:
        json.dump(profile, f, indent=2)
    
    return {"success": True, "message": "Profile updated"}

@app.delete("/api/profile/{job_id}")
async def delete_profile(job_id: str):
    """Delete profile"""
    profile_path = PROFILES_DIR / f"profile_{job_id}.json"
    
    if not profile_path.exists():
        raise HTTPException(404, "Profile not found")
    
    profile_path.unlink()
    
    return {"success": True, "message": "Profile deleted"}

@app.post("/api/profile/{job_id}/export")
async def export_profile(job_id: str):
    """Export profile as JSON"""
    profile_path = PROFILES_DIR / f"profile_{job_id}.json"
    
    if not profile_path.exists():
        raise HTTPException(404, "Profile not found")
    
    with open(profile_path) as f:
        profile = json.load(f)
    
    return JSONResponse(
        content=profile,
        headers={"Content-Disposition": f"attachment; filename=profile_{job_id}.json"}
    )

# Background processing function
async def process_job(job_id: str, file_path: str):
    """Process job in background with progress updates"""
    from backend.agents.file_discovery import FileDiscoveryAgent, FileDiscoveryInput
    from backend.agents.document_parsing import DocumentParsingAgent, DocumentParsingInput
    from backend.agents.table_extraction import TableExtractionAgent, TableExtractionInput
    from backend.agents.media_extraction import MediaExtractionAgent, MediaExtractionInput
    from backend.agents.indexing import IndexingAgent, IndexingInput
    from backend.agents.schema_mapping_simple import SchemaMappingAgent
    from backend.models.schemas import SchemaMappingInput
    from backend.utils.storage_manager import StorageManager
    
    try:
        # Update status
        jobs[job_id]["current_phase"] = "file_discovery"
        jobs[job_id]["progress"] = 10.0
        
        # Step 1: File Discovery
        storage_manager = StorageManager(storage_base=str(PROFILES_DIR))
        discovery_agent = FileDiscoveryAgent(storage_manager=storage_manager)
        discovery_output = discovery_agent.discover(
            FileDiscoveryInput(zip_file_path=file_path, job_id=job_id)
        )
        
        # Step 2: Document Parsing (30%)
        jobs[job_id]["current_phase"] = "document_parsing"
        jobs[job_id]["progress"] = 30.0
        parsing_agent = DocumentParsingAgent(enable_ocr=False)
        parsing_output = parsing_agent.parse(
            DocumentParsingInput(documents=discovery_output.documents, job_id=job_id)
        )
        
        # Step 3: Table Extraction (50%)
        jobs[job_id]["current_phase"] = "table_extraction"
        jobs[job_id]["progress"] = 50.0
        table_agent = TableExtractionAgent()
        tables_output = table_agent.extract(
            TableExtractionInput(parsed_documents=parsing_output.parsed_documents, job_id=job_id)
        )
        
        # Step 4: Media Extraction (70%)
        jobs[job_id]["current_phase"] = "media_extraction"
        jobs[job_id]["progress"] = 70.0
        media_agent = MediaExtractionAgent(enable_deduplication=False)
        media_output = media_agent.extract_all(
            MediaExtractionInput(
                parsed_documents=parsing_output.parsed_documents,
                standalone_files=[img.file_path for img in discovery_output.images],
                job_id=job_id
            )
        )
        
        # Step 5: Indexing (85%)
        jobs[job_id]["current_phase"] = "indexing"
        jobs[job_id]["progress"] = 85.0
        indexing_agent = IndexingAgent()
        page_index = indexing_agent.build_index(
            IndexingInput(
                parsed_documents=parsing_output.parsed_documents,
                tables=tables_output.tables,
                images=media_output.media.images if media_output.success else [],
                job_id=job_id
            )
        )
        
        # Step 6: Schema Mapping (95%)
        jobs[job_id]["current_phase"] = "schema_mapping"
        jobs[job_id]["progress"] = 95.0
        schema_agent = SchemaMappingAgent()
        mapping_output = schema_agent.map_to_schema(
            SchemaMappingInput(page_index=page_index, job_id=job_id)
        )
        
        if not mapping_output.success:
            raise Exception(f"Schema mapping failed: {mapping_output.errors}")
        
        # Add metadata
        profile = mapping_output.profile.model_dump(mode='json')
        profile["job_id"] = job_id
        profile["created_at"] = datetime.now().isoformat()
        
        # Save profile
        profile_path = PROFILES_DIR / f"profile_{job_id}.json"
        with open(profile_path, "w") as f:
            json.dump(profile, f, indent=2)
        
        jobs[job_id]["profile_path"] = str(profile_path)
        jobs[job_id]["status"] = "completed"
        jobs[job_id]["progress"] = 100.0
        jobs[job_id]["current_phase"] = "done"
        
        print(f"✅ Job {job_id} completed successfully")
        
    except Exception as e:
        jobs[job_id]["status"] = "failed"
        jobs[job_id]["error"] = str(e)
        print(f"❌ Job {job_id} failed: {e}")
```

---

## 🎨 **FRONTEND IMPLEMENTATION**

### **Page 1: Landing Page (Upload)**

**File:** `frontend/src/app/page.tsx`

**Features:**
- Hero section with Digi-Biz branding
- Drag-drop upload zone
- Recent profiles list
- Clean, minimal design

---

### **Page 2: Processing Page**

**File:** `frontend/src/app/processing/[job_id]/page.tsx`

**Features:**
- Progress bar (0-100%)
- Current phase display:
  - 📁 File Discovery (10%)
  - 📄 Document Parsing (30%)
  - 📊 Table Extraction (50%)
  - 🖼️ Media Extraction (70%)
  - 🔍 Indexing (85%)
  - 🤖 Schema Mapping (95%)
  - ✅ Complete (100%)
- Auto-redirect to profile on completion
- Cannot navigate away (modal-like)

---

### **Page 3: Profile Dashboard**

**File:** `frontend/src/app/profiles/page.tsx`

**Features:**
- Grid of all profiles
- Each card shows:
  - Business name
  - Service count
  - Created date
  - Preview image
- "Create New" button
- Search/filter

---

### **Page 4: Profile View (Landing Page)**

**File:** `frontend/src/app/profiles/[job_id]/page.tsx`

**Features:**
- **Hero Section:**
  - Business name
  - Category badge
  - Description
  - Contact info (phone, email, website)
  - Location
  - Hero image (if available)

- **Services Grid:**
  - Service cards with image, name, price, duration
  - Click to view details

- **Service Details Modal/Page:**
  - **Tabs:**
    - Overview (description, category)
    - Itinerary (day-by-day)
    - Info (inclusions, exclusions, what to carry)
    - FAQ (questions & answers)
    - Policy (cancellation, payment)

- **Image Gallery:**
  - Grid of all images
  - Lightbox view

- **Actions:**
  - Edit Profile button
  - Export JSON button
  - Delete Profile button

---

### **Page 5: Edit Page**

**File:** `frontend/src/app/profiles/[job_id]/edit/page.tsx`

**Features:**
- **Business Info Form:**
  - Name, description, category
  - Contact (phone, email, website)
  - Location
  - Hero image upload

- **Services Editor:**
  - List of all services
  - Add/Remove services
  - Edit each service:
    - Name, description, category
    - Pricing (base price, currency, price type)
    - Details (duration, difficulty, best time)
    - Itinerary (add/remove days)
    - Inclusions/Exclusions (tag input)
    - FAQs (Q&A pairs)
    - Images upload

- **Actions:**
  - Save button
  - Cancel button (back to profile)
  - Auto-save draft (optional)

---

## 🎯 **COMPONENTS NEEDED**

### **shadcn/ui Components:**
```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add progress
npx shadcn-ui@latest add tabs
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add form
npx shadcn-ui@latest add input
npx shadcn-ui@latest add textarea
npx shadcn-ui@latest add label
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add dropdown-menu
npx shadcn-ui@latest add toast
```

### **Custom Components:**
1. `UploadZone.tsx` - Drag-drop upload
2. `ProcessingProgress.tsx` - Progress bar with phases
3. `ProfileDashboard.tsx` - Profile grid
4. `BusinessProfile.tsx` - Profile display
5. `ServiceCard.tsx` - Service card
6. `ServiceDetails.tsx` - Service details with tabs
7. `EditForms.tsx` - Edit forms
8. `ImageGallery.tsx` - Image gallery
9. `ItineraryBuilder.tsx` - Itinerary editor
10. `TagInput.tsx` - For inclusions/exclusions

---

## 📋 **IMPLEMENTATION CHECKLIST**

### **Phase 1: Backend API (8-10 hours)**
- [ ] Update api.py with all endpoints
- [ ] Add profile storage (JSON files)
- [ ] Add background processing
- [ ] Add progress tracking
- [ ] Test all endpoints with Postman
- [ ] Add error handling
- [ ] Add CORS for localhost:3000

### **Phase 2: Frontend Setup (4-6 hours)**
- [ ] Install shadcn/ui components
- [ ] Setup Tailwind config
- [ ] Create API client (lib/api.ts)
- [ ] Create types (lib/types.ts)
- [ ] Setup routing

### **Phase 3: Core Pages (10-12 hours)**
- [ ] Landing page (upload)
- [ ] Processing page
- [ ] Profile dashboard
- [ ] Profile view page
- [ ] Edit page
- [ ] All components

### **Phase 4: Integration (6-8 hours)**
- [ ] Connect upload to API
- [ ] Connect processing status polling
- [ ] Connect profile loading
- [ ] Connect edit forms
- [ ] Connect export
- [ ] Connect delete
- [ ] Error handling
- [ ] Loading states

### **Phase 5: Polish (4-6 hours)**
- [ ] Responsive design
- [ ] Animations
- [ ] Toast notifications
- [ ] Better error messages
- [ ] Performance optimization
- [ ] Test with real data

**Total: 32-42 hours**

---

## 🚀 **NEXT STEPS**

1. **Confirm this plan** matches your vision
2. **I'll start implementing** Phase 1 (Backend API)
3. **Test backend** with Postman
4. **Build frontend** incrementally
5. **Test together**

---

## ❓ **FINAL QUESTIONS BEFORE I START:**

1. **Should I proceed with this exact plan?**
2. **Any specific design preferences?** (colors, layout, etc.)
3. **Should I keep the existing mockData.json** as fallback?
4. **Any specific trek companies** to reference for design?

---

**Ready to start building! Just say "GO" and I'll begin with Phase 1!** 🚀