Autofill

src/admin/general/OrthancCard.tsx

@@ -80,19 +80,23 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
             cell: (row: any) => {
                 const [show, setShow] = useState(false);
                 return (
-                    <div className="flex items-center">
-                        <Input disabled
-                            className="text-center"
+                    <div className="flex items-center justify-center gap-2">
+                        <Input
+                            disabled
+                            className="text-center "
                             type={show ? "text" : "password"}
-                            value={row.getValue()} />
+                            value={row.getValue()}
+                        />
                         <ToggleEye onToggle={(visible) => setShow(visible)} />
                     </div>
                 );
             },
             header: 'Password'
         },
+
     ];
 
+
     const handleSelectChange = (selectedOption: any) => {
         mutateVerbosity({ level: selectedOption.value });
     };
@@ -116,13 +120,12 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
                 <Table
                     columns={columns}
                     data={[orthancData]}
-                    className="bg-gray-100"
+                    className="justify-center bg-gray-100"
                     headerTextSize='xs'
                     headerColor={Colors.white}
-                />
-            </div>
+                />            </div>
             <CardFooter
-                className="flex justify-center gap-3 border-t-2 border-indigo-100 shadow-inner bg-light">
+                className="flex justify-center gap-3 border-t-2 shadow-inner border-slate-200 bg-light">
                 <Button
                     color={Colors.warning}
                     onClick={reset}>

src/admin/general/RedisCard.tsx

@@ -14,17 +14,19 @@ type RedisCardProps = {
 }
 
 const RedisCard: React.FC<RedisCardProps> = ({ redisData }) => {
-
     const columns: ColumnDef<RedisData>[] = [
         {
             accessorKey: 'address',
-            header: () => 'Address',
+            header: () => <div>Address</div>,
+            cell: ({ getValue }) => (
+                <div>{getValue() as string}</div>
+            ),
         },
         {
             accessorKey: 'port',
-            header: () => 'Port',
+            header: () => <div>Port</div>,
             cell: ({ getValue }) => <Badge value={getValue() as number} />,
-        }
+        },
     ];
 
     return (

src/admin/jobs/JobTable.tsx

@@ -1,19 +1,18 @@
 import { Info } from "../../icons";
 import { Table, Badge, Popover } from "../../ui";
-
 import { Colors } from "../../utils/enums";
 import { JobsAction, OrthancJob } from "../../utils/types";
 import JobActions from "./JobActions";
 
-//!WIP 
-//! Needs to fix implemntation of PopOver
 type JobTableProps = {
   data: OrthancJob[];
   onJobAction: (jobId: string, action: JobsAction) => void;
 };
-const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
 
-  const infoDetails = (rowData: any) => <code><pre className="text-xs">{JSON.stringify(rowData, null, 4)}</pre></code>;
+const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
+  const infoDetails = (rowData: any) => (
+    <code><pre className="text-xs">{JSON.stringify(rowData, null, 4)}</pre></code>
+  );
 
   const columns = [
     {
@@ -26,6 +25,7 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
       cell: (row: any) => (
         <Badge
           value={row.getValue()}
+          className="max-w-[100px] overflow-hidden text-ellipsis"
         />
       ),
       enableColumnFilter: true,
@@ -44,7 +44,7 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
       header: "Action",
       cell: (info: any) => {
         return (
-          <div className="flex justify-center">
+          <div className="flex">
             <JobActions
               jobId={info.row.original.ID}
               onJobAction={onJobAction}
@@ -58,7 +58,13 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
       header: "Info",
       cell: (info: any) => {
         return (
-          <Popover popover={infoDetails(info.row.original)} placement="left" className="w-auto" withOnClick={true}>
+          <Popover 
+            popover={infoDetails(info.row.original)} 
+            placement="left" 
+            className="w-auto"
+            withOnClick={true}
+            backgroundColor="bg-white"
+          >
             <Info size="1.5em" color="gray" className="hover:scale-110" />
           </Popover>
         );
@@ -67,13 +73,18 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
     },
   ];
 
-  return <Table
-    data={data}
-    columns={columns}
-    headerColor={Colors.white}
-    headerTextSize="sm"
-    className="bg-gray-100"
-    enableColumnFilters enableSorting />;
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      headerColor={Colors.white}
+      headerTextSize="sm"
+      className="bg-gray-100"
+      enableColumnFilters
+      enableSorting
+      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer"}
+    />
+  );
 };
 
 export default JobTable;

src/admin/labels/LabelInputForm.tsx

@@ -5,6 +5,7 @@ import { Label } from "../../icons";
 
 type LabelInputFormProps = {
   onCreateLabel: (label: string) => void;
+  className?: string;
 };
 
 const LabelInputForm = function ({ onCreateLabel }: LabelInputFormProps) {
@@ -30,7 +31,7 @@ const LabelInputForm = function ({ onCreateLabel }: LabelInputFormProps) {
         onChange={handleInputChange}
         placeholder="Add new label"
         bordered
-        className="w-full border border-gray-300 rounded-r-none shadow-md rounded-l-xl focus:outline-none focus:ring-2 focus:ring-gray-300" // Ajout de l'ombre ici
+        className="w-full border border-gray-300 rounded-r-none shadow-md rounded-l-xl focus:outline-none focus:ring-2 focus:ring-gray-300"
       />
       <Button
         type="button"

src/admin/labels/LabelRoot.tsx

@@ -1,28 +1,18 @@
 import React from "react";
-
 import { Card, CardBody, CardFooter, CardHeader } from "../../ui";
 import { Colors } from "../../utils/enums";
-
 import { useCustomToast } from "../../utils/toastify";
 import { useCustomMutation, useCustomQuery } from "../../utils/reactQuery";
 import { getLabels, addLabel, removeLabel, getRoles } from "../../services";
-
 import { Label, Role } from "../../utils/types";
 import LabelInputForm from "./LabelInputForm";
 import LabelTable from "./LabelTable";
 
 const LabelRoot: React.FC = () => {
   const { toastSuccess, toastError } = useCustomToast();
 
-  const { data: labelsData } = useCustomQuery<Label[]>(
-    ["labels"],
-    () => getLabels()
-  );
-
-  useCustomQuery<Role[]>(
-    ["roles"],
-    () => getRoles()
-  );
+  const { data: labelsData } = useCustomQuery<Label[]>(["labels"], () => getLabels());
+  useCustomQuery<Role[]>(["roles"], () => getRoles());
 
   const { mutate: mutateAddLabel } = useCustomMutation<void, Label>(
     ({ name }) => addLabel(name),
@@ -55,20 +45,16 @@ const LabelRoot: React.FC = () => {
   const handleDelete = (labelName: string) => {
     mutateRemoveLabel(labelName);
   };
+
   return (
     <Card>
-      <CardHeader
-        centerTitle
-        color={Colors.primary}
-        title={"Manage Labels"}
-      />
+      <CardHeader centerTitle color={Colors.primary} title={"Manage Labels"} />
       <CardBody color={Colors.almond} roundedTopLeft roundedTopRight>
-        <div className="mt-8 mb-8">
-          <LabelInputForm
-            onCreateLabel={(label) => handleCreate({ name: label })}
-          />
+        <LabelInputForm onCreateLabel={(label) => handleCreate({ name: label })} />
+
+        <div className="mt-5"> {/* Ajout de la marge ici */}
+          <LabelTable data={labelsData ?? []} onDeleteLabel={handleDelete} />
         </div>
-        <LabelTable data={labelsData ?? []} onDeleteLabel={handleDelete} />
       </CardBody>
       <CardFooter color={Colors.almond} />
     </Card>

src/admin/labels/LabelTable.tsx

@@ -9,6 +9,7 @@ import { Admin, Trash } from "../../icons";
 interface LabelsTableProps {
   data: LabelType[];
   onDeleteLabel: (labelName: string) => void;
+  className?: string;
 }
 
 const LabelsTable: React.FC<LabelsTableProps> = ({
@@ -29,11 +30,12 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
         id: "roles",
 
         cell: ({ row }: any) => (
-          <div className="flex justify-center gap-2.5">
+          <div className="flex  gap-2.5">
             <Popover
               withOnClick={true}
               popover={<LabelsRoles key={row.original.name} labelName={row.original.name} />}
               placement="bottom"
+              backgroundColor="bg-white"
             >
               <Button color={Colors.secondary} className="flex items-center gap-1.5">
                 <Admin size="1.3rem" />
@@ -57,6 +59,8 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
         ),
       },
     ];
+
+
   }, []);
 
   return (

src/admin/modalities/ModalitiesRoot.tsx

@@ -94,7 +94,7 @@ const ModalitiesRoot: React.FC = () => {
           </div>
         </div>
       </CardBody>
-      <CardFooter color={Colors.light} className="flex justify-center">
+      <CardFooter color={Colors.light} className="flex justify-center border-t-2 shadow-inner border-slate-200 bg-light">
         {!showNewAetCard && (
           <Button color={Colors.success} onClick={handleNewAetClick}>
             <More className="mr-3 "

src/admin/modalities/ModalitiesTable.tsx

@@ -1,7 +1,5 @@
 import React from "react";
-
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Table, Badge, Button } from "../../ui";
 import { Colors } from "../../utils/enums";
 import { Modality } from "../../utils/types";
@@ -18,7 +16,7 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
   onDeleteAet,
   onEchoAet,
 }) => {
-  
+
   const columns: ColumnDef<Modality>[] = [
     {
       accessorKey: "name",
@@ -41,7 +39,7 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
       header: "Actions",
       id: "actions",
       cell: ({ row }) => (
-        <div className="flex justify-center items-center gap-2.5">
+        <div className="flex items-center space-x-2">
           <Button
             onClick={() => onEchoAet(row.original.name)}
             color={Colors.secondary}
@@ -59,15 +57,20 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
     },
   ];
 
+  const getRowClasses = () => {
+    return "hover:bg-indigo-100 hover:cursor-pointer";
+  };
+
   return (
     <Table
       columns={columns}
       data={aetData}
-      headerColor={Colors.white} 
-      headerTextSize="xs"  
+      headerColor={Colors.white}
+      headerTextSize="xs"
       className="bg-gray-100"
       enableColumnFilters
       enableSorting
+      getRowClasses={getRowClasses}
     />
   );
 };

src/admin/peers/PeersTable.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-
 import { ColumnDef } from '@tanstack/react-table';
-
 import { Table, Badge, Button } from '../../ui';
 import { Colors } from '../../utils/enums';
 import { Peer } from '../../utils/types';
@@ -32,7 +30,7 @@ const PeersTable: React.FC<PeersTableProps> = ({ peerData, onDeletePeer, onEchoP
             header: 'Actions',
             id: 'actions',
             cell: ({ row }) => (
-                <div className="flex justify-center items-center gap-2.5">
+                <div className="flex justify-start items-center gap-2.5"> {/* Alignement à gauche */}
                     <Button onClick={() => onEchoPeer(row.original.name)} color={Colors.secondary}>
                         <Wifi />
                     </Button>
@@ -44,14 +42,15 @@ const PeersTable: React.FC<PeersTableProps> = ({ peerData, onDeletePeer, onEchoP
         }
     ];
 
-    return <Table
-        columns={columns}
-        data={peerData}
-        headerTextSize='xs'
-        headerColor={Colors.white}
-        className="bg-gray-100"
-
-    />;
+    return (
+        <Table
+            columns={columns}
+            data={peerData}
+            headerTextSize='xs'
+            headerColor={Colors.white}
+            className="bg-gray-100"
+        />
+    );
 };
 
 export default PeersTable;

src/admin/users/oauth/Oauth.tsx

@@ -54,7 +54,7 @@ const Oauth = () => {
         data={oauth2Config || []} onDelete={deleteOauthHandler} />
 
       <CardFooter
-        className="border-t rounded-b-lg bg-light">
+        className="border-t-2 rounded-b-lg shadow-inner bg-light border-slate-200">
         <div className="flex justify-center w-full">
           {!showOauthForm ? (
             <Button