🚀 Initialize Musadaq SaaS: Full Backend + AI + React Dashboard + Docker Setup

2026-04-16 23:26:32 +03:00
commit d66891ba0f
221 changed files with 13079 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,29 @@
+# ════════════════════════════════════════════════════════════
+# مُصادَق (Musadaq) — Frontend Dockerfile (Vite)
+# ════════════════════════════════════════════════════════════
+
+# ── Build Stage ───────────────────────────────────────────
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy source and build
+COPY . .
+RUN npm run build
+
+# ── Production Stage ──────────────────────────────────────
+FROM nginx:stable-alpine
+
+# Copy built files to nginx
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>musadaq-frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -0,0 +1,47 @@
+# ════════════════════════════════════════════════════════════
+# مُصادَق (Musadaq) — Frontend Nginx Config
+# ════════════════════════════════════════════════════════════
+
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # ── Security Headers ──────────────────────────────────────
+    add_header X-Frame-Options "SAMEORIGIN";
+    add_header X-XSS-Protection "1; mode=block";
+    add_header X-Content-Type-Options "nosniff";
+
+    # Gzip Compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    # ── Root Path (SPA Support) ────────────────────────────────
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # ── Proxy /api requests to the backend ──────────────────────
+    location /api {
+        proxy_pass http://api:3300/api;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Static Assets Caching
+    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg)$ {
+        expires 6M;
+        access_log off;
+        add_header Cache-Control "public";
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "musadaq-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tanstack/react-query": "^5.99.0",
+    "@tanstack/react-query-devtools": "^5.99.0",
+    "axios": "^1.15.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.72.1",
+    "react-router-dom": "^7.14.1",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "postcss": "^8.5.10",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.4"
+  }
+}
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
--- a/frontend/public/icons.svg
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,38 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useAuthStore } from './store/authStore';
+import { MainLayout } from './components/layout/MainLayout';
+import LoginPage from './pages/auth/LoginPage';
+import RegisterPage from './pages/auth/RegisterPage';
+import { DashboardPage } from './pages/dashboard/DashboardPage';
+import { InvoicesPage } from './pages/invoices/InvoicesPage';
+
+// ── Protected Route Guard ─────────────────────────────────
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />;
+};
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Public Routes */}
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+
+        {/* Protected Dashboard Routes */}
+        <Route path="/" element={<ProtectedRoute><MainLayout /></ProtectedRoute>}>
+          <Route index element={<Navigate to="/dashboard" replace />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="invoices" element={<InvoicesPage />} />
+          <Route path="companies" element={<div className="text-3xl font-bold">إدارة الشركات</div>} />
+          <Route path="staff" element={<div className="text-3xl font-bold">إدارة الموظفين</div>} />
+          <Route path="settings" element={<div className="text-3xl font-bold">الإعدادات</div>} />
+        </Route>
+
+        {/* Fallback */}
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,65 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — API Client
+ * ════════════════════════════════════════════════════════════
+ */
+
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3300/api';
+
+const apiClient = axios.create({
+  baseURL: API_URL,
+  withCredentials: true, // Required for HttpOnly refresh cookies
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// ── Request Interceptor (JWT) ──────────────────────────────
+apiClient.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+// ── Response Interceptor (Token Rotation) ──────────────────
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // If 401 and not already retrying
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      try {
+        // Attempt to refresh tokens
+        const { data } = await axios.post(
+          `${API_URL}/auth/refresh`,
+          {},
+          { withCredentials: true },
+        );
+
+        localStorage.setItem('access_token', data.accessToken);
+        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
+
+        return apiClient(originalRequest);
+      } catch (refreshError) {
+        // If refresh fails, clear and redirect to login
+        localStorage.removeItem('access_token');
+        window.location.href = '/login';
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default apiClient;
--- a/frontend/src/assets/hero.png
+++ b/frontend/src/assets/hero.png
--- a/frontend/src/assets/vite.svg
+++ b/frontend/src/assets/vite.svg
--- a/frontend/src/components/layout/MainLayout.tsx
+++ b/frontend/src/components/layout/MainLayout.tsx
@@ -0,0 +1,59 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Main Layout Shell
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+import { Bell, Search, User } from 'lucide-react';
+import { useAuthStore } from '../../store/authStore';
+
+export const MainLayout = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="flex bg-slate-50 min-h-screen rtl overflow-hidden">
+      {/* ── Desktop Sidebar ───────────────────────────────────── */}
+      <Sidebar />
+
+      <div className="flex-1 flex flex-col h-screen overflow-y-auto">
+        {/* ── Top Navigation ──────────────────────────────────── */}
+        <header className="h-16 bg-white/80 backdrop-blur-md sticky top-0 z-30 border-b border-slate-100 px-8 flex items-center justify-between shadow-sm">
+          <div className="flex items-center gap-4 bg-slate-50 px-4 py-2 rounded-xl group focus-within:ring-2 focus-within:ring-primary-100 transition-all border border-transparent focus-within:border-primary-200">
+            <Search className="w-4 h-4 text-slate-400" />
+            <input 
+              type="text" 
+              placeholder="بحث سريع..." 
+              className="bg-transparent border-none outline-none text-sm w-64 text-slate-900" 
+            />
+          </div>
+
+          <div className="flex items-center gap-6">
+            <button className="p-2 text-slate-400 hover:bg-slate-50 hover:text-primary-600 rounded-xl transition-all relative">
+              <Bell className="w-5 h-5" />
+              <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
+            </button>
+
+            <div className="flex items-center gap-3 pl-2 border-r border-slate-100">
+              <div className="text-left">
+                <p className="text-sm font-semibold text-slate-900">{user?.name}</p>
+                <p className="text-[12px] text-slate-500 uppercase tracking-wider font-medium">
+                  {user?.role}
+                </p>
+              </div>
+              <div className="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center border-2 border-white shadow-sm ring-1 ring-slate-100">
+                <User className="text-slate-400 w-5 h-5" />
+              </div>
+            </div>
+          </div>
+        </header>
+
+        {/* ── Main Content Area ───────────────────────────────── */}
+        <main className="p-8 pb-16 flex-1">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,70 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Premium Sidebar
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { NavLink } from 'react-router-dom';
+import { 
+  LayoutDashboard, 
+  FileText, 
+  Building2, 
+  Users, 
+  Settings, 
+  LogOut 
+} from 'lucide-react';
+import { useAuthStore } from '../../store/authStore';
+
+const menuItems = [
+  { icon: LayoutDashboard, label: 'الرئيسية', path: '/dashboard' },
+  { icon: FileText, label: 'الفواتير', path: '/invoices' },
+  { icon: Building2, label: 'الشركات', path: '/companies' },
+  { icon: Users, label: 'الموظفون', path: '/staff' },
+  { icon: Settings, label: 'الإعدادات', path: '/settings' },
+];
+
+export const Sidebar = () => {
+  const clearAuth = useAuthStore((state) => state.clearAuth);
+
+  return (
+    <aside className="w-64 h-screen glass border-l border-slate-200 sticky top-0 flex flex-col p-4">
+      <div className="flex items-center gap-3 px-2 py-6">
+        <div className="w-10 h-10 bg-primary-600 rounded-xl flex items-center justify-center shadow-lg shadow-primary-500/30">
+          <FileText className="text-white w-6 h-6" />
+        </div>
+        <h1 className="text-xl font-bold bg-gradient-to-br from-slate-900 to-slate-500 bg-clip-text text-transparent">
+          مُصادَق
+        </h1>
+      </div>
+
+      <nav className="flex-1 mt-4 space-y-1">
+        {menuItems.map((item) => (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            className={({ isActive }) =>
+              `flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
+                isActive 
+                  ? 'bg-primary-50 text-primary-600 shadow-sm border border-primary-100' 
+                  : 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'
+              }`
+            }
+          >
+            <item.icon className="w-5 h-5" />
+            <span className="font-medium">{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="pt-4 border-t border-slate-100">
+        <button
+          onClick={clearAuth}
+          className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-500 hover:bg-red-50 transition-all group"
+        >
+          <LogOut className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
+          <span className="font-medium">تسجيل الخروج</span>
+        </button>
+      </div>
+    </aside>
+  );
+};
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,43 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary-50: oklch(0.97 0.01 240);
+  --color-primary-100: oklch(0.93 0.03 240);
+  --color-primary-200: oklch(0.87 0.06 240);
+  --color-primary-300: oklch(0.78 0.12 240);
+  --color-primary-400: oklch(0.66 0.18 240);
+  --color-primary-500: oklch(0.55 0.22 240);
+  --color-primary-600: oklch(0.48 0.23 240);
+  --color-primary-700: oklch(0.40 0.20 240);
+  --color-primary-800: oklch(0.33 0.16 240);
+  --color-primary-900: oklch(0.28 0.12 240);
+  --color-primary-950: oklch(0.18 0.08 240);
+
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, monospace;
+}
+
+@layer base {
+  body {
+    @apply bg-slate-50 text-slate-900 antialiased;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold tracking-tight text-slate-900;
+  }
+}
+
+@layer components {
+  .glass {
+    @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-xl;
+  }
+  
+  .card-premium {
+    @apply bg-white border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 rounded-xl overflow-hidden;
+  }
+
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-all active:scale-95;
+  }
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/frontend/src/pages/auth/LoginPage.tsx
+++ b/frontend/src/pages/auth/LoginPage.tsx
@@ -0,0 +1,130 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Premium Login Page
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { motion, AnimatePresence } from 'framer-motion';
+import { LogIn, Mail, Lock, AlertCircle, Loader2 } from 'lucide-react';
+import apiClient from '../../api/client';
+import { useAuthStore } from '../../store/authStore';
+
+const loginSchema = z.object({
+  email: z.string().email('بريد إلكتروني غير صالح'),
+  password: z.string().min(8, 'كلمة المرور يجب أن لا تقل عن 8 أحرف'),
+});
+
+type LoginForm = z.infer<typeof loginSchema>;
+
+export default function LoginPage() {
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const setAuth = useAuthStore((state) => state.setAuth);
+  const navigate = useNavigate();
+
+  const { register, handleSubmit, formState: { errors } } = useForm<LoginForm>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginForm) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await apiClient.post('/auth/login', data);
+      const { user, accessToken } = response.data;
+      setAuth(user, accessToken);
+      navigate('/dashboard');
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'فشل تسجيل الدخول. يرجى التحقق من البيانات.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-6 relative overflow-hidden rtl">
+      {/* ── Background Aesthetics ────────────────────────────────── */}
+      <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
+        <div className="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-primary-300 rounded-full blur-[120px]" />
+        <div className="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-blue-300 rounded-full blur-[120px]" />
+      </div>
+
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md glass p-10 rounded-3xl shadow-2xl relative z-10"
+      >
+        <div className="text-center mb-10">
+          <div className="w-16 h-16 bg-primary-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-xl shadow-primary-500/20">
+            <LogIn className="text-white w-8 h-8" />
+          </div>
+          <h1 className="text-3xl font-bold text-slate-900 mb-2">أهلاً بك في مُصادَق</h1>
+          <p className="text-slate-500">منصة أتمتة الفواتير الضريبية الأردنية</p>
+        </div>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <AnimatePresence mode="wait">
+            {error && (
+              <motion.div 
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 10 }}
+                className="bg-red-50 border border-red-100 p-4 rounded-xl flex items-center gap-3 text-red-600 text-sm font-medium"
+              >
+                <AlertCircle className="w-5 h-5 flex-shrink-0" />
+                <span>{error}</span>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <div>
+            <label className="block text-sm font-semibold text-slate-700 mb-2 mr-1">البريد الإلكتروني</label>
+            <div className="relative group">
+              <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-primary-500 transition-colors" />
+              <input
+                {...register('email')}
+                className="w-full bg-slate-50/50 border border-slate-200 rounded-xl py-3 pl-4 pr-11 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 outline-none transition-all"
+                placeholder="name@company.com"
+              />
+            </div>
+            {errors.email && <p className="text-red-500 text-[12px] mt-1 mr-1">{errors.email.message}</p>}
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-slate-700 mb-2 mr-1">كلمة المرور</label>
+            <div className="relative group">
+              <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-primary-500 transition-colors" />
+              <input
+                {...register('password')}
+                type="password"
+                className="w-full bg-slate-50/50 border border-slate-200 rounded-xl py-3 pl-4 pr-11 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 outline-none transition-all"
+                placeholder="••••••••"
+              />
+            </div>
+            {errors.password && <p className="text-red-500 text-[12px] mt-1 mr-1">{errors.password.message}</p>}
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full btn-primary h-14 text-lg mt-4 flex items-center justify-center gap-3 shadow-lg shadow-primary-500/25"
+          >
+            {isLoading ? <Loader2 className="w-6 h-6 animate-spin" /> : 'تسجيل الدخول'}
+          </button>
+        </form>
+
+        <div className="mt-8 text-center text-slate-500 text-sm">
+          ليس لديك حساب؟{' '}
+          <Link to="/register" className="text-primary-600 font-bold hover:underline">
+            أنشئ حساباً جديداً
+          </Link>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
--- a/frontend/src/pages/auth/RegisterPage.tsx
+++ b/frontend/src/pages/auth/RegisterPage.tsx
@@ -0,0 +1,206 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Premium Register Page
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { motion, AnimatePresence } from 'framer-motion';
+import { UserPlus, Mail, Lock, Building, Phone, ArrowLeft, ArrowRight, Loader2 } from 'lucide-react';
+import apiClient from '../../api/client';
+
+const registerSchema = z.object({
+  tenantName: z.string().min(3, 'اسم المكتب يجب أن لا يقل عن 3 أحرف'),
+  name: z.string().min(3, 'الاسم يجب أن لا يقل عن 3 أحرف'),
+  email: z.string().email('بريد إلكتروني غير صالح'),
+  password: z.string().min(8, 'كلمة المرور يجب أن لا تقل عن 8 أحرف'),
+  phone: z.string().optional(),
+});
+
+type RegisterForm = z.infer<typeof registerSchema>;
+
+export default function RegisterPage() {
+  const [step, setStep] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const { register, handleSubmit, trigger, formState: { errors } } = useForm<RegisterForm>({
+    resolver: zodResolver(registerSchema),
+  });
+
+  const nextStep = async () => {
+    const fields = step === 1 ? ['tenantName', 'phone'] : ['name', 'email', 'password'];
+    const isValid = await trigger(fields as any);
+    if (isValid) setStep(step + 1);
+  };
+
+  const onSubmit = async (data: RegisterForm) => {
+    setIsLoading(true);
+    try {
+      await apiClient.post('/auth/register', data);
+      navigate('/login', { state: { message: 'تم إنشاء الحساب بنجاح! يرجى تسجيل الدخول.' } });
+    } catch (err) {
+      alert('فشل إنشاء الحساب. تأكد من أن البريد الإلكتروني لم يُستخدم من قبل.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-6 relative overflow-hidden rtl font-sans">
+      {/* ── Background Aesthetics ────────────────────────────────── */}
+      <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
+        <div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-primary-300 rounded-full blur-[120px]" />
+        <div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-300 rounded-full blur-[120px]" />
+      </div>
+
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="w-full max-w-lg glass p-10 rounded-3xl shadow-2xl relative z-10"
+      >
+        <div className="text-center mb-8">
+          <div className="w-16 h-16 bg-primary-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-xl shadow-primary-500/20">
+            <UserPlus className="text-white w-8 h-8" />
+          </div>
+          <h1 className="text-3xl font-bold text-slate-900 mb-2">إنشاء حساب جديد</h1>
+          <p className="text-slate-500">ابدأ رحلتك في أتمتة الفواتير الضريبية</p>
+        </div>
+
+        {/* ── Progress Indicator ─────────────────────────────────── */}
+        <div className="flex gap-2 mb-8 items-center justify-center">
+            {[1, 2].map((i) => (
+                <div 
+                    key={i}
+                    className={`h-1.5 rounded-full transition-all duration-300 ${step >= i ? 'w-12 bg-primary-600' : 'w-4 bg-slate-200'}`}
+                />
+            ))}
+        </div>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <AnimatePresence mode="wait">
+            {step === 1 ? (
+              <motion.div 
+                key="step1"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="space-y-6"
+              >
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2 mr-1">اسم مكتب المحاسبة</label>
+                  <div className="relative group">
+                    <Building className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-primary-500 transition-colors" />
+                    <input
+                      {...register('tenantName')}
+                      className="w-full bg-slate-50/50 border border-slate-200 rounded-xl py-3 pl-4 pr-11 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 outline-none transition-all"
+                      placeholder="شركة الفوترة للمحاسبة"
+                    />
+                  </div>
+                  {errors.tenantName && <p className="text-red-500 text-[12px] mt-1 mr-1">{errors.tenantName.message}</p>}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2 mr-1">رقم الهاتف (اختياري)</label>
+                  <div className="relative group">
+                    <Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-primary-500 transition-colors" />
+                    <input
+                      {...register('phone')}
+                      className="w-full bg-slate-50/50 border border-slate-200 rounded-xl py-3 pl-4 pr-11 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 outline-none transition-all"
+                      placeholder="079 XXXXXXX"
+                    />
+                  </div>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={nextStep}
+                  className="w-full btn-primary h-14 text-lg flex items-center justify-center gap-3"
+                >
+                  التالي
+                  <ArrowLeft className="w-5 h-5" />
+                </button>
+              </motion.div>
+            ) : (
+              <motion.div 
+                key="step2"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="space-y-6"
+              >
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2 mr-1">الاسم الكامل (للمدير)</label>
+                  <div className="relative group">
+                    <input
+                      {...register('name')}
+                      className="w-full bg-slate-50/50 border border-slate-200 rounded-xl py-3 px-4 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 outline-none transition-all"
+                      placeholder="أحمد محمد"
+                    />
+                  </div>
+                  {errors.name && <p className="text-red-500 text-[12px] mt-1 mr-1">{errors.name.message}</p>}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2 mr-1">البريد الإلكتروني</label>
+                  <div className="relative group">
+                    <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-primary-500 transition-colors" />
+                    <input
+                      {...register('email')}
+                      className="w-full bg-slate-50/50 border border-slate-200 rounded-xl py-3 pl-4 pr-11 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 outline-none transition-all"
+                      placeholder="admin@office.com"
+                    />
+                  </div>
+                  {errors.email && <p className="text-red-500 text-[12px] mt-1 mr-1">{errors.email.message}</p>}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2 mr-1">كلمة المرور</label>
+                  <div className="relative group">
+                    <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-primary-500 transition-colors" />
+                    <input
+                      {...register('password')}
+                      type="password"
+                      className="w-full bg-slate-50/50 border border-slate-200 rounded-xl py-3 pl-4 pr-11 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 outline-none transition-all"
+                      placeholder="••••••••"
+                    />
+                  </div>
+                  {errors.password && <p className="text-red-500 text-[12px] mt-1 mr-1">{errors.password.message}</p>}
+                </div>
+
+                <div className="flex gap-4">
+                    <button
+                        type="button"
+                        onClick={() => setStep(1)}
+                        className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold py-4 rounded-xl transition-all flex items-center justify-center gap-2"
+                    >
+                        <ArrowRight className="w-5 h-5" />
+                        السابق
+                    </button>
+                    <button
+                        type="submit"
+                        disabled={isLoading}
+                        className="flex-[2] btn-primary py-4 flex items-center justify-center gap-2"
+                    >
+                        {isLoading ? <Loader2 className="w-6 h-6 animate-spin" /> : 'إنشاء الحساب'}
+                    </button>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </form>
+
+        <div className="mt-8 text-center text-slate-500 text-sm">
+          لديك حساب بالفعل؟{' '}
+          <Link to="/login" className="text-primary-600 font-bold hover:underline">
+            سجل دخولك من هنا
+          </Link>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
--- a/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -0,0 +1,118 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Dashboard Statistics Components
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { motion } from 'framer-motion';
+import { 
+  FileText, 
+  CheckCircle2, 
+  AlertCircle, 
+  TrendingUp, 
+  Wallet, 
+  ArrowUpRight 
+} from 'lucide-react';
+
+const stats = [
+  { label: 'إجمالي الفواتير', value: '1,280', icon: FileText, color: 'text-primary-600', bg: 'bg-primary-50', change: '+12%' },
+  { label: 'تمت مصادقتها', value: '1,150', icon: CheckCircle2, color: 'text-emerald-600', bg: 'bg-emerald-50', change: '+18%' },
+  { label: 'قيد المراجعة', value: '42', icon: AlertCircle, color: 'text-amber-600', bg: 'bg-amber-50', change: '-5%' },
+  { label: 'مجموع الضريبة (JOD)', value: '14,250.000', icon: Wallet, color: 'text-blue-600', bg: 'bg-blue-50', change: '+8%' },
+];
+
+export const DashboardPage = () => {
+    return (
+        <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <header className="flex items-center justify-between">
+                <div>
+                    <h2 className="text-3xl font-bold text-slate-900">لوحة التحكم</h2>
+                    <p className="text-slate-500 mt-1">نظرة عامة على نشاطك الضريبي هذا الشهر.</p>
+                </div>
+                <div className="flex gap-3">
+                    <button className="bg-white border border-slate-200 text-slate-700 font-semibold py-2.5 px-6 rounded-xl shadow-sm hover:bg-slate-50 transition-all flex items-center gap-2">
+                        <TrendingUp className="w-4 h-4 text-primary-500" />
+                        تصدير التقارير
+                    </button>
+                    <button className="btn-primary py-2.5 px-6 rounded-xl flex items-center gap-2 shadow-lg shadow-primary-500/25">
+                        <FileText className="w-5 h-5" />
+                        فاتورة جديدة
+                    </button>
+                </div>
+            </header>
+
+            {/* ── Stats Grid ────────────────────────────────────────── */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                {stats.map((stat, i) => (
+                    <motion.div 
+                        key={i}
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: i * 0.1 }}
+                        className="card-premium p-6 group cursor-pointer"
+                    >
+                        <div className="flex items-start justify-between mb-4">
+                            <div className={`p-3 rounded-2xl ${stat.bg} ${stat.color} transition-transform group-hover:scale-110 duration-300`}>
+                                <stat.icon className="w-6 h-6" />
+                            </div>
+                            <div className={`flex items-center gap-1 text-[12px] font-bold px-2 py-1 rounded-full ${stat.change.startsWith('+') ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-600'}`}>
+                                <ArrowUpRight className="w-3 h-3" />
+                                {stat.change}
+                            </div>
+                        </div>
+                        <p className="text-slate-500 text-sm font-medium">{stat.label}</p>
+                        <h3 className="text-2xl font-bold text-slate-900 mt-1">{stat.value}</h3>
+                    </motion.div>
+                ))}
+            </div>
+
+            {/* ── Main Dashboard Content (Placeholder for Charts/Lists) ── */}
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div className="lg:col-span-2 space-y-6">
+                    <div className="card-premium h-[400px] p-6 flex flex-col">
+                        <div className="flex items-center justify-between mb-8">
+                            <h4 className="font-bold text-lg">تحليلات الفوترة الأسبوعية</h4>
+                            <select className="bg-slate-50 border border-slate-100 rounded-lg py-1.5 px-3 text-sm font-medium outline-none">
+                                <option>آخر 7 أيام</option>
+                                <option>آخر 30 يوم</option>
+                            </select>
+                        </div>
+                        <div className="flex-1 bg-slate-50 rounded-2xl border border-dashed border-slate-200 flex items-center justify-center">
+                            <p className="text-slate-400 text-sm font-medium italic">رسم بياني توضيحي (Chart integration goes here)</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space-y-6">
+                    <div className="card-premium p-6 bg-primary-600 text-white shadow-xl shadow-primary-500/30">
+                        <h4 className="font-bold text-lg mb-2">استهلاك الاشتراك الحالي</h4>
+                        <p className="text-primary-100 text-sm mb-6">لقد استهلكت 65% من حصتك الشهرية من الفواتير.</p>
+                        <div className="w-full h-3 bg-white/20 rounded-full overflow-hidden mb-6">
+                            <div className="w-2/3 h-full bg-white rounded-full shadow-lg" />
+                        </div>
+                        <button className="w-full bg-white text-primary-600 font-bold py-3 rounded-xl hover:bg-primary-50 transition-all">
+                            ترقية الباقة الآن
+                        </button>
+                    </div>
+
+                    <div className="card-premium p-6">
+                        <h4 className="font-bold text-lg mb-4">آخر النشاطات</h4>
+                        <div className="space-y-4">
+                            {[1, 2, 3].map(i => (
+                                <div key={i} className="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-xl transition-all cursor-pointer">
+                                    <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
+                                        <FileText className="w-5 h-5 text-slate-500" />
+                                    </div>
+                                    <div className="flex-1">
+                                        <p className="text-sm font-bold text-slate-800">فاتورة مبيعات #A-2024-001</p>
+                                        <p className="text-[12px] text-slate-500">منذ 10 دقائق · تمت المصادقة</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
--- a/frontend/src/pages/invoices/InvoicesPage.tsx
+++ b/frontend/src/pages/invoices/InvoicesPage.tsx
@@ -0,0 +1,159 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Invoices Management Page
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+    Upload, 
+    Search, 
+    Filter, 
+    Eye, 
+    CheckCircle2, 
+    Clock, 
+    AlertCircle, 
+    MoreVertical,
+    FileImage,
+    ChevronLeft,
+    ChevronRight
+} from 'lucide-react';
+
+const invoices = [
+    { id: '1', number: 'INV-2024-001', company: 'شركة الأمل', date: '2024-04-15', total: '150.000', status: 'approved', type: 'cash' },
+    { id: '2', number: 'INV-2024-002', company: 'سوبرماركت المدينة', date: '2024-04-16', total: '2,400.000', status: 'validated', type: 'credit' },
+    { id: '3', number: 'OCR_PENDING', company: 'مخبز السلام', date: '2024-04-16', total: '0.000', status: 'extracting', type: 'cash' },
+    { id: '4', number: 'INV-2024-003', company: 'مكتبة النجاح', date: '2024-04-14', total: '85.250', status: 'validation_failed', type: 'cash' },
+];
+
+const StatusBadge = ({ status }: { status: string }) => {
+    const config: any = {
+        approved: { color: 'text-emerald-700 bg-emerald-50 border-emerald-100', icon: CheckCircle2, label: 'تم التصديق' },
+        validated: { color: 'text-blue-700 bg-blue-50 border-blue-100', icon: Clock, label: 'جاهز للإرسال' },
+        extracting: { color: 'text-amber-700 bg-amber-50 border-amber-100', icon: Clock, label: 'قيد الاستخراج AI' },
+        validation_failed: { color: 'text-red-700 bg-red-50 border-red-100', icon: AlertCircle, label: 'خطأ في التحقق' },
+    };
+    const { color, icon: Icon, label } = config[status] || config.extracting;
+    return (
+        <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold border ${color}`}>
+            <Icon className="w-3.5 h-3.5" />
+            {label}
+        </span>
+    );
+};
+
+export const InvoicesPage = () => {
+    const [searchTerm, setSearchTerm] = useState('');
+
+    return (
+        <div className="space-y-8 h-full flex flex-col">
+            <header className="flex items-center justify-between">
+                <div>
+                    <h2 className="text-3xl font-bold text-slate-900">إدارة الفواتير</h2>
+                    <p className="text-slate-500 mt-1">عرض، معالجة، وإرسال الفواتير الضريبية لبوابة الضريبة.</p>
+                </div>
+                <button className="btn-primary py-3 px-8 rounded-2xl flex items-center gap-2 shadow-xl shadow-primary-500/25 active:scale-95 transition-all">
+                    <Upload className="w-5 h-5" />
+                    رفع فاتورة جديدة
+                </button>
+            </header>
+
+            {/* ── Filter & Search Bar ──────────────────────────────── */}
+            <div className="flex gap-4">
+                <div className="flex-1 glass border-slate-200 rounded-2xl px-4 py-3 flex items-center gap-3">
+                    <Search className="w-5 h-5 text-slate-400" />
+                    <input 
+                        type="text" 
+                        placeholder="ابحث برقم الفاتورة، اسم الشركة، أو التاريخ..." 
+                        className="bg-transparent border-none outline-none flex-1 text-slate-800 text-sm"
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                </div>
+                <button className="glass border-slate-200 px-6 rounded-2xl flex items-center gap-2 text-slate-600 hover:bg-slate-50 transition-all font-semibold">
+                    <Filter className="w-4 h-4" />
+                    فلترة متقدمة
+                </button>
+            </div>
+
+            {/* ── Invoices Table ───────────────────────────────────── */}
+            <div className="flex-1 card-premium overflow-hidden flex flex-col bg-white">
+                <div className="overflow-x-auto">
+                    <table className="w-full text-right border-collapse">
+                        <thead className="bg-slate-50/80 border-b border-slate-100">
+                            <tr>
+                                <th className="px-6 py-4 text-sm font-bold text-slate-500">رقم الفاتورة</th>
+                                <th className="px-6 py-4 text-sm font-bold text-slate-500">الشركة المصدرة</th>
+                                <th className="px-6 py-4 text-sm font-bold text-slate-500">التاريخ</th>
+                                <th className="px-6 py-4 text-sm font-bold text-slate-500">النوع</th>
+                                <th className="px-6 py-4 text-sm font-bold text-slate-500">المجموع (JOD)</th>
+                                <th className="px-6 py-4 text-sm font-bold text-slate-500">الحالة</th>
+                                <th className="px-6 py-4 text-sm font-bold text-slate-500 w-20">إجراءات</th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100">
+                            {invoices.map((inv, idx) => (
+                                <motion.tr 
+                                    key={inv.id}
+                                    initial={{ opacity: 0, x: 20 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    transition={{ delay: idx * 0.05 }}
+                                    className="hover:bg-slate-50/50 transition-colors group cursor-pointer"
+                                >
+                                    <td className="px-6 py-4 font-bold text-slate-900">{inv.number}</td>
+                                    <td className="px-6 py-4 text-slate-600 font-medium">{inv.company}</td>
+                                    <td className="px-6 py-4 text-slate-500 text-sm">{inv.date}</td>
+                                    <td className="px-6 py-4">
+                                        <span className={`text-[11px] font-bold px-2 py-0.5 rounded uppercase tracking-wider ${inv.type === 'cash' ? 'bg-indigo-50 text-indigo-600' : 'bg-orange-50 text-orange-600'}`}>
+                                            {inv.type === 'cash' ? 'نقدي' : 'ذمم'}
+                                        </span>
+                                    </td>
+                                    <td className="px-6 py-4 font-mono font-bold text-slate-800">{inv.total}</td>
+                                    <td className="px-6 py-4"><StatusBadge status={inv.status} /></td>
+                                    <td className="px-6 py-4 text-center">
+                                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <button className="p-2 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-all">
+                                                <Eye className="w-4 h-4" />
+                                            </button>
+                                            <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+                                                <MoreVertical className="w-4 h-4" />
+                                            </button>
+                                        </div>
+                                    </td>
+                                </motion.tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* ── Empty State Mock (Hidden if data exists) ───────────── */}
+                {invoices.length === 0 && (
+                    <div className="flex-1 flex flex-col items-center justify-center p-20 text-center">
+                        <div className="w-24 h-24 bg-slate-50 rounded-full flex items-center justify-center mb-6 border border-slate-100">
+                            <Upload className="w-10 h-10 text-slate-300" />
+                        </div>
+                        <h3 className="text-xl font-bold text-slate-900 mb-2">لا توجد فواتير بعد</h3>
+                        <p className="text-slate-500 max-w-sm mb-8">ابدأ برفع أول فاتورة ليقوم محرك الذكاء الاصطناعي باستخراج بياناتها ومصادقتها ضريبياً.</p>
+                        <button className="btn-primary py-3 px-8 rounded-2xl flex items-center gap-2">
+                             ارفع فاتورتك الأولى
+                        </button>
+                    </div>
+                )}
+
+                {/* ── Pagination ───────────────────────────────────────── */}
+                <footer className="px-6 py-4 bg-slate-50/50 border-t border-slate-100 flex items-center justify-between">
+                    <p className="text-sm text-slate-500">عرض 1-10 من أصل 1,280 فاتورة</p>
+                    <div className="flex gap-2">
+                        <button className="p-2 text-slate-400 hover:text-slate-600 disabled:opacity-30 border border-slate-200 rounded-xl bg-white shadow-sm">
+                            <ChevronRight className="w-5 h-5" />
+                        </button>
+                        <button className="p-2 text-slate-400 hover:text-slate-600 disabled:opacity-30 border border-slate-200 rounded-xl bg-white shadow-sm">
+                            <ChevronLeft className="w-5 h-5" />
+                        </button>
+                    </div>
+                </footer>
+            </div>
+        </div>
+    );
+};
--- a/frontend/src/store/authStore.ts
+++ b/frontend/src/store/authStore.ts
@@ -0,0 +1,43 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Auth Store (Zustand)
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  tenantId: string;
+}
+
+interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  setAuth: (user: User, token: string) => void;
+  clearAuth: () => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      isAuthenticated: false,
+      setAuth: (user, token) => {
+        localStorage.setItem('access_token', token);
+        set({ user, isAuthenticated: true });
+      },
+      clearAuth: () => {
+        localStorage.removeItem('access_token');
+        set({ user: null, isAuthenticated: false });
+      },
+    }),
+    {
+      name: 'musadaq-auth-storage',
+    },
+  ),
+);
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})