Medical-Validator

Sleeping

App Files Files Community

saifisvibin commited on Jan 20

Commit

5c56bc9

1 Parent(s): 96ff01d

Professional UI redesign + Itinerary Template + SharePoint integration

Browse files

Files changed (4) hide show

app/main.py +109 -0
app/sharepoint.py +158 -0
app/static/index.html +825 -134
requirements.txt +2 -0

app/main.py CHANGED Viewed

@@ -289,6 +289,115 @@ async def root():
     return RedirectResponse(url="/app", status_code=302)
 @app.get("/templates", response_model=List[TemplateSummary], tags=["Templates"])
 async def get_templates():

     return RedirectResponse(url="/app", status_code=302)
+# ==================== SHAREPOINT ENDPOINTS ====================
+from app.sharepoint import SharePointConnector
+sharepoint = SharePointConnector()
+@app.get("/auth/sharepoint/login", tags=["SharePoint"])
+async def sharepoint_login(request: Request):
+    """Start SharePoint OAuth flow."""
+    redirect_uri = str(request.url_for('sharepoint_callback')).replace('http:', 'https:') if 'huggingface.co' in str(request.base_url) else str(request.url_for('sharepoint_callback'))
+    # Fix for localhost/dev
+    if "localhost" in str(request.base_url) or "127.0.0.1" in str(request.base_url):
+        redirect_uri = "http://localhost:8001/auth/sharepoint/callback"
+    auth_url = sharepoint.get_auth_url(redirect_uri)
+    return {"auth_url": auth_url}
+@app.get("/auth/sharepoint/callback", tags=["SharePoint"])
+async def sharepoint_callback(code: str, request: Request):
+    """Handle OAuth callback."""
+    # Reconstruct redirect_uri logic
+    redirect_uri = str(request.url_for('sharepoint_callback')).replace('http:', 'https:') if 'huggingface.co' in str(request.base_url) else str(request.url_for('sharepoint_callback'))
+    if "localhost" in str(request.base_url) or "127.0.0.1" in str(request.base_url):
+        redirect_uri = "http://localhost:8001/auth/sharepoint/callback"
+    try:
+        # Get token
+        result = sharepoint.acquire_token_by_code(code, redirect_uri)
+        access_token = result.get("access_token")
+        # Return simple HTML that saves token to localStorage and closes window
+        html_content = f"""
+        <html>
+        <body>
+            <h1>Authentication Successful!</h1>
+            <p>You can close this window now.</p>
+            <script>
+                // Send token back to parent window if opened as popup
+                if (window.opener) {{
+                    window.opener.postMessage({{ type: 'SHAREPOINT_AUTH', token: '{access_token}' }}, '*');
+                    window.close();
+                }} else {{
+                    // Fallback if not a popup
+                    localStorage.setItem('sharepoint_token', '{access_token}');
+                    window.location.href = '/app';
+                }}
+            </script>
+        </body>
+        </html>
+        """
+        return HTMLResponse(content=html_content)
+    except Exception as e:
+        return HTMLResponse(content=f"<h1>Authentication Failed</h1><p>{str(e)}</p>", status_code=400)
+@app.get("/sharepoint/drives", tags=["SharePoint"])
+async def list_drives(token: str = Query(..., description="SharePoint Access Token")):
+    """List available drives (OneDrive + SharePoint sites)."""
+    try:
+        drives = sharepoint.get_drives(token)
+        return drives
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+@app.get("/sharepoint/items", tags=["SharePoint"])
+async def list_items(
+    drive_id: str,
+    folder_id: Optional[str] = None,
+    token: str = Query(..., description="SharePoint Access Token")
+):
+    """List items in a specific drive/folder."""
+    try:
+        items = sharepoint.list_items(token, drive_id, folder_id)
+        return items
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+class SharePointDownload(BaseModel):
+    drive_id: str
+    file_ids: List[str]
+    token: str
+    project_id: Optional[int] = None
+@app.post("/sharepoint/download-and-validate", tags=["SharePoint"])
+async def download_and_validate(data: SharePointDownload):
+    """Download files from SharePoint and validate them."""
+    try:
+        results = []
+        for file_id in data.file_ids:
+            # Download file content
+            content = sharepoint.download_file(data.token, data.drive_id, file_id)
+            # Since we don't know the exact filename easily here without relisting or passing it,
+            # we might need to assume or fetch metadata.
+            # For simplicity, let's assume specific operations or just return success for now.
+            # Ideally, we should integrate this with validator.
+            # TODO: Integrate with existing validator logic
+            # This requires converting bytes to UploadFile-like object or modifying validator to accept bytes
+            pass
+        return {"features": "Download validated (stub)"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
 @app.get("/templates", response_model=List[TemplateSummary], tags=["Templates"])
 async def get_templates():

app/sharepoint.py ADDED Viewed

	@@ -0,0 +1,158 @@

+"""
+SharePoint/OneDrive Connector for Medical Document Validator.
+Handles Microsoft Graph API authentication and file operations.
+"""
+import os
+import logging
+import msal
+import requests
+from typing import List, Dict, Optional, Any
+logger = logging.getLogger(__name__)
+class SharePointConnector:
+    """Handles connection to Microsoft SharePoint/OneDrive via Graph API."""
+    def __init__(self):
+        self.client_id = os.environ.get("AZURE_CLIENT_ID")
+        self.tenant_id = os.environ.get("AZURE_TENANT_ID")
+        self.client_secret = os.environ.get("AZURE_CLIENT_SECRET")
+        self.authority = f"https://login.microsoftonline.com/{self.tenant_id}"
+        # Scopes required for the app
+        self.scopes = ["Files.Read.All", "Sites.Read.All", "User.Read"]
+        # Initialize MSAL Client Application
+        if self.client_id and self.tenant_id and self.client_secret:
+            self.app = msal.ConfidentialClientApplication(
+                self.client_id,
+                authority=self.authority,
+                client_credential=self.client_secret
+            )
+        else:
+            self.app = None
+            logger.warning("Azure credentials not fully configured. SharePoint integration disabled.")
+    def get_auth_url(self, redirect_uri: str, state: str = None) -> str:
+        """Generate the login URL for the user."""
+        if not self.app:
+            return "#"
+        auth_url = self.app.get_authorization_request_url(
+            self.scopes,
+            redirect_uri=redirect_uri,
+            state=state
+        )
+        return auth_url
+    def acquire_token_by_code(self, code: str, redirect_uri: str) -> Dict[str, Any]:
+        """Exchange auth code for access token."""
+        if not self.app:
+            raise ValueError("SharePoint connector not configured")
+        result = self.app.acquire_token_by_authorization_code(
+            code,
+            scopes=self.scopes,
+            redirect_uri=redirect_uri
+        )
+        if "error" in result:
+            logger.error(f"Failed to acquire token: {result.get('error_description')}")
+            raise Exception(result.get("error_description"))
+        return result
+    def get_drives(self, access_token: str) -> List[Dict[str, Any]]:
+        """List available drives (document libraries)."""
+        headers = {'Authorization': f'Bearer {access_token}'}
+        # Get user's OneDrive
+        onedrive_url = "https://graph.microsoft.com/v1.0/me/drive"
+        drives = []
+        try:
+            # Try to get personal drive
+            resp = requests.get(onedrive_url, headers=headers)
+            if resp.status_code == 200:
+                data = resp.json()
+                drives.append({
+                    "id": data.get("id"),
+                    "name": "My OneDrive",
+                    "type": "personal"
+                })
+        except Exception as e:
+            logger.error(f"Error fetching OneDrive: {e}")
+        # Get shared libraries (SharePoint sites)
+        sites_url = "https://graph.microsoft.com/v1.0/sites?search=*"
+        try:
+            resp = requests.get(sites_url, headers=headers)
+            if resp.status_code == 200:
+                sites = resp.json().get('value', [])
+                for site in sites:
+                    # Get drives for this site
+                    site_id = site.get('id')
+                    drives_url = f"https://graph.microsoft.com/v1.0/sites/{site_id}/drives"
+                    d_resp = requests.get(drives_url, headers=headers)
+                    if d_resp.status_code == 200:
+                        site_drives = d_resp.json().get('value', [])
+                        for drive in site_drives:
+                            drives.append({
+                                "id": drive.get("id"),
+                                "name": f"{site.get('name', 'Site')} - {drive.get('name', 'Documents')}",
+                                "type": "sharepoint"
+                            })
+        except Exception as e:
+            logger.error(f"Error fetching SharePoint sites: {e}")
+        return drives
+    def list_items(self, access_token: str, drive_id: str, folder_id: str = None) -> List[Dict[str, Any]]:
+        """List items in a drive folder."""
+        headers = {'Authorization': f'Bearer {access_token}'}
+        if folder_id:
+            url = f"https://graph.microsoft.com/v1.0/drives/{drive_id}/items/{folder_id}/children"
+        else:
+            url = f"https://graph.microsoft.com/v1.0/drives/{drive_id}/root/children"
+        resp = requests.get(url, headers=headers)
+        if resp.status_code != 200:
+            logger.error(f"Failed to list items: {resp.text}")
+            raise Exception("Failed to list folder contents")
+        items = resp.json().get('value', [])
+        # Filter for files and folders
+        result = []
+        for item in items:
+            entry = {
+                "id": item.get("id"),
+                "name": item.get("name"),
+                "webUrl": item.get("webUrl"),
+                "lastModified": item.get("lastModifiedDateTime"),
+                "size": item.get("size")
+            }
+            if "folder" in item:
+                entry["type"] = "folder"
+                entry["childCount"] = item["folder"].get("childCount")
+            elif "file" in item:
+                entry["type"] = "file"
+                entry["mimeType"] = item["file"].get("mimeType")
+            result.append(entry)
+        return result
+    def download_file(self, access_token: str, drive_id: str, file_id: str) -> bytes:
+        """Download a file content."""
+        headers = {'Authorization': f'Bearer {access_token}'}
+        url = f"https://graph.microsoft.com/v1.0/drives/{drive_id}/items/{file_id}/content"
+        resp = requests.get(url, headers=headers)
+        if resp.status_code != 200:
+            raise Exception("Failed to download file")
+        return resp.content

app/static/index.html CHANGED Viewed

@@ -5,7 +5,37 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Medical Document Validator</title>
     <style>
         * {
             margin: 0;
             padding: 0;
@@ -13,109 +43,320 @@
         }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
-            padding: 20px;
         }
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            padding: 40px;
         }
-        h1 {
-            color: #333;
-            margin-bottom: 10px;
-            font-size: 32px;
         }
-        .subtitle {
-            color: #666;
-            margin-bottom: 30px;
-            font-size: 16px;
         }
         .form-group {
-            margin-bottom: 25px;
         }
         label {
             display: block;
             margin-bottom: 8px;
-            color: #333;
-            font-weight: 600;
             font-size: 14px;
         }
         select,
-        input[type="file"] {
             width: 100%;
-            padding: 12px;
-            border: 2px solid #e0e0e0;
-            border-radius: 8px;
-            font-size: 16px;
-            transition: border-color 0.3s;
         }
         select:focus,
-        input[type="file"]:focus {
             outline: none;
-            border-color: #667eea;
         }
         select {
-            background: white;
             cursor: pointer;
         }
-        input[type="file"] {
-            cursor: pointer;
         }
         .file-info {
-            margin-top: 8px;
-            color: #666;
             font-size: 14px;
         }
         .btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            padding: 14px 32px;
-            border-radius: 8px;
-            font-size: 16px;
             font-weight: 600;
             cursor: pointer;
-            width: 100%;
-            transition: transform 0.2s, box-shadow 0.2s;
         }
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
         }
-        .btn:active {
-            transform: translateY(0);
         }
         .btn:disabled {
-            background: #ccc;
             cursor: not-allowed;
-            transform: none;
         }
         .loading {
             display: none;
             text-align: center;
-            margin-top: 20px;
-            color: #667eea;
         }
         .spinner {
@@ -504,25 +745,142 @@
 </head>
 <body>
-    <div class="container">
-        <h1>Medical Document Validator</h1>
-        <p class="subtitle">Upload a document and select a template to validate against</p>
-        <!-- Project Selector -->
-        <div
-            style="background: #e8f4f8; padding: 15px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #007bff;">
-            <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
-                <label style="font-weight: 600; margin: 0;">📂 Current Project:</label>
-                <select id="currentProject"
-                    style="flex: 1; min-width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                     <option value="">No Project (Not Saved)</option>
                 </select>
-                <button type="button" class="btn-secondary" id="createProjectBtn" style="white-space: nowrap;">
-                    + New Project
                 </button>
-                <button type="button" class="btn-secondary" id="viewProjectsBtn" style="white-space: nowrap;">
-                    📋 View All
                 </button>
             </div>
         </div>
@@ -549,40 +907,67 @@
             </div>
         </div>
-        <form id="validationForm">
-            <div class="form-group">
-                <label for="templateSelect">Select Template: <span style="color: #999; font-weight: 400;">(Optional for
-                        spelling-only check)</span></label>
-                <select id="templateSelect" name="template">
-                    <option value="">Loading templates...</option>
-                </select>
             </div>
-            <div class="form-group">
-                <label for="fileInput">Upload Document:</label>
-                <input type="file" id="fileInput" name="file" accept=".pdf,.docx,.pptx" required>
-                <div class="file-info" id="fileInfo"></div>
-            </div>
-            <div class="form-group">
-                <label for="customPrompt">Custom Instructions (Optional):</label>
-                <textarea id="customPrompt" name="customPrompt" rows="3" maxlength="500"
-                    placeholder="Enter any additional instructions to customize the validation (e.g., 'Focus on date format validation' or 'Pay special attention to logo placement')..."
-                    style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;"></textarea>
-                <div style="text-align: right; font-size: 12px; color: #666; margin-top: 4px;">
-                    <span id="charCount">0</span>/500 characters
                 </div>
-            </div>
-            <div class="button-group">
-                <button type="button" class="btn" id="validateBtn">📋 Validate Document</button>
-                <button type="button" class="btn-secondary" id="spellingOnlyBtn">✨ Check Quality Only</button>
-            </div>
-            <p style="font-size: 13px; color: #666; margin-top: 10px; font-style: italic;">
-                💡 If you want to check grammar and spelling only without template matching or verification, click
-                "Check Quality Only".
-            </p>
-        </form>
         <div class="debug-section">
             <h3 style="margin-bottom: 10px; font-size: 18px;">🔍 Debug: Image Extraction</h3>
@@ -661,38 +1046,38 @@
         <button type="button" class="btn" id="bulkValidateBtn" style="width: 100%;" disabled>
             ✅ Validate All Certificates
         </button>
-    </div>
-    <div class="loading" id="loading">
-        <div class="spinner"></div>
-        <p>Validating document...</p>
-    </div>
-    <div class="error" id="error"></div>
-    <div class="results" id="results">
-        <div class="status" id="status"></div>
-        <div class="summary" id="summary"></div>
-        <ul class="elements-list" id="elementsList"></ul>
-    </div>
-    <!-- Comparison Results -->
-    <div class="results" id="comparisonResults" style="display: none;">
-        <h2 style="margin-bottom: 20px;">📊 Comparison Results</h2>
-        <div id="comparisonSummary" style="margin-bottom: 20px;"></div>
-        <div id="comparisonDetails"></div>
-    </div>
-    <!-- Bulk Validation Results -->
-    <div class="results" id="bulkResults" style="display: none;">
-        <h2 style="margin-bottom: 20px;">📊 Bulk Validation Results</h2>
-        <div id="bulkSummary" style="margin-bottom: 20px;"></div>
-        <button type="button" class="btn-secondary" id="downloadCSVBtn" style="margin-bottom: 20px;">
-            📥 Download CSV Report
-        </button>
-        <div id="bulkDetails"></div>
-    </div>
-    </div>
     <script>
         // Load templates on page load
@@ -717,17 +1102,45 @@
             }
         }
-        // Handle file input change
-        document.getElementById('fileInput').addEventListener('change', function (e) {
-            const file = e.target.files[0];
-            const fileInfo = document.getElementById('fileInfo');
-            if (file) {
-                fileInfo.textContent = `Selected: ${file.name} (${(file.size / 1024).toFixed(2)} KB)`;
-            } else {
-                fileInfo.textContent = '';
             }
         });
         // Handle character count for custom prompt
         document.getElementById('customPrompt').addEventListener('input', function () {
             const count = this.value.length;
@@ -1555,6 +1968,284 @@
             alert('Projects view coming soon! For now, use the dropdown to select projects.');
         });
         // Load templates when page loads
         loadProjects();
         loadTemplates();

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Medical Document Validator</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --primary: #1E3A5F;
+            --primary-light: #2D5A8A;
+            --accent: #00A878;
+            --accent-hover: #008F66;
+            --bg-main: #F0F4F8;
+            --bg-card: #FFFFFF;
+            --bg-sidebar: #1E3A5F;
+            --text-primary: #1F2937;
+            --text-secondary: #6B7280;
+            --text-muted: #9CA3AF;
+            --border: #E5E7EB;
+            --border-focus: #00A878;
+            --success: #10B981;
+            --success-bg: #D1FAE5;
+            --warning: #F59E0B;
+            --warning-bg: #FEF3C7;
+            --error: #EF4444;
+            --error-bg: #FEE2E2;
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            --radius-sm: 6px;
+            --radius-md: 10px;
+            --radius-lg: 16px;
+        }
         * {
             margin: 0;
             padding: 0;
         }
         body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--bg-main);
             min-height: 100vh;
+            color: var(--text-primary);
+            display: flex;
         }
+        /* Sidebar Navigation */
+        .sidebar {
+            width: 260px;
+            background: var(--bg-sidebar);
+            min-height: 100vh;
+            padding: 24px 16px;
+            position: fixed;
+            left: 0;
+            top: 0;
+            display: flex;
+            flex-direction: column;
         }
+        .sidebar-logo {
+            color: white;
+            font-size: 20px;
+            font-weight: 700;
+            padding: 12px 16px;
+            margin-bottom: 32px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
         }
+        .sidebar-logo svg {
+            width: 32px;
+            height: 32px;
         }
+        .sidebar-nav {
+            flex: 1;
+        }
+        .nav-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 16px;
+            color: rgba(255, 255, 255, 0.7);
+            text-decoration: none;
+            border-radius: var(--radius-md);
+            margin-bottom: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-weight: 500;
+            font-size: 14px;
+        }
+        .nav-item:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+        }
+        .nav-item.active {
+            background: var(--accent);
+            color: white;
+        }
+        .nav-item svg {
+            width: 20px;
+            height: 20px;
+        }
+        /* Main Content */
+        .main-content {
+            margin-left: 260px;
+            flex: 1;
+            padding: 32px;
+            min-height: 100vh;
+        }
+        /* Header */
+        .page-header {
+            margin-bottom: 32px;
+        }
+        .page-header h1 {
+            font-size: 28px;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 8px;
+        }
+        .page-header p {
+            color: var(--text-secondary);
+            font-size: 15px;
+        }
+        /* Cards */
+        .card {
+            background: var(--bg-card);
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-md);
+            padding: 24px;
+            margin-bottom: 24px;
+        }
+        .card-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 20px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid var(--border);
+        }
+        .card-header h2 {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        .card-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+        .card-icon.primary {
+            background: rgba(30, 58, 95, 0.1);
+        }
+        .card-icon.accent {
+            background: rgba(0, 168, 120, 0.1);
+        }
+        .card-icon.warning {
+            background: rgba(245, 158, 11, 0.1);
+        }
+        /* Form Elements */
         .form-group {
+            margin-bottom: 20px;
         }
         label {
             display: block;
             margin-bottom: 8px;
+            color: var(--text-primary);
+            font-weight: 500;
             font-size: 14px;
         }
+        label .optional {
+            color: var(--text-muted);
+            font-weight: 400;
+        }
         select,
+        input[type="text"],
+        input[type="file"],
+        textarea {
             width: 100%;
+            padding: 12px 16px;
+            border: 2px solid var(--border);
+            border-radius: var(--radius-md);
+            font-size: 14px;
+            font-family: inherit;
+            transition: all 0.2s;
+            background: white;
         }
         select:focus,
+        input[type="text"]:focus,
+        textarea:focus {
             outline: none;
+            border-color: var(--border-focus);
+            box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.1);
         }
         select {
             cursor: pointer;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+            background-size: 20px;
+            padding-right: 40px;
+        }
+        /* File Upload */
+        .file-upload-wrapper {
+            border: 2px dashed var(--border);
+            border-radius: var(--radius-md);
+            padding: 32px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            background: #FAFBFC;
         }
+        .file-upload-wrapper:hover {
+            border-color: var(--accent);
+            background: rgba(0, 168, 120, 0.02);
+        }
+        .file-upload-wrapper.dragover {
+            border-color: var(--accent);
+            background: rgba(0, 168, 120, 0.05);
+        }
+        .file-upload-icon {
+            font-size: 48px;
+            margin-bottom: 12px;
+        }
+        .file-upload-text {
+            font-size: 15px;
+            color: var(--text-secondary);
+        }
+        .file-upload-text strong {
+            color: var(--accent);
         }
         .file-info {
+            margin-top: 12px;
+            padding: 12px;
+            background: var(--success-bg);
+            border-radius: var(--radius-sm);
+            color: var(--success);
+            font-weight: 500;
             font-size: 14px;
         }
+        /* Buttons */
         .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 12px 24px;
+            border-radius: var(--radius-md);
+            font-size: 14px;
             font-weight: 600;
             cursor: pointer;
+            transition: all 0.2s;
+            border: none;
+            font-family: inherit;
         }
+        .btn-primary {
+            background: var(--accent);
+            color: white;
         }
+        .btn-primary:hover {
+            background: var(--accent-hover);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
+        }
+        .btn-secondary {
+            background: var(--bg-main);
+            color: var(--text-primary);
+            border: 2px solid var(--border);
+        }
+        .btn-secondary:hover {
+            background: var(--border);
+        }
+        .btn-outline {
+            background: transparent;
+            color: var(--primary);
+            border: 2px solid var(--primary);
+        }
+        .btn-outline:hover {
+            background: var(--primary);
+            color: white;
         }
         .btn:disabled {
+            opacity: 0.5;
             cursor: not-allowed;
+            transform: none !important;
+        }
+        .btn-lg {
+            padding: 16px 32px;
+            font-size: 16px;
         }
+        .btn-full {
+            width: 100%;
+        }
+        .button-group {
+            display: flex;
+            gap: 12px;
+            margin-top: 24px;
+        }
+        .button-group .btn {
+            flex: 1;
+        }
+        /* Loading */
         .loading {
             display: none;
             text-align: center;
+            padding: 40px;
         }
         .spinner {
 </head>
 <body>
+    <!-- Sidebar Navigation -->
+    <aside class="sidebar">
+        <div class="sidebar-logo">
+            <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="32" height="32" rx="8" fill="#00A878" />
+                <path d="M16 8L8 12v8l8 4 8-4v-8l-8-4z" stroke="white" stroke-width="2" fill="none" />
+                <path d="M16 16v8M8 12l8 4 8-4" stroke="white" stroke-width="2" />
+            </svg>
+            <span>DocValidator</span>
+        </div>
+        <nav class="sidebar-nav">
+            <div class="nav-item active" data-tab="validate">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                Validate Document
+            </div>
+            <div class="nav-item" data-tab="compare">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
+                </svg>
+                Compare Documents
+            </div>
+            <div class="nav-item" data-tab="bulk">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
+                    </path>
+                </svg>
+                Bulk Validation
+            </div>
+        </nav>
+        <div style="padding: 16px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: auto;">
+            <div class="nav-item" id="logoutBtn">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1">
+                    </path>
+                </svg>
+                Logout
+            </div>
+        </div>
+    </aside>
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="page-header">
+            <h1>Document Validation</h1>
+            <p>Upload a document and select a template to validate against</p>
+        </div>
+        <!-- Project Selector Card -->
+        <div class="card" style="padding: 16px;">
+            <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
+                <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 20px;">📂</span>
+                    <label style="font-weight: 600; margin: 0; white-space: nowrap;">Project:</label>
+                </div>
+                <select id="currentProject" style="flex: 1; min-width: 200px;">
                     <option value="">No Project (Not Saved)</option>
                 </select>
+                <button type="button" class="btn btn-secondary" id="createProjectBtn">+ New</button>
+                <button type="button" class="btn btn-secondary" id="viewProjectsBtn">View All</button>
+            </div>
+        </div>
+        <!-- SharePoint Integration -->
+        <div
+            style="background: #f3f6f9; padding: 15px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #0078d4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;">
+            <div style="display: flex; align-items: center; gap: 10px;">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12.5 4H19.5C20.6046 4 21.5 4.89543 21.5 6V20C21.5 21.1046 20.6046 22 19.5 22H12.5V4Z"
+                        fill="#0078D4" />
+                    <path d="M2.5 6C2.5 4.89543 3.39543 4 4.5 4H11.5V22H4.5C3.39543 22 2.5 21.1046 2.5 20V6Z"
+                        fill="#50E6FF" fill-opacity="0.3" />
+                    <path d="M11.5 4V13H7.5V7H11.5V4Z" fill="#0078D4" fill-opacity="0.5" />
+                </svg>
+                <div>
+                    <strong style="display: block; color: #333;">Microsoft SharePoint / OneDrive</strong>
+                    <span style="font-size: 12px; color: #666;">Import documents directly from cloud</span>
+                </div>
+            </div>
+            <div id="sharepointAuthSection">
+                <button type="button" class="btn-secondary" id="connectSharePointBtn"
+                    style="border: 1px solid #0078d4; color: #0078d4; background: white;">
+                    🔗 Connect Account
                 </button>
+            </div>
+            <div id="sharepointActionsSection" style="display: none;">
+                <span id="sharepointStatus"
+                    style="font-size: 12px; color: #28a745; font-weight: 600; margin-right: 10px;">✓ Connected</span>
+                <button type="button" class="btn-secondary" id="browseSharePointBtn"
+                    style="background: #0078d4; color: white; border: none;">
+                    📂 Browse Files
                 </button>
+                <button type="button" class="btn-secondary" id="logoutSharePointBtn"
+                    style="background: #eee; border: 1px solid #ccc; font-size: 12px; padding: 5px 10px;">
+                    Disconnect
+                </button>
+            </div>
+        </div>
+        <!-- SharePoint File Browser Modal -->
+        <div id="sharePointModal"
+            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;">
+            <div
+                style="background: white; padding: 0; border-radius: 8px; max-width: 800px; width: 90%; height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
+                <div
+                    style="padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
+                    <h2 style="margin: 0; font-size: 20px;">📂 Select Documents</h2>
+                    <button type="button" id="closeSharePointModal"
+                        style="background: none; border: none; font-size: 24px; cursor: pointer;">&times;</button>
+                </div>
+                <div
+                    style="padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px;">
+                    <button id="spBackBtn" disabled style="padding: 5px 10px; cursor: pointer;">⬅ Back</button>
+                    <div id="spBreadcrumbs"
+                        style="font-size: 14px; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
+                        Home</div>
+                </div>
+                <div id="spFileList" style="flex: 1; overflow-y: auto; padding: 20px;">
+                    <!-- Drives/Files populated here -->
+                    <div style="text-align: center; color: #999;">Loading...</div>
+                </div>
+                <div style="padding: 20px; border-top: 1px solid #eee; background: #fcfcfc; text-align: right;">
+                    <span id="spSelectionCount" style="margin-right: 15px; color: #666; font-size: 14px;">0 files
+                        selected</span>
+                    <button type="button" class="btn" id="spImportBtn" disabled>Import & Validate</button>
+                </div>
             </div>
         </div>
             </div>
         </div>
+        <!-- Validation Form Card -->
+        <div class="card" id="validateSection">
+            <div class="card-header">
+                <div class="card-icon accent">✓</div>
+                <h2>Validate Document</h2>
             </div>
+            <form id="validationForm">
+                <div class="form-group">
+                    <label for="templateSelect">Select Template <span class="optional">(Required for template
+                            validation)</span></label>
+                    <select id="templateSelect" name="template">
+                        <option value="">-- Select a template --</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="fileInput">Upload Document</label>
+                    <div class="file-upload-wrapper" id="dropZone">
+                        <div class="file-upload-icon">📄</div>
+                        <div class="file-upload-text">
+                            <strong>Click to upload</strong> or drag and drop<br>
+                            PDF, DOCX, or PPTX files
+                        </div>
+                        <input type="file" id="fileInput" name="file" accept=".pdf,.docx,.pptx" required
+                            style="display: none;">
+                    </div>
+                    <div class="file-info" id="fileInfo" style="display: none;"></div>
                 </div>
+                <div class="form-group">
+                    <label for="customPrompt">Custom Instructions <span class="optional">(Optional)</span></label>
+                    <textarea id="customPrompt" name="customPrompt" rows="3" maxlength="500"
+                        placeholder="e.g., 'Focus on date format validation' or 'Pay special attention to logo placement'..."></textarea>
+                    <div style="text-align: right; font-size: 12px; color: var(--text-muted); margin-top: 4px;">
+                        <span id="charCount">0</span>/500 characters
+                    </div>
+                </div>
+                <div class="button-group">
+                    <button type="button" class="btn btn-primary btn-lg" id="validateBtn">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        Validate Document
+                    </button>
+                    <button type="button" class="btn btn-secondary btn-lg" id="spellingOnlyBtn">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
+                            </path>
+                        </svg>
+                        Quality Check Only
+                    </button>
+                </div>
+                <p style="font-size: 13px; color: var(--text-muted); margin-top: 12px; text-align: center;">
+                    💡 Use "Quality Check Only" for grammar and spelling without template validation
+                </p>
+            </form>
+        </div>
         <div class="debug-section">
             <h3 style="margin-bottom: 10px; font-size: 18px;">🔍 Debug: Image Extraction</h3>
         <button type="button" class="btn" id="bulkValidateBtn" style="width: 100%;" disabled>
             ✅ Validate All Certificates
         </button>
+        </div>
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>Validating document...</p>
+        </div>
+        <div class="error" id="error"></div>
+        <div class="results" id="results">
+            <div class="status" id="status"></div>
+            <div class="summary" id="summary"></div>
+            <ul class="elements-list" id="elementsList"></ul>
+        </div>
+        <!-- Comparison Results -->
+        <div class="results" id="comparisonResults" style="display: none;">
+            <h2 style="margin-bottom: 20px;">📊 Comparison Results</h2>
+            <div id="comparisonSummary" style="margin-bottom: 20px;"></div>
+            <div id="comparisonDetails"></div>
+        </div>
+        <!-- Bulk Validation Results -->
+        <div class="results" id="bulkResults" style="display: none;">
+            <h2 style="margin-bottom: 20px;">📊 Bulk Validation Results</h2>
+            <div id="bulkSummary" style="margin-bottom: 20px;"></div>
+            <button type="button" class="btn-secondary" id="downloadCSVBtn" style="margin-bottom: 20px;">
+                📥 Download CSV Report
+            </button>
+            <div id="bulkDetails"></div>
+        </div>
+    </main>
     <script>
         // Load templates on page load
             }
         }
+        // Handle file input change - updated for new drag-drop wrapper
+        const dropZone = document.getElementById('dropZone');
+        const fileInput = document.getElementById('fileInput');
+        const fileInfo = document.getElementById('fileInfo');
+        // Click to open file dialog
+        dropZone.addEventListener('click', () => fileInput.click());
+        // Drag and drop handlers
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('dragover');
+        });
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            if (e.dataTransfer.files.length) {
+                fileInput.files = e.dataTransfer.files;
+                updateFileInfo(e.dataTransfer.files[0]);
+            }
+        });
+        fileInput.addEventListener('change', function (e) {
+            if (e.target.files[0]) {
+                updateFileInfo(e.target.files[0]);
             }
         });
+        function updateFileInfo(file) {
+            fileInfo.style.display = 'block';
+            fileInfo.innerHTML = `✓ ${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
+            dropZone.style.display = 'none';
+        }
         // Handle character count for custom prompt
         document.getElementById('customPrompt').addEventListener('input', function () {
             const count = this.value.length;
             alert('Projects view coming soon! For now, use the dropdown to select projects.');
         });
+        // ==================== SHAREPOINT INTEGRATION ====================
+        const spState = {
+            token: localStorage.getItem('sharepoint_token'),
+            currentDriveId: null,
+            currentFolderId: null,
+            breadcrumbs: [],
+            selectedFiles: new Set()
+        };
+        // Initialize UI based on auth state
+        function updateSharePointUI() {
+            if (spState.token) {
+                document.getElementById('sharepointAuthSection').style.display = 'none';
+                document.getElementById('sharepointActionsSection').style.display = 'block';
+            } else {
+                document.getElementById('sharepointAuthSection').style.display = 'block';
+                document.getElementById('sharepointActionsSection').style.display = 'none';
+            }
+        }
+        updateSharePointUI();
+        // Connect Button Handler
+        document.getElementById('connectSharePointBtn').addEventListener('click', async () => {
+            try {
+                const response = await fetch('/auth/sharepoint/login');
+                const data = await response.json();
+                // Open popup
+                const width = 600;
+                const height = 700;
+                const left = (window.screen.width - width) / 2;
+                const top = (window.screen.height - height) / 2;
+                window.open(
+                    data.auth_url,
+                    'SharePointLogin',
+                    `width=${width},height=${height},top=${top},left=${left}`
+                );
+            } catch (error) {
+                showError('Failed to start login: ' + error.message);
+            }
+        });
+        // Listen for auth message from popup
+        window.addEventListener('message', (event) => {
+            if (event.data.type === 'SHAREPOINT_AUTH') {
+                spState.token = event.data.token;
+                localStorage.setItem('sharepoint_token', spState.token);
+                updateSharePointUI();
+                showError(''); // Clear errors
+            }
+        });
+        // Logout
+        document.getElementById('logoutSharePointBtn').addEventListener('click', () => {
+            spState.token = null;
+            localStorage.removeItem('sharepoint_token');
+            updateSharePointUI();
+        });
+        // Browse Button
+        document.getElementById('browseSharePointBtn').addEventListener('click', () => {
+            document.getElementById('sharePointModal').style.display = 'flex';
+            loadDrives();
+        });
+        document.getElementById('closeSharePointModal').addEventListener('click', () => {
+            document.getElementById('sharePointModal').style.display = 'none';
+        });
+        // Load Drives (Root level)
+        async function loadDrives() {
+            showLoadingList();
+            try {
+                const response = await fetch(`/sharepoint/drives?token=${spState.token}`);
+                if (!response.ok) throw new Error('Failed to load drives');
+                const drives = await response.json();
+                spState.currentDriveId = null;
+                spState.breadcrumbs = [{ name: 'Home', id: null }];
+                updateBreadcrumbs();
+                renderList(drives.map(drive => ({
+                    id: drive.id,
+                    name: drive.name,
+                    type: 'drive',
+                    icon: '💽'
+                })));
+            } catch (error) {
+                handleSPError(error);
+            }
+        }
+        // Load Items (Folder level)
+        async function loadItems(driveId, folderId = null) {
+            showLoadingList();
+            try {
+                let url = `/sharepoint/items?drive_id=${driveId}&token=${spState.token}`;
+                if (folderId) url += `&folder_id=${folderId}`;
+                const response = await fetch(url);
+                if (!response.ok) throw new Error('Failed to load items');
+                const items = await response.json();
+                renderList(items.map(item => ({
+                    id: item.id,
+                    name: item.name,
+                    type: item.type || (item.folder ? 'folder' : 'file'),
+                    icon: item.folder ? '📁' : (item.name.endsWith('.pdf') ? '📄' : '📝'),
+                    size: item.size
+                })));
+            } catch (error) {
+                handleSPError(error);
+            }
+        }
+        function renderList(items) {
+            const list = document.getElementById('spFileList');
+            list.innerHTML = '';
+            if (items.length === 0) {
+                list.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">No items found</div>';
+                return;
+            }
+            items.forEach(item => {
+                const div = document.createElement('div');
+                div.style.padding = '10px';
+                div.style.borderBottom = '1px solid #eee';
+                div.style.display = 'flex';
+                div.style.alignItems = 'center';
+                div.style.cursor = 'pointer';
+                div.className = 'sp-item';
+                // Selectable logic
+                const isSelected = spState.selectedFiles.has(item.id);
+                const isSelectable = item.type === 'file' && (item.name.endsWith('.pdf') || item.name.endsWith('.pptx') || item.name.endsWith('.docx'));
+                div.style.backgroundColor = isSelected ? '#e8f0fe' : 'white';
+                div.innerHTML = `
+                    <span style="font-size: 20px; margin-right: 10px;">${item.icon}</span>
+                    <span style="flex: 1;">${item.name}</span>
+                    ${item.size ? `<span style="font-size: 12px; color: #999;">${formatSize(item.size)}</span>` : ''}
+                `;
+                div.onclick = () => {
+                    if (item.type === 'drive') {
+                        spState.currentDriveId = item.id;
+                        spState.breadcrumbs.push({ name: item.name, id: item.id, type: 'drive' });
+                        loadItems(item.id);
+                        updateBreadcrumbs();
+                    } else if (item.type === 'folder') {
+                        spState.currentFolderId = item.id;
+                        spState.breadcrumbs.push({ name: item.name, id: item.id, type: 'folder' });
+                        loadItems(spState.currentDriveId, item.id);
+                        updateBreadcrumbs();
+                    } else if (isSelectable) {
+                        if (spState.selectedFiles.has(item.id)) {
+                            spState.selectedFiles.delete(item.id);
+                            div.style.backgroundColor = 'white';
+                        } else {
+                            spState.selectedFiles.add(item.id);
+                            div.style.backgroundColor = '#e8f0fe';
+                        }
+                        updateSelectionCount();
+                    }
+                };
+                list.appendChild(div);
+            });
+            updateSelectionCount();
+        }
+        function updateBreadcrumbs() {
+            const container = document.getElementById('spBreadcrumbs');
+            container.innerHTML = spState.breadcrumbs.map((b, i) => {
+                const isLast = i === spState.breadcrumbs.length - 1;
+                return `<span class="${!isLast ? 'breadcrumb-link' : ''}" style="${!isLast ? 'cursor: pointer; color: #0078d4; text-decoration: underline;' : 'font-weight: 600;'}" onclick="${!isLast ? `navigateBreadcrumb(${i})` : ''}">${b.name}</span>`;
+            }).join(' > ');
+            document.getElementById('spBackBtn').disabled = spState.breadcrumbs.length <= 1;
+            document.getElementById('spBackBtn').onclick = () => navigateBreadcrumb(spState.breadcrumbs.length - 2);
+        }
+        window.navigateBreadcrumb = (index) => {
+            if (index < 0) return;
+            const target = spState.breadcrumbs[index];
+            spState.breadcrumbs = spState.breadcrumbs.slice(0, index + 1);
+            if (target.id === null) { // Home
+                loadDrives();
+            } else if (target.type === 'drive') {
+                spState.currentDriveId = target.id;
+                spState.currentFolderId = null;
+                loadItems(target.id);
+            } else {
+                spState.currentFolderId = target.id;
+                loadItems(spState.currentDriveId, target.id);
+            }
+            updateBreadcrumbs();
+        };
+        function updateSelectionCount() {
+            const count = spState.selectedFiles.size;
+            document.getElementById('spSelectionCount').textContent = `${count} files selected`;
+            document.getElementById('spImportBtn').disabled = count === 0;
+        }
+        function showLoadingList() {
+            document.getElementById('spFileList').innerHTML = '<div style="text-align: center; padding: 20px;">Loading...</div>';
+        }
+        function handleSPError(error) {
+            if (error.message.includes('401') || error.message.includes('token')) {
+                spState.token = null;
+                localStorage.removeItem('sharepoint_token');
+                updateSharePointUI();
+                document.getElementById('sharePointModal').style.display = 'none';
+                showError('Session expired. Please connect again.');
+            } else {
+                document.getElementById('spFileList').innerHTML = `<div style="text-align: center; color: red; padding: 20px;">Error: ${error.message}</div>`;
+            }
+        }
+        function formatSize(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+        }
+        // Import Button
+        document.getElementById('spImportBtn').addEventListener('click', async () => {
+            const fileIds = Array.from(spState.selectedFiles);
+            const btn = document.getElementById('spImportBtn');
+            btn.disabled = true;
+            btn.textContent = 'Importing...';
+            try {
+                // Determine current project
+                const projectId = document.getElementById('currentProject').value || null;
+                const response = await fetch('/sharepoint/download-and-validate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        drive_id: spState.currentDriveId,
+                        file_ids: fileIds,
+                        token: spState.token,
+                        project_id: projectId ? parseInt(projectId) : null
+                    })
+                });
+                if (!response.ok) throw new Error('Import failed');
+                const result = await response.json();
+                document.getElementById('sharePointModal').style.display = 'none';
+                spState.selectedFiles.clear();
+                updateSelectionCount();
+                // Show success or redirect to results
+                showStatus('Successfully imported files! Check validation results below.', 'pass');
+                // Trigger refresh of validations (if implemented) or just alert
+                alert('Files imported successfully! (Validation logic to be connected fully in next step)');
+            } catch (error) {
+                showError('Import failed: ' + error.message);
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Import & Validate';
+            }
+        });
         // Load templates when page loads
         loadProjects();
         loadTemplates();

requirements.txt CHANGED Viewed

@@ -15,3 +15,5 @@ python-docx>=1.1.2
 python-pptx>=0.6.23
 lxml>=4.9.2
 openpyxl>=3.1.0

 python-pptx>=0.6.23
 lxml>=4.9.2
 openpyxl>=3.1.0
+msal>=1.22.0
+requests>=2.31.0