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

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>
+  );
+}

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;

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>
+  );
+};

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>
+  );
+};

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;
+  }
+}

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>,
+)

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>
+  );
+}

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>
+  );
+}

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>
+    );
+};

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>
+    );
+};

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',
+    },
+  ),
+);