Initial clean commit

.gitignore

@@ -0,0 +1,61 @@
+# Python
+venv/
+.venv/
+env/
+.env/
+bin/
+lib/
+share/
+include/
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+.pnpm-error.log*
+frontend/dist/
+frontend/node_modules/
+
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Databases
+*.sqlite3
+backend/database.db
+
+# Uploads
+backend/uploads/*
+!backend/uploads/.gitkeep
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo

Dockerfile

@@ -0,0 +1,41 @@
+# Stage 1: Build Frontend
+FROM node:20-slim AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Backend & Final Image
+FROM python:3.9-slim
+
+# Install system dependencies (FFmpeg is required for Whisper)
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy backend requirements first for caching
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend code
+COPY backend /app/backend
+
+# Copy built frontend from Stage 1
+COPY --from=frontend-builder /app/frontend/dist /app/frontend/dist
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PORT=7860
+
+# Expose the port (Hugging Face uses 7860 by default)
+EXPOSE 7860
+
+# Command to run the application
+# We run from the backend directory so that imports work correctly
+WORKDIR /app/backend
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,34 @@
+---
+title: HEAREM - SentiCall AT
+emoji: 🎙️
+colorFrom: blue
+colorTo: orange
+sdk: docker
+pinned: false
+app_port: 7860
+---
+
+# HEAREM (SentiCall AT)
+### Algerian Call Center Sentiment Analysis Platform
+
+HEAREM is an enterprise-grade AI platform designed for **Algérie Télécom** to analyze customer interactions. It leverages state-of-the-art NLP models to transcribe Algerian Arabic (Darija) and French, detect sentiment, and extract key business topics.
+
+## 🚀 Features
+- **Multi-lingual Transcription**: Powered by OpenAI Whisper for accurate speech-to-text.
+- **Sentiment Analysis**: Real-time detection of customer emotions.
+- **Topic Classification**: Automated tagging of business-related keywords.
+- **Enterprise Dashboard**: Interactive analytics for managers and agents.
+
+## 🛠 Deployment on Hugging Face Spaces
+This app is containerized using Docker and optimized for Hugging Face Spaces.
+
+1. **Create a New Space** on Hugging Face.
+2. Select **Docker** as the SDK (Blank template).
+3. Push the repository contents to the Space.
+4. The build process will automatically:
+   - Build the React frontend.
+   - Set up the Python FastAPI backend.
+   - Serve the full-stack application on port 7860.
+
+---
+*Developed for Algérie Télécom Sentiment Analysis MVP.*

backend/database.py

@@ -0,0 +1,35 @@
+import os
+from sqlalchemy import create_engine, Column, Integer, String, Float, DateTime
+from sqlalchemy.orm import declarative_base
+from sqlalchemy.orm import sessionmaker
+from datetime import datetime
+
+DATABASE_URL = "sqlite:///./call_center.db"
+
+engine = create_engine(
+    DATABASE_URL, connect_args={"check_same_thread": False}
+)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()
+
+class CallRecord(Base):
+    __tablename__ = "call_records"
+
+    id = Column(Integer, primary_key=True, index=True)
+    filename = Column(String, index=True)
+    transcript = Column(String)
+    sentiment = Column(String) # Positive, Neutral, Negative
+    confidence = Column(Float)
+    keywords = Column(String) # comma-separated string
+    agent_name = Column(String, default="Agent Inconnu") # Traceability
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+Base.metadata.create_all(bind=engine)
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

backend/main.py

@@ -0,0 +1,127 @@
+import os
+import shutil
+from fastapi import FastAPI, UploadFile, File, Form, Depends, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from sqlalchemy.orm import Session
+from datetime import datetime
+import uuid
+
+from database import engine, Base, get_db, CallRecord
+from services.transcription import extract_transcript
+from services.sentiment import analyze_sentiment
+from services.keywords import extract_keywords
+
+app = FastAPI(title="Algerian Call Center Sentiment MVP")
+
+# Allow CORS for local frontend development
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+UPLOAD_DIR = "uploads"
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+@app.post("/analyze-call")
+async def analyze_call(
+    file: UploadFile = File(...), 
+    agent_name: str = Form("user"),
+    db: Session = Depends(get_db)
+):
+    """
+    Upload an audio file, process it through the pipeline, and save to DB.
+    """
+    if not file.filename.endswith(('.wav', '.mp3', '.ogg', '.m4a')):
+        raise HTTPException(status_code=400, detail="Invalid audio file format.")
+        
+    # Generate unique filename to avoid collisions
+    file_id = str(uuid.uuid4())
+    extension = os.path.splitext(file.filename)[1]
+    safe_filename = f"{file_id}{extension}"
+    file_path = os.path.join(UPLOAD_DIR, safe_filename)
+    
+    try:
+        # Save uploaded file
+        with open(file_path, "wb") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+            
+        # 1. Transcribe Audio
+        transcript = extract_transcript(file_path)
+        
+        # 2. Analyze Sentiment
+        sentiment_result = analyze_sentiment(transcript)
+        sentiment_label = sentiment_result['label']
+        confidence = sentiment_result['score']
+        
+        # 3. Extract Keywords
+        keywords = extract_keywords(transcript)
+        
+        # 4. Save to Database
+        new_record = CallRecord(
+            filename=file.filename,
+            transcript=transcript,
+            sentiment=sentiment_label,
+            confidence=confidence,
+            keywords=str(keywords),
+            agent_name=agent_name
+        )
+        db.add(new_record)
+        db.commit()
+        db.refresh(new_record)
+        
+        return {
+            "success": True,
+            "data": {
+                "id": new_record.id,
+                "filename": new_record.filename,
+                "transcript": new_record.transcript,
+                "sentiment": new_record.sentiment,
+                "confidence": new_record.confidence,
+                "keywords": new_record.keywords,
+                "created_at": new_record.created_at
+            }
+        }
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    finally:
+        # Optionally clean up the file after processing, 
+        # or keep it if playback is a desired feature later
+        pass
+
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+
+# ... existing code ...
+
+@app.get("/history")
+def get_history(db: Session = Depends(get_db)):
+    """
+    Return all analyzed calls from history.
+    """
+    records = db.query(CallRecord).order_by(CallRecord.created_at.desc()).all()
+    return records
+
+@app.get("/call/{call_id}")
+def get_call(call_id: int, db: Session = Depends(get_db)):
+    """
+    Return details of a specific call.
+    """
+    record = db.query(CallRecord).filter(CallRecord.id == call_id).first()
+    if not record:
+        raise HTTPException(status_code=404, detail="Call not found")
+    return record
+
+# Mount static files (ensure frontend/dist exists)
+# In production, we'll build the frontend into this folder.
+FRONTEND_PATH = "../frontend/dist"
+if os.path.exists(FRONTEND_PATH):
+    app.mount("/", StaticFiles(directory=FRONTEND_PATH, html=True), name="frontend")
+    
+    # Catch-all route to serve index.html for React Router
+    @app.get("/{full_path:path}")
+    async def serve_react_app(full_path: str):
+        return FileResponse(os.path.join(FRONTEND_PATH, "index.html"))

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.104.1
+uvicorn==0.24.0
+python-multipart==0.0.6
+openai-whisper
+transformers==4.35.2
+torch>=2.0.0
+scikit-learn==1.3.2
+SQLAlchemy==2.0.23
+pydantic==2.5.2

backend/seed.py

@@ -0,0 +1,53 @@
+import random
+from datetime import datetime, timedelta
+from sqlalchemy.orm import Session
+from database import engine, Base, SessionLocal, CallRecord
+import uuid
+
+# Initialize DB
+Base.metadata.create_all(bind=engine)
+db = SessionLocal()
+
+# Clear existing if needed (optional)
+# db.query(CallRecord).delete()
+
+issues = ["Coupure internet", "Lenteur ADSL", "Facture non payée", "Modem Fibre", "Demande 4G", "Changement de mot de passe", "Renseignement", "Réclamation technique"]
+sentiments = ["Positive", "Neutral", "Negative"]
+weights = [0.15, 0.25, 0.60] # Heavy on negative/neutral for realism in a support center
+agents = ["Amine B.", "Sarah M.", "Karim D.", "Nadia Y.", "Walid T."]
+
+def get_random_date(days_back=30):
+    start_date = datetime.now() - timedelta(days=days_back)
+    random_days = random.random() * days_back
+    return start_date + timedelta(days=random_days)
+
+def generate_mock_data(num_records=50):
+    print(f"Generating {num_records} mock call records for Algérie Télécom context...")
+    
+    for _ in range(num_records):
+        sentiment = random.choices(sentiments, weights=weights)[0]
+        issue = random.choice(issues)
+        agent = random.choice(agents)
+        
+        # Adjust confidence
+        confidence = random.uniform(0.75, 0.99)
+        
+        # Transcript mock
+        transcript = f"[Transcript simulé] Le client appelle concernant: {issue}. L'agent {agent} a répondu."
+        
+        record = CallRecord(
+            filename=f"appel_at_{uuid.uuid4().hex[:6]}.wav",
+            transcript=transcript,
+            sentiment=sentiment,
+            confidence=confidence,
+            keywords=issue,
+            agent_name=agent,
+            created_at=get_random_date()
+        )
+        db.add(record)
+        
+    db.commit()
+    print("Mock data generated successfully!")
+
+if __name__ == "__main__":
+    generate_mock_data(75) # Generate 75 mock calls

backend/services/keywords.py

@@ -0,0 +1,58 @@
+from transformers import pipeline
+
+# Use a powerful multilingual zero-shot classification model
+# This model will download on first run (~500MB)
+try:
+    print("Loading Zero-Shot Topic Classification model...")
+    topic_classifier = pipeline(
+        "zero-shot-classification", 
+        model="MoritzLaurer/mDeBERTa-v3-base-mnli-xnli"
+    )
+except Exception as e:
+    print(f"Error loading Topic model: {e}")
+    topic_classifier = None
+
+# Predefined categories for Algérie Télécom context
+AT_TOPICS = [
+    "Coupure Internet", 
+    "Problème Modem", 
+    "Facturation", 
+    "Renseignement Technique", 
+    "Fibre Optique", 
+    "Réseau Mobile 4G",
+    "Réclamation Service Client",
+    "Demande de Ligne"
+]
+
+def extract_keywords(text: str, top_k: int = 2) -> str:
+    """
+    Extracts the most relevant topics using Zero-Shot Classification.
+    Returns a comma-separated string of the most likely topics.
+    """
+    if not text.strip() or not topic_classifier:
+        return ""
+        
+    try:
+        # Perform zero-shot classification
+        result = topic_classifier(
+            text, 
+            candidate_labels=AT_TOPICS,
+            multi_label=True
+        )
+        
+        # Get labels with high confidence (e.g., > 0.4)
+        top_labels = []
+        for label, score in zip(result['labels'], result['scores']):
+            if score > 0.4:
+                top_labels.append(label)
+            if len(top_labels) >= top_k:
+                break
+        
+        # If none above threshold, take the top 1
+        if not top_labels and result['labels']:
+            top_labels = [result['labels'][0]]
+            
+        return ", ".join(top_labels)
+    except Exception as e:
+        print(f"Error classifying topics: {e}")
+        return ""

backend/services/sentiment.py

@@ -0,0 +1,48 @@
+from transformers import pipeline
+
+# We use alger-ia/dziribert_sentiment if it's available, otherwise fallback to a generic multilingual 
+# sentiment model that performs reasonably well for demonstration.
+# alger-ia/dziribert is the base model.
+try:
+    print("Loading DziriBERT sentiment model...")
+    sentiment_pipeline = pipeline(
+        "sentiment-analysis", 
+        model="alger-ia/dziribert_sentiment" 
+    )
+except Exception as e:
+    print(f"Error loading DziriBERT model, using generic fallback: {e}")
+    sentiment_pipeline = pipeline("sentiment-analysis")
+
+def analyze_sentiment(text: str) -> dict:
+    """
+    Analyzes the sentiment of the transcribed text.
+    Returns a dictionary with 'label' (Positive, Neutral, Negative) and 'score'.
+    """
+    if not text.strip():
+        return {"label": "Neutral", "score": 1.0}
+        
+    # Truncate text if it's too long for the BERT model
+    max_length = 512
+    truncated_text = text[:max_length]
+    
+    result = sentiment_pipeline(truncated_text)[0]
+    
+    # Map the output to Positive/Neutral/Negative
+    # camelbert returns 'positive', 'neutral', 'negative'
+    label = result['label'].capitalize()
+    
+    # Ensure it's one of the required labels
+    if label not in ["Positive", "Neutral", "Negative"]:
+        if "pos" in label.lower():
+            label = "Positive"
+        elif "neg" in label.lower():
+            label = "Negative"
+        else:
+            label = "Neutral"
+            
+    score = float(result['score'])
+    
+    return {
+        "label": label,
+        "score": round(score, 4)
+    }

backend/services/transcription.py

@@ -0,0 +1,29 @@
+import whisper
+import os
+
+# Upgraded to "large-v3" for maximum accuracy on code-switching (Arabic/French).
+MODEL_SIZE = "large-v3" 
+
+print(f"Loading whisper model ({MODEL_SIZE})...")
+# Load model (downloads on first run)
+model = whisper.load_model(MODEL_SIZE)
+
+def extract_transcript(audio_path: str) -> str:
+    """
+    Transcribes the audio file and returns the combined text.
+    """
+    print(f"Transcribing {audio_path}...")
+    
+    # Optimized prompt for code-switching (Arabic and French scripts)
+    # This guides Whisper to use Latin for French and Arabic script for Darija.
+    darija_prompt = "Bonjour, l'appel d'aujourd'hui est pour une réclamation. كيفاش نقدر نعاونك؟ واش كاين مشكل؟ Merci beaucoup."
+    
+    result = model.transcribe(
+        audio_path,
+        initial_prompt=darija_prompt
+    )
+    
+    # Extract language info for logging if needed
+    print(f"Detected language: {result.get('language', 'unknown')}")
+    
+    return result["text"].strip()

backend/test_dziri.py

@@ -0,0 +1,4 @@
+from transformers import pipeline
+p = pipeline("sentiment-analysis", model="alger-ia/dziribert_sentiment")
+print(p("Rani mlih hamdoullah"))
+print(p("Connexion raïha fiha, connexion mita"))

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.16.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.1",
+    "recharts": "^3.8.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.8.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^3.4.19",
+    "vite": "^8.0.12"
+  }
+}

frontend/postcss.config.js

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

frontend/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,24 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
+
+import Layout from "./components/layout/Layout"
+import UploadPage from "./pages/UploadPage"
+import ResultPage from "./pages/ResultPage"
+import DashboardPage from "./pages/DashboardPage"
+import HistoryPage from "./pages/HistoryPage"
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<UploadPage />} />
+          <Route path="result/:id" element={<ResultPage />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="history" element={<HistoryPage />} />
+        </Route>
+      </Routes>
+    </Router>
+  )
+}
+
+export default App

frontend/src/components/layout/Layout.jsx

@@ -0,0 +1,45 @@
+import React from "react"
+import { Outlet } from "react-router-dom"
+import Sidebar from "./Sidebar"
+import { Bell, Search } from "lucide-react"
+
+export default function Layout() {
+  return (
+    <div className="h-screen flex overflow-hidden bg-slate-50 font-sans">
+      <Sidebar />
+      
+      <div className="flex flex-col w-0 flex-1 md:pl-64">
+        {/* Top Header */}
+        <div className="relative z-10 flex-shrink-0 flex h-16 bg-white shadow-sm border-b border-slate-200">
+          <div className="flex-1 px-8 flex justify-between items-center">
+            <div className="flex-1 flex">
+              <div className="w-full flex md:ml-0">
+                 {/* Search bar removed per user request */}
+              </div>
+            </div>
+            <div className="ml-4 flex items-center md:ml-6">
+              <button className="bg-white p-1 rounded-full text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-at-blue">
+                <span className="sr-only">View notifications</span>
+                <Bell className="h-6 w-6" />
+              </button>
+              
+              <div className="ml-3 flex items-center gap-2">
+                <div className="bg-emerald-100 text-emerald-800 text-xs font-bold px-2.5 py-1 rounded-full flex items-center gap-1.5">
+                  <div className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></div>
+                  System Online
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content Area */}
+        <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
+          <div className="py-8 px-8">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}

frontend/src/components/layout/Sidebar.jsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { Link, useLocation } from "react-router-dom"
+import { LayoutDashboard, PhoneCall, History, Mic } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export default function Sidebar() {
+  const location = useLocation()
+  
+  const navItems = [
+    { name: "Vue Globale", href: "/dashboard", icon: LayoutDashboard },
+    { name: "Analyse Audio", href: "/", icon: PhoneCall },
+    { name: "Data Explorer", href: "/history", icon: History },
+  ]
+
+  return (
+    <div className="hidden md:flex md:w-72 md:flex-col md:fixed md:inset-y-0 bg-gradient-to-br from-at-blue via-blue-800 to-slate-900 shadow-2xl z-20">
+      <div className="flex-1 flex flex-col min-h-0 relative overflow-hidden">
+        
+        {/* Decorative background blur */}
+        <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 rounded-full bg-at-orange/10 blur-3xl pointer-events-none"></div>
+        <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-64 h-64 rounded-full bg-blue-500/20 blur-3xl pointer-events-none"></div>
+
+        <div className="flex items-center h-24 flex-shrink-0 px-8 border-b border-white/5 relative z-10">
+          <div className="flex items-center gap-4">
+            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-at-orange to-orange-600 flex items-center justify-center shadow-lg shadow-at-orange/30 animate-pulse-soft">
+              <Mic className="h-6 w-6 text-white" />
+            </div>
+            <div className="flex flex-col">
+              <span className="text-white text-2xl font-extrabold tracking-tight font-outfit uppercase">HEAREM</span>
+              <span className="text-at-orange text-[9px] font-bold tracking-tight uppercase mt-0.5">Hear the emotion behind the voice</span>
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex-1 flex flex-col overflow-y-auto relative z-10 mt-6">
+          <nav className="flex-1 px-4 space-y-3">
+            <div className="text-[11px] font-bold text-white/40 uppercase tracking-[0.2em] mb-4 px-4">Menu Principal</div>
+            {navItems.map((item) => {
+              const Icon = item.icon
+              const isActive = location.pathname === item.href || (item.href === "/" && location.pathname.startsWith("/result"))
+              return (
+                <Link
+                  key={item.name}
+                  to={item.href}
+                  className={cn(
+                    "group flex items-center px-4 py-3.5 text-sm font-semibold rounded-xl transition-all duration-300 relative overflow-hidden",
+                    isActive 
+                      ? "bg-white/10 text-white shadow-[0_0_20px_rgba(255,121,0,0.1)] border border-white/10" 
+                      : "text-white/60 hover:bg-white/5 hover:text-white border border-transparent"
+                  )}
+                >
+                  {isActive && <div className="absolute left-0 top-0 bottom-0 w-1 bg-at-orange rounded-r-full shadow-[0_0_10px_#FF7900]"></div>}
+                  <Icon className={cn("mr-4 h-5 w-5 transition-transform duration-300 group-hover:scale-110", isActive ? "text-at-orange drop-shadow-[0_0_8px_rgba(255,121,0,0.5)]" : "text-white/40 group-hover:text-white/70")} />
+                  {item.name}
+                </Link>
+              )
+            })}
+          </nav>
+        </div>
+        
+        <div className="flex-shrink-0 flex border-t border-white/5 p-6 relative z-10 bg-black/10 backdrop-blur-md">
+          <div className="flex items-center w-full group cursor-pointer">
+            <div className="h-10 w-10 rounded-full bg-gradient-to-r from-blue-400 to-at-blue p-[2px]">
+              <div className="h-full w-full rounded-full bg-slate-900 flex items-center justify-center">
+                <span className="text-white font-bold text-xs">AT</span>
+              </div>
+            </div>
+            <div className="ml-4 flex-1">
+              <p className="text-sm font-bold text-white group-hover:text-at-orange transition-colors">Admin Système</p>
+              <p className="text-xs font-medium text-white/50">admin@algerietelecom.dz</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/ui/badge.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+
+const Badge = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
+  const variants = {
+    default: "border-transparent bg-slate-900 text-slate-50",
+    positive: "border-transparent bg-emerald-100 text-emerald-800",
+    neutral: "border-transparent bg-yellow-100 text-yellow-800",
+    negative: "border-transparent bg-red-100 text-red-800",
+    outline: "text-slate-950",
+  }
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "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-slate-400 focus:ring-offset-2",
+        variants[variant],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+Badge.displayName = "Badge"
+
+export { Badge }

frontend/src/components/ui/button.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+
+const Button = React.forwardRef(({ className, variant = "default", size = "default", ...props }, ref) => {
+  const variants = {
+    default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90",
+    outline: "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900",
+    ghost: "hover:bg-slate-100 hover:text-slate-900",
+  }
+  const sizes = {
+    default: "h-10 px-4 py-2",
+    sm: "h-9 rounded-md px-3",
+    lg: "h-11 rounded-md px-8",
+  }
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+        variants[variant],
+        sizes[size],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+Button.displayName = "Button"
+
+export { Button }

frontend/src/components/ui/card.jsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-xl border bg-white text-slate-950 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("font-semibold leading-none tracking-tight", className)} {...props} />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+export { Card, CardHeader, CardTitle, CardContent }

frontend/src/components/ui/progress.jsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-slate-100", className)}
+    {...props}
+  >
+    <div
+      className="h-full w-full flex-1 bg-slate-900 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </div>
+))
+Progress.displayName = "Progress"
+
+export { Progress }

frontend/src/index.css

@@ -0,0 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    /* Subtle premium gradient background */
+    @apply bg-slate-50 text-slate-900 font-sans min-h-screen;
+    background-image: radial-gradient(circle at top right, rgba(0, 76, 151, 0.03) 0%, transparent 40%),
+                      radial-gradient(circle at bottom left, rgba(255, 121, 0, 0.03) 0%, transparent 40%);
+    background-attachment: fixed;
+  }
+  
+  ::selection {
+    background-color: rgba(255, 121, 0, 0.3); /* at-orange/30 */
+    color: #004C97; /* at-blue */
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Outfit', sans-serif;
+  }
+}
+
+@layer utilities {
+  .glass-card {
+    @apply bg-white/80 backdrop-blur-md border border-white/40 shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300;
+  }
+  
+  .glass-card:hover {
+    @apply shadow-[0_8px_30px_rgb(0,0,0,0.08)] -translate-y-1 bg-white/90;
+  }
+}
+
+/* Custom Animations */
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes pulse-soft {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.02); }
+}
+
+.animate-pulse-soft {
+  animation: pulse-soft 3s ease-in-out infinite;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,289 @@
+import React, { useEffect, useState } from "react"
+import axios from "axios"
+import { 
+  PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend,
+  LineChart, Line, XAxis, YAxis, CartesianGrid,
+  BarChart, Bar
+} from "recharts"
+import { TrendingUp, Users, AlertCircle, PhoneCall } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+export default function DashboardPage() {
+  const [history, setHistory] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchHistory = async () => {
+      try {
+        const response = await axios.get("/history")
+        setHistory(response.data)
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchHistory()
+  }, [])
+
+  if (loading) {
+    return <div className="flex justify-center items-center h-64"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-at-blue"></div></div>
+  }
+
+  // Calculate stats
+  const totalCalls = history.length
+  const positiveCalls = history.filter(h => h.sentiment === "Positive").length
+  const neutralCalls = history.filter(h => h.sentiment === "Neutral").length
+  const negativeCalls = history.filter(h => h.sentiment === "Negative").length
+  
+  // Satisfaction Score calculation (Mock Formula)
+  const satisfactionScore = totalCalls ? Math.round(((positiveCalls * 100) + (neutralCalls * 50)) / totalCalls) : 0
+
+  // Sentiment Donut Data
+  const sentimentData = [
+    { name: 'Positive', value: positiveCalls, color: '#10b981' }, 
+    { name: 'Neutral', value: neutralCalls, color: '#eab308' }, 
+    { name: 'Negative', value: negativeCalls, color: '#ef4444' } 
+  ].filter(d => d.value > 0)
+
+  // Top Issues Processing
+  const issueCounts = {}
+  history.forEach(call => {
+    if (call.keywords) {
+      const keys = call.keywords.split(',').map(k => k.trim())
+      keys.forEach(k => {
+        issueCounts[k] = (issueCounts[k] || 0) + 1
+      })
+    }
+  })
+  const topIssues = Object.entries(issueCounts)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 5)
+    .map(([name, count]) => ({ name, count }))
+
+  // Mock Trend Data (Last 7 Days) for Line Chart
+  const trendData = [
+    { name: 'Mon', calls: 120, satisfaction: 75 },
+    { name: 'Tue', calls: 132, satisfaction: 72 },
+    { name: 'Wed', calls: 101, satisfaction: 80 },
+    { name: 'Thu', calls: 142, satisfaction: 78 },
+    { name: 'Fri', calls: 90, satisfaction: 85 },
+    { name: 'Sat', calls: 60, satisfaction: 88 },
+    { name: 'Sun', calls: Math.max(totalCalls, 50), satisfaction: satisfactionScore },
+  ]
+
+  return (
+    <div className="max-w-7xl mx-auto">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-slate-900">Intelligence Dashboard</h1>
+          <p className="text-slate-500 mt-1">Real-time analysis of Algérie Télécom customer support interactions.</p>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="bg-white border rounded-lg px-4 py-2 text-sm font-medium text-slate-600 shadow-sm">
+            Last 7 Days
+          </div>
+        </div>
+      </div>
+      
+      {/* KPI Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <Card className="glass-card border-t-4 border-t-at-blue border-l-0 overflow-hidden relative group">
+          <div className="absolute top-0 right-0 -mr-4 -mt-4 w-20 h-20 rounded-full bg-at-blue/5 group-hover:scale-150 transition-transform duration-500 ease-out"></div>
+          <CardContent className="p-6 relative z-10">
+            <div className="flex justify-between items-start">
+              <div>
+                <p className="text-sm font-semibold text-slate-500 mb-1">Total Appels Analysés</p>
+                <h3 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-slate-900 to-slate-600 font-outfit">{totalCalls}</h3>
+              </div>
+              <div className="p-3 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-inner border border-white">
+                <PhoneCall className="h-6 w-6 text-at-blue" />
+              </div>
+            </div>
+            <div className="mt-5 flex items-center text-sm font-semibold">
+              <span className="flex items-center text-emerald-500 bg-emerald-50 px-2 py-0.5 rounded-md">
+                <TrendingUp className="h-3 w-3 mr-1" />+12.5%
+              </span>
+              <span className="text-slate-400 ml-2">vs sem. dernière</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="glass-card border-t-4 border-t-emerald-500 border-l-0 overflow-hidden relative group">
+          <div className="absolute top-0 right-0 -mr-4 -mt-4 w-20 h-20 rounded-full bg-emerald-500/5 group-hover:scale-150 transition-transform duration-500 ease-out"></div>
+          <CardContent className="p-6 relative z-10">
+            <div className="flex justify-between items-start">
+              <div>
+                <p className="text-sm font-semibold text-slate-500 mb-1">Satisfaction Client</p>
+                <h3 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-slate-900 to-slate-600 font-outfit">{satisfactionScore}<span className="text-xl text-slate-400">/100</span></h3>
+              </div>
+              <div className="p-3 bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl shadow-inner border border-white">
+                <Users className="h-6 w-6 text-emerald-600" />
+              </div>
+            </div>
+            <div className="mt-5 flex items-center text-sm font-semibold">
+              <span className="flex items-center text-emerald-500 bg-emerald-50 px-2 py-0.5 rounded-md">
+                <TrendingUp className="h-3 w-3 mr-1" />+4.2 pts
+              </span>
+              <span className="text-slate-400 ml-2">vs sem. dernière</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="glass-card border-t-4 border-t-red-500 border-l-0 overflow-hidden relative group">
+          <div className="absolute top-0 right-0 -mr-4 -mt-4 w-20 h-20 rounded-full bg-red-500/5 group-hover:scale-150 transition-transform duration-500 ease-out"></div>
+          <CardContent className="p-6 relative z-10">
+            <div className="flex justify-between items-start">
+              <div>
+                <p className="text-sm font-semibold text-slate-500 mb-1">Appels Critiques (Risque)</p>
+                <h3 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-red-600 to-red-400 font-outfit">{negativeCalls}</h3>
+              </div>
+              <div className="p-3 bg-gradient-to-br from-red-50 to-red-100 rounded-xl shadow-inner border border-white">
+                <AlertCircle className="h-6 w-6 text-red-600" />
+              </div>
+            </div>
+            <div className="mt-5 flex items-center text-sm font-semibold">
+              <span className="flex items-center text-red-500 bg-red-50 px-2 py-0.5 rounded-md">
+                <TrendingUp className="h-3 w-3 mr-1" />+2.1%
+              </span>
+              <span className="text-slate-400 ml-2">alerte active</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="glass-card border-t-4 border-t-at-orange border-l-0 overflow-hidden relative group">
+          <div className="absolute top-0 right-0 -mr-4 -mt-4 w-20 h-20 rounded-full bg-at-orange/5 group-hover:scale-150 transition-transform duration-500 ease-out"></div>
+          <CardContent className="p-6 relative z-10">
+            <div className="flex justify-between items-start">
+              <div>
+                <p className="text-sm font-semibold text-slate-500 mb-1">Taux Résolution Auto</p>
+                <h3 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-at-orange to-orange-400 font-outfit">42%</h3>
+              </div>
+              <div className="p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl shadow-inner border border-white">
+                <TrendingUp className="h-6 w-6 text-at-orange" />
+              </div>
+            </div>
+            <div className="mt-5 flex items-center text-sm font-semibold">
+              <span className="text-slate-400 bg-slate-100 px-2 py-0.5 rounded-md">Estimé par IA</span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+        {/* Trend Chart */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Call Volume & Satisfaction Trend</CardTitle>
+          </CardHeader>
+          <CardContent className="h-80">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={trendData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fill: '#64748b'}} dy={10} />
+                <YAxis yAxisId="left" axisLine={false} tickLine={false} tick={{fill: '#64748b'}} />
+                <YAxis yAxisId="right" orientation="right" domain={[0, 100]} axisLine={false} tickLine={false} tick={{fill: '#64748b'}} />
+                <Tooltip 
+                  contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+                />
+                <Legend wrapperStyle={{ paddingTop: '20px' }} />
+                <Line yAxisId="left" type="monotone" dataKey="calls" stroke="#004C97" strokeWidth={3} activeDot={{ r: 8 }} name="Call Volume" />
+                <Line yAxisId="right" type="monotone" dataKey="satisfaction" stroke="#FF7900" strokeWidth={3} name="Satisfaction Score" />
+              </LineChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Sentiment Donut */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Global Sentiment Distribution</CardTitle>
+          </CardHeader>
+          <CardContent className="h-80 flex flex-col items-center justify-center relative">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={sentimentData}
+                  innerRadius={70}
+                  outerRadius={100}
+                  paddingAngle={5}
+                  dataKey="value"
+                >
+                  {sentimentData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} />
+                <Legend verticalAlign="bottom" height={36} />
+              </PieChart>
+            </ResponsiveContainer>
+            <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none pb-8">
+              <span className="text-3xl font-bold text-slate-900">{totalCalls}</span>
+              <span className="text-xs text-slate-500 font-medium">Total Calls</span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Top Issues Bar Chart */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Top Extracted Issues (DziriBERT NLP)</CardTitle>
+          </CardHeader>
+          <CardContent className="h-80">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart layout="vertical" data={topIssues} margin={{ top: 5, right: 30, left: 60, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="#e2e8f0" />
+                <XAxis type="number" axisLine={false} tickLine={false} tick={{fill: '#64748b'}} />
+                <YAxis dataKey="name" type="category" axisLine={false} tickLine={false} tick={{fill: '#475569', fontSize: 12}} width={120} />
+                <Tooltip cursor={{fill: '#f1f5f9'}} contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} />
+                <Bar dataKey="count" fill="#FF7900" radius={[0, 4, 4, 0]} barSize={24} name="Mentions" />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* System Status Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>AI Pipeline Status</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-slate-900">Speech-to-Text Engine</p>
+                  <p className="text-xs text-slate-500">Whisper Medium (Code-Switching Support)</p>
+                </div>
+                <div className="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full">Operational</div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-slate-900">Sentiment Classifier</p>
+                  <p className="text-xs text-slate-500">Alger-IA / DziriBERT Sentiment</p>
+                </div>
+                <div className="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full">Operational</div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-slate-900">Keyword Extractor</p>
+                  <p className="text-xs text-slate-500">TF-IDF Local Engine</p>
+                </div>
+                <div className="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full">Operational</div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-slate-900">Database</p>
+                  <p className="text-xs text-slate-500">SQLite Active Connection</p>
+                </div>
+                <div className="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full">Connected</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+    </div>
+  )
+}

frontend/src/pages/HistoryPage.jsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react"
+import { Link } from "react-router-dom"
+import axios from "axios"
+import { Search, Filter, PhoneCall, ChevronRight, Calendar, Activity } from "lucide-react"
+
+export default function HistoryPage() {
+  const [history, setHistory] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchHistory = async () => {
+      try {
+        const response = await axios.get("/history")
+        setHistory(response.data)
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchHistory()
+  }, [])
+
+  const getSentimentColor = (sentiment) => {
+    if (sentiment === "Positive") return "bg-emerald-100 text-emerald-800 border-emerald-200"
+    if (sentiment === "Negative") return "bg-red-100 text-red-800 border-red-200"
+    return "bg-yellow-100 text-yellow-800 border-yellow-200"
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-slate-900">Call History</h1>
+          <p className="text-slate-500 mt-1">Detailed log of all processed customer interactions.</p>
+        </div>
+        <div className="flex gap-3">
+          <button className="flex items-center gap-2 bg-white border rounded-lg px-4 py-2 text-sm font-medium text-slate-600 shadow-sm hover:bg-slate-50">
+            <Filter className="h-4 w-4" /> Filter
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-white shadow-sm ring-1 ring-slate-200 rounded-xl overflow-hidden">
+        {loading ? (
+          <div className="flex justify-center items-center h-64"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-at-blue"></div></div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-slate-200">
+              <thead className="bg-slate-50">
+                <tr>
+                  <th scope="col" className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Call ID / File
+                  </th>
+                  <th scope="col" className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Date & Time
+                  </th>
+                  <th scope="col" className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Agent
+                  </th>
+                  <th scope="col" className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Sentiment
+                  </th>
+                  <th scope="col" className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Extracted Topics
+                  </th>
+                  <th scope="col" className="relative px-6 py-4">
+                    <span className="sr-only">View</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-slate-200">
+                {history.map((call) => (
+                  <tr key={call.id} className="hover:bg-slate-50 transition-colors group">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-slate-100 flex items-center justify-center border border-slate-200">
+                          <PhoneCall className="h-4 w-4 text-slate-500" />
+                        </div>
+                        <div className="ml-4">
+                          <div className="text-sm font-medium text-slate-900 group-hover:text-at-blue transition-colors">
+                            {call.filename}
+                          </div>
+                          <div className="text-xs text-slate-500">ID: AT-{10000 + call.id}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center text-sm text-slate-900">
+                        <Calendar className="mr-1.5 h-4 w-4 text-slate-400" />
+                        {new Date(call.created_at).toLocaleDateString()}
+                      </div>
+                      <div className="text-xs text-slate-500 mt-1">
+                        {new Date(call.created_at).toLocaleTimeString()}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm font-bold text-slate-700">{call.agent_name || "Inconnu"}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold border ${getSentimentColor(call.sentiment)}`}>
+                        {call.sentiment}
+                      </span>
+                      <div className="text-xs text-slate-500 mt-1 flex items-center">
+                        <Activity className="h-3 w-3 mr-1 text-slate-400" />
+                        {(call.confidence * 100).toFixed(0)}% Conf.
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex flex-wrap gap-1">
+                        {call.keywords ? call.keywords.split(',').slice(0, 2).map((k, i) => (
+                          <span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-700">
+                            {k.trim()}
+                          </span>
+                        )) : <span className="text-xs text-slate-400">None</span>}
+                        {call.keywords && call.keywords.split(',').length > 2 && (
+                          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-50 text-slate-500 border border-slate-200">
+                            +{call.keywords.split(',').length - 2}
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <Link to={`/result/${call.id}`} className="inline-flex items-center text-at-blue hover:text-blue-900 font-semibold bg-blue-50 px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
+                        View Details <ChevronRight className="ml-1 h-4 w-4" />
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/ResultPage.jsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from "react"
+import { useParams, Link } from "react-router-dom"
+import axios from "axios"
+import { ArrowLeft, MessageSquare, Tags, BarChart2, Calendar, AlertTriangle, ShieldCheck, UserMinus, Clock } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+
+export default function ResultPage() {
+  const { id } = useParams()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const fetchResult = async () => {
+      try {
+        const response = await axios.get(`/call/${id}`)
+        setData(response.data)
+      } catch (err) {
+        console.error(err)
+        setError("Impossible de charger les détails de l'appel.")
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchResult()
+  }, [id])
+
+  if (loading) {
+    return <div className="flex justify-center items-center h-64"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-at-blue"></div></div>
+  }
+
+  if (error || !data) {
+    return <div className="text-center text-red-500 mt-10">{error || "Introuvable"}</div>
+  }
+
+  const getSentimentStyle = (sentiment) => {
+    if (sentiment === "Positive") return "bg-emerald-100 text-emerald-800 border-emerald-200"
+    if (sentiment === "Negative") return "bg-red-100 text-red-800 border-red-200"
+    return "bg-yellow-100 text-yellow-800 border-yellow-200"
+  }
+  
+  const formatDate = (dateStr) => {
+    return new Date(dateStr).toLocaleString('fr-DZ')
+  }
+
+  // Churn Risk Logic
+  let churnRisk = "Faible"
+  let churnColor = "text-emerald-600 bg-emerald-50 border-emerald-200"
+  let churnIcon = ShieldCheck
+  
+  if (data.sentiment === "Negative") {
+    if (data.confidence > 0.9) {
+      churnRisk = "Critique"
+      churnColor = "text-red-700 bg-red-50 border-red-200"
+      churnIcon = AlertTriangle
+    } else {
+      churnRisk = "Modéré"
+      churnColor = "text-orange-600 bg-orange-50 border-orange-200"
+      churnIcon = UserMinus
+    }
+  } else if (data.sentiment === "Neutral") {
+    churnRisk = "Modéré"
+    churnColor = "text-yellow-700 bg-yellow-50 border-yellow-200"
+    churnIcon = UserMinus
+  }
+
+  const RiskIcon = churnIcon
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="mb-6">
+        <Link to="/history" className="inline-flex items-center text-sm font-semibold text-slate-500 hover:text-at-blue transition-colors bg-white px-4 py-2 rounded-lg border border-slate-200 shadow-sm">
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Retour à l'Historique
+        </Link>
+      </div>
+
+      <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-8">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+          <div>
+            <div className="flex items-center gap-3 mb-2">
+              <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">ID Appel: AT-{10000 + data.id}</span>
+              <span className={`px-3 py-1 rounded-full text-xs font-bold border uppercase tracking-wider ${getSentimentStyle(data.sentiment)}`}>
+                Sentiment {data.sentiment}
+              </span>
+            </div>
+            <h1 className="text-3xl font-bold tracking-tight text-slate-900">{data.filename}</h1>
+            <div className="flex items-center text-slate-500 mt-3 text-sm gap-6 font-medium">
+              <span className="flex items-center"><Calendar className="mr-2 h-4 w-4 text-slate-400" /> {formatDate(data.created_at)}</span>
+              <span className="flex items-center"><UserMinus className="mr-2 h-4 w-4 text-slate-400" /> Agent: {data.agent_name || "Inconnu"}</span>
+              <span className="flex items-center"><Clock className="mr-2 h-4 w-4 text-slate-400" /> Durée: Analysée</span>
+            </div>
+          </div>
+          
+          <div className={`flex items-center gap-4 px-6 py-4 rounded-xl border ${churnColor}`}>
+            <div className="p-3 bg-white/60 rounded-full">
+              <RiskIcon className="h-8 w-8" />
+            </div>
+            <div>
+              <p className="text-sm font-bold opacity-80 uppercase tracking-wider">Risque d'attrition (Churn)</p>
+              <p className="text-2xl font-black">{churnRisk}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-8">
+          <Card className="shadow-sm border-slate-200 overflow-hidden">
+            <div className="bg-slate-50 border-b border-slate-100 px-6 py-4 flex items-center justify-between">
+              <h3 className="text-lg font-bold text-slate-900 flex items-center">
+                <MessageSquare className="mr-2 h-5 w-5 text-at-blue" />
+                Transcription Audio (DziriBERT / Whisper)
+              </h3>
+            </div>
+            <CardContent className="p-6">
+              <div className="prose prose-slate max-w-none">
+                <p className="text-slate-800 text-lg leading-relaxed whitespace-pre-wrap font-medium">
+                  {data.transcript || "Aucune transcription disponible."}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-8">
+          <Card className="shadow-sm border-slate-200">
+            <div className="bg-slate-50 border-b border-slate-100 px-6 py-4">
+              <h3 className="text-lg font-bold text-slate-900 flex items-center">
+                <BarChart2 className="mr-2 h-5 w-5 text-at-blue" />
+                Fiabilité IA
+              </h3>
+            </div>
+            <CardContent className="p-6">
+              <div className="mb-2 flex justify-between items-end">
+                <span className="text-4xl font-black text-slate-900">{(data.confidence * 100).toFixed(1)}%</span>
+                <span className="text-sm text-slate-500 font-bold uppercase tracking-wider">Score de Confiance</span>
+              </div>
+              <Progress value={data.confidence * 100} className="h-3 mt-4" />
+              <p className="text-xs text-slate-400 mt-3 font-medium">
+                La probabilité que le modèle DziriBERT ait correctement identifié le sentiment de cet appel.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="shadow-sm border-slate-200">
+            <div className="bg-slate-50 border-b border-slate-100 px-6 py-4">
+              <h3 className="text-lg font-bold text-slate-900 flex items-center">
+                <Tags className="mr-2 h-5 w-5 text-at-blue" />
+                Mots-Clés Extraits
+              </h3>
+            </div>
+            <CardContent className="p-6">
+              <div className="flex flex-wrap gap-2">
+                {data.keywords ? (
+                  data.keywords.split(',').map((keyword, idx) => (
+                    <span key={idx} className="px-3 py-1.5 bg-blue-50 text-blue-700 border border-blue-100 font-bold text-sm rounded-lg shadow-sm">
+                      {keyword.trim()}
+                    </span>
+                  ))
+                ) : (
+                  <span className="text-sm text-slate-500 italic">Aucun mot-clé pertinent extrait.</span>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/UploadPage.jsx

@@ -0,0 +1,188 @@
+import React, { useState, useRef } from "react"
+import { useNavigate } from "react-router-dom"
+import axios from "axios"
+import { UploadCloud, FileAudio, Loader2, Server, ShieldCheck } from "lucide-react"
+
+export default function UploadPage() {
+  const [file, setFile] = useState(null)
+  const [agentName, setAgentName] = useState("")
+  const [isDragging, setIsDragging] = useState(false)
+  const [isUploading, setIsUploading] = useState(false)
+  const [error, setError] = useState(null)
+  
+  const fileInputRef = useRef(null)
+  const navigate = useNavigate()
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    setIsDragging(true)
+  }
+
+  const handleDragLeave = () => {
+    setIsDragging(false)
+  }
+
+  const handleDrop = (e) => {
+    e.preventDefault()
+    setIsDragging(false)
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const droppedFile = e.dataTransfer.files[0]
+      validateAndSetFile(droppedFile)
+    }
+  }
+
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      validateAndSetFile(e.target.files[0])
+    }
+  }
+
+  const validateAndSetFile = (selectedFile) => {
+    const validTypes = ['audio/wav', 'audio/mpeg', 'audio/ogg', 'audio/x-m4a']
+    if (validTypes.includes(selectedFile.type) || selectedFile.name.match(/\.(wav|mp3|ogg|m4a)$/i)) {
+      setFile(selectedFile)
+      setError(null)
+    } else {
+      setError("Format non supporté. Veuillez utiliser .wav, .mp3, .ogg ou .m4a")
+      setFile(null)
+    }
+  }
+
+  const handleUpload = async () => {
+    if (!file) return
+    setIsUploading(true)
+    setError(null)
+    
+    const formData = new FormData()
+    formData.append("file", file)
+    formData.append("agent_name", agentName || "user")
+    
+    try {
+      const response = await axios.post("/analyze-call", formData, {
+        headers: { "Content-Type": "multipart/form-data" }
+      })
+      if (response.data.success) {
+        navigate(`/result/${response.data.data.id}`)
+      }
+    } catch (err) {
+      console.error(err)
+      setError(err.response?.data?.detail || "Erreur de connexion au serveur IA.")
+    } finally {
+      setIsUploading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto h-full flex flex-col justify-center pb-20 relative">
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-br from-at-blue/5 to-at-orange/5 rounded-full blur-3xl -z-10 pointer-events-none animate-pulse-soft"></div>
+
+      <div className="mb-10 text-center relative z-10">
+        <h1 className="text-5xl font-black tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-slate-900 to-slate-700 mb-4 font-outfit drop-shadow-sm">Module d'Ingestion Audio</h1>
+        <p className="text-lg text-slate-500 max-w-2xl mx-auto font-medium">
+          Déposez un enregistrement d'appel client (Dialecte Algérien / Français) pour une transcription sécurisée et une analyse sémantique par notre moteur IA.
+        </p>
+      </div>
+
+      <div className="glass-card rounded-3xl overflow-hidden relative z-10">
+        <div className="flex border-b border-slate-100 bg-white/50 backdrop-blur-xl px-8 py-5 items-center justify-between">
+          <div className="flex items-center gap-3 text-sm font-bold text-slate-700 uppercase tracking-widest">
+            <Server className="h-5 w-5 text-at-blue" /> Pipeline IA: Connecté
+          </div>
+          <div className="flex items-center gap-2 text-xs font-bold text-emerald-700 bg-emerald-50 px-3 py-1.5 rounded-full border border-emerald-200 shadow-sm">
+            <ShieldCheck className="h-4 w-4" /> Traitement Local Sécurisé
+          </div>
+        </div>
+
+        <div className="p-12">
+          <div 
+            className={`relative border-2 border-dashed rounded-3xl p-16 text-center transition-all duration-500 ease-out cursor-pointer overflow-hidden ${
+              isDragging 
+                ? "border-at-blue bg-blue-50/80 scale-[1.02] shadow-[0_0_40px_rgba(0,76,151,0.1)]" 
+                : "border-slate-300 hover:border-at-blue/50 bg-slate-50/50 hover:bg-white"
+            }`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={() => !isUploading && fileInputRef.current?.click()}
+          >
+            {isDragging && <div className="absolute inset-0 bg-gradient-to-br from-at-blue/5 to-transparent pointer-events-none"></div>}
+
+            <input 
+              type="file" 
+              className="hidden" 
+              ref={fileInputRef} 
+              onChange={handleFileChange}
+              accept=".wav,.mp3,.ogg,.m4a"
+            />
+            
+            {!file ? (
+              <div className="flex flex-col items-center justify-center relative z-10 animate-float">
+                <div className="h-24 w-24 bg-white rounded-2xl flex items-center justify-center shadow-xl shadow-slate-200/50 mb-8 border border-slate-100 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500">
+                  <UploadCloud className="h-12 w-12 text-at-blue drop-shadow-md" />
+                </div>
+                <h3 className="text-2xl font-black text-slate-900 mb-3 font-outfit">Cliquez ou glissez un fichier audio ici</h3>
+                <p className="text-base text-slate-500 font-medium">Formats supportés: WAV, MP3, OGG, M4A (Max 50MB)</p>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center relative z-10">
+                <div className="h-24 w-24 bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-blue-900/10 border border-blue-200 animate-pulse-soft">
+                  <FileAudio className="h-12 w-12 text-at-blue" />
+                </div>
+                <h3 className="text-2xl font-black text-slate-900 mb-2 truncate max-w-md font-outfit">{file.name}</h3>
+                <p className="text-sm font-bold text-at-blue mb-8 bg-blue-50 px-4 py-1.5 rounded-full border border-blue-100">
+                  {(file.size / 1024 / 1024).toFixed(2)} MB
+                </p>
+                <button 
+                  className="text-sm font-bold text-slate-400 hover:text-slate-800 transition-colors uppercase tracking-wider"
+                  onClick={(e) => { e.stopPropagation(); setFile(null); }}
+                  disabled={isUploading}
+                >
+                  Changer de fichier
+                </button>
+              </div>
+            )}
+          </div>
+
+          <div className="mt-8 mb-4 max-w-sm mx-auto">
+            <label htmlFor="agent_name" className="block text-sm font-bold text-slate-700 mb-2">Traçabilité de l'Agent (Optionnel)</label>
+            <input 
+              type="text" 
+              id="agent_name"
+              placeholder="user" 
+              value={agentName}
+              onChange={(e) => setAgentName(e.target.value)}
+              className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-at-blue focus:ring-2 focus:ring-at-blue/20 transition-all font-medium text-slate-700 outline-none"
+            />
+          </div>
+
+          {error && (
+            <div className="mt-6 p-4 bg-red-50 border border-red-100 text-red-700 rounded-xl text-sm flex items-center gap-3 font-semibold shadow-sm animate-pulse">
+              <ShieldCheck className="h-5 w-5" /> {error}
+            </div>
+          )}
+
+          <div className="mt-10 flex justify-center">
+            <button 
+              onClick={handleUpload} 
+              disabled={!file || isUploading}
+              className={`flex items-center justify-center h-16 px-10 rounded-2xl font-black text-lg text-white transition-all duration-300 font-outfit tracking-wide ${
+                !file || isUploading 
+                  ? "bg-slate-200 text-slate-400 cursor-not-allowed" 
+                  : "bg-gradient-to-r from-at-blue via-blue-600 to-at-blue hover:scale-105 shadow-[0_10px_40px_rgba(0,76,151,0.3)] hover:shadow-[0_15px_50px_rgba(0,76,151,0.4)] bg-[length:200%_auto] hover:bg-[position:right_center]"
+              } w-full sm:w-auto min-w-[300px]`}
+            >
+              {isUploading ? (
+                <>
+                  <Loader2 className="mr-3 h-6 w-6 animate-spin" />
+                  Analyse IA en cours...
+                </>
+              ) : (
+                "Lancer l'Analyse d'Appel"
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        at: {
+          blue: '#004C97',
+          orange: '#FF7900',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        outfit: ['Outfit', 'sans-serif'],
+      }
+    },
+  },
+  plugins: [],
+}

frontend/vite.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from "path"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})