Content actions

src/App.tsx

@@ -4,7 +4,7 @@ import WelcomeRoot from "./welcome/WelcomeRoot";
 import RootApp from "./root/RootApp";
 import "preline/preline";
 import { IStaticMethods } from "preline/preline";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 declare global {
   interface Window {
@@ -15,14 +15,22 @@ declare global {
 function App() {
   const isLogged = useSelector((state: RootState) => state.user.isLogged);
   const location = useLocation();
+  const [isDark, setDark] = useState(localStorage.getItem('theme') === 'dark')
+
+  useEffect(() => {
+    window.onstorage = () => {
+      const isDark = localStorage.getItem('theme') === 'dark';
+      setDark(isDark);
+    };
+  }, []);
 
   useEffect(() => {
     window.HSStaticMethods.autoInit();
   }, [location.pathname]);
 
 
   return (
-    <div className="w-screen h-screen">
+    <div className={`w-screen h-screen ${isDark ? 'dark' : ''}`}>
       {isLogged ? <RootApp /> : <WelcomeRoot />}
     </div>
   )

src/admin/general/General.tsx

@@ -22,7 +22,7 @@ const General = () => {
 
   return (
     <div
-      className="mx-4 mt-4 mb-4 shadow-md bg-almond rounded-xl"
+      className="mx-4 mt-4 mb-4 shadow-md bg-almond 292929 rounded-xl"
       data-gaelo-flow="general-root"
     >
       <Tabs className="bg-primary rounded-t-xl">

src/admin/general/OrthancCard.tsx

@@ -123,8 +123,9 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
                     className="justify-center bg-gray-100"
                     headerTextSize='xs'
                     headerColor={Colors.white}
+                    headerclassName='text-center'
                 />            </div>
-            <CardFooter className="flex justify-center gap-3 py-2 border-t-2 shadow-inner border-slate-200 bg-light">
+            <CardFooter className="flex justify-center gap-3 py-2 border-t-2 shadow-inner border-slate-200 dark:border-neutral-700 bg-light dark:bg-slate-950">
                 <Button
                     color={Colors.warning}
                     onClick={reset}

src/admin/jobs/JobRoot.tsx

@@ -35,18 +35,19 @@ const JobRoot = () => {
 
   if (isLoadingJobs) return <Spinner />;
   return (
-    <Card className="l bg-almond">
+    <Card className="l bg-almond dark:bg-neutral-500">
       <CardHeader
         centerTitle
         color={Colors.primary}
         title={"Manage Jobs"}
       />
-      <CardBody color={Colors.almond} roundedTopLeft roundedTopRight>
+      <CardBody
+        color={Colors.almond} roundedTopLeft roundedTopRight
+        className="rounded dark:bg-neutral-500 rounded-br-2xl rounded-bl-2xl">
         <div className="w-full ">
           <JobTable data={jobData as any} onJobAction={handleJobAction} />
         </div>
       </CardBody>
-      <CardFooter className="flex justify-center bg-almond"></CardFooter>
     </Card>
   );
 };

src/admin/jobs/JobTable.tsx

@@ -61,11 +61,11 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
           <Popover 
             popover={infoDetails(info.row.original)} 
             placement="left" 
-            className="w-auto"
+            className="w-auto "
             withOnClick={true}
-            backgroundColor="bg-white"
+            backgroundColor="bg-white "
           >
-            <Info size="1.5em" color="gray" className="hover:scale-110" />
+            <Info size="1.5em"  className="hover:scale-110 " />
           </Popover>
         );
       },
@@ -79,10 +79,10 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
       columns={columns}
       headerColor={Colors.white}
       headerTextSize="sm"
-      className="bg-gray-100"
+      className="bg-gray-100 dark:bg-slate-950 dark:text-white"
       enableColumnFilters
       enableSorting
-      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer"}
+      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-700 hover:cursor-pointer"}
     />
   );
 };

src/admin/labels/LabelInputForm.tsx

@@ -25,7 +25,7 @@ const LabelInputForm = function ({ onCreateLabel }: LabelInputFormProps) {
   return (
     <div className="relative flex items-center">
       <Input
-        svgLeft={<Label className="text-2xl text-gray-400" />}
+        svgLeft={<Label className="text-2xl text-gray-400 dark:text-white" />}
         type="text"
         value={label ?? ""}
         onChange={handleInputChange}

src/admin/labels/LabelRoot.tsx

@@ -49,14 +49,16 @@ const LabelRoot: React.FC = () => {
   return (
     <Card>
       <CardHeader centerTitle color={Colors.primary} title={"Manage Labels"} />
-      <CardBody color={Colors.almond} roundedTopLeft roundedTopRight>
+      <CardBody
+        color={Colors.almond}
+        className="dark:bg-neutral-500 rounded-br-2xl rounded-bl-2xl">
         <LabelInputForm onCreateLabel={(label) => handleCreate({ name: label })} />
-        
+
         <div className="mt-5">
-          <LabelTable data={labelsData ?? []} onDeleteLabel={handleDelete} />
+          <LabelTable
+            data={labelsData ?? []} onDeleteLabel={handleDelete} />
         </div>
       </CardBody>
-      <CardFooter color={Colors.almond} />
     </Card>
   );
 };

src/admin/labels/LabelTable.tsx

@@ -18,7 +18,7 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
 }) => {
   const rows = useMemo(() => data, [data]);
 
- const columns = useMemo(() => {
+  const columns = useMemo(() => {
     return [
       {
         accessorKey: "name",
@@ -34,12 +34,13 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
             <Popover
               withOnClick={true}
               popover={<LabelsRoles key={row.original.name} labelName={row.original.name} />}
-              placement="bottom"
+              placement="top"
               backgroundColor="bg-white"
+              width="200px"
             >
               <Button color={Colors.secondary} className="flex items-center gap-1.5">
                 <Admin size="1.3rem" />
-                <ToggleChevron isOpen={false} />
+                <ToggleChevron isOpen={false} /> 
               </Button>
             </Popover>
           </div>
@@ -60,7 +61,7 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
       },
     ];
 
-    
+
   }, []);
 
   return (
@@ -69,9 +70,11 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
       data={rows}
       headerColor={Colors.white}
       headerTextSize="xs"
-      className="bg-gray-100"
+      className="bg-gray-100 dark:bg-slate-950 dark:text-white"
       enableColumnFilters
       enableSorting
+      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-700 hover:cursor-pointer"}
+
     />
   );
 };

src/admin/labels/LabelsRoles.tsx

@@ -3,31 +3,30 @@ import { Role, useCustomMutation, useCustomQuery } from "../../utils";
 import { getRoles, getRolesByLabelName } from "../../services";
 import { Spinner } from "../../ui";
 import { addLabelToRole, removeLabelFromRole } from "../../services/roles";
-
+import Checkbox from "../../ui/Checkbox";
 type LabelsRolesProps = {
   labelName: string;
 };
 
 const LabelsRoles = ({ labelName }: LabelsRolesProps) => {
-
-  const { data: roles, isLoading: isLoadingRoles } = useCustomQuery<
+  const { data: roles, isLoading: isRolesLoading, error: rolesError } = useCustomQuery<
     Role[],
     string[]
   >(["roles"], () => getRoles(), {
     select: (roles) => roles.map((role) => role.name),
   });
-  
-  const { data: existingRoles, isLoading: isLoadingExistingRoles } =
+
+  const { data: existingRoles, isLoading: isExistingRolesLoading, error: existingRolesError } =
     useCustomQuery<string[]>(["labels", labelName], () =>
       getRolesByLabelName(labelName)
     );
 
-  const { mutate: addRoleMutation } = useCustomMutation<void>(
+  const { mutate: addRoleMutation, error: addRoleError } = useCustomMutation<void>(
     ({ role }) => addLabelToRole(role, labelName),
     [["labels", labelName]]
   );
 
-  const { mutate: removeRoleMutation } = useCustomMutation<void>(
+  const { mutate: removeRoleMutation, error: removeRoleError } = useCustomMutation<void>(
     ({ role }) => removeLabelFromRole(role, labelName),
     [["labels", labelName]]
   );
@@ -38,23 +37,32 @@ const LabelsRoles = ({ labelName }: LabelsRolesProps) => {
   ) => {
     const checked = event.target.checked;
     if (checked) {
-      addRoleMutation({ role: name });
+      if (!existingRoles?.includes(name)) {
+        addRoleMutation({ role: name });
+      }
     } else {
       removeRoleMutation({ role: name });
     }
   };
 
-  if (isLoadingRoles || isLoadingExistingRoles) {
+  if (isRolesLoading || isExistingRolesLoading) {
     return <Spinner />;
   }
 
+  if (rolesError || existingRolesError) {
+    return <div>Erreur de chargement des données</div>;
+  }
+
+  if (addRoleError || removeRoleError) {
+    return <div>Erreur de mutation</div>;
+  }
+
   return (
     <div className="flex flex-col w-80">
       {roles?.map((role) => {
         return (
           <div key={role} className="flex items-center gap-2 my-2">
-            <input
-              type="checkbox"
+            <Checkbox
               name={role}
               checked={existingRoles?.includes(role)}
               onChange={(event) => handleRoleChange(role, event)}
@@ -67,4 +75,4 @@ const LabelsRoles = ({ labelName }: LabelsRolesProps) => {
   );
 };
 
-export default LabelsRoles;
+export default LabelsRoles;

src/admin/modalities/ModalitiesRoot.tsx

@@ -83,7 +83,7 @@ const ModalitiesRoot: React.FC = () => {
         color={Colors.primary}
         title={"Manage Modalities"}
       />
-      <CardBody color={Colors.almond} className="space-x-2">
+      <CardBody color={Colors.almond} className="space-x-2 dark:bg-neutral-500">
         <div className="w-full mt-2 mb-2">
           <ModalitiesTable
             aetData={aets}
@@ -94,7 +94,7 @@ const ModalitiesRoot: React.FC = () => {
       </CardBody>
       <CardFooter
         color={Colors.light}
-        className="flex flex-col justify-center py-4 border-t-2 shadow-inner sm:flex-row border-slate-200 bg-light"
+        className="flex flex-col justify-center py-4 border-t-2 shadow-inner sm:flex-row border-slate-200 dark:border-neutral-700 bg-light dark:bg-slate-950"
       >
         {!showNewAetCard && (
           <Button color={Colors.success} onClick={handleNewAetClick} className="w-full mb-4 sm:w-auto sm:mb-0">

src/admin/modalities/ModalitiesTable.tsx

@@ -58,16 +58,15 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
   ];
 
   const getRowClasses = () => {
-    return "hover:bg-indigo-100 hover:cursor-pointer";
-  };
+    return "hover:bg-indigo-100 dark:hover:bg-indigo-700 hover:cursor-pointer";  };
 
   return (
     <Table
       columns={columns}
       data={aetData}
       headerColor={Colors.white}
       headerTextSize="xs"
-      className="bg-gray-100"
+      className="bg-gray-100 dark:bg-slate-950 dark:text-white"
       enableColumnFilters
       enableSorting
       getRowClasses={getRowClasses}

src/admin/modalities/NewModalityCard.tsx

@@ -83,7 +83,7 @@ const NewModalityCard: React.FC<NewModalityCardProps> = ({
 
   return (
     <FormCard
-    className="w-full bg-light-gray"
+    className="w-full bg-light-gray dark:bg-neutral-500"
     title="Create New Modality"
     onClose={onClose}
     onSubmit={handleSubmit}

src/admin/peers/NewPeerCard.tsx

@@ -23,7 +23,7 @@ const NewPeerCard: React.FC<NewPeerCardProps> = ({ onClose, onCreatePeer }) => {
 
     return (
         <FormCard
-            className="w-full bg-light-gray"
+            className="w-full bg-light-gray dark:bg-neutral-500"
             title="Create New Peer"
             onClose={onClose}
             onSubmit={handleSubmit}

src/admin/peers/PeersRoot.tsx

@@ -68,7 +68,7 @@ const PeersRoot: React.FC = () => {
         color={Colors.primary}
         title={"Manage Peers"}
       />
-      <CardBody className="space-x-4 bg-almond">
+      <CardBody className="space-x-4 bg-almond dark:bg-neutral-500">
         <div className="flex flex-col items-center">
           <div className="w-full mt-2 mb-2">
             <PeersTable
@@ -83,7 +83,7 @@ const PeersRoot: React.FC = () => {
           </div>
         </div>
       </CardBody>
-      <CardFooter className="flex justify-center py-4 border-t-2 shadow-inner border-slate-200 bg-light"> {/* Classe corrigée ici */}
+      <CardFooter className="flex justify-center py-4 border-t-2 shadow-inner border-slate-200 dark:border-neutral-700 dark:bg-slate-950 bg-light">
         {!showNewPeerCard && (
           <Button color={Colors.success} onClick={handleNewPeerClick}>
             <More className="mr-3" size={24} /> New Peer

src/admin/queues/QueuesRoot.tsx

@@ -44,6 +44,7 @@ const QueuesRoot = () => {
         roundedTopRight={false}
         roundedBottomLeft
         roundedBottomRight
+        className="dark:bg-neutral-500"
       >
         <Routes>
           <Route

src/admin/queues/Retrieve.tsx

@@ -98,8 +98,11 @@ const Retrieve = ({ data }: RetrieveProps) => {
       className="w-full rounded-br-xl rounded-bl-xl"
     >
       <Card bordered>
-        <CardHeader centerTitle title="Retrieve Schedule Time : " color={Colors.success} />
-        <CardBody color={Colors.light} roundedBottomLeft roundedBottomRight>
+        <CardHeader centerTitle 
+        title="Retrieve Schedule Time : " color={Colors.success} />
+        <CardBody 
+        color={Colors.light} roundedBottomLeft roundedBottomRight
+        className="dark:bg-neutral-800 dark:text-white">
           <div className="flex flex-col items-center justify-between gap-4 mt-1 sm:flex-row sm:gap-12">
             <Input
               type="time"

src/admin/users/UsersRoot.tsx

@@ -19,8 +19,8 @@ const UsersRoot = () => {
     const isOauth2Path = path.endsWith("oauth2");
 
     return (
-        <Card className="bg-white shadow-md rounded-xl" data-gaelo-flow="users-root">
-            <Tabs className=" bg-light-gray rounded-t-xl">
+        <Card className="bg-white shadow-md rounded-2xl" data-gaelo-flow="users-root">
+            <Tabs className=" bg-light-gray rounded-t-2xl">
                 <Tab
                     title="Users"
                     active={isUsersPath}
@@ -42,7 +42,8 @@ const UsersRoot = () => {
                 roundedTopLeft={false} 
                 roundedTopRight={false} 
                 roundedBottomLeft={false} 
-                roundedBottomRight={false}>
+                roundedBottomRight={false}
+                className="rounded-br-2xl rounded-bl-2xl dark:bg-neutral-500">
                 <Routes>
                     <Route path="/users" element={<Users />} />
                     <Route path="/roles" element={<Roles />} />

src/admin/users/oauth/Oauth.tsx

@@ -49,12 +49,12 @@ const Oauth = () => {
   if (isLoadingOauthConfig) return <Spinner />;
 
   return (
-    <div data-gaelo-flow="oauth" className="rounded-br-xl rounded-bl-xl">
+    <div data-gaelo-flow="oauth" className="flex flex-col justify-center">
       <Oauth2Table
         data={oauth2Config || []} onDelete={deleteOauthHandler} />
 
       <CardFooter
-        className="border-t-2 rounded-b-lg shadow-inner bg-light border-slate-200">
+        className="border-t-2 rounded-b-lg shadow-inner bg-light border-slate-200 dark:border-neutral-700 dark:bg-slate-950">
         <div className="flex justify-center w-full">
           {!showOauthForm ? (
             <Button