update

README.md

@@ -1,10 +1,269 @@
 ---
-title: PostGen
-emoji: 🐨
-colorFrom: yellow
-colorTo: green
+title: PostGen - LinkedIn Content Scheduler
+emoji: 🚀
+colorFrom: blue
+colorTo: indigo
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# PostGen - AI-Powered LinkedIn Content Scheduler
+
+PostGen is a comprehensive LinkedIn content scheduling application that integrates with Canva and LinkedIn APIs to automate content creation and posting. The app uses GPT for AI-generated content and Canva brand templates for consistent visual design.
+
+## Features
+
+- **AI Content Generation**: Uses GPT to generate engaging LinkedIn posts
+- **Canva Integration**: Access and apply Canva brand templates using the Autofill API
+- **LinkedIn Scheduling**: Schedule and publish posts directly to LinkedIn
+- **Asset Repository**: Upload and organize marketing materials by product categories
+- **Smart Scheduler**: Agentic AI automatically generates content schedules based on date ranges, products, and post types
+- **Product Categories**: Support for OCR, P2P, and O2C products with sub-categories
+
+## Tech Stack
+
+- **Frontend**: React, React Router, Tailwind CSS, Framer Motion, shadcn/ui
+- **Backend**: FastAPI, Python
+- **AI**: OpenAI GPT (latest model)
+- **APIs**: Canva Connect API, LinkedIn API
+
+## Setup Instructions
+
+### Prerequisites
+
+1. **Canva Account**: 
+   - Canva Teams account (free trial available)
+   - Canva Connect API integration created
+   - Autofill API access registered
+
+2. **LinkedIn Account**:
+   - LinkedIn Developer account
+   - LinkedIn App created with appropriate permissions
+
+3. **OpenAI Account**:
+   - OpenAI API key with access to GPT models
+
+### Environment Variables
+
+Create a `.env` file in the backend directory with the following variables:
+
+```env
+# OpenAI
+OPENAI_API_KEY=your_openai_api_key
+OPENAI_MODEL=gpt-4o
+
+# Canva (optional - can be passed via API)
+CANVA_ACCESS_TOKEN=your_canva_access_token
+
+# LinkedIn (optional - can be passed via API)
+LINKEDIN_ACCESS_TOKEN=your_linkedin_access_token
+LINKEDIN_PERSON_URN=your_linkedin_person_urn
+
+# Database (for production)
+DATABASE_URL=postgresql://user:password@localhost/postgen
+```
+
+### Local Development
+
+1. **Install Frontend Dependencies**:
+```bash
+cd frontend
+npm install
+```
+
+2. **Install Backend Dependencies**:
+```bash
+cd backend
+pip install -r requirements.txt
+```
+
+3. **Run Frontend** (development mode):
+```bash
+cd frontend
+npm run dev
+```
+
+4. **Run Backend**:
+```bash
+cd backend
+uvicorn app.main:app --reload --port 8000
+```
+
+### Building for Production
+
+1. **Build Frontend**:
+```bash
+cd frontend
+npm run build
+```
+
+2. **Build Docker Image**:
+```bash
+docker build -t postgen .
+```
+
+3. **Run Docker Container**:
+```bash
+docker run -p 7860:7860 --env-file .env postgen
+```
+
+## Deployment to HuggingFace Spaces
+
+### Step 1: Prepare Your Repository
+
+1. Ensure all code is committed and pushed to your Git repository
+2. Make sure the `Dockerfile` is in the root directory
+3. Ensure `README.md` has the HuggingFace Spaces configuration at the top
+
+### Step 2: Create a HuggingFace Space
+
+1. Go to [HuggingFace Spaces](https://huggingface.co/spaces)
+2. Click "Create new Space"
+3. Choose:
+   - **SDK**: Docker
+   - **Name**: postgen (or your preferred name)
+   - **Visibility**: Public or Private
+
+### Step 3: Configure Environment Variables
+
+1. In your HuggingFace Space settings, go to "Variables and secrets"
+2. Add the following secrets:
+   - `OPENAI_API_KEY`: Your OpenAI API key
+   - `OPENAI_MODEL`: gpt-4o (or your preferred model)
+   - `CANVA_ACCESS_TOKEN`: (Optional, can be set per user)
+   - `LINKEDIN_ACCESS_TOKEN`: (Optional, can be set per user)
+
+### Step 4: Connect Your Repository
+
+1. In Space settings, connect your Git repository
+2. Or push your code directly to the HuggingFace Space repository
+
+### Step 5: Deploy
+
+1. HuggingFace will automatically build and deploy your Docker image
+2. Monitor the build logs in the Space interface
+3. Once deployed, your app will be available at: `https://huggingface.co/spaces/your-username/postgen`
+
+## API Integration Guide
+
+### Canva Integration
+
+1. **Get Access Token**:
+   - Create a Canva Connect API integration
+   - Complete OAuth flow to get access token
+   - Token should have scopes: `design:content:write`, `design:content:read`, `brandtemplate:content:read`, `brandtemplate:meta:read`
+
+2. **Using Brand Templates**:
+   - Call `/api/canva/brand-templates` to get available templates
+   - Call `/api/canva/brand-templates/{id}/dataset` to get template structure
+   - Call `/api/canva/autofill` to create a design from template
+   - Poll `/api/canva/autofill/{job_id}` to check status
+
+### LinkedIn Integration
+
+1. **Get Access Token**:
+   - Create a LinkedIn App
+   - Request permissions: `w_member_social`, `r_liteprofile`
+   - Complete OAuth flow to get access token
+
+2. **Posting to LinkedIn**:
+   - Call `/api/linkedin/post` with your access token and post content
+   - Media can be included via `media_uris` parameter
+
+### AI Content Generation
+
+1. **Generate Content**:
+   - Call `/api/ai/generate-content` with:
+     - `product_category`: 'ocr', 'p2p', or 'o2c'
+     - `post_type`: 'carousel', 'cover_content', 'content_only', or 'webinar'
+     - `context`: Optional additional context
+     - `assets`: Optional list of asset IDs
+
+## Project Structure
+
+```
+PostGen/
+├── frontend/
+│   ├── src/
+│   │   ├── components/
+│   │   │   ├── ui/          # shadcn/ui components
+│   │   │   └── Layout.jsx   # Main layout component
+│   │   ├── pages/
+│   │   │   ├── Dashboard.jsx
+│   │   │   ├── Repository.jsx
+│   │   │   ├── Scheduler.jsx
+│   │   │   ├── PostEditor.jsx
+│   │   │   └── Integrations.jsx
+│   │   ├── App.jsx
+│   │   ├── main.jsx
+│   │   └── utils.js
+│   ├── package.json
+│   └── vite.config.js
+├── backend/
+│   ├── app/
+│   │   ├── services/
+│   │   │   ├── canva_service.py
+│   │   │   ├── linkedin_service.py
+│   │   │   └── ai_service.py
+│   │   ├── models.py
+│   │   ├── schemas.py
+│   │   └── main.py
+│   └── requirements.txt
+├── Dockerfile
+└── README.md
+```
+
+## Next Steps After Deployment
+
+1. **Connect Integrations**:
+   - Go to the Integrations page
+   - Connect your Canva account
+   - Connect your LinkedIn account
+
+2. **Upload Assets**:
+   - Go to Repository page
+   - Upload marketing materials, screenshots, and documents
+   - Classify them by product category
+
+3. **Create Campaign**:
+   - Go to Scheduler page
+   - Click "Campaign Settings"
+   - Configure date range, products, post types, and frequency
+   - Click "Generate Schedule"
+
+4. **Review and Schedule**:
+   - Review AI-generated posts
+   - Edit content if needed
+   - Confirm and schedule posts
+
+## Troubleshooting
+
+### Build Issues
+
+- **Frontend build fails**: Check Node.js version (requires 18+)
+- **Backend import errors**: Ensure all Python packages are installed
+- **Docker build fails**: Check Dockerfile syntax and paths
+
+### Runtime Issues
+
+- **API errors**: Verify environment variables are set correctly
+- **Canva API errors**: Check access token and scopes
+- **LinkedIn API errors**: Verify OAuth permissions
+- **AI generation fails**: Check OpenAI API key and quota
+
+### Common Issues
+
+1. **CORS errors**: Already handled in backend CORS middleware
+2. **Port conflicts**: HuggingFace Spaces uses port 7860
+3. **File uploads**: Ensure uploads directory has write permissions
+
+## Support
+
+For issues or questions:
+- Check the API documentation in the code
+- Review Canva API docs: https://www.canva.dev/docs/connect/
+- Review LinkedIn API docs: https://docs.microsoft.com/en-us/linkedin/
+
+## License
+
+This project is private and proprietary.

backend/app/__init__.py

@@ -0,0 +1,2 @@
+# PostGen Backend Application
+

backend/app/main.py

@@ -1,10 +1,22 @@
-from fastapi import FastAPI
-from fastapi.responses import FileResponse
+from fastapi import FastAPI, UploadFile, File, HTTPException, Depends
+from fastapi.responses import FileResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from pathlib import Path
+from typing import List, Optional
+import os
+from datetime import datetime
 
-app = FastAPI()
+from app.schemas import (
+    IntegrationResponse, AssetResponse, PostResponse, CampaignResponse,
+    CanvaBrandTemplate, CanvaAutofillRequest, CanvaAutofillResponse,
+    LinkedInPostRequest, AIContentRequest, AIContentResponse
+)
+from app.services.canva_service import CanvaService
+from app.services.linkedin_service import LinkedInService
+from app.services.ai_service import AIService
+
+app = FastAPI(title="PostGen API", version="1.0.0")
 
 app.add_middleware(
     CORSMiddleware,
@@ -14,14 +26,206 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# ---- API ----
+# Services
+ai_service = AIService()
+
+# ---- API Endpoints ----
+
 @app.get("/api/health")
 def health():
-    return {"status": "ok"}
+    return {"status": "ok", "message": "PostGen API is running"}
 
 @app.get("/api/hello")
 def hello():
-    return {"message": "Hello from FastAPI"}
+    return {"message": "Hello from PostGen API"}
+
+# ---- Canva Integration ----
+
+@app.get("/api/canva/brand-templates", response_model=List[CanvaBrandTemplate])
+async def get_canva_brand_templates(access_token: str):
+    """Get list of Canva brand templates"""
+    try:
+        canva_service = CanvaService(access_token)
+        templates = await canva_service.get_brand_templates()
+        return templates
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/canva/brand-templates/{template_id}/dataset")
+async def get_canva_template_dataset(template_id: str, access_token: str):
+    """Get dataset for a specific brand template"""
+    try:
+        canva_service = CanvaService(access_token)
+        dataset = await canva_service.get_brand_template_dataset(template_id)
+        return dataset
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/api/canva/autofill", response_model=CanvaAutofillResponse)
+async def create_canva_autofill(request: CanvaAutofillRequest, access_token: str):
+    """Create an autofill job for a brand template"""
+    try:
+        canva_service = CanvaService(access_token)
+        response = await canva_service.create_autofill_job(request)
+        return response
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/canva/autofill/{job_id}")
+async def get_canva_autofill_status(job_id: str, access_token: str):
+    """Get status of an autofill job"""
+    try:
+        canva_service = CanvaService(access_token)
+        status = await canva_service.get_autofill_job_status(job_id)
+        return status
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+# ---- LinkedIn Integration ----
+
+@app.post("/api/linkedin/post")
+async def create_linkedin_post(request: LinkedInPostRequest, access_token: str):
+    """Create a LinkedIn post"""
+    try:
+        linkedin_service = LinkedInService(access_token)
+        result = await linkedin_service.create_post(
+            text=request.text,
+            media_uris=request.media_uris
+        )
+        return result
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/linkedin/profile")
+async def get_linkedin_profile(access_token: str):
+    """Get LinkedIn user profile"""
+    try:
+        linkedin_service = LinkedInService(access_token)
+        profile = await linkedin_service.get_user_profile()
+        return profile
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+# ---- AI Content Generation ----
+
+@app.post("/api/ai/generate-content", response_model=AIContentResponse)
+async def generate_ai_content(request: AIContentRequest):
+    """Generate LinkedIn post content using GPT"""
+    try:
+        # Get assets context if provided
+        assets_context = None
+        if request.assets:
+            # In a real implementation, fetch asset descriptions from database
+            assets_context = f"User has {len(request.assets)} assets available"
+        
+        response = await ai_service.generate_content(request, assets_context)
+        return response
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"AI generation failed: {str(e)}")
+
+# ---- Asset Management ----
+
+@app.post("/api/assets/upload")
+async def upload_asset(
+    file: UploadFile = File(...),
+    product_category: str = None,
+    sub_category: Optional[str] = None
+):
+    """Upload an asset to the repository"""
+    try:
+        # Create uploads directory if it doesn't exist
+        upload_dir = Path("uploads")
+        upload_dir.mkdir(exist_ok=True)
+        
+        # Save file
+        file_path = upload_dir / file.filename
+        with open(file_path, "wb") as buffer:
+            content = await file.read()
+            buffer.write(content)
+        
+        # In a real implementation, save to database
+        return {
+            "id": 1,
+            "name": file.filename,
+            "file_type": file.content_type.split('/')[0] if file.content_type else "unknown",
+            "product_category": product_category,
+            "sub_category": sub_category,
+            "size": len(content),
+            "created_at": datetime.utcnow().isoformat()
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/assets", response_model=List[AssetResponse])
+async def get_assets(product_category: Optional[str] = None):
+    """Get list of assets"""
+    # Mock data for now
+    return [
+        {
+            "id": 1,
+            "name": "OCR_Demo_Screenshot.png",
+            "file_type": "image",
+            "product_category": "ocr",
+            "sub_category": None,
+            "size": 2516582,
+            "created_at": datetime.utcnow()
+        }
+    ]
+
+# ---- Post Management ----
+
+@app.post("/api/posts", response_model=PostResponse)
+async def create_post(post_data: dict):
+    """Create a new post"""
+    # In a real implementation, save to database
+    return {
+        "id": 1,
+        "title": post_data.get("title", "New Post"),
+        "content": post_data.get("content", ""),
+        "post_type": post_data.get("post_type", "content_only"),
+        "product_category": post_data.get("product_category", "ocr"),
+        "scheduled_date": post_data.get("scheduled_date", datetime.utcnow()),
+        "status": "draft",
+        "created_at": datetime.utcnow()
+    }
+
+@app.get("/api/posts", response_model=List[PostResponse])
+async def get_posts():
+    """Get list of posts"""
+    # Mock data for now
+    return [
+        {
+            "id": 1,
+            "title": "OCR Document Automation Benefits",
+            "content": "Transform your document processing...",
+            "post_type": "carousel",
+            "product_category": "ocr",
+            "scheduled_date": datetime.utcnow(),
+            "status": "scheduled",
+            "created_at": datetime.utcnow()
+        }
+    ]
+
+# ---- Campaign Management ----
+
+@app.post("/api/campaigns/generate")
+async def generate_campaign(campaign_data: dict):
+    """Generate a campaign schedule using agentic AI"""
+    try:
+        # This would use AI to generate a schedule based on:
+        # - Date range
+        # - Products to focus on
+        # - Post types mix
+        # - Posts per week
+        
+        # Mock implementation
+        return {
+            "campaign_id": 1,
+            "generated_posts": 12,
+            "schedule": []
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
 
 # ---- Frontend static serving ----
 FRONTEND_DIST = Path(__file__).resolve().parents[2] / "frontend" / "dist"

backend/app/models.py

@@ -0,0 +1,86 @@
+from sqlalchemy import Column, Integer, String, DateTime, Boolean, JSON, Text, ForeignKey
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import relationship
+from datetime import datetime
+
+Base = declarative_base()
+
+class User(Base):
+    __tablename__ = "users"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    email = Column(String, unique=True, index=True)
+    name = Column(String)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    
+    integrations = relationship("Integration", back_populates="user")
+    assets = relationship("Asset", back_populates="user")
+    posts = relationship("Post", back_populates="user")
+
+class Integration(Base):
+    __tablename__ = "integrations"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    provider = Column(String)  # 'linkedin' or 'canva'
+    access_token = Column(Text)
+    refresh_token = Column(Text)
+    expires_at = Column(DateTime)
+    account_info = Column(JSON)
+    connected = Column(Boolean, default=False)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    user = relationship("User", back_populates="integrations")
+
+class Asset(Base):
+    __tablename__ = "assets"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    name = Column(String)
+    file_path = Column(String)
+    file_type = Column(String)  # 'image', 'document', 'video'
+    product_category = Column(String)  # 'ocr', 'p2p', 'o2c'
+    sub_category = Column(String, nullable=True)
+    size = Column(Integer)  # in bytes
+    metadata = Column(JSON, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    
+    user = relationship("User", back_populates="assets")
+
+class Post(Base):
+    __tablename__ = "posts"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    title = Column(String)
+    content = Column(Text)
+    post_type = Column(String)  # 'carousel', 'cover_content', 'content_only', 'webinar'
+    product_category = Column(String)
+    scheduled_date = Column(DateTime)
+    status = Column(String)  # 'draft', 'scheduled', 'published', 'failed'
+    linkedin_post_id = Column(String, nullable=True)
+    canva_design_id = Column(String, nullable=True)
+    assets = Column(JSON)  # List of asset IDs
+    metadata = Column(JSON, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    user = relationship("User", back_populates="posts")
+
+class Campaign(Base):
+    __tablename__ = "campaigns"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    name = Column(String)
+    date_range_start = Column(DateTime)
+    date_range_end = Column(DateTime)
+    products = Column(JSON)  # List of product IDs
+    post_types = Column(JSON)  # List of post type IDs
+    posts_per_week = Column(Integer)
+    status = Column(String)  # 'active', 'paused', 'completed'
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+

backend/app/schemas.py

@@ -0,0 +1,115 @@
+from pydantic import BaseModel, EmailStr
+from datetime import datetime
+from typing import Optional, List, Dict, Any
+
+class IntegrationCreate(BaseModel):
+    provider: str
+    access_token: str
+    refresh_token: Optional[str] = None
+    expires_at: Optional[datetime] = None
+    account_info: Optional[Dict[str, Any]] = None
+
+class IntegrationResponse(BaseModel):
+    id: int
+    provider: str
+    connected: bool
+    account_info: Optional[Dict[str, Any]] = None
+    created_at: datetime
+    
+    class Config:
+        from_attributes = True
+
+class AssetCreate(BaseModel):
+    name: str
+    file_type: str
+    product_category: str
+    sub_category: Optional[str] = None
+    size: int
+    metadata: Optional[Dict[str, Any]] = None
+
+class AssetResponse(BaseModel):
+    id: int
+    name: str
+    file_type: str
+    product_category: str
+    sub_category: Optional[str] = None
+    size: int
+    created_at: datetime
+    
+    class Config:
+        from_attributes = True
+
+class PostCreate(BaseModel):
+    title: str
+    content: str
+    post_type: str
+    product_category: str
+    scheduled_date: datetime
+    assets: Optional[List[int]] = None
+
+class PostResponse(BaseModel):
+    id: int
+    title: str
+    content: str
+    post_type: str
+    product_category: str
+    scheduled_date: datetime
+    status: str
+    created_at: datetime
+    
+    class Config:
+        from_attributes = True
+
+class CampaignCreate(BaseModel):
+    name: str
+    date_range_start: datetime
+    date_range_end: datetime
+    products: List[str]
+    post_types: List[str]
+    posts_per_week: int
+
+class CampaignResponse(BaseModel):
+    id: int
+    name: str
+    date_range_start: datetime
+    date_range_end: datetime
+    products: List[str]
+    post_types: List[str]
+    posts_per_week: int
+    status: str
+    created_at: datetime
+    
+    class Config:
+        from_attributes = True
+
+class CanvaBrandTemplate(BaseModel):
+    id: str
+    title: str
+    view_url: str
+    create_url: str
+    thumbnail: Optional[Dict[str, Any]] = None
+
+class CanvaAutofillRequest(BaseModel):
+    brand_template_id: str
+    title: str
+    data: Dict[str, Any]
+
+class CanvaAutofillResponse(BaseModel):
+    job_id: str
+    status: str
+
+class LinkedInPostRequest(BaseModel):
+    text: str
+    media_uris: Optional[List[str]] = None
+    scheduled_time: Optional[datetime] = None
+
+class AIContentRequest(BaseModel):
+    product_category: str
+    post_type: str
+    context: Optional[str] = None
+    assets: Optional[List[int]] = None
+
+class AIContentResponse(BaseModel):
+    content: str
+    suggested_hashtags: List[str]
+

backend/app/services/__init__.py

@@ -0,0 +1,2 @@
+# Services package
+

backend/app/services/ai_service.py

@@ -0,0 +1,91 @@
+import httpx
+import os
+from typing import List, Dict, Any, Optional
+from openai import OpenAI
+from app.schemas import AIContentRequest, AIContentResponse
+
+class AIService:
+    def __init__(self):
+        self.client = OpenAI(api_key=os.getenv("OPENAI_API_KEY", ""))
+        self.model = os.getenv("OPENAI_MODEL", "gpt-4o")
+    
+    async def generate_content(self, request: AIContentRequest, assets_context: Optional[str] = None) -> AIContentResponse:
+        """Generate LinkedIn post content using GPT"""
+        
+        product_descriptions = {
+            "ocr": "Intelligent Document Parsing (OCR) - AI-powered document processing and data extraction",
+            "p2p": "Purchase To Pay (P2P) - End-to-end procurement and accounts payable automation",
+            "o2c": "Order to Cash (O2C) - Complete order management and accounts receivable workflow"
+        }
+        
+        post_type_descriptions = {
+            "carousel": "A multi-slide carousel post with visual storytelling",
+            "cover_content": "A post with a cover image and engaging text content",
+            "content_only": "A text-only post focused on valuable insights",
+            "webinar": "A webinar invitation post to promote an upcoming event"
+        }
+        
+        system_prompt = f"""You are an expert LinkedIn content creator specializing in B2B SaaS marketing. 
+Create engaging, professional LinkedIn posts that:
+- Are authentic and valuable to the audience
+- Include relevant hashtags (3-5 hashtags)
+- Use emojis sparingly and appropriately
+- Are optimized for engagement
+- Follow LinkedIn best practices
+
+Product: {product_descriptions.get(request.product_category, request.product_category)}
+Post Type: {post_type_descriptions.get(request.post_type, request.post_type)}
+"""
+        
+        user_prompt = f"""Create a LinkedIn post about {product_descriptions.get(request.product_category, request.product_category)}.
+Post type: {post_type_descriptions.get(request.post_type, request.post_type)}
+
+{f'Additional context: {request.context}' if request.context else ''}
+{f'Available assets: {assets_context}' if assets_context else ''}
+
+Make it engaging, professional, and include relevant hashtags at the end."""
+        
+        try:
+            response = self.client.chat.completions.create(
+                model=self.model,
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": user_prompt}
+                ],
+                temperature=0.7,
+                max_tokens=1000
+            )
+            
+            content = response.choices[0].message.content
+            
+            # Extract hashtags
+            hashtags = []
+            lines = content.split('\n')
+            for line in lines:
+                if '#' in line:
+                    hashtags.extend([tag.strip() for tag in line.split() if tag.startswith('#')])
+            
+            # If no hashtags found, generate some
+            if not hashtags:
+                hashtags = self._generate_hashtags(request.product_category)
+            
+            return AIContentResponse(
+                content=content,
+                suggested_hashtags=hashtags[:5]
+            )
+        except Exception as e:
+            # Fallback content if AI fails
+            return AIContentResponse(
+                content=f"🚀 Exciting news about {product_descriptions.get(request.product_category, 'our product')}!\n\nStay tuned for more updates.\n\n#Innovation #Technology",
+                suggested_hashtags=["#Innovation", "#Technology", "#Business"]
+            )
+    
+    def _generate_hashtags(self, product_category: str) -> List[str]:
+        """Generate relevant hashtags based on product category"""
+        hashtag_map = {
+            "ocr": ["#DocumentAutomation", "#OCR", "#AITechnology", "#DigitalTransformation", "#BusinessEfficiency"],
+            "p2p": ["#Procurement", "#AccountsPayable", "#FinanceAutomation", "#BusinessProcess", "#Efficiency"],
+            "o2c": ["#OrderManagement", "#AccountsReceivable", "#SalesAutomation", "#BusinessGrowth", "#CustomerExperience"]
+        }
+        return hashtag_map.get(product_category, ["#Innovation", "#Technology", "#Business"])
+

backend/app/services/canva_service.py

@@ -0,0 +1,82 @@
+import httpx
+import os
+from typing import List, Dict, Any, Optional
+from app.schemas import CanvaBrandTemplate, CanvaAutofillRequest, CanvaAutofillResponse
+
+CANVA_API_BASE = "https://api.canva.com/rest/v1"
+
+class CanvaService:
+    def __init__(self, access_token: str):
+        self.access_token = access_token
+        self.headers = {
+            "Authorization": f"Bearer {access_token}",
+            "Content-Type": "application/json"
+        }
+    
+    async def get_brand_templates(self, dataset: str = "non_empty") -> List[CanvaBrandTemplate]:
+        """Get list of Canva brand templates"""
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                f"{CANVA_API_BASE}/brand-templates",
+                params={"dataset": dataset},
+                headers=self.headers,
+                timeout=30.0
+            )
+            response.raise_for_status()
+            data = response.json()
+            
+            templates = []
+            for item in data.get("items", []):
+                templates.append(CanvaBrandTemplate(
+                    id=item["id"],
+                    title=item["title"],
+                    view_url=item.get("view_url", ""),
+                    create_url=item.get("create_url", ""),
+                    thumbnail=item.get("thumbnail")
+                ))
+            
+            return templates
+    
+    async def get_brand_template_dataset(self, template_id: str) -> Dict[str, Any]:
+        """Get dataset for a specific brand template"""
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                f"{CANVA_API_BASE}/brand-templates/{template_id}/dataset",
+                headers=self.headers,
+                timeout=30.0
+            )
+            response.raise_for_status()
+            return response.json()
+    
+    async def create_autofill_job(self, request: CanvaAutofillRequest) -> CanvaAutofillResponse:
+        """Create an autofill job for a brand template"""
+        async with httpx.AsyncClient() as client:
+            response = await client.post(
+                f"{CANVA_API_BASE}/autofills",
+                headers=self.headers,
+                json={
+                    "brand_template_id": request.brand_template_id,
+                    "title": request.title,
+                    "data": request.data
+                },
+                timeout=30.0
+            )
+            response.raise_for_status()
+            data = response.json()
+            
+            return CanvaAutofillResponse(
+                job_id=data["job"]["id"],
+                status=data["job"]["status"]
+            )
+    
+    async def get_autofill_job_status(self, job_id: str) -> Dict[str, Any]:
+        """Get status of an autofill job"""
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                f"{CANVA_API_BASE}/autofills/{job_id}",
+                headers=self.headers,
+                timeout=30.0
+            )
+            response.raise_for_status()
+            return response.json()
+

backend/app/services/linkedin_service.py

@@ -0,0 +1,113 @@
+import httpx
+import os
+from typing import Dict, Any, Optional
+from datetime import datetime
+
+LINKEDIN_API_BASE = "https://api.linkedin.com/v2"
+
+class LinkedInService:
+    def __init__(self, access_token: str):
+        self.access_token = access_token
+        self.headers = {
+            "Authorization": f"Bearer {access_token}",
+            "Content-Type": "application/json",
+            "X-Restli-Protocol-Version": "2.0.0"
+        }
+    
+    async def get_user_profile(self) -> Dict[str, Any]:
+        """Get LinkedIn user profile"""
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                f"{LINKEDIN_API_BASE}/userinfo",
+                headers=self.headers,
+                timeout=30.0
+            )
+            response.raise_for_status()
+            return response.json()
+    
+    async def create_post(self, text: str, media_uris: Optional[list] = None) -> Dict[str, Any]:
+        """Create a LinkedIn post"""
+        # First, register upload if media is provided
+        media_urn = None
+        if media_uris:
+            # Register media upload
+            media_urn = await self._register_upload(media_uris[0])
+        
+        # Create the post
+        post_data = {
+            "author": f"urn:li:person:{os.getenv('LINKEDIN_PERSON_URN', '')}",
+            "lifecycleState": "PUBLISHED",
+            "specificContent": {
+                "com.linkedin.ugc.ShareContent": {
+                    "shareCommentary": {
+                        "text": text
+                    },
+                    "shareMediaCategory": "IMAGE" if media_urn else "NONE"
+                }
+            },
+            "visibility": {
+                "com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
+            }
+        }
+        
+        if media_urn:
+            post_data["specificContent"]["com.linkedin.ugc.ShareContent"]["media"] = [
+                {
+                    "status": "READY",
+                    "media": media_urn
+                }
+            ]
+        
+        async with httpx.AsyncClient() as client:
+            response = await client.post(
+                f"{LINKEDIN_API_BASE}/ugcPosts",
+                headers=self.headers,
+                json=post_data,
+                timeout=30.0
+            )
+            response.raise_for_status()
+            return response.json()
+    
+    async def _register_upload(self, image_url: str) -> str:
+        """Register an image upload for LinkedIn"""
+        # This is a simplified version - actual implementation would upload the image
+        # and get a URN back
+        async with httpx.AsyncClient() as client:
+            # Register upload
+            register_response = await client.post(
+                f"{LINKEDIN_API_BASE}/assets?action=registerUpload",
+                headers=self.headers,
+                json={
+                    "registerUploadRequest": {
+                        "recipes": ["urn:li:digitalmediaRecipe:feedshare-image"],
+                        "owner": f"urn:li:person:{os.getenv('LINKEDIN_PERSON_URN', '')}",
+                        "serviceRelationships": [
+                            {
+                                "relationshipType": "OWNER",
+                                "identifier": "urn:li:userGeneratedContent"
+                            }
+                        ]
+                    }
+                },
+                timeout=30.0
+            )
+            register_response.raise_for_status()
+            register_data = register_response.json()
+            
+            # Upload the image
+            upload_url = register_data["value"]["uploadMechanism"]["com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest"]["uploadUrl"]
+            asset_urn = register_data["value"]["asset"]
+            
+            # Download and upload the image
+            image_response = await client.get(image_url, timeout=30.0)
+            image_response.raise_for_status()
+            
+            await client.put(
+                upload_url,
+                content=image_response.content,
+                headers={"Content-Type": "application/octet-stream"},
+                timeout=30.0
+            )
+            
+            return asset_urn
+

backend/requirements.txt

@@ -1,2 +1,13 @@
 fastapi
-uvicorn
+uvicorn[standard]
+python-multipart
+aiofiles
+httpx
+openai
+python-dotenv
+pydantic
+python-jose[cryptography]
+passlib[bcrypt]
+sqlalchemy
+alembic
+psycopg2-binary

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HF React + FastAPI by Seth</title>
+    <title>PostGen - LinkedIn Content Scheduler</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hf-react",
+  "name": "postgen",
   "private": true,
   "version": "0.0.1",
   "type": "module",
@@ -10,10 +10,35 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.344.0",
+    "date-fns": "^3.3.1",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-progress": "^1.0.3",
+    "class-variance-authority": "^0.7.0",
+    "react-day-picker": "^8.10.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

frontend/src/App.jsx

@@ -1,23 +1,25 @@
-import React, { useEffect, useState } from "react";
-
-export default function App() {
-  const [apiMsg, setApiMsg] = useState("");
-
-  useEffect(() => {
-    fetch("/api/hello")
-      .then((r) => r.json())
-      .then((d) => setApiMsg(d.message))
-      .catch(() => setApiMsg("API not reachable yet"));
-  }, []);
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Layout from "./components/Layout";
+import Dashboard from "./pages/Dashboard";
+import Repository from "./pages/Repository";
+import Scheduler from "./pages/Scheduler";
+import PostEditor from "./pages/PostEditor";
+import Integrations from "./pages/Integrations";
+import { createPageUrl } from "./utils";
 
+function App() {
   return (
-    <div style={{ fontFamily: "system-ui", padding: 24, lineHeight: 1.5 }}>
-      <h1>React + FastAPI (Docker, HF Spaces)</h1>
-      <p>This is a plain starter page. Customize freely.By Seth</p>
-
-      <div style={{ marginTop: 16, padding: 12, border: "1px solid #ddd", borderRadius: 8 }}>
-        <strong>API says:</strong> {apiMsg}
-      </div>
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Layout currentPageName="Dashboard"><Dashboard /></Layout>} />
+        <Route path={createPageUrl("Repository")} element={<Layout currentPageName="Repository"><Repository /></Layout>} />
+        <Route path={createPageUrl("Scheduler")} element={<Layout currentPageName="Scheduler"><Scheduler /></Layout>} />
+        <Route path={createPageUrl("PostEditor")} element={<Layout currentPageName="PostEditor"><PostEditor /></Layout>} />
+        <Route path={createPageUrl("Integrations")} element={<Layout currentPageName="Integrations"><Integrations /></Layout>} />
+      </Routes>
+    </Router>
   );
 }
+
+export default App;

frontend/src/components/Layout.jsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { createPageUrl } from '@/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  LayoutDashboard,
+  FolderOpen,
+  Calendar,
+  PenTool,
+  Link2,
+  Settings,
+  Menu,
+  X,
+  Bell,
+  Search,
+  ChevronDown,
+  Linkedin,
+  Sparkles,
+  LogOut,
+  User,
+  HelpCircle
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+const navItems = [
+  { name: 'Dashboard', icon: LayoutDashboard, href: 'Dashboard' },
+  { name: 'Repository', icon: FolderOpen, href: 'Repository' },
+  { name: 'Scheduler', icon: Calendar, href: 'Scheduler' },
+  { name: 'Post Editor', icon: PenTool, href: 'PostEditor' },
+  { name: 'Integrations', icon: Link2, href: 'Integrations' },
+];
+
+export default function Layout({ children, currentPageName }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const location = useLocation();
+  const currentPage = navItems.find(item => createPageUrl(item.href) === location.pathname)?.href || 'Dashboard';
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      {/* Mobile Sidebar Overlay */}
+      <AnimatePresence>
+        {sidebarOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar */}
+      <aside className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-slate-200 transform transition-transform duration-300 ease-in-out lg:translate-x-0 ${
+        sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+      }`}>
+        <div className="flex flex-col h-full">
+          {/* Logo */}
+          <div className="h-16 flex items-center justify-between px-4 border-b border-slate-100">
+            <Link to={createPageUrl('Dashboard')} className="flex items-center gap-2">
+              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500/30">
+                <Linkedin className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <span className="font-bold text-slate-900 text-lg">PostGen</span>
+                <span className="text-xs text-slate-500 block -mt-1">LinkedIn Scheduler</span>
+              </div>
+            </Link>
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              className="lg:hidden"
+              onClick={() => setSidebarOpen(false)}
+            >
+              <X className="w-5 h-5" />
+            </Button>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+            {navItems.map((item) => {
+              const isActive = currentPage === item.href;
+              return (
+                <Link
+                  key={item.name}
+                  to={createPageUrl(item.href)}
+                  onClick={() => setSidebarOpen(false)}
+                  className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${
+                    isActive
+                      ? 'bg-blue-50 text-blue-700'
+                      : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
+                  }`}
+                >
+                  <item.icon className={`w-5 h-5 ${isActive ? 'text-blue-600' : 'text-slate-400'}`} />
+                  {item.name}
+                  {item.name === 'Repository' && (
+                    <Badge className="ml-auto bg-blue-100 text-blue-700 text-[10px] px-1.5 py-0 border-0">
+                      156
+                    </Badge>
+                  )}
+                </Link>
+              );
+            })}
+          </nav>
+
+          {/* Quick Create */}
+          <div className="p-4 border-t border-slate-100">
+            <Link to={createPageUrl('PostEditor')}>
+              <Button className="w-full gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
+                <Sparkles className="w-4 h-4" />
+                Create Post
+              </Button>
+            </Link>
+          </div>
+
+          {/* User Profile */}
+          <div className="p-4 border-t border-slate-100">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="flex items-center gap-3 w-full p-2 rounded-xl hover:bg-slate-50 transition-colors">
+                  <Avatar className="h-9 w-9">
+                    <AvatarImage src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop" />
+                    <AvatarFallback>AB</AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 text-left">
+                    <p className="text-sm font-medium text-slate-900">Alex Business</p>
+                    <p className="text-xs text-slate-500">Pro Plan</p>
+                  </div>
+                  <ChevronDown className="w-4 h-4 text-slate-400" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <User className="w-4 h-4 mr-2" />
+                  Profile Settings
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Settings className="w-4 h-4 mr-2" />
+                  Preferences
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <HelpCircle className="w-4 h-4 mr-2" />
+                  Help & Support
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-red-600">
+                  <LogOut className="w-4 h-4 mr-2" />
+                  Sign Out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <div className="lg:pl-64">
+        {/* Top Header */}
+        <header className="h-16 bg-white border-b border-slate-200 sticky top-0 z-30">
+          <div className="h-full px-4 flex items-center justify-between gap-4">
+            {/* Mobile Menu Toggle */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="lg:hidden"
+              onClick={() => setSidebarOpen(true)}
+            >
+              <Menu className="w-5 h-5" />
+            </Button>
+
+            {/* Search */}
+            <div className="flex-1 max-w-md hidden sm:block">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <Input
+                  placeholder="Search posts, assets, schedules..."
+                  className="pl-10 bg-slate-50 border-slate-200 focus:bg-white"
+                />
+              </div>
+            </div>
+
+            {/* Right Actions */}
+            <div className="flex items-center gap-2">
+              <Button variant="ghost" size="icon" className="relative">
+                <Bell className="w-5 h-5 text-slate-600" />
+                <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full" />
+              </Button>
+              
+              {/* Connection Status */}
+              <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-50 border border-emerald-100">
+                <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                <span className="text-xs font-medium text-emerald-700">LinkedIn Connected</span>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <main>
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
+

frontend/src/components/ui/alert.jsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
+

frontend/src/components/ui/avatar.jsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/utils";
+
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
+

frontend/src/components/ui/badge.jsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({ className, variant, ...props }) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
+

frontend/src/components/ui/button.jsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+

frontend/src/components/ui/calendar.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "@/utils";
+
+export function Calendar({ className, classNames, showOutsideDays = true, mode = "single", selected, onSelect, ...props }) {
+  return (
+    <DayPicker
+      mode={mode}
+      selected={selected}
+      onSelect={onSelect}
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+

frontend/src/components/ui/card.jsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { cn } from "@/utils";
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+

frontend/src/components/ui/checkbox.jsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "@/utils";
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
+

frontend/src/components/ui/dialog.jsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
+

frontend/src/components/ui/dropdown-menu.jsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "@/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
+

frontend/src/components/ui/input.jsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "@/utils";
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };
+

frontend/src/components/ui/label.jsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@/utils";
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
+

frontend/src/components/ui/popover.jsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@/utils";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
+

frontend/src/components/ui/progress.jsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "@/utils";
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
+

frontend/src/components/ui/select.jsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/utils";
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
+

frontend/src/components/ui/separator.jsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/utils";
+
+const Separator = React.forwardRef(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
+

frontend/src/components/ui/slider.jsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@/utils";
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
+

frontend/src/components/ui/switch.jsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/utils";
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
+

frontend/src/components/ui/tabs.jsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/utils";
+
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+

frontend/src/components/ui/textarea.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/utils";
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+

frontend/src/index.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+

frontend/src/main.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { createPageUrl } from '@/utils';
+import { motion } from 'framer-motion';
+import { 
+  Calendar, 
+  FileText, 
+  Image, 
+  TrendingUp, 
+  Clock,
+  Zap,
+  ArrowRight,
+  Plus,
+  Sparkles,
+  BarChart3,
+  FolderOpen,
+  Layers
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+
+export default function Dashboard() {
+  const stats = [
+    { label: 'Scheduled Posts', value: '24', icon: Calendar, color: 'from-blue-500 to-indigo-600', change: '+12%' },
+    { label: 'Repository Assets', value: '156', icon: FolderOpen, color: 'from-emerald-500 to-teal-600', change: '+8%' },
+    { label: 'Posts This Month', value: '18', icon: TrendingUp, color: 'from-violet-500 to-purple-600', change: '+24%' },
+    { label: 'Engagement Rate', value: '4.8%', icon: BarChart3, color: 'from-amber-500 to-orange-600', change: '+2.1%' },
+  ];
+
+  const upcomingPosts = [
+    { id: 1, title: 'OCR Document Automation Benefits', type: 'Carousel', date: 'Today, 2:00 PM', product: 'OCR', status: 'ready' },
+    { id: 2, title: 'P2P Workflow Efficiency Guide', type: 'Cover Image + Content', date: 'Tomorrow, 10:00 AM', product: 'P2P', status: 'pending' },
+    { id: 3, title: 'O2C Webinar Announcement', type: 'Webinar Invite', date: 'Dec 28, 3:00 PM', product: 'O2C', status: 'draft' },
+  ];
+
+  const productStats = [
+    { name: 'Document Parsing (OCR)', posts: 8, assets: 45, progress: 75 },
+    { name: 'Purchase To Pay (P2P)', posts: 6, assets: 52, progress: 60 },
+    { name: 'Order to Cash (O2C)', posts: 10, assets: 59, progress: 85 },
+  ];
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: { staggerChildren: 0.1 }
+    }
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0 }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+                Welcome back
+              </h1>
+              <p className="text-slate-500 mt-1">
+                Here's what's happening with your LinkedIn content
+              </p>
+            </div>
+            <div className="flex gap-3">
+              <Link to={createPageUrl('Scheduler')}>
+                <Button variant="outline" className="gap-2 border-slate-200 hover:bg-slate-50">
+                  <Calendar className="w-4 h-4" />
+                  Schedule
+                </Button>
+              </Link>
+              <Link to={createPageUrl('PostEditor')}>
+                <Button className="gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
+                  <Plus className="w-4 h-4" />
+                  Create Post
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Stats Grid */}
+        <motion.div 
+          variants={container}
+          initial="hidden"
+          animate="show"
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"
+        >
+          {stats.map((stat, index) => (
+            <motion.div key={index} variants={item}>
+              <Card className="border-0 shadow-lg shadow-slate-200/50 hover:shadow-xl transition-all duration-300 overflow-hidden group">
+                <CardContent className="p-6 relative">
+                  <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br ${stat.color} opacity-5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500`} />
+                  <div className="flex items-start justify-between relative">
+                    <div>
+                      <p className="text-sm font-medium text-slate-500">{stat.label}</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{stat.value}</p>
+                      <Badge variant="secondary" className="mt-2 bg-emerald-50 text-emerald-700 border-0">
+                        {stat.change}
+                      </Badge>
+                    </div>
+                    <div className={`p-3 rounded-xl bg-gradient-to-br ${stat.color} shadow-lg`}>
+                      <stat.icon className="w-5 h-5 text-white" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <div className="grid lg:grid-cols-3 gap-6">
+          {/* Upcoming Posts */}
+          <motion.div 
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.3 }}
+            className="lg:col-span-2"
+          >
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-lg font-semibold flex items-center gap-2">
+                    <Clock className="w-5 h-5 text-blue-600" />
+                    Upcoming Posts
+                  </CardTitle>
+                  <Link to={createPageUrl('Scheduler')}>
+                    <Button variant="ghost" size="sm" className="text-blue-600 hover:text-blue-700 gap-1">
+                      View all <ArrowRight className="w-4 h-4" />
+                    </Button>
+                  </Link>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {upcomingPosts.map((post, index) => (
+                  <motion.div
+                    key={post.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.4 + index * 0.1 }}
+                    className="group p-4 rounded-xl bg-slate-50/50 hover:bg-white hover:shadow-md border border-transparent hover:border-slate-100 transition-all duration-300 cursor-pointer"
+                  >
+                    <div className="flex items-center gap-4">
+                      <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                        post.product === 'OCR' ? 'bg-blue-100 text-blue-600' :
+                        post.product === 'P2P' ? 'bg-emerald-100 text-emerald-600' :
+                        'bg-violet-100 text-violet-600'
+                      }`}>
+                        {post.type === 'Carousel' ? <Layers className="w-5 h-5" /> :
+                         post.type === 'Webinar Invite' ? <Sparkles className="w-5 h-5" /> :
+                         <Image className="w-5 h-5" />}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-medium text-slate-900 truncate">{post.title}</h3>
+                        <div className="flex items-center gap-2 mt-1">
+                          <span className="text-sm text-slate-500">{post.date}</span>
+                          <span className="text-slate-300">•</span>
+                          <Badge variant="outline" className="text-xs border-slate-200">
+                            {post.type}
+                          </Badge>
+                        </div>
+                      </div>
+                      <Badge className={`capitalize ${
+                        post.status === 'ready' ? 'bg-emerald-100 text-emerald-700 border-0' :
+                        post.status === 'pending' ? 'bg-amber-100 text-amber-700 border-0' :
+                        'bg-slate-100 text-slate-600 border-0'
+                      }`}>
+                        {post.status}
+                      </Badge>
+                    </div>
+                  </motion.div>
+                ))}
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Product Distribution */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.4 }}
+          >
+            <Card className="border-0 shadow-lg shadow-slate-200/50 h-full">
+              <CardHeader className="pb-4">
+                <CardTitle className="text-lg font-semibold flex items-center gap-2">
+                  <Zap className="w-5 h-5 text-amber-500" />
+                  Content by Product
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-5">
+                {productStats.map((product, index) => (
+                  <div key={index} className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium text-slate-700">{product.name}</span>
+                      <span className="text-xs text-slate-500">{product.posts} posts</span>
+                    </div>
+                    <Progress value={product.progress} className="h-2" />
+                    <div className="flex items-center justify-between text-xs text-slate-500">
+                      <span>{product.assets} assets</span>
+                      <span>{product.progress}% coverage</span>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+
+        {/* Quick Actions */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+          className="mt-8"
+        >
+          <h2 className="text-lg font-semibold text-slate-900 mb-4">Quick Actions</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {[
+              { label: 'Upload Assets', icon: FolderOpen, color: 'blue', href: 'Repository' },
+              { label: 'Schedule Campaign', icon: Calendar, color: 'violet', href: 'Scheduler' },
+              { label: 'Connect Canva', icon: Sparkles, color: 'pink', href: 'Integrations' },
+              { label: 'View Analytics', icon: BarChart3, color: 'emerald', href: 'Dashboard' },
+            ].map((action, index) => (
+              <Link key={index} to={createPageUrl(action.href)}>
+                <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer group overflow-hidden">
+                  <CardContent className="p-5 flex items-center gap-4">
+                    <div className={`p-3 rounded-xl bg-${action.color}-100 group-hover:scale-110 transition-transform`}>
+                      <action.icon className={`w-5 h-5 text-${action.color}-600`} />
+                    </div>
+                    <span className="font-medium text-slate-700 group-hover:text-slate-900">{action.label}</span>
+                    <ArrowRight className="w-4 h-4 text-slate-400 ml-auto group-hover:translate-x-1 transition-transform" />
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
+

frontend/src/pages/Integrations.jsx

@@ -0,0 +1,420 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { 
+  Link2,
+  Check,
+  X,
+  ExternalLink,
+  Settings,
+  RefreshCw,
+  Shield,
+  Key,
+  AlertCircle,
+  CheckCircle,
+  Linkedin,
+  Palette,
+  Zap,
+  ArrowRight,
+  Info,
+  Save
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/ui/alert';
+
+const integrations = [
+  {
+    id: 'linkedin',
+    name: 'LinkedIn',
+    description: 'Connect your LinkedIn account to schedule and publish posts directly',
+    icon: Linkedin,
+    color: 'blue',
+    bgColor: 'bg-[#0A66C2]',
+    connected: true,
+    account: 'alex.business@company.com',
+    lastSync: '2 mins ago',
+    features: [
+      'Schedule posts up to 60 days in advance',
+      'Publish carousel, image, and text posts',
+      'Track post performance analytics',
+      'Manage multiple company pages'
+    ]
+  },
+  {
+    id: 'canva',
+    name: 'Canva',
+    description: 'Import designs directly from your Canva workspace for post visuals',
+    icon: Palette,
+    color: 'purple',
+    bgColor: 'bg-gradient-to-br from-[#00C4CC] to-[#7B2FF7]',
+    connected: false,
+    account: null,
+    lastSync: null,
+    features: [
+      'Browse and import Canva designs',
+      'Access brand kit assets',
+      'Import templates for carousels',
+      'Sync design updates automatically'
+    ]
+  },
+];
+
+export default function Integrations() {
+  const [linkedInDialogOpen, setLinkedInDialogOpen] = useState(false);
+  const [canvaDialogOpen, setCanvaDialogOpen] = useState(false);
+  const [autoPost, setAutoPost] = useState(true);
+  const [notifications, setNotifications] = useState(true);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+                Integrations
+              </h1>
+              <p className="text-slate-500 mt-1">
+                Connect your tools to streamline your content workflow
+              </p>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Integration Status Banner */}
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <Alert className="border-blue-200 bg-blue-50">
+            <Info className="h-4 w-4 text-blue-600" />
+            <AlertTitle className="text-blue-800">Quick Setup</AlertTitle>
+            <AlertDescription className="text-blue-700">
+              Connect both LinkedIn and Canva to unlock the full potential of automated content scheduling. Your designs will flow seamlessly to your LinkedIn audience.
+            </AlertDescription>
+          </Alert>
+        </motion.div>
+
+        {/* Integration Cards */}
+        <div className="space-y-6">
+          {integrations.map((integration, index) => (
+            <motion.div
+              key={integration.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+            >
+              <Card className="border-0 shadow-lg shadow-slate-200/50 overflow-hidden">
+                <CardContent className="p-0">
+                  <div className="flex flex-col lg:flex-row">
+                    {/* Left Section - Integration Info */}
+                    <div className="flex-1 p-6">
+                      <div className="flex items-start gap-4">
+                        <div className={`w-14 h-14 rounded-xl ${integration.bgColor} flex items-center justify-center shadow-lg`}>
+                          <integration.icon className="w-7 h-7 text-white" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3">
+                            <h3 className="text-xl font-semibold text-slate-900">
+                              {integration.name}
+                            </h3>
+                            {integration.connected ? (
+                              <Badge className="bg-emerald-100 text-emerald-700 border-0 gap-1">
+                                <CheckCircle className="w-3 h-3" />
+                                Connected
+                              </Badge>
+                            ) : (
+                              <Badge variant="outline" className="text-slate-500 border-slate-300">
+                                Not Connected
+                              </Badge>
+                            )}
+                          </div>
+                          <p className="text-slate-500 mt-1">
+                            {integration.description}
+                          </p>
+                          
+                          {integration.connected && (
+                            <div className="flex items-center gap-4 mt-3">
+                              <div className="flex items-center gap-2 text-sm">
+                                <Key className="w-4 h-4 text-slate-400" />
+                                <span className="text-slate-600">{integration.account}</span>
+                              </div>
+                              <div className="flex items-center gap-2 text-sm">
+                                <RefreshCw className="w-4 h-4 text-slate-400" />
+                                <span className="text-slate-500">Synced {integration.lastSync}</span>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Features */}
+                      <div className="mt-6">
+                        <p className="text-sm font-medium text-slate-700 mb-3">Features</p>
+                        <div className="grid sm:grid-cols-2 gap-2">
+                          {integration.features.map((feature, idx) => (
+                            <div key={idx} className="flex items-center gap-2 text-sm text-slate-600">
+                              <Check className="w-4 h-4 text-emerald-500 shrink-0" />
+                              <span>{feature}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Right Section - Actions */}
+                    <div className="lg:w-64 p-6 bg-slate-50 border-t lg:border-t-0 lg:border-l border-slate-100 flex flex-col justify-center">
+                      {integration.connected ? (
+                        <div className="space-y-4">
+                          <Dialog>
+                            <DialogTrigger asChild>
+                              <Button variant="outline" className="w-full gap-2">
+                                <Settings className="w-4 h-4" />
+                                Settings
+                              </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                              <DialogHeader>
+                                <DialogTitle className="flex items-center gap-3">
+                                  <div className={`w-10 h-10 rounded-lg ${integration.bgColor} flex items-center justify-center`}>
+                                    <integration.icon className="w-5 h-5 text-white" />
+                                  </div>
+                                  {integration.name} Settings
+                                </DialogTitle>
+                                <DialogDescription>
+                                  Configure your {integration.name} integration preferences
+                                </DialogDescription>
+                              </DialogHeader>
+                              <div className="space-y-6 pt-4">
+                                <div className="flex items-center justify-between">
+                                  <div>
+                                    <Label className="text-sm font-medium">Auto-post scheduled content</Label>
+                                    <p className="text-xs text-slate-500 mt-0.5">
+                                      Automatically publish posts at scheduled times
+                                    </p>
+                                  </div>
+                                  <Switch checked={autoPost} onCheckedChange={setAutoPost} />
+                                </div>
+                                <Separator />
+                                <div className="flex items-center justify-between">
+                                  <div>
+                                    <Label className="text-sm font-medium">Post notifications</Label>
+                                    <p className="text-xs text-slate-500 mt-0.5">
+                                      Get notified when posts are published
+                                    </p>
+                                  </div>
+                                  <Switch checked={notifications} onCheckedChange={setNotifications} />
+                                </div>
+                                <Separator />
+                                <div>
+                                  <Label className="text-sm font-medium">Connected Account</Label>
+                                  <div className="flex items-center gap-3 mt-2 p-3 rounded-lg bg-slate-50">
+                                    <div className={`w-8 h-8 rounded-lg ${integration.bgColor} flex items-center justify-center`}>
+                                      <integration.icon className="w-4 h-4 text-white" />
+                                    </div>
+                                    <div className="flex-1">
+                                      <p className="text-sm font-medium text-slate-700">{integration.account}</p>
+                                      <p className="text-xs text-slate-500">Connected</p>
+                                    </div>
+                                    <Button variant="ghost" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50">
+                                      Disconnect
+                                    </Button>
+                                  </div>
+                                </div>
+                              </div>
+                            </DialogContent>
+                          </Dialog>
+                          <Button variant="ghost" className="w-full gap-2 text-red-600 hover:text-red-700 hover:bg-red-50">
+                            <X className="w-4 h-4" />
+                            Disconnect
+                          </Button>
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          <Dialog>
+                            <DialogTrigger asChild>
+                              <Button className={`w-full gap-2 ${
+                                integration.id === 'linkedin' 
+                                  ? 'bg-[#0A66C2] hover:bg-[#004182]' 
+                                  : 'bg-gradient-to-r from-[#00C4CC] to-[#7B2FF7] hover:opacity-90'
+                              }`}>
+                                <Link2 className="w-4 h-4" />
+                                Connect {integration.name}
+                              </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                              <DialogHeader>
+                                <DialogTitle className="flex items-center gap-3">
+                                  <div className={`w-10 h-10 rounded-lg ${integration.bgColor} flex items-center justify-center`}>
+                                    <integration.icon className="w-5 h-5 text-white" />
+                                  </div>
+                                  Connect to {integration.name}
+                                </DialogTitle>
+                                <DialogDescription>
+                                  Authorize access to your {integration.name} account
+                                </DialogDescription>
+                              </DialogHeader>
+                              <div className="space-y-6 pt-4">
+                                <div className="p-4 rounded-xl bg-slate-50 border border-slate-100">
+                                  <div className="flex items-start gap-3">
+                                    <Shield className="w-5 h-5 text-blue-600 mt-0.5" />
+                                    <div>
+                                      <p className="text-sm font-medium text-slate-700">Secure Connection</p>
+                                      <p className="text-xs text-slate-500 mt-1">
+                                        Your credentials are encrypted and never stored. We only request necessary permissions.
+                                      </p>
+                                    </div>
+                                  </div>
+                                </div>
+
+                                <div>
+                                  <Label className="text-sm font-medium">Permissions Requested</Label>
+                                  <div className="mt-2 space-y-2">
+                                    {integration.id === 'linkedin' ? (
+                                      <>
+                                        <div className="flex items-center gap-2 text-sm text-slate-600">
+                                          <Check className="w-4 h-4 text-emerald-500" />
+                                          Read and write posts on your behalf
+                                        </div>
+                                        <div className="flex items-center gap-2 text-sm text-slate-600">
+                                          <Check className="w-4 h-4 text-emerald-500" />
+                                          Schedule posts for future publishing
+                                        </div>
+                                        <div className="flex items-center gap-2 text-sm text-slate-600">
+                                          <Check className="w-4 h-4 text-emerald-500" />
+                                          Access post analytics and insights
+                                        </div>
+                                      </>
+                                    ) : (
+                                      <>
+                                        <div className="flex items-center gap-2 text-sm text-slate-600">
+                                          <Check className="w-4 h-4 text-emerald-500" />
+                                          View your Canva designs
+                                        </div>
+                                        <div className="flex items-center gap-2 text-sm text-slate-600">
+                                          <Check className="w-4 h-4 text-emerald-500" />
+                                          Download designs as images
+                                        </div>
+                                        <div className="flex items-center gap-2 text-sm text-slate-600">
+                                          <Check className="w-4 h-4 text-emerald-500" />
+                                          Access brand kit assets
+                                        </div>
+                                      </>
+                                    )}
+                                  </div>
+                                </div>
+
+                                <Button className={`w-full gap-2 ${
+                                  integration.id === 'linkedin' 
+                                    ? 'bg-[#0A66C2] hover:bg-[#004182]' 
+                                    : 'bg-gradient-to-r from-[#00C4CC] to-[#7B2FF7] hover:opacity-90'
+                                }`}>
+                                  Continue with {integration.name}
+                                  <ExternalLink className="w-4 h-4" />
+                                </Button>
+                              </div>
+                            </DialogContent>
+                          </Dialog>
+                          <p className="text-xs text-center text-slate-500">
+                            You'll be redirected to {integration.name} to authorize
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* API Configuration */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="mt-8"
+        >
+          <Card className="border-0 shadow-lg shadow-slate-200/50">
+            <CardHeader>
+              <CardTitle className="text-lg font-semibold flex items-center gap-2">
+                <Key className="w-5 h-5 text-amber-500" />
+                API Configuration
+              </CardTitle>
+              <CardDescription>
+                For advanced users who want to configure custom API settings
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-sm text-slate-600">LinkedIn Client ID</Label>
+                  <Input 
+                    className="mt-1.5" 
+                    placeholder="Enter your LinkedIn Client ID"
+                    type="password"
+                    defaultValue="••••••••••••••••"
+                  />
+                </div>
+                <div>
+                  <Label className="text-sm text-slate-600">LinkedIn Client Secret</Label>
+                  <Input 
+                    className="mt-1.5" 
+                    placeholder="Enter your LinkedIn Client Secret"
+                    type="password"
+                    defaultValue="••••••••••••••••"
+                  />
+                </div>
+                <div>
+                  <Label className="text-sm text-slate-600">Canva API Key</Label>
+                  <Input 
+                    className="mt-1.5" 
+                    placeholder="Enter your Canva API Key"
+                    type="password"
+                  />
+                </div>
+                <div>
+                  <Label className="text-sm text-slate-600">Webhook URL</Label>
+                  <Input 
+                    className="mt-1.5" 
+                    placeholder="https://your-webhook-url.com"
+                  />
+                </div>
+              </div>
+              <div className="flex justify-end">
+                <Button variant="outline" className="gap-2">
+                  <Save className="w-4 h-4" />
+                  Save Configuration
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
+

frontend/src/pages/PostEditor.jsx

@@ -0,0 +1,513 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { 
+  Save,
+  Send,
+  Eye,
+  Calendar,
+  Clock,
+  Image,
+  Layers,
+  FileText,
+  Video,
+  Sparkles,
+  ChevronDown,
+  Plus,
+  X,
+  GripVertical,
+  RefreshCw,
+  ThumbsUp,
+  MessageCircle,
+  Share2,
+  MoreHorizontal,
+  Globe,
+  Link2,
+  Hash,
+  AtSign,
+  Bold,
+  Italic,
+  List,
+  Smile,
+  ImagePlus,
+  Trash2,
+  ArrowLeft,
+  Linkedin
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Separator } from '@/components/ui/separator';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Calendar as CalendarComponent } from '@/components/ui/calendar';
+import { format } from 'date-fns';
+import { Link } from 'react-router-dom';
+import { createPageUrl } from '@/utils';
+
+const postTypes = [
+  { id: 'carousel', name: 'Carousel', icon: Layers },
+  { id: 'cover_content', name: 'Cover Image + Content', icon: Image },
+  { id: 'content_only', name: 'Content Only', icon: FileText },
+  { id: 'webinar', name: 'Webinar Invite', icon: Video },
+];
+
+const products = [
+  { id: 'ocr', name: 'Document Parsing (OCR)', shortName: 'OCR' },
+  { id: 'p2p', name: 'Purchase To Pay', shortName: 'P2P' },
+  { id: 'o2c', name: 'Order to Cash', shortName: 'O2C' },
+];
+
+export default function PostEditor() {
+  const [postType, setPostType] = useState('carousel');
+  const [product, setProduct] = useState('ocr');
+  const [content, setContent] = useState(`🚀 Transform Your Document Processing with AI-Powered OCR
+
+Are you still manually processing invoices and documents? 
+
+Here's how our Intelligent Document Parsing solution can revolutionize your workflow:
+
+✅ 99.5% accuracy in data extraction
+✅ Process 1000+ documents per hour
+✅ Seamless integration with existing systems
+✅ Reduce manual errors by 95%
+
+The future of document automation is here. Ready to transform your business?
+
+#DocumentAutomation #OCR #AITechnology #DigitalTransformation #BusinessEfficiency`);
+  const [scheduledDate, setScheduledDate] = useState(new Date());
+  const [scheduledTime, setScheduledTime] = useState('10:00');
+  const [carouselSlides, setCarouselSlides] = useState([
+    { id: 1, title: 'Slide 1', hasImage: true },
+    { id: 2, title: 'Slide 2', hasImage: true },
+    { id: 3, title: 'Slide 3', hasImage: true },
+  ]);
+  const [selectedAssets, setSelectedAssets] = useState([
+    { id: 1, name: 'OCR_Demo.png', type: 'image' },
+    { id: 2, name: 'Workflow_Diagram.png', type: 'image' },
+  ]);
+
+  const addSlide = () => {
+    setCarouselSlides([...carouselSlides, { id: Date.now(), title: `Slide ${carouselSlides.length + 1}`, hasImage: false }]);
+  };
+
+  const removeSlide = (id) => {
+    setCarouselSlides(carouselSlides.filter(slide => slide.id !== id));
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div className="flex items-center gap-4">
+              <Link to={createPageUrl('Scheduler')}>
+                <Button variant="ghost" size="icon" className="h-10 w-10">
+                  <ArrowLeft className="w-5 h-5" />
+                </Button>
+              </Link>
+              <div>
+                <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
+                  Create Post
+                </h1>
+                <p className="text-slate-500 text-sm mt-0.5">
+                  Compose and schedule your LinkedIn content
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <Button variant="outline" className="gap-2 border-slate-200">
+                <Save className="w-4 h-4" />
+                Save Draft
+              </Button>
+              <Button variant="outline" className="gap-2 border-slate-200">
+                <Eye className="w-4 h-4" />
+                Preview
+              </Button>
+              <Button className="gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
+                <Send className="w-4 h-4" />
+                Schedule Post
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+
+        <div className="grid lg:grid-cols-5 gap-6">
+          {/* Editor Panel */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="lg:col-span-3 space-y-6"
+          >
+            {/* Post Type Selection */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-4">
+                <CardTitle className="text-base font-semibold">Post Type</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                  {postTypes.map(type => (
+                    <button
+                      key={type.id}
+                      onClick={() => setPostType(type.id)}
+                      className={`p-4 rounded-xl border-2 transition-all ${
+                        postType === type.id
+                          ? 'border-blue-500 bg-blue-50'
+                          : 'border-slate-200 hover:border-slate-300 bg-white'
+                      }`}
+                    >
+                      <type.icon className={`w-6 h-6 mx-auto mb-2 ${
+                        postType === type.id ? 'text-blue-600' : 'text-slate-400'
+                      }`} />
+                      <p className={`text-sm font-medium ${
+                        postType === type.id ? 'text-blue-700' : 'text-slate-600'
+                      }`}>
+                        {type.name}
+                      </p>
+                    </button>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Content Editor */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base font-semibold">Content</CardTitle>
+                  <Button variant="outline" size="sm" className="gap-2 text-violet-600 border-violet-200 hover:bg-violet-50">
+                    <Sparkles className="w-4 h-4" />
+                    AI Generate
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {/* Formatting Toolbar */}
+                <div className="flex items-center gap-1 p-2 bg-slate-50 rounded-lg">
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <Bold className="w-4 h-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <Italic className="w-4 h-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <List className="w-4 h-4" />
+                  </Button>
+                  <Separator orientation="vertical" className="h-6 mx-1" />
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <Hash className="w-4 h-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <AtSign className="w-4 h-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <Link2 className="w-4 h-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <Smile className="w-4 h-4" />
+                  </Button>
+                </div>
+
+                <Textarea
+                  value={content}
+                  onChange={(e) => setContent(e.target.value)}
+                  className="min-h-[250px] text-sm leading-relaxed border-slate-200 focus:border-blue-300"
+                  placeholder="Write your post content here..."
+                />
+
+                <div className="flex items-center justify-between text-sm text-slate-500">
+                  <span>{content.length} / 3000 characters</span>
+                  <Button variant="ghost" size="sm" className="gap-1 text-blue-600">
+                    <RefreshCw className="w-3 h-3" />
+                    Regenerate
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Carousel Slides (if carousel type) */}
+            {postType === 'carousel' && (
+              <Card className="border-0 shadow-lg shadow-slate-200/50">
+                <CardHeader className="pb-4">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-base font-semibold">Carousel Slides</CardTitle>
+                    <Button onClick={addSlide} variant="outline" size="sm" className="gap-1">
+                      <Plus className="w-4 h-4" />
+                      Add Slide
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    {carouselSlides.map((slide, index) => (
+                      <motion.div
+                        key={slide.id}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="flex items-center gap-3 p-3 rounded-xl border border-slate-200 bg-white hover:border-slate-300 transition-colors"
+                      >
+                        <GripVertical className="w-4 h-4 text-slate-400 cursor-grab" />
+                        <div className="w-16 h-16 rounded-lg bg-gradient-to-br from-slate-100 to-slate-50 flex items-center justify-center border border-slate-200">
+                          {slide.hasImage ? (
+                            <Image className="w-6 h-6 text-slate-400" />
+                          ) : (
+                            <ImagePlus className="w-6 h-6 text-slate-300" />
+                          )}
+                        </div>
+                        <div className="flex-1">
+                          <Input 
+                            value={slide.title}
+                            className="h-8 text-sm border-0 bg-transparent p-0 font-medium"
+                            placeholder="Slide title"
+                          />
+                          <p className="text-xs text-slate-500 mt-0.5">
+                            {slide.hasImage ? 'Image attached' : 'No image'}
+                          </p>
+                        </div>
+                        <Button variant="ghost" size="sm" className="gap-1 text-blue-600">
+                          <ImagePlus className="w-4 h-4" />
+                          {slide.hasImage ? 'Change' : 'Add'} Image
+                        </Button>
+                        <Button 
+                          variant="ghost" 
+                          size="icon" 
+                          onClick={() => removeSlide(slide.id)}
+                          className="h-8 w-8 text-slate-400 hover:text-red-500"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </motion.div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Media Attachments */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base font-semibold">Media from Repository</CardTitle>
+                  <Link to={createPageUrl('Repository')}>
+                    <Button variant="outline" size="sm" className="gap-1">
+                      <Plus className="w-4 h-4" />
+                      Browse Assets
+                    </Button>
+                  </Link>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-3">
+                  {selectedAssets.map(asset => (
+                    <div 
+                      key={asset.id}
+                      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-50 border border-slate-200"
+                    >
+                      <Image className="w-4 h-4 text-blue-500" />
+                      <span className="text-sm text-slate-700">{asset.name}</span>
+                      <Button variant="ghost" size="icon" className="h-5 w-5 text-slate-400 hover:text-red-500">
+                        <X className="w-3 h-3" />
+                      </Button>
+                    </div>
+                  ))}
+                  <button className="flex items-center gap-2 px-3 py-2 rounded-lg border-2 border-dashed border-slate-200 text-slate-500 hover:border-blue-300 hover:text-blue-600 transition-colors">
+                    <Plus className="w-4 h-4" />
+                    <span className="text-sm">Add from Canva</span>
+                  </button>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Preview & Settings Panel */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="lg:col-span-2 space-y-6"
+          >
+            {/* Schedule Settings */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-4">
+                <CardTitle className="text-base font-semibold flex items-center gap-2">
+                  <Calendar className="w-4 h-4 text-blue-600" />
+                  Schedule
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <Label className="text-sm text-slate-600">Product Category</Label>
+                  <Select value={product} onValueChange={setProduct}>
+                    <SelectTrigger className="mt-1.5">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {products.map(p => (
+                        <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-sm text-slate-600">Date</Label>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button variant="outline" className="w-full justify-start mt-1.5 text-left font-normal">
+                          <Calendar className="w-4 h-4 mr-2" />
+                          {format(scheduledDate, 'MMM d, yyyy')}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <CalendarComponent
+                          mode="single"
+                          selected={scheduledDate}
+                          onSelect={setScheduledDate}
+                        />
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                  <div>
+                    <Label className="text-sm text-slate-600">Time</Label>
+                    <Select value={scheduledTime} onValueChange={setScheduledTime}>
+                      <SelectTrigger className="mt-1.5">
+                        <Clock className="w-4 h-4 mr-2" />
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'].map(time => (
+                          <SelectItem key={time} value={time}>{time}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* LinkedIn Preview */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50 overflow-hidden">
+              <CardHeader className="pb-3 bg-gradient-to-r from-[#0A66C2] to-[#004182]">
+                <CardTitle className="text-base font-semibold text-white flex items-center gap-2">
+                  <Linkedin className="w-4 h-4" />
+                  LinkedIn Preview
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="p-0">
+                <div className="p-4 bg-white">
+                  {/* Post Header */}
+                  <div className="flex items-start gap-3">
+                    <Avatar className="h-12 w-12">
+                      <AvatarImage src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop" />
+                      <AvatarFallback>AB</AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1">
+                      <p className="font-semibold text-sm text-slate-900">Alex Business</p>
+                      <p className="text-xs text-slate-500">Marketing Director at TechCorp</p>
+                      <p className="text-xs text-slate-400 flex items-center gap-1 mt-0.5">
+                        {format(scheduledDate, 'MMM d')} • <Globe className="w-3 h-3" />
+                      </p>
+                    </div>
+                    <Button variant="ghost" size="icon" className="h-8 w-8">
+                      <MoreHorizontal className="w-4 h-4" />
+                    </Button>
+                  </div>
+
+                  {/* Post Content */}
+                  <div className="mt-3 text-sm text-slate-800 whitespace-pre-line leading-relaxed">
+                    {content.length > 300 ? content.slice(0, 300) + '...' : content}
+                    {content.length > 300 && (
+                      <button className="text-blue-600 hover:underline ml-1">see more</button>
+                    )}
+                  </div>
+
+                  {/* Post Image Preview */}
+                  {postType !== 'content_only' && (
+                    <div className="mt-3 -mx-4">
+                      <div className="aspect-video bg-gradient-to-br from-blue-100 to-indigo-100 flex items-center justify-center">
+                        {postType === 'carousel' ? (
+                          <div className="text-center">
+                            <Layers className="w-12 h-12 text-blue-400 mx-auto mb-2" />
+                            <p className="text-sm text-blue-600">{carouselSlides.length} slides</p>
+                          </div>
+                        ) : (
+                          <Image className="w-12 h-12 text-blue-400" />
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Engagement Stats */}
+                  <div className="flex items-center justify-between mt-3 pt-3 border-t border-slate-100">
+                    <div className="flex items-center gap-1 text-xs text-slate-500">
+                      <div className="flex -space-x-1">
+                        <div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
+                          <ThumbsUp className="w-2 h-2 text-white" />
+                        </div>
+                        <div className="w-4 h-4 rounded-full bg-red-500 flex items-center justify-center">
+                          <span className="text-[8px]">❤️</span>
+                        </div>
+                      </div>
+                      <span>Preview mode</span>
+                    </div>
+                    <span className="text-xs text-slate-500">0 comments</span>
+                  </div>
+
+                  {/* Action Buttons */}
+                  <div className="flex items-center justify-between mt-3 pt-3 border-t border-slate-100">
+                    {[
+                      { icon: ThumbsUp, label: 'Like' },
+                      { icon: MessageCircle, label: 'Comment' },
+                      { icon: Share2, label: 'Share' },
+                      { icon: Send, label: 'Send' },
+                    ].map((action, idx) => (
+                      <button 
+                        key={idx}
+                        className="flex items-center gap-1.5 px-3 py-2 text-slate-600 hover:bg-slate-50 rounded-lg transition-colors"
+                      >
+                        <action.icon className="w-4 h-4" />
+                        <span className="text-xs font-medium">{action.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Action Buttons */}
+            <div className="space-y-3">
+              <Button className="w-full gap-2 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
+                <Send className="w-5 h-5" />
+                Schedule for {format(scheduledDate, 'MMM d')} at {scheduledTime}
+              </Button>
+              <Button variant="outline" className="w-full gap-2 h-12 border-slate-200">
+                <Eye className="w-5 h-5" />
+                Post Immediately
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/src/pages/Repository.jsx

@@ -0,0 +1,510 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  Upload, 
+  FolderOpen, 
+  Image, 
+  FileText, 
+  Video, 
+  Search,
+  Filter,
+  Grid3X3,
+  List,
+  MoreVertical,
+  Download,
+  Trash2,
+  Eye,
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  X,
+  Check,
+  File
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Checkbox } from '@/components/ui/checkbox';
+
+const products = [
+  {
+    id: 'ocr',
+    name: 'Intelligent Document Parsing (OCR)',
+    shortName: 'OCR',
+    color: 'blue',
+    subCategories: []
+  },
+  {
+    id: 'p2p',
+    name: 'Purchase To Pay (P2P)',
+    shortName: 'P2P',
+    color: 'emerald',
+    subCategories: [
+      'Budget Approval Workflow',
+      'Purchase Request Workflow',
+      'Accounts Payable Workflow'
+    ]
+  },
+  {
+    id: 'o2c',
+    name: 'Order to Cash (O2C)',
+    shortName: 'O2C',
+    color: 'violet',
+    subCategories: [
+      'Quotation Workflow',
+      'Sales Order Workflow',
+      'PickSlip Delivery Workflow',
+      'Accounts Receivable Workflow'
+    ]
+  }
+];
+
+const mockAssets = [
+  { id: 1, name: 'OCR_Demo_Screenshot.png', type: 'image', product: 'ocr', subCategory: null, size: '2.4 MB', date: '2024-12-20' },
+  { id: 2, name: 'P2P_Workflow_Diagram.pdf', type: 'document', product: 'p2p', subCategory: 'Budget Approval Workflow', size: '1.8 MB', date: '2024-12-19' },
+  { id: 3, name: 'Invoice_Processing_Video.mp4', type: 'video', product: 'ocr', subCategory: null, size: '45.2 MB', date: '2024-12-18' },
+  { id: 4, name: 'Sales_Order_Infographic.png', type: 'image', product: 'o2c', subCategory: 'Sales Order Workflow', size: '3.1 MB', date: '2024-12-17' },
+  { id: 5, name: 'AP_Automation_Brochure.pdf', type: 'document', product: 'p2p', subCategory: 'Accounts Payable Workflow', size: '5.6 MB', date: '2024-12-16' },
+  { id: 6, name: 'O2C_Product_Banner.png', type: 'image', product: 'o2c', subCategory: 'Quotation Workflow', size: '1.2 MB', date: '2024-12-15' },
+  { id: 7, name: 'Document_Parsing_Demo.png', type: 'image', product: 'ocr', subCategory: null, size: '890 KB', date: '2024-12-14' },
+  { id: 8, name: 'PR_Workflow_Guide.pdf', type: 'document', product: 'p2p', subCategory: 'Purchase Request Workflow', size: '2.3 MB', date: '2024-12-13' },
+];
+
+export default function Repository() {
+  const [viewMode, setViewMode] = useState('grid');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedProduct, setSelectedProduct] = useState('all');
+  const [expandedProducts, setExpandedProducts] = useState(['ocr', 'p2p', 'o2c']);
+  const [selectedAssets, setSelectedAssets] = useState([]);
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+
+  const toggleProduct = (productId) => {
+    setExpandedProducts(prev => 
+      prev.includes(productId) 
+        ? prev.filter(id => id !== productId)
+        : [...prev, productId]
+    );
+  };
+
+  const filteredAssets = mockAssets.filter(asset => {
+    const matchesSearch = asset.name.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesProduct = selectedProduct === 'all' || asset.product === selectedProduct;
+    return matchesSearch && matchesProduct;
+  });
+
+  const getAssetsByProduct = (productId) => {
+    return mockAssets.filter(asset => asset.product === productId);
+  };
+
+  const getTypeIcon = (type) => {
+    switch(type) {
+      case 'image': return <Image className="w-5 h-5 text-pink-500" />;
+      case 'video': return <Video className="w-5 h-5 text-red-500" />;
+      case 'document': return <FileText className="w-5 h-5 text-blue-500" />;
+      default: return <File className="w-5 h-5 text-slate-500" />;
+    }
+  };
+
+  const getProductColor = (productId) => {
+    const product = products.find(p => p.id === productId);
+    return product?.color || 'slate';
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+                Asset Repository
+              </h1>
+              <p className="text-slate-500 mt-1">
+                Manage your marketing materials, screenshots, and documents
+              </p>
+            </div>
+            <Dialog open={uploadDialogOpen} onOpenChange={setUploadDialogOpen}>
+              <DialogTrigger asChild>
+                <Button className="gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
+                  <Upload className="w-4 h-4" />
+                  Upload Assets
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                  <DialogTitle>Upload Assets</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4 pt-4">
+                  <div 
+                    className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
+                      dragOver ? 'border-blue-500 bg-blue-50' : 'border-slate-200 hover:border-slate-300'
+                    }`}
+                    onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+                    onDragLeave={() => setDragOver(false)}
+                    onDrop={(e) => { e.preventDefault(); setDragOver(false); }}
+                  >
+                    <Upload className="w-10 h-10 text-slate-400 mx-auto mb-3" />
+                    <p className="text-sm font-medium text-slate-700">
+                      Drag and drop files here
+                    </p>
+                    <p className="text-xs text-slate-500 mt-1">
+                      or click to browse
+                    </p>
+                    <Button variant="outline" size="sm" className="mt-4">
+                      Browse Files
+                    </Button>
+                  </div>
+                  
+                  <div className="space-y-3">
+                    <div>
+                      <Label>Product Category</Label>
+                      <Select>
+                        <SelectTrigger className="mt-1.5">
+                          <SelectValue placeholder="Select a product" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {products.map(product => (
+                            <SelectItem key={product.id} value={product.id}>
+                              {product.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    
+                    <div>
+                      <Label>Sub-Category (Optional)</Label>
+                      <Select>
+                        <SelectTrigger className="mt-1.5">
+                          <SelectValue placeholder="Select sub-category" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">None</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  
+                  <div className="flex justify-end gap-2 pt-4">
+                    <Button variant="outline" onClick={() => setUploadDialogOpen(false)}>
+                      Cancel
+                    </Button>
+                    <Button className="bg-blue-600 hover:bg-blue-700">
+                      Upload
+                    </Button>
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </motion.div>
+
+        <div className="grid lg:grid-cols-4 gap-6">
+          {/* Sidebar - Product Categories */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="lg:col-span-1"
+          >
+            <Card className="border-0 shadow-lg shadow-slate-200/50 sticky top-8">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-semibold text-slate-600 uppercase tracking-wider">
+                  Product Categories
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="space-y-1">
+                  <button
+                    onClick={() => setSelectedProduct('all')}
+                    className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
+                      selectedProduct === 'all' 
+                        ? 'bg-blue-50 text-blue-700' 
+                        : 'hover:bg-slate-50 text-slate-700'
+                    }`}
+                  >
+                    <FolderOpen className="w-4 h-4" />
+                    <span className="font-medium text-sm">All Assets</span>
+                    <Badge variant="secondary" className="ml-auto text-xs">
+                      {mockAssets.length}
+                    </Badge>
+                  </button>
+                  
+                  {products.map(product => (
+                    <div key={product.id}>
+                      <button
+                        onClick={() => {
+                          setSelectedProduct(product.id);
+                          if (product.subCategories.length > 0) {
+                            toggleProduct(product.id);
+                          }
+                        }}
+                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
+                          selectedProduct === product.id 
+                            ? `bg-${product.color}-50 text-${product.color}-700` 
+                            : 'hover:bg-slate-50 text-slate-700'
+                        }`}
+                      >
+                        {product.subCategories.length > 0 && (
+                          <ChevronRight className={`w-4 h-4 transition-transform ${
+                            expandedProducts.includes(product.id) ? 'rotate-90' : ''
+                          }`} />
+                        )}
+                        {product.subCategories.length === 0 && <div className="w-4" />}
+                        <span className="font-medium text-sm truncate">{product.shortName}</span>
+                        <Badge variant="secondary" className="ml-auto text-xs">
+                          {getAssetsByProduct(product.id).length}
+                        </Badge>
+                      </button>
+                      
+                      <AnimatePresence>
+                        {expandedProducts.includes(product.id) && product.subCategories.length > 0 && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            className="overflow-hidden"
+                          >
+                            <div className="ml-7 pl-3 border-l border-slate-200 mt-1 space-y-1">
+                              {product.subCategories.map((sub, idx) => (
+                                <button
+                                  key={idx}
+                                  className="w-full text-left px-3 py-2 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
+                                >
+                                  {sub}
+                                </button>
+                              ))}
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Main Content */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="lg:col-span-3"
+          >
+            {/* Search and Filters */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50 mb-6">
+              <CardContent className="p-4">
+                <div className="flex flex-col sm:flex-row gap-3">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                    <Input
+                      placeholder="Search assets..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="pl-10 border-slate-200"
+                    />
+                  </div>
+                  <div className="flex gap-2">
+                    <Select defaultValue="all">
+                      <SelectTrigger className="w-32 border-slate-200">
+                        <Filter className="w-4 h-4 mr-2" />
+                        <SelectValue placeholder="Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">All Types</SelectItem>
+                        <SelectItem value="image">Images</SelectItem>
+                        <SelectItem value="document">Documents</SelectItem>
+                        <SelectItem value="video">Videos</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <div className="flex border border-slate-200 rounded-lg overflow-hidden">
+                      <Button
+                        variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
+                        size="icon"
+                        onClick={() => setViewMode('grid')}
+                        className="rounded-none"
+                      >
+                        <Grid3X3 className="w-4 h-4" />
+                      </Button>
+                      <Button
+                        variant={viewMode === 'list' ? 'secondary' : 'ghost'}
+                        size="icon"
+                        onClick={() => setViewMode('list')}
+                        className="rounded-none"
+                      >
+                        <List className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Assets Grid/List */}
+            {viewMode === 'grid' ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
+                {filteredAssets.map((asset, index) => (
+                  <motion.div
+                    key={asset.id}
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ delay: index * 0.05 }}
+                  >
+                    <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 group overflow-hidden">
+                      <div className={`h-40 bg-gradient-to-br from-${getProductColor(asset.product)}-100 to-${getProductColor(asset.product)}-50 flex items-center justify-center relative`}>
+                        {asset.type === 'image' ? (
+                          <Image className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
+                        ) : asset.type === 'video' ? (
+                          <Video className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
+                        ) : (
+                          <FileText className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />
+                        )}
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
+                          <div className="flex gap-2">
+                            <Button size="icon" variant="secondary" className="h-9 w-9">
+                              <Eye className="w-4 h-4" />
+                            </Button>
+                            <Button size="icon" variant="secondary" className="h-9 w-9">
+                              <Download className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </div>
+                        <div className="absolute top-2 right-2">
+                          <Checkbox className="bg-white border-slate-300" />
+                        </div>
+                      </div>
+                      <CardContent className="p-4">
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="min-w-0">
+                            <h3 className="font-medium text-slate-900 text-sm truncate">
+                              {asset.name}
+                            </h3>
+                            <p className="text-xs text-slate-500 mt-1">
+                              {asset.size} • {asset.date}
+                            </p>
+                          </div>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+                                <MoreVertical className="w-4 h-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem>
+                                <Eye className="w-4 h-4 mr-2" /> Preview
+                              </DropdownMenuItem>
+                              <DropdownMenuItem>
+                                <Download className="w-4 h-4 mr-2" /> Download
+                              </DropdownMenuItem>
+                              <DropdownMenuItem className="text-red-600">
+                                <Trash2 className="w-4 h-4 mr-2" /> Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                        <div className="flex gap-2 mt-3">
+                          <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700 bg-${getProductColor(asset.product)}-50`}>
+                            {products.find(p => p.id === asset.product)?.shortName}
+                          </Badge>
+                          {asset.subCategory && (
+                            <Badge variant="outline" className="text-xs border-slate-200 text-slate-600 truncate max-w-[120px]">
+                              {asset.subCategory}
+                            </Badge>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                ))}
+              </div>
+            ) : (
+              <Card className="border-0 shadow-lg shadow-slate-200/50">
+                <CardContent className="p-0">
+                  <div className="divide-y divide-slate-100">
+                    {filteredAssets.map((asset, index) => (
+                      <motion.div
+                        key={asset.id}
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: index * 0.03 }}
+                        className="flex items-center gap-4 p-4 hover:bg-slate-50 transition-colors"
+                      >
+                        <Checkbox />
+                        <div className={`w-10 h-10 rounded-lg bg-${getProductColor(asset.product)}-100 flex items-center justify-center`}>
+                          {getTypeIcon(asset.type)}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <h3 className="font-medium text-slate-900 text-sm truncate">
+                            {asset.name}
+                          </h3>
+                          <p className="text-xs text-slate-500 mt-0.5">
+                            {asset.subCategory || products.find(p => p.id === asset.product)?.name}
+                          </p>
+                        </div>
+                        <div className="hidden sm:block text-sm text-slate-500">
+                          {asset.size}
+                        </div>
+                        <div className="hidden md:block text-sm text-slate-500">
+                          {asset.date}
+                        </div>
+                        <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700`}>
+                          {products.find(p => p.id === asset.product)?.shortName}
+                        </Badge>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon" className="h-8 w-8">
+                              <MoreVertical className="w-4 h-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem>
+                              <Eye className="w-4 h-4 mr-2" /> Preview
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              <Download className="w-4 h-4 mr-2" /> Download
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-red-600">
+                              <Trash2 className="w-4 h-4 mr-2" /> Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </motion.div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/src/pages/Scheduler.jsx

@@ -0,0 +1,493 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  Calendar as CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+  Plus,
+  Clock,
+  Layers,
+  Image,
+  FileText,
+  Video,
+  Filter,
+  Settings,
+  Sparkles,
+  Check,
+  X,
+  GripVertical
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Calendar } from '@/components/ui/calendar';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { format, addDays, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isToday } from 'date-fns';
+import { Link } from 'react-router-dom';
+import { createPageUrl } from '@/utils';
+
+const products = [
+  { id: 'ocr', name: 'Document Parsing (OCR)', shortName: 'OCR', color: 'blue' },
+  { id: 'p2p', name: 'Purchase To Pay', shortName: 'P2P', color: 'emerald', subCategories: ['Budget Approval', 'Purchase Request', 'Accounts Payable'] },
+  { id: 'o2c', name: 'Order to Cash', shortName: 'O2C', color: 'violet', subCategories: ['Quotation', 'Sales Order', 'PickSlip Delivery', 'Accounts Receivable'] },
+];
+
+const postTypes = [
+  { id: 'carousel', name: 'Carousel', icon: Layers, description: 'Multi-slide visual story' },
+  { id: 'cover_content', name: 'Cover Image + Content', icon: Image, description: 'Featured image with text' },
+  { id: 'content_only', name: 'Content Only', icon: FileText, description: 'Text-based post' },
+  { id: 'webinar', name: 'Webinar Invite', icon: Video, description: 'Event promotion' },
+];
+
+const scheduledPosts = [
+  { id: 1, title: 'OCR Automation Benefits', type: 'carousel', product: 'ocr', time: '10:00 AM', date: new Date(), status: 'scheduled' },
+  { id: 2, title: 'P2P Efficiency Guide', type: 'cover_content', product: 'p2p', time: '2:00 PM', date: new Date(), status: 'draft' },
+  { id: 3, title: 'O2C Webinar', type: 'webinar', product: 'o2c', time: '11:00 AM', date: addDays(new Date(), 1), status: 'scheduled' },
+  { id: 4, title: 'Invoice Processing Tips', type: 'content_only', product: 'ocr', time: '3:00 PM', date: addDays(new Date(), 1), status: 'scheduled' },
+  { id: 5, title: 'Budget Approval Flow', type: 'carousel', product: 'p2p', time: '9:00 AM', date: addDays(new Date(), 2), status: 'scheduled' },
+  { id: 6, title: 'Sales Order Demo', type: 'cover_content', product: 'o2c', time: '1:00 PM', date: addDays(new Date(), 3), status: 'draft' },
+];
+
+export default function Scheduler() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [currentWeekStart, setCurrentWeekStart] = useState(startOfWeek(new Date(), { weekStartsOn: 1 }));
+  const [campaignDialogOpen, setCampaignDialogOpen] = useState(false);
+  const [selectedProducts, setSelectedProducts] = useState(['ocr', 'p2p', 'o2c']);
+  const [selectedPostTypes, setSelectedPostTypes] = useState(['carousel', 'cover_content']);
+  const [dateRange, setDateRange] = useState({ from: new Date(), to: addDays(new Date(), 30) });
+  const [postsPerWeek, setPostsPerWeek] = useState([5]);
+
+  const weekDays = eachDayOfInterval({
+    start: currentWeekStart,
+    end: endOfWeek(currentWeekStart, { weekStartsOn: 1 })
+  });
+
+  const navigateWeek = (direction) => {
+    setCurrentWeekStart(prev => addDays(prev, direction === 'next' ? 7 : -7));
+  };
+
+  const getPostsForDate = (date) => {
+    return scheduledPosts.filter(post => isSameDay(post.date, date));
+  };
+
+  const getProductColor = (productId) => {
+    const product = products.find(p => p.id === productId);
+    return product?.color || 'slate';
+  };
+
+  const getPostTypeIcon = (typeId) => {
+    const type = postTypes.find(t => t.id === typeId);
+    return type?.icon || FileText;
+  };
+
+  const toggleProduct = (productId) => {
+    setSelectedProducts(prev => 
+      prev.includes(productId)
+        ? prev.filter(id => id !== productId)
+        : [...prev, productId]
+    );
+  };
+
+  const togglePostType = (typeId) => {
+    setSelectedPostTypes(prev => 
+      prev.includes(typeId)
+        ? prev.filter(id => id !== typeId)
+        : [...prev, typeId]
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+                Content Scheduler
+              </h1>
+              <p className="text-slate-500 mt-1">
+                Plan and schedule your LinkedIn content calendar
+              </p>
+            </div>
+            <div className="flex gap-3">
+              <Dialog open={campaignDialogOpen} onOpenChange={setCampaignDialogOpen}>
+                <DialogTrigger asChild>
+                  <Button variant="outline" className="gap-2 border-slate-200">
+                    <Settings className="w-4 h-4" />
+                    Campaign Settings
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+                  <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                      <Sparkles className="w-5 h-5 text-amber-500" />
+                      Configure Campaign
+                    </DialogTitle>
+                  </DialogHeader>
+                  <div className="space-y-6 pt-4">
+                    {/* Date Range */}
+                    <div className="space-y-3">
+                      <Label className="text-sm font-semibold">Campaign Date Range</Label>
+                      <div className="grid grid-cols-2 gap-4">
+                        <div>
+                          <Label className="text-xs text-slate-500">Start Date</Label>
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <Button variant="outline" className="w-full justify-start mt-1.5">
+                                <CalendarIcon className="w-4 h-4 mr-2" />
+                                {format(dateRange.from, 'MMM d, yyyy')}
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto p-0" align="start">
+                              <Calendar
+                                mode="single"
+                                selected={dateRange.from}
+                                onSelect={(date) => setDateRange(prev => ({ ...prev, from: date }))}
+                              />
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                        <div>
+                          <Label className="text-xs text-slate-500">End Date</Label>
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <Button variant="outline" className="w-full justify-start mt-1.5">
+                                <CalendarIcon className="w-4 h-4 mr-2" />
+                                {format(dateRange.to, 'MMM d, yyyy')}
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto p-0" align="start">
+                              <Calendar
+                                mode="single"
+                                selected={dateRange.to}
+                                onSelect={(date) => setDateRange(prev => ({ ...prev, to: date }))}
+                              />
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Products to Focus */}
+                    <div className="space-y-3">
+                      <Label className="text-sm font-semibold">Products to Focus</Label>
+                      <div className="grid gap-3">
+                        {products.map(product => (
+                          <div key={product.id} className="space-y-2">
+                            <div 
+                              onClick={() => toggleProduct(product.id)}
+                              className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all ${
+                                selectedProducts.includes(product.id)
+                                  ? `border-${product.color}-300 bg-${product.color}-50`
+                                  : 'border-slate-200 hover:border-slate-300'
+                              }`}
+                            >
+                              <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                                selectedProducts.includes(product.id)
+                                  ? `bg-${product.color}-500 text-white`
+                                  : 'bg-slate-100 text-slate-400'
+                              }`}>
+                                {selectedProducts.includes(product.id) ? (
+                                  <Check className="w-4 h-4" />
+                                ) : (
+                                  <Plus className="w-4 h-4" />
+                                )}
+                              </div>
+                              <div className="flex-1">
+                                <p className="font-medium text-slate-900">{product.name}</p>
+                                {product.subCategories && (
+                                  <p className="text-xs text-slate-500 mt-0.5">
+                                    {product.subCategories.join(', ')}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Post Types Mix */}
+                    <div className="space-y-3">
+                      <Label className="text-sm font-semibold">Post Types Mix</Label>
+                      <div className="grid grid-cols-2 gap-3">
+                        {postTypes.map(type => (
+                          <div
+                            key={type.id}
+                            onClick={() => togglePostType(type.id)}
+                            className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all ${
+                              selectedPostTypes.includes(type.id)
+                                ? 'border-blue-300 bg-blue-50'
+                                : 'border-slate-200 hover:border-slate-300'
+                            }`}
+                          >
+                            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                              selectedPostTypes.includes(type.id)
+                                ? 'bg-blue-500 text-white'
+                                : 'bg-slate-100 text-slate-400'
+                            }`}>
+                              <type.icon className="w-5 h-5" />
+                            </div>
+                            <div>
+                              <p className="font-medium text-sm text-slate-900">{type.name}</p>
+                              <p className="text-xs text-slate-500">{type.description}</p>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Posting Frequency */}
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between">
+                        <Label className="text-sm font-semibold">Posts per Week</Label>
+                        <span className="text-lg font-bold text-blue-600">{postsPerWeek[0]}</span>
+                      </div>
+                      <Slider
+                        value={postsPerWeek}
+                        onValueChange={setPostsPerWeek}
+                        min={1}
+                        max={14}
+                        step={1}
+                        className="py-4"
+                      />
+                      <div className="flex justify-between text-xs text-slate-500">
+                        <span>1 post</span>
+                        <span>14 posts</span>
+                      </div>
+                    </div>
+
+                    <div className="flex justify-end gap-2 pt-4 border-t">
+                      <Button variant="outline" onClick={() => setCampaignDialogOpen(false)}>
+                        Cancel
+                      </Button>
+                      <Button className="bg-gradient-to-r from-blue-600 to-indigo-600 gap-2">
+                        <Sparkles className="w-4 h-4" />
+                        Generate Schedule
+                      </Button>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+              
+              <Link to={createPageUrl('PostEditor')}>
+                <Button className="gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">
+                  <Plus className="w-4 h-4" />
+                  Create Post
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </motion.div>
+
+        <div className="grid lg:grid-cols-4 gap-6">
+          {/* Calendar Sidebar */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="lg:col-span-1 space-y-6"
+          >
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardContent className="p-4">
+                <Calendar
+                  mode="single"
+                  selected={selectedDate}
+                  onSelect={setSelectedDate}
+                  className="rounded-md"
+                />
+              </CardContent>
+            </Card>
+
+            {/* Quick Stats */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-semibold text-slate-600">This Week</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-slate-600">Scheduled</span>
+                  <Badge className="bg-blue-100 text-blue-700 border-0">12 posts</Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-slate-600">Drafts</span>
+                  <Badge className="bg-amber-100 text-amber-700 border-0">4 posts</Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-slate-600">Published</span>
+                  <Badge className="bg-emerald-100 text-emerald-700 border-0">8 posts</Badge>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Product Filter */}
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-semibold text-slate-600 flex items-center gap-2">
+                  <Filter className="w-4 h-4" />
+                  Filter by Product
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {products.map(product => (
+                  <label key={product.id} className="flex items-center gap-3 cursor-pointer">
+                    <Checkbox defaultChecked />
+                    <span className="text-sm text-slate-700">{product.shortName}</span>
+                    <div className={`w-2 h-2 rounded-full bg-${product.color}-500 ml-auto`} />
+                  </label>
+                ))}
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Week View */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="lg:col-span-3"
+          >
+            <Card className="border-0 shadow-lg shadow-slate-200/50">
+              <CardHeader className="pb-4 border-b border-slate-100">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-lg font-semibold">
+                    {format(currentWeekStart, 'MMMM yyyy')}
+                  </CardTitle>
+                  <div className="flex items-center gap-2">
+                    <Button 
+                      variant="outline" 
+                      size="icon"
+                      onClick={() => navigateWeek('prev')}
+                      className="h-8 w-8"
+                    >
+                      <ChevronLeft className="w-4 h-4" />
+                    </Button>
+                    <Button 
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => setCurrentWeekStart(startOfWeek(new Date(), { weekStartsOn: 1 }))}
+                    >
+                      Today
+                    </Button>
+                    <Button 
+                      variant="outline" 
+                      size="icon"
+                      onClick={() => navigateWeek('next')}
+                      className="h-8 w-8"
+                    >
+                      <ChevronRight className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="p-0">
+                <div className="grid grid-cols-7 border-b border-slate-100">
+                  {weekDays.map((day, index) => (
+                    <div 
+                      key={index}
+                      className={`text-center py-4 border-r last:border-r-0 border-slate-100 ${
+                        isToday(day) ? 'bg-blue-50' : ''
+                      }`}
+                    >
+                      <p className="text-xs text-slate-500 uppercase">
+                        {format(day, 'EEE')}
+                      </p>
+                      <p className={`text-lg font-semibold mt-1 ${
+                        isToday(day) ? 'text-blue-600' : 'text-slate-900'
+                      }`}>
+                        {format(day, 'd')}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+                <div className="grid grid-cols-7 min-h-[400px]">
+                  {weekDays.map((day, dayIndex) => {
+                    const dayPosts = getPostsForDate(day);
+                    return (
+                      <div 
+                        key={dayIndex}
+                        className={`border-r last:border-r-0 border-slate-100 p-2 ${
+                          isToday(day) ? 'bg-blue-50/30' : ''
+                        }`}
+                      >
+                        <AnimatePresence>
+                          {dayPosts.map((post, postIndex) => {
+                            const PostIcon = getPostTypeIcon(post.type);
+                            const color = getProductColor(post.product);
+                            return (
+                              <motion.div
+                                key={post.id}
+                                initial={{ opacity: 0, scale: 0.9 }}
+                                animate={{ opacity: 1, scale: 1 }}
+                                exit={{ opacity: 0, scale: 0.9 }}
+                                transition={{ delay: postIndex * 0.05 }}
+                              >
+                                <Link to={createPageUrl('PostEditor') + `?id=${post.id}`}>
+                                  <div className={`mb-2 p-2 rounded-lg bg-white border border-${color}-200 hover:border-${color}-300 shadow-sm hover:shadow-md transition-all cursor-pointer group`}>
+                                    <div className="flex items-center gap-1.5 mb-1">
+                                      <div className={`w-5 h-5 rounded flex items-center justify-center bg-${color}-100`}>
+                                        <PostIcon className={`w-3 h-3 text-${color}-600`} />
+                                      </div>
+                                      <span className="text-[10px] text-slate-500">{post.time}</span>
+                                    </div>
+                                    <p className="text-xs font-medium text-slate-800 line-clamp-2 leading-tight">
+                                      {post.title}
+                                    </p>
+                                    <div className="flex items-center justify-between mt-1.5">
+                                      <Badge className={`text-[9px] px-1 py-0 bg-${color}-100 text-${color}-700 border-0`}>
+                                        {products.find(p => p.id === post.product)?.shortName}
+                                      </Badge>
+                                      {post.status === 'draft' && (
+                                        <span className="text-[9px] text-amber-600">Draft</span>
+                                      )}
+                                    </div>
+                                  </div>
+                                </Link>
+                              </motion.div>
+                            );
+                          })}
+                        </AnimatePresence>
+                        <Button 
+                          variant="ghost" 
+                          size="sm" 
+                          className="w-full h-7 text-xs text-slate-400 hover:text-slate-600 opacity-0 hover:opacity-100"
+                        >
+                          <Plus className="w-3 h-3 mr-1" />
+                          Add
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/utils.js

@@ -0,0 +1,18 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export function createPageUrl(pageName) {
+  const routes = {
+    Dashboard: '/',
+    Repository: '/repository',
+    Scheduler: '/scheduler',
+    PostEditor: '/post-editor',
+    Integrations: '/integrations',
+  };
+  return routes[pageName] || '/';
+}
+

frontend/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

frontend/vite.config.js

@@ -1,9 +1,15 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "path";
 
 // IMPORTANT: proxy API calls to backend when running both inside one container
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   server: {
     proxy: {
       "/api": "http://127.0.0.1:8000"