update system auth with permissions and complete integrations

apps/desk/src/renderer/src/components/EditProfile.tsx

@@ -1,26 +1,58 @@
-import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Avatar, AvatarImage, AvatarFallback } from './ui/avatar';
-import { Button } from './ui/button';
-import { Label } from './ui/label';
-import { Input } from './ui/input';
-import { useTranslate } from '@renderer/hooks/useTranslate';
 import Profile_Img from '@renderer/assets/images/profile_img.png';
+import { User } from '@renderer/hooks/api/user/me';
+import useUpdateUser from '@renderer/hooks/api/user/useUpdateUser';
+import { useTranslate } from '@renderer/hooks/useTranslate';
 import { EditProfileSchema } from '@renderer/utils/schemas/formSchema';
+import { UploadIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+//TODO: USE REUSABLE FORM FIELDS COMPOONENT @PAPOCHA
+
+export default function EditProfile({ data }: { data: User }): JSX.Element {
 
-export default function EditProfile(): JSX.Element {
   const { t, isRtl } = useTranslate();
 
+  const mutation = useUpdateUser();
+
+  const defaultValues = useMemo(() => {
+    return {
+      firstName: data?.firstName ?? '',
+      lastName: data?.lastName ?? '',
+      email: data?.email ?? '',
+      id: data?.id ?? '',
+    };
+  }, [data]);
+
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm({
     resolver: zodResolver(EditProfileSchema),
+    defaultValues: {
+      firstName: defaultValues?.firstName ?? '',
+      lastName: defaultValues?.lastName ?? '',
+      email: defaultValues?.email ?? '',
+    },
   });
 
   const onSubmit = (data: any) => {
-    console.log('Form Data:', data);
+    mutation.mutate({
+      userId: defaultValues?.id ?? '',
+      data: {
+        firstName: defaultValues.firstName === data.firstName ? undefined : data.firstName,
+        lastName: defaultValues.lastName === data.lastName ? undefined : data.lastName,
+        email:  defaultValues.email === data.email ? undefined : data.email,
+        //TODO: add phone
+        // phone: data.phone
+      },
+    });
   };
 
   return (
@@ -108,7 +140,7 @@ export default function EditProfile(): JSX.Element {
               </p>
             )}
           </div>
-          <div>
+          {/* <div>
             <Label
               htmlFor="currentPassword"
               className="text-gray-700 font-medium"
@@ -164,20 +196,13 @@ export default function EditProfile(): JSX.Element {
                 {errors.confirmPassword.message?.toString()}
               </p>
             )}
-          </div>
+          </div> */}
         </div>
 
         {/* Footer Buttons */}
         <div
-          className={`flex ${isRtl ? 'justify-start' : 'justify-end'} mt-12 space-x-4`}
+          className={`flex mt-12 space-x-4`}
         >
-          <Button
-            type="button"
-            variant="outline"
-            className="text-gray-600 border-gray-300 hover:bg-gray-100 transition-colors rounded-md"
-          >
-            {t('buttons.cancel')}
-          </Button>
           <Button
             type="submit"
             className="bg-blue-600 text-white hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-md"
@@ -188,25 +213,4 @@ export default function EditProfile(): JSX.Element {
       </form>
     </div>
   );
-}
-
-function UploadIcon(props): JSX.Element {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-      <polyline points="17 8 12 3 7 8" />
-      <line x1="12" x2="12" y1="3" y2="15" />
-    </svg>
-  );
-}
+}

apps/desk/src/renderer/src/components/EditeSettings.tsx

@@ -0,0 +1,58 @@
+import useRegistrations from '@renderer/hooks/useRegistrations';
+import { useTranslate } from '@renderer/hooks/useTranslate';
+import { Card, CardContent, CardHeader } from './ui/card';
+import { OrganizationFormData } from '@renderer/utils/schemas/formSchema';
+import FormInputItem from './ui/form-input-item';
+import { registrationFields } from '@renderer/data/organinzation-fields-input';
+import { Button } from './ui/button';
+import { FaSpinner } from 'react-icons/fa';
+import { OrganizationsData } from '@renderer/hooks/api/organization/get-all-organizations';
+
+export default function EditeSettings({ data }: { data: OrganizationsData }) {
+  const { methods, isPending, handleSubmit, defaultValues } =
+    useRegistrations(data);
+  const { t } = useTranslate();
+
+  return (
+    <div className="p-4  py-6 space-y-6 w-screen h-screen">
+      <h1 className="text-2xl font-semibold text-gray-950">
+        {t('registration.EditOrganization')}
+      </h1>
+      <form onSubmit={methods.handleSubmit(handleSubmit)} className="space-y-6">
+        <Card className="flex flex-col gap-4 ">
+          <CardHeader className="text-sm rounded-sm text-green-600 bg-green-100 font-bold  p-0 w-fit">
+            {t('registration.title')}
+          </CardHeader>
+          <CardContent className="">
+            <div className="grid grid-cols-3 gap-4">
+              {registrationFields.map((field) => (
+                <FormInputItem
+                  key={field.name}
+                  label={field.label}
+                  placeholder={field.placeholder}
+                  register={methods.register(
+                    field.name as keyof OrganizationFormData
+                  )}
+                  value={
+                    defaultValues[field.name as keyof OrganizationFormData] ??
+                    ''
+                  }
+                  error={methods.formState.errors[field.name]?.message}
+                  required={field.required}
+                  isLogoInput={field.isLogoInput}
+                />
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+        <Button
+          type="submit"
+          className="custom-button bg-blue-600"
+          disabled={isPending}
+        >
+          {isPending ? <FaSpinner className="" /> : t('buttons.save')}
+        </Button>
+      </form>
+    </div>
+  );
+}

apps/desk/src/renderer/src/components/Sidebar.tsx

@@ -1,15 +1,20 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from '@tanstack/react-router';
 import { navItems } from '@renderer/data/sidebar-items';
+import { useAppSelector } from '@renderer/store/hooks';
+import { Link } from '@tanstack/react-router';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export default function Sidebar() {
   const [active, setActive] = useState('home');
   const { t } = useTranslation();
 
-  useEffect(() => {
-    // Example: Handle any required logic on mount
-  }, []);
+  const { isAccountActivated, userRole, userProfile } = useAppSelector(
+    (state) => ({
+      isAccountActivated: state.auth.auth.isAccountActivated,
+      userRole: state.auth.auth.role,
+      userProfile: state.auth.auth.userType,
+    })
+  );
 
   return (
     <div className="h-screen w-64 bg-gray-50 border-r border-gray-200 p-4">
@@ -20,22 +25,24 @@ export default function Sidebar() {
           {t('sidebar.sections.dashboard')}
         </div>
         <ul className="flex flex-col gap-2">
-          {navItems.map((item) => (
-            <li key={item.name}>
-              <Link
-                href={item.href}
-                className={`flex items-center px-4 py-2 gap-3 rounded-md text-sm font-medium transition-colors duration-200 ${
-                  active === item.name
-                    ? 'bg-blue-100 text-blue-500'
-                    : 'text-gray-600 hover:bg-blue-50 hover:text-blue-500'
-                }`}
-                onClick={() => setActive(item.name)}
-              >
-                {item.icon && <item.icon className="h-5 w-5 text-gray-400" />}
-                <span>{t(item.label)}</span>
-              </Link>
-            </li>
-          ))}
+          {navItems(isAccountActivated, userRole, userProfile)
+            .filter((item) => item.canVue)
+            .map((item) => (
+              <li key={item.name}>
+                <Link
+                  href={item.href}
+                  className={`flex items-center px-4 py-2 gap-3 rounded-md text-sm font-medium transition-colors duration-200 ${
+                    active === item.name
+                      ? 'bg-blue-100 text-blue-500'
+                      : 'text-gray-600 hover:bg-blue-50 hover:text-blue-500'
+                  }`}
+                  onClick={() => setActive(item.name)}
+                >
+                  {item.icon && <item.icon className="h-5 w-5 text-gray-400" />}
+                  <span>{t(item.label)}</span>
+                </Link>
+              </li>
+            ))}
         </ul>
 
         {/* Others Section */}

apps/desk/src/renderer/src/components/UsersTable.tsx

@@ -8,16 +8,12 @@ import EditUsers from './formations/edit-users';
 export interface UsersProps {
   data: Users[];
 }
-// type UserRollType = 'admin' | 'user' | 'owner';
 
 export default function UsersTable ({data} : {data: Users[]}) {
   const [component, setComponent] = useState<Components>('table');
 
   const [defaultValue, setdefaultValue] = useState<Users | null>(null);
 
-  // const 
-
-
   const { isRtl } = useTranslate();
 
   return (