fix ui

apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx

@@ -436,7 +436,7 @@ export const TeamMembers = ({
       return (
         <div className="flex justify-center py-10">
           <div className="flex flex-col items-center">
-            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
+            <div className="w-8 h-8 border-4 border-t-primary-500 border-primary-200 rounded-full animate-spin mb-2"></div>
             <p className="text-sm text-gray-500 dark:text-gray-400">Loading team members...</p>
           </div>
         </div>
@@ -497,7 +497,7 @@ export const TeamMembers = ({
           {selectedEmployee && (
             <div className="flex flex-col items-center space-y-4 py-4">
               <Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
-                <AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
+                <AvatarFallback className="text-xl bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
                   {getInitials(
                     localizedName(selectedEmployee.user.name),
                   ).toUpperCase()}
@@ -532,7 +532,7 @@ export const TeamMembers = ({
                 </div>
 
                 <div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
-                  <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400">
                     <Mail className="w-5 h-5" />
                   </div>
                   <div>
@@ -545,7 +545,7 @@ export const TeamMembers = ({
                   </div>
                 </div>
                 <div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
-                  <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400">
                     <PhoneCall className="w-5 h-5" />
                   </div>
                   <div>
@@ -574,7 +574,7 @@ export const TeamMembers = ({
           {selectedEmployee && (
             <div className="flex flex-col items-center space-y-4 py-4">
               <Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
-                <AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
+                <AvatarFallback className="text-xl bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
                   {getInitials(
                     localizedName(selectedEmployee.user.name),
                   ).toUpperCase()}

apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx

@@ -493,7 +493,7 @@ const UserManagementTree = () => {
             size="sm"
             onClick={() => setShowEmployeeSearch(true)}
             disabled={!organizationId}
-            className="bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 whitespace-nowrap dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800 dark:hover:bg-blue-900/50"
+            className="bg-primary-50 text-primary-700 border-primary-200 hover:bg-primary-100 whitespace-nowrap dark:bg-primary-900/30 dark:text-primary-400 dark:border-primary-800 dark:hover:bg-primary-900/50"
           >
             <UserCircle className="h-4 w-4 mr-2" />
             {t("search.searchAllEmployees")}
@@ -526,7 +526,7 @@ const UserManagementTree = () => {
               size="sm"
               onClick={() => setShowResendModal(true)}
               disabled={isSendingInvitations}
-              className="border border-blue-200 bg-blue-50 text-blue-700 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-200 dark:hover:border-blue-700 dark:hover:bg-blue-900 dark:hover:text-white"
+              className="border border-primary-200 bg-primary-50 text-primary-700 hover:border-primary-300 hover:bg-primary-100 dark:border-primary-900 dark:bg-primary-950 dark:text-primary-200 dark:hover:border-primary-700 dark:hover:bg-primary-900 dark:hover:text-white"
             >
               <Mail className="h-4 w-4 mr-2" />
               {t("userManagement.resendInvitation", "Resend Invitation")}

apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx

@@ -89,7 +89,7 @@ export function ViewUsers({ unitId, onClose }: ViewUsersProps) {
       case "admin":
         return "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300";
       case "manager":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300";
+        return "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300";
       default:
         return "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300";
     }

apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx

@@ -149,7 +149,7 @@ export const OrganizationEmployeeSearch: React.FC<
       return (
         <div className="flex justify-center py-12">
           <div className="flex flex-col items-center">
-            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
+            <div className="w-8 h-8 border-4 border-t-primary-500 border-primary-200 rounded-full animate-spin mb-2"></div>
             <p className="text-sm text-gray-500 dark:text-gray-400">
               {t("search.searchingEmployees")}
             </p>

apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx

@@ -66,7 +66,7 @@ export const UnitSelectionModal: React.FC<UnitSelectionModalProps> = ({
       {isLoading ? (
         <div className="text-center py-12">
           <div className="flex flex-col items-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
             <p className="mt-2 dark:text-gray-400">{t("loadingUnits")}</p>
           </div>
         </div>
@@ -79,7 +79,7 @@ export const UnitSelectionModal: React.FC<UnitSelectionModalProps> = ({
                 <button
                   key={unit.id}
                   onClick={() => onSelectUnit(unit.id)}
-                  className="w-full text-left p-4 rounded border border-gray-200 hover:bg-gray-100 hover:shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-blue-400"
+                  className="w-full text-left p-4 rounded border border-gray-200 hover:bg-gray-100 hover:shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 cursor-pointer dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-primary-400"
                 >
                   <div className="font-medium dark:text-gray-200 truncate">
                     {unit.name?.en || unit.name}

apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx

@@ -107,7 +107,7 @@ export const EmployeePositionsDialog: React.FC<
         <DialogContent className="sm:max-w-lg dark:bg-gray-800">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 dark:text-white">
-              <Briefcase className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+              <Briefcase className="h-5 w-5 text-primary-600 dark:text-primary-400" />
               {t("positions.employeePositions")}
             </DialogTitle>
           </DialogHeader>
@@ -133,7 +133,7 @@ export const EmployeePositionsDialog: React.FC<
                     key={position.id}
                     className="flex items-center justify-between p-4 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
                     <div className="flex items-center gap-3 flex-1">
-                      <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400">
+                      <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/40 text-primary-600 dark:text-primary-400">
                         <Briefcase className="h-4 w-4" />
                       </div>
                       <div className="min-w-0 flex-1">

apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx

@@ -182,7 +182,7 @@ export const DepartmentList = ({
                   key={pos.id}
                   className={cn(
                     "flex items-center gap-2 text-sm py-1 pl-8 border-l-2 border-primary-100 dark:border-primary-800 ml-4 text-gray-800 dark:text-gray-200",
-                    expandedState[pos.id] ? "bg-blue-50 dark:bg-blue-900/20" : "hover:bg-blue-50 dark:hover:bg-blue-900/20"
+                    expandedState[pos.id] ? "bg-primary-50 dark:bg-primary-900/20" : "hover:bg-primary-50 dark:hover:bg-primary-900/20"
                   )}
                   onClick={() => toggleExpand(pos.id)}
                 >
@@ -200,7 +200,7 @@ export const DepartmentList = ({
                         }}
                       />
                       <FolderPlus
-                        className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
+                        className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"
                         onClick={(e) => {
                           e.stopPropagation();
                           onAddPosition?.(pos.id, "sub");