Merge origin/master: resolve conflicts, keep RBAC and fixes

Made-with: Cursor

backend/package.json

@@ -9,13 +9,13 @@
     "start": "node dist/server.js",
     "prisma:generate": "prisma generate",
     "prisma:migrate": "prisma migrate dev",
-    "prisma:seed": "ts-node prisma/seed.ts",
+    "prisma:seed": "node prisma/seed.js",
     "prisma:studio": "prisma studio",
     "db:clean-and-seed": "node prisma/clean-and-seed.js",
     "test": "jest"
   },
   "prisma": {
-    "seed": "ts-node prisma/seed.ts"
+    "seed": "node prisma/seed.js"
   },
   "dependencies": {
     "@prisma/client": "^5.8.0",

backend/prisma/clean-and-seed.js

@@ -83,7 +83,7 @@ async function main() {
 
   console.log('\n🌱 Running seed...\n');
   const backendDir = path.resolve(__dirname, '..');
-  execSync('node prisma/seed-prod.js', {
+  execSync('node prisma/seed.js', {
     stdio: 'inherit',
     cwd: backendDir,
     env: process.env,

backend/prisma/ensure-gm-permissions.sql

@@ -0,0 +1,12 @@
+-- Ensure GM has all module permissions
+-- Run: npx prisma db execute --file prisma/ensure-gm-permissions.sql
+
+INSERT INTO position_permissions (id, "positionId", module, resource, actions, "createdAt", "updatedAt")
+SELECT gen_random_uuid(), p.id, m.module, '*', '["*"]', NOW(), NOW()
+FROM positions p
+CROSS JOIN (VALUES ('contacts'), ('crm'), ('inventory'), ('projects'), ('hr'), ('marketing'), ('admin')) AS m(module)
+WHERE p.code = 'GM'
+AND NOT EXISTS (
+  SELECT 1 FROM position_permissions pp
+  WHERE pp."positionId" = p.id AND pp.module = m.module AND pp.resource = '*'
+);

backend/prisma/migrations/20260223105732_add_role_user_role_for_multi_group/migration.sql

@@ -0,0 +1,59 @@
+-- CreateTable
+CREATE TABLE "roles" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "nameAr" TEXT,
+    "description" TEXT,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "roles_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "role_permissions" (
+    "id" TEXT NOT NULL,
+    "roleId" TEXT NOT NULL,
+    "module" TEXT NOT NULL,
+    "resource" TEXT NOT NULL,
+    "actions" JSONB NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "role_permissions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "user_roles" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "roleId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "user_roles_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "roles_name_key" ON "roles"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "role_permissions_roleId_module_resource_key" ON "role_permissions"("roleId", "module", "resource");
+
+-- CreateIndex
+CREATE INDEX "user_roles_userId_idx" ON "user_roles"("userId");
+
+-- CreateIndex
+CREATE INDEX "user_roles_roleId_idx" ON "user_roles"("roleId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_roles_userId_roleId_key" ON "user_roles"("userId", "roleId");
+
+-- AddForeignKey
+ALTER TABLE "role_permissions" ADD CONSTRAINT "role_permissions_roleId_fkey" FOREIGN KEY ("roleId") REFERENCES "roles"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_roles" ADD CONSTRAINT "user_roles_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_roles" ADD CONSTRAINT "user_roles_roleId_fkey" FOREIGN KEY ("roleId") REFERENCES "roles"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/schema.prisma

@@ -69,10 +69,59 @@ model User {
   assignedTasks     Task[]
   projectMembers    ProjectMember[]
   campaigns         Campaign[]
+  userRoles         UserRole[]
   
   @@map("users")
 }
 
+// Optional roles - user can belong to multiple permission groups (Phase 3 multi-group)
+model Role {
+  id          String      @id @default(uuid())
+  name        String      @unique
+  nameAr      String?
+  description String?
+  isActive    Boolean     @default(true)
+  
+  createdAt   DateTime    @default(now())
+  updatedAt  DateTime    @updatedAt
+  
+  permissions RolePermission[]
+  userRoles   UserRole[]
+  
+  @@map("roles")
+}
+
+model RolePermission {
+  id        String   @id @default(uuid())
+  roleId    String
+  role      Role     @relation(fields: [roleId], references: [id], onDelete: Cascade)
+  module    String
+  resource  String
+  actions   Json     // ["read", "create", "update", "delete", ...]
+  
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  
+  @@unique([roleId, module, resource])
+  @@map("role_permissions")
+}
+
+model UserRole {
+  id        String   @id @default(uuid())
+  userId    String
+  roleId    String
+  
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  role      Role     @relation(fields: [roleId], references: [id], onDelete: Cascade)
+  
+  createdAt DateTime @default(now())
+  
+  @@unique([userId, roleId])
+  @@index([userId])
+  @@index([roleId])
+  @@map("user_roles")
+}
+
 model Employee {
   id                String    @id @default(uuid())
   uniqueEmployeeId  String    @unique // رقم الموظف الموحد

backend/prisma/seed.js

@@ -0,0 +1,146 @@
+/**
+ * Minimal seed - System Administrator only.
+ * Run with: node prisma/seed.js
+ */
+const { PrismaClient } = require('@prisma/client');
+const bcrypt = require('bcryptjs');
+
+const prisma = new PrismaClient();
+
+async function main() {
+  console.log('🌱 Starting database seeding (minimal - System Administrator only)...');
+
+  const adminDept = await prisma.department.create({
+    data: {
+      name: 'Administration',
+      nameAr: 'الإدارة',
+      code: 'ADMIN',
+      description: 'System administration and configuration',
+    },
+  });
+
+  const sysAdminPosition = await prisma.position.create({
+    data: {
+      title: 'System Administrator',
+      titleAr: 'مدير النظام',
+      code: 'SYS_ADMIN',
+      departmentId: adminDept.id,
+      level: 1,
+      description: 'Full system access - configure and manage all modules',
+    },
+  });
+
+  const modules = ['contacts', 'crm', 'inventory', 'projects', 'hr', 'marketing', 'admin'];
+  for (const module of modules) {
+    await prisma.positionPermission.create({
+      data: {
+        positionId: sysAdminPosition.id,
+        module,
+        resource: '*',
+        actions: ['*'],
+      },
+    });
+  }
+
+  // Create Sales Department and restricted positions
+  const salesDept = await prisma.department.create({
+    data: {
+      name: 'Sales',
+      nameAr: 'المبيعات',
+      code: 'SALES',
+      description: 'Sales and business development',
+    },
+  });
+
+  const salesRepPosition = await prisma.position.create({
+    data: {
+      title: 'Sales Representative',
+      titleAr: 'مندوب مبيعات',
+      code: 'SALES_REP',
+      departmentId: salesDept.id,
+      level: 3,
+      description: 'Limited access - Contacts and CRM deals',
+    },
+  });
+
+  await prisma.positionPermission.createMany({
+    data: [
+      { positionId: salesRepPosition.id, module: 'contacts', resource: '*', actions: ['read', 'create', 'update'] },
+      { positionId: salesRepPosition.id, module: 'crm', resource: 'deals', actions: ['read', 'create', 'update'] },
+    ],
+  });
+
+  const accountantPosition = await prisma.position.create({
+    data: {
+      title: 'Accountant',
+      titleAr: 'محاسب',
+      code: 'ACCOUNTANT',
+      departmentId: adminDept.id,
+      level: 2,
+      description: 'HR read, inventory read, contacts read',
+    },
+  });
+
+  await prisma.positionPermission.createMany({
+    data: [
+      { positionId: accountantPosition.id, module: 'contacts', resource: '*', actions: ['read'] },
+      { positionId: accountantPosition.id, module: 'crm', resource: '*', actions: ['read'] },
+      { positionId: accountantPosition.id, module: 'inventory', resource: '*', actions: ['read'] },
+      { positionId: accountantPosition.id, module: 'hr', resource: '*', actions: ['read'] },
+    ],
+  });
+
+  console.log('✅ Created position and permissions');
+
+  const sysAdminEmployee = await prisma.employee.create({
+    data: {
+      uniqueEmployeeId: 'SYS-001',
+      firstName: 'System',
+      lastName: 'Administrator',
+      firstNameAr: 'مدير',
+      lastNameAr: 'النظام',
+      email: 'admin@system.local',
+      mobile: '+966500000000',
+      dateOfBirth: new Date('1990-01-01'),
+      gender: 'MALE',
+      nationality: 'Saudi',
+      employmentType: 'Full-time',
+      contractType: 'Unlimited',
+      hireDate: new Date(),
+      departmentId: adminDept.id,
+      positionId: sysAdminPosition.id,
+      basicSalary: 0,
+      status: 'ACTIVE',
+    },
+  });
+
+  const hashedPassword = await bcrypt.hash('Admin@123', 10);
+  await prisma.user.create({
+    data: {
+      email: 'admin@system.local',
+      username: 'admin',
+      password: hashedPassword,
+      employeeId: sysAdminEmployee.id,
+      isActive: true,
+    },
+  });
+
+  console.log('✅ Created System Administrator');
+  console.log('\n🎉 Database seeding completed!\n');
+  console.log('📋 System Administrator:');
+  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+  console.log('   Email: admin@system.local');
+  console.log('   Username: admin');
+  console.log('   Password: Admin@123');
+  console.log('   Access: Full system access (all modules)');
+  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
+}
+
+main()
+  .catch((e) => {
+    console.error('❌ Error seeding database:', e);
+    process.exit(1);
+  })
+  .finally(async () => {
+    await prisma.$disconnect();
+  });

backend/prisma/seed.ts

@@ -4,58 +4,50 @@ import bcrypt from 'bcryptjs';
 const prisma = new PrismaClient();
 
 async function main() {
-  console.log('🌱 Starting database seeding...');
+  console.log('🌱 Starting database seeding (minimal - System Administrator only)...');
 
-  // Create Departments
+  // Create Administration Department
+  const adminDept = await prisma.department.create({
+    data: {
+      name: 'Administration',
+      nameAr: 'الإدارة',
+      code: 'ADMIN',
+      description: 'System administration and configuration',
+    },
+  });
+
+  // Create System Administrator Position
+  const sysAdminPosition = await prisma.position.create({
+    data: {
+      title: 'System Administrator',
+      titleAr: 'مدير النظام',
+      code: 'SYS_ADMIN',
+      departmentId: adminDept.id,
+      level: 1,
+      description: 'Full system access - configure and manage all modules',
+    },
+  });
+
+  // Create full permissions for all modules
+  const modules = ['contacts', 'crm', 'inventory', 'projects', 'hr', 'marketing', 'admin'];
+  for (const module of modules) {
+    await prisma.positionPermission.create({
+      data: {
+        positionId: sysAdminPosition.id,
+        module,
+        resource: '*',
+        actions: ['*'],
+      },
+    });
+  }
+
+  // Create Sales Department and restricted positions
   const salesDept = await prisma.department.create({
     data: {
-      name: 'Sales Department',
+      name: 'Sales',
-      nameAr: 'قسم المبيعات',
+      nameAr: 'المبيعات',
       code: 'SALES',
-      description: 'Sales and Business Development',
+      description: 'Sales and business development',
-    },
-  });
-
-  const itDept = await prisma.department.create({
-    data: {
-      name: 'IT Department',
-      nameAr: 'قسم تقنية المعلومات',
-      code: 'IT',
-      description: 'Information Technology',
-    },
-  });
-
-  const hrDept = await prisma.department.create({
-    data: {
-      name: 'HR Department',
-      nameAr: 'قسم الموارد البشرية',
-      code: 'HR',
-      description: 'Human Resources',
-    },
-  });
-
-  console.log('✅ Created departments');
-
-  // Create Positions
-  const gmPosition = await prisma.position.create({
-    data: {
-      title: 'General Manager',
-      titleAr: 'المدير العام',
-      code: 'GM',
-      departmentId: salesDept.id,
-      level: 1,
-      description: 'Chief Executive - Full Access',
-    },
-  });
-
-  const salesManagerPosition = await prisma.position.create({
-    data: {
-      title: 'Sales Manager',
-      titleAr: 'مدير المبيعات',
-      code: 'SALES_MGR',
-      departmentId: salesDept.id,
-      level: 2,
-      description: 'Sales Department Manager',
     },
   });
 
@@ -66,342 +58,83 @@ async function main() {
       code: 'SALES_REP',
       departmentId: salesDept.id,
       level: 3,
-      description: 'Sales Representative',
+      description: 'Limited access - Contacts and CRM deals',
     },
   });
 
-  console.log('✅ Created positions');
-
-  const itSupportPosition = await prisma.position.create({
-    data: {
-      title: 'IT Support',
-      titleAr: 'دعم فني',
-      code: 'IT_SUPPORT',
-      departmentId: itDept.id,
-      level: 4,
-      description: 'IT Support Technician',
-    },
-  });
-
-  const itDeveloperPosition = await prisma.position.create({
-    data: {
-      title: 'Developer',
-      titleAr: 'مطور',
-      code: 'IT_DEV',
-      departmentId: itDept.id,
-      level: 4,
-      description: 'Software Developer',
-    },
-  });
-
-    // Employee position for ALL departments (added)
-  const salesEmployeePosition = await prisma.position.create({
-    data: {
-      title: 'Employee',
-      titleAr: 'موظف',
-      code: 'SALES_EMPLOYEE',
-      departmentId: salesDept.id,
-      level: 5,
-      description: 'General employee - Sales Department',
-    },
-  });
-
-  const itEmployeePosition = await prisma.position.create({
-    data: {
-      title: 'Employee',
-      titleAr: 'موظف',
-      code: 'IT_EMPLOYEE',
-      departmentId: itDept.id,
-      level: 5,
-      description: 'General employee - IT Department',
-    },
-  });
-
-  const hrEmployeePosition = await prisma.position.create({
-    data: {
-      title: 'Employee',
-      titleAr: 'موظف',
-      code: 'HR_EMPLOYEE',
-      departmentId: hrDept.id,
-      level: 5,
-      description: 'General employee - HR Department',
-    },
-  });
-
-  // Create Permissions for GM (Full Access)
-  const modules = ['contacts', 'crm', 'inventory', 'projects', 'hr', 'marketing'];
-  const resources = ['*'];
-  const actions = ['*'];
-
-  for (const module of modules) {
-    await prisma.positionPermission.create({
-      data: {
-        positionId: gmPosition.id,
-        module,
-        resource: resources[0],
-        actions,
-      },
-    });
-  }
-
-  // Admin permission for GM
-  await prisma.positionPermission.create({
-    data: {
-      positionId: gmPosition.id,
-      module: 'admin',
-      resource: '*',
-      actions: ['*'],
-    },
-  });
-
-  // Create Permissions for Sales Manager
   await prisma.positionPermission.createMany({
     data: [
-      {
+      { positionId: salesRepPosition.id, module: 'contacts', resource: '*', actions: ['read', 'create', 'update'] },
-        positionId: salesManagerPosition.id,
+      { positionId: salesRepPosition.id, module: 'crm', resource: 'deals', actions: ['read', 'create', 'update'] },
-        module: 'contacts',
-        resource: 'contacts',
-        actions: ['create', 'read', 'update', 'merge'],
-      },
-      {
-        positionId: salesManagerPosition.id,
-        module: 'crm',
-        resource: 'deals',
-        actions: ['create', 'read', 'update', 'approve'],
-      },
-      {
-        positionId: salesManagerPosition.id,
-        module: 'crm',
-        resource: 'quotes',
-        actions: ['create', 'read', 'update', 'approve'],
-      },
     ],
   });
 
-  // Create Permissions for Sales Rep
+  const accountantPosition = await prisma.position.create({
+    data: {
+      title: 'Accountant',
+      titleAr: 'محاسب',
+      code: 'ACCOUNTANT',
+      departmentId: adminDept.id,
+      level: 2,
+      description: 'HR read, inventory read, contacts read',
+    },
+  });
+
   await prisma.positionPermission.createMany({
     data: [
-      {
+      { positionId: accountantPosition.id, module: 'contacts', resource: '*', actions: ['read'] },
-        positionId: salesRepPosition.id,
+      { positionId: accountantPosition.id, module: 'crm', resource: '*', actions: ['read'] },
-        module: 'contacts',
+      { positionId: accountantPosition.id, module: 'inventory', resource: '*', actions: ['read'] },
-        resource: 'contacts',
+      { positionId: accountantPosition.id, module: 'hr', resource: '*', actions: ['read'] },
-        actions: ['create', 'read', 'update'],
-      },
-      {
-        positionId: salesRepPosition.id,
-        module: 'crm',
-        resource: 'deals',
-        actions: ['create', 'read', 'update'],
-      },
-      {
-        positionId: salesRepPosition.id,
-        module: 'crm',
-        resource: 'quotes',
-        actions: ['create', 'read'],
-      },
     ],
   });
 
-  console.log('✅ Created permissions');
+  console.log('✅ Created position and permissions');
 
-  // Create Employees
+  // Create minimal Employee for System Administrator
-  const gmEmployee = await prisma.employee.create({
+  const sysAdminEmployee = await prisma.employee.create({
     data: {
-      uniqueEmployeeId: 'EMP-2024-0001',
+      uniqueEmployeeId: 'SYS-001',
-      firstName: 'Ahmed',
+      firstName: 'System',
-      lastName: 'Al-Mutairi',
+      lastName: 'Administrator',
-      firstNameAr: 'أحمد',
+      firstNameAr: 'مدير',
-      lastNameAr: 'المطيري',
+      lastNameAr: 'النظام',
-      email: 'gm@atmata.com',
+      email: 'admin@system.local',
-      mobile: '+966500000001',
+      mobile: '+966500000000',
-      dateOfBirth: new Date('1980-01-01'),
+      dateOfBirth: new Date('1990-01-01'),
       gender: 'MALE',
       nationality: 'Saudi',
       employmentType: 'Full-time',
       contractType: 'Unlimited',
-      hireDate: new Date('2020-01-01'),
+      hireDate: new Date(),
-      departmentId: salesDept.id,
+      departmentId: adminDept.id,
-      positionId: gmPosition.id,
+      positionId: sysAdminPosition.id,
-      basicSalary: 50000,
+      basicSalary: 0,
       status: 'ACTIVE',
     },
   });
 
-  const salesManagerEmployee = await prisma.employee.create({
+  // Create System Administrator User
-    data: {
-      uniqueEmployeeId: 'EMP-2024-0002',
-      firstName: 'Fatima',
-      lastName: 'Al-Zahrani',
-      firstNameAr: 'فاطمة',
-      lastNameAr: 'الزهراني',
-      email: 'sales.manager@atmata.com',
-      mobile: '+966500000002',
-      dateOfBirth: new Date('1985-05-15'),
-      gender: 'FEMALE',
-      nationality: 'Saudi',
-      employmentType: 'Full-time',
-      contractType: 'Unlimited',
-      hireDate: new Date('2021-06-01'),
-      departmentId: salesDept.id,
-      positionId: salesManagerPosition.id,
-      reportingToId: gmEmployee.id,
-      basicSalary: 25000,
-      status: 'ACTIVE',
-    },
-  });
-
-  const salesRepEmployee = await prisma.employee.create({
-    data: {
-      uniqueEmployeeId: 'EMP-2024-0003',
-      firstName: 'Mohammed',
-      lastName: 'Al-Qahtani',
-      firstNameAr: 'محمد',
-      lastNameAr: 'القحطاني',
-      email: 'sales.rep@atmata.com',
-      mobile: '+966500000003',
-      dateOfBirth: new Date('1992-08-20'),
-      gender: 'MALE',
-      nationality: 'Saudi',
-      employmentType: 'Full-time',
-      contractType: 'Fixed',
-      hireDate: new Date('2023-01-15'),
-      departmentId: salesDept.id,
-      positionId: salesRepPosition.id,
-      reportingToId: salesManagerEmployee.id,
-      basicSalary: 12000,
-      status: 'ACTIVE',
-    },
-  });
-
-  console.log('✅ Created employees');
-
-  // Create Users
   const hashedPassword = await bcrypt.hash('Admin@123', 10);
-
+  await prisma.user.create({
-  const gmUser = await prisma.user.create({
     data: {
-      email: 'gm@atmata.com',
+      email: 'admin@system.local',
       username: 'admin',
       password: hashedPassword,
-      employeeId: gmEmployee.id,
+      employeeId: sysAdminEmployee.id,
       isActive: true,
     },
   });
 
-  const salesManagerUser = await prisma.user.create({
+  console.log('✅ Created System Administrator');
-    data: {
-      email: 'sales.manager@atmata.com',
-      username: 'salesmanager',
-      password: hashedPassword,
-      employeeId: salesManagerEmployee.id,
-      isActive: true,
-    },
-  });
 
-  const salesRepUser = await prisma.user.create({
+  console.log('\n🎉 Database seeding completed!\n');
-    data: {
+  console.log('📋 System Administrator:');
-      email: 'sales.rep@atmata.com',
-      username: 'salesrep',
-      password: hashedPassword,
-      employeeId: salesRepEmployee.id,
-      isActive: true,
-    },
-  });
-
-  console.log('✅ Created users');
-
-  // Create Contact Categories
-  await prisma.contactCategory.createMany({
-    data: [
-      { name: 'Customer', nameAr: 'عميل', description: 'Paying customers' },
-      { name: 'Supplier', nameAr: 'مورد', description: 'Product/Service suppliers' },
-      { name: 'Partner', nameAr: 'شريك', description: 'Business partners' },
-      { name: 'Lead', nameAr: 'عميل محتمل', description: 'Potential customers' },
-      { name: 'Company Employee', nameAr: 'موظف الشركة', description: 'Internal company staff' },
-    ],
-  });
-
-  console.log('✅ Created contact categories');
-
-  // Create Product Categories
-  await prisma.productCategory.createMany({
-    data: [
-      { name: 'Electronics', nameAr: 'إلكترونيات', code: 'ELEC' },
-      { name: 'Software', nameAr: 'برمجيات', code: 'SOFT' },
-      { name: 'Services', nameAr: 'خدمات', code: 'SERV' },
-    ],
-  });
-
-  console.log('✅ Created product categories');
-
-  // Create Pipelines
-  await prisma.pipeline.create({
-    data: {
-      name: 'B2B Sales Pipeline',
-      nameAr: 'مسار مبيعات الشركات',
-      structure: 'B2B',
-      stages: [
-        { name: 'OPEN', nameAr: 'مفتوحة', order: 1 },
-        { name: 'QUALIFIED', nameAr: 'مؤهلة', order: 2 },
-        { name: 'NEGOTIATION', nameAr: 'تفاوض', order: 3 },
-        { name: 'PROPOSAL', nameAr: 'عرض سعر', order: 4 },
-        { name: 'WON', nameAr: 'فازت', order: 5 },
-        { name: 'LOST', nameAr: 'خسرت', order: 6 },
-      ],
-      isActive: true,
-    },
-  });
-
-  await prisma.pipeline.create({
-    data: {
-      name: 'B2C Sales Pipeline',
-      nameAr: 'مسار مبيعات الأفراد',
-      structure: 'B2C',
-      stages: [
-        { name: 'LEAD', nameAr: 'عميل محتمل', order: 1 },
-        { name: 'CONTACTED', nameAr: 'تم التواصل', order: 2 },
-        { name: 'QUALIFIED', nameAr: 'مؤهل', order: 3 },
-        { name: 'WON', nameAr: 'بيع', order: 4 },
-        { name: 'LOST', nameAr: 'خسارة', order: 5 },
-      ],
-      isActive: true,
-    },
-  });
-
-  console.log('✅ Created pipelines');
-
-  // Create sample warehouse
-  await prisma.warehouse.create({
-    data: {
-      code: 'WH-MAIN',
-      name: 'Main Warehouse',
-      nameAr: 'المستودع الرئيسي',
-      type: 'MAIN',
-      city: 'Riyadh',
-      country: 'Saudi Arabia',
-      isActive: true,
-    },
-  });
-
-  console.log('✅ Created warehouse');
-
-  console.log('\n🎉 Database seeding completed successfully!\n');
-  console.log('📋 Default Users Created:');
   console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-  console.log('1. General Manager');
+  console.log('   Email: admin@system.local');
-  console.log('   Email: gm@atmata.com');
+  console.log('   Username: admin');
   console.log('   Password: Admin@123');
-  console.log('   Access: Full System Access');
+  console.log('   Access: Full system access (all modules)');
-  console.log('');
-  console.log('2. Sales Manager');
-  console.log('   Email: sales.manager@atmata.com');
-  console.log('   Password: Admin@123');
-  console.log('   Access: Contacts, CRM with approvals');
-  console.log('');
-  console.log('3. Sales Representative');
-  console.log('   Email: sales.rep@atmata.com');
-  console.log('   Password: Admin@123');
-  console.log('   Access: Basic Contacts and CRM');
   console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
 }
 
@@ -413,4 +146,3 @@ main()
   .finally(async () => {
     await prisma.$disconnect();
   });
-

backend/scripts/ensure-gm-permissions.ts

@@ -0,0 +1,51 @@
+/**
+ * Ensure GM position has all module permissions.
+ * Adds any missing permissions for: contacts, crm, inventory, projects, hr, marketing, admin
+ */
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+const GM_MODULES = ['contacts', 'crm', 'inventory', 'projects', 'hr', 'marketing', 'admin'];
+
+async function main() {
+  const gmPosition = await prisma.position.findFirst({ where: { code: 'GM' } });
+  if (!gmPosition) {
+    console.log('GM position not found.');
+    process.exit(1);
+  }
+
+  const existing = await prisma.positionPermission.findMany({
+    where: { positionId: gmPosition.id },
+    select: { module: true },
+  });
+  const existingModules = new Set(existing.map((p) => p.module));
+
+  let added = 0;
+  for (const module of GM_MODULES) {
+    if (existingModules.has(module)) continue;
+    await prisma.positionPermission.create({
+      data: {
+        positionId: gmPosition.id,
+        module,
+        resource: '*',
+        actions: ['*'],
+      },
+    });
+    console.log(`Added permission: ${module}`);
+    added++;
+  }
+
+  if (added === 0) {
+    console.log('All GM permissions already exist.');
+  } else {
+    console.log(`Added ${added} permission(s).`);
+  }
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());

backend/scripts/run-production-clean-and-seed.sh

@@ -53,4 +53,4 @@ npm run db:clean-and-seed
 
 echo ""
 echo "✅ Done. Restart the application so it uses the cleaned database."
-echo "   Default logins: gm@atmata.com / sales.manager@atmata.com / sales.rep@atmata.com (Password: Admin@123)"
+echo "   System Administrator: admin@system.local (Password: Admin@123)"

backend/src/modules/admin/admin.controller.ts

@@ -136,17 +136,15 @@ class AdminController {
 
   async createPosition(req: AuthRequest, res: Response, next: NextFunction) {
     try {
-      const userId = req.user!.id;
+      const position = await adminService.createPosition({
-      const position = await adminService.createPosition(
+        title: req.body.title,
-        {
+        titleAr: req.body.titleAr,
-          title: req.body.title,
+        code: req.body.code,
-          titleAr: req.body.titleAr,
+        departmentId: req.body.departmentId,
-          departmentId: req.body.departmentId,
+        level: req.body.level,
-          level: req.body.level,
+        description: req.body.description,
-          code: req.body.code,
+        isActive: req.body.isActive,
-        },
+      });
-        userId
-      );
       res.status(201).json(ResponseFormatter.success(position));
     } catch (error) {
       next(error);
@@ -155,15 +153,15 @@ class AdminController {
 
   async updatePosition(req: AuthRequest, res: Response, next: NextFunction) {
     try {
-      const userId = req.user!.id;
+      const position = await adminService.updatePosition(req.params.id, {
-      const position = await adminService.updatePosition(
+        title: req.body.title,
-        req.params.id,
+        titleAr: req.body.titleAr,
-        {
+        code: req.body.code,
-          title: req.body.title,
+        departmentId: req.body.departmentId,
-          titleAr: req.body.titleAr,
+        level: req.body.level,
-        },
+        description: req.body.description,
-        userId
+        isActive: req.body.isActive,
-      );
+      });
       res.json(ResponseFormatter.success(position));
     } catch (error) {
       next(error);
@@ -182,11 +180,69 @@ class AdminController {
     }
   }
 
-  async deletePosition(req: AuthRequest, res: Response, next: NextFunction) {
+  // ========== PERMISSION GROUPS (Phase 3) ==========
+
+  async getPermissionGroups(req: AuthRequest, res: Response, next: NextFunction) {
     try {
-      const userId = req.user!.id;
+      const groups = await adminService.getPermissionGroups();
-      await adminService.deletePosition(req.params.id, userId);
+      res.json(ResponseFormatter.success(groups));
-      res.json(ResponseFormatter.success(null, 'Role deleted successfully'));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async createPermissionGroup(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const group = await adminService.createPermissionGroup(req.body);
+      res.status(201).json(ResponseFormatter.success(group));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async updatePermissionGroup(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const group = await adminService.updatePermissionGroup(req.params.id, req.body);
+      res.json(ResponseFormatter.success(group));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async updatePermissionGroupPermissions(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const group = await adminService.updatePermissionGroupPermissions(
+        req.params.id,
+        req.body.permissions
+      );
+      res.json(ResponseFormatter.success(group));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async getUserRoles(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const roles = await adminService.getUserRoles(req.params.userId);
+      res.json(ResponseFormatter.success(roles));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async assignUserRole(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const userRole = await adminService.assignUserRole(req.params.userId, req.body.roleId);
+      res.status(201).json(ResponseFormatter.success(userRole));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async removeUserRole(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      await adminService.removeUserRole(req.params.userId, req.params.roleId);
+      res.json(ResponseFormatter.success({ success: true }));
     } catch (error) {
       next(error);
     }

backend/src/modules/admin/admin.routes.ts

@@ -89,43 +89,33 @@ router.get(
   adminController.getPositions
 );
 
-//  Create role
 router.post(
   '/positions',
   authorize('admin', 'roles', 'create'),
   [
     body('title').notEmpty().trim(),
-    body('titleAr').optional().isString().trim(),
+    body('code').notEmpty().trim(),
     body('departmentId').isUUID(),
     body('level').optional().isInt({ min: 1 }),
-    body('code').optional().isString().trim(),
   ],
   validate,
   adminController.createPosition
 );
 
-//  Update role name (title/titleAr)
 router.put(
   '/positions/:id',
   authorize('admin', 'roles', 'update'),
   [
     param('id').isUUID(),
     body('title').optional().notEmpty().trim(),
-    body('titleAr').optional().isString().trim(),
+    body('code').optional().notEmpty().trim(),
+    body('departmentId').optional().isUUID(),
+    body('level').optional().isInt({ min: 1 }),
   ],
   validate,
   adminController.updatePosition
 );
 
-// Delete (soft delete) a role/position
-router.delete(
-  '/positions/:id',
-  authorize('admin', 'roles', 'delete'),
-  param('id').isUUID(),
-  validate,
-  adminController.deletePosition
-);
-
 router.put(
   '/positions/:id/permissions',
   authorize('admin', 'roles', 'update'),
@@ -137,4 +127,68 @@ router.put(
   adminController.updatePositionPermissions
 );
 
+// ========== PERMISSION GROUPS (Phase 3 - multi-group) ==========
+
+router.get(
+  '/permission-groups',
+  authorize('admin', 'roles', 'read'),
+  adminController.getPermissionGroups
+);
+
+router.post(
+  '/permission-groups',
+  authorize('admin', 'roles', 'create'),
+  [
+    body('name').notEmpty().trim(),
+  ],
+  validate,
+  adminController.createPermissionGroup
+);
+
+router.put(
+  '/permission-groups/:id',
+  authorize('admin', 'roles', 'update'),
+  [param('id').isUUID()],
+  validate,
+  adminController.updatePermissionGroup
+);
+
+router.put(
+  '/permission-groups/:id/permissions',
+  authorize('admin', 'roles', 'update'),
+  [
+    param('id').isUUID(),
+    body('permissions').isArray(),
+  ],
+  validate,
+  adminController.updatePermissionGroupPermissions
+);
+
+router.get(
+  '/users/:userId/roles',
+  authorize('admin', 'users', 'read'),
+  [param('userId').isUUID()],
+  validate,
+  adminController.getUserRoles
+);
+
+router.post(
+  '/users/:userId/roles',
+  authorize('admin', 'users', 'update'),
+  [
+    param('userId').isUUID(),
+    body('roleId').isUUID(),
+  ],
+  validate,
+  adminController.assignUserRole
+);
+
+router.delete(
+  '/users/:userId/roles/:roleId',
+  authorize('admin', 'users', 'update'),
+  [param('userId').isUUID(), param('roleId').isUUID()],
+  validate,
+  adminController.removeUserRole
+);
+
 export default router;

backend/src/modules/admin/admin.service.ts

@@ -39,19 +39,6 @@ export interface AuditLogFilters {
   pageSize?: number;
 }
 
-export interface CreatePositionData {
-  title: string;
-  titleAr?: string;
-  departmentId: string;
-  level?: number;
-  code?: string;
-}
-
-export interface UpdatePositionData {
-  title?: string;
-  titleAr?: string;
-}
-
 class AdminService {
   // ========== USERS ==========
 
@@ -107,7 +94,7 @@ class AdminService {
     ]);
 
     const sanitized = users.map((u) => {
-      const { password: _, ...rest } = u as any;
+      const { password: _, ...rest } = u;
       return rest;
     });
 
@@ -137,7 +124,7 @@ class AdminService {
       throw new AppError(404, 'المستخدم غير موجود - User not found');
     }
 
-    const { password: _, ...rest } = user as any;
+    const { password: _, ...rest } = user;
     return rest;
   }
 
@@ -236,7 +223,7 @@ class AdminService {
       ...(data.email && { email: data.email }),
       ...(data.username && { username: data.username }),
       ...(data.isActive !== undefined && { isActive: data.isActive }),
-      ...(data.employeeId !== undefined && { employeeId: (data.employeeId as any) || null }),
+      ...(data.employeeId !== undefined && { employeeId: data.employeeId || null }),
     };
 
     if (data.password && data.password.length >= 8) {
@@ -255,7 +242,7 @@ class AdminService {
       },
     });
 
-    const { password: _, ...sanitized } = user as any;
+    const { password: _, ...sanitized } = user;
 
     await AuditLogger.log({
       entityType: 'USER',
@@ -286,7 +273,7 @@ class AdminService {
       },
     });
 
-    const { password: _, ...sanitized } = updated as any;
+    const { password: _, ...sanitized } = updated;
 
     await AuditLogger.log({
       entityType: 'USER',
@@ -393,7 +380,7 @@ class AdminService {
     const positions = await prisma.position.findMany({
       where: { isActive: true },
       include: {
-        department: { select: { id: true, name: true, nameAr: true } }, 
+        department: { select: { name: true, nameAr: true } },
         permissions: true,
         _count: {
           select: {
@@ -419,118 +406,100 @@ class AdminService {
     return withUserCount;
   }
 
-  private async generateUniqueCode(base: string) {
+  async createPosition(data: {
-    const cleaned = (base || 'ROLE')
+    title: string;
-      .toUpperCase()
+    titleAr?: string;
-      .replace(/[^A-Z0-9]+/g, '_')
+    code: string;
-      .replace(/^_+|_+$/g, '')
+    departmentId: string;
-      .slice(0, 18) || 'ROLE';
+    level?: number;
-
+    description?: string;
-    for (let i = 0; i < 25; i++) {
+    isActive?: boolean;
-      const suffix = Math.floor(1000 + Math.random() * 9000);
+  }) {
-      const code = `${cleaned}_${suffix}`;
+    const existing = await prisma.position.findUnique({
-      const exists = await prisma.position.findUnique({ where: { code } });
+      where: { code: data.code },
-      if (!exists) return code;
+    });
+    if (existing) {
+      throw new AppError(400, 'كود الدور مستخدم - Position code already exists');
     }
 
-    // fallback
+    const dept = await prisma.department.findUnique({
-    return `${cleaned}_${Date.now()}`;
-  }
-
-  async createPosition(data: CreatePositionData, createdById: string) {
-    const title = (data.title || '').trim();
-    const titleAr = (data.titleAr || '').trim();
-
-    if (!title && !titleAr) {
-      throw new AppError(400, 'اسم الدور مطلوب - Role name is required');
-    }
-
-    const department = await prisma.department.findUnique({
       where: { id: data.departmentId },
     });
-
+    if (!dept) {
-    if (!department || !department.isActive) {
       throw new AppError(400, 'القسم غير موجود - Department not found');
     }
 
-    let code = (data.code || '').trim();
+    return prisma.position.create({
-    if (code) {
-      code = code.toUpperCase().replace(/[^A-Z0-9_]+/g, '_');
-      const exists = await prisma.position.findUnique({ where: { code } });
-      if (exists) {
-        throw new AppError(400, 'الكود مستخدم بالفعل - Code already exists');
-      }
-    } else {
-      code = await this.generateUniqueCode(title || titleAr || 'ROLE');
-    }
-
-    const level = Number.isFinite(data.level as any) ? Math.max(1, Number(data.level)) : 1;
-
-    const created = await prisma.position.create({
       data: {
-        title: title || titleAr, 
+        title: data.title,
-        titleAr: titleAr || null,
+        titleAr: data.titleAr,
-        code,
+        code: data.code.trim().toUpperCase().replace(/\s+/g, '_'),
         departmentId: data.departmentId,
-        level,
+        level: data.level ?? 5,
+        description: data.description,
+        isActive: data.isActive ?? true,
+      },
+      include: {
+        department: { select: { name: true, nameAr: true } },
+        permissions: true,
       },
     });
-
-    await AuditLogger.log({
-      entityType: 'POSITION',
-      entityId: created.id,
-      action: 'CREATE',
-      userId: createdById,
-      changes: {
-        created: {
-          title: created.title,
-          titleAr: created.titleAr,
-          code: created.code,
-          departmentId: created.departmentId,
-          level: created.level,
-        },
-      },
-    });
-
-    const all = await this.getPositions();
-    return all.find((p: any) => p.id === created.id) || created;
   }
 
-  async updatePosition(positionId: string, data: UpdatePositionData, updatedById: string) {
+  async updatePosition(
-    const existing = await prisma.position.findUnique({ where: { id: positionId } });
+    positionId: string,
-    if (!existing) {
+    data: {
+      title?: string;
+      titleAr?: string;
+      code?: string;
+      departmentId?: string;
+      level?: number;
+      description?: string;
+      isActive?: boolean;
+    }
+  ) {
+    const position = await prisma.position.findUnique({
+      where: { id: positionId },
+    });
+    if (!position) {
       throw new AppError(404, 'الدور غير موجود - Position not found');
     }
 
-    const nextTitle = data.title !== undefined ? (data.title || '').trim() : existing.title;
+    if (data.code && data.code !== position.code) {
-    const nextTitleAr = data.titleAr !== undefined ? (data.titleAr || '').trim() : (existing.titleAr || '');
+      const existing = await prisma.position.findUnique({
-
+        where: { code: data.code },
-    const finalTitle = nextTitle || nextTitleAr;
+      });
-    if (!finalTitle) {
+      if (existing) {
-      throw new AppError(400, 'اسم الدور مطلوب - Role name is required');
+        throw new AppError(400, 'كود الدور مستخدم - Position code already exists');
+      }
     }
 
-    const updated = await prisma.position.update({
+    if (data.departmentId && data.departmentId !== position.departmentId) {
+      const dept = await prisma.department.findUnique({
+        where: { id: data.departmentId },
+      });
+      if (!dept) {
+        throw new AppError(400, 'القسم غير موجود - Department not found');
+      }
+    }
+
+    const updateData: Record<string, any> = {};
+    if (data.title !== undefined) updateData.title = data.title;
+    if (data.titleAr !== undefined) updateData.titleAr = data.titleAr;
+    if (data.code !== undefined) updateData.code = data.code.trim().toUpperCase().replace(/\s+/g, '_');
+    if (data.departmentId !== undefined) updateData.departmentId = data.departmentId;
+    if (data.level !== undefined) updateData.level = data.level;
+    if (data.description !== undefined) updateData.description = data.description;
+    if (data.isActive !== undefined) updateData.isActive = data.isActive;
+
+    return prisma.position.update({
       where: { id: positionId },
-      data: {
+      data: updateData,
-        title: finalTitle,
+      include: {
-        titleAr: nextTitleAr ? nextTitleAr : null,
+        department: { select: { name: true, nameAr: true } },
+        permissions: true,
       },
     });
-
-    await AuditLogger.log({
-      entityType: 'POSITION',
-      entityId: positionId,
-      action: 'UPDATE',
-      userId: updatedById,
-      changes: {
-        before: { title: existing.title, titleAr: existing.titleAr },
-        after: { title: updated.title, titleAr: updated.titleAr },
-      },
-    });
-
-    const all = await this.getPositions();
-    return all.find((p: any) => p.id === positionId) || updated;
   }
 
   async updatePositionPermissions(positionId: string, permissions: Array<{ module: string; resource: string; actions: string[] }>) {
@@ -554,57 +523,116 @@ class AdminService {
       });
     }
 
-    return this.getPositions().then((pos: any) => pos.find((p: any) => p.id === positionId) || position);
+    return this.getPositions().then((pos) => pos.find((p) => p.id === positionId) || position);
   }
 
-  /**
+  // ========== PERMISSION GROUPS (Phase 3 - optional roles for multi-group) ==========
-   * Soft delete a role (Position).
+
-   * - Prevent deletion if the position is assigned to any employees.
+  async getPermissionGroups() {
-   * - Clean up position permissions.
+    return prisma.role.findMany({
-   */
+      where: { isActive: true },
-  async deletePosition(positionId: string, deletedById: string) {
-    const position = await prisma.position.findUnique({
-      where: { id: positionId },
       include: {
-        _count: { select: { employees: true } },
+        permissions: true,
+        _count: { select: { userRoles: true } },
+      },
+      orderBy: { name: 'asc' },
+    });
+  }
+
+  async createPermissionGroup(data: { name: string; nameAr?: string; description?: string }) {
+    const existing = await prisma.role.findUnique({ where: { name: data.name } });
+    if (existing) {
+      throw new AppError(400, 'اسم المجموعة مستخدم - Group name already exists');
+    }
+    return prisma.role.create({
+      data: {
+        name: data.name,
+        nameAr: data.nameAr,
+        description: data.description,
+      },
+      include: { permissions: true },
+    });
+  }
+
+  async updatePermissionGroup(
+    id: string,
+    data: { name?: string; nameAr?: string; description?: string; isActive?: boolean }
+  ) {
+    const role = await prisma.role.findUnique({ where: { id } });
+    if (!role) {
+      throw new AppError(404, 'المجموعة غير موجودة - Group not found');
+    }
+    if (data.name && data.name !== role.name) {
+      const existing = await prisma.role.findUnique({ where: { name: data.name } });
+      if (existing) {
+        throw new AppError(400, 'اسم المجموعة مستخدم - Group name already exists');
+      }
+    }
+    return prisma.role.update({
+      where: { id },
+      data,
+      include: { permissions: true },
+    });
+  }
+
+  async updatePermissionGroupPermissions(
+    roleId: string,
+    permissions: Array<{ module: string; resource: string; actions: string[] }>
+  ) {
+    await prisma.rolePermission.deleteMany({ where: { roleId } });
+    if (permissions.length > 0) {
+      await prisma.rolePermission.createMany({
+        data: permissions.map((p) => ({
+          roleId,
+          module: p.module,
+          resource: p.resource,
+          actions: p.actions,
+        })),
+      });
+    }
+    return prisma.role.findUnique({
+      where: { id: roleId },
+      include: { permissions: true },
+    });
+  }
+
+  async getUserRoles(userId: string) {
+    return prisma.userRole.findMany({
+      where: { userId },
+      include: {
+        role: { include: { permissions: true } },
       },
     });
+  }
 
-    if (!position) {
+  async assignUserRole(userId: string, roleId: string) {
-      throw new AppError(404, 'الدور غير موجود - Position not found');
+    const [user, role] = await Promise.all([
+      prisma.user.findUnique({ where: { id: userId } }),
+      prisma.role.findFirst({ where: { id: roleId, isActive: true } }),
+    ]);
+    if (!user) throw new AppError(404, 'المستخدم غير موجود - User not found');
+    if (!role) throw new AppError(404, 'المجموعة غير موجودة - Group not found');
+
+    const existing = await prisma.userRole.findUnique({
+      where: { userId_roleId: { userId, roleId } },
+    });
+    if (existing) {
+      throw new AppError(400, 'المستخدم منتمي بالفعل لهذه المجموعة - User already in group');
     }
 
-    if (position._count.employees > 0) {
+    return prisma.userRole.create({
-      throw new AppError(
+      data: { userId, roleId },
-        400,
+      include: { role: true },
-        'لا يمكن حذف هذا الدور لأنه مرتبط بموظفين. قم بتغيير دور الموظفين أولاً - Cannot delete: position is assigned to employees'
+    });
-      );
+  }
+
+  async removeUserRole(userId: string, roleId: string) {
+    const deleted = await prisma.userRole.deleteMany({
+      where: { userId, roleId },
+    });
+    if (deleted.count === 0) {
+      throw new AppError(404, 'لم يتم العثور على الانتماء - User not in group');
     }
-
-    // Soft delete the position
-    await prisma.position.update({
-      where: { id: positionId },
-      data: { isActive: false },
-    });
-
-    // Clean up permissions linked to this position
-    await prisma.positionPermission.deleteMany({
-      where: { positionId },
-    });
-
-    await AuditLogger.log({
-      entityType: 'POSITION',
-      entityId: positionId,
-      action: 'DELETE',
-      userId: deletedById,
-      changes: {
-        softDeleted: true,
-        title: position.title,
-        titleAr: position.titleAr,
-        code: position.code,
-      },
-    });
-
     return { success: true };
   }
 }

backend/src/modules/dashboard/dashboard.controller.ts

@@ -0,0 +1,35 @@
+import { Response } from 'express';
+import prisma from '../../config/database';
+import { AuthRequest } from '../../shared/middleware/auth';
+import { ResponseFormatter } from '../../shared/utils/responseFormatter';
+
+class DashboardController {
+  async getStats(req: AuthRequest, res: Response) {
+    const userId = req.user!.id;
+
+    const [contactsCount, activeTasksCount, unreadNotificationsCount] = await Promise.all([
+      prisma.contact.count(),
+      prisma.task.count({
+        where: {
+          status: { notIn: ['COMPLETED', 'CANCELLED'] },
+        },
+      }),
+      prisma.notification.count({
+        where: {
+          userId,
+          isRead: false,
+        },
+      }),
+    ]);
+
+    res.json(
+      ResponseFormatter.success({
+        contacts: contactsCount,
+        activeTasks: activeTasksCount,
+        notifications: unreadNotificationsCount,
+      })
+    );
+  }
+}
+
+export default new DashboardController();

backend/src/modules/dashboard/dashboard.routes.ts

@@ -0,0 +1,9 @@
+import { Router } from 'express';
+import { authenticate } from '../../shared/middleware/auth';
+import dashboardController from './dashboard.controller';
+
+const router = Router();
+
+router.get('/stats', authenticate, dashboardController.getStats.bind(dashboardController));
+
+export default router;

backend/src/modules/hr/hr.controller.ts

@@ -19,14 +19,20 @@ export class HRController {
 
   async findAllEmployees(req: AuthRequest, res: Response, next: NextFunction) {
     try {
-      const page = parseInt(req.query.page as string) || 1;
+      const rawPage = parseInt(req.query.page as string, 10);
-      const pageSize = parseInt(req.query.pageSize as string) || 20;
+      const rawPageSize = parseInt(req.query.pageSize as string, 10);
+      const page = Number.isNaN(rawPage) || rawPage < 1 ? 1 : rawPage;
+      const pageSize = Number.isNaN(rawPageSize) || rawPageSize < 1 || rawPageSize > 100 ? 20 : rawPageSize;
 
-      const filters = {
+      const rawSearch = req.query.search as string;
-        search: req.query.search,
+      const rawDepartmentId = req.query.departmentId as string;
-        departmentId: req.query.departmentId,
+      const rawStatus = req.query.status as string;
-        status: req.query.status,
+      const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-      };
+
+      const filters: Record<string, string | undefined> = {};
+      if (rawSearch && typeof rawSearch === 'string' && rawSearch.trim()) filters.search = rawSearch.trim();
+      if (rawDepartmentId && uuidRegex.test(rawDepartmentId)) filters.departmentId = rawDepartmentId;
+      if (rawStatus && rawStatus !== 'all' && rawStatus.trim()) filters.status = rawStatus;
 
       const result = await hrService.findAllEmployees(filters, page, pageSize);
       res.json(ResponseFormatter.paginated(result.employees, result.total, result.page, result.pageSize));
@@ -135,6 +141,42 @@ export class HRController {
     }
   }
 
+  async getDepartmentsHierarchy(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const tree = await hrService.getDepartmentsHierarchy();
+      res.json(ResponseFormatter.success(tree));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async createDepartment(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const department = await hrService.createDepartment(req.body, req.user!.id);
+      res.status(201).json(ResponseFormatter.success(department, 'تم إضافة القسم بنجاح - Department created'));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async updateDepartment(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      const department = await hrService.updateDepartment(req.params.id, req.body, req.user!.id);
+      res.json(ResponseFormatter.success(department, 'تم تحديث القسم - Department updated'));
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  async deleteDepartment(req: AuthRequest, res: Response, next: NextFunction) {
+    try {
+      await hrService.deleteDepartment(req.params.id, req.user!.id);
+      res.json(ResponseFormatter.success({ success: true }, 'تم حذف القسم - Department deleted'));
+    } catch (error) {
+      next(error);
+    }
+  }
+
   // ========== POSITIONS ==========
   
   async findAllPositions(req: AuthRequest, res: Response, next: NextFunction) {

backend/src/modules/hr/hr.routes.ts

@@ -32,6 +32,10 @@ router.post('/salaries/process', authorize('hr', 'salaries', 'process'), hrContr
 // ========== DEPARTMENTS ==========
 
 router.get('/departments', authorize('hr', 'all', 'read'), hrController.findAllDepartments);
+router.get('/departments/hierarchy', authorize('hr', 'all', 'read'), hrController.getDepartmentsHierarchy);
+router.post('/departments', authorize('hr', 'all', 'create'), hrController.createDepartment);
+router.put('/departments/:id', authorize('hr', 'all', 'update'), hrController.updateDepartment);
+router.delete('/departments/:id', authorize('hr', 'all', 'delete'), hrController.deleteDepartment);
 
 // ========== POSITIONS ==========
 

backend/src/modules/hr/hr.service.ts

@@ -5,14 +5,52 @@ import { AuditLogger } from '../../shared/utils/auditLogger';
 class HRService {
   // ========== EMPLOYEES ==========
   
+  private normalizeEmployeeData(data: any): Record<string, any> {
+    const toStr = (v: any) => (v != null && String(v).trim()) ? String(v).trim() : undefined;
+    const toDate = (v: any) => {
+      if (!v || !String(v).trim()) return undefined;
+      const d = new Date(v);
+      return isNaN(d.getTime()) ? undefined : d;
+    };
+    const toNum = (v: any) => (v != null && v !== '') ? Number(v) : undefined;
+
+    const raw: Record<string, any> = {
+      firstName: toStr(data.firstName),
+      lastName: toStr(data.lastName),
+      firstNameAr: toStr(data.firstNameAr),
+      lastNameAr: toStr(data.lastNameAr),
+      email: toStr(data.email),
+      phone: toStr(data.phone),
+      mobile: toStr(data.mobile),
+      dateOfBirth: toDate(data.dateOfBirth),
+      gender: toStr(data.gender),
+      nationality: toStr(data.nationality),
+      nationalId: toStr(data.nationalId),
+      employmentType: toStr(data.employmentType),
+      contractType: toStr(data.contractType),
+      hireDate: toDate(data.hireDate),
+      departmentId: toStr(data.departmentId),
+      positionId: toStr(data.positionId),
+      reportingToId: toStr(data.reportingToId) || undefined,
+      basicSalary: toNum(data.baseSalary ?? data.basicSalary) ?? 0,
+    };
+    return Object.fromEntries(Object.entries(raw).filter(([, v]) => v !== undefined));
+  }
+
   async createEmployee(data: any, userId: string) {
     const uniqueEmployeeId = await this.generateEmployeeId();
+    const payload = this.normalizeEmployeeData(data);
+
+    if (!payload.firstName || !payload.lastName || !payload.email || !payload.mobile ||
+        !payload.hireDate || !payload.departmentId || !payload.positionId) {
+      throw new AppError(400, 'بيانات غير مكتملة - Missing required fields: firstName, lastName, email, mobile, hireDate, departmentId, positionId');
+    }
 
     const employee = await prisma.employee.create({
       data: {
         uniqueEmployeeId,
-        ...data,
+        ...payload,
-      },
+      } as any,
       include: {
         department: true,
         position: true,
@@ -132,9 +170,10 @@ class HRService {
       throw new AppError(404, 'الموظف غير موجود - Employee not found');
     }
 
+    const payload = this.normalizeEmployeeData(data);
     const employee = await prisma.employee.update({
       where: { id },
-      data,
+      data: payload,
       include: {
         department: true,
         position: true,
@@ -383,11 +422,112 @@ class HRService {
   async findAllDepartments() {
     const departments = await prisma.department.findMany({
       where: { isActive: true },
+      include: {
+        parent: { select: { id: true, name: true, nameAr: true } },
+        _count: { select: { children: true, employees: true } }
+      },
       orderBy: { name: 'asc' }
     });
     return departments;
   }
 
+  async getDepartmentsHierarchy() {
+    const departments = await prisma.department.findMany({
+      where: { isActive: true },
+      include: {
+        parent: { select: { id: true, name: true, nameAr: true } },
+        employees: { 
+          where: { status: 'ACTIVE' },
+          select: { id: true, firstName: true, lastName: true, firstNameAr: true, lastNameAr: true, position: { select: { title: true, titleAr: true } } }
+        },
+        positions: { select: { id: true, title: true, titleAr: true } },
+        _count: { select: { children: true, employees: true } }
+      },
+      orderBy: { name: 'asc' }
+    });
+    const buildTree = (parentId: string | null): any[] =>
+      departments
+        .filter((d) => d.parentId === parentId)
+        .map((d) => ({
+          id: d.id,
+          name: d.name,
+          nameAr: d.nameAr,
+          code: d.code,
+          parentId: d.parentId,
+          description: d.description,
+          employees: d.employees,
+          positions: d.positions,
+          _count: d._count,
+          children: buildTree(d.id)
+        }));
+    return buildTree(null);
+  }
+
+  async createDepartment(data: { name: string; nameAr?: string; code: string; parentId?: string; description?: string }, userId: string) {
+    const existing = await prisma.department.findUnique({ where: { code: data.code } });
+    if (existing) {
+      throw new AppError(400, 'كود القسم مستخدم مسبقاً - Department code already exists');
+    }
+    if (data.parentId) {
+      const parent = await prisma.department.findUnique({ where: { id: data.parentId } });
+      if (!parent) {
+        throw new AppError(400, 'القسم الأب غير موجود - Parent department not found');
+      }
+    }
+    const department = await prisma.department.create({
+      data: {
+        name: data.name,
+        nameAr: data.nameAr,
+        code: data.code,
+        parentId: data.parentId || null,
+        description: data.description
+      }
+    });
+    await AuditLogger.log({ entityType: 'DEPARTMENT', entityId: department.id, action: 'CREATE', userId, changes: { created: department } });
+    return department;
+  }
+
+  async updateDepartment(id: string, data: { name?: string; nameAr?: string; code?: string; parentId?: string; description?: string; isActive?: boolean }, userId: string) {
+    const existing = await prisma.department.findUnique({ where: { id } });
+    if (!existing) {
+      throw new AppError(404, 'القسم غير موجود - Department not found');
+    }
+    if (data.code && data.code !== existing.code) {
+      const duplicate = await prisma.department.findUnique({ where: { code: data.code } });
+      if (duplicate) {
+        throw new AppError(400, 'كود القسم مستخدم مسبقاً - Department code already exists');
+      }
+    }
+    if (data.parentId === id) {
+      throw new AppError(400, 'لا يمكن تعيين القسم كأب لنفسه - Department cannot be its own parent');
+    }
+    const department = await prisma.department.update({
+      where: { id },
+      data: { name: data.name, nameAr: data.nameAr, code: data.code, parentId: data.parentId ?? undefined, description: data.description, isActive: data.isActive }
+    });
+    await AuditLogger.log({ entityType: 'DEPARTMENT', entityId: id, action: 'UPDATE', userId, changes: { before: existing, after: department } });
+    return department;
+  }
+
+  async deleteDepartment(id: string, userId: string) {
+    const dept = await prisma.department.findUnique({
+      where: { id },
+      include: { _count: { select: { children: true, employees: true } } }
+    });
+    if (!dept) {
+      throw new AppError(404, 'القسم غير موجود - Department not found');
+    }
+    if (dept._count.children > 0) {
+      throw new AppError(400, 'لا يمكن حذف قسم يحتوي على أقسام فرعية - Cannot delete department with sub-departments');
+    }
+    if (dept._count.employees > 0) {
+      throw new AppError(400, 'لا يمكن حذف قسم فيه موظفون - Cannot delete department with employees');
+    }
+    await prisma.department.delete({ where: { id } });
+    await AuditLogger.log({ entityType: 'DEPARTMENT', entityId: id, action: 'DELETE', userId });
+    return { success: true };
+  }
+
   // ========== POSITIONS ==========
   
   async findAllPositions() {

backend/src/routes/index.ts

@@ -3,6 +3,7 @@ import adminRoutes from '../modules/admin/admin.routes';
 import authRoutes from '../modules/auth/auth.routes';
 import contactsRoutes from '../modules/contacts/contacts.routes';
 import crmRoutes from '../modules/crm/crm.routes';
+import dashboardRoutes from '../modules/dashboard/dashboard.routes';
 import hrRoutes from '../modules/hr/hr.routes';
 import inventoryRoutes from '../modules/inventory/inventory.routes';
 import projectsRoutes from '../modules/projects/projects.routes';
@@ -12,6 +13,7 @@ const router = Router();
 
 // Module routes
 router.use('/admin', adminRoutes);
+router.use('/dashboard', dashboardRoutes);
 router.use('/auth', authRoutes);
 router.use('/contacts', contactsRoutes);
 router.use('/crm', crmRoutes);

backend/src/shared/middleware/auth.ts

@@ -4,12 +4,47 @@ import { config } from '../../config';
 import { AppError } from './errorHandler';
 import prisma from '../../config/database';
 
+export interface EffectivePermission {
+  module: string;
+  resource: string;
+  actions: string[];
+}
+
+function mergePermissions(
+  positionPerms: { module: string; resource: string; actions: unknown }[],
+  rolePerms: { module: string; resource: string; actions: unknown }[]
+): EffectivePermission[] {
+  const key = (m: string, r: string) => `${m}:${r}`;
+  const map = new Map<string, Set<string>>();
+
+  const add = (m: string, r: string, actions: unknown) => {
+    const arr = Array.isArray(actions) ? actions : [];
+    const actionSet = new Set<string>(arr.map(String));
+    const k = key(m, r);
+    const existing = map.get(k);
+    if (existing) {
+      actionSet.forEach((a) => existing.add(a));
+    } else {
+      map.set(k, actionSet);
+    }
+  };
+
+  (positionPerms || []).forEach((p) => add(p.module, p.resource, p.actions));
+  (rolePerms || []).forEach((p) => add(p.module, p.resource, p.actions));
+
+  return Array.from(map.entries()).map(([k, actions]) => {
+    const [module, resource] = k.split(':');
+    return { module, resource, actions: Array.from(actions) };
+  });
+}
+
 export interface AuthRequest extends Request {
   user?: {
     id: string;
     email: string;
     employeeId?: string;
     employee?: any;
+    effectivePermissions?: EffectivePermission[];
   };
 }
 
@@ -33,7 +68,7 @@ export const authenticate = async (
       email: string;
     };
 
-    // Get user with employee info
+    // Get user with employee + roles (Phase 3: multi-group)
     const user = await prisma.user.findUnique({
       where: { id: decoded.id },
       include: {
@@ -47,6 +82,14 @@ export const authenticate = async (
             department: true,
           },
         },
+        userRoles: {
+          where: { role: { isActive: true } },
+          include: {
+            role: {
+              include: { permissions: true },
+            },
+          },
+        },
       },
     });
 
@@ -59,12 +102,18 @@ export const authenticate = async (
       throw new AppError(403, 'الوصول مرفوض - Access denied. Active employee record required.');
     }
 
-    // Attach user to request
+    const positionPerms = user.employee?.position?.permissions ?? [];
+    const rolePerms = (user as any).userRoles?.flatMap(
+      (ur: any) => ur.role?.permissions ?? []
+    ) ?? [];
+    const effectivePermissions = mergePermissions(positionPerms, rolePerms);
+
     req.user = {
       id: user.id,
       email: user.email,
       employeeId: user.employeeId || undefined,
       employee: user.employee,
+      effectivePermissions,
     };
 
     next();
@@ -76,25 +125,24 @@ export const authenticate = async (
   }
 };
 
-// Permission checking middleware
+// Permission checking middleware (Position + Role permissions merged)
 export const authorize = (module: string, resource: string, action: string) => {
   return async (req: AuthRequest, res: Response, next: NextFunction) => {
     try {
-      if (!req.user?.employee?.position?.permissions) {
+      const perms = req.user?.effectivePermissions;
+      if (!perms || perms.length === 0) {
         throw new AppError(403, 'الوصول مرفوض - Access denied');
       }
 
-      // Find permission for this module and resource (check exact match or wildcard)
+      const permission = perms.find(
-      const permission = req.user.employee.position.permissions.find(
+        (p) => p.module === module && (p.resource === resource || p.resource === '*' || p.resource === 'all')
-        (p: any) => p.module === module && (p.resource === resource || p.resource === '*' || p.resource === 'all')
       );
 
       if (!permission) {
         throw new AppError(403, 'الوصول مرفوض - Access denied');
       }
 
-      // Check if action is allowed (check exact match or wildcard)
+      const actions = permission.actions;
-      const actions = permission.actions as string[];
       if (!actions.includes(action) && !actions.includes('*') && !actions.includes('all')) {
         throw new AppError(403, 'الوصول مرفوض - Access denied');
       }

backend/src/shared/middleware/errorHandler.ts

@@ -40,10 +40,12 @@ export const errorHandler = (
 
   // Handle validation errors
   if (err instanceof Prisma.PrismaClientValidationError) {
+    const detail = process.env.NODE_ENV !== 'production' ? err.message : undefined;
     return res.status(400).json({
       success: false,
       message: 'بيانات غير صالحة - Invalid data',
       error: 'VALIDATION_ERROR',
+      ...(detail && { detail }),
     });
   }
 

docs/PRODUCTION_DATABASE_CLEANUP.md

@@ -5,8 +5,8 @@
 Clean the production database so you can load **new real data** that will reflect across the system at all levels. This removes existing (e.g. test/demo) data and leaves the database in a state where:
 
 - Schema and migrations are unchanged
-- Base configuration is restored (pipelines, categories, departments, roles, default users)
+- One System Administrator user remains for configuration
-- All business data (contacts, deals, quotes, projects, etc.) is removed so you can enter new real data
+- All business data (contacts, deals, quotes, projects, etc.) is removed so you can enter new real data manually
 
 ## ⚠️ Important
 
@@ -21,7 +21,7 @@ Clean the production database so you can load **new real data** that will reflec
 This truncates all tables and then runs the seed so you get:
 
 - Empty business data (contacts, deals, quotes, projects, inventory, etc.)
-- Restored base data: departments, positions, permissions, employees, users, contact categories, product categories, pipelines, one warehouse
+- One System Administrator user (admin@system.local) with full access to all modules
 
 ### Steps on production server
 
@@ -87,19 +87,17 @@ All rows are removed from every table, including:
 - Audit logs, notifications, approvals
 - Users, employees, departments, positions, permissions
 
-Then the **seed** recreates only the base data (users, departments, positions, permissions, employees, contact/product categories, pipelines, one warehouse).
+Then the **seed** recreates only the base data (one System Administrator user with full access). No categories, pipelines, or warehouses—you configure these manually.
 
 ---
 
-## Default users after re-seed
+## Default user after re-seed
 
-| Role              | Email                   | Password  | Access        |
+| Role              | Email                | Password  | Access      |
-|-------------------|--------------------------|-----------|---------------|
+|-------------------|----------------------|-----------|-------------|
-| General Manager   | gm@atmata.com            | Admin@123 | Full system   |
+| System Administrator | admin@system.local | Admin@123 | Full system |
-| Sales Manager     | sales.manager@atmata.com | Admin@123 | Contacts, CRM |
-| Sales Representative | sales.rep@atmata.com   | Admin@123 | Basic CRM     |
 
-Change these passwords after first login in production.
+Change the password after first login in production.
 
 ---
 

frontend/src/app/admin/audit-logs/page.tsx

@@ -43,8 +43,8 @@ export default function AuditLogs() {
     fetchLogs();
   }, [fetchLogs]);
 
-  const formatDate = (d: string) =>
+  const formatDate = (d: string | null | undefined) =>
-    new Date(d).toLocaleString('ar-SA', { dateStyle: 'medium', timeStyle: 'short' });
+    d ? new Date(d).toLocaleString('ar-SA', { dateStyle: 'medium', timeStyle: 'short' }) : '-';
 
   const getActionLabel = (a: string) => {
     const labels: Record<string, string> = {

frontend/src/app/admin/layout.tsx

@@ -7,6 +7,7 @@ import { usePathname } from 'next/navigation'
 import {
   Users,
   Shield,
+  UsersRound,
   Database,
   Settings,
   FileText,
@@ -16,8 +17,7 @@ import {
   Clock,
   Building2,
   LogOut,
-  LayoutDashboard,
+  LayoutDashboard
-  Users2
 } from 'lucide-react'
 
 function AdminLayoutContent({ children }: { children: React.ReactNode }) {
@@ -28,7 +28,7 @@ function AdminLayoutContent({ children }: { children: React.ReactNode }) {
     { icon: LayoutDashboard, label: 'لوحة التحكم', href: '/admin', exact: true },
     { icon: Users, label: 'إدارة المستخدمين', href: '/admin/users' },
     { icon: Shield, label: 'الأدوار والصلاحيات', href: '/admin/roles' },
-    { icon: Users2, label: 'مجموعات الصلاحيات', href: '/admin/permission-groups' },
+    { icon: UsersRound, label: 'مجموعات الصلاحيات', href: '/admin/permission-groups' },
     { icon: Database, label: 'النسخ الاحتياطي', href: '/admin/backup' },
     { icon: Settings, label: 'إعدادات النظام', href: '/admin/settings' },
     { icon: FileText, label: 'سجل العمليات', href: '/admin/audit-logs' },

frontend/src/app/admin/page.tsx

@@ -50,7 +50,8 @@ export default function AdminDashboard() {
     return labels[a] || a;
   };
 
-  const formatTime = (d: string) => {
+  const formatTime = (d: string | null | undefined) => {
+    if (!d) return '-';
     const diff = Date.now() - new Date(d).getTime();
     const mins = Math.floor(diff / 60000);
     const hours = Math.floor(diff / 3600000);

frontend/src/app/admin/permission-groups/page.tsx

@@ -1,259 +1,371 @@
-'use client'
+'use client';
 
-import { useEffect, useMemo, useState } from 'react'
+import { useState, useEffect, useCallback } from 'react';
-import { Plus, Edit, Trash2, Users2 } from 'lucide-react'
+import { UsersRound, Edit, Users, Check, X, Plus } from 'lucide-react';
-import Modal from '@/components/Modal'
+import { permissionGroupsAPI } from '@/lib/api/admin';
-
+import type { PermissionGroup } from '@/lib/api/admin';
-type PermissionGroup = {
+import Modal from '@/components/Modal';
-  id: string
+import LoadingSpinner from '@/components/LoadingSpinner';
-  name: string
-  nameAr?: string
-  modules: string[]
-  createdAt: string
-}
 
 const MODULES = [
-  { id: 'contacts', name: 'إدارة جهات الاتصال' },
+  { id: 'contacts', name: 'إدارة جهات الاتصال', nameEn: 'Contact Management' },
-  { id: 'crm', name: 'إدارة علاقات العملاء' },
+  { id: 'crm', name: 'إدارة علاقات العملاء', nameEn: 'CRM' },
-  { id: 'inventory', name: 'المخزون والأصول' },
+  { id: 'inventory', name: 'المخزون والأصول', nameEn: 'Inventory & Assets' },
-  { id: 'projects', name: 'المهام والمشاريع' },
+  { id: 'projects', name: 'المهام والمشاريع', nameEn: 'Tasks & Projects' },
-  { id: 'hr', name: 'الموارد البشرية' },
+  { id: 'hr', name: 'الموارد البشرية', nameEn: 'HR Management' },
-  { id: 'marketing', name: 'التسويق' },
+  { id: 'marketing', name: 'التسويق', nameEn: 'Marketing' },
-  { id: 'admin', name: 'لوحة الإدارة' },
+  { id: 'admin', name: 'لوحة الإدارة', nameEn: 'Admin' },
-]
+];
 
-const STORAGE_KEY = 'permissionGroups'
+const ACTIONS = [
+  { id: 'read', name: 'عرض' },
+  { id: 'create', name: 'إنشاء' },
+  { id: 'update', name: 'تعديل' },
+  { id: 'delete', name: 'حذف' },
+  { id: 'export', name: 'تصدير' },
+  { id: 'approve', name: 'اعتماد' },
+  { id: 'merge', name: 'دمج' },
+];
+
+function hasAction(perm: { actions?: unknown } | undefined, action: string): boolean {
+  if (!perm?.actions) return false;
+  const actions = Array.isArray(perm.actions) ? perm.actions : [];
+  return actions.includes('*') || actions.includes('all') || actions.includes(action);
+}
+
+function buildPermissionsFromMatrix(matrix: Record<string, Record<string, boolean>>) {
+  return MODULES.filter((m) => Object.values(matrix[m.id] || {}).some(Boolean)).map((m) => {
+    const actions = ACTIONS.filter((a) => matrix[m.id]?.[a.id]).map((a) => a.id);
+    return {
+      module: m.id,
+      resource: '*',
+      actions: actions.length === ACTIONS.length ? ['*'] : actions,
+    };
+  });
+}
+
+function buildMatrixFromPermissions(permissions: { module: string; resource: string; actions: string[] }[]) {
+  const matrix: Record<string, Record<string, boolean>> = {};
+  for (const m of MODULES) {
+    matrix[m.id] = {};
+    const perm = permissions.find((p) => p.module === m.id && (p.resource === '*' || p.resource === m.id));
+    const hasAll = perm && (Array.isArray(perm.actions)
+      ? perm.actions.includes('*') || perm.actions.includes('all')
+      : false);
+    for (const a of ACTIONS) {
+      matrix[m.id][a.id] = hasAll || hasAction(perm, a.id);
+    }
+  }
+  return matrix;
+}
 
 export default function PermissionGroupsPage() {
-  const [groups, setGroups] = useState<PermissionGroup[]>([])
+  const [groups, setGroups] = useState<PermissionGroup[]>([]);
-  const [showModal, setShowModal] = useState(false)
+  const [loading, setLoading] = useState(true);
-  const [editing, setEditing] = useState<PermissionGroup | null>(null)
+  const [error, setError] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [createForm, setCreateForm] = useState({ name: '', nameAr: '', description: '' });
+  type PermissionMatrix = Record<string, Record<string, boolean>>;
+  const [permissionMatrix, setPermissionMatrix] = useState<PermissionMatrix>({});
+  const [saving, setSaving] = useState(false);
 
-  const [name, setName] = useState('')
+  const fetchGroups = useCallback(async () => {
-  const [nameAr, setNameAr] = useState('')
+    setLoading(true);
-  const [selectedModules, setSelectedModules] = useState<Record<string, boolean>>({})
+    setError(null);
+    try {
+      const list = await permissionGroupsAPI.getAll();
+      setGroups(list);
+      if (selectedId && !list.find((g) => g.id === selectedId)) setSelectedId(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'فشل تحميل المجموعات');
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedId]);
 
   useEffect(() => {
-    try {
+    fetchGroups();
-      const raw = localStorage.getItem(STORAGE_KEY)
+  }, [fetchGroups]);
-      if (raw) setGroups(JSON.parse(raw))
+
-    } catch {
+  const currentGroup = groups.find((g) => g.id === selectedId);
-      // ignore
-    }
-  }, [])
 
   useEffect(() => {
+    if (currentGroup) {
+      setPermissionMatrix(buildMatrixFromPermissions(currentGroup.permissions || []));
+    }
+  }, [currentGroup?.id, currentGroup?.permissions]);
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!createForm.name.trim()) {
+      alert('الاسم مطلوب');
+      return;
+    }
+    setSaving(true);
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(groups))
+      const group = await permissionGroupsAPI.create({
-    } catch {
+        name: createForm.name.trim(),
-      // ignore
+        nameAr: createForm.nameAr.trim() || undefined,
+        description: createForm.description.trim() || undefined,
+      });
+      setShowCreateModal(false);
+      setCreateForm({ name: '', nameAr: '', description: '' });
+      await fetchGroups();
+      setSelectedId(group.id);
+      setShowEditModal(true);
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : 'فشل الإنشاء');
+    } finally {
+      setSaving(false);
     }
-  }, [groups])
+  };
 
-  const baseModulesMap = useMemo(() => {
+  const handleSavePermissions = async () => {
-    const m: Record<string, boolean> = {}
+    if (!selectedId) return;
-    MODULES.forEach(x => (m[x.id] = false))
+    setSaving(true);
-    return m
+    try {
-  }, [])
+      const permissions = buildPermissionsFromMatrix(permissionMatrix);
-
+      await permissionGroupsAPI.updatePermissions(selectedId, permissions);
-  const openCreate = () => {
+      setShowEditModal(false);
-    setEditing(null)
+      fetchGroups();
-    setName('')
+    } catch (err: unknown) {
-    setNameAr('')
+      alert(err instanceof Error ? err.message : 'فشل الحفظ');
-    setSelectedModules({ ...baseModulesMap })
+    } finally {
-    setShowModal(true)
+      setSaving(false);
-  }
-
-  const openEdit = (g: PermissionGroup) => {
-    setEditing(g)
-    setName(g.name || '')
-    setNameAr(g.nameAr || '')
-    const m = { ...baseModulesMap }
-    g.modules.forEach(id => (m[id] = true))
-    setSelectedModules(m)
-    setShowModal(true)
-  }
-
-  const toggleModule = (id: string) => {
-    setSelectedModules(prev => ({ ...prev, [id]: !prev[id] }))
-  }
-
-  const save = () => {
-    const finalName = name.trim() || nameAr.trim()
-    if (!finalName) {
-      alert('الرجاء إدخال اسم المجموعة')
-      return
     }
+  };
 
-    const mods = Object.keys(selectedModules).filter(k => selectedModules[k])
+  const handleTogglePermission = (moduleId: string, actionId: string) => {
-    const now = new Date().toISOString()
+    setPermissionMatrix((prev) => ({
-
+      ...prev,
-    if (editing) {
+      [moduleId]: {
-      setGroups(prev =>
+        ...(prev[moduleId] || {}),
-        prev.map(g =>
+        [actionId]: !prev[moduleId]?.[actionId],
-          g.id === editing.id
+      },
-            ? { ...g, name: finalName, nameAr: nameAr.trim() || undefined, modules: mods }
+    }));
-            : g
+  };
-        )
-      )
-    } else {
-      const id = crypto?.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
-      setGroups(prev => [
-        { id, name: finalName, nameAr: nameAr.trim() || undefined, modules: mods, createdAt: now },
-        ...prev,
-      ])
-    }
-
-    setShowModal(false)
-  }
-
-  const remove = (g: PermissionGroup) => {
-    const ok = confirm(`هل أنت متأكد بحذف مجموعة الصلاحيات؟: ${g.nameAr || g.name} ؟`)
-    if (!ok) return
-    setGroups(prev => prev.filter(x => x.id !== g.id))
-  }
 
   return (
     <div>
       <div className="mb-8 flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold text-gray-900 mb-2">مجموعات الصلاحيات</h1>
-          <p className="text-gray-600">إدارة مجموعات لتجميع الوحدات بشكل أسرع</p>
+          <p className="text-gray-600">مجموعات اختيارية تضيف صلاحيات إضافية للمستخدمين بغض النظر عن وظائفهم</p>
         </div>
-
         <button
-          onClick={openCreate}
+          onClick={() => setShowCreateModal(true)}
-          className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-semibold"
+          className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all shadow-md"
         >
           <Plus className="h-5 w-5" />
-          إضافة مجموعة
+          <span className="font-semibold">إضافة مجموعة</span>
         </button>
       </div>
 
-      {groups.length === 0 ? (
+      {loading ? (
-        <div className="bg-white rounded-xl border border-gray-200 p-10 text-center">
+        <div className="flex justify-center p-12">
-          <Users2 className="h-14 w-14 text-gray-300 mx-auto mb-3" />
+          <LoadingSpinner />
-          <h3 className="text-lg font-bold text-gray-900 mb-1">لا توجد مجموعات</h3>
-          <p className="text-gray-600">قم بإضافة مجموعة صلاحيات لتسهيل إدارة الأدوار.</p>
         </div>
+      ) : error ? (
+        <div className="text-center text-red-600 p-12">{error}</div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {groups.map(g => (
+          <div className="lg:col-span-1 space-y-4">
-            <div key={g.id} className="bg-white rounded-xl border border-gray-200 p-5">
+            <h2 className="text-xl font-bold text-gray-900 mb-4">المجموعات ({groups.length})</h2>
-              <div className="flex items-start justify-between">
+            {groups.map((g) => (
-                <div>
+              <div
-                  <h3 className="font-bold text-gray-900">{g.nameAr || g.name}</h3>
+                key={g.id}
-                  <p className="text-xs text-gray-600">{g.name}</p>
+                onClick={() => setSelectedId(g.id)}
-                  <p className="text-sm text-gray-700 mt-3">
+                className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${
-                    الوحدات: <span className="font-semibold">{g.modules.length}</span>
+                  selectedId === g.id ? 'border-blue-600 bg-blue-50' : 'border-gray-200 bg-white hover:border-blue-300'
-                  </p>
+                }`}
+              >
+                <div className="flex items-center gap-3 mb-2">
+                  <div className={`p-2 rounded-lg ${selectedId === g.id ? 'bg-blue-600' : 'bg-blue-100'}`}>
+                    <UsersRound className={`h-5 w-5 ${selectedId === g.id ? 'text-white' : 'text-blue-600'}`} />
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-gray-900">{g.nameAr || g.name}</h3>
+                    <p className="text-xs text-gray-600">{g.name}</p>
+                  </div>
                 </div>
-
+                <div className="flex items-center justify-between">
-                <div className="flex gap-1">
+                  <span className="text-sm text-gray-600">
+                    <Users className="h-4 w-4 inline mr-1" />
+                    {g._count?.userRoles ?? 0} مستخدم
+                  </span>
                   <button
-                    onClick={() => openEdit(g)}
+                    onClick={(e) => {
-                    className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg"
+                      e.stopPropagation();
-                    title="تعديل"
+                      setSelectedId(g.id);
+                      setShowEditModal(true);
+                    }}
+                    className="p-1.5 text-blue-600 hover:bg-blue-50 rounded"
                   >
                     <Edit className="h-4 w-4" />
                   </button>
-                  <button
-                    onClick={() => remove(g)}
-                    className="p-2 text-red-600 hover:bg-red-50 rounded-lg"
-                    title="حذف"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
                 </div>
               </div>
+            ))}
+          </div>
 
-              <div className="mt-4 flex flex-wrap gap-2">
+          <div className="lg:col-span-2">
-                {g.modules.map(id => {
+            {currentGroup ? (
-                  const m = MODULES.find(x => x.id === id)
+              <div className="bg-white rounded-xl shadow-lg border p-6">
-                  return (
+                <div className="flex justify-between mb-6">
-                    <span key={id} className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-lg">
+                  <div>
-                      {m?.name || id}
+                    <h2 className="text-2xl font-bold text-gray-900">{currentGroup.nameAr || currentGroup.name}</h2>
-                    </span>
+                    <p className="text-gray-600">{currentGroup.name}</p>
-                  )
+                  </div>
-                })}
+                  <button
+                    onClick={() => setShowEditModal(true)}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+                  >
+                    تعديل الصلاحيات
+                  </button>
+                </div>
+                <h3 className="text-lg font-bold mb-4">مصفوفة الصلاحيات</h3>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b-2 border-gray-200">
+                        <th className="px-4 py-3 text-right text-sm font-bold min-w-[200px]">الوحدة</th>
+                        {ACTIONS.map((a) => (
+                          <th key={a.id} className="px-4 py-3 text-center text-sm font-bold">{a.name}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {MODULES.map((m) => (
+                        <tr key={m.id} className="hover:bg-gray-50">
+                          <td className="px-4 py-4">
+                            <p className="font-semibold">{m.name}</p>
+                            <p className="text-xs text-gray-600">{m.nameEn}</p>
+                          </td>
+                          {ACTIONS.map((a) => {
+                            const has = permissionMatrix[m.id]?.[a.id];
+                            return (
+                              <td key={a.id} className="px-4 py-4 text-center">
+                                <div
+                                  className={`w-10 h-10 rounded-lg flex items-center justify-center mx-auto ${
+                                    has ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-500'
+                                  }`}
+                                >
+                                  {has ? <Check className="h-6 w-6" /> : <X className="h-6 w-6" />}
+                                </div>
+                              </td>
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
               </div>
-            </div>
+            ) : (
-          ))}
+              <div className="bg-white rounded-xl shadow-lg border p-12 text-center">
+                <UsersRound className="h-16 w-16 text-gray-300 mx-auto mb-4" />
+                <h3 className="text-xl font-bold text-gray-900 mb-2">اختر مجموعة</h3>
+                <p className="text-gray-600">أو أنشئ مجموعة جديدة لإضافة صلاحيات اختيارية للمستخدمين</p>
+              </div>
+            )}
+          </div>
         </div>
       )}
 
-      <Modal
+      <Modal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} title="إضافة مجموعة صلاحيات" size="md">
-        isOpen={showModal}
+        <form onSubmit={handleCreate} className="space-y-4">
-        onClose={() => setShowModal(false)}
-        title={editing ? 'تعديل مجموعة الصلاحيات' : 'إضافة مجموعة صلاحيات'}
-        size="lg"
-      >
-        <div className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-sm font-semibold text-gray-700 mb-1">الاسم (English)</label>
-              <input
-                value={name}
-                onChange={e => setName(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                placeholder="e.g. Sales Group"
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-semibold text-gray-700 mb-1">الاسم (عربي)</label>
-              <input
-                value={nameAr}
-                onChange={e => setNameAr(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                placeholder="مثال: مجموعة المبيعات"
-              />
-            </div>
-          </div>
-
           <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">الوحدات ضمن المجموعة</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            <input
-              {MODULES.map(m => (
+              type="text"
-                <button
+              value={createForm.name}
-                  key={m.id}
+              onChange={(e) => setCreateForm((p) => ({ ...p, name: e.target.value }))}
-                  type="button"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
-                  onClick={() => toggleModule(m.id)}
+              placeholder="e.g. Campaign Approver"
-                  className={`flex items-center justify-between px-3 py-2 rounded-lg border ${
+            />
-                    selectedModules[m.id]
+          </div>
-                      ? 'border-green-500 bg-green-50'
+          <div>
-                      : 'border-gray-200 bg-white hover:bg-gray-50'
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name (Arabic)</label>
-                  }`}
+            <input
-                >
+              type="text"
-                  <span className="text-sm font-medium text-gray-800">{m.name}</span>
+              value={createForm.nameAr}
-                  <span
+              onChange={(e) => setCreateForm((p) => ({ ...p, nameAr: e.target.value }))}
-                    className={`text-xs px-2 py-0.5 rounded ${
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
-                      selectedModules[m.id] ? 'bg-green-600 text-white' : 'bg-gray-200 text-gray-700'
+            />
-                    }`}
+          </div>
-                  >
+          <div>
-                    {selectedModules[m.id] ? 'ضمن المجموعة' : 'غير محدد'}
+            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
-                  </span>
+            <textarea
-                </button>
+              value={createForm.description}
-              ))}
+              onChange={(e) => setCreateForm((p) => ({ ...p, description: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+              rows={2}
+            />
+          </div>
+          <div className="flex gap-3 justify-end pt-4">
+            <button type="button" onClick={() => setShowCreateModal(false)} className="px-6 py-3 border rounded-lg">
+              Cancel
+            </button>
+            <button type="submit" disabled={saving} className="px-6 py-3 bg-blue-600 text-white rounded-lg disabled:opacity-50">
+              {saving ? 'Creating...' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+        title={`تعديل صلاحيات: ${currentGroup?.nameAr || currentGroup?.name || ''}`}
+        size="2xl"
+      >
+        {currentGroup && (
+          <div>
+            <div className="overflow-x-auto mb-6">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b-2 border-gray-200">
+                    <th className="px-4 py-3 text-right text-sm font-bold">الوحدة</th>
+                    {ACTIONS.map((a) => (
+                      <th key={a.id} className="px-4 py-3 text-center text-sm font-bold">{a.name}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {MODULES.map((m) => (
+                    <tr key={m.id}>
+                      <td className="px-4 py-4 font-semibold">{m.name}</td>
+                      {ACTIONS.map((a) => (
+                        <td key={a.id} className="px-4 py-4 text-center">
+                          <button
+                            type="button"
+                            onClick={() => handleTogglePermission(m.id, a.id)}
+                            className={`w-10 h-10 rounded-lg flex items-center justify-center mx-auto ${
+                              permissionMatrix[m.id]?.[a.id] ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-500'
+                            }`}
+                          >
+                            {permissionMatrix[m.id]?.[a.id] ? <Check className="h-6 w-6" /> : <X className="h-6 w-6" />}
+                          </button>
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="flex gap-3 justify-end">
+              <button onClick={() => setShowEditModal(false)} className="px-6 py-3 border rounded-lg">
+                إلغاء
+              </button>
+              <button onClick={handleSavePermissions} disabled={saving} className="px-6 py-3 bg-blue-600 text-white rounded-lg disabled:opacity-50">
+                {saving ? 'جاري الحفظ...' : 'حفظ'}
+              </button>
             </div>
           </div>
-
+        )}
-          <div className="flex justify-end gap-3 pt-2">
-            <button
-              onClick={() => setShowModal(false)}
-              className="px-5 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
-            >
-              إلغاء
-            </button>
-            <button
-              onClick={save}
-              className="px-5 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-semibold"
-            >
-              حفظ
-            </button>
-          </div>
-        </div>
       </Modal>
     </div>
-  )
+  );
 }

frontend/src/app/admin/roles/page.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
-import { Shield, Edit, Trash2, Users, Check, X, Loader2, Plus } from 'lucide-react';
+import { Shield, Edit, Users, Check, X, Plus } from 'lucide-react';
 import { positionsAPI } from '@/lib/api/admin';
-import type { PositionRole, PositionPermission } from '@/lib/api/admin';
+import { departmentsAPI } from '@/lib/api/employees';
+import type { PositionRole, PositionPermission, CreatePositionData } from '@/lib/api/admin';
 import Modal from '@/components/Modal';
 import LoadingSpinner from '@/components/LoadingSpinner';
 
@@ -49,11 +50,9 @@ function buildMatrixFromPermissions(permissions: PositionPermission[]): Record<s
   for (const m of MODULES) {
     matrix[m.id] = {};
     const perm = permissions.find((p) => p.module === m.id && (p.resource === '*' || p.resource === m.id));
-    const hasAll =
+    const hasAll = perm && (Array.isArray(perm.actions)
-      perm &&
+      ? (perm.actions as string[]).includes('*') || (perm.actions as string[]).includes('all')
-      (Array.isArray(perm.actions)
+      : false);
-        ? (perm.actions as string[]).includes('*') || (perm.actions as string[]).includes('all')
-        : false);
     for (const a of ACTIONS) {
       matrix[m.id][a.id] = hasAll || hasAction(perm, a.id);
     }
@@ -61,33 +60,27 @@ function buildMatrixFromPermissions(permissions: PositionPermission[]): Record<s
   return matrix;
 }
 
+const initialCreateForm: CreatePositionData & { description?: string } = {
+  title: '',
+  titleAr: '',
+  code: '',
+  departmentId: '',
+  level: 5,
+  description: '',
+};
+
 export default function RolesManagement() {
   const [roles, setRoles] = useState<PositionRole[]>([]);
+  const [departments, setDepartments] = useState<{ id: string; name: string; nameAr?: string | null }[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-
   const [selectedRoleId, setSelectedRoleId] = useState<string | null>(null);
-
-  // Edit modal (name + permissions)
   const [showEditModal, setShowEditModal] = useState(false);
-  const [permissionMatrix, setPermissionMatrix] = useState<Record<string, Record<string, boolean>>>({});
-  const [editTitle, setEditTitle] = useState('');
-  const [editTitleAr, setEditTitleAr] = useState('');
-  const [saving, setSaving] = useState(false);
-
-  // Delete dialog
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [deleting, setDeleting] = useState(false);
-  const [roleToDelete, setRoleToDelete] = useState<PositionRole | null>(null);
-
-  // Create modal
   const [showCreateModal, setShowCreateModal] = useState(false);
-  const [creating, setCreating] = useState(false);
+  const [createForm, setCreateForm] = useState(initialCreateForm);
-  const [newTitle, setNewTitle] = useState('');
+  const [createErrors, setCreateErrors] = useState<Record<string, string>>({});
-  const [newTitleAr, setNewTitleAr] = useState('');
+  const [permissionMatrix, setPermissionMatrix] = useState<Record<string, Record<string, boolean>>>({});
-  const [newDepartmentId, setNewDepartmentId] = useState('');
+  const [saving, setSaving] = useState(false);
-  const [newLevel, setNewLevel] = useState<number>(1);
-  const [newCode, setNewCode] = useState('');
 
   const fetchRoles = useCallback(async () => {
     setLoading(true);
@@ -109,40 +102,49 @@ export default function RolesManagement() {
     fetchRoles();
   }, [fetchRoles]);
 
+  useEffect(() => {
+    departmentsAPI.getAll().then((depts) => setDepartments(depts)).catch(() => {});
+  }, []);
+
   const currentRole = roles.find((r) => r.id === selectedRoleId);
 
-  // build departments options from existing roles 
+  const handleCreateRole = async (e: React.FormEvent) => {
-  const departmentOptions = useMemo(() => {
+    e.preventDefault();
-    const map = new Map<string, { id: string; label: string }>();
+    const errs: Record<string, string> = {};
-    roles.forEach((r) => {
+    if (!createForm.title?.trim()) errs.title = 'Required';
-      if (!r.departmentId) return;
+    if (!createForm.code?.trim()) errs.code = 'Required';
-      const label = r.department?.nameAr || r.department?.name || r.departmentId;
+    if (!createForm.departmentId) errs.departmentId = 'Required';
-      if (!map.has(r.departmentId)) map.set(r.departmentId, { id: r.departmentId, label });
+    setCreateErrors(errs);
-    });
+    if (Object.keys(errs).length > 0) return;
-    return Array.from(map.values());
+
-  }, [roles]);
+    setSaving(true);
+    try {
+      const position = await positionsAPI.create({
+        title: createForm.title.trim(),
+        titleAr: createForm.titleAr?.trim() || undefined,
+        code: createForm.code.trim(),
+        departmentId: createForm.departmentId,
+        level: createForm.level ?? 5,
+        description: createForm.description?.trim() || undefined,
+      });
+      setShowCreateModal(false);
+      setCreateForm(initialCreateForm);
+      setCreateErrors({});
+      await fetchRoles();
+      setSelectedRoleId(position.id);
+      setShowEditModal(true);
+    } catch (err: unknown) {
+      setCreateErrors({ form: err instanceof Error ? err.message : 'Failed to create role' });
+    } finally {
+      setSaving(false);
+    }
+  };
 
   useEffect(() => {
     if (currentRole) {
       setPermissionMatrix(buildMatrixFromPermissions(currentRole.permissions || []));
-      setEditTitle(currentRole.title || '');
-      setEditTitleAr(currentRole.titleAr || '');
     }
-  }, [currentRole?.id]);
+  }, [currentRole?.id, currentRole?.permissions]);
-
-  useEffect(() => {
-    // default department when opening create
-    if (!showCreateModal) return;
-    const fallback =
-      (selectedRoleId && roles.find(r => r.id === selectedRoleId)?.departmentId) ||
-      departmentOptions[0]?.id ||
-      '';
-    setNewDepartmentId(fallback);
-    setNewLevel(1);
-    setNewCode('');
-    setNewTitle('');
-    setNewTitleAr('');
-  }, [showCreateModal, selectedRoleId, roles, departmentOptions]);
 
   const handleTogglePermission = (moduleId: string, actionId: string) => {
     setPermissionMatrix((prev) => ({
@@ -154,112 +156,21 @@ export default function RolesManagement() {
     }));
   };
 
-  const handleSaveRole = async () => {
+  const handleSavePermissions = async () => {
     if (!selectedRoleId) return;
-
-    const titleFinal = (editTitle || '').trim() || (editTitleAr || '').trim();
-    if (!titleFinal) {
-      alert('الرجاء إدخال اسم الدور');
-      return;
-    }
-
     setSaving(true);
     try {
-      // 1) update name (only if changed)
-      if (currentRole && (titleFinal !== currentRole.title || (editTitleAr || '') !== (currentRole.titleAr || ''))) {
-        await positionsAPI.update(selectedRoleId, {
-          title: titleFinal,
-          titleAr: (editTitleAr || '').trim() || null,
-        });
-      }
-
-      // 2) update permissions
       const permissions = buildPermissionsFromMatrix(permissionMatrix);
       await positionsAPI.updatePermissions(selectedRoleId, permissions);
-
       setShowEditModal(false);
-      await fetchRoles();
+      fetchRoles();
     } catch (err: unknown) {
-      const msg =
+      alert(err instanceof Error ? err.message : 'فشل حفظ الصلاحيات');
-        (err as any)?.response?.data?.message ||
-        (err as any)?.response?.data?.error ||
-        (err as any)?.message ||
-        'فشل حفظ التغييرات';
-      alert(msg);
     } finally {
       setSaving(false);
     }
   };
 
-  const openDeleteDialog = (role: PositionRole) => {
-    setRoleToDelete(role);
-    setShowDeleteDialog(true);
-  };
-
-  const handleDeleteRole = async () => {
-    if (!roleToDelete) return;
-    setDeleting(true);
-    try {
-      await positionsAPI.delete(roleToDelete.id);
-
-      if (selectedRoleId === roleToDelete.id) {
-        setSelectedRoleId(null);
-      }
-
-      setShowDeleteDialog(false);
-      setRoleToDelete(null);
-      await fetchRoles();
-    } catch (err: unknown) {
-      const msg =
-        (err as any)?.response?.data?.message ||
-        (err as any)?.response?.data?.error ||
-        (err as any)?.message ||
-        'فشل حذف الدور';
-      alert(msg);
-    } finally {
-      setDeleting(false);
-    }
-  };
-
-  const handleCreateRole = async () => {
-    const titleFinal = (newTitle || '').trim() || (newTitleAr || '').trim();
-    if (!titleFinal) {
-      alert('الرجاء إدخال اسم الدور');
-      return;
-    }
-    if (!newDepartmentId) {
-      alert('الرجاء اختيار قسم (Department)');
-      return;
-    }
-
-    setCreating(true);
-    try {
-      const created = await positionsAPI.create({
-        title: titleFinal,
-        titleAr: (newTitleAr || '').trim() || null,
-        departmentId: newDepartmentId,
-        level: Number.isFinite(newLevel) ? newLevel : 1,
-        code: (newCode || '').trim() || undefined,
-      });
-
-      setShowCreateModal(false);
-      await fetchRoles();
-
-      // select new role + open edit modal directly 
-      setSelectedRoleId(created.id);
-      setShowEditModal(true);
-    } catch (err: unknown) {
-      const msg =
-        (err as any)?.response?.data?.message ||
-        (err as any)?.response?.data?.error ||
-        (err as any)?.message ||
-        'فشل إنشاء الدور';
-      alert(msg);
-    } finally {
-      setCreating(false);
-    }
-  };
-
   const handleSelectRole = (id: string) => {
     setSelectedRoleId(id);
     setShowEditModal(false);
@@ -270,15 +181,14 @@ export default function RolesManagement() {
       <div className="mb-8 flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold text-gray-900 mb-2">الأدوار والصلاحيات</h1>
-          <p className="text-gray-600">إدارة أدوار المستخدمين و الصلاحيات</p>
+          <p className="text-gray-600">إدارة أدوار المستخدمين ومصفوفة الصلاحيات</p>
         </div>
-
         <button
           onClick={() => setShowCreateModal(true)}
-          className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-semibold"
+          className="flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-all shadow-md hover:shadow-lg"
         >
           <Plus className="h-5 w-5" />
-          إنشاء دور
+          <span className="font-semibold">إضافة دور</span>
         </button>
       </div>
 
@@ -306,8 +216,12 @@ export default function RolesManagement() {
               >
                 <div className="flex items-start justify-between mb-2">
                   <div className="flex items-center gap-3">
-                    <div className={`p-2 rounded-lg ${selectedRoleId === role.id ? 'bg-purple-600' : 'bg-purple-100'}`}>
+                    <div
-                      <Shield className={`h-5 w-5 ${selectedRoleId === role.id ? 'text-white' : 'text-purple-600'}`} />
+                      className={`p-2 rounded-lg ${selectedRoleId === role.id ? 'bg-purple-600' : 'bg-purple-100'}`}
+                    >
+                      <Shield
+                        className={`h-5 w-5 ${selectedRoleId === role.id ? 'text-white' : 'text-purple-600'}`}
+                      />
                     </div>
                     <div>
                       <h3 className="font-bold text-gray-900">{role.titleAr || role.title}</h3>
@@ -315,37 +229,21 @@ export default function RolesManagement() {
                     </div>
                   </div>
                 </div>
-
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2 text-sm text-gray-600">
                     <Users className="h-4 w-4" />
                     <span>{role.usersCount ?? role._count?.employees ?? 0} مستخدم</span>
                   </div>
-
+                  <button
-                  <div className="flex items-center gap-1">
+                    onClick={(e) => {
-                    <button
+                      e.stopPropagation();
-                      onClick={(e) => {
+                      setSelectedRoleId(role.id);
-                        e.stopPropagation();
+                      setShowEditModal(true);
-                        openDeleteDialog(role);
+                    }}
-                      }}
+                    className="p-1.5 text-blue-600 hover:bg-blue-50 rounded transition-colors"
-                      className="p-1.5 text-red-600 hover:bg-red-50 rounded transition-colors"
+                  >
-                      title="حذف"
+                    <Edit className="h-4 w-4" />
-                    >
+                  </button>
-                      <Trash2 className="h-4 w-4" />
-                    </button>
-
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setSelectedRoleId(role.id);
-                        setShowEditModal(true);
-                      }}
-                      className="p-1.5 text-blue-600 hover:bg-blue-50 rounded transition-colors"
-                      title="تعديل"
-                    >
-                      <Edit className="h-4 w-4" />
-                    </button>
-                  </div>
                 </div>
               </div>
             ))}
@@ -365,11 +263,10 @@ export default function RolesManagement() {
                       onClick={() => setShowEditModal(true)}
                       className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
                     >
-                      تعديل  
+                      تعديل الصلاحيات
                     </button>
                   </div>
                 </div>
-
                 <div className="p-6">
                   <h3 className="text-lg font-bold text-gray-900 mb-4">مصفوفة الصلاحيات</h3>
                   <div className="overflow-x-auto">
@@ -386,7 +283,6 @@ export default function RolesManagement() {
                           ))}
                         </tr>
                       </thead>
-
                       <tbody className="divide-y divide-gray-200">
                         {MODULES.map((module) => (
                           <tr key={module.id} className="hover:bg-gray-50 transition-colors">
@@ -396,14 +292,15 @@ export default function RolesManagement() {
                                 <p className="text-xs text-gray-600">{module.nameEn}</p>
                               </div>
                             </td>
-
                             {ACTIONS.map((action) => {
                               const hasPermission = permissionMatrix[module.id]?.[action.id];
                               return (
                                 <td key={action.id} className="px-4 py-4 text-center">
                                   <div
                                     className={`w-10 h-10 rounded-lg flex items-center justify-center transition-all mx-auto ${
-                                      hasPermission ? 'bg-green-500 text-white shadow-md' : 'bg-gray-200 text-gray-500'
+                                      hasPermission
+                                        ? 'bg-green-500 text-white shadow-md'
+                                        : 'bg-gray-200 text-gray-500'
                                     }`}
                                   >
                                     {hasPermission ? <Check className="h-6 w-6" /> : <X className="h-6 w-6" />}
@@ -432,189 +329,110 @@ export default function RolesManagement() {
       {/* Create Role Modal */}
       <Modal
         isOpen={showCreateModal}
-        onClose={() => setShowCreateModal(false)}
+        onClose={() => {
+          setShowCreateModal(false);
+          setCreateForm(initialCreateForm);
+          setCreateErrors({});
+        }}
         title="إضافة دور جديد"
-        size="lg"
+        size="md"
       >
-        <div className="space-y-4">
+        <form onSubmit={handleCreateRole} className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-sm font-semibold text-gray-700 mb-1">الاسم (English)</label>
-              <input
-                value={newTitle}
-                onChange={(e) => setNewTitle(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                placeholder="e.g. Sales representative"
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-semibold text-gray-700 mb-1">الاسم (عربي)</label>
-              <input
-                value={newTitleAr}
-                onChange={(e) => setNewTitleAr(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                placeholder="مثال: مستخدم عادي"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-            <div className="md:col-span-2">
-              <label className="block text-sm font-semibold text-gray-700 mb-1">القسم (Department)</label>
-              <select
-                value={newDepartmentId}
-                onChange={(e) => setNewDepartmentId(e.target.value)}
-                className="w-full border border-gray-300 rounded-lg px-3 py-2 bg-white"
-              >
-                {departmentOptions.length === 0 ? (
-                  <option value="">لا يوجد أقسام متاحة</option>
-                ) : (
-                  departmentOptions.map((d) => (
-                    <option key={d.id} value={d.id}>
-                      {d.label}
-                    </option>
-                  ))
-                )}
-              </select>
-              {departmentOptions.length === 0 && (
-                <p className="text-xs text-red-600 mt-1">
-                  لا يوجد أقسام ضمن البيانات الحالية. (DepartmentId مطلوب لإنشاء الدور)
-                </p>
-              )}
-            </div>
-
-            <div>
-              <label className="block text-sm font-semibold text-gray-700 mb-1">Level</label>
-              <input
-                type="number"
-                value={newLevel}
-                onChange={(e) => setNewLevel(parseInt(e.target.value || '1', 10))}
-                className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                min={1}
-              />
-            </div>
-          </div>
-
           <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-1">Code (اختياري)</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Title (English) *</label>
             <input
-              value={newCode}
+              type="text"
-              onChange={(e) => setNewCode(e.target.value)}
+              value={createForm.title}
-              className="w-full border border-gray-300 rounded-lg px-3 py-2"
+              onChange={(e) => setCreateForm((p) => ({ ...p, title: e.target.value }))}
-              placeholder="e.g. SALES_REP (في حال كان فارغاً سيقوم النظام بتوليده تلقائياً)"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+              placeholder="e.g. Sales Representative"
+            />
+            {createErrors.title && <p className="text-red-500 text-xs mt-1">{createErrors.title}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Title (Arabic)</label>
+            <input
+              type="text"
+              value={createForm.titleAr || ''}
+              onChange={(e) => setCreateForm((p) => ({ ...p, titleAr: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+              placeholder="مندوب مبيعات"
             />
           </div>
-
+          <div>
-          <div className="flex justify-end gap-3 pt-2">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Code *</label>
-            <button
+            <input
-              onClick={() => setShowCreateModal(false)}
+              type="text"
-              className="px-5 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
+              value={createForm.code}
-              disabled={creating}
+              onChange={(e) => setCreateForm((p) => ({ ...p, code: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+              placeholder="SALES_REP"
+            />
+            {createErrors.code && <p className="text-red-500 text-xs mt-1">{createErrors.code}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Department *</label>
+            <select
+              value={createForm.departmentId}
+              onChange={(e) => setCreateForm((p) => ({ ...p, departmentId: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
             >
-              إلغاء
+              <option value="">Select department</option>
+              {departments.map((d) => (
+                <option key={d.id} value={d.id}>{d.nameAr || d.name}</option>
+              ))}
+            </select>
+            {createErrors.departmentId && <p className="text-red-500 text-xs mt-1">{createErrors.departmentId}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Level</label>
+            <input
+              type="number"
+              min={1}
+              value={createForm.level ?? 5}
+              onChange={(e) => setCreateForm((p) => ({ ...p, level: parseInt(e.target.value, 10) || 5 }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+            <textarea
+              value={createForm.description || ''}
+              onChange={(e) => setCreateForm((p) => ({ ...p, description: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+              rows={2}
+              placeholder="Optional description"
+            />
+          </div>
+          {createErrors.form && <p className="text-red-500 text-sm">{createErrors.form}</p>}
+          <div className="flex gap-3 justify-end pt-4">
+            <button
+              type="button"
+              onClick={() => setShowCreateModal(false)}
+              className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium"
+            >
+              Cancel
             </button>
             <button
-              onClick={handleCreateRole}
+              type="submit"
-              className="px-5 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-semibold disabled:opacity-50 inline-flex items-center gap-2"
+              disabled={saving}
-              disabled={creating}
+              className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-semibold disabled:opacity-50"
             >
-              {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+              {saving ? 'Creating...' : 'Create Role'}
-              {creating ? 'جاري الإنشاء...' : 'إنشاء'}
             </button>
           </div>
-        </div>
+        </form>
       </Modal>
 
-      {/* Delete Confirmation Dialog */}
+      {/* Edit Permissions Modal */}
-      {showDeleteDialog && roleToDelete && (
-        <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div
-            className="fixed inset-0 bg-black bg-opacity-50"
-            onClick={() => {
-              if (!deleting) {
-                setShowDeleteDialog(false);
-                setRoleToDelete(null);
-              }
-            }}
-          />
-          <div className="flex min-h-screen items-center justify-center p-4">
-            <div className="relative bg-white rounded-xl shadow-2xl p-6 max-w-md w-full">
-              <div className="flex items-center gap-4 mb-4">
-                <div className="bg-red-100 p-3 rounded-full">
-                  <Trash2 className="h-6 w-6 text-red-600" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-bold text-gray-900">حذف الدور</h3>
-                  <p className="text-sm text-gray-600">هذا الإجراء لا يمكن التراجع عنه</p>
-                </div>
-              </div>
-              <p className="text-gray-700 mb-6">
-                هل أنت متأكد أنك تريد حذف دور{' '}
-                <span className="font-semibold">{roleToDelete.titleAr || roleToDelete.title}</span>؟
-              </p>
-              <div className="flex items-center justify-end gap-3">
-                <button
-                  onClick={() => {
-                    setShowDeleteDialog(false);
-                    setRoleToDelete(null);
-                  }}
-                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
-                  disabled={deleting}
-                >
-                  إلغاء
-                </button>
-                <button
-                  onClick={handleDeleteRole}
-                  className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
-                  disabled={deleting}
-                >
-                  {deleting ? (
-                    <>
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      جاري الحذف...
-                    </>
-                  ) : (
-                    'حذف'
-                  )}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Edit Modal: name + permissions */}
       <Modal
         isOpen={showEditModal}
         onClose={() => setShowEditModal(false)}
-        title={`تعديل: ${currentRole?.titleAr || currentRole?.title || ''}`}
+        title={`تعديل صلاحيات: ${currentRole?.titleAr || currentRole?.title || ''}`}
         size="2xl"
       >
         {currentRole && (
           <div>
-            {/* Name edit */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-1">الاسم (English)</label>
-                <input
-                  value={editTitle}
-                  onChange={(e) => setEditTitle(e.target.value)}
-                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-1">الاسم (عربي)</label>
-                <input
-                  value={editTitleAr}
-                  onChange={(e) => setEditTitleAr(e.target.value)}
-                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
-                />
-              </div>
-            </div>
-
-            {/* Permissions */}
             <div className="overflow-x-auto mb-6">
               <table className="w-full">
                 <thead>
@@ -627,14 +445,12 @@ export default function RolesManagement() {
                     ))}
                   </tr>
                 </thead>
-
                 <tbody className="divide-y divide-gray-200">
                   {MODULES.map((module) => (
                     <tr key={module.id}>
                       <td className="px-4 py-4">
                         <p className="font-semibold text-gray-900">{module.name}</p>
                       </td>
-
                       {ACTIONS.map((action) => {
                         const hasPermission = permissionMatrix[module.id]?.[action.id];
                         return (
@@ -656,21 +472,18 @@ export default function RolesManagement() {
                 </tbody>
               </table>
             </div>
-
             <div className="flex gap-3 justify-end">
               <button
                 onClick={() => setShowEditModal(false)}
                 className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium"
-                disabled={saving}
               >
                 إلغاء
               </button>
               <button
-                onClick={handleSaveRole}
+                onClick={handleSavePermissions}
                 disabled={saving}
-                className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-semibold disabled:opacity-50 inline-flex items-center gap-2"
+                className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-semibold disabled:opacity-50"
               >
-                {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                 {saving ? 'جاري الحفظ...' : 'حفظ التغييرات'}
               </button>
             </div>

frontend/src/app/admin/users/page.tsx

@@ -13,7 +13,7 @@ import {
   Shield,
   Calendar,
 } from 'lucide-react';
-import { usersAPI, statsAPI, positionsAPI } from '@/lib/api/admin';
+import { usersAPI, statsAPI, positionsAPI, userRolesAPI, permissionGroupsAPI } from '@/lib/api/admin';
 import { employeesAPI } from '@/lib/api/employees';
 import type { User, CreateUserData, UpdateUserData } from '@/lib/api/admin';
 import type { Employee } from '@/lib/api/employees';
@@ -567,6 +567,10 @@ function EditUserModal({
     employeeId: null,
     isActive: true,
   });
+  const [userRoles, setUserRoles] = useState<{ id: string; role: { id: string; name: string; nameAr?: string | null } }[]>([]);
+  const [permissionGroups, setPermissionGroups] = useState<{ id: string; name: string; nameAr?: string | null }[]>([]);
+  const [assignRoleId, setAssignRoleId] = useState('');
+  const [rolesLoading, setRolesLoading] = useState(false);
 
   useEffect(() => {
     if (user) {
@@ -580,6 +584,41 @@ function EditUserModal({
     }
   }, [user]);
 
+  useEffect(() => {
+    if (isOpen && user) {
+      userRolesAPI.getAll(user.id).then((r) => setUserRoles(r)).catch(() => setUserRoles([]));
+      permissionGroupsAPI.getAll().then((g) => setPermissionGroups(g)).catch(() => setPermissionGroups([]));
+    }
+  }, [isOpen, user?.id]);
+
+  const handleAssignRole = async () => {
+    if (!user || !assignRoleId) return;
+    setRolesLoading(true);
+    try {
+      await userRolesAPI.assign(user.id, assignRoleId);
+      const updated = await userRolesAPI.getAll(user.id);
+      setUserRoles(updated);
+      setAssignRoleId('');
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : 'فشل الإضافة');
+    } finally {
+      setRolesLoading(false);
+    }
+  };
+
+  const handleRemoveRole = async (roleId: string) => {
+    if (!user) return;
+    setRolesLoading(true);
+    try {
+      await userRolesAPI.remove(user.id, roleId);
+      setUserRoles((prev) => prev.filter((ur) => ur.role.id !== roleId));
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : 'فشل الإزالة');
+    } finally {
+      setRolesLoading(false);
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!user) return;
@@ -670,6 +709,50 @@ function EditUserModal({
               الحساب نشط
             </label>
           </div>
+          <div className="border-t pt-4 mt-4">
+            <label className="block text-sm font-semibold text-gray-700 mb-2">مجموعات الصلاحيات الإضافية</label>
+            <p className="text-xs text-gray-600 mb-2">صلاحيات اختيارية تضاف إلى صلاحيات الوظيفة</p>
+            <div className="flex gap-2 mb-3">
+              <select
+                value={assignRoleId}
+                onChange={(e) => setAssignRoleId(e.target.value)}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
+              >
+                <option value="">إضافة مجموعة...</option>
+                {permissionGroups
+                  .filter((g) => !userRoles.some((ur) => ur.role.id === g.id))
+                  .map((g) => (
+                    <option key={g.id} value={g.id}>{g.nameAr || g.name}</option>
+                  ))}
+              </select>
+              <button
+                type="button"
+                onClick={handleAssignRole}
+                disabled={!assignRoleId || rolesLoading}
+                className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 disabled:opacity-50"
+              >
+                إضافة
+              </button>
+            </div>
+            <div className="space-y-2">
+              {userRoles.map((ur) => (
+                <div key={ur.id} className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg">
+                  <span className="font-medium">{ur.role.nameAr || ur.role.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveRole(ur.role.id)}
+                    disabled={rolesLoading}
+                    className="text-red-600 hover:text-red-700 text-sm disabled:opacity-50"
+                  >
+                    إزالة
+                  </button>
+                </div>
+              ))}
+              {userRoles.length === 0 && (
+                <p className="text-sm text-gray-500 py-2">لا توجد مجموعات إضافية</p>
+              )}
+            </div>
+          </div>
           <div className="flex gap-3 justify-end pt-4">
             <button type="button" onClick={onClose} className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium">
               إلغاء

frontend/src/app/crm/page.tsx

@@ -902,11 +902,11 @@ function CRMContent() {
                         <td className="px-6 py-4">
                           <div>
                             <span className="text-sm font-semibold text-gray-900">
-                              {deal.estimatedValue.toLocaleString()} SAR
+                              {(deal.estimatedValue ?? 0).toLocaleString()} SAR
                             </span>
-                            {deal.actualValue && (
+                            {(deal.actualValue ?? 0) > 0 && (
                               <p className="text-xs text-green-600">
-                                Actual: {deal.actualValue.toLocaleString()}
+                                Actual: {(deal.actualValue ?? 0).toLocaleString()}
                               </p>
                             )}
                           </div>

frontend/src/app/dashboard/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import ProtectedRoute from '@/components/ProtectedRoute'
 import { useAuth } from '@/contexts/AuthContext'
 import { useLanguage } from '@/contexts/LanguageContext'
@@ -18,10 +19,20 @@ import {
   Bell,
   Shield
 } from 'lucide-react'
+import { dashboardAPI } from '@/lib/api'
 
 function DashboardContent() {
   const { user, logout, hasPermission } = useAuth()
   const { t, language, dir } = useLanguage()
+  const [stats, setStats] = useState({ contacts: 0, activeTasks: 0, notifications: 0 })
+
+  useEffect(() => {
+    dashboardAPI.getStats()
+      .then((res) => {
+        if (res.data?.data) setStats(res.data.data)
+      })
+      .catch(() => {})
+  }, [])
 
   const allModules = [
     {
@@ -128,7 +139,7 @@ function DashboardContent() {
               </div>
 
               {/* Admin Panel Link - Only for admins */}
-              {(hasPermission('admin', 'view') || user?.role?.name === 'المدير العام' || user?.role?.nameEn === 'General Manager') && (
+              {hasPermission('admin', 'view') && (
                 <Link
                   href="/admin"
                   className="p-2 hover:bg-red-50 rounded-lg transition-colors relative group"
@@ -144,7 +155,9 @@ function DashboardContent() {
               {/* Notifications */}
               <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors relative">
                 <Bell className="h-5 w-5 text-gray-600" />
-                <span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full"></span>
+                {stats.notifications > 0 && (
+                  <span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full"></span>
+                )}
               </button>
 
               {/* Settings */}
@@ -193,7 +206,7 @@ function DashboardContent() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-gray-600">المهام النشطة</p>
-                <p className="text-3xl font-bold text-gray-900 mt-1">12</p>
+                <p className="text-3xl font-bold text-gray-900 mt-1">{stats.activeTasks}</p>
               </div>
               <div className="bg-green-100 p-3 rounded-lg">
                 <CheckSquare className="h-8 w-8 text-green-600" />
@@ -205,7 +218,7 @@ function DashboardContent() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-gray-600">الإشعارات</p>
-                <p className="text-3xl font-bold text-gray-900 mt-1">5</p>
+                <p className="text-3xl font-bold text-gray-900 mt-1">{stats.notifications}</p>
               </div>
               <div className="bg-orange-100 p-3 rounded-lg">
                 <Bell className="h-8 w-8 text-orange-600" />
@@ -217,7 +230,7 @@ function DashboardContent() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-gray-600">جهات الاتصال</p>
-                <p className="text-3xl font-bold text-gray-900 mt-1">248</p>
+                <p className="text-3xl font-bold text-gray-900 mt-1">{stats.contacts}</p>
               </div>
               <div className="bg-purple-100 p-3 rounded-lg">
                 <Users className="h-8 w-8 text-purple-600" />
@@ -268,37 +281,7 @@ function DashboardContent() {
         {/* Recent Activity */}
         <div className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
           <h3 className="text-xl font-bold text-gray-900 mb-4">النشاط الأخير</h3>
-          <div className="space-y-4">
+          <p className="text-gray-500 text-center py-6">لا يوجد نشاط حديث</p>
-            <div className="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
-              <div className="bg-blue-100 p-2 rounded-lg">
-                <Users className="h-5 w-5 text-blue-600" />
-              </div>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-gray-900">تم إضافة عميل جديد</p>
-                <p className="text-xs text-gray-600">منذ ساعتين</p>
-              </div>
-            </div>
-            
-            <div className="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
-              <div className="bg-green-100 p-2 rounded-lg">
-                <TrendingUp className="h-5 w-5 text-green-600" />
-              </div>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-gray-900">تم إغلاق صفقة جديدة</p>
-                <p className="text-xs text-gray-600">منذ 4 ساعات</p>
-              </div>
-            </div>
-            
-            <div className="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
-              <div className="bg-orange-100 p-2 rounded-lg">
-                <CheckSquare className="h-5 w-5 text-orange-600" />
-              </div>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-gray-900">تم إكمال مهمة</p>
-                <p className="text-xs text-gray-600">منذ يوم واحد</p>
-              </div>
-            </div>
-          </div>
         </div>
       </main>
     </div>

frontend/src/app/hr/page.tsx

@@ -23,9 +23,221 @@ import {
   Building2,
   User,
   CheckCircle2,
-  XCircle
+  XCircle,
+  Network
 } from 'lucide-react'
-import { employeesAPI, Employee, CreateEmployeeData, UpdateEmployeeData, EmployeeFilters, departmentsAPI, positionsAPI } from '@/lib/api/employees'
+import dynamic from 'next/dynamic'
+import { employeesAPI, Employee, CreateEmployeeData, UpdateEmployeeData, EmployeeFilters, departmentsAPI, positionsAPI, type Department } from '@/lib/api/employees'
+
+const OrgChart = dynamic(() => import('@/components/hr/OrgChart'), { ssr: false })
+
+// Form fields extracted to module level to prevent focus loss on re-render
+function EmployeeFormFields({
+  formData,
+  setFormData,
+  formErrors,
+  departments,
+  positions,
+  loadingDepts,
+  isEdit,
+  onCancel,
+  submitting,
+}: {
+  formData: CreateEmployeeData
+  setFormData: React.Dispatch<React.SetStateAction<CreateEmployeeData>>
+  formErrors: Record<string, string>
+  departments: any[]
+  positions: any[]
+  loadingDepts: boolean
+  isEdit: boolean
+  onCancel: () => void
+  submitting: boolean
+}) {
+  return (
+    <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            First Name <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="text"
+            value={formData.firstName}
+            onChange={(e) => setFormData((prev) => ({ ...prev, firstName: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          />
+          {formErrors.firstName && <p className="text-red-500 text-xs mt-1">{formErrors.firstName}</p>}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Last Name <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="text"
+            value={formData.lastName}
+            onChange={(e) => setFormData((prev) => ({ ...prev, lastName: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          />
+          {formErrors.lastName && <p className="text-red-500 text-xs mt-1">{formErrors.lastName}</p>}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Email <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="email"
+            value={formData.email}
+            onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          />
+          {formErrors.email && <p className="text-red-500 text-xs mt-1">{formErrors.email}</p>}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Mobile <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="tel"
+            value={formData.mobile}
+            onChange={(e) => setFormData((prev) => ({ ...prev, mobile: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          />
+          {formErrors.mobile && <p className="text-red-500 text-xs mt-1">{formErrors.mobile}</p>}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Department <span className="text-red-500">*</span>
+          </label>
+          <select
+            value={formData.departmentId}
+            onChange={(e) => setFormData((prev) => ({ ...prev, departmentId: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+            disabled={loadingDepts}
+          >
+            <option value="">Select Department</option>
+            {departments.map((dept) => (
+              <option key={dept.id} value={dept.id}>{dept.nameAr || dept.name}</option>
+            ))}
+          </select>
+          {formErrors.departmentId && <p className="text-red-500 text-xs mt-1">{formErrors.departmentId}</p>}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Position <span className="text-red-500">*</span>
+          </label>
+          <select
+            value={formData.positionId}
+            onChange={(e) => setFormData((prev) => ({ ...prev, positionId: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+            disabled={loadingDepts}
+          >
+            <option value="">Select Position</option>
+            {positions.map((pos) => (
+              <option key={pos.id} value={pos.id}>{pos.titleAr || pos.title}</option>
+            ))}
+          </select>
+          {formErrors.positionId && <p className="text-red-500 text-xs mt-1">{formErrors.positionId}</p>}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Employment Type <span className="text-red-500">*</span>
+          </label>
+          <select
+            value={formData.employmentType}
+            onChange={(e) => setFormData((prev) => ({ ...prev, employmentType: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          >
+            <option value="FULL_TIME">Full Time - دوام كامل</option>
+            <option value="PART_TIME">Part Time - دوام جزئي</option>
+            <option value="CONTRACT">Contract - عقد</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Contract Type
+          </label>
+          <select
+            value={formData.contractType || ''}
+            onChange={(e) => setFormData((prev) => ({ ...prev, contractType: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          >
+            <option value="UNLIMITED">Unlimited - غير محدود</option>
+            <option value="FIXED">Fixed - محدد</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Hire Date <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="date"
+            value={formData.hireDate}
+            onChange={(e) => setFormData((prev) => ({ ...prev, hireDate: e.target.value }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          />
+          {formErrors.hireDate && <p className="text-red-500 text-xs mt-1">{formErrors.hireDate}</p>}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Base Salary (SAR) <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="number"
+            min="0"
+            value={formData.baseSalary}
+            onChange={(e) => setFormData((prev) => ({ ...prev, baseSalary: parseFloat(e.target.value) || 0 }))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
+          />
+          {formErrors.baseSalary && <p className="text-red-500 text-xs mt-1">{formErrors.baseSalary}</p>}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 pt-4 border-t">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+          disabled={submitting}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          disabled={submitting}
+        >
+          {submitting ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              {isEdit ? 'Updating...' : 'Creating...'}
+            </>
+          ) : (
+            <>
+              {isEdit ? 'Update Employee' : 'Create Employee'}
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
 
 function HRContent() {
   // State Management
@@ -79,6 +291,42 @@ function HRContent() {
   const [positions, setPositions] = useState<any[]>([])
   const [loadingDepts, setLoadingDepts] = useState(false)
 
+  // Tabs: employees | departments | orgchart
+  const [activeTab, setActiveTab] = useState<'employees' | 'departments' | 'orgchart'>('employees')
+  const [hierarchy, setHierarchy] = useState<Department[]>([])
+  const [loadingHierarchy, setLoadingHierarchy] = useState(false)
+
+  // Department CRUD
+  const [showDeptModal, setShowDeptModal] = useState(false)
+  const [editingDept, setEditingDept] = useState<Department | null>(null)
+  const [deptFormData, setDeptFormData] = useState({ name: '', nameAr: '', code: '', parentId: '' as string, description: '' })
+  const [deptFormErrors, setDeptFormErrors] = useState<Record<string, string>>({})
+  const [deptDeleteConfirm, setDeptDeleteConfirm] = useState<string | null>(null)
+
+  const fetchDepartments = useCallback(async () => {
+    setLoadingDepts(true)
+    try {
+      const depts = await departmentsAPI.getAll()
+      setDepartments(depts)
+    } catch (err) {
+      console.error('Failed to load departments:', err)
+    } finally {
+      setLoadingDepts(false)
+    }
+  }, [])
+
+  const fetchHierarchy = useCallback(async () => {
+    setLoadingHierarchy(true)
+    try {
+      const tree = await departmentsAPI.getHierarchy()
+      setHierarchy(tree)
+    } catch (err) {
+      console.error('Failed to load hierarchy:', err)
+    } finally {
+      setLoadingHierarchy(false)
+    }
+  }, [])
+
   // Fetch Departments & Positions
   useEffect(() => {
     const fetchData = async () => {
@@ -99,6 +347,11 @@ function HRContent() {
     fetchData()
   }, [])
 
+  useEffect(() => {
+    if (activeTab === 'departments') fetchDepartments()
+    if (activeTab === 'orgchart') fetchHierarchy()
+  }, [activeTab, fetchDepartments, fetchHierarchy])
+
   // Fetch Employees (with debouncing for search)
   const fetchEmployees = useCallback(async () => {
     setLoading(true)
@@ -290,7 +543,7 @@ function HRContent() {
       departmentId: employee.departmentId,
       positionId: employee.positionId,
       reportingToId: employee.reportingToId,
-      baseSalary: employee.baseSalary
+      baseSalary: employee.baseSalary ?? (employee as any).basicSalary ?? 0
     })
     setShowEditModal(true)
   }
@@ -300,198 +553,79 @@ function HRContent() {
     setShowDeleteDialog(true)
   }
 
-  // Calculate stats
+  // Department CRUD
+  const openDeptModal = (dept?: Department) => {
+    if (dept) {
+      setEditingDept(dept)
+      setDeptFormData({
+        name: dept.name,
+        nameAr: dept.nameAr || '',
+        code: dept.code,
+        parentId: dept.parentId || '',
+        description: dept.description || ''
+      })
+    } else {
+      setEditingDept(null)
+      setDeptFormData({ name: '', nameAr: '', code: '', parentId: '', description: '' })
+    }
+    setDeptFormErrors({})
+    setShowDeptModal(true)
+  }
+
+  const validateDeptForm = () => {
+    const err: Record<string, string> = {}
+    if (!deptFormData.name?.trim()) err.name = 'Name is required'
+    if (!deptFormData.code?.trim()) err.code = 'Code is required'
+    setDeptFormErrors(err)
+    return Object.keys(err).length === 0
+  }
+
+  const handleSaveDept = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!validateDeptForm()) return
+    try {
+      if (editingDept) {
+        await departmentsAPI.update(editingDept.id, {
+          ...deptFormData,
+          parentId: deptFormData.parentId || null
+        })
+        toast.success('Department updated')
+      } else {
+        await departmentsAPI.create({
+          ...deptFormData,
+          parentId: deptFormData.parentId || undefined
+        })
+        toast.success('Department created')
+      }
+      setShowDeptModal(false)
+      fetchDepartments()
+      if (activeTab === 'orgchart') fetchHierarchy()
+      setDepartments(await departmentsAPI.getAll())
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || 'Failed to save department')
+    }
+  }
+
+  const handleDeleteDept = async (id: string) => {
+    try {
+      await departmentsAPI.delete(id)
+      toast.success('Department deleted')
+      setDeptDeleteConfirm(null)
+      fetchDepartments()
+      if (activeTab === 'orgchart') fetchHierarchy()
+      setDepartments(await departmentsAPI.getAll())
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || 'Failed to delete department')
+      setDeptDeleteConfirm(null)
+    }
+  }
+
+  // Calculate stats (coerce to number - API may return Decimal as string/object)
   const activeEmployees = employees.filter(e => e.status === 'ACTIVE').length
-  const totalSalary = employees.reduce((sum, e) => sum + e.baseSalary, 0)
+  const totalSalary = employees.reduce((sum, e) => {
-
+    const sal = e.baseSalary ?? (e as any).basicSalary ?? 0
-  // Render Form Fields Component
+    return sum + Number(sal)
-  const renderFormFields = (isEdit = false) => (
+  }, 0)
-    <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-2">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            First Name <span className="text-red-500">*</span>
-          </label>
-          <input
-            type="text"
-            value={formData.firstName}
-            onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          />
-          {formErrors.firstName && <p className="text-red-500 text-xs mt-1">{formErrors.firstName}</p>}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Last Name <span className="text-red-500">*</span>
-          </label>
-          <input
-            type="text"
-            value={formData.lastName}
-            onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          />
-          {formErrors.lastName && <p className="text-red-500 text-xs mt-1">{formErrors.lastName}</p>}
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Email <span className="text-red-500">*</span>
-          </label>
-          <input
-            type="email"
-            value={formData.email}
-            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          />
-          {formErrors.email && <p className="text-red-500 text-xs mt-1">{formErrors.email}</p>}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Mobile <span className="text-red-500">*</span>
-          </label>
-          <input
-            type="tel"
-            value={formData.mobile}
-            onChange={(e) => setFormData({ ...formData, mobile: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          />
-          {formErrors.mobile && <p className="text-red-500 text-xs mt-1">{formErrors.mobile}</p>}
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Department <span className="text-red-500">*</span>
-          </label>
-          <select
-            value={formData.departmentId}
-            onChange={(e) => setFormData({ ...formData, departmentId: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-            disabled={loadingDepts}
-          >
-            <option value="">Select Department</option>
-            {departments.map(dept => (
-              <option key={dept.id} value={dept.id}>{dept.nameAr || dept.name}</option>
-            ))}
-          </select>
-          {formErrors.departmentId && <p className="text-red-500 text-xs mt-1">{formErrors.departmentId}</p>}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Position <span className="text-red-500">*</span>
-          </label>
-          <select
-            value={formData.positionId}
-            onChange={(e) => setFormData({ ...formData, positionId: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-            disabled={loadingDepts}
-          >
-            <option value="">Select Position</option>
-            {positions.map(pos => (
-              <option key={pos.id} value={pos.id}>{pos.titleAr || pos.title}</option>
-            ))}
-          </select>
-          {formErrors.positionId && <p className="text-red-500 text-xs mt-1">{formErrors.positionId}</p>}
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Employment Type <span className="text-red-500">*</span>
-          </label>
-          <select
-            value={formData.employmentType}
-            onChange={(e) => setFormData({ ...formData, employmentType: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          >
-            <option value="FULL_TIME">Full Time - دوام كامل</option>
-            <option value="PART_TIME">Part Time - دوام جزئي</option>
-            <option value="CONTRACT">Contract - عقد</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Contract Type
-          </label>
-          <select
-            value={formData.contractType || ''}
-            onChange={(e) => setFormData({ ...formData, contractType: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          >
-            <option value="UNLIMITED">Unlimited - غير محدود</option>
-            <option value="FIXED">Fixed - محدد</option>
-          </select>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Hire Date <span className="text-red-500">*</span>
-          </label>
-          <input
-            type="date"
-            value={formData.hireDate}
-            onChange={(e) => setFormData({ ...formData, hireDate: e.target.value })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          />
-          {formErrors.hireDate && <p className="text-red-500 text-xs mt-1">{formErrors.hireDate}</p>}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Base Salary (SAR) <span className="text-red-500">*</span>
-          </label>
-          <input
-            type="number"
-            min="0"
-            value={formData.baseSalary}
-            onChange={(e) => setFormData({ ...formData, baseSalary: parseFloat(e.target.value) })}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
-          />
-          {formErrors.baseSalary && <p className="text-red-500 text-xs mt-1">{formErrors.baseSalary}</p>}
-        </div>
-      </div>
-
-      <div className="flex items-center justify-end gap-3 pt-4 border-t">
-        <button
-          type="button"
-          onClick={() => {
-            isEdit ? setShowEditModal(false) : setShowCreateModal(false)
-            resetForm()
-          }}
-          className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-          disabled={submitting}
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          disabled={submitting}
-        >
-          {submitting ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin" />
-              {isEdit ? 'Updating...' : 'Creating...'}
-            </>
-          ) : (
-            <>
-              {isEdit ? 'Update Employee' : 'Create Employee'}
-            </>
-          )}
-        </button>
-      </div>
-    </div>
-  )
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -518,19 +652,77 @@ function HRContent() {
             </div>
 
             <div className="flex items-center gap-3">
-              <button
+              {activeTab === 'employees' && (
-                onClick={() => {
+                <button
-                  resetForm()
+                  onClick={() => {
-                  setShowCreateModal(true)
+                    resetForm()
-                }}
+                    setShowCreateModal(true)
-                className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                  }}
-              >
+                  className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-                <Plus className="h-4 w-4" />
+                >
-                Add Employee
+                  <Plus className="h-4 w-4" />
-              </button>
+                  Add Employee
+                </button>
+              )}
+              {activeTab === 'departments' && (
+                <button
+                  onClick={() => openDeptModal()}
+                  className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                >
+                  <Plus className="h-4 w-4" />
+                  Add Department
+                </button>
+              )}
             </div>
           </div>
         </div>
+
+        {/* Tabs */}
+        <div className="border-b border-gray-200 bg-white">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <nav className="flex gap-4">
+              <button
+                onClick={() => setActiveTab('employees')}
+                className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
+                  activeTab === 'employees'
+                    ? 'border-red-600 text-red-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <span className="flex items-center gap-2">
+                  <Users className="h-4 w-4" />
+                  الموظفون / Employees
+                </span>
+              </button>
+              <button
+                onClick={() => setActiveTab('departments')}
+                className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
+                  activeTab === 'departments'
+                    ? 'border-red-600 text-red-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <span className="flex items-center gap-2">
+                  <Building2 className="h-4 w-4" />
+                  الأقسام / Departments
+                </span>
+              </button>
+              <button
+                onClick={() => setActiveTab('orgchart')}
+                className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
+                  activeTab === 'orgchart'
+                    ? 'border-red-600 text-red-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <span className="flex items-center gap-2">
+                  <Network className="h-4 w-4" />
+                  الهيكل التنظيمي / Org Chart
+                </span>
+              </button>
+            </nav>
+          </div>
+        </div>
       </header>
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -577,7 +769,9 @@ function HRContent() {
               <div>
                 <p className="text-sm text-gray-600">Total Salary</p>
                 <p className="text-3xl font-bold text-gray-900 mt-1">
-                  {(totalSalary / 1000).toFixed(0)}K
+                  {totalSalary >= 1000
+                    ? `${(totalSalary / 1000).toFixed(1)}K`
+                    : totalSalary.toLocaleString()}
                 </p>
                 <p className="text-xs text-gray-600 mt-1">SAR</p>
               </div>
@@ -588,6 +782,9 @@ function HRContent() {
           </div>
         </div>
 
+        {/* Employees Tab */}
+        {activeTab === 'employees' && (
+        <>
         {/* Filters and Search */}
         <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-200 mb-6">
           <div className="flex flex-col md:flex-row gap-4">
@@ -710,7 +907,7 @@ function HRContent() {
                         </td>
                         <td className="px-6 py-4">
                           <span className="text-sm font-semibold text-gray-900">
-                            {Number(employee.baseSalary ?? 0).toLocaleString()} SAR
+                            {Number(employee.baseSalary ?? (employee as any).basicSalary ?? 0).toLocaleString()} SAR
                           </span>
                         </td>
                         <td className="px-6 py-4">
@@ -791,6 +988,79 @@ function HRContent() {
             </>
           )}
         </div>
+        </>
+        )}
+
+        {/* Departments Tab */}
+        {activeTab === 'departments' && (
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            {loadingDepts ? (
+              <div className="p-12"><LoadingSpinner size="lg" message="Loading departments..." /></div>
+            ) : departments.length === 0 ? (
+              <div className="p-12 text-center">
+                <Building2 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+                <p className="text-gray-600 mb-4">No departments yet. Add your first department.</p>
+                <button onClick={() => openDeptModal()} className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
+                  Add Department
+                </button>
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-gray-50 border-b border-gray-200">
+                    <tr>
+                      <th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Name</th>
+                      <th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Code</th>
+                      <th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Parent</th>
+                      <th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Employees</th>
+                      <th className="px-6 py-4 text-right text-xs font-semibold text-gray-700 uppercase">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    {departments.map((dept) => (
+                      <tr key={dept.id} className="hover:bg-gray-50">
+                        <td className="px-6 py-4">
+                          <span className="font-semibold text-gray-900">{dept.nameAr || dept.name}</span>
+                        </td>
+                        <td className="px-6 py-4 text-sm text-gray-600">{dept.code}</td>
+                        <td className="px-6 py-4 text-sm text-gray-600">{dept.parent?.nameAr || dept.parent?.name || '-'}</td>
+                        <td className="px-6 py-4 text-sm">{dept._count?.employees ?? 0}</td>
+                        <td className="px-6 py-4">
+                          <div className="flex gap-2">
+                            <button onClick={() => openDeptModal(dept)} className="p-2 hover:bg-blue-50 text-blue-600 rounded-lg" title="Edit">
+                              <Edit className="h-4 w-4" />
+                            </button>
+                            {deptDeleteConfirm === dept.id ? (
+                              <span className="flex gap-1">
+                                <button onClick={() => handleDeleteDept(dept.id)} className="px-2 py-1 text-xs bg-red-600 text-white rounded">Confirm</button>
+                                <button onClick={() => setDeptDeleteConfirm(null)} className="px-2 py-1 text-xs border rounded">Cancel</button>
+                              </span>
+                            ) : (
+                              <button onClick={() => setDeptDeleteConfirm(dept.id)} className="p-2 hover:bg-red-50 text-red-600 rounded-lg" title="Delete">
+                                <Trash2 className="h-4 w-4" />
+                              </button>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Org Chart Tab */}
+        {activeTab === 'orgchart' && (
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            {loadingHierarchy ? (
+              <div className="p-12"><LoadingSpinner size="lg" message="Loading org chart..." /></div>
+            ) : (
+              <OrgChart hierarchy={hierarchy} />
+            )}
+          </div>
+        )}
       </main>
 
       {/* Create Modal */}
@@ -804,7 +1074,93 @@ function HRContent() {
         size="xl"
       >
         <form onSubmit={handleCreate}>
-          {renderFormFields()}
+          <EmployeeFormFields
+            formData={formData}
+            setFormData={setFormData}
+            formErrors={formErrors}
+            departments={departments}
+            positions={positions}
+            loadingDepts={loadingDepts}
+            isEdit={false}
+            onCancel={() => {
+              setShowCreateModal(false)
+              resetForm()
+            }}
+            submitting={submitting}
+          />
+        </form>
+      </Modal>
+
+      {/* Department Modal */}
+      <Modal
+        isOpen={showDeptModal}
+        onClose={() => { setShowDeptModal(false); setEditingDept(null) }}
+        title={editingDept ? 'Edit Department' : 'Add Department'}
+      >
+        <form onSubmit={handleSaveDept} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name (EN) *</label>
+            <input
+              type="text"
+              value={deptFormData.name}
+              onChange={(e) => setDeptFormData((p) => ({ ...p, name: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
+            />
+            {deptFormErrors.name && <p className="text-red-500 text-xs mt-1">{deptFormErrors.name}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name (AR)</label>
+            <input
+              type="text"
+              value={deptFormData.nameAr}
+              onChange={(e) => setDeptFormData((p) => ({ ...p, nameAr: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
+              dir="rtl"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Code *</label>
+            <input
+              type="text"
+              value={deptFormData.code}
+              onChange={(e) => setDeptFormData((p) => ({ ...p, code: e.target.value.toUpperCase() }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
+              placeholder="e.g. HR, IT, SALES"
+            />
+            {deptFormErrors.code && <p className="text-red-500 text-xs mt-1">{deptFormErrors.code}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Parent Department</label>
+            <select
+              value={deptFormData.parentId}
+              onChange={(e) => setDeptFormData((p) => ({ ...p, parentId: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
+            >
+              <option value="">— None (Root) —</option>
+              {departments
+                .filter((d) => !editingDept || d.id !== editingDept.id)
+                .map((d) => (
+                  <option key={d.id} value={d.id}>{d.nameAr || d.name} ({d.code})</option>
+                ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+            <textarea
+              value={deptFormData.description}
+              onChange={(e) => setDeptFormData((p) => ({ ...p, description: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
+              rows={2}
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <button type="button" onClick={() => setShowDeptModal(false)} className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+              Cancel
+            </button>
+            <button type="submit" className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
+              {editingDept ? 'Update' : 'Create'}
+            </button>
+          </div>
         </form>
       </Modal>
 
@@ -819,7 +1175,20 @@ function HRContent() {
         size="xl"
       >
         <form onSubmit={handleEdit}>
-          {renderFormFields(true)}
+          <EmployeeFormFields
+            formData={formData}
+            setFormData={setFormData}
+            formErrors={formErrors}
+            departments={departments}
+            positions={positions}
+            loadingDepts={loadingDepts}
+            isEdit
+            onCancel={() => {
+              setShowEditModal(false)
+              resetForm()
+            }}
+            submitting={submitting}
+          />
         </form>
       </Modal>
 

frontend/src/app/icon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="128" height="128" rx="24" fill="#2563EB"/>
+  <rect width="32" height="32" rx="4" fill="#2563eb"/>
-  <text x="64" y="82" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="72" font-weight="800" fill="#FFFFFF">Z</text>
+  <text x="16" y="22" text-anchor="middle" fill="white" font-size="14" font-family="sans-serif" font-weight="bold">Z</text>
 </svg>

frontend/src/app/login/page.tsx

@@ -110,13 +110,11 @@ export default function LoginPage() {
             </button>
           </form>
 
-          {/* Demo Credentials */}
+          {/* System Administrator */}
           <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
-            <h3 className="text-sm font-semibold text-blue-900 mb-2">الحسابات التجريبية:</h3>
+            <h3 className="text-sm font-semibold text-blue-900 mb-2">مدير النظام:</h3>
-            <div className="text-sm text-blue-800 space-y-1">
+            <div className="text-sm text-blue-800">
-              <p>• <strong>المدير العام:</strong> gm@atmata.com / Admin@123</p>
+              <p><strong>admin@system.local</strong> / Admin@123</p>
-              <p>• <strong>مدير المبيعات:</strong> sales.manager@atmata.com / Admin@123</p>
-              <p>• <strong>مندوب مبيعات:</strong> sales.rep@atmata.com / Admin@123</p>
             </div>
           </div>
         </div>

frontend/src/app/marketing/page.tsx

@@ -628,9 +628,9 @@ function MarketingContent() {
                               <span className="text-sm font-semibold text-gray-900">
                                 {(campaign.budget || 0).toLocaleString()} SAR
                               </span>
-                              {campaign.actualCost && (
+                              {(campaign.actualCost ?? 0) > 0 && (
                                 <p className="text-xs text-gray-600">
-                                  Spent: {campaign.actualCost.toLocaleString()}
+                                  Spent: {(campaign.actualCost ?? 0).toLocaleString()}
                                 </p>
                               )}
                             </div>

frontend/src/components/hr/OrgChart.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { Tree, TreeNode } from 'react-organizational-chart'
+import type { Department } from '@/lib/api/employees'
+import { Building2, Users } from 'lucide-react'
+
+// Force LTR for org chart - RTL breaks the tree layout and connecting lines
+function DeptNode({ dept }: { dept: Department }) {
+  const empCount = dept._count?.employees ?? dept.employees?.length ?? 0
+  const childCount = dept.children?.length ?? 0
+  return (
+    <div className="inline-flex flex-col items-center" dir="ltr">
+      <div className="px-4 py-3 bg-white border-2 border-blue-200 rounded-lg shadow-md hover:shadow-lg transition-shadow min-w-[180px] max-w-[220px]">
+        <div className="flex items-center gap-2 mb-1">
+          <Building2 className="h-5 w-5 text-blue-600 flex-shrink-0" />
+          <span className="font-semibold text-gray-900 truncate">{dept.nameAr || dept.name}</span>
+        </div>
+        <p className="text-xs text-gray-500 mb-1">{dept.code}</p>
+        <div className="flex gap-2 text-xs text-gray-600">
+          <span className="flex items-center gap-1">
+            <Users className="h-3 w-3" />
+            {empCount} موظف
+          </span>
+          {childCount > 0 && (
+            <span>• {childCount} أقسام فرعية</span>
+          )}
+        </div>
+        {dept.employees && dept.employees.length > 0 && (
+          <div className="mt-2 pt-2 border-t border-gray-100 space-y-0.5">
+            {dept.employees.slice(0, 3).map((emp: any) => (
+              <p key={emp.id} className="text-xs text-gray-600 truncate">
+                {emp.firstNameAr || emp.firstName} {emp.lastNameAr || emp.lastName}
+                {emp.position && ` - ${emp.position.titleAr || emp.position.title}`}
+              </p>
+            ))}
+            {dept.employees.length > 3 && (
+              <p className="text-xs text-gray-500">+{dept.employees.length - 3} أكثر</p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function OrgChartTree({ dept }: { dept: Department }) {
+  if (!dept.children?.length) {
+    return <TreeNode label={<DeptNode dept={dept} />} />
+  }
+  return (
+    <TreeNode label={<DeptNode dept={dept} />}>
+      {dept.children.map((child) => (
+        <OrgChartTree key={child.id} dept={child} />
+      ))}
+    </TreeNode>
+  )
+}
+
+interface OrgChartProps {
+  hierarchy: Department[]
+}
+
+export default function OrgChart({ hierarchy }: OrgChartProps) {
+  if (hierarchy.length === 0) {
+    return (
+      <div className="p-12 text-center text-gray-500">
+        <Building2 className="h-16 w-16 mx-auto mb-4 text-gray-300" />
+        <p>لا توجد أقسام. أضف أقساماً من تبويب الأقسام.</p>
+      </div>
+    )
+  }
+  if (hierarchy.length === 1) {
+    const root = hierarchy[0]
+    return (
+      <div className="p-6 overflow-auto min-h-[400px]" dir="ltr" style={{ direction: 'ltr' }}>
+        <div className="inline-block">
+          <Tree
+            label={<DeptNode dept={root} />}
+            lineWidth="2px"
+            lineColor="#93c5fd"
+            lineBorderRadius="4px"
+            lineHeight="24px"
+            nodePadding="16px"
+          >
+            {root.children?.map((child) => (
+              <OrgChartTree key={child.id} dept={child} />
+            ))}
+          </Tree>
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div className="p-6 overflow-auto min-h-[400px]" dir="ltr" style={{ direction: 'ltr' }}>
+      <div className="inline-block">
+        <Tree
+          label={
+            <div className="px-4 py-3 bg-blue-50 border-2 border-blue-200 rounded-lg min-w-[200px] text-center">
+              <p className="font-bold text-gray-900">الشركة</p>
+              <p className="text-xs text-gray-500">الجذر التنظيمي</p>
+            </div>
+          }
+          lineWidth="2px"
+          lineColor="#93c5fd"
+          lineBorderRadius="4px"
+          lineHeight="24px"
+          nodePadding="16px"
+        >
+          {hierarchy.map((dept) => (
+            <OrgChartTree key={dept.id} dept={dept} />
+          ))}
+        </Tree>
+      </div>
+    </div>
+  )
+}

frontend/src/lib/api.ts

@@ -77,6 +77,10 @@ export const contactsAPI = {
     api.post('/contacts/merge', { sourceId, targetId, reason }),
 }
 
+export const dashboardAPI = {
+  getStats: () => api.get<{ success: boolean; data: { contacts: number; activeTasks: number; notifications: number } }>('/dashboard/stats'),
+}
+
 export const crmAPI = {
   // Deals
   getDeals: (params?: any) => api.get('/crm/deals', { params }),

frontend/src/lib/api/admin.ts

@@ -113,7 +113,7 @@ export const statsAPI = {
   },
 };
 
-// Positions (Roles) API
+// Positions (Roles) API - maps to HR positions with permissions
 export interface PositionPermission {
   id: string;
   module: string;
@@ -126,25 +126,19 @@ export interface PositionRole {
   title: string;
   titleAr?: string | null;
   code: string;
-  level: number;
+  department?: { name: string; nameAr?: string | null };
-  departmentId: string;
-  department?: { id?: string; name: string; nameAr?: string | null };
   permissions: PositionPermission[];
   usersCount: number;
   _count?: { employees: number };
 }
 
-export interface CreatePositionPayload {
+export interface CreatePositionData {
   title: string;
-  titleAr?: string | null;
+  titleAr?: string;
+  code: string;
   departmentId: string;
   level?: number;
-  code?: string;
+  description?: string;
-}
-
-export interface UpdatePositionPayload {
-  title?: string;
-  titleAr?: string | null;
 }
 
 export const positionsAPI = {
@@ -153,20 +147,19 @@ export const positionsAPI = {
     return response.data.data || [];
   },
 
-  create: async (payload: CreatePositionPayload): Promise<PositionRole> => {
+  create: async (data: CreatePositionData): Promise<PositionRole> => {
-    const response = await api.post('/admin/positions', payload);
+    const response = await api.post('/admin/positions', data);
     return response.data.data;
   },
 
-  update: async (positionId: string, payload: UpdatePositionPayload): Promise<PositionRole> => {
+  update: async (
-    const response = await api.put(`/admin/positions/${positionId}`, payload);
+    id: string,
+    data: Partial<CreatePositionData & { isActive?: boolean }>
+  ): Promise<PositionRole> => {
+    const response = await api.put(`/admin/positions/${id}`, data);
     return response.data.data;
   },
 
-  delete: async (positionId: string): Promise<void> => {
-    await api.delete(`/admin/positions/${positionId}`);
-  },
-
   updatePermissions: async (
     positionId: string,
     permissions: Array<{ module: string; resource: string; actions: string[] }>
@@ -178,7 +171,7 @@ export const positionsAPI = {
   },
 };
 
-// Roles API - alias for positions
+// Roles API - alias for positions (for compatibility with existing frontend)
 export interface Role {
   id: string;
   name: string;
@@ -218,6 +211,53 @@ export const rolesAPI = {
   },
 };
 
+// Permission Groups API (Phase 3 - multi-group)
+export interface PermissionGroup {
+  id: string;
+  name: string;
+  nameAr?: string | null;
+  description?: string | null;
+  isActive: boolean;
+  permissions: { id: string; module: string; resource: string; actions: string[] }[];
+  _count?: { userRoles: number };
+}
+
+export const permissionGroupsAPI = {
+  getAll: async (): Promise<PermissionGroup[]> => {
+    const response = await api.get('/admin/permission-groups');
+    return response.data.data || [];
+  },
+  create: async (data: { name: string; nameAr?: string; description?: string }) => {
+    const response = await api.post('/admin/permission-groups', data);
+    return response.data.data;
+  },
+  update: async (id: string, data: Partial<{ name: string; nameAr: string; description: string; isActive: boolean }>) => {
+    const response = await api.put(`/admin/permission-groups/${id}`, data);
+    return response.data.data;
+  },
+  updatePermissions: async (
+    id: string,
+    permissions: Array<{ module: string; resource: string; actions: string[] }>
+  ) => {
+    const response = await api.put(`/admin/permission-groups/${id}/permissions`, { permissions });
+    return response.data.data;
+  },
+};
+
+export const userRolesAPI = {
+  getAll: async (userId: string) => {
+    const response = await api.get(`/admin/users/${userId}/roles`);
+    return response.data.data || [];
+  },
+  assign: async (userId: string, roleId: string) => {
+    const response = await api.post(`/admin/users/${userId}/roles`, { roleId });
+    return response.data.data;
+  },
+  remove: async (userId: string, roleId: string) => {
+    await api.delete(`/admin/users/${userId}/roles/${roleId}`);
+  },
+};
+
 // Audit Logs API
 export interface AuditLog {
   id: string;
@@ -260,7 +300,7 @@ export const auditLogsAPI = {
   },
 };
 
-// System Settings API (placeholder)
+// System Settings API (placeholder - out of scope)
 export interface SystemSetting {
   key: string;
   value: unknown;
@@ -279,7 +319,7 @@ export const settingsAPI = {
   },
 };
 
-// System Health API (placeholder)
+// System Health API (placeholder - optional)
 export interface SystemHealth {
   status: string;
   database: string;

frontend/src/lib/api/employees.ts

@@ -1,149 +1,5 @@
 import { api } from '../api'
 
-const toNumber = (v: any): number => {
-  if (v === null || v === undefined || v === '') return 0
-  if (typeof v === 'number') return Number.isFinite(v) ? v : 0
-  const s = typeof v === 'string' ? v : (v?.toString?.() ?? String(v))
-  const cleaned = s.replace(/[^0-9.-]/g, '')
-  const n = Number(cleaned)
-  return Number.isFinite(n) ? n : 0
-}
-
-const cleanStr = (v: any) => {
-  if (v === null || v === undefined) return undefined
-  const s = String(v).trim()
-  return s === '' ? undefined : s
-}
-
-const cleanEmail = (v: any) => {
-  const s = cleanStr(v)
-  if (!s) return undefined
-  return s.replace(/\s+/g, '').replace(/\++$/g, '')
-}
-
-const parseDateToISO = (v: any) => {
-  const s = cleanStr(v)
-  if (!s) return undefined
-
-  // DD/MM/YYYY
-  const m = s.match(/^(\d{2})\/(\d{2})\/(\d{4})$/)
-  if (m) {
-    const dd = m[1]
-    const mm = m[2]
-    const yyyy = m[3]
-    const d = new Date(`${yyyy}-${mm}-${dd}T00:00:00.000Z`)
-    return isNaN(d.getTime()) ? undefined : d.toISOString()
-  }
-
-  const d = new Date(s)
-  return isNaN(d.getTime()) ? undefined : d.toISOString()
-}
-
-const normalizeEmployeeFromApi = (e: any) => {
-  const basic = toNumber(e?.basicSalary ?? e?.baseSalary ?? e?.salary)
-  return {
-    ...e,
-    baseSalary: basic, 
-    salary: basic,
-  }
-}
-
-
-const normalizeEmployeeToApi = (data: any) => {
-  const d: any = { ...(data || {}) }
-
-  if (d.department?.id && !d.departmentId) d.departmentId = d.department.id
-  if (d.position?.id && !d.positionId) d.positionId = d.position.id
-  if (d.reportingTo?.id && !d.reportingToId) d.reportingToId = d.reportingTo.id
-
-  if (d.baseSalary !== undefined) {
-    d.basicSalary = toNumber(d.baseSalary)
-  } else if (d.salary !== undefined) {
-    d.basicSalary = toNumber(d.salary)
-  }
-
-  d.firstName = cleanStr(d.firstName)
-  d.lastName = cleanStr(d.lastName)
-  d.firstNameAr = cleanStr(d.firstNameAr)
-  d.lastNameAr = cleanStr(d.lastNameAr)
-
-  d.email = cleanEmail(d.email)
-  d.phone = cleanStr(d.phone)
-  d.mobile = cleanStr(d.mobile)
-
-  d.gender = cleanStr(d.gender)
-  d.nationality = cleanStr(d.nationality)
-  d.nationalId = cleanStr(d.nationalId)
-  d.passportNumber = cleanStr(d.passportNumber)
-
-  d.employmentType = cleanStr(d.employmentType)
-  d.contractType = cleanStr(d.contractType)
-
-  d.departmentId = cleanStr(d.departmentId)
-  d.positionId = cleanStr(d.positionId)
-  d.reportingToId = cleanStr(d.reportingToId)
-
-  d.currency = cleanStr(d.currency) ?? 'SAR'
-  d.status = cleanStr(d.status)
-
-  d.address = cleanStr(d.address)
-  d.city = cleanStr(d.city)
-  d.country = cleanStr(d.country)
-
-  d.terminationReason = cleanStr(d.terminationReason)
-  d.emergencyContactName = cleanStr(d.emergencyContactName)
-  d.emergencyContactPhone = cleanStr(d.emergencyContactPhone)
-  d.emergencyContactRelation = cleanStr(d.emergencyContactRelation)
-
-  d.hireDate = parseDateToISO(d.hireDate)
-  d.dateOfBirth = parseDateToISO(d.dateOfBirth)
-  d.endDate = parseDateToISO(d.endDate)
-  d.probationEndDate = parseDateToISO(d.probationEndDate)
-  d.terminationDate = parseDateToISO(d.terminationDate)
-
-  const allowed = [
-    'firstName',
-    'lastName',
-    'firstNameAr',
-    'lastNameAr',
-    'email',
-    'phone',
-    'mobile',
-    'dateOfBirth',
-    'gender',
-    'nationality',
-    'nationalId',
-    'passportNumber',
-    'employmentType',
-    'contractType',
-    'hireDate',
-    'endDate',
-    'probationEndDate',
-    'departmentId',
-    'positionId',
-    'reportingToId',
-    'basicSalary',
-    'currency',
-    'status',
-    'terminationDate',
-    'terminationReason',
-    'emergencyContactName',
-    'emergencyContactPhone',
-    'emergencyContactRelation',
-    'address',
-    'city',
-    'country',
-    'documents',
-  ]
-
-  const payload: any = {}
-  for (const k of allowed) {
-    if (d[k] !== undefined) payload[k] = d[k]
-  }
-
-  return payload
-}
-
 export interface Employee {
   id: string
   uniqueEmployeeId: string
@@ -169,11 +25,7 @@ export interface Employee {
   position?: any
   reportingToId?: string
   reportingTo?: any
-
   baseSalary: number
-  basicSalary?: any
-
-  currency?: string
   status: string
   createdAt: string
   updatedAt: string
@@ -197,7 +49,6 @@ export interface CreateEmployeeData {
   departmentId: string
   positionId: string
   reportingToId?: string
-
   baseSalary: number
 }
 
@@ -221,6 +72,7 @@ export interface EmployeesResponse {
 }
 
 export const employeesAPI = {
+  // Get all employees with filters and pagination
   getAll: async (filters: EmployeeFilters = {}): Promise<EmployeesResponse> => {
     const params = new URLSearchParams()
     if (filters.search) params.append('search', filters.search)
@@ -232,11 +84,12 @@ export const employeesAPI = {
 
     const response = await api.get(`/hr/employees?${params.toString()}`)
     const { data, pagination } = response.data
-
+    const employees = (data || []).map((e: any) => ({
-    const normalized = Array.isArray(data) ? data.map(normalizeEmployeeFromApi) : []
+      ...e,
-
+      baseSalary: e.baseSalary ?? e.basicSalary ?? 0,
+    }))
     return {
-      employees: normalized,
+      employees,
       total: pagination?.total || 0,
       page: pagination?.page || 1,
       pageSize: pagination?.pageSize || 20,
@@ -244,35 +97,70 @@ export const employeesAPI = {
     }
   },
 
+  // Get single employee by ID
   getById: async (id: string): Promise<Employee> => {
     const response = await api.get(`/hr/employees/${id}`)
-    return normalizeEmployeeFromApi(response.data.data)
+    const e = response.data.data
+    return e ? { ...e, baseSalary: e.baseSalary ?? e.basicSalary ?? 0 } : e
   },
 
+  // Create new employee
   create: async (data: CreateEmployeeData): Promise<Employee> => {
-    const payload = normalizeEmployeeToApi(data)
+    const response = await api.post('/hr/employees', data)
-    const response = await api.post('/hr/employees', payload)
+    return response.data.data
-    return normalizeEmployeeFromApi(response.data.data)
   },
 
+  // Update existing employee
   update: async (id: string, data: UpdateEmployeeData): Promise<Employee> => {
-    const payload = normalizeEmployeeToApi(data)
+    const response = await api.put(`/hr/employees/${id}`, data)
-    const response = await api.put(`/hr/employees/${id}`, payload)
+    return response.data.data
-    return normalizeEmployeeFromApi(response.data.data)
   },
 
+  // Delete employee
   delete: async (id: string): Promise<void> => {
     await api.delete(`/hr/employees/${id}`)
   }
 }
 
+// Departments API
+export interface Department {
+  id: string
+  name: string
+  nameAr?: string | null
+  code: string
+  parentId?: string | null
+  parent?: { id: string; name: string; nameAr?: string | null }
+  description?: string | null
+  isActive?: boolean
+  children?: Department[]
+  employees?: any[]
+  positions?: any[]
+  _count?: { children: number; employees: number }
+}
+
 export const departmentsAPI = {
   getAll: async (): Promise<any[]> => {
     const response = await api.get('/hr/departments')
     return response.data.data
+  },
+  getHierarchy: async (): Promise<Department[]> => {
+    const response = await api.get('/hr/departments/hierarchy')
+    return response.data.data
+  },
+  create: async (data: { name: string; nameAr?: string; code: string; parentId?: string; description?: string }) => {
+    const response = await api.post('/hr/departments', data)
+    return response.data.data
+  },
+  update: async (id: string, data: Partial<{ name: string; nameAr: string; code: string; parentId: string | null; description: string; isActive: boolean }>) => {
+    const response = await api.put(`/hr/departments/${id}`, data)
+    return response.data.data
+  },
+  delete: async (id: string) => {
+    await api.delete(`/hr/departments/${id}`)
   }
 }
 
+// Positions API
 export const positionsAPI = {
   getAll: async (): Promise<any[]> => {
     const response = await api.get('/hr/positions')

package-lock.json

@@ -1,14 +1,15 @@
 {
-  "name": "mind14-crm",
+  "name": "z-crm",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "mind14-crm",
+      "name": "z-crm",
       "version": "1.0.0",
       "license": "PROPRIETARY",
       "devDependencies": {
+        "@playwright/test": "^1.58.2",
         "concurrently": "^8.2.2"
       }
     },
@@ -22,6 +23,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -175,6 +192,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -212,6 +244,38 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

package.json

@@ -3,6 +3,9 @@
   "version": "1.0.0",
   "description": "Z.CRM - Enterprise CRM System - Contact Management, Sales, Inventory, Projects, HR, Marketing",
   "scripts": {
+    "capture": "node scripts/capture-page.mjs",
+    "capture:admin": "node scripts/capture-page.mjs /admin",
+    "capture:contacts": "node scripts/capture-page.mjs /contacts",
     "install-all": "npm install && cd backend && npm install && cd ../frontend && npm install",
     "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
     "dev:backend": "cd backend && npm run dev",
@@ -12,11 +15,18 @@
     "start:backend": "cd backend && npm start",
     "start:frontend": "cd frontend && npm start"
   },
-  "keywords": ["crm", "erp", "contact-management", "hr", "inventory", "projects"],
+  "keywords": [
+    "crm",
+    "erp",
+    "contact-management",
+    "hr",
+    "inventory",
+    "projects"
+  ],
   "author": "مجموعة أتمتة",
   "license": "PROPRIETARY",
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "concurrently": "^8.2.2"
   }
 }
-

scripts/backup-staging.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+# Backup staging database to /root/z_crm/backups/ on the server.
+# Usage: SSHPASS=yourpassword ./scripts/backup-staging.sh
+# Or with SSH keys: ./scripts/backup-staging.sh
+#
+# Creates backups/backup_YYYYMMDD_HHMMSS.sql on the staging server.
+
+set -e
+
+STAGING_HOST="${STAGING_HOST:-root@37.60.249.71}"
+BACKUP_DIR="/root/z_crm/backups"
+BACKUP_FILE="backup_$(date +%Y%m%d_%H%M%S).sql"
+
+echo "Backing up staging database..."
+echo "Host: $STAGING_HOST"
+echo "Target: $BACKUP_DIR/$BACKUP_FILE"
+echo ""
+
+CMD="mkdir -p $BACKUP_DIR && cd /root/z_crm && docker compose exec -T postgres pg_dump -U postgres mind14_crm > $BACKUP_DIR/$BACKUP_FILE"
+
+if [ -n "$SSHPASS" ]; then
+  sshpass -e ssh -o StrictHostKeyChecking=no "$STAGING_HOST" "$CMD"
+else
+  ssh -o StrictHostKeyChecking=no "$STAGING_HOST" "$CMD"
+fi
+
+echo "Backup complete."
+echo "File on server: $BACKUP_DIR/$BACKUP_FILE"
+echo "To restore: docker compose exec -T postgres psql -U postgres mind14_crm < $BACKUP_DIR/$BACKUP_FILE"

scripts/capture-page.mjs

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+/**
+ * Capture page screenshot using Playwright.
+ * Logs in and captures the dashboard (or specified path).
+ *
+ * Usage: node scripts/capture-page.mjs [path]
+ *   path: optional, e.g. /dashboard, /admin, /contacts (default: /dashboard)
+ *
+ * Requires: npm install -D @playwright/test && npx playwright install chromium
+ */
+
+import { chromium } from 'playwright';
+import { writeFileSync, mkdirSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const BASE_URL = process.env.CAPTURE_BASE_URL || 'https://zerp.atmata-group.com';
+const LOGIN_EMAIL = process.env.CAPTURE_EMAIL || 'admin@system.local';
+const LOGIN_PASSWORD = process.env.CAPTURE_PASSWORD || 'Admin@123';
+const OUTPUT_DIR = join(__dirname, '..', 'assets');
+const DEFAULT_PATH = process.argv[2] || '/dashboard';
+
+async function capture() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1920, height: 1080 },
+    ignoreHTTPSErrors: true,
+  });
+
+  try {
+    const page = await context.newPage();
+
+    // Navigate to login
+    console.log(`Navigating to ${BASE_URL}/login...`);
+    await page.goto(`${BASE_URL}/login`, { waitUntil: 'networkidle', timeout: 30000 });
+
+    // Login
+    console.log('Logging in...');
+    await page.fill('input[type="email"], input[name="email"]', LOGIN_EMAIL);
+    await page.fill('input[type="password"], input[name="password"]', LOGIN_PASSWORD);
+    await page.click('button[type="submit"], button:has-text("تسجيل الدخول"), button:has-text("Login")');
+
+    // Wait for redirect to dashboard
+    await page.waitForURL(/\/(dashboard|admin|$)/, { timeout: 15000 }).catch(() => {});
+
+    // Navigate to target path if not already there
+    const targetUrl = `${BASE_URL}${DEFAULT_PATH.startsWith('/') ? '' : '/'}${DEFAULT_PATH}`;
+    if (!page.url().includes(DEFAULT_PATH)) {
+      console.log(`Navigating to ${targetUrl}...`);
+      await page.goto(targetUrl, { waitUntil: 'networkidle', timeout: 15000 });
+    }
+
+    await page.waitForLoadState('networkidle');
+    await page.waitForTimeout(2000); // Let any async content render
+
+    mkdirSync(OUTPUT_DIR, { recursive: true });
+    const filename = `capture-${DEFAULT_PATH.replace(/\//g, '-') || 'dashboard'}-${Date.now()}.png`;
+    const filepath = join(OUTPUT_DIR, filename);
+
+    await page.screenshot({ path: filepath, fullPage: true });
+    console.log(`Screenshot saved: ${filepath}`);
+
+    // Also save a fixed name for easy reference
+    const latestPath = join(OUTPUT_DIR, 'capture-latest.png');
+    await page.screenshot({ path: latestPath, fullPage: true });
+    console.log(`Latest screenshot: ${latestPath}`);
+  } finally {
+    await browser.close();
+  }
+}
+
+capture().catch((err) => {
+  console.error('Capture failed:', err);
+  process.exit(1);
+});