added new UI, added form, added api message

README.md

@@ -1,21 +1,11 @@
----
-title: SalesBuddy for BetterTech
-emoji: 👁
-colorFrom: pink
-colorTo: blue
-sdk: docker
-pinned: false
-license: mit
-short_description: AIE4 Project - SalesBuddy for BetterTech
----
-
-# SalesBuddy for BetterTech
+# SalesOrion, formerly SalesBuddy
 
 ## Description
-SalesBuddy for BetterTech
+SalesOrion, formerly SalesBuddy
 
 ## Prerequisites
 - Python 3.11
+- node 20.11.0
 - pip
 
 ## Steps to Setup and Run the Project Locally

backend/app/db/database.py

@@ -7,11 +7,23 @@ db_type = os.getenv("DB_TYPE")
 
 
 if db_type == "mongodb":
-    from .database_mongodb import get_user_by_username, create_user, save_file, get_user_files
+    from .database_mongodb import get_user_by_username, create_user, save_file, get_user_files, create_opportunity, get_opportunities, get_opportunity_count
 else:
     from .database_dynamodb import get_user_by_username, create_user, save_file, get_user_files
+    async def create_opportunity(opportunity):
+        """Dummy function that does nothing"""
+        return None
+    async def get_opportunities(username: str):
+        """Dummy function that returns empty list"""
+        return []
+    async def get_opportunity_count(username: str):
+        """Dummy function that returns 0"""
+        return 0
     
 get_user_by_username
 create_user
 save_file
-get_user_files
+get_user_files
+create_opportunity
+get_opportunities
+get_opportunity_count

backend/app/db/database_dynamodb.py

@@ -42,6 +42,7 @@ async def save_file(username: str, file_upload: FileUpload) -> bool:
                 'updated_at': datetime.datetime.now(datetime.UTC).isoformat()
             }
         )
+            
         return True
     except ClientError:
         return False

backend/app/db/database_mongodb.py

@@ -1,10 +1,13 @@
 # backend/app/database.py
+from fastapi import Request, Depends, HTTPException
+from fastapi.responses import JSONResponse
 from motor.motor_asyncio import AsyncIOMotorClient
 import datetime
 from typing import Optional, List
-from .models import User, FileUpload
-from bson import Binary
+from .models import User, FileUpload, Opportunity
+from bson import Binary, ObjectId
 import os
+import json
 
 # Get MongoDB connection string from environment variable
 MONGO_URI = os.getenv("MONGODB_URI", "mongodb://localhost:27017")
@@ -16,6 +19,7 @@ db = client[DB_NAME]
 # Collections
 users_collection = db.users
 files_collection = db.files
+opportunities_collection = db.opportunities
 
 async def get_user_by_username(username: str) -> Optional[User]:
     """
@@ -91,6 +95,25 @@ async def save_file(username: str, records: any, filename: str) -> bool:
             upsert=True
         )
         
+        async for content in records: #assume csv is the same format for all files
+            opportunity = Opportunity(
+                opportunityId=content["Opportunity ID"],                 
+                opportunityName=content["Opportunity Name"],
+                opportunityState=content["Opportunity Stage"],
+                opportunityValue=content["Opportunity Value"],
+                customerName=content["Customer Name"],
+                customerContact=content["Customer Contact"],
+                customerContactRole=content["Customer Contact Role"],
+                nextSteps=content["Next Steps"],
+                opportunityDescription=content["Opportunity Description"],
+                activity=content["Activity"],
+                closeDate=content["Close Date"],
+                created_at=current_time,
+                updated_at=current_time,
+                username=username
+            )
+            await create_opportunity(opportunity)
+        
         return bool(result.modified_count or result.upserted_id)
     except Exception as e:
         print(f"Error saving file: {e}")
@@ -169,6 +192,33 @@ async def update_user(username: str, update_data: dict) -> bool:
         print(f"Error updating user: {e}")
         return False
 
+# Opportunities
+async def get_opportunities(username: str, skip: int = 0, limit: int = 100) -> List[Opportunity]:
+    """
+    Retrieve opportunities belonging to a user with pagination
+    """
+    cursor = opportunities_collection.find({"username": username}).skip(skip).limit(limit)
+    opportunities = await cursor.to_list(length=None)
+    return [Opportunity(**doc) for doc in opportunities]
+
+
+async def get_opportunity_count(username: str) -> int:
+    """
+    Get the total number of opportunities for a user
+    """
+    return await opportunities_collection.count_documents({"username": username})
+
+
+async def create_opportunity(opportunity: Opportunity) -> bool:
+    """
+    Create a new opportunity
+    """
+    #opportunity.created_at = datetime.datetime.now(datetime.UTC)
+    #opportunity.updated_at = datetime.datetime.now(datetime.UTC)
+    print("opportunity********", opportunity)
+    await opportunities_collection.insert_one(opportunity.model_dump())
+    return True 
+
 # Index creation function - call this during application startup
 async def create_indexes():
     """
@@ -184,10 +234,16 @@ async def create_indexes():
         await files_collection.create_index("created_at")
         await files_collection.create_index("updated_at")
         
+        # Opportunities indexes
+        await opportunities_collection.create_index("username")
+        await opportunities_collection.create_index("created_at")
+        await opportunities_collection.create_index("updated_at")   
+        
         return True
     except Exception as e:
         print(f"Error creating indexes: {e}")
         return False
+    
 
 # Optional: Add these to your requirements.txt
 # motor==3.3.1

backend/app/db/models.py

@@ -1,5 +1,5 @@
 from pydantic import BaseModel, EmailStr
-
+from bson import ObjectId
 from typing import Optional
 from datetime import datetime
 
@@ -20,6 +20,29 @@ class FileUpload(BaseModel):
     content: list[dict]
     created_at: Optional[datetime] = None
     updated_at: Optional[datetime] = None
+    
+class Opportunity(BaseModel):
+    username:str
+    activity: str
+    closeDate: datetime
+    customerContact: str
+    customerContactRole: str
+    customerName: str
+    nextSteps: str
+    opportunityDescription: str
+    opportunityId: str
+    opportunityName: str
+    opportunityState: str
+    opportunityValue: str
+    created_at: Optional[datetime] = None
+    updated_at: Optional[datetime] = None
+    
+    class Config:
+        json_encoders = {
+            datetime: lambda v: v.isoformat(),
+            ObjectId: lambda v: str(v)
+        }
+        allow_population_by_field_name = True
 
 class ChatMessage(BaseModel):
     message: str

backend/app/main.py

@@ -1,25 +1,28 @@
 import os
-import base64
 import io
-import csv
 import json
 import datetime
 import pandas as pd
 from datetime import timedelta
+from datetime import datetime as dt
 from fastapi import FastAPI,WebSocket, Depends, HTTPException, status, UploadFile, File
 from fastapi.responses import FileResponse, JSONResponse
 from fastapi.requests import Request
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.security import OAuth2PasswordRequestForm
+from pydantic import ValidationError, BaseModel
+from bson import ObjectId
+
+
 from .auth import (
     get_current_user,
     create_access_token,
     verify_password,
-    get_password_hash,
+    get_password_hash
 )
-from .db.models import User, Token, FileUpload
-from .db.database import get_user_by_username, create_user, save_file, get_user_files
+from .db.models import User, Token, Opportunity
+from .db.database import get_user_by_username, create_user, save_file, create_opportunity, get_opportunities, get_opportunity_count
 from .websocket import handle_websocket
 from .llm_models import invoke_general_model, invoke_customer_search
 
@@ -94,10 +97,6 @@ async def upload_file(
     # Convert DataFrame to list of dictionaries
     records = json.loads(df.to_json(orient='records'))
         
-
-    # Insert into MongoDB
-
-    
     if not await save_file(current_user.username, records, file.filename):
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
@@ -106,16 +105,106 @@ async def upload_file(
     
     return {"message": "File uploaded successfully"}
 
+@app.post("/api/save_opportunity")
+async def save_opportunity(opportunity_data: dict, current_user: User = Depends(get_current_user)) -> dict:
+    try:
+        opportunity_data= {
+            **opportunity_data,
+            "username":current_user.username,
+            "created_at":datetime.datetime.now(datetime.UTC),
+            "updated_at":datetime.datetime.now(datetime.UTC)
+        }
+        print("data********", opportunity_data)
+        opportunity = Opportunity(**opportunity_data)
+        if not await create_opportunity(opportunity):
+            raise HTTPException(
+                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                detail="Could not save opportunity"
+            )
+        return {"message": "Opportunity saved successfully"}
+    except ValidationError as e:
+        print(f"Validation error: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid opportunity data"
+        )
+
 @app.get("/api/opportunities")
-async def get_opportunities(request: Request, current_user: User = Depends(get_current_user)) -> dict:
-    records = await get_user_files(current_user.username)
-    print("records", records)
-    all_records = []
-    for record in records:
-        all_records.extend(record.content)  
+async def retrieve_opportunities(
+    request: Request,
+    page: int = 1,
+    limit: int = 100,
+    current_user: User = Depends(get_current_user)
+) -> JSONResponse:
+    """
+    Retrieve paginated opportunities for the current user
+    """
+    class JSONEncoder(json.JSONEncoder):
+        def default(self, obj):
+            if isinstance(obj, dt):
+                return obj.isoformat()
+            if isinstance(obj, ObjectId):
+                return str(obj)
+            return super().default(obj)
+        
+    try:
+        skip = (page - 1) * limit
+        
+        # Get paginated records
+        records = await get_opportunities(
+            username=current_user.username,
+            skip=skip,
+            limit=limit
+        )
+        
+        # Process records with proper serialization
+        all_records = []
+        for record in records:
+            # Convert MongoDB document to dict and handle ObjectId
+            record_dict = record.dict(by_alias=True)
+            if "_id" in record_dict:
+                record_dict["_id"] = str(record_dict["_id"])
+            
+            # Process content if it exists
+            if hasattr(record, 'content') and isinstance(record.content, (list, tuple)):
+                all_records.extend(record.content)
+            else:
+                all_records.append(record_dict)
+        
+        # Count total records
+        total_count = await get_opportunity_count(current_user.username)
+        
+        # Create response using Pydantic model
+        response_data = PaginatedResponse(
+            page=page,
+            limit=limit,
+            total_records=total_count,
+            total_pages=-(-total_count // limit),
+            has_more=(skip + limit) < total_count,
+            records=all_records
+        )
+        
+        # Convert to JSON with custom encoder
+        return JSONResponse(
+            content=json.loads(
+                json.dumps(
+                    {
+                        "success": True,
+                        "data": response_data.model_dump()
+                    },
+                    cls=JSONEncoder
+                )
+            ),
+            status_code=200
+        )
+            
+    except Exception as e:
+        print(f"Error retrieving opportunities: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"An error occurred while retrieving opportunities: {str(e)}"
+        )
 
-  
-    return {"records": all_records , "success": len(all_records) > 0}
 
 @app.websocket("/ws")
 async def websocket_endpoint(websocket: WebSocket) -> None:
@@ -125,8 +214,8 @@ async def websocket_endpoint(websocket: WebSocket) -> None:
 async def message(obj: dict, current_user: User = Depends(get_current_user)) -> JSONResponse:
     """Endpoint to handle general incoming messages from the frontend."""
     answer = invoke_general_model(obj["message"])
-    return JSONResponse(content={"message": answer.model_dump_json()})
-
+    print("answer**********", answer)
+    return JSONResponse(content={"message": json.loads(answer.model_dump_json() )})
 
 @app.post("/api/customer_insights")
 async def customer_insights(obj: dict) -> JSONResponse:
@@ -136,6 +225,19 @@ async def customer_insights(obj: dict) -> JSONResponse:
     
 app.mount("/assets", StaticFiles(directory=os.path.join(frontend_dir, "assets")), name="static")
 
+class PaginatedResponse(BaseModel):
+    page: int
+    limit: int
+    total_records: int
+    total_pages: int
+    has_more: bool
+    records: list 
+
+    class Config:
+        json_encoders = {
+            datetime: lambda v: v.isoformat(),
+            ObjectId: lambda v: str(v)
+        }
 if __name__ == "__main__":
     from fastapi.testclient import TestClient
 
@@ -143,9 +245,10 @@ if __name__ == "__main__":
 
     def test_message_endpoint():
         # Test that the message endpoint returns answers to questions.
+        # Update test as this api requires a token for authorization to use
         response = client.post("/api/message", json={"message": "What is MEDDPICC?"})
         print(response.json())
-        assert response.status_code == 200
+        assert response["status_code"] == 200
         assert "AIMessage" in response.json()
 
     test_message_endpoint()

docker-compose.yml

@@ -1,22 +0,0 @@
-version: '3.8'
-
-services:
-  backend:
-    build: ./backend
-    ports:
-      - "8000:8000"
-    environment:
-      - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID}
-      - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY}
-      - AWS_REGION=${AWS_REGION}
-      - MONGO_URI=${MONGO_URI}
-    command: uvicorn app.main:app --host 0.0.0.0 --port 8000
-
-  frontend:
-    build: ./frontend
-    ports:
-      - "3000:3000"
-    environment:
-      - VITE_WS_URL=ws://localhost:8000
-    depends_on:
-      - backend

frontend/package.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

frontend/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-select':
+        specifier: ^2.1.2
+        version: 2.1.2(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/[email protected])([email protected])
@@ -327,6 +330,21 @@ packages:
     resolution: {integrity: sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
   '@humanwhocodes/[email protected]':
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -390,6 +408,38 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -399,6 +449,138 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -408,6 +590,94 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
   '@remix-run/[email protected]':
     resolution: {integrity: sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==}
     engines: {node: '>=14.0.0'}
@@ -581,6 +851,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  [email protected]:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   [email protected]:
     resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -695,6 +969,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   [email protected]:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -846,6 +1123,10 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -900,6 +1181,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
   [email protected]:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1164,6 +1448,26 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==}
     engines: {node: '>=14.0.0'}
@@ -1177,6 +1481,16 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
+  [email protected]:
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -1351,6 +1665,26 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -1631,6 +1965,23 @@ snapshots:
 
   '@eslint/[email protected]': {}
 
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+
+  '@floating-ui/[email protected]': {}
+
   '@humanwhocodes/[email protected]':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.1
@@ -1691,6 +2042,29 @@ snapshots:
 
   '@pkgr/[email protected]': {}
 
+  '@radix-ui/[email protected]': {}
+
+  '@radix-ui/[email protected]': {}
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-slot': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       '@babel/runtime': 7.23.2
@@ -1698,6 +2072,127 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.37
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2([email protected]([email protected]))([email protected])
+      '@radix-ui/react-arrow': 1.1.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-rect': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-size': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/rect': 1.1.0
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-direction': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-focus-guards': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-focus-scope': 1.1.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-id': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-popper': 1.2.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-portal': 1.1.2(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-slot': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-previous': 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+      react-remove-scroll: 2.6.0(@types/[email protected])([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       '@babel/runtime': 7.23.2
@@ -1706,6 +2201,69 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.37
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/[email protected])([email protected])
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/[email protected])([email protected]([email protected]))([email protected])
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  '@radix-ui/[email protected]': {}
+
   '@remix-run/[email protected]': {}
 
   '@rollup/[email protected]':
@@ -1854,6 +2412,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      tslib: 2.8.1
+
   [email protected]([email protected]):
     dependencies:
       browserslist: 4.22.1
@@ -1957,6 +2519,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -2158,6 +2722,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       is-glob: 4.0.3
@@ -2216,6 +2782,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      loose-envify: 1.4.0
+
   [email protected]:
     dependencies:
       binary-extensions: 2.2.0
@@ -2429,6 +2999,25 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 18.2.0
+      react-style-singleton: 2.2.1(@types/[email protected])([email protected])
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.6(@types/[email protected])([email protected])
+      react-style-singleton: 2.2.1(@types/[email protected])([email protected])
+      tslib: 2.8.1
+      use-callback-ref: 1.3.2(@types/[email protected])([email protected])
+      use-sidecar: 1.1.2(@types/[email protected])([email protected])
+    optionalDependencies:
+      '@types/react': 18.2.37
+
   [email protected]([email protected]([email protected]))([email protected]):
     dependencies:
       '@remix-run/router': 1.20.0
@@ -2441,6 +3030,15 @@ snapshots:
       '@remix-run/router': 1.20.0
       react: 18.2.0
 
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.37
+
   [email protected]:
     dependencies:
       loose-envify: 1.4.0
@@ -2638,6 +3236,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 18.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.37
+
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.37
+
   [email protected]: {}
 
   [email protected]: {}

frontend/src/App.jsx

@@ -26,7 +26,7 @@ const PublicRoute = ({ children }) => {
     return <div className="flex items-center justify-center h-screen">Loading...</div>;
   }
 
-  return !token ? children : <Navigate to={location.state?.from?.pathname || "/"} replace />;
+  return !token ? children : <Navigate to="/" replace />;
 };
 
 function AppRoutes() {
@@ -73,11 +73,11 @@ function AppRoutes() {
 
 function App() {
   return (
-    <AuthProvider>
-      <Router>
+    <Router>
+      <AuthProvider>
         <AppRoutes/>
-      </Router>
-    </AuthProvider>
+      </AuthProvider>
+    </Router>
   );
 }
 

frontend/src/components/Chat.jsx

@@ -132,26 +132,11 @@ const Chat = () => {
   // Rest of your component (file upload handler, UI rendering, etc.)
   return (
     <div className="flex flex-col h-screen bg-gray-100">
-      <div className="flex justify-between items-center p-4 bg-white shadow">
-        <h1 className="text-xl font-bold">Chat Interface</h1>
-        <div className="flex items-center gap-4">
-          {isReconnecting && <span className="text-yellow-500">Reconnecting...</span>}
-          <span className={`h-3 w-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}></span>
-          <button
-            onClick={() => {
-              logout();
-              navigate('/login');
-            }}
-            className="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600"
-          >
-            Logout
-          </button>
-        </div>
-      </div>
+      
 
       {/* Messages area */}
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
-  
+      {isReconnecting && <span className="text-yellow-500">Reconnecting...</span>}
         {(messages || []).map((message, index) => (
           <div
             key={index}
@@ -185,6 +170,17 @@ const Chat = () => {
           >
             Send
           </button>
+
+          <button
+            onClick={() => {
+              logout();
+              navigate('/login');
+            }}
+            className="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600"
+          >
+            Logout
+          </button>
+          <span className={`h-3 w-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}></span>
         </form>
       </div>
     </div>

frontend/src/components/ChatApi.jsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useAuth } from '../services/AuthContext';
+import { useNavigate } from 'react-router-dom';
+
+const processMessages = (messageObject) => {
+  return (previousMessages) => {
+    if (previousMessages.length > 0 && previousMessages[previousMessages.length - 1].sender === messageObject.sender) {
+      const newMessage = {text:previousMessages[previousMessages.length - 1].text+ ' ' + messageObject.text, sender: messageObject.sender};
+      return [...previousMessages.slice(0, -1), newMessage];
+    } else {
+      return [...previousMessages, messageObject];
+    }
+  }
+}
+
+const ChatApi = () => {
+  const { token, logout } = useAuth();
+  const navigate = useNavigate();
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+
+
+  const sendMessage = (e) => {
+    e.preventDefault();
+    if (!input.trim()) return;
+
+    const message = {
+      type: 'message',
+      content: input
+    };
+
+    setMessages(processMessages({
+      text: input,
+      sender: 'user'
+    }));
+    fetch('http://localhost:8000/api/message', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: JSON.stringify({
+        message: input
+      })
+    }).then(response => response.json()).then(data => {
+      setMessages(processMessages({
+        text: data.message?.content,
+        sender: 'ai'
+      }));
+    });
+    setInput('');
+  };
+
+  // Rest of your component (file upload handler, UI rendering, etc.)
+  return (
+    <div className="flex flex-col bg-gray-100 h-[90vh]">
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4" >
+        {(messages || []).map((message, index) => (
+          <div
+            key={index}
+            className={`p-3 rounded-lg max-w-[80%] ${message.sender === 'user'
+                ? 'ml-auto bg-blue-500 text-white'
+                : message.sender === 'ai'
+                  ? 'bg-gray-200'
+                  : 'bg-yellow-100 mx-auto'
+              }`}
+          >
+            {message.text}
+          </div>
+        ))}
+      </div>
+
+      {/* Input area */}
+      <div className="p-4 bg-white border-t">
+        <form onSubmit={sendMessage} className="flex gap-4">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type your message..."
+            className="flex-1 p-2 border rounded"
+          />
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400"
+          >
+            Send
+          </button>
+
+          <button
+            onClick={() => {
+              logout();
+              navigate('/login');
+            }}
+            className="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600"
+          >
+            Logout
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ChatApi;

frontend/src/components/Opportunities.jsx

@@ -1,14 +1,17 @@
 import { useEffect, useState } from 'react';
 import Upload from './Upload';
-import Chat from './Chat';
-const storedToken = localStorage.getItem('token');
-
+import ChatApi from './ChatApi';
+import TwoColumnLayout from './layout/TwoColumn';
+import OpportunityForm from './OpportunityForm';
+import { Button } from './ui/button';
 
 const Opportunities = () => {
 
-  const [token, setToken] = useState(storedToken);
-  const [isPopupOpen, setIsPopupOpen] = useState(false); //form popup
   const [opportunities, setOpportunities] = useState([]);
+  const [selectedOpportunity, setSelectedOpportunity] = useState(null);
+  const [token, setToken] = useState(null);
+  const [research, setResearch] = useState(null);
+  
   useEffect(() => {
     const storedToken = localStorage.getItem('token');
     console.log('storedToken*******', storedToken)
@@ -21,18 +24,12 @@ const Opportunities = () => {
       }
     }).then(response => response.json())
       .then(data => {
-        /*if (!data.success) {
-          handleLogout();
-          return
-        }*/
-        console.log('data*******', data, !data.records || data.records.length === 0)
-        if (!data.records || data.records.length === 0) {
-          setIsPopupOpen(true);
-        } else {
-          console.log('data.records*******', data.records)
-          setOpportunities(data.records);
-        }
 
+        console.log('data.records*******', data.success && data.data.records?.length > 0)
+        if (data.success && data.data.records?.length > 0) {
+          setOpportunities(data.data.records);
+        }
+        
         setToken(storedToken);
       })
     console.log('storedToken', storedToken)
@@ -43,11 +40,45 @@ const Opportunities = () => {
     location = '/'
   };
 
+  const customerResearch = (opportunity) => {
+    fetch('/api/customer_insights', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        message: opportunity['opportunityName']
+      })
+    }).then(response => response.json())
+      .then(data => {
+        console.log('data*******', data)
+      })
+  }
+
   return (
     <>
-      <Popup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} token={token} title="No Opportunities">
-        <p>No opportunities found. Please upload a file to get started.</p>
-      </Popup>
+      <TwoColumnLayout tabs={['Opportunities', 'New Opportunity']}>
+          <ChatApi />
+          <div className="flex flex-col h-[calc(89vh-7px)]">
+            {opportunities.map((opportunity, id) => (
+              <Button key={id} onClick={() => setSelectedOpportunity(opportunity)}>{opportunity.opportunityName}</Button>
+            ))}
+            <div className="flex-1 overflow-y-auto p-4 space-y-4 h-[80vh]">
+              {Object.keys(selectedOpportunity || {}).map((key, index) => (
+                <div key={key+'-'+index}>{key}: {selectedOpportunity[key]}</div>
+              ))}
+              {research && <div>{research}</div>}
+            </div>
+
+            <div className="p-4 bg-white border-t">
+             <Button style={{'marginRight':'10px'}} onClick={() => {customerResearch(selectedOpportunity); setResearch(null)}}>Prism</Button>
+              <Button>Scout</Button>
+            </div>
+          </div>
+          <OpportunityForm/>
+      </TwoColumnLayout>
+      {/*
       <div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
         <div className="flex-1 overflow-auto p-6">
           <h2 style={{ 'fontSize': 'revert' }}>Opportunities</h2>
@@ -71,42 +102,10 @@ const Opportunities = () => {
             <button onClick={handleLogout} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400">Logout</button>
           </div>
         </div>
-      </div>
+      </div>*/}
     </>
   )
 }
 
-const Popup = ({ isOpen, onClose, title, children, token }) => {
-  const validate = () => {
-    //add validation of data
-    window.location.reload();
-  }
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Overlay */}
-      <div
-        className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
-      />
-
-      {/* Popup Content */}
-      <div className="relative z-50 w-full max-w-lg bg-white rounded-lg shadow-xl">
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b">
-          <h2 className="text-xl font-semibold">{title}</h2>
-        </div>
-
-        {/* Body */}
-        <div className="p-4">
-          {children}
-        </div>
-        <div className="flex items-center space-x-2" style={{ 'margin': '10px' }}>
-          <Upload token={token} validate={validate} />
-        </div>
-      </div>
-    </div>
-  );
-};
 
 export default Opportunities;

frontend/src/components/OpportunityForm.jsx

@@ -0,0 +1,288 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { Textarea } from './ui/textarea';
+import { AlertCircle } from 'lucide-react';
+import { useAuth } from '../services/AuthContext';
+
+const OpportunityForm = () => {
+  // Generate a simple ID using timestamp and random number
+  const generateId = () => `opp-${crypto.randomUUID()}`;
+
+
+  const initialFormState = {
+    opportunityId: generateId(),
+    customerName: '',
+    opportunityName: '',
+    opportunityState: '',
+    opportunityDescription: '',
+    opportunityValue: '',
+    closeDate: '',
+    customerContact: '',
+    customerContactRole: '',
+    activity: '',
+    nextSteps: ''
+  };
+
+  const [formData, setFormData] = useState(initialFormState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState({});
+  const { token } = useAuth();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    // Clear error when field is modified
+    if (errors[name]) {
+      setErrors(prev => ({ ...prev, [name]: '' }));
+    }
+  };
+
+  const handleSelectChange = (value) => {
+    setFormData(prev => ({
+      ...prev,
+      opportunityState: value
+    }));
+    if (errors.opportunityState) {
+      setErrors(prev => ({ ...prev, opportunityState: '' }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    if (!formData.customerName.trim()) newErrors.customerName = 'Customer name is required';
+    if (!formData.opportunityName.trim()) newErrors.opportunityName = 'Opportunity name is required';
+    if (!formData.opportunityState) newErrors.opportunityState = 'Opportunity state is required';
+    if (!formData.opportunityDescription.trim()) newErrors.opportunityDescription = 'Description is required';
+    if (!formData.opportunityValue) newErrors.opportunityValue = 'Value is required';
+    if (!formData.closeDate) newErrors.closeDate = 'Close date is required';
+    if (!formData.customerContact.trim()) newErrors.customerContact = 'Customer contact is required';
+    if (!formData.customerContactRole.trim()) newErrors.customerContactRole = 'Contact role is required';
+    if (!formData.activity.trim()) newErrors.activity = 'Activity is required';
+    if (!formData.nextSteps.trim()) newErrors.nextSteps = 'Next steps are required';
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch('/api/save_opportunity', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`,
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (!response.ok) {
+        throw new Error('Submission failed');
+      }
+
+      handleClear();
+      alert('Form submitted successfully!');
+    } catch (error) {
+      alert('Error submitting form: ' + error.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClear = () => {
+    setFormData({
+      ...initialFormState,
+      opportunityId: generateId()
+    });
+    setErrors({});
+  };
+
+  const FormLabel = ({ children, required }) => (
+    <div className="flex gap-1 text-sm font-medium leading-none mb-2">
+      {children}
+      {required && <span className="text-red-500">*</span>}
+    </div>
+  );
+
+  const ErrorMessage = ({ message }) => message ? (
+    <div className="flex items-center gap-1 text-red-500 text-sm mt-1">
+      <AlertCircle className="w-4 h-4" />
+      <span>{message}</span>
+    </div>
+  ) : null;
+
+  return (
+    <Card className="w-full max-w-2xl mx-auto">
+      <CardHeader>
+        <CardTitle>New Opportunity</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="hidden"
+            name="opportunityId"
+            value={formData.opportunityId}
+          />
+
+          <div>
+            <FormLabel required>Customer Name</FormLabel>
+            <Input
+              name="customerName"
+              value={formData.customerName}
+              onChange={handleChange}
+              className={errors.customerName ? 'border-red-500' : ''}
+            />
+            <ErrorMessage message={errors.customerName} />
+          </div>
+
+          <div>
+            <FormLabel required>Opportunity Name</FormLabel>
+            <Input
+              name="opportunityName"
+              value={formData.opportunityName}
+              onChange={handleChange}
+              className={errors.opportunityName ? 'border-red-500' : ''}
+            />
+            <ErrorMessage message={errors.opportunityName} />
+          </div>
+
+          <div>
+            <FormLabel required>Opportunity State</FormLabel>
+            <Select
+              value={formData.opportunityState}
+              onValueChange={handleSelectChange}
+            >
+              <SelectTrigger className={errors.opportunityState ? 'border-red-500' : ''}>
+                <SelectValue placeholder="Select state" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="proposal">Proposal</SelectItem>
+                <SelectItem value="negotiation">Negotiation</SelectItem>
+              </SelectContent>
+            </Select>
+            <ErrorMessage message={errors.opportunityState} />
+          </div>
+
+          <div>
+            <FormLabel required>Opportunity Description</FormLabel>
+            <Textarea
+              name="opportunityDescription"
+              value={formData.opportunityDescription}
+              onChange={handleChange}
+              className={`h-24 ${errors.opportunityDescription ? 'border-red-500' : ''}`}
+            />
+            <ErrorMessage message={errors.opportunityDescription} />
+          </div>
+
+          <div>
+            <FormLabel required>Opportunity Value (USD)</FormLabel>
+            <Input
+              type="number"
+              name="opportunityValue"
+              value={formData.opportunityValue}
+              onChange={handleChange}
+              min="0"
+              step="0.01"
+              className={errors.opportunityValue ? 'border-red-500' : ''}
+            />
+            <ErrorMessage message={errors.opportunityValue} />
+          </div>
+
+          <div>
+            <FormLabel required>Close Date</FormLabel>
+            <Input
+              type="date"
+              name="closeDate"
+              value={formData.closeDate}
+              onChange={handleChange}
+              className={errors.closeDate ? 'border-red-500' : ''}
+            />
+            <ErrorMessage message={errors.closeDate} />
+          </div>
+
+          <div>
+            <FormLabel required>Customer Contact</FormLabel>
+            <Input
+              name="customerContact"
+              value={formData.customerContact}
+              onChange={handleChange}
+              className={errors.customerContact ? 'border-red-500' : ''}
+            />
+            <ErrorMessage message={errors.customerContact} />
+          </div>
+
+          <div>
+            <FormLabel required>Customer Contact Role</FormLabel>
+            <Input
+              name="customerContactRole"
+              value={formData.customerContactRole}
+              onChange={handleChange}
+              className={errors.customerContactRole ? 'border-red-500' : ''}
+            />
+            <ErrorMessage message={errors.customerContactRole} />
+          </div>
+
+          <div>
+            <FormLabel required>Activity</FormLabel>
+            <Textarea
+              name="activity"
+              value={formData.activity}
+              onChange={handleChange}
+              className={`h-24 ${errors.activity ? 'border-red-500' : ''}`}
+            />
+            <ErrorMessage message={errors.activity} />
+          </div>
+
+          <div>
+            <FormLabel required>Next Steps</FormLabel>
+            <Textarea
+              name="nextSteps"
+              value={formData.nextSteps}
+              onChange={handleChange}
+              className={`h-24 ${errors.nextSteps ? 'border-red-500' : ''}`}
+            />
+            <ErrorMessage message={errors.nextSteps} />
+          </div>
+
+          <div className="flex gap-4 justify-end">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClear}
+              disabled={isSubmitting}
+            >
+              Clear
+            </Button>
+            <Button 
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? 'Submitting...' : 'Submit'}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OpportunityForm;

frontend/src/components/layout/TwoColumn.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Card, CardHeader, CardContent, CardTitle } from '../ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+
+const TwoColumnLayout = ({children, tabs}) => {
+  const left = React.Children.toArray(children)[0];
+  const right = React.Children.toArray(children).slice(1);
+  
+  return (
+    <div className="h-screen bg-gray-50">
+      <div className="mx-auto p-2 h-full max-w-[1800px]">
+        <div className="flex flex-col md:flex-row gap-4 h-full">
+          {/* Left Column */}
+          <div className="w-full md:w-[37%] h-full">
+            <Card className="flex flex-col h-full">
+              <CardHeader className="pb-2 shrink-0">
+                <CardTitle>Messages</CardTitle>
+              </CardHeader>
+              <CardContent className="flex-1  min-h-0">
+                <div className="h-full">
+                  {left}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Right Column */}
+          <div className="w-full md:w-[62%] h-full">
+            <Card className="flex flex-col h-full">
+              <CardContent className="flex flex-col h-full p-0">
+                <Tabs defaultValue={tabs[0]} className="flex flex-col h-full">
+                  <TabsList className={`grid w-full grid-cols-3 shrink-0`}>
+                    {tabs.map(t => (
+                      <TabsTrigger key={t} value={t}>{t}</TabsTrigger>
+                    ))}
+                  </TabsList>
+                  
+                  {tabs.map((tab, index) => (
+                    <TabsContent 
+                      key={tab}
+                      value={tab} 
+                      className="flex-1 overflow-auto min-h-0 p-6"
+                    >
+                      <div className="h-full flex flex-col">
+                        <div className="flex-1 overflow-auto">
+                          {right[index]}
+                        </div>
+                      </div>
+                    </TabsContent>
+                  ))}
+                </Tabs>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TwoColumnLayout;

frontend/src/components/ui/button.jsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva } from "class-variance-authority"
-
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
@@ -33,7 +32,8 @@ const buttonVariants = cva(
   }
 )
 
-const Button =({ className, variant, size, asChild = false, ...props }, ref) => {
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
@@ -43,6 +43,7 @@ const Button =({ className, variant, size, asChild = false, ...props }, ref) =>
       />
     )
   }
+)
 
 Button.displayName = "Button"
 

frontend/src/components/ui/card.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+import { cn } from "../../lib/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/input.jsx

@@ -1,8 +1,7 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
-
-const Input = (
+const Input = React.forwardRef(
   ({ className, type, ...props }, ref) => {
     return (
       <input

frontend/src/components/ui/select.jsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+import { cn } from "../../lib/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",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 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}
+    >
+      <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>
+    </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,
+}

frontend/src/components/ui/tabs.jsx

@@ -0,0 +1,95 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const TabContext = React.createContext({
+  selectedTab: '',
+  setSelectedTab: () => {}
+})
+
+const Tabs = React.forwardRef(({ defaultValue, value, onValueChange, className, children, ...props }, ref) => {
+  const [selectedTab, setSelectedTab] = React.useState(value || defaultValue);
+
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setSelectedTab(value);
+    }
+  }, [value]);
+
+  const handleTabChange = (newValue) => {
+    if (value === undefined) {
+      setSelectedTab(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <TabContext.Provider value={{ selectedTab, setSelectedTab: handleTabChange }}>
+      <div ref={ref} className={cn("w-full", className)} {...props}>
+        {children}
+      </div>
+    </TabContext.Provider>
+  );
+});
+Tabs.displayName = "Tabs"
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    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 = "TabsList"
+
+const TabsTrigger = React.forwardRef(({ className, value, children, ...props }, ref) => {
+  const { selectedTab, setSelectedTab } = React.useContext(TabContext);
+  const isSelected = selectedTab === value;
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="tab"
+      aria-selected={isSelected}
+      data-state={isSelected ? "active" : "inactive"}
+      onClick={() => setSelectedTab(value)}
+      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",
+        isSelected && "bg-background text-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
+TabsTrigger.displayName = "TabsTrigger"
+
+const TabsContent = React.forwardRef(({ className, value, children, ...props }, ref) => {
+  const { selectedTab } = React.useContext(TabContext);
+  const isSelected = selectedTab === value;
+
+  if (!isSelected) return null;
+
+  return (
+    <div
+      ref={ref}
+      role="tabpanel"
+      data-state={isSelected ? "active" : "inactive"}
+      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}
+    >
+      {children}
+    </div>
+  );
+});
+TabsContent.displayName = "TabsContent"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

frontend/src/components/ui/textarea.jsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { cn } from "../../lib/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/lib/{utils.ts → utils.js}

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
+import { clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
  
-export function cn(...inputs: ClassValue[]) {
+export function cn(...inputs) {
   return twMerge(clsx(inputs))
 }

frontend/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

frontend/tsconfig.node.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.js"
-  ]
-}