Updated gitignore for node app

.gitignore

@@ -215,4 +215,160 @@ marimo/_lsp/
 __marimo__/
 
 # Streamlit
-.streamlit/secrets.toml
+.streamlit/secrets.toml
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+node_modules
+bower_components
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit

Readme.md

@@ -348,14 +348,6 @@ class ProcessingJob(BaseModel):
 - **Rationale**: Full compatibility with Celery workers and simplified workflow
 - **Implementation**: All repositories and services operate synchronously for seamless integration
 
-### Implementation Status
-
-1. ✅ Pydantic models for MongoDB collections
-2. ✅ Repository layer for data access (files + processing_jobs + users + documents) - synchronous
-3. ✅ Service layer for business logic (auth, user, document, job) - synchronous
-4. ✅ Celery tasks for document processing
-5. ✅ Watchdog file monitoring implementation
-6. ✅ FastAPI integration and startup coordination
 
 ## Job Management Layer
 
@@ -493,15 +485,88 @@ src/file-processor/app/
 
 ### Next Implementation Steps
 
-1. **TODO**: Complete file processing pipeline =>
+1. Build React Login Page
-    1. ✅ Create Pydantic models for files and processing_jobs collections
+2. Build React Registration Page
-    2. ✅ Implement repository layer for file and processing job data access (synchronous)
+3. Build React Default Dashboard
-    3. ✅ Implement service layer for business logic (synchronous)
+4. Build React User Management Pages
-    4. ✅ Create Celery tasks for document processing (.txt, .pdf, .docx)
+
-    5. ✅ Implement Watchdog file monitoring with dedicated observer
+#### Validated Folders and files
-    6. ✅ Integrate file watcher with FastAPI startup
+```
-2. Create protected API routes for user management
+src/frontend/src/
-3. Build React monitoring interface with authentication
+├── components/
+│   ├── auth/
+│   │   ├── LoginForm.jsx          # Composant formulaire de login => Done
+│   │   └── AuthLayout.jsx         # Layout pour les pages d'auth => Done
+│   └── common/
+│       ├── Header.jsx             # Header commun => TODO
+│       ├── Layout.jsx             # Header commun => TODO
+│       └── ProtectedRoutes.jsx    #  Done
+├── contexts/
+│   └── AuthContext.jsx            # Done
+├── pages/
+│   ├── LoginPage.jsx              # Page complète de login => Done
+│   └── DashboardPage.jsx          # Page tableau de bord (exemple) => TODO
+├── services/
+│   └── authService.js             # Service API pour auth => Done
+├── hooks/
+│   └── useAuth.js                 # Hook React pour gestion auth => TODO
+├── utils/
+│   └── api.js                     # Configuration axios/fetch => Done
+├── App.jsx                        # Needs to be updated => TODO
+```
+#### Choices already made
+* Pour la gestion des requêtes API et de l'état d'authentification, je propose
+    * axios (plus de fonctionnalités) :
+    * Installation d'axios pour les requêtes HTTP
+    * Intercepteurs pour gestion automatique du token
+    * Gestion d'erreurs centralisée
+* Pour la gestion de l'état d'authentification et la navigation : Option A + C en même temps
+  * Option A - Context React + React Router :
+    * React Context pour l'état global d'auth (user, token, isAuthenticated)
+    * React Router pour la navigation entre pages
+    * Routes protégées automatiques
+  * Option C - Context + localStorage pour persistance :
+    * Token sauvegardé en localStorage pour rester connecté
+    * Context qui se recharge au démarrage de l'app
+* CSS : Utilisation de daisyUI
+
+#### Package.json
+```
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "axios": "^1.12.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "daisyui": "^5.1.23",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
+    "vite": "^7.1.2"
+  }
+}
+```
 
 ## Annexes
 

package-lock.json

@@ -0,0 +1,31 @@
+{
+  "name": "MyDocManager",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-icons": "^5.5.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-icons": "^5.5.0"
+  }
+}

requirements.txt

@@ -7,6 +7,7 @@ billiard==4.2.1
 celery==5.5.3
 certifi==2025.8.3
 cffi==2.0.0
+charset-normalizer==3.4.3
 click==8.2.1
 click-didyoumean==0.3.1
 click-plugins==1.1.1.2
@@ -26,10 +27,12 @@ importlib_metadata==8.7.0
 iniconfig==2.1.0
 izulu==0.50.0
 kombu==5.5.4
+lxml==6.0.2
 mongomock==4.3.0
 mongomock-motor==0.0.36
 motor==3.7.1
 packaging==25.0
+pillow==11.3.0
 pipdeptree==2.28.0
 pluggy==1.6.0
 prompt_toolkit==3.0.52
@@ -41,15 +44,19 @@ pydantic_core==2.33.2
 Pygments==2.19.2
 PyJWT==2.10.1
 pymongo==4.15.1
+pypandoc==1.15
 pytest==8.4.2
 pytest-asyncio==1.2.0
 pytest-mock==3.15.1
 python-dateutil==2.9.0.post0
+python-docx==1.2.0
 python-dotenv==1.1.1
 python-magic==0.4.27
+python-multipart==0.0.20
 pytz==2025.2
 PyYAML==6.0.2
 redis==6.4.0
+reportlab==4.4.4
 rsa==4.9.1
 sentinels==1.1.1
 six==1.17.0

src/file-processor/Dockerfile

@@ -7,6 +7,9 @@ WORKDIR /app
 RUN apt-get update && apt-get install -y --no-install-recommends \
     libmagic1 \
     file \
+    pandoc \
+    ghostscript \
+    texlive-xetex \
  && rm -rf /var/lib/apt/lists/*
 
 # Copy requirements and install dependencies

src/file-processor/app/config/settings.py

@@ -34,22 +34,6 @@ def get_redis_url() -> str:
   return os.getenv("REDIS_URL", "redis://localhost:6379/0")
 
 
-# def get_redis_host() -> str:
-#   redis_url = get_redis_url()
-#   if redis_url.startswith("redis://"):
-#     return redis_url.split("redis://")[1].split("/")[0]
-#   else:
-#     return redis_url
-#
-#
-# def get_redis_port() -> int:
-#   redis_url = get_redis_url()
-#   if redis_url.startswith("redis://"):
-#     return int(redis_url.split("redis://")[1].split("/")[0].split(":")[1])
-#   else:
-#     return int(redis_url.split(":")[1])
-
-
 def get_jwt_secret_key() -> str:
   """
   Get JWT secret key from environment variables.
@@ -114,6 +98,11 @@ def get_objects_folder() -> str:
   return os.getenv("OBJECTS_FOLDER", "/objects")
 
 
-def watch_directory() -> str:
+def get_watch_folder() -> str:
   """Directory to monitor for new files"""
   return os.getenv("WATCH_DIRECTORY", "/watched_files")
+
+
+def get_temp_folder() -> str:
+  """Directory to store temporary files"""
+  return os.getenv("TEMP_DIRECTORY", "/temp")

src/file-processor/app/file_watcher.py

@@ -63,17 +63,15 @@ class DocumentFileEventHandler(FileSystemEventHandler):
     
     logger.info(f"Processing new file: {filepath}")
     
-    #    try:
+    try:
-    from tasks.document_processing import process_document
+      from tasks.document_processing import process_document
-    task_result = process_document.delay(filepath)
+      task_result = process_document.delay(filepath)
-    print(task_result)
+      task_id = task_result.task_id
-    print("hello world")
+      logger.info(f"Dispatched Celery task with ID: {task_id}")
-    # task_id = task_result.task_id
-    # logger.info(f"Dispatched Celery task with ID: {task_id}")
     
-    # except Exception as e:
+    except Exception as e:
-    #   logger.error(f"Failed to process file {filepath}: {str(e)}")
+      logger.error(f"Failed to process file {filepath}: {str(e)}")
-    #   # Note: We don't re-raise the exception to keep the watcher running
+      # Note: We don't re-raise the exception to keep the watcher running
 
 
 class FileWatcher:

src/file-processor/app/main.py

@@ -65,12 +65,12 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
     
     # Create and start file watcher
     file_watcher = create_file_watcher(
-      watch_directory=settings.watch_directory(),
+      watch_directory=settings.get_watch_folder(),
       document_service=document_service,
       job_service=job_service
     )
     file_watcher.start()
-    logger.info(f"FileWatcher started for directory: {settings.watch_directory()}")
+    logger.info(f"FileWatcher started for directory: {settings.get_watch_folder()}")
     
     logger.info("Application startup completed successfully")
     
@@ -102,7 +102,7 @@ app = FastAPI(
 # Configure CORS
 app.add_middleware(
   CORSMiddleware,
-  allow_origins=["http://localhost:5173"],  # React frontend
+  allow_origins=["http://localhost:5173", "http://localhost:5174"],  # React frontend
   allow_credentials=True,
   allow_methods=["*"],
   allow_headers=["*"],

src/file-processor/requirements.txt

@@ -5,10 +5,14 @@ email-validator==2.3.0
 fastapi==0.116.1
 httptools==0.6.4
 motor==3.7.1
+pillow==11.3.0
 pydantic==2.11.9
 PyJWT==2.10.1
 pymongo==4.15.0
+pypandoc==1.15
+python-multipart==0.0.20
 redis==6.4.0
+reportlab==4.4.4
 uvicorn==0.35.0
 python-magic==0.4.27
 watchdog==6.0.0

src/frontend/index.html

@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>My Documents Manager</title>
   </head>
   <body>
     <div id="root"></div>

src/frontend/package.json

@@ -10,18 +10,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "axios": "^1.12.2",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.9.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "daisyui": "^5.1.24",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
     "vite": "^7.1.2"
   }
 }

src/frontend/src/App.css

@@ -1,42 +1,6 @@
+@import "tailwindcss";
+
 #root {
-  max-width: 1280px;
+    max-width: 1280px;
-  margin: 0 auto;
+    margin: 0 auto;
-  padding: 2rem;
+}
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/frontend/src/App.jsx

@@ -1,35 +1,34 @@
-import { useState } from 'react'
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import reactLogo from './assets/react.svg'
+import { AuthProvider } from './contexts/AuthContext';
-import viteLogo from '/vite.svg'
+import ProtectedRoute from './components/common/ProtectedRoute';
-import './App.css'
+import Layout from './components/common/Layout';
+import LoginPage from './pages/LoginPage';
+import DashboardPage from './pages/DashboardPage';
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
+    <AuthProvider>
-      <div>
+      <Router>
-        <a href="https://vite.dev" target="_blank">
+        <div className="App">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+          <Routes>
-        </a>
+            {/* Public Routes */}
-        <a href="https://react.dev" target="_blank">
+            <Route path="/login" element={<LoginPage />} />
-          <img src={reactLogo} className="logo react" alt="React logo" />
+
-        </a>
+            {/* Protected Routes */}
-      </div>
+            <Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>
-      <h1>Vite + React</h1>
+              <Route index element={<Navigate to="/dashboard" replace />} />
-      <div className="card">
+              <Route path="dashboard" element={<DashboardPage />} />
-        <button onClick={() => setCount((count) => count + 1)}>
+              <Route path="documents" element={<div>Documents Page - Coming Soon</div>} />
-          count is {count}
+              <Route path="users" element={<div>User Management - Coming Soon</div>} />
-        </button>
+            </Route>
-        <p>
+
-          Edit <code>src/App.jsx</code> and save to test HMR
+            {/* Catch all route */}
-        </p>
+            <Route path="*" element={<Navigate to="/dashboard" replace />} />
-      </div>
+          </Routes>
-      <p className="read-the-docs">
+        </div>
-        Click on the Vite and React logos to learn more
+      </Router>
-      </p>
+    </AuthProvider>
-    </>
+  );
-  )
 }
 
-export default App
+export default App;

src/frontend/src/assets/icons.jsx

@@ -0,0 +1,35 @@
+// src/assets/icons.jsx
+
+export const SunIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.36 6.36l-.7-.7M6.34 6.34l-.7-.7m12.02 12.02l-.7-.7M6.34 17.66l-.7-.7M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+    />
+  </svg>
+);
+
+export const MoonIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M21 12.79A9 9 0 1111.21 3a7 7 0 0010.79 9.79z"
+    />
+  </svg>
+);

src/frontend/src/components/auth/AuthLayout.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import ThemeSwitcher from "../common/ThemeSwither.jsx";
+
+/**
+ * AuthLayout component for authentication pages
+ * Provides centered layout with background and responsive design
+ *
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components to render
+ */
+
+const AuthHeader = () => {
+  return (
+    <div className="navbar bg-base-100 shadow-lg">
+      <div className="navbar-start">
+        <h1 className="text-xl font-bold">MyDocManager</h1>
+      </div>
+      <div className="navbar-end">
+        <ThemeSwitcher/>
+      </div>
+    </div>
+  )
+}
+
+function AuthLayout({children}) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary/10 via-base-200 to-secondary/10">
+      <AuthHeader/>
+      {/* Main container with flex centering */}
+      <div className="min-h-screen flex items-center justify-center p-4">
+        {/* Content wrapper for responsive spacing */}
+        <div>
+          {children}
+        </div>
+      </div>
+
+    </div>
+  );
+}
+
+export default AuthLayout;

src/frontend/src/components/auth/LoginForm.jsx

@@ -0,0 +1,202 @@
+import React, {useEffect, useState} from 'react';
+import {useAuth} from '../../contexts/AuthContext';
+
+/**
+ * LoginForm component with DaisyUI styling
+ * Handles user authentication with form validation and error display
+ */
+function LoginForm() {
+  const {login, loading, error, clearError} = useAuth();
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+  });
+  const [formErrors, setFormErrors] = useState({});
+
+  // Clear errors when component mounts or form data changes
+  useEffect(() => {
+    if (error) {
+      const timer = setTimeout(() => {
+        clearError();
+      }, 5000); // Clear error after 5 seconds
+
+      return () => clearTimeout(timer);
+    }
+  }, [error, clearError]);
+
+  /**
+   * Handle input changes and clear related errors
+   * @param {Event} e - Input change event
+   */
+  const handleInputChange = (e) => {
+    const {name, value} = e.target;
+
+    setFormData(prev => ({
+      ...prev,
+      [name]: value,
+    }));
+
+    // Clear field error when user starts typing
+    if (formErrors[name]) {
+      setFormErrors(prev => ({
+        ...prev,
+        [name]: '',
+      }));
+    }
+
+    // Clear global error when user modifies form
+    if (error) {
+      clearError();
+    }
+  };
+
+  /**
+   * Validate form data before submission
+   * @returns {boolean} True if form is valid
+   */
+  const validateForm = () => {
+    const errors = {};
+
+    if (!formData.username.trim()) {
+      errors.username = 'Username is required';
+    }
+
+    if (!formData.password.trim()) {
+      errors.password = 'Password is required';
+    } else if (formData.password.length < 3) {
+      errors.password = 'Password must be at least 3 characters';
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  /**
+   * Handle form submission
+   * @param {Event} e - Form submission event
+   */
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    const success = await login(formData.username, formData.password);
+
+    if (success) {
+      // Reset form on successful login
+      setFormData({username: '', password: ''});
+      setFormErrors({});
+    }
+  };
+
+  return (
+    <div className="card max-w-md shadow-xl bg-base-100">
+      <div className="card-body">
+        {/* Card Header */}
+        <div className="text-center mb-6">
+          <p className="text-base-content/70 mt-2">Sign in to your account</p>
+        </div>
+
+        {/* Global Error Alert */}
+        {error && (
+          <div className="alert alert-error mb-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="stroke-current shrink-0 h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Login Form */}
+        <form onSubmit={handleSubmit}>
+          {/* Username Field */}
+          <div id="username">
+            <label className="label">
+              <span className="label-text font-medium">Username</span>
+            </label>
+            <input
+              type="text"
+              name="username"
+              value={formData.username}
+              onChange={handleInputChange}
+              placeholder="Enter your username"
+              className={`input input-bordered w-full${
+                formErrors.username ? 'input-error' : ''
+              }`}
+              disabled={loading}
+              autoComplete="username"
+            />
+            {formErrors.username && (
+              <label className="label">
+                <span className="label-text-alt text-error">{formErrors.username}</span>
+              </label>
+            )}
+          </div>
+
+          {/* Password Field */}
+          <div id="password">
+            <label className="label">
+              <span className="label-text font-medium">Password</span>
+            </label>
+            <input
+              type="password"
+              name="password"
+              value={formData.password}
+              onChange={handleInputChange}
+              placeholder="Enter your password"
+              className={`input input-bordered ${
+                formErrors.password ? 'input-error' : ''
+              }`}
+              disabled={loading}
+              autoComplete="current-password"
+            />
+            {formErrors.password && (
+              <label className="label">
+                <span className="label-text-alt text-error">{formErrors.password}</span>
+              </label>
+            )}
+          </div>
+
+          {/* Submit Button */}
+          <div className="form-control mt-6">
+            <button
+              type="submit"
+              className={`btn btn-primary w-1/3 btn-hover-effect ${loading ? 'loading' : ''}`}
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <span className="loading loading-spinner loading-sm"></span>
+                  Signing in...
+                </>
+              ) : (
+                'Sign In'
+              )}
+            </button>
+          </div>
+        </form>
+
+        {/* Additional Info */}
+        <div className="text-center mt-4">
+          <p className="text-sm text-base-content/60">
+            Don't have an account? Contact your administrator.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoginForm;

src/frontend/src/components/common/Header.jsx

@@ -0,0 +1,49 @@
+import {useAuth} from '../../hooks/useAuth';
+import {useNavigate} from 'react-router-dom';
+import ThemeSwitcher from "./ThemeSwither.jsx";
+import React from "react";
+
+const Header = () => {
+  const {user, logout} = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="navbar bg-base-100 shadow-lg">
+      <div className="navbar-start">
+        <h1 className="text-xl font-bold">MyDocManager</h1>
+      </div>
+      <div className="navbar-end">
+        <div className="dropdown dropdown-end">
+          <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
+            <div className="w-10 rounded-full bg-primary text-primary-content flex items-center justify-center">
+              <span className="text-sm font-medium">
+                {user?.username?.charAt(0).toUpperCase()}
+              </span>
+            </div>
+          </div>
+          <ul tabIndex={0} className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+            <li>
+              <div className="justify-between">
+                Profile
+                <span className="badge badge-sm">{user?.role}</span>
+              </div>
+            </li>
+            <li><a>Settings</a></li>
+            <li><ThemeSwitcher/></li>
+            <li>
+              <button onClick={handleLogout}>Logout</button>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/frontend/src/components/common/Layout.jsx

@@ -0,0 +1,19 @@
+import Header from './Header';
+import {Outlet} from 'react-router-dom';
+import Menu from "./Menu.jsx";
+
+const Layout = () => {
+  return (
+    <div className="min-h-screen bg-base-200">
+      <Header/>
+      <div className="flex">
+        <aside className="w-64 min-h-screen bg-base-100 shadow-lg"><Menu/></aside>
+        <main className="flex-1 container mx-auto px-4 py-8">
+          <Outlet/>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

src/frontend/src/components/common/Menu.jsx

@@ -0,0 +1,16 @@
+import {FaBuffer, FaPlus} from "react-icons/fa6";
+
+const Menu = () => {
+  return (
+    <div className="p-4">
+      <ul className="menu">
+        <li className="menu-title">Exploration</li>
+        <li><a><FaBuffer/>To Review</a></li>
+        <li className="menu-title mt-4">Catégories</li>
+        <li><a><i className="fas fa-plus"></i>Item</a></li>
+      </ul>
+    </div>
+  )
+}
+
+export default Menu;

src/frontend/src/components/common/ProtectedRoute.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {Navigate, useLocation} from 'react-router-dom';
+import {useAuth} from '../../contexts/AuthContext';
+
+/**
+ * ProtectedRoute component to guard routes that require authentication
+ * Redirects to login if user is not authenticated, preserving intended destination
+ *
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components to render if authenticated
+ * @param {string[]} props.allowedRoles - Array of roles allowed to access this route (optional)
+ */
+function ProtectedRoute({children, allowedRoles = []}) {
+  const {isAuthenticated, loading, user} = useAuth();
+  const location = useLocation();
+
+  // Show loading spinner while checking authentication
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-base-200">
+        <div className="text-center">
+          <span className="loading loading-spinner loading-lg text-primary"></span>
+          <p className="text-base-content/70 mt-4">Checking authentication...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Redirect to login if not authenticated
+  if (!isAuthenticated) {
+    return (
+      <Navigate
+        to="/login"
+        state={{from: location}}
+        replace
+      />
+    );
+  }
+
+  // Check role-based access if allowedRoles is specified
+  if (allowedRoles.length > 0 && user && !allowedRoles.includes(user.role)) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-base-200">
+        <div className="card w-full max-w-md shadow-xl bg-base-100">
+          <div className="card-body text-center">
+            <div className="text-6xl mb-4">🚫</div>
+            <h2 className="card-title justify-center text-error">Access Denied</h2>
+            <p className="text-base-content/70 mb-4">
+              You don't have permission to access this page.
+            </p>
+            <div className="card-actions justify-center">
+              <button
+                className="btn btn-primary"
+                onClick={() => window.history.back()}
+              >
+                Go Back
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // User is authenticated and authorized, render children
+  return children;
+}
+
+export default ProtectedRoute;

src/frontend/src/components/common/ThemeSwither.jsx

@@ -0,0 +1,29 @@
+import {useEffect, useState} from "react";
+import {MoonIcon, SunIcon} from "../../assets/icons.jsx";
+
+function ThemeSwitcher() {
+  // State to store current theme
+  const [theme, setTheme] = useState("light");
+
+  // When theme changes, apply it to <html data-theme="">
+  useEffect(() => {
+    document.querySelector("html").setAttribute("data-theme", theme);
+  }, [theme]);
+
+  // Toggle between light and dark
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="btn btn-ghost btn-circle"
+    >
+      {theme === "light" ? MoonIcon : SunIcon}
+
+    </button>
+  );
+}
+
+export default ThemeSwitcher;

src/frontend/src/contexts/AuthContext.jsx

@@ -0,0 +1,205 @@
+import React, {createContext, useContext, useEffect, useReducer} from 'react';
+import authService from '../services/authService';
+
+// Auth state actions
+const AUTH_ACTIONS = {
+  LOGIN_START: 'LOGIN_START',
+  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
+  LOGIN_FAILURE: 'LOGIN_FAILURE',
+  LOGOUT: 'LOGOUT',
+  LOAD_USER: 'LOAD_USER',
+  CLEAR_ERROR: 'CLEAR_ERROR',
+};
+
+// Initial state
+const initialState = {
+  user: null,
+  token: null,
+  isAuthenticated: false,
+  loading: true, // Loading true initially to check stored auth
+  error: null,
+};
+
+// Auth reducer to manage state transitions
+function authReducer(state, action) {
+  switch (action.type) {
+    case AUTH_ACTIONS.LOGIN_START:
+      return {
+        ...state,
+        loading: true,
+        error: null,
+      };
+
+    case AUTH_ACTIONS.LOGIN_SUCCESS:
+      return {
+        ...state,
+        user: action.payload.user,
+        token: action.payload.token,
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+      };
+
+    case AUTH_ACTIONS.LOGIN_FAILURE:
+      return {
+        ...state,
+        user: null,
+        token: null,
+        isAuthenticated: false,
+        loading: false,
+        error: action.payload.error,
+      };
+
+    case AUTH_ACTIONS.LOGOUT:
+      return {
+        ...state,
+        user: null,
+        token: null,
+        isAuthenticated: false,
+        loading: false,
+        error: null,
+      };
+
+    case AUTH_ACTIONS.LOAD_USER:
+      return {
+        ...state,
+        user: action.payload.user,
+        token: action.payload.token,
+        isAuthenticated: !!action.payload.token,
+        loading: false,
+        error: null,
+      };
+
+    case AUTH_ACTIONS.CLEAR_ERROR:
+      return {
+        ...state,
+        error: null,
+      };
+
+    default:
+      return state;
+  }
+}
+
+// Create context
+const AuthContext = createContext(null);
+
+/**
+ * AuthProvider component to wrap the app and provide authentication state
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components
+ */
+export function AuthProvider({children}) {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+
+  // Load stored authentication data on app startup
+  useEffect(() => {
+    const loadStoredAuth = () => {
+      const token = authService.getStoredToken();
+      const user = authService.getStoredUser();
+
+      dispatch({
+        type: AUTH_ACTIONS.LOAD_USER,
+        payload: {user, token},
+      });
+    };
+
+    loadStoredAuth();
+  }, []);
+
+  /**
+   * Login function to authenticate user
+   * @param {string} username - User's username
+   * @param {string} password - User's password
+   * @returns {Promise<boolean>} True if login successful
+   */
+  const login = async (username, password) => {
+    try {
+      dispatch({type: AUTH_ACTIONS.LOGIN_START});
+
+      const {access_token, user} = await authService.login(username, password);
+
+      dispatch({
+        type: AUTH_ACTIONS.LOGIN_SUCCESS,
+        payload: {user, token: access_token},
+      });
+
+      return true;
+    } catch (error) {
+      dispatch({
+        type: AUTH_ACTIONS.LOGIN_FAILURE,
+        payload: {error: error.message},
+      });
+      return false;
+    }
+  };
+
+  /**
+   * Logout function to clear authentication state
+   */
+  const logout = () => {
+    authService.logout();
+    dispatch({type: AUTH_ACTIONS.LOGOUT});
+  };
+
+  /**
+   * Clear error message from state
+   */
+  const clearError = () => {
+    dispatch({type: AUTH_ACTIONS.CLEAR_ERROR});
+  };
+
+  /**
+   * Refresh user data from API
+   */
+  const refreshUser = async () => {
+    try {
+      const user = await authService.getCurrentUser();
+      dispatch({
+        type: AUTH_ACTIONS.LOGIN_SUCCESS,
+        payload: {user, token: state.token},
+      });
+    } catch (error) {
+      console.error('Failed to refresh user data:', error);
+      // Don't logout on refresh failure, just log error
+    }
+  };
+
+  // Context value object
+  const value = {
+    // State
+    user: state.user,
+    token: state.token,
+    isAuthenticated: state.isAuthenticated,
+    loading: state.loading,
+    error: state.error,
+
+    // Actions
+    login,
+    logout,
+    clearError,
+    refreshUser,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+/**
+ * Custom hook to use authentication context
+ * @returns {Object} Auth context value
+ * @throws {Error} If used outside AuthProvider
+ */
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
+  return context;
+}
+export { AuthContext };

src/frontend/src/hooks/useAuth.js

@@ -0,0 +1,12 @@
+import {useContext} from 'react';
+import {AuthContext} from '../contexts/AuthContext';
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
+  return context;
+};

src/frontend/src/index.css

@@ -1,68 +1,11 @@
-:root {
+@tailwind base;
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+@tailwind components;
-  line-height: 1.5;
+@tailwind utilities;
-  font-weight: 400;
+@plugin "daisyui";
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
 
+/* Custom styles for the application */
 body {
-  margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: flex;
+    margin: 0;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/frontend/src/main.jsx

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

src/frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,239 @@
+import {useEffect, useState} from 'react';
+import {useAuth} from '../hooks/useAuth';
+
+const DashboardPage = () => {
+  const {user} = useAuth();
+  const [stats, setStats] = useState({
+    totalDocuments: 0,
+    processingJobs: 0,
+    completedJobs: 0,
+    failedJobs: 0
+  });
+
+  const [recentFiles, setRecentFiles] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate API calls for dashboard data
+    const fetchDashboardData = async () => {
+      try {
+        // TODO: Replace with actual API calls
+        setTimeout(() => {
+          setStats({
+            totalDocuments: 42,
+            processingJobs: 3,
+            completedJobs: 38,
+            failedJobs: 1
+          });
+
+          setRecentFiles([
+            {
+              id: 1,
+              filename: 'invoice_2024.pdf',
+              status: 'completed',
+              processedAt: '2024-01-15 14:30:00',
+              fileType: 'pdf'
+            },
+            {
+              id: 2,
+              filename: 'contract_draft.docx',
+              status: 'processing',
+              processedAt: '2024-01-15 14:25:00',
+              fileType: 'docx'
+            },
+            {
+              id: 3,
+              filename: 'receipt_scan.jpg',
+              status: 'completed',
+              processedAt: '2024-01-15 14:20:00',
+              fileType: 'image'
+            }
+          ]);
+
+          setLoading(false);
+        }, 1000);
+      } catch (error) {
+        console.error('Error fetching dashboard data:', error);
+        setLoading(false);
+      }
+    };
+
+    fetchDashboardData();
+  }, []);
+
+  const getStatusBadge = (status) => {
+    const statusColors = {
+      completed: 'badge-success',
+      processing: 'badge-warning',
+      failed: 'badge-error',
+      pending: 'badge-info'
+    };
+
+    return `badge ${statusColors[status] || 'badge-neutral'}`;
+  };
+
+  const getFileTypeIcon = (fileType) => {
+    const icons = {
+      pdf: '📄',
+      docx: '📝',
+      image: '🖼️',
+      txt: '📄'
+    };
+
+    return icons[fileType] || '📄';
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Welcome Header */}
+      <div className="bg-base-100 rounded-lg shadow p-6">
+        <h1 className="text-3xl font-bold text-base-content">
+          Welcome back, {user?.username}!
+        </h1>
+        <p className="text-base-content/60 mt-2">
+          Here's your document processing overview
+        </p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="stat bg-base-100 rounded-lg shadow">
+          <div className="stat-figure text-primary">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+          </div>
+          <div className="stat-title">Total Documents</div>
+          <div className="stat-value text-primary">{stats.totalDocuments}</div>
+        </div>
+
+        <div className="stat bg-base-100 rounded-lg shadow">
+          <div className="stat-figure text-warning">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div className="stat-title">Processing</div>
+          <div className="stat-value text-warning">{stats.processingJobs}</div>
+        </div>
+
+        <div className="stat bg-base-100 rounded-lg shadow">
+          <div className="stat-figure text-success">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div className="stat-title">Completed</div>
+          <div className="stat-value text-success">{stats.completedJobs}</div>
+        </div>
+
+        <div className="stat bg-base-100 rounded-lg shadow">
+          <div className="stat-figure text-error">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div className="stat-title">Failed</div>
+          <div className="stat-value text-error">{stats.failedJobs}</div>
+        </div>
+      </div>
+
+      {/* Recent Files */}
+      <div className="bg-base-100 rounded-lg shadow">
+        <div className="p-6 border-b border-base-300">
+          <h2 className="text-xl font-semibold">Recent Files</h2>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="table table-zebra">
+            <thead>
+            <tr>
+              <th>File</th>
+              <th>Type</th>
+              <th>Status</th>
+              <th>Processed At</th>
+              <th>Actions</th>
+            </tr>
+            </thead>
+            <tbody>
+            {recentFiles.map((file) => (
+              <tr key={file.id}>
+                <td>
+                  <div className="flex items-center space-x-3">
+                    <div className="text-2xl">
+                      {getFileTypeIcon(file.fileType)}
+                    </div>
+                    <div className="font-medium">{file.filename}</div>
+                  </div>
+                </td>
+                <td>
+                    <span className="badge badge-outline">
+                      {file.fileType.toUpperCase()}
+                    </span>
+                </td>
+                <td>
+                    <span className={getStatusBadge(file.status)}>
+                      {file.status.charAt(0).toUpperCase() + file.status.slice(1)}
+                    </span>
+                </td>
+                <td>{file.processedAt}</td>
+                <td>
+                  <div className="flex space-x-2">
+                    <button className="btn btn-sm btn-ghost">View</button>
+                    <button className="btn btn-sm btn-ghost">Download</button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="bg-base-100 rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
+        <div className="flex flex-wrap gap-4">
+          <button className="btn btn-primary">
+            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+            </svg>
+            Upload Documents
+          </button>
+
+          <button className="btn btn-outline">
+            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                    d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+            View Reports
+          </button>
+
+          {user?.role === 'admin' && (
+            <button className="btn btn-outline">
+              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
+              </svg>
+              Manage Users
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;

src/frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,48 @@
+import React, {useEffect} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {useAuth} from '../contexts/AuthContext';
+import AuthLayout from '../components/auth/AuthLayout';
+import LoginForm from '../components/auth/LoginForm';
+
+/**
+ * LoginPage component
+ * Full page component that handles login functionality and redirects
+ */
+function LoginPage() {
+  const {isAuthenticated, loading} = useAuth();
+  const navigate = useNavigate();
+
+  // Redirect to dashboard if already authenticated
+  useEffect(() => {
+    if (!loading && isAuthenticated) {
+      navigate('/dashboard', {replace: true});
+    }
+  }, [isAuthenticated, loading, navigate]);
+
+  // Show loading spinner while checking authentication
+  if (loading) {
+    return (
+      <AuthLayout>
+        <div className="card w-full max-w-md shadow-xl bg-base-100">
+          <div className="card-body items-center">
+            <span className="loading loading-spinner loading-lg text-primary"></span>
+            <p className="text-base-content/70 mt-4">Loading...</p>
+          </div>
+        </div>
+      </AuthLayout>
+    );
+  }
+
+  // Don't render login form if user is authenticated (prevents flash)
+  if (isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <AuthLayout>
+      <LoginForm/>
+    </AuthLayout>
+  );
+}
+
+export default LoginPage;

src/frontend/src/services/authService.js

@@ -0,0 +1,101 @@
+import api from '../utils/api';
+
+/**
+ * Authentication service for handling login, logout, and user profile operations
+ */
+class AuthService {
+  /**
+   * Login user with username and password
+   * @param {string} username - User's username
+   * @param {string} password - User's password
+   * @returns {Promise<{access_token: string, user: Object}>} Login response with token and user data
+   */
+  async login(username, password) {
+    try {
+      // FastAPI expects form data for OAuth2PasswordRequestForm
+      const formData = new FormData();
+      formData.append('username', username);
+      formData.append('password', password);
+
+      const response = await api.post('/auth/login', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      const {access_token, user} = response.data;
+
+      // Store token and user data in localStorage
+      localStorage.setItem('access_token', access_token);
+      localStorage.setItem('user', JSON.stringify(user));
+
+      return {access_token, user};
+    } catch (error) {
+      // Extract error message from response
+      const errorMessage = error.response?.data?.detail || 'Login failed';
+      throw new Error(errorMessage);
+    }
+  }
+
+  /**
+   * Logout user by clearing stored data
+   */
+  logout() {
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('user');
+  }
+
+  /**
+   * Get current user profile from API
+   * @returns {Promise<Object>} Current user profile
+   */
+  async getCurrentUser() {
+    try {
+      const response = await api.get('/auth/me');
+      const user = response.data;
+
+      // Update stored user data
+      localStorage.setItem('user', JSON.stringify(user));
+
+      return user;
+    } catch (error) {
+      const errorMessage = error.response?.data?.detail || 'Failed to get user profile';
+      throw new Error(errorMessage);
+    }
+  }
+
+  /**
+   * Check if user is authenticated by verifying token existence
+   * @returns {boolean} True if user has valid token
+   */
+  isAuthenticated() {
+    const token = localStorage.getItem('access_token');
+    return !!token;
+  }
+
+  /**
+   * Get stored user data from localStorage
+   * @returns {Object|null} User data or null if not found
+   */
+  getStoredUser() {
+    try {
+      const userStr = localStorage.getItem('user');
+      return userStr ? JSON.parse(userStr) : null;
+    } catch (error) {
+      console.error('Error parsing stored user data:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Get stored access token from localStorage
+   * @returns {string|null} Access token or null if not found
+   */
+  getStoredToken() {
+    return localStorage.getItem('access_token');
+  }
+}
+
+// Export singleton instance
+const authService = new AuthService();
+export default authService;

src/frontend/src/utils/api.js

@@ -0,0 +1,55 @@
+import axios from 'axios';
+
+// Base API configuration
+const API_BASE_URL = 'http://localhost:8000';
+
+// Create axios instance with default configuration
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000, // 10 seconds timeout
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor to add authentication token
+api.interceptors.request.use(
+  (config) => {
+    // Get token from localStorage
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle common errors
+api.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    // Handle 401 errors (unauthorized)
+    if (error.response?.status === 401) {
+      // Clear token from localStorage on 401
+      localStorage.removeItem('access_token');
+      localStorage.removeItem('user');
+
+      // Redirect to login page
+      window.location.href = '/login';
+    }
+
+    // Handle other common errors
+    if (error.response?.status >= 500) {
+      console.error('Server error:', error.response.data);
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default api;

src/frontend/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark", "cupcake"],
+    darkTheme: "dark",
+  },
+}

src/frontend/vite.config.js

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [tailwindcss(), react()],
 })

src/worker/Dockerfile

@@ -7,6 +7,9 @@ WORKDIR /app
 RUN apt-get update && apt-get install -y --no-install-recommends \
     libmagic1 \
     file \
+    pandoc \
+    ghostscript \
+    texlive-xetex \
  && rm -rf /var/lib/apt/lists/*
 
 # Copy requirements and install dependencies

src/worker/requirements.txt

@@ -5,9 +5,14 @@ email-validator==2.3.0
 fastapi==0.116.1
 httptools==0.6.4
 motor==3.7.1
-pymongo==4.15.0
+pillow==11.3.0
 pydantic==2.11.9
+PyJWT==2.10.1
+pymongo==4.15.0
+pypandoc==1.15
+python-multipart==0.0.20
 redis==6.4.0
+reportlab==4.4.4
 uvicorn==0.35.0
 python-magic==0.4.27
 watchdog==6.0.0

src/worker/tasks/common/converter_utils.py

@@ -0,0 +1,102 @@
+import subprocess
+import uuid
+from pathlib import Path
+
+import magic  # python-magic
+
+from tasks.common.pdf_converter import TextToPdfConverter, ImageToPdfConverter, WordToPdfConverter
+
+
+class UnsupportedFileTypeError(Exception):
+  """Exception raised when a file type is not supported."""
+  pass
+
+
+def generate_uuid_filename() -> str:
+  """Generate a unique filename using UUID4."""
+  return str(uuid.uuid4())
+
+
+def detect_file_type(file_path: str) -> str:
+  """
+  Detect the type of file using python-magic.
+
+  Returns:
+      'text', 'image', 'word'
+
+  Raises:
+      UnsupportedFileTypeError: If file type is not supported.
+  """
+  mime = magic.from_file(file_path, mime=True)
+  if mime.startswith("text/"):
+    return "text"
+  elif mime.startswith("image/"):
+    return "image"
+  elif mime in ("application/vnd.openxmlformats-officedocument.wordprocessingml.document",):
+    return "word"
+  else:
+    raise UnsupportedFileTypeError(f"Unsupported file type: {mime}")
+
+
+def compress_pdf(input_pdf: str, output_pdf: str, quality: str = "ebook") -> None:
+  """
+  Compress a PDF using Ghostscript.
+
+  Args:
+      input_pdf (str): Path to the input PDF.
+      output_pdf (str): Path to save the compressed PDF.
+      quality (str): Ghostscript PDFSETTINGS option: screen, ebook, printer, prepress.
+
+  Raises:
+      FileNotFoundError: If input PDF does not exist.
+      RuntimeError: If Ghostscript returns an error.
+  """
+  input_path = Path(input_pdf)
+  output_path = Path(output_pdf)
+  
+  if not input_path.exists():
+    raise FileNotFoundError(f"Input PDF not found: {input_pdf}")
+  
+  cmd = [
+      "gs",
+      "-sDEVICE=pdfwrite",
+      "-dCompatibilityLevel=1.4",
+      f"-dPDFSETTINGS=/{quality}",
+      "-dNOPAUSE",
+      "-dQUIET",
+      "-dBATCH",
+      f"-sOutputFile={str(output_path)}",
+      str(input_path),
+  ]
+  
+  result = subprocess.run(cmd)
+  if result.returncode != 0:
+    raise RuntimeError(f"Ghostscript failed with return code {result.returncode}")
+
+
+def convert_to_pdf(filepath: str, output_dir: str = ".") -> str:
+  """
+      Convert any supported file to PDF.
+
+      Args:
+          filepath (str): Path to the input file.
+          output_dir (str): Directory to save the output PDF.
+
+      Returns:
+          str: Path to the generated PDF.
+
+      Raises:
+          UnsupportedFileTypeError: If the input file type is not supported.
+      """
+  file_type = detect_file_type(filepath)
+  
+  if file_type == "text":
+    converter = TextToPdfConverter(filepath, output_dir=output_dir)
+  elif file_type == "image":
+    converter = ImageToPdfConverter(filepath, output_dir=output_dir)
+  elif file_type == "word":
+    converter = WordToPdfConverter(filepath, output_dir=output_dir)
+  else:
+    raise ValueError(f"Unsupported file type: {file_type}")
+  
+  return converter.convert()

src/worker/tasks/common/pdf_converter.py

@@ -0,0 +1,83 @@
+from abc import ABC, abstractmethod
+from pathlib import Path
+
+import pypandoc
+from PIL import Image
+from reportlab.lib.pagesizes import A4
+from reportlab.pdfgen import canvas
+
+from tasks.common.converter_utils import generate_uuid_filename
+
+
+class BaseConverter(ABC):
+  """Abstract base class for file converters to PDF."""
+  
+  def __init__(self, input_path: str, output_dir: str = ".") -> None:
+    self.input_path = Path(input_path)
+    self.output_dir = Path(output_dir)
+    self.output_path = self.output_dir / f"{generate_uuid_filename()}.pdf"
+  
+  @abstractmethod
+  def convert(self) -> str:
+    """Convert input file to PDF and return the output path."""
+    pass
+
+
+class TextToPdfConverter(BaseConverter):
+  """Converter for text files to PDF."""
+  
+  def convert(self) -> str:
+    c = canvas.Canvas(str(self.output_path), pagesize=A4)
+    width, height = A4
+    with open(self.input_path, "r", encoding="utf-8") as f:
+      y = height - 50
+      for line in f:
+        c.drawString(50, y, line.strip())
+        y -= 15
+        if y < 50:
+          c.showPage()
+          y = height - 50
+    c.save()
+    return str(self.output_path)
+
+
+class ImageToPdfConverter(BaseConverter):
+  """Converter for image files to PDF."""
+  
+  def convert(self) -> str:
+    image = Image.open(self.input_path)
+    rgb_image = image.convert("RGB")
+    rgb_image.save(self.output_path)
+    return str(self.output_path)
+
+
+class WordToPdfConverter(BaseConverter):
+  """Converter for Word files (.docx) to PDF using pypandoc."""
+  
+  def convert(self) -> str:
+    pypandoc.convert_file(
+      str(self.input_path), "pdf", outputfile=str(self.output_path)
+    )
+    return str(self.output_path)
+
+
+# Placeholders for future extensions
+class HtmlToPdfConverter(BaseConverter):
+  """Placeholder for HTML to PDF converter."""
+  
+  def convert(self) -> str:
+    raise NotImplementedError("HTML to PDF conversion not implemented.")
+
+
+class ExcelToPdfConverter(BaseConverter):
+  """Placeholder for Excel to PDF converter."""
+  
+  def convert(self) -> str:
+    raise NotImplementedError("Excel to PDF conversion not implemented.")
+
+
+class MarkdownToPdfConverter(BaseConverter):
+  """Placeholder for Markdown to PDF converter."""
+  
+  def convert(self) -> str:
+    raise NotImplementedError("Markdown to PDF conversion not implemented.")

src/worker/tasks/document_processing.py

@@ -11,10 +11,20 @@ from typing import Any, Dict
 from app.config import settings
 from app.database.connection import get_database
 from app.services.document_service import DocumentService
+from app.services.job_service import JobService
+from tasks.common.converter_utils import convert_to_pdf
 from tasks.main import celery_app
 
 logger = logging.getLogger(__name__)
 
+
+def get_services():
+  database = get_database()
+  document_service = DocumentService(database=database, objects_folder=settings.get_objects_folder())
+  job_service = JobService(database=database)
+  return document_service, job_service
+
+
 @celery_app.task(bind=True, autoretry_for=(Exception,), retry_kwargs={'max_retries': 3, 'countdown': 60})
 def process_document(self, filepath: str) -> Dict[str, Any]:
   """
@@ -38,10 +48,8 @@ def process_document(self, filepath: str) -> Dict[str, Any]:
   task_id = self.request.id
   logger.info(f"Starting document processing task {task_id} for file: {filepath}")
   
-  database = get_database()
+  # get services
-  document_service = DocumentService(database=database, objects_folder=settings.get_objects_folder())
+  document_service, job_service = get_services()
-  from app.services.job_service import JobService
-  job_service = JobService(database=database)
   
   job = None
   try:
@@ -56,7 +64,10 @@ def process_document(self, filepath: str) -> Dict[str, Any]:
     job_service.mark_job_as_started(job_id=job.id)
     logger.info(f"Job {task_id} marked as PROCESSING")
     
-    # Step 4: Mark job as completed
+    # Step 4: Create the pdf version of the document
+    pdf_file_path = convert_to_pdf(filepath, settings.get_temp_folder())
+    
+    # Step x: Mark job as completed
     job_service.mark_job_as_completed(job_id=job.id)
     logger.info(f"Job {task_id} marked as COMPLETED")
     
@@ -82,4 +93,3 @@ def process_document(self, filepath: str) -> Dict[str, Any]:
     
     # Re-raise the exception to trigger Celery retry mechanism
     raise
-  

src/worker/tasks/main.py

@@ -3,13 +3,19 @@ Celery worker for MyDocManager document processing tasks.
 
 This module contains all Celery tasks for processing documents.
 """
+import logging
 import os
 
 from celery import Celery
 
+from app.config import settings
+
+
 # Environment variables
-REDIS_URL = os.getenv("REDIS_URL", "redis://localhost:6379/0")
+REDIS_URL = settings.get_redis_url()
-MONGODB_URL = os.getenv("MONGODB_URL", "mongodb://localhost:27017")
+MONGODB_URL = settings.get_mongodb_url()
+
+logger = logging.getLogger(__name__)
 
 # Initialize Celery app
 celery_app = Celery(
@@ -28,9 +34,15 @@ celery_app.conf.update(
   timezone="UTC",
   enable_utc=True,
   task_track_started=True,
-  task_time_limit=300,        # 5 minutes
+  task_time_limit=300,  # 5 minutes
-  task_soft_time_limit=240,   # 4 minutes
+  task_soft_time_limit=240,  # 4 minutes
 )
 
 if __name__ == "__main__":
+  # initialize temp folder if needed
+  tmp_folder = settings.get_temp_folder()
+  if not os.path.exists(tmp_folder):
+    logger.info(f"Creating temporary folder: {tmp_folder}")
+    os.makedirs(tmp_folder)
+  
   celery_app.start()

tests/common/test_pdf_converter.py

@@ -0,0 +1,55 @@
+import shutil
+import tempfile
+from pathlib import Path
+
+import pytest
+
+from tasks.common.pdf_converter import TextToPdfConverter, ImageToPdfConverter, WordToPdfConverter
+
+
+@pytest.fixture
+def temp_dir():
+  """Create a temporary directory for output PDFs."""
+  dir_path = tempfile.mkdtemp()
+  yield dir_path
+  shutil.rmtree(dir_path)
+
+
+def test_i_can_convert_text_to_pdf(temp_dir):
+  input_txt = Path(temp_dir) / "test.txt"
+  input_txt.write_text("Hello World!\nThis is a test.")
+  
+  converter = TextToPdfConverter(str(input_txt), output_dir=temp_dir)
+  output_pdf = converter.convert()
+  
+  assert Path(output_pdf).exists()
+  assert output_pdf.endswith(".pdf")
+
+
+def test_i_can_convert_image_to_pdf(temp_dir):
+  from PIL import Image
+  
+  input_img = Path(temp_dir) / "image.png"
+  image = Image.new("RGB", (100, 100), color="red")
+  image.save(input_img)
+  
+  converter = ImageToPdfConverter(str(input_img), output_dir=temp_dir)
+  output_pdf = converter.convert()
+  
+  assert Path(output_pdf).exists()
+  assert output_pdf.endswith(".pdf")
+
+
+def test_i_can_convert_word_to_pdf(temp_dir):
+  import docx
+  
+  input_docx = Path(temp_dir) / "document.docx"
+  doc = docx.Document()
+  doc.add_paragraph("Hello Word!")
+  doc.save(input_docx)
+  
+  converter = WordToPdfConverter(str(input_docx), output_dir=temp_dir)
+  output_pdf = converter.convert()
+  
+  assert Path(output_pdf).exists()
+  assert output_pdf.endswith(".pdf")

tests/common/test_utils.py

@@ -0,0 +1,52 @@
+import shutil
+import tempfile
+from pathlib import Path
+
+import pytest
+
+from tasks.common.converter_utils import detect_file_type, UnsupportedFileTypeError
+
+
+@pytest.fixture
+def temp_dir():
+  """Create a temporary directory for output PDFs."""
+  dir_path = tempfile.mkdtemp()
+  yield dir_path
+  shutil.rmtree(dir_path)
+
+
+def test_i_can_detect_text_file(temp_dir):
+  txt_file = Path(temp_dir) / "sample.txt"
+  txt_file.write_text("Sample text content")
+  detected_type = detect_file_type(str(txt_file))
+  assert detected_type == "text"
+
+
+def test_i_can_detect_image_file(temp_dir):
+  from PIL import Image
+  
+  img_file = Path(temp_dir) / "sample.jpg"
+  image = Image.new("RGB", (50, 50), color="blue")
+  image.save(img_file)
+  
+  detected_type = detect_file_type(str(img_file))
+  assert detected_type == "image"
+
+
+def test_i_can_detect_word_file(temp_dir):
+  import docx
+  
+  docx_file = Path(temp_dir) / "sample.docx"
+  doc = docx.Document()
+  doc.add_paragraph("Sample content")
+  doc.save(docx_file)
+  
+  detected_type = detect_file_type(str(docx_file))
+  assert detected_type == "word"
+
+
+def test_i_cannot_detect_unsupported_file(temp_dir):
+  exe_file = Path(temp_dir) / "sample.exe"
+  exe_file.write_bytes(b'\x4D\x5A\x90\x00\x03\x00\x00\x00')
+  with pytest.raises(UnsupportedFileTypeError):
+    detect_file_type(str(exe_file))