From 66ac8a983d264c3c6c48cf4bd040327f064d1d39 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 17:19:21 +0100
Subject: [PATCH 01/30] Add form component

---
 app/next-client-app/components/ui/form.tsx | 173 +++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 app/next-client-app/components/ui/form.tsx

diff --git a/app/next-client-app/components/ui/form.tsx b/app/next-client-app/components/ui/form.tsx
new file mode 100644
index 000000000..27c6e3551
--- /dev/null
+++ b/app/next-client-app/components/ui/form.tsx
@@ -0,0 +1,173 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Formik,
+  FormikContextType,
+  useFormikContext,
+  Field,
+  FieldProps,
+  type FormikConfig,
+  type FormikValues,
+} from "formik"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = Formik
+
+type FormFieldContextValue = {
+  name: string
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+interface FormFieldProps {
+  name: string
+  children: (props: FieldProps) => React.ReactNode
+}
+
+const FormField = ({ name, children }: FormFieldProps) => {
+  return (
+    <FormFieldContext.Provider value={{ name }}>
+      <Field name={name}>
+        {children}
+      </Field>
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const formik = useFormikContext()
+  
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+  const fieldName = fieldContext.name
+  
+  // Get field state from Formik
+  const fieldState = {
+    error: formik.errors[fieldName] as string | undefined,
+    invalid: !!(formik.errors[fieldName] && formik.touched[fieldName]),
+    isDirty: formik.dirty,
+    isTouched: formik.touched[fieldName] as boolean | undefined,
+  }
+
+  return {
+    id,
+    name: fieldName,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

From 481140eb04355ce019f7773ba82c42a545c1df88 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 18:13:26 +0100
Subject: [PATCH 02/30] First urn

---
 .../components/datasets/CreateDatasetForm.tsx | 255 +++++++++---------
 .../form-components/FormikSelectUsers.tsx     |   8 +-
 app/next-client-app/components/ui/form.tsx    |   8 +-
 3 files changed, 138 insertions(+), 133 deletions(-)

diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
index 7340825c6..39a929c8e 100644
--- a/app/next-client-app/components/datasets/CreateDatasetForm.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -3,12 +3,11 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { AlertCircle, SquarePlus } from "lucide-react";
-import { Label } from "@/components/ui/label";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
-import { Form, Formik } from "formik";
+import { Formik } from "formik";
 import { toast } from "sonner";
 import { FormDataFilter } from "../form-components/FormikUtils";
-import { Tooltips } from "../core/Tooltips";
 import { FormikSelect } from "../form-components/FormikSelect";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useState } from "react";
@@ -111,18 +110,15 @@ export function CreateDatasetForm({
         }}
       >
         {({ values, handleChange, handleSubmit }) => (
-          <Form className="w-full" onSubmit={handleSubmit}>
+          <form className="w-full" onSubmit={handleSubmit}>
             <div className="flex flex-col gap-3 text-lg">
-              {!dataPartnerID && (
-                <>
-                  <div className="flex flex-col gap-2">
-                    <h3 className="flex">
-                      Data Partner{" "}
-                      <Tooltips
-                        content="The Data Partner that owns the Dataset of the new Scan Report."
-                        link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
-                      />
-                    </h3>
+                            {!dataPartnerID && (
+                <FormItem>
+                  <FormLabel>Data Partner</FormLabel>
+                  <FormDescription>
+                    The Data Partner that owns the Dataset of the new Scan Report.
+                  </FormDescription>
+                  <FormControl>
                     <FormikSelect
                       options={partnerOptions}
                       name="dataPartner"
@@ -131,127 +127,138 @@ export function CreateDatasetForm({
                       isDisabled={false}
                       required={true}
                     />
-                  </div>
-                </>
+                  </FormControl>
+                </FormItem>
               )}
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  Dataset Name
-                  <Tooltips content="Name of the new Dataset." />
-                </h3>
-                <Input
-                  onChange={handleChange}
-                  name="name"
-                  className="text-lg"
-                  required
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3 className="flex items-center">
-                  {" "}
-                  Projects
-                  <Tooltips
-                    content="A Project is the highest-level object. A single Dataset may live in more than one Project."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/"
-                  />
-                </h3>
-                <FormikSelect
-                  options={projectOptions}
-                  name="projects"
-                  placeholder="Select Projects"
-                  isMulti={true}
-                  isDisabled={false}
-                  required={true}
-                />
-              </div>
-              <div className="flex items-center space-x-3">
-                <h3 className="flex">
-                  Visibility
-                  <Tooltips
-                    content="If a Dataset is shared, then all users with access to any project associated to the Dataset will have Dataset viewer permissions."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
+              
+              <FormField name="name">
+                {({ field }) => (
+                  <FormItem>
+                    <FormLabel>Dataset Name</FormLabel>
+                    <FormDescription>
+                      Name of the new Dataset.
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        onChange={handleChange}
+                        name="name"
+                        required
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
+              <FormItem>
+                <FormLabel>Projects</FormLabel>
+                <FormDescription>
+                  A Project is the highest-level object. A single Dataset may live in more than one Project.
+                </FormDescription>
+                <FormControl>
+                  <FormikSelect
+                    options={projectOptions}
+                    name="projects"
+                    placeholder="Select Projects"
+                    isMulti={true}
+                    isDisabled={false}
+                    required={true}
                   />
-                </h3>
-                <Switch
-                  onCheckedChange={(checked) => {
-                    handleChange({
-                      target: {
-                        name: "visibility",
-                        value: checked ? "PUBLIC" : "RESTRICTED",
-                      },
-                    });
-                    setPublicVisibility(checked);
-                  }}
-                  defaultChecked
-                />
-                <Label className="text-lg">
-                  {/* Show user-friendly label */}
-                  {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
-                </Label>
-              </div>
+                </FormControl>
+              </FormItem>
+
+              <FormField name="visibility">
+                {({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center space-x-3">
+                      <FormLabel>Visibility</FormLabel>
+                      <FormControl>
+                        <Switch
+                          onCheckedChange={(checked) => {
+                            handleChange({
+                              target: {
+                                name: "visibility",
+                                value: checked ? "PUBLIC" : "RESTRICTED",
+                              },
+                            });
+                            setPublicVisibility(checked);
+                          }}
+                          defaultChecked
+                        />
+                      </FormControl>
+                      <span className="text-lg">
+                        {/* Show user-friendly label */}
+                        {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
+                      </span>
+                    </div>
+                    <FormDescription>
+                      If a Dataset is shared, then all users with access to any project associated to the Dataset will have Dataset viewer permissions.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
               {!publicVisibility && (
-                <div className="flex flex-col gap-2">
-                  <h3 className="flex">
-                    {" "}
-                    Viewers
-                    <Tooltips
-                      content="Members of the chosen projects above. All Dataset admins and editors also have Dataset viewer permissions."
-                      link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
+                <FormItem>
+                  <FormLabel>Viewers</FormLabel>
+                  <FormDescription>
+                    Members of the chosen projects above. All Dataset admins and editors also have Dataset viewer permissions.
+                  </FormDescription>
+                  <FormControl>
+                    <FormikSelectUsers
+                      name="viewers"
+                      placeholder={
+                        values.projects
+                          ? "Choose viewers"
+                          : "To choose viewers, please select at least one Project"
+                      }
+                      isMulti={true}
+                      isDisabled={values.projects === 0}
                     />
-                  </h3>
+                  </FormControl>
+                </FormItem>
+              )}
+
+              <FormItem>
+                <FormLabel>Editors</FormLabel>
+                <FormDescription>
+                  Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions.
+                </FormDescription>
+                <FormControl>
                   <FormikSelectUsers
-                    name="viewers"
+                    name="editors"
                     placeholder={
                       values.projects
-                        ? "Choose viewers"
-                        : "To choose viewers, please select at least one Project"
+                        ? "Choose editors"
+                        : "To choose editors, please select at least one Project"
                     }
                     isMulti={true}
                     isDisabled={values.projects === 0}
                   />
-                </div>
-              )}
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  Editors
-                  <Tooltips
-                    content="Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
-                  />
-                </h3>
-                <FormikSelectUsers
-                  name="editors"
-                  placeholder={
-                    values.projects
-                      ? "Choose editors"
-                      : "To choose editors, please select at least one Project"
-                  }
-                  isMulti={true}
-                  isDisabled={values.projects === 0}
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  Admins
-                  <Tooltips
-                    content="Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
+                </FormControl>
+              </FormItem>
+
+              <FormItem>
+                <FormLabel>Admins</FormLabel>
+                <FormDescription>
+                  Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions.
+                </FormDescription>
+                <FormControl>
+                  <FormikSelectUsers
+                    name="admins"
+                    placeholder={
+                      values.projects
+                        ? "Choose admins"
+                        : "To choose admins, please select at least one Project"
+                    }
+                    isMulti={true}
+                    isDisabled={values.projects === 0}
                   />
-                </h3>
-                <FormikSelectUsers
-                  name="admins"
-                  placeholder={
-                    values.projects
-                      ? "Choose admins"
-                      : "To choose admins, please select at least one Project"
-                  }
-                  isMulti={true}
-                  isDisabled={values.projects === 0}
-                />
-              </div>
+                </FormControl>
+              </FormItem>
+
               <div className="mb-5">
                 <Button
                   type="submit"
@@ -267,7 +274,7 @@ export function CreateDatasetForm({
                 </Button>
               </div>
             </div>
-          </Form>
+          </form>
         )}
       </Formik>
     </>
diff --git a/app/next-client-app/components/form-components/FormikSelectUsers.tsx b/app/next-client-app/components/form-components/FormikSelectUsers.tsx
index e57a4b798..684ef1c86 100644
--- a/app/next-client-app/components/form-components/FormikSelectUsers.tsx
+++ b/app/next-client-app/components/form-components/FormikSelectUsers.tsx
@@ -109,15 +109,13 @@ export const FormikSelectUsers = ({
   isMulti: boolean;
   isDisabled: boolean;
 }) => {
-  const {
-    values: { projects },
-  } = useFormikContext<FormikValues>();
-
+  const formik = useFormikContext<FormikValues>();
+  const projects = formik?.values?.projects;
   const [editors, setOptions] = useState<Option[]>([]);
 
   useEffect(() => {
     const fetchData = async () => {
-      if (projects !== 0) {
+      if (projects && projects !== 0) {
         const editors = await fetchProjectMembers(projects);
         setOptions(editors);
       }
diff --git a/app/next-client-app/components/ui/form.tsx b/app/next-client-app/components/ui/form.tsx
index 27c6e3551..88e211960 100644
--- a/app/next-client-app/components/ui/form.tsx
+++ b/app/next-client-app/components/ui/form.tsx
@@ -53,12 +53,12 @@ const useFormField = () => {
   const { id } = itemContext
   const fieldName = fieldContext.name
   
-  // Get field state from Formik
+  // Get field state from Formik with proper typing
   const fieldState = {
-    error: formik.errors[fieldName] as string | undefined,
-    invalid: !!(formik.errors[fieldName] && formik.touched[fieldName]),
+    error: (formik.errors as Record<string, string>)[fieldName] as string | undefined,
+    invalid: !!((formik.errors as Record<string, string>)[fieldName] && (formik.touched as Record<string, boolean>)[fieldName]),
     isDirty: formik.dirty,
-    isTouched: formik.touched[fieldName] as boolean | undefined,
+    isTouched: (formik.touched as Record<string, boolean>)[fieldName] as boolean | undefined,
   }
 
   return {

From 56b903da2a88439500fe462e3e8dc3562d63e107 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 18:21:45 +0100
Subject: [PATCH 03/30] Fixes

---
 .../components/datasets/CreateDatasetForm.tsx | 52 +++++++++----------
 .../form-components/FormikSelectUsers.tsx     | 14 -----
 2 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
index 39a929c8e..72b70909c 100644
--- a/app/next-client-app/components/datasets/CreateDatasetForm.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { AlertCircle, SquarePlus } from "lucide-react";
+import { AlertCircle, Plus, SquarePlus } from "lucide-react";
 import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
 import { Formik } from "formik";
@@ -111,8 +111,29 @@ export function CreateDatasetForm({
       >
         {({ values, handleChange, handleSubmit }) => (
           <form className="w-full" onSubmit={handleSubmit}>
-            <div className="flex flex-col gap-3 text-lg">
-                            {!dataPartnerID && (
+            <div className="flex flex-col gap-3">
+
+                <FormField name="name">
+                  {({ field }) => (
+                    <FormItem>
+                      <FormLabel>Dataset Name</FormLabel>
+                      <FormDescription>
+                        Name of the new Dataset.
+                      </FormDescription>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          onChange={handleChange}
+                          name="name"
+                          required
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                </FormField>
+
+                {!dataPartnerID && (
                 <FormItem>
                   <FormLabel>Data Partner</FormLabel>
                   <FormDescription>
@@ -131,26 +152,6 @@ export function CreateDatasetForm({
                 </FormItem>
               )}
               
-              <FormField name="name">
-                {({ field }) => (
-                  <FormItem>
-                    <FormLabel>Dataset Name</FormLabel>
-                    <FormDescription>
-                      Name of the new Dataset.
-                    </FormDescription>
-                    <FormControl>
-                      <Input
-                        {...field}
-                        onChange={handleChange}
-                        name="name"
-                        required
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              </FormField>
-
               <FormItem>
                 <FormLabel>Projects</FormLabel>
                 <FormDescription>
@@ -187,7 +188,7 @@ export function CreateDatasetForm({
                           defaultChecked
                         />
                       </FormControl>
-                      <span className="text-lg">
+                      <span>
                         {/* Show user-friendly label */}
                         {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
                       </span>
@@ -262,7 +263,6 @@ export function CreateDatasetForm({
               <div className="mb-5">
                 <Button
                   type="submit"
-                  className="px-4 py-2 mt-3 text-lg border border-input"
                   disabled={
                     values.dataPartner === 0 ||
                     values.name === "" ||
@@ -270,7 +270,7 @@ export function CreateDatasetForm({
                   }
                 >
                   Create Dataset
-                  <SquarePlus className="ml-2" />
+                  <Plus className="ml-2 h-4 w-4" />
                 </Button>
               </div>
             </div>
diff --git a/app/next-client-app/components/form-components/FormikSelectUsers.tsx b/app/next-client-app/components/form-components/FormikSelectUsers.tsx
index 684ef1c86..b56563236 100644
--- a/app/next-client-app/components/form-components/FormikSelectUsers.tsx
+++ b/app/next-client-app/components/form-components/FormikSelectUsers.tsx
@@ -80,20 +80,6 @@ const CustomSelect = ({
       classNamePrefix="my-react-select"
       isDisabled={isDisabled}
       components={animatedComponents}
-      styles={{
-        multiValueLabel: (base) => ({
-          ...base,
-          fontSize: "17px",
-        }),
-        multiValueRemove: (base) => ({
-          ...base,
-          fontSize: "17px",
-        }),
-        singleValue: (base) => ({
-          ...base,
-          fontSize: "17px",
-        }),
-      }}
     />
   );
 };

From 0615b4a221365a0ca10404859ef00c5d9a6dbc6e Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 18:30:25 +0100
Subject: [PATCH 04/30] Update edit

---
 .../components/datasets/CreateDatasetForm.tsx |   4 +-
 .../components/datasets/DatasetForm.tsx       | 251 ++++++++++--------
 2 files changed, 139 insertions(+), 116 deletions(-)

diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
index 72b70909c..ef9036dfd 100644
--- a/app/next-client-app/components/datasets/CreateDatasetForm.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -110,8 +110,8 @@ export function CreateDatasetForm({
         }}
       >
         {({ values, handleChange, handleSubmit }) => (
-          <form className="w-full" onSubmit={handleSubmit}>
-            <div className="flex flex-col gap-3">
+                  <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-3">
 
                 <FormField name="name">
                   {({ field }) => (
diff --git a/app/next-client-app/components/datasets/DatasetForm.tsx b/app/next-client-app/components/datasets/DatasetForm.tsx
index 11c61c730..52e2da173 100644
--- a/app/next-client-app/components/datasets/DatasetForm.tsx
+++ b/app/next-client-app/components/datasets/DatasetForm.tsx
@@ -4,12 +4,11 @@ import { updateDatasetDetails } from "@/api/datasets";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Save } from "lucide-react";
-import { Label } from "@/components/ui/label";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
-import { Form, Formik } from "formik";
+import { Formik } from "formik";
 import { toast } from "sonner";
 import { FindAndFormat, FormDataFilter } from "../form-components/FormikUtils";
-import { Tooltips } from "../core/Tooltips";
 import { FormikSelect } from "../form-components/FormikSelect";
 import { useState } from "react";
 
@@ -95,131 +94,155 @@ export function DatasetForm({
       }}
     >
       {({ values, handleChange, handleSubmit }) => (
-        <Form className="w-full" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-3 text-lg">
-            <div className="flex items-center space-x-3">
-              <h3 className="flex">
-                {" "}
-                Name
-                <Tooltips content="Name of the dataset." />
-              </h3>
-              <Input
-                placeholder={dataset.name}
-                onChange={handleChange}
-                name="name"
-                disabled={!canUpdate}
-                className="text-lg"
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                Data Partner{" "}
-                <Tooltips content="The data partner that owns the dataset." />
-              </h3>
-              <FormikSelect
-                options={partnerOptions}
-                name="dataPartner"
-                placeholder="Choose an Data Partner"
-                isMulti={false}
-                isDisabled={!canUpdate}
-              />
-            </div>
-            <div className="flex items-center space-x-3">
-              <h3 className="flex">
-                Visibility
-                <Tooltips content="If a Dataset is shared, then all users with access to any project associated to the Dataset can see them." />
-              </h3>
-              <Switch
-                onCheckedChange={(checked) => {
-                  handleChange({
-                    target: {
-                      name: "visibility",
-                      value: checked ? "PUBLIC" : "RESTRICTED",
-                    },
-                  });
-                  setPublicVisibility(checked);
-                }}
-                defaultChecked={dataset.visibility === "PUBLIC" ? true : false}
-                disabled={!canUpdate}
-              />
-              <Label className="text-lg">
-                {/* Show user-friendly label */}
-                {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
-              </Label>
-            </div>
+        <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-3">
+
+            <FormField name="name">
+              {({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormDescription>
+                    Name of the dataset.
+                  </FormDescription>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      placeholder={dataset.name}
+                      onChange={handleChange}
+                      name="name"
+                      disabled={!canUpdate}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            </FormField>
+
+            <FormItem>
+              <FormLabel>Data Partner</FormLabel>
+              <FormDescription>
+                The data partner that owns the dataset.
+              </FormDescription>
+              <FormControl>
+                <FormikSelect
+                  options={partnerOptions}
+                  name="dataPartner"
+                  placeholder="Choose an Data Partner"
+                  isMulti={false}
+                  isDisabled={!canUpdate}
+                />
+              </FormControl>
+            </FormItem>
+
+            <FormField name="visibility">
+              {({ field }) => (
+                <FormItem>
+                  <div className="flex items-center space-x-3">
+                    <FormLabel>Visibility</FormLabel>
+                    <FormControl>
+                      <Switch
+                        onCheckedChange={(checked) => {
+                          handleChange({
+                            target: {
+                              name: "visibility",
+                              value: checked ? "PUBLIC" : "RESTRICTED",
+                            },
+                          });
+                          setPublicVisibility(checked);
+                        }}
+                        defaultChecked={dataset.visibility === "PUBLIC" ? true : false}
+                        disabled={!canUpdate}
+                      />
+                    </FormControl>
+                    <span>
+                      {/* Show user-friendly label */}
+                      {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
+                    </span>
+                  </div>
+                  <FormDescription>
+                    If a Dataset is shared, then all users with access to any project associated to the Dataset can see them.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            </FormField>
+
             {!publicVisibility && (
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  Viewers
-                  <Tooltips content="All Dataset admins and editors also have Dataset viewer permissions." />
-                </h3>
+              <FormItem>
+                <FormLabel>Viewers</FormLabel>
+                <FormDescription>
+                  All Dataset admins and editors also have Dataset viewer permissions.
+                </FormDescription>
+                <FormControl>
+                  <FormikSelect
+                    options={userOptions}
+                    name="viewers"
+                    placeholder="Choose viewers"
+                    isMulti={true}
+                    isDisabled={!canUpdate}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+
+            <FormItem>
+              <FormLabel>Editors</FormLabel>
+              <FormDescription>
+                Dataset editors also have Scan Report editor permissions.
+              </FormDescription>
+              <FormControl>
                 <FormikSelect
                   options={userOptions}
-                  name="viewers"
-                  placeholder="Choose viewers"
+                  name="editors"
+                  placeholder="Choose editors"
                   isMulti={true}
                   isDisabled={!canUpdate}
                 />
-              </div>
-            )}
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                {" "}
-                Editors
-                <Tooltips content="Dataset editors also have Scan Report editor permissions." />
-              </h3>
-              <FormikSelect
-                options={userOptions}
-                name="editors"
-                placeholder="Choose editors"
-                isMulti={true}
-                isDisabled={!canUpdate}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                {" "}
-                Admins
-                <Tooltips content="All Dataset admins also have Dataset editor permissions. Dataset admins also have Scan Report editor permissions." />
-              </h3>
-              <FormikSelect
-                options={userOptions}
-                name="admins"
-                placeholder="Choose admins"
-                isMulti={true}
-                isDisabled={!canUpdate}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                {" "}
-                Project
-                <Tooltips content="The project that the dataset belongs to." />
-              </h3>
-              <FormikSelect
-                options={projectOptions}
-                name="projects"
-                placeholder="Choose projects"
-                isMulti={true}
-                isDisabled={!canUpdate}
-              />
-            </div>
+              </FormControl>
+            </FormItem>
+
+            <FormItem>
+              <FormLabel>Admins</FormLabel>
+              <FormDescription>
+                All Dataset admins also have Dataset editor permissions. Dataset admins also have Scan Report editor permissions.
+              </FormDescription>
+              <FormControl>
+                <FormikSelect
+                  options={userOptions}
+                  name="admins"
+                  placeholder="Choose admins"
+                  isMulti={true}
+                  isDisabled={!canUpdate}
+                />
+              </FormControl>
+            </FormItem>
+
+            <FormItem>
+              <FormLabel>Projects</FormLabel>
+              <FormDescription>
+                The project that the dataset belongs to.
+              </FormDescription>
+              <FormControl>
+                <FormikSelect
+                  options={projectOptions}
+                  name="projects"
+                  placeholder="Choose projects"
+                  isMulti={true}
+                  isDisabled={!canUpdate}
+                />
+              </FormControl>
+            </FormItem>
+
             <div className="flex mt-3">
               <Button
                 type="submit"
-                className="px-4 py-2 text-lg border border-input"
                 disabled={!canUpdate}
               >
-                Save <Save className="ml-2" />
+                Save <Save className="ml-2 h-4 w-4" />
               </Button>
-              <Tooltips
-                content="You must be an admin of the this dataset
-                    to update its details."
-              />
             </div>
           </div>
-        </Form>
+        </form>
       )}
     </Formik>
   );

From 612287222a8939451b9a4c4924644ea3e36e8fdb Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 19:11:25 +0100
Subject: [PATCH 05/30] Update update

---
 .../[id]/tables/[tableId]/update/page.tsx     |   2 +-
 .../scanreports/ScanReportTableUpdateForm.tsx | 128 +++++++++---------
 app/next-client-app/components/ui/input.tsx   |  10 +-
 3 files changed, 69 insertions(+), 71 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx
index 361c7e365..402db3cc9 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx
@@ -49,7 +49,7 @@ export default async function UpdateTable(props: UpdateTableProps) {
         </Button>
       </Link>
       {(table.date_event === null || table.person_id === null) && (
-        <Alert className="flex items-center gap-3 bg-accent text-accent-foreground mt-3 w-1/2">
+        <Alert className="flex items-center gap-3 bg-accent text-accent-foreground mt-3 w-full max-w-2xl">
           <div>
             <AlertCircleIcon />
           </div>
diff --git a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
index 2b7a5ed93..a4f3b820b 100644
--- a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
@@ -5,10 +5,9 @@ import { updateScanReportTable } from "@/api/scanreports";
 import { Save } from "lucide-react";
 import { toast } from "sonner";
 import { FormDataFilter } from "../form-components/FormikUtils";
-import { Form, Formik } from "formik";
+import { Formik } from "formik";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
 import { FormikSelect } from "../form-components/FormikSelect";
-import { Label } from "../ui/label";
-import { Tooltips } from "../core/Tooltips";
 import { useRouter } from "next/navigation";
 import { Checkbox } from "../ui/checkbox";
 import { enableReuseTriggerOption } from "@/constants";
@@ -75,81 +74,80 @@ export function ScanReportTableUpdateForm({
       }}
     >
       {({ handleSubmit, values, setFieldValue }) => (
-        <Form className="w-full" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-3 text-lg">
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                Person ID{" "}
-                <Tooltips
-                  content="Every CDM object must contain at least one person ID."
-                  link="https://carrot4omop.ac.uk/Carrot-Mapper/mapping-rules/#1-person-id"
+        <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-3">
+
+            <FormItem>
+              <FormLabel>Person ID</FormLabel>
+              <FormDescription>
+                Every CDM object must contain at least one person ID.
+              </FormDescription>
+              <FormControl>
+                <FormikSelect
+                  options={fieldOptions}
+                  name="personId"
+                  placeholder="Choose a Person ID"
+                  isMulti={false}
+                  isDisabled={!canUpdate}
                 />
-              </h3>
-              <FormikSelect
-                options={fieldOptions}
-                name="personId"
-                placeholder="Choose a Person ID"
-                isMulti={false}
-                isDisabled={!canUpdate}
-              />
-            </div>
+              </FormControl>
+            </FormItem>
 
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                {" "}
-                Date Event
-                <Tooltips
-                  content="Every CDM object must contain at least one date_event."
-                  link="https://carrot4omop.ac.uk/Carrot-Mapper/mapping-rules/#2-date-events"
+            <FormItem>
+              <FormLabel>Date Event</FormLabel>
+              <FormDescription>
+                Every CDM object must contain at least one date_event.
+              </FormDescription>
+              <FormControl>
+                <FormikSelect
+                  options={fieldOptions}
+                  name="dateEvent"
+                  placeholder="Choose a Date Event"
+                  isMulti={false}
+                  isDisabled={!canUpdate}
                 />
-              </h3>
-              <FormikSelect
-                options={fieldOptions}
-                name="dateEvent"
-                placeholder="Choose a Date Event"
-                isMulti={false}
-                isDisabled={!canUpdate}
-              />
-            </div>
+              </FormControl>
+            </FormItem>
+
             {enableReuseTriggerOption === "true" && (
-              <div className="flex gap-2 mt-2 items-center">
-                <h3 className="flex">
-                  Do you want to trigger the reuse of existing concepts?
-                  <Tooltips
-                    content="If YES, concepts added to other scan reports which are in same
-                      parent dataset will be reused, based
-                      on the matching value and field. This feature may make the
-                      auto mapping process longer to run."
-                  />
-                </h3>
-                <Checkbox
-                  checked={values.triggerReuse}
-                  onCheckedChange={(checked) => {
-                    setFieldValue("triggerReuse", checked);
-                  }}
-                  disabled={!canUpdate}
-                  className="size-5"
-                />
-                <Label className="text-lg">
-                  {values.triggerReuse === true ? "YES" : "NO"}
-                </Label>
-              </div>
+              <FormField name="triggerReuse">
+                {({ field }) => (
+                  <FormItem>
+                    <div className="flex gap-2 items-center">
+                      <FormLabel>Do you want to trigger the reuse of existing concepts?</FormLabel>
+                      <FormControl>
+                        <Checkbox
+                          checked={values.triggerReuse}
+                          onCheckedChange={(checked) => {
+                            setFieldValue("triggerReuse", checked);
+                          }}
+                          disabled={!canUpdate}
+                          className="size-5"
+                        />
+                      </FormControl>
+                      <span>
+                        {values.triggerReuse === true ? "YES" : "NO"}
+                      </span>
+                    </div>
+                    <FormDescription>
+                      If YES, concepts added to other scan reports which are in same parent dataset will be reused, based on the matching value and field. This feature may make the auto mapping process longer to run.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
             )}
+
             <div className="flex mt-3">
               <Button
                 type="submit"
-                className="px-4 py-2 text-lg border border-input"
                 disabled={!canUpdate}
               >
-                Save <Save className="ml-2" />
+                Save <Save className="ml-2 h-4 w-4" />
               </Button>
-              <Tooltips
-                content="You must be the author of the scan report or an admin of the parent dataset
-                    to update the details of this scan report table."
-              />
             </div>
           </div>
-        </Form>
+        </form>
       )}
     </Formik>
   );
diff --git a/app/next-client-app/components/ui/input.tsx b/app/next-client-app/components/ui/input.tsx
index 51cfdfa18..03295ca6a 100644
--- a/app/next-client-app/components/ui/input.tsx
+++ b/app/next-client-app/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -8,14 +8,14 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-white text-black px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Input };
+export { Input }

From b3cb37c7e6298dc21ce93411632ee938d58820b3 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 19:29:21 +0100
Subject: [PATCH 06/30] Add edit scan report

---
 .../scanreports/ScanReportDetailsForm.tsx     | 227 +++++++++---------
 1 file changed, 118 insertions(+), 109 deletions(-)

diff --git a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
index eef5313af..927006171 100644
--- a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
@@ -3,12 +3,11 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Save } from "lucide-react";
-import { Label } from "@/components/ui/label";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
-import { Form, Formik } from "formik";
+import { Formik } from "formik";
 import { toast } from "sonner";
 import { FindAndFormat, FormDataFilter } from "../form-components/FormikUtils";
-import { Tooltips } from "../core/Tooltips";
 import { FormikSelect } from "../form-components/FormikSelect";
 import { useState } from "react";
 import { updateScanReport } from "@/api/scanreports";
@@ -95,129 +94,139 @@ export function ScanReportDetailsForm({
       }}
     >
       {({ values, handleChange, handleSubmit }) => (
-        <Form className="w-full" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-3 text-lg">
-            <div className="flex items-center space-x-3">
-              <h3 className="flex">
-                {" "}
-                Name
-                <Tooltips content="Name of the Scan Report." />
-              </h3>
-              <Input
-                value={values.name}
-                onChange={handleChange}
-                name="name"
-                disabled={!canUpdate}
-                className="text-lg"
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                Author{" "}
-                <Tooltips
-                  content="Authors of a Scan Report can edit Scan Report details."
-                  link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#authors"
-                />
-              </h3>
-              <FormikSelect
-                options={userOptions}
-                name="author"
-                placeholder="Choose an author"
-                isMulti={false}
-                isDisabled={!canUpdate}
-              />
-            </div>
-            <div className="flex items-center space-x-3">
-              <h3 className="flex">
-                Visibility
-                <Tooltips
-                  content="To see the contents of the Scan Report, the Scan Report must be shared, or users must be an author/editor/viewer of the Scan Report."
-                  link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
+        <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-3">
+
+            <FormField name="name">
+              {({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormDescription>
+                    Name of the Scan Report.
+                  </FormDescription>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={values.name}
+                      onChange={handleChange}
+                      name="name"
+                      disabled={!canUpdate}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            </FormField>
+
+            <FormItem>
+              <FormLabel>Author</FormLabel>
+              <FormDescription>
+                Authors of a Scan Report can edit Scan Report details.
+              </FormDescription>
+              <FormControl>
+                <FormikSelect
+                  options={userOptions}
+                  name="author"
+                  placeholder="Choose an author"
+                  isMulti={false}
+                  isDisabled={!canUpdate}
                 />
-              </h3>
-              <Switch
-                onCheckedChange={(checked) => {
-                  handleChange({
-                    target: {
-                      name: "visibility",
-                      value: checked ? "PUBLIC" : "RESTRICTED"
-                    }
-                  });
-                  setPublicVisibility(checked);
-                }}
-                checked={values.visibility === "PUBLIC"}
-                disabled={!canUpdate}
-              />
-              <Label className="text-lg">
-                {/* Show user-friendly label */}
-                {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
-              </Label>
-            </div>
+              </FormControl>
+            </FormItem>
+
+            <FormField name="visibility">
+              {({ field }) => (
+                <FormItem>
+                  <div className="flex items-center space-x-3">
+                    <FormLabel>Visibility</FormLabel>
+                    <FormControl>
+                      <Switch
+                        onCheckedChange={(checked) => {
+                          handleChange({
+                            target: {
+                              name: "visibility",
+                              value: checked ? "PUBLIC" : "RESTRICTED"
+                            }
+                          });
+                          setPublicVisibility(checked);
+                        }}
+                        checked={values.visibility === "PUBLIC"}
+                        disabled={!canUpdate}
+                      />
+                    </FormControl>
+                    <span>
+                      {/* Show user-friendly label */}
+                      {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
+                    </span>
+                  </div>
+                  <FormDescription>
+                    To see the contents of the Scan Report, the Scan Report must be shared, or users must be an author/editor/viewer of the Scan Report.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            </FormField>
+
             {!publicVisibility && (
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  Viewers
-                  <Tooltips
-                    content="Viewers of a Scan Report can perform read-only actions."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#viewers"
+              <FormItem>
+                <FormLabel>Viewers</FormLabel>
+                <FormDescription>
+                  Viewers of a Scan Report can perform read-only actions.
+                </FormDescription>
+                <FormControl>
+                  <FormikSelect
+                    options={userOptions}
+                    name="viewers"
+                    placeholder="Choose viewers"
+                    isMulti={true}
+                    isDisabled={!canUpdate}
                   />
-                </h3>
+                </FormControl>
+              </FormItem>
+            )}
+
+            <FormItem>
+              <FormLabel>Editors</FormLabel>
+              <FormDescription>
+                Editors of a Scan Report can add/remove concepts, update tables and update fields.
+              </FormDescription>
+              <FormControl>
                 <FormikSelect
                   options={userOptions}
-                  name="viewers"
-                  placeholder="Choose viewers"
+                  name="editors"
+                  placeholder="Choose editors"
                   isMulti={true}
                   isDisabled={!canUpdate}
                 />
-              </div>
-            )}
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                {" "}
-                Editors
-                <Tooltips
-                  content="Editors of a Scan Report can add/remove concepts, update tables and update fields."
-                  link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#editors"
+              </FormControl>
+            </FormItem>
+
+            <FormItem>
+              <FormLabel>Dataset</FormLabel>
+              <FormDescription>
+                The parent dataset of the Scan Report.
+              </FormDescription>
+              <FormControl>
+                <FormikSelect
+                  options={parentDatasetOptions}
+                  name="parent_dataset"
+                  placeholder="Choose a parent dataset"
+                  isMulti={false}
+                  isDisabled={!canUpdate}
                 />
-              </h3>
-              <FormikSelect
-                options={userOptions}
-                name="editors"
-                placeholder="Choose editors"
-                isMulti={true}
-                isDisabled={!canUpdate}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <h3 className="flex">
-                {" "}
-                Dataset
-                <Tooltips content="The parent dataset of the Scan Report." />
-              </h3>
-              <FormikSelect
-                options={parentDatasetOptions}
-                name="parent_dataset"
-                placeholder="Choose a parent dataset"
-                isMulti={false}
-                isDisabled={!canUpdate}
-              />
-            </div>
+              </FormControl>
+            </FormItem>
+
             <div className="flex mt-3">
               <Button
                 type="submit"
-                className="px-4 py-2 text-lg border border-input"
                 disabled={!canUpdate}
               >
-                Save <Save className="ml-2" />
+                Save <Save className="ml-2 h-4 w-4" />
               </Button>
-              <Tooltips
-                content="You must be the author of the scan report or an admin of the parent dataset
-                    to update the details of this scan report."
-              />
             </div>
           </div>
-        </Form>
+        </form>
       )}
     </Formik>
   );

From c243cd5a896b3cd177afe517989f77c080b493dc Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 20:54:05 +0100
Subject: [PATCH 07/30] Add field edit form

---
 .../scanreports/ScanReportFieldEditForm.tsx   | 131 +++++++++++-------
 1 file changed, 84 insertions(+), 47 deletions(-)

diff --git a/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx b/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
index fa449bd74..98bc45756 100644
--- a/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
@@ -2,9 +2,8 @@
 
 import { Button } from "@/components/ui/button";
 import { Save } from "lucide-react";
-import { Label } from "@/components/ui/label";
-import { Form, Formik } from "formik";
-import { Tooltips } from "../core/Tooltips";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
+import { Formik } from "formik";
 import { Checkbox } from "../ui/checkbox";
 import { Textarea } from "../ui/textarea";
 import { updateScanReportField } from "@/api/scanreports";
@@ -67,58 +66,96 @@ export function ScanReportFieldEditForm({
         }}
       >
         {({ values, handleChange, handleSubmit }) => (
-          <Form className="w-full" onSubmit={handleSubmit}>
-            <div className="flex flex-col gap-3 text-lg">
-              <div className="flex items-center space-x-3">
-                <Checkbox
-                  onCheckedChange={(checked) => {
-                    handleChange({
-                      target: {
-                        name: "isIgnore",
-                        value: checked ? true : false,
-                      },
-                    });
-                  }}
-                  defaultChecked={scanReportField?.is_ignore}
-                  disabled={!canUpdate}
-                />
-                <Label className="text-lg">Is ignore</Label>
-              </div>
-              <div className="flex items-center space-x-3">
-                <Checkbox
-                  onCheckedChange={(checked) => {
-                    handleChange({
-                      target: {
-                        name: "fromSource",
-                        value: checked ? true : false,
-                      },
-                    });
-                  }}
-                  defaultChecked={scanReportField?.pass_from_source}
-                  disabled={!canUpdate}
-                />
-                <Label className="text-lg">Pass from source</Label>
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3>Description Column</h3>
-                <Textarea
-                  name="description"
-                  onChange={handleChange}
-                  value={values.description}
-                  placeholder={scanReportField.description_column}
-                />
-              </div>
+          <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
+            <div className="flex flex-col gap-3">
+
+              <FormField name="isIgnore">
+                {({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center space-x-3">
+                      <FormControl>
+                        <Checkbox
+                          onCheckedChange={(checked) => {
+                            handleChange({
+                              target: {
+                                name: "isIgnore",
+                                value: checked ? true : false,
+                              },
+                            });
+                          }}
+                          defaultChecked={scanReportField?.is_ignore}
+                          disabled={!canUpdate}
+                        />
+                      </FormControl>
+                      <FormLabel>Is ignore</FormLabel>
+                    </div>
+                    <FormDescription>
+                      When checked, this field will be ignored during the mapping process.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
+              <FormField name="fromSource">
+                {({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center space-x-3">
+                      <FormControl>
+                        <Checkbox
+                          onCheckedChange={(checked) => {
+                            handleChange({
+                              target: {
+                                name: "fromSource",
+                                value: checked ? true : false,
+                              },
+                            });
+                          }}
+                          defaultChecked={scanReportField?.pass_from_source}
+                          disabled={!canUpdate}
+                        />
+                      </FormControl>
+                      <FormLabel>Pass from source</FormLabel>
+                    </div>
+                    <FormDescription>
+                      When checked, this field will be passed through from the source data without modification.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
+              <FormField name="description">
+                {({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description Column</FormLabel>
+                    <FormDescription>
+                      Additional description or notes for this field.
+                    </FormDescription>
+                    <FormControl>
+                      <Textarea
+                        {...field}
+                        name="description"
+                        onChange={handleChange}
+                        value={values.description}
+                        placeholder={scanReportField.description_column}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
               <div>
                 <Button
                   type="submit"
-                  className="px-4 py-2 mt-3 text-lg"
                   disabled={!canUpdate}
                 >
-                  Save <Save className="ml-2" />
+                  Save <Save className="ml-2 h-4 w-4" />
                 </Button>
               </div>
             </div>
-          </Form>
+          </form>
         )}
       </Formik>
     );

From 6dda5aa4d42e4f01059e80759ae4c3472eebc92f Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 21:06:49 +0100
Subject: [PATCH 08/30] Update create scan report

---
 .../scanreports/CreateScanReportForm.tsx      | 365 +++++++++---------
 1 file changed, 192 insertions(+), 173 deletions(-)

diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index 4913a975e..243dc1306 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -3,12 +3,11 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { AlertCircle, Upload } from "lucide-react";
-import { Label } from "@/components/ui/label";
+import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
-import { Form, Formik } from "formik";
+import { Formik } from "formik";
 import { toast } from "sonner";
 import { FormDataFilter } from "../form-components/FormikUtils";
-import { Tooltips } from "../core/Tooltips";
 import { FormikSelect } from "../form-components/FormikSelect";
 import { FormikSelectDataset } from "../form-components/FormikSelectDataset";
 import { FormikSelectEditors } from "../form-components/FormikSelectEditors";
@@ -105,201 +104,222 @@ export function CreateScanReportForm({
         }}
       >
         {({ values, handleChange, handleSubmit, setFieldValue }) => (
-          <Form
-            className="w-full"
+          <form
+            className="w-full max-w-2xl"
             onSubmit={handleSubmit}
             encType="multipart/form-data"
           >
-            <div className="flex flex-col gap-3 text-lg">
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  Scan Report Name
-                  <Tooltips content="Name of the new Scan Report." />
-                </h3>
-                <Input
-                  onChange={handleChange}
-                  name="name"
-                  className="text-lg"
-                  required
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  Data Partner{" "}
-                  <Tooltips
-                    content="The Data Partner that owns the Dataset of the new Scan Report."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
+            <div className="flex flex-col gap-3">
+
+              <FormField name="name">
+                {({ field }) => (
+                  <FormItem>
+                    <FormLabel>Scan Report Name</FormLabel>
+                    <FormDescription>
+                      Name of the new Scan Report.
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        onChange={handleChange}
+                        name="name"
+                        required
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
+              <FormItem>
+                <FormLabel>Data Partner</FormLabel>
+                <FormDescription>
+                  The Data Partner that owns the Dataset of the new Scan Report.
+                </FormDescription>
+                <FormControl>
+                  <FormikSelect
+                    options={partnerOptions}
+                    name="dataPartner"
+                    placeholder="Choose a Data Partner"
+                    isMulti={false}
+                    isDisabled={false}
+                    required={true}
                   />
-                </h3>
-                <FormikSelect
-                  options={partnerOptions}
-                  name="dataPartner"
-                  placeholder="Choose a Data Partner"
-                  isMulti={false}
-                  isDisabled={false}
-                  required={true}
-                />
-              </div>
-              <div className="flex flex-col gap-2">
+                </FormControl>
+              </FormItem>
+
+              <FormItem>
                 <div className="flex items-center">
-                  <h3 className="flex">
-                    {" "}
-                    Dataset
-                    <Tooltips
-                      content="The Dataset to add the new Scan Report to."
-                      link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
-                    />
-                  </h3>
+                  <FormLabel>Dataset</FormLabel>
                   {values.dataPartner !== 0 && (
-                    <div className="flex">
+                    <div className="flex ml-2">
                       <CreateDatasetDialog
                         projects={projects}
                         dataPartnerID={values.dataPartner}
                         description={true}
                         setReloadDataset={setReloadDataset}
                       />
-                      <Tooltips content="If you couldn't find a dataset you wanted, you can create a new dataset here" />
                     </div>
                   )}
                 </div>
-                <FormikSelectDataset
-                  name="dataset"
-                  placeholder={
-                    values.dataPartner
-                      ? "Choose a Dataset"
-                      : "To choose a dataset, please select a Data partner"
-                  }
-                  isMulti={false}
-                  isDisabled={values.dataPartner === 0}
-                  required={true}
-                  reloadDataset={reloadDataset}
-                />
-              </div>
-              <div className="flex items-center space-x-3">
-                <h3 className="flex">
-                  Visibility
-                  <Tooltips
-                    content="Setting the visibility of the new Scan Report."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
+                <FormDescription>
+                  The Dataset to add the new Scan Report to.
+                </FormDescription>
+                <FormControl>
+                  <FormikSelectDataset
+                    name="dataset"
+                    placeholder={
+                      values.dataPartner
+                        ? "Choose a Dataset"
+                        : "To choose a dataset, please select a Data partner"
+                    }
+                    isMulti={false}
+                    isDisabled={values.dataPartner === 0}
+                    required={true}
+                    reloadDataset={reloadDataset}
                   />
-                </h3>
-                <Switch
-                  onCheckedChange={(checked) => {
-                    handleChange({
-                      target: {
-                        name: "visibility",
-                        value: checked ? "PUBLIC" : "RESTRICTED"
-                      }
-                    });
-                    setPublicVisibility(checked);
-                  }}
-                  checked={values.visibility === "PUBLIC"}
-                />
-                <Label className="text-lg">
-                  {/* Show user-friendly label */}
-                  {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
-                </Label>
-              </div>
+                </FormControl>
+              </FormItem>
+
+              <FormField name="visibility">
+                {({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center space-x-3">
+                      <FormLabel>Visibility</FormLabel>
+                      <FormControl>
+                        <Switch
+                          onCheckedChange={(checked) => {
+                            handleChange({
+                              target: {
+                                name: "visibility",
+                                value: checked ? "PUBLIC" : "RESTRICTED"
+                              }
+                            });
+                            setPublicVisibility(checked);
+                          }}
+                          checked={values.visibility === "PUBLIC"}
+                        />
+                      </FormControl>
+                      <span>
+                        {/* Show user-friendly label */}
+                        {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
+                      </span>
+                    </div>
+                    <FormDescription>
+                      Setting the visibility of the new Scan Report.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
               {!publicVisibility && (
-                <div className="flex flex-col gap-2">
-                  <h3 className="flex">
-                    {" "}
-                    Viewers
-                    <Tooltips content="If the Scan Report is shared, then all users with access to the Dataset have viewer access to the Scan Report. Additionally, Dataset admins and editors have viewer access to the Scan Report in all cases." />
-                  </h3>
-                  {/* Viewers field uses the same logic and data as Editors field */}
+                <FormItem>
+                  <FormLabel>Viewers</FormLabel>
+                  <FormDescription>
+                    If the Scan Report is shared, then all users with access to the Dataset have viewer access to the Scan Report. Additionally, Dataset admins and editors have viewer access to the Scan Report in all cases.
+                  </FormDescription>
+                  <FormControl>
+                    <FormikSelectEditors
+                      name="viewers"
+                      placeholder={
+                        values.dataset
+                          ? "Choose viewers"
+                          : "To choose viewers, please select a Dataset"
+                      }
+                      isMulti={true}
+                      isDisabled={values.dataset === 0 || values.dataset === -1}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+
+              <FormItem>
+                <FormLabel>Editors</FormLabel>
+                <FormDescription>
+                  Dataset admins and editors also have Scan Report editor permissions.
+                </FormDescription>
+                <FormControl>
                   <FormikSelectEditors
-                    name="viewers"
+                    name="editors"
                     placeholder={
                       values.dataset
-                        ? "Choose viewers"
-                        : "To choose viewers, please select a Dataset"
+                        ? "Choose editors"
+                        : "To choose editors, please select a Dataset"
                     }
                     isMulti={true}
                     isDisabled={values.dataset === 0 || values.dataset === -1}
                   />
-                </div>
-              )}
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  Editors
-                  <Tooltips
-                    content="Dataset admins and editors also have Scan Report editor permissions."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#scan-report-roles"
-                  />
-                </h3>
-                <FormikSelectEditors
-                  name="editors"
-                  placeholder={
-                    values.dataset
-                      ? "Choose editors"
-                      : "To choose editors, please select a Dataset"
-                  }
-                  isMulti={true}
-                  isDisabled={values.dataset === 0 || values.dataset === -1}
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  <div className="flex items-center gap-2">
-                    WhiteRabbit Scan Report{" "}
-                    <span className="text-muted-foreground text-sm">(.xlsx file)</span>
-                  </div>
-                  <Tooltips
-                    content="Scan Report file generated from White Rabbit application."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/uploading-scan-report/#the-scan-report-file-format"
-                  />
-                </h3>
-                <div>
-                  <Input
-                    type="file"
-                    name="scan_report_file"
-                    accept=".xlsx"
-                    required={true}
-                    onChange={(e) => {
-                      if (e.currentTarget.files) {
-                        setFieldValue(
-                          "scan_report_file",
-                          e.currentTarget.files[0]
-                        );
-                      }
-                    }}
-                  />
-                </div>
-              </div>
+                </FormControl>
+              </FormItem>
+
+              <FormField name="scan_report_file">
+                {({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex items-center gap-2">
+                        WhiteRabbit Scan Report{" "}
+                        <span className="text-muted-foreground text-sm">(.xlsx file)</span>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      Scan Report file generated from White Rabbit application.
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        type="file"
+                        name="scan_report_file"
+                        accept=".xlsx"
+                        required={true}
+                        onChange={(e) => {
+                          if (e.currentTarget.files) {
+                            setFieldValue(
+                              "scan_report_file",
+                              e.currentTarget.files[0]
+                            );
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
+
+              <FormField name="Data_dict">
+                {({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex items-center gap-2">
+                        Data Dictionary{" "}
+                        <span className="text-muted-foreground text-sm">
+                          (.csv file, optional)
+                        </span>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      Optional data dictionary to enable automatic building concepts from OMOP vocabulary.
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        type="file"
+                        name="Data_dict"
+                        accept=".csv"
+                        onChange={(e) => {
+                          if (e.currentTarget.files) {
+                            setFieldValue("Data_dict", e.currentTarget.files[0]);
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              </FormField>
 
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  <div className="flex items-center gap-2">
-                    Data Dictionary{" "}
-                    <span className="text-muted-foreground text-sm">
-                      (.csv file, optional)
-                    </span>
-                  </div>
-                  <Tooltips
-                    content="Optional data dictionary to enable automatic building concepts from OMOP vocalubary."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/uploading-scan-report/#the-data-dictionary-file-format"
-                  />
-                </h3>
-                <div>
-                  <Input
-                    type="file"
-                    name="Data_dict"
-                    accept=".csv"
-                    onChange={(e) => {
-                      if (e.currentTarget.files) {
-                        setFieldValue("Data_dict", e.currentTarget.files[0]);
-                      }
-                    }}
-                  />
-                </div>
-              </div>
               <div className="mb-5 mt-3 flex">
                 <Button
                   type="submit"
-                  className="px-4 py-2 text-lg border border-input"
                   disabled={
                     values.dataPartner === 0 ||
                     values.dataset === 0 ||
@@ -307,13 +327,12 @@ export function CreateScanReportForm({
                     values.name === ""
                   }
                 >
-                  <Upload className="mr-2" />
+                  <Upload className="mr-2 h-4 w-4" />
                   Upload Scan Report
                 </Button>
-                <Tooltips content="You must be either an admin or an editor of the parent dataset to add a new scan report to it." />
               </div>
             </div>
-          </Form>
+          </form>
         )}
       </Formik>
     </>

From 8f28e047b35913ada0dd6400f66d397bec6bb888 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 21:09:04 +0100
Subject: [PATCH 09/30] Fix create

---
 app/next-client-app/app/(protected)/scanreports/create/page.tsx | 2 +-
 .../components/scanreports/CreateScanReportForm.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/create/page.tsx b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
index ecd04b8f2..40af4cffe 100644
--- a/app/next-client-app/app/(protected)/scanreports/create/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
@@ -17,7 +17,7 @@ export default async function ScanReports() {
         </Link>
       </div>
       <div className="flex justify-between mt-3">
-        <h1 className="text-4xl font-semibold">Upload Scan Report</h1>
+        <h1 className="text-2xl font-semibold">Upload Scan Report</h1>
       </div>
       <div className="mt-4">
         <CreateScanReportForm dataPartners={partners} projects={projects} />
diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index 243dc1306..f7ce23948 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -109,7 +109,7 @@ export function CreateScanReportForm({
             onSubmit={handleSubmit}
             encType="multipart/form-data"
           >
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-4">
 
               <FormField name="name">
                 {({ field }) => (

From 76b9f47a163579e2fc3430959eb2a080d2558bec Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 21:14:18 +0100
Subject: [PATCH 10/30] Change gap

---
 .../scanreports/[id]/details/page.tsx            | 16 +++++++---------
 .../components/datasets/CreateDatasetForm.tsx    |  2 +-
 .../components/datasets/DatasetForm.tsx          |  2 +-
 .../scanreports/CreateScanReportForm.tsx         |  2 +-
 .../scanreports/ScanReportDetailsForm.tsx        |  2 +-
 .../scanreports/ScanReportFieldEditForm.tsx      |  2 +-
 .../scanreports/ScanReportTableUpdateForm.tsx    |  2 +-
 7 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/details/page.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/details/page.tsx
index 7f168fb08..1fd74c003 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/details/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/details/page.tsx
@@ -46,14 +46,12 @@ export default async function ScanreportDetails(props: ScanReportDetailsProps) {
   }
 
   return (
-    <div>
-      <ScanReportDetailsForm
-        scanreport={scanreport}
-        datasetList={datasetList}
-        users={users}
-        permissions={permissionsDS.permissions}
-        isAuthor={isAuthor}
-      />
-    </div>
+    <ScanReportDetailsForm
+      scanreport={scanreport}
+      datasetList={datasetList}
+      users={users}
+      permissions={permissionsDS.permissions}
+      isAuthor={isAuthor}
+    />
   );
 }
diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
index ef9036dfd..624dddd50 100644
--- a/app/next-client-app/components/datasets/CreateDatasetForm.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -111,7 +111,7 @@ export function CreateDatasetForm({
       >
         {({ values, handleChange, handleSubmit }) => (
                   <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-5">
 
                 <FormField name="name">
                   {({ field }) => (
diff --git a/app/next-client-app/components/datasets/DatasetForm.tsx b/app/next-client-app/components/datasets/DatasetForm.tsx
index 52e2da173..51185d265 100644
--- a/app/next-client-app/components/datasets/DatasetForm.tsx
+++ b/app/next-client-app/components/datasets/DatasetForm.tsx
@@ -95,7 +95,7 @@ export function DatasetForm({
     >
       {({ values, handleChange, handleSubmit }) => (
         <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-5">
 
             <FormField name="name">
               {({ field }) => (
diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index f7ce23948..5a46587c9 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -109,7 +109,7 @@ export function CreateScanReportForm({
             onSubmit={handleSubmit}
             encType="multipart/form-data"
           >
-            <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-5">
 
               <FormField name="name">
                 {({ field }) => (
diff --git a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
index 927006171..d8b9a7cf2 100644
--- a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
@@ -95,7 +95,7 @@ export function ScanReportDetailsForm({
     >
       {({ values, handleChange, handleSubmit }) => (
         <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-5">
 
             <FormField name="name">
               {({ field }) => (
diff --git a/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx b/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
index 98bc45756..e5ca76044 100644
--- a/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
@@ -67,7 +67,7 @@ export function ScanReportFieldEditForm({
       >
         {({ values, handleChange, handleSubmit }) => (
           <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-5">
 
               <FormField name="isIgnore">
                 {({ field }) => (
diff --git a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
index a4f3b820b..c89880d14 100644
--- a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
@@ -75,7 +75,7 @@ export function ScanReportTableUpdateForm({
     >
       {({ handleSubmit, values, setFieldValue }) => (
         <form className="w-full max-w-2xl" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-5">
 
             <FormItem>
               <FormLabel>Person ID</FormLabel>

From c82f0b145216a896aa9de026c2de66d8055a5f30 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Sun, 13 Jul 2025 21:17:41 +0100
Subject: [PATCH 11/30] Update react select css

---
 app/next-client-app/app/globals.css | 160 +++++++++++++++++++++-------
 1 file changed, 124 insertions(+), 36 deletions(-)

diff --git a/app/next-client-app/app/globals.css b/app/next-client-app/app/globals.css
index 07ba86fbd..a3ba3785a 100644
--- a/app/next-client-app/app/globals.css
+++ b/app/next-client-app/app/globals.css
@@ -52,49 +52,103 @@ button.rounded-full:focus-visible {
   transition: background-color 0.2s;
 }
 
-/* React Select using shadcn/ui tokens */
+/* React Select using shadcn/ui tokens - updated to match shadcn design */
+.my-react-select-container {
+  border-color: hsl(var(--border)) !important;
+  border-radius: 0.5rem !important;
+  background-color: hsl(var(--background)) !important;
+  color: hsl(var(--foreground)) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  min-height: 2.5rem !important;
+}
+
+.my-react-select-container .my-react-select__control {
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.5rem !important;
+  background-color: hsl(var(--background)) !important;
+  color: hsl(var(--foreground)) !important;
+  box-shadow: none !important;
+  min-height: 2.5rem !important;
+  transition: border-color 0.2s ease-in-out !important;
+}
+
+.my-react-select-container .my-react-select__control:hover {
+  border-color: hsl(var(--border)) !important;
+}
+
+.my-react-select-container .my-react-select__control--is-focused {
+  border-color: hsl(var(--ring)) !important;
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
+  outline: none !important;
+}
+
+.my-react-select-container .my-react-select__control--is-disabled {
+  background-color: hsl(var(--muted)) !important;
+  color: hsl(var(--muted-foreground)) !important;
+  cursor: not-allowed !important;
+}
+
 .my-react-select__menu {
   background-color: hsl(var(--popover)) !important;
   color: hsl(var(--popover-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
+  z-index: 50 !important;
 }
 
 .my-react-select__option {
   background-color: hsl(var(--popover)) !important;
-  color: hsl(var(--foreground)) !important;
-  cursor: pointer;
+  color: hsl(var(--popover-foreground)) !important;
+  cursor: pointer !important;
+  padding: 0.5rem 0.75rem !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  transition: background-color 0.2s ease-in-out !important;
 }
 
 .my-react-select__option--is-focused {
   background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--foreground)) !important;
+  color: hsl(var(--accent-foreground)) !important;
 }
 
 .my-react-select__option--is-selected {
   background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--foreground)) !important;
-  font-weight: 600;
+  color: hsl(var(--accent-foreground)) !important;
+  font-weight: 600 !important;
 }
 
-.dark .my-react-select__option--is-selected {
-  background-color: hsl(var(--accent)) !important;
+.my-react-select__single-value {
   color: hsl(var(--foreground)) !important;
-  font-weight: 600;
-  border: 1px solid hsl(var(--muted-foreground));
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
 }
 
-.my-react-select__single-value,
-.my-react-select__multi-value__label {
-  color: hsl(var(--foreground));
+.my-react-select__placeholder {
+  color: hsl(var(--muted-foreground)) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
+
+.my-react-select__input-container {
+  color: hsl(var(--foreground)) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
 }
 
 .my-react-select__multi-value {
-  background-color: hsl(var(--primary)) !important;
+  background-color: hsl(var(--secondary)) !important;
   border-radius: 0.375rem !important;
+  margin: 0.125rem !important;
+  padding: 0.125rem 0.375rem !important;
 }
 
 .my-react-select__multi-value__label {
-  color: hsl(var(--primary-foreground)) !important;
-  font-weight: 600;
+  color: hsl(var(--secondary-foreground)) !important;
+  font-weight: 500 !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
   max-width: none !important;
   overflow: visible !important;
   text-overflow: unset !important;
@@ -102,26 +156,72 @@ button.rounded-full:focus-visible {
 }
 
 .my-react-select__multi-value__remove {
-  color: #ef4444 !important;
+  color: hsl(var(--muted-foreground)) !important;
   background: transparent !important;
-  cursor: pointer;
-  transition: color 0.2s;
+  cursor: pointer !important;
+  transition: color 0.2s ease-in-out !important;
+  padding: 0 0.25rem !important;
+  margin-left: 0.25rem !important;
 }
+
 .my-react-select__multi-value__remove:hover {
-  color: #b91c1c !important;
+  color: hsl(var(--foreground)) !important;
   background: transparent !important;
 }
 
-.dark .my-react-select__option--is-focused {
-  background-color: hsl(var(--muted)) !important;
+.my-react-select__indicator-separator {
+  background-color: hsl(var(--border)) !important;
+  margin: 0.5rem 0 !important;
+}
+
+.my-react-select__dropdown-indicator {
+  color: hsl(var(--muted-foreground)) !important;
+  padding: 0.5rem !important;
+  transition: color 0.2s ease-in-out !important;
+}
+
+.my-react-select__dropdown-indicator:hover {
   color: hsl(var(--foreground)) !important;
 }
 
-.dark .my-react-select__option--is-selected {
-  background-color: hsl(var(--muted)) !important;
+.my-react-select__clear-indicator {
+  color: hsl(var(--muted-foreground)) !important;
+  padding: 0.5rem !important;
+  transition: color 0.2s ease-in-out !important;
+}
+
+.my-react-select__clear-indicator:hover {
   color: hsl(var(--foreground)) !important;
 }
 
+/* Dark mode adjustments */
+.dark .my-react-select-container {
+  border-color: hsl(var(--border)) !important;
+}
+
+.dark .my-react-select-container .my-react-select__control {
+  border-color: hsl(var(--border)) !important;
+  background-color: hsl(var(--background)) !important;
+}
+
+.dark .my-react-select__option--is-focused {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.dark .my-react-select__option--is-selected {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.dark .my-react-select__multi-value {
+  background-color: hsl(var(--secondary)) !important;
+}
+
+.dark .my-react-select__multi-value__label {
+  color: hsl(var(--secondary-foreground)) !important;
+}
+
 .avatar-initial {
   background-color: #f98109 !important;
   color: #fff !important;
@@ -178,19 +278,7 @@ input[type="file"]::file-selector-button {
   border: none;
 }
 
-.my-react-select-container {
-  border-color: hsl(var(--primary)) !important;
-}
-
-.my-react-select-container .my-react-select__control {
-  border-color: hsl(var(--primary)) !important;
-  box-shadow: none;
-}
 
-.my-react-select-container .my-react-select__control--is-focused {
-  border-color: hsl(var(--ring)) !important;
-  box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
-}
 
 /* Make radix switch visible when off */
 [data-slot="switch"][data-state="unchecked"] {

From bede4aa675c7327f45d0d79e2c9e0878b9b16172 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 12:44:35 +0100
Subject: [PATCH 12/30] Refactor input color variables in CSS for improved
 consistency

---
 app/next-client-app/app/globals.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/next-client-app/app/globals.css b/app/next-client-app/app/globals.css
index a3ba3785a..5ca48228e 100644
--- a/app/next-client-app/app/globals.css
+++ b/app/next-client-app/app/globals.css
@@ -19,6 +19,8 @@
   --accent: 240 4.8% 95.9%;
   --accent-foreground: 240 10% 3.9%;
   --primary: 0 0% 0%; /* black */
+  /* --input: oklch(0.922 0 0); */
+  --input: 320 0% 90%;
   --primary-foreground: 0 0% 100%; /* white */
   --secondary: 210 40% 96.1%;
   --secondary-foreground: 222.2 47.4% 11.2%;
@@ -44,6 +46,7 @@
   --secondary: 222.2 47.4% 11.2%;
   --secondary-foreground: 210 40% 98%;
   --ring: 215 100% 65%; /* #60a5fa, a visible blue */
+  --input: 300 50% 100% / 0.15;
 }
 
 button.rounded-full:hover,
@@ -64,7 +67,7 @@ button.rounded-full:focus-visible {
 }
 
 .my-react-select-container .my-react-select__control {
-  border: 1px solid hsl(var(--border)) !important;
+  border: 1px solid hsl(var(--input)) !important;
   border-radius: 0.5rem !important;
   background-color: hsl(var(--background)) !important;
   color: hsl(var(--foreground)) !important;
@@ -196,11 +199,11 @@ button.rounded-full:focus-visible {
 
 /* Dark mode adjustments */
 .dark .my-react-select-container {
-  border-color: hsl(var(--border)) !important;
+  border-color: hsl(var(--input)) !important;
 }
 
 .dark .my-react-select-container .my-react-select__control {
-  border-color: hsl(var(--border)) !important;
+  border-color: hsl(var(--input)) !important;
   background-color: hsl(var(--background)) !important;
 }
 

From 857ccbf908d04b6c75552593286c3f816ebf898e Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 12:46:07 +0100
Subject: [PATCH 13/30] Fix underline

---
 app/next-client-app/components/core/nav-button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/next-client-app/components/core/nav-button.tsx b/app/next-client-app/components/core/nav-button.tsx
index 444c99e3c..253cbc183 100644
--- a/app/next-client-app/components/core/nav-button.tsx
+++ b/app/next-client-app/components/core/nav-button.tsx
@@ -54,7 +54,7 @@ export const NavButton = ({
         className={cn(
           "rounded-md px-3 py-1 transition-colors",
           "hover:bg-muted hover:text-foreground",
-          isActive && "bg-muted text-foreground underline"
+          isActive && "bg-muted text-foreground"
         )}
       >
         {Icon && <Icon className="mr-2 size-4" />}

From b141f3a62935d26c9cf4a090f11d33d999bf8d10 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 12:58:22 +0100
Subject: [PATCH 14/30] Fix colours

---
 .../[tableId]/fields/[fieldId]/page.tsx       |   4 +-
 .../[id]/tables/[tableId]/page.tsx            |   2 +-
 .../components/core/mode-toggle.tsx           |   2 +-
 .../components/core/nav-button.tsx            |   4 +-
 .../components/core/sidebar-button.tsx        |   2 +-
 .../components/data-table/index.tsx           |   8 +-
 .../components/scanreports/FacetsFilter.tsx   |   2 +-
 app/next-client-app/components/ui/drawer.tsx  |   2 +-
 app/next-client-app/components/ui/tabs.tsx    | 108 ++++++++++--------
 9 files changed, 72 insertions(+), 62 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/page.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/page.tsx
index 55a71de7f..6ccf7c387 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/page.tsx
@@ -69,11 +69,11 @@ export default async function ScanReportsValue(props: ScanReportsValueProps) {
       <div className="gap-2 flex">
         {" "}
         <Link href={`/scanreports/${id}/tables/${tableId}`}>
-          <Button variant="secondary" className="mb-3 bg-muted text-foreground">
+          <Button variant="secondary" className="mb-3">
             Table: {table.name}
           </Button>
         </Link>
-        <Button variant="secondary" className="mb-3 bg-muted text-foreground">
+        <Button variant="secondary" className="mb-3">
           Field: {field.name}
         </Button>
       </div>
diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/page.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/page.tsx
index 40e776b6a..a1f540cfc 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/page.tsx
@@ -58,7 +58,7 @@ export default async function ScanReportsField(props: ScanReportsFieldProps) {
 
   return (
     <div>
-      <Button variant={"secondary"} className="mb-3 bg-muted text-foreground-3">
+      <Button variant={"secondary"} className="mb-3">
         Table: {tableName.name}
       </Button>
       <div>
diff --git a/app/next-client-app/components/core/mode-toggle.tsx b/app/next-client-app/components/core/mode-toggle.tsx
index 87628eaaa..e973c5841 100644
--- a/app/next-client-app/components/core/mode-toggle.tsx
+++ b/app/next-client-app/components/core/mode-toggle.tsx
@@ -21,7 +21,7 @@ export function ModeToggle() {
         <Button
           variant="outline"
           size="icon"
-          className="group hover:bg-muted transition-colors"
+          className="group transition-colors"
         >
           <Sun className="h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 group-hover:text-blue-400" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 group-hover:text-blue-400" />
diff --git a/app/next-client-app/components/core/nav-button.tsx b/app/next-client-app/components/core/nav-button.tsx
index 253cbc183..a28e3d1f7 100644
--- a/app/next-client-app/components/core/nav-button.tsx
+++ b/app/next-client-app/components/core/nav-button.tsx
@@ -52,9 +52,7 @@ export const NavButton = ({
       <Button
         variant="ghost"
         className={cn(
-          "rounded-md px-3 py-1 transition-colors",
-          "hover:bg-muted hover:text-foreground",
-          isActive && "bg-muted text-foreground"
+          isActive && "bg-muted"
         )}
       >
         {Icon && <Icon className="mr-2 size-4" />}
diff --git a/app/next-client-app/components/core/sidebar-button.tsx b/app/next-client-app/components/core/sidebar-button.tsx
index bb38700a0..4e89e379b 100644
--- a/app/next-client-app/components/core/sidebar-button.tsx
+++ b/app/next-client-app/components/core/sidebar-button.tsx
@@ -22,7 +22,7 @@ export function SidebarButton({
       variant="ghost"
       className={cn(
         "gap-2 justify-start focus-visible:ring-0 dark:focus-visible:ring-offset-0",
-        "hover:bg-muted hover:text-foreground transition-colors",
+        "hover:text-foreground transition-colors",
         "text-black dark:text-white",
         className
       )}
diff --git a/app/next-client-app/components/data-table/index.tsx b/app/next-client-app/components/data-table/index.tsx
index 6140d0282..f122eab9d 100644
--- a/app/next-client-app/components/data-table/index.tsx
+++ b/app/next-client-app/components/data-table/index.tsx
@@ -104,7 +104,7 @@ export function DataTable<TData, TValue>({
               <Button
                 aria-label="Toggle columns"
                 variant="outline"
-                className="ml-auto hidden lg:flex hover:bg-muted transition-colors"
+                className="ml-auto hidden lg:flex transition-colors"
               >
                 <Columns3 className="mr-2 size-4" />
                 Columns
@@ -140,12 +140,12 @@ export function DataTable<TData, TValue>({
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow
                 key={headerGroup.id}
-                className="group hover:bg-muted transition-colors"
+                className="group transition-colors"
               >
                 {headerGroup.headers.map((header) => (
                   <TableHead
                     key={header.id}
-                    className="group-hover:bg-muted transition-colors cursor-pointer"
+                    className="transition-colors cursor-pointer"
                   >
                     {flexRender(
                       header.column.columnDef.header,
@@ -162,7 +162,7 @@ export function DataTable<TData, TValue>({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
-                  className="hover:bg-muted transition-colors"
+                  className="transition-colors"
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
diff --git a/app/next-client-app/components/scanreports/FacetsFilter.tsx b/app/next-client-app/components/scanreports/FacetsFilter.tsx
index cf3e51c0a..a742c6463 100644
--- a/app/next-client-app/components/scanreports/FacetsFilter.tsx
+++ b/app/next-client-app/components/scanreports/FacetsFilter.tsx
@@ -40,7 +40,7 @@ export function FacetsFilter<TData, TValue>({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" className="hover:bg-muted transition-colors">
+        <Button variant="outline" className="transition-colors">
           <Filter className="mr-2 size-4" />
           {title}
           {selectedOptions && selectedOptions?.length > 0 && (
diff --git a/app/next-client-app/components/ui/drawer.tsx b/app/next-client-app/components/ui/drawer.tsx
index 441dd3be2..c49b88f0c 100644
--- a/app/next-client-app/components/ui/drawer.tsx
+++ b/app/next-client-app/components/ui/drawer.tsx
@@ -48,7 +48,7 @@ const DrawerContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
diff --git a/app/next-client-app/components/ui/tabs.tsx b/app/next-client-app/components/ui/tabs.tsx
index e9908a8a2..497ba5ea3 100644
--- a/app/next-client-app/components/ui/tabs.tsx
+++ b/app/next-client-app/components/ui/tabs.tsx
@@ -1,54 +1,66 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
 
-const Tabs = TabsPrimitive.Root;
+import { cn } from "@/lib/utils"
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
 
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 h-full w-full text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

From 2f0c1b557e916e76fc564451b19799a41f83569d Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 13:04:44 +0100
Subject: [PATCH 15/30] Fix buttons

---
 app/next-client-app/components/datasets/CreateDatasetForm.tsx  | 2 +-
 app/next-client-app/components/datasets/DatasetForm.tsx        | 3 ++-
 .../components/scanreports/CreateScanReportForm.tsx            | 2 +-
 .../components/scanreports/ScanReportDetailsForm.tsx           | 3 ++-
 .../components/scanreports/ScanReportFieldEditForm.tsx         | 3 ++-
 .../components/scanreports/ScanReportTableUpdateForm.tsx       | 3 ++-
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
index 624dddd50..a49182966 100644
--- a/app/next-client-app/components/datasets/CreateDatasetForm.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -269,8 +269,8 @@ export function CreateDatasetForm({
                     values.projects === 0
                   }
                 >
+                  <Plus />
                   Create Dataset
-                  <Plus className="ml-2 h-4 w-4" />
                 </Button>
               </div>
             </div>
diff --git a/app/next-client-app/components/datasets/DatasetForm.tsx b/app/next-client-app/components/datasets/DatasetForm.tsx
index 51185d265..9c90fd15a 100644
--- a/app/next-client-app/components/datasets/DatasetForm.tsx
+++ b/app/next-client-app/components/datasets/DatasetForm.tsx
@@ -238,7 +238,8 @@ export function DatasetForm({
                 type="submit"
                 disabled={!canUpdate}
               >
-                Save <Save className="ml-2 h-4 w-4" />
+                <Save />
+                Save
               </Button>
             </div>
           </div>
diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index 5a46587c9..70bf81817 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -327,7 +327,7 @@ export function CreateScanReportForm({
                     values.name === ""
                   }
                 >
-                  <Upload className="mr-2 h-4 w-4" />
+                  <Upload />
                   Upload Scan Report
                 </Button>
               </div>
diff --git a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
index d8b9a7cf2..75d177c62 100644
--- a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
@@ -222,7 +222,8 @@ export function ScanReportDetailsForm({
                 type="submit"
                 disabled={!canUpdate}
               >
-                Save <Save className="ml-2 h-4 w-4" />
+                <Save />
+                Save 
               </Button>
             </div>
           </div>
diff --git a/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx b/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
index e5ca76044..a46bf9041 100644
--- a/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportFieldEditForm.tsx
@@ -151,7 +151,8 @@ export function ScanReportFieldEditForm({
                   type="submit"
                   disabled={!canUpdate}
                 >
-                  Save <Save className="ml-2 h-4 w-4" />
+                  <Save />
+                  Save
                 </Button>
               </div>
             </div>
diff --git a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
index c89880d14..aec3d22f3 100644
--- a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
@@ -143,7 +143,8 @@ export function ScanReportTableUpdateForm({
                 type="submit"
                 disabled={!canUpdate}
               >
-                Save <Save className="ml-2 h-4 w-4" />
+                <Save className="h-4 w-4" />
+                Save
               </Button>
             </div>
           </div>

From 305635ce66160978959ffa0cef5b871bcca804f9 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 20:49:40 +0100
Subject: [PATCH 16/30] Temp store

---
 app/next-client-app/app/globals.css           |  98 ++++-----
 app/next-client-app/app/layout.tsx            |   4 +-
 .../components/core/menubar.tsx               |   2 +-
 app/next-client-app/components/ui/table.tsx   | 188 +++++++++---------
 4 files changed, 144 insertions(+), 148 deletions(-)

diff --git a/app/next-client-app/app/globals.css b/app/next-client-app/app/globals.css
index 5ca48228e..71a2f3ee5 100644
--- a/app/next-client-app/app/globals.css
+++ b/app/next-client-app/app/globals.css
@@ -2,53 +2,55 @@
 @tailwind utilities;
 @tailwind components;
 
+::selection {
+	background: #F98109;
+}
+
 /* shadcn/ui color tokens for dialogs and backgrounds */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 47.4% 11.2%;
+  --radius: 0.625rem;
+  --background: 300 50% 100%;
+  --foreground: 0 0% 14.5%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 14.5%;
   --popover: 0 0% 100%;
-  --popover-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --success: 142.1 76.2% 36.3%;
-  --success-foreground: 210 40% 98%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --warning: 38 92% 50%;
-  --warning-foreground: 222.2 47.4% 11.2%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 10% 3.9%;
-  --primary: 0 0% 0%; /* black */
-  /* --input: oklch(0.922 0 0); */
-  --input: 320 0% 90%;
-  --primary-foreground: 0 0% 100%; /* white */
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --ring: 0 0% 0%; /* black */
+  --popover-foreground: 0 0% 14.5%;
+  --primary: 0 0% 20.5%;
+  --primary-foreground: 0 0% 98.5%;
+  --secondary: 0 0% 97%;
+  --secondary-foreground: 0 0% 20.5%;
+  --muted: 0 0% 97%;
+  --muted-foreground: 0 0% 55.6%;
+  --accent: 300 0% 96%;
+  --accent-foreground: 0 0% 20.5%;
+  --destructive: 27 76% 58%;   /* oklch(0.577 0.245 27.325) → warm orange-red */
+  --border: 0 0% 92.2%;
+  --input: 0 0% 92.2%;
+  --ring: 0 0% 70.8%;
 }
+
 .dark {
-  --background: 0 0% 7%;
-  --foreground: 210 40% 98%;
-  --popover: 220 14.3% 17.9%;
-  --popover-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --success: 142.1 70% 45%;
-  --success-foreground: 210 40% 98%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --warning: 38 92% 50%;
-  --warning-foreground: 210 40% 98%;
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-  --primary: 0 0% 0%; /* black */
-  --primary-foreground: 0 0% 100%; /* white */
-  --secondary: 222.2 47.4% 11.2%;
-  --secondary-foreground: 210 40% 98%;
-  --ring: 215 100% 65%; /* #60a5fa, a visible blue */
-  --input: 300 50% 100% / 0.15;
+  --background: 0 0% 4%;
+  --foreground: 0 0% 98.5%;
+  --card: 0 0% 20.5%;
+  --card-foreground: 0 0% 98.5%;
+  --popover: 0 0% 26.9%;
+  --popover-foreground: 0 0% 98.5%;
+  --primary: 0 0% 92.2%;
+  --primary-foreground: 0 0% 20.5%;
+  --secondary: 0 0% 26.9%;
+  --secondary-foreground: 0 0% 98.5%;
+  --muted: 320 0% 15%;
+  --muted-foreground: 0 0% 70.8%;
+  --accent: 330 0% 25%;
+  --accent-foreground: 0 0% 98.5%;
+  --destructive: 22 67% 70%;
+  --border: 0 0% 100% / 10%;
+  --input: 0 0% 100% / 15%;
+  --ring: 0 0% 55.6%;
 }
 
+
 button.rounded-full:hover,
 button.rounded-full:focus-visible {
   background-color: hsl(var(--muted));
@@ -229,14 +231,14 @@ button.rounded-full:focus-visible {
   background-color: #f98109 !important;
   color: #fff !important;
 }
-
+/* 
 .shadcn-dropdown-item {
   @apply relative flex select-none items-center rounded-sm py-1.5 text-sm outline-none transition-colors
     hover:bg-accent hover:text-accent-foreground
     focus:bg-accent focus:text-accent-foreground
     data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
-}
-
+} */
+/* 
 .pagination-btn {
   @apply size-8 p-0 flex bg-black text-white border border-black ring-1 ring-black;
 }
@@ -248,7 +250,7 @@ button.rounded-full:focus-visible {
   background-color: hsl(var(--muted)) !important;
   color: hsl(var(--foreground)) !important;
   border-color: hsl(var(--muted-foreground)) !important;
-}
+} */
 
 /* Sonner toast global styles */
 [data-sonner-toast][data-type="success"] {
@@ -269,7 +271,7 @@ button.rounded-full:focus-visible {
 }
 
 /* Make file input text visible in dark mode */
-input[type="file"]::file-selector-button {
+/* input[type="file"]::file-selector-button {
   color: hsl(var(--foreground));
   border-radius: 0.375rem;
   cursor: pointer;
@@ -279,7 +281,7 @@ input[type="file"]::file-selector-button {
   color: hsl(var(--success-foreground));
   background: hsl(var(--muted));
   border: none;
-}
+} */
 
 
 
@@ -302,11 +304,11 @@ input[type="file"]::file-selector-button {
 [data-slot="switch"][data-state="checked"]:focus-visible {
   background-color: #94a3b8 !important; /* Tailwind gray-300, darker than before */
 }
-
+/* 
 input[data-slot="input"]:focus-visible {
   border-color: hsl(var(--ring)) !important;
   box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
-}
+} */
 
 /* DropdownMenuSeparator: black in light mode, white in dark mode */
 [data-radix-dropdown-menu-separator],
diff --git a/app/next-client-app/app/layout.tsx b/app/next-client-app/app/layout.tsx
index ee7d6f400..4e4cd7315 100644
--- a/app/next-client-app/app/layout.tsx
+++ b/app/next-client-app/app/layout.tsx
@@ -50,7 +50,9 @@ export default async function RootLayout({
       <head>
         <PublicEnvScript />
       </head>
-      <body>
+      <body
+        className="bg-background text-foreground"
+      >
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
diff --git a/app/next-client-app/components/core/menubar.tsx b/app/next-client-app/components/core/menubar.tsx
index 7d58f59ce..7c707a2d3 100644
--- a/app/next-client-app/components/core/menubar.tsx
+++ b/app/next-client-app/components/core/menubar.tsx
@@ -9,7 +9,7 @@ export const MenuBar = ({ user }: { user?: User | null }) => {
   return (
     <>
       <Sidebar userName={user?.username} />
-      <div className="hidden lg:flex lg:items-center sticky top-0 z-50 backdrop-blur border-b border-border justify-between p-4 mb-4 bg-background">
+      <div className="hidden lg:flex lg:items-center sticky top-0 z-50 backdrop-blur border-b border-border justify-between p-4 mb-4">
         <Link href={"/"}>
           <div className="text-2xl flex items-center font-semibold">
             <img
diff --git a/app/next-client-app/components/ui/table.tsx b/app/next-client-app/components/ui/table.tsx
index edb62a2ac..51b74dd52 100644
--- a/app/next-client-app/components/ui/table.tsx
+++ b/app/next-client-app/components/ui/table.tsx
@@ -1,116 +1,108 @@
-import * as React from "react";
+"use client"
 
-import { cn } from "@/lib/utils";
+import * as React from "react"
 
-interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
-  overflow?: boolean;
-}
+import { cn } from "@/lib/utils"
 
-const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  ({ className, overflow, ...props }, ref) => (
-    <div className={cn("relative w-full", overflow && "overflow-auto")}>
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
       <table
-        ref={ref}
+        data-slot="table"
         className={cn("w-full caption-bottom text-sm", className)}
         {...props}
       />
     </div>
   )
-);
-
-Table.displayName = "Table";
+}
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-));
-TableHeader.displayName = "TableHeader";
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-));
-TableBody.displayName = "TableBody";
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-));
-TableFooter.displayName = "TableFooter";
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b border-muted transition-colors hover:bg-accent data-[state=selected]:bg-accent",
-      className
-    )}
-    {...props}
-  />
-));
-TableRow.displayName = "TableRow";
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left font-medium text-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = "TableHead";
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("px-4 py-3 [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-));
-TableCell.displayName = "TableCell";
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn(
-      "mt-4 text-sm text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-));
-TableCaption.displayName = "TableCaption";
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
 
 export {
   Table,
@@ -121,4 +113,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-};
+}

From b2c9367ab0c737dcbbea369d3f6c0b1bf008b11a Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 20:50:27 +0100
Subject: [PATCH 17/30] Migrate tailwind 4.0

---
 .../scanreports/[id]/downloads/columns.tsx    |    2 +-
 app/next-client-app/app/globals.css           |   24 +-
 .../components/concepts/concept-tags.tsx      |    2 +-
 .../components/core/footer.tsx                |    4 +-
 .../components/core/menubar.tsx               |    2 +-
 .../data-table/DataTablePagination.tsx        |    2 +-
 .../datasets/CreateDatasetDialog.tsx          |    2 +-
 .../components/jobs/JobDialog.tsx             |    2 +-
 .../recommendations/ai-suggesions-button.tsx  |    4 +-
 .../recommendations/ai-suggestions-dialog.tsx |    2 +-
 .../components/scanreports/FacetsFilter.tsx   |   10 +-
 .../scanreports/ScanReportsTableFilter.tsx    |    2 +-
 app/next-client-app/components/ui/badge.tsx   |    2 +-
 app/next-client-app/components/ui/button.tsx  |   10 +-
 app/next-client-app/components/ui/card.tsx    |    2 +-
 .../components/ui/checkbox.tsx                |    2 +-
 app/next-client-app/components/ui/command.tsx |    4 +-
 app/next-client-app/components/ui/dialog.tsx  |    2 +-
 .../components/ui/dropdown-menu.tsx           |   14 +-
 app/next-client-app/components/ui/input.tsx   |    2 +-
 app/next-client-app/components/ui/popover.tsx |    2 +-
 .../components/ui/scroll-area.tsx             |    4 +-
 app/next-client-app/components/ui/select.tsx  |    8 +-
 .../components/ui/separator.tsx               |    2 +-
 app/next-client-app/components/ui/sheet.tsx   |    2 +-
 app/next-client-app/components/ui/switch.tsx  |    2 +-
 app/next-client-app/components/ui/table.tsx   |    2 +-
 app/next-client-app/components/ui/tabs.tsx    |    4 +-
 .../components/ui/textarea.tsx                |    2 +-
 app/next-client-app/package-lock.json         | 1345 ++++++++---------
 app/next-client-app/package.json              |    4 +-
 app/next-client-app/postcss.config.js         |    3 +-
 32 files changed, 699 insertions(+), 777 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx
index 05e23b6d8..1504c8da8 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx
@@ -107,7 +107,7 @@ export const columns: ColumnDef<FileDownload>[] = [
         }
       };
       return (
-        <Button variant={"outline"} onClick={handleDownload}>
+        <Button variant={"outline-solid"} onClick={handleDownload}>
           Download <Download className="ml-2 size-4" />
         </Button>
       );
diff --git a/app/next-client-app/app/globals.css b/app/next-client-app/app/globals.css
index 71a2f3ee5..460080c1b 100644
--- a/app/next-client-app/app/globals.css
+++ b/app/next-client-app/app/globals.css
@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind utilities;
-@tailwind components;
+@import 'tailwindcss';
+
+@config '../tailwind.config.ts';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 ::selection {
 	background: #F98109;
diff --git a/app/next-client-app/components/concepts/concept-tags.tsx b/app/next-client-app/components/concepts/concept-tags.tsx
index 36f696e51..2112f96aa 100644
--- a/app/next-client-app/components/concepts/concept-tags.tsx
+++ b/app/next-client-app/components/concepts/concept-tags.tsx
@@ -60,7 +60,7 @@ export const ConceptTags = React.memo(function ConceptTags({
                 : concept.creation_type === "R"
                 ? "bg-carrot-reuse hover:bg-carrot-reuse dark:bg-carrot-reuse dark:text-white"
                 : ""
-            } ${concepts.length > 1 ? "my-[1px]" : ""}`}
+            } ${concepts.length > 1 ? "my-px" : ""}`}
             key={concept.concept_code}
           >
             <p className="py-0.5 m-0">{`${concept.concept_id} ${concept.concept_name} (${concept.creation_type})`}</p>
diff --git a/app/next-client-app/components/core/footer.tsx b/app/next-client-app/components/core/footer.tsx
index 44bef7a0d..74a0be5f4 100644
--- a/app/next-client-app/components/core/footer.tsx
+++ b/app/next-client-app/components/core/footer.tsx
@@ -3,8 +3,8 @@ import { ReceiptText, ShieldQuestion } from "lucide-react";
 
 const Footer = () => {
   return (
-    <footer className="lg:mt-24 mt-20 mb-5 rounded-lg shadow bg-background">
-      <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+    <footer className="lg:mt-24 mt-20 mb-5 rounded-lg shadow-sm bg-background">
+      <div className="w-full max-w-(--breakpoint-xl) mx-auto p-4 md:py-8">
         <div className="sm:flex sm:items-center sm:justify-between">
           <Link href={"https://www.nottingham.ac.uk/"}>
             <img
diff --git a/app/next-client-app/components/core/menubar.tsx b/app/next-client-app/components/core/menubar.tsx
index 7c707a2d3..71b929f48 100644
--- a/app/next-client-app/components/core/menubar.tsx
+++ b/app/next-client-app/components/core/menubar.tsx
@@ -9,7 +9,7 @@ export const MenuBar = ({ user }: { user?: User | null }) => {
   return (
     <>
       <Sidebar userName={user?.username} />
-      <div className="hidden lg:flex lg:items-center sticky top-0 z-50 backdrop-blur border-b border-border justify-between p-4 mb-4">
+      <div className="hidden lg:flex lg:items-center sticky top-0 z-50 backdrop-blur-sm border-b border-border justify-between p-4 mb-4">
         <Link href={"/"}>
           <div className="text-2xl flex items-center font-semibold">
             <img
diff --git a/app/next-client-app/components/data-table/DataTablePagination.tsx b/app/next-client-app/components/data-table/DataTablePagination.tsx
index 4bc98a12b..06e5b1b0b 100644
--- a/app/next-client-app/components/data-table/DataTablePagination.tsx
+++ b/app/next-client-app/components/data-table/DataTablePagination.tsx
@@ -74,7 +74,7 @@ but it also means that we need to change many other API endpoints as well. So it
               changePageSize(Number(value));
             }}
           >
-            <SelectTrigger className="h-8 w-[4.5rem] bg-background text-foreground">
+            <SelectTrigger className="h-8 w-18 bg-background text-foreground">
               <SelectValue placeholder={pageSize} />
             </SelectTrigger>
             <SelectContent side="top" className="bg-popover">
diff --git a/app/next-client-app/components/datasets/CreateDatasetDialog.tsx b/app/next-client-app/components/datasets/CreateDatasetDialog.tsx
index 7f731c606..de9c10df4 100644
--- a/app/next-client-app/components/datasets/CreateDatasetDialog.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetDialog.tsx
@@ -31,7 +31,7 @@ export function CreateDatasetDialog({
   return (
     <Dialog open={dialogOpened} onOpenChange={setDialogOpened}>
       <DialogTrigger asChild>
-        <Button variant={"outline"} className="ml-4 flex">
+        <Button variant={"outline-solid"} className="ml-4 flex">
           New Dataset <Plus className="ml-2 h-4 w-4" />
         </Button>
       </DialogTrigger>
diff --git a/app/next-client-app/components/jobs/JobDialog.tsx b/app/next-client-app/components/jobs/JobDialog.tsx
index 3011ff156..b192e5258 100644
--- a/app/next-client-app/components/jobs/JobDialog.tsx
+++ b/app/next-client-app/components/jobs/JobDialog.tsx
@@ -28,7 +28,7 @@ export default function JobDialog({
           />
         </div>
       </DialogTrigger>
-      <DialogContent className="max-w-screen-xl overflow-auto h-1/2">
+      <DialogContent className="max-w-(--breakpoint-xl) overflow-auto h-1/2">
         <DialogHeader>
           <DialogTitle className="flex justify-center text-center">
             Table: {table_name} - Job Progress Details
diff --git a/app/next-client-app/components/recommendations/ai-suggesions-button.tsx b/app/next-client-app/components/recommendations/ai-suggesions-button.tsx
index 1ccbbcc9d..cd0005642 100644
--- a/app/next-client-app/components/recommendations/ai-suggesions-button.tsx
+++ b/app/next-client-app/components/recommendations/ai-suggesions-button.tsx
@@ -88,7 +88,7 @@ export function AISuggestionsButton({
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <div className="flex focus:outline-none">
+          <div className="flex focus:outline-hidden">
             <Button
               variant="outline"
               size="sm"
@@ -116,7 +116,7 @@ export function AISuggestionsButton({
             return (
               <DropdownMenuItem
                 key={domain.id}
-                className="cursor-pointer hover:bg-blue-100 hover:text-black focus:outline-none p-1"
+                className="cursor-pointer hover:bg-blue-100 hover:text-black focus:outline-hidden p-1"
                 onClick={() => {
                   setDomainId(domain.id);
                   handleClick(domain.id);
diff --git a/app/next-client-app/components/recommendations/ai-suggestions-dialog.tsx b/app/next-client-app/components/recommendations/ai-suggestions-dialog.tsx
index 2cf559cc0..14a7e1966 100644
--- a/app/next-client-app/components/recommendations/ai-suggestions-dialog.tsx
+++ b/app/next-client-app/components/recommendations/ai-suggestions-dialog.tsx
@@ -40,7 +40,7 @@ export default function AISuggestionDialog({
 }: AISuggestionDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-screen-xl overflow-auto max-h-[80vh]">
+      <DialogContent className="max-w-(--breakpoint-xl) overflow-auto max-h-[80vh]">
         <DialogHeader>
           <DialogTitle className="text-xl text-center">
             AI Mapping Suggestions
diff --git a/app/next-client-app/components/scanreports/FacetsFilter.tsx b/app/next-client-app/components/scanreports/FacetsFilter.tsx
index a742c6463..49495dec4 100644
--- a/app/next-client-app/components/scanreports/FacetsFilter.tsx
+++ b/app/next-client-app/components/scanreports/FacetsFilter.tsx
@@ -48,7 +48,7 @@ export function FacetsFilter<TData, TValue>({
               <Separator orientation="vertical" className="mx-2 h-4" />
               <Badge
                 variant="secondary"
-                className="rounded-sm px-1 font-normal lg:hidden"
+                className="rounded-xs px-1 font-normal lg:hidden"
               >
                 {selectedOptions?.length}
               </Badge>
@@ -56,7 +56,7 @@ export function FacetsFilter<TData, TValue>({
                 {selectedOptions?.length > 2 ? (
                   <Badge
                     variant="secondary"
-                    className="rounded-sm px-1 font-normal"
+                    className="rounded-xs px-1 font-normal"
                   >
                     {selectedOptions?.length} selected
                   </Badge>
@@ -74,7 +74,7 @@ export function FacetsFilter<TData, TValue>({
                         key={option.value}
                         className={cn(
                           option.color,
-                          "rounded-sm px-1 font-normal"
+                          "rounded-xs px-1 font-normal"
                         )}
                       >
                         {option.label}
@@ -87,7 +87,7 @@ export function FacetsFilter<TData, TValue>({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[12.5rem] p-0 bg-background text-foreground"
+        className="w-50 p-0 bg-background text-foreground"
         align="start"
       >
         <Command>
@@ -107,7 +107,7 @@ export function FacetsFilter<TData, TValue>({
                   >
                     <div
                       className={cn(
-                        "mr-2 flex size-4 items-center justify-center rounded-sm border border-muted-foreground",
+                        "mr-2 flex size-4 items-center justify-center rounded-xs border border-muted-foreground",
                         isSelected
                           ? "bg-primary text-primary-foreground"
                           : "opacity-50 [&_svg]:invisible"
diff --git a/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx b/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx
index cfa7fb57c..894f3e634 100644
--- a/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx
@@ -111,7 +111,7 @@ export function ScanReportsTableFilter({
       </div>
       <div>
         <Link href="/scanreports/create" prefetch={false}>
-          <Button variant={"outline"} className="ml-auto mr-4">
+          <Button variant={"outline-solid"} className="ml-auto mr-4">
             <Upload className="mr-2 h-4 w-4" />
             Upload Scan Report
           </Button>
diff --git a/app/next-client-app/components/ui/badge.tsx b/app/next-client-app/components/ui/badge.tsx
index a9bbd6682..2d6fe1076 100644
--- a/app/next-client-app/components/ui/badge.tsx
+++ b/app/next-client-app/components/ui/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
diff --git a/app/next-client-app/components/ui/button.tsx b/app/next-client-app/components/ui/button.tsx
index a2df8dce6..c8bd37c66 100644
--- a/app/next-client-app/components/ui/button.tsx
+++ b/app/next-client-app/components/ui/button.tsx
@@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-2xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-2xs hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
diff --git a/app/next-client-app/components/ui/card.tsx b/app/next-client-app/components/ui/card.tsx
index 593663d11..a79eec666 100644
--- a/app/next-client-app/components/ui/card.tsx
+++ b/app/next-client-app/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-border bg-background text-foreground shadow-sm",
+      "rounded-xl border border-border bg-background text-foreground shadow-xs",
       className
     )}
     {...props}
diff --git a/app/next-client-app/components/ui/checkbox.tsx b/app/next-client-app/components/ui/checkbox.tsx
index fa0e4b59f..86d746848 100644
--- a/app/next-client-app/components/ui/checkbox.tsx
+++ b/app/next-client-app/components/ui/checkbox.tsx
@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-2xs transition-shadow outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/app/next-client-app/components/ui/command.tsx b/app/next-client-app/components/ui/command.tsx
index d63373a2a..f76e5a49f 100644
--- a/app/next-client-app/components/ui/command.tsx
+++ b/app/next-client-app/components/ui/command.tsx
@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className,
     )}
     {...props}
diff --git a/app/next-client-app/components/ui/dialog.tsx b/app/next-client-app/components/ui/dialog.tsx
index 5f5df8e50..86658bd61 100644
--- a/app/next-client-app/components/ui/dialog.tsx
+++ b/app/next-client-app/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/app/next-client-app/components/ui/dropdown-menu.tsx b/app/next-client-app/components/ui/dropdown-menu.tsx
index ec51e9cc9..2be46629a 100644
--- a/app/next-client-app/components/ui/dropdown-menu.tsx
+++ b/app/next-client-app/components/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
           className
         )}
         {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive [svg]:*:data-[variant=destructive]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
         className
       )}
       {...props}
diff --git a/app/next-client-app/components/ui/input.tsx b/app/next-client-app/components/ui/input.tsx
index 03295ca6a..d999867b2 100644
--- a/app/next-client-app/components/ui/input.tsx
+++ b/app/next-client-app/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-2xs transition-[color,box-shadow] outline-hidden file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
diff --git a/app/next-client-app/components/ui/popover.tsx b/app/next-client-app/components/ui/popover.tsx
index 97baf7f94..c067f20c4 100644
--- a/app/next-client-app/components/ui/popover.tsx
+++ b/app/next-client-app/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
diff --git a/app/next-client-app/components/ui/scroll-area.tsx b/app/next-client-app/components/ui/scroll-area.tsx
index 4eccc0589..b84aa5023 100644
--- a/app/next-client-app/components/ui/scroll-area.tsx
+++ b/app/next-client-app/components/ui/scroll-area.tsx
@@ -33,9 +33,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-px",
       className,
     )}
     {...props}
diff --git a/app/next-client-app/components/ui/select.tsx b/app/next-client-app/components/ui/select.tsx
index e3042b779..9f23b62a4 100644
--- a/app/next-client-app/components/ui/select.tsx
+++ b/app/next-client-app/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-input bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-input bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         )}
       >
         {children}
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
diff --git a/app/next-client-app/components/ui/separator.tsx b/app/next-client-app/components/ui/separator.tsx
index d52497a9a..e58ea3ca8 100644
--- a/app/next-client-app/components/ui/separator.tsx
+++ b/app/next-client-app/components/ui/separator.tsx
@@ -19,7 +19,7 @@ const Separator = React.forwardRef<
       orientation={orientation}
       className={cn(
         "shrink-0 bg-slate-200 dark:bg-slate-800",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
         className,
       )}
       {...props}
diff --git a/app/next-client-app/components/ui/sheet.tsx b/app/next-client-app/components/ui/sheet.tsx
index f86be3027..834dddfde 100644
--- a/app/next-client-app/components/ui/sheet.tsx
+++ b/app/next-client-app/components/ui/sheet.tsx
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-5 top-7 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+      <SheetPrimitive.Close className="absolute right-5 top-7 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
diff --git a/app/next-client-app/components/ui/switch.tsx b/app/next-client-app/components/ui/switch.tsx
index 6a2b5241d..a42ea05a8 100644
--- a/app/next-client-app/components/ui/switch.tsx
+++ b/app/next-client-app/components/ui/switch.tsx
@@ -13,7 +13,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-2xs transition-all outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/app/next-client-app/components/ui/table.tsx b/app/next-client-app/components/ui/table.tsx
index 51b74dd52..bcad5eb9d 100644
--- a/app/next-client-app/components/ui/table.tsx
+++ b/app/next-client-app/components/ui/table.tsx
@@ -44,7 +44,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "bg-muted/50 border-t font-medium last:[&>tr]:border-b-0",
         className
       )}
       {...props}
diff --git a/app/next-client-app/components/ui/tabs.tsx b/app/next-client-app/components/ui/tabs.tsx
index 497ba5ea3..31b13bab0 100644
--- a/app/next-client-app/components/ui/tabs.tsx
+++ b/app/next-client-app/components/ui/tabs.tsx
@@ -42,7 +42,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ function TabsContent({
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("flex-1 outline-hidden", className)}
       {...props}
     />
   )
diff --git a/app/next-client-app/components/ui/textarea.tsx b/app/next-client-app/components/ui/textarea.tsx
index 1e13bd831..daeda3da8 100644
--- a/app/next-client-app/components/ui/textarea.tsx
+++ b/app/next-client-app/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/app/next-client-app/package-lock.json b/app/next-client-app/package-lock.json
index 040440be3..423d3b50b 100644
--- a/app/next-client-app/package-lock.json
+++ b/app/next-client-app/package-lock.json
@@ -50,15 +50,15 @@
         "yup": "^1.4.0"
       },
       "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.11",
         "@types/file-saver": "^2.0.7",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
-        "autoprefixer": "^10.0.1",
         "eslint": "^8",
         "eslint-config-next": "^15.3.2",
         "postcss": "^8",
-        "tailwindcss": "^3.3.0",
+        "tailwindcss": "^4.1.11",
         "typescript": "^5"
       }
     },
@@ -66,6 +66,8 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -1203,88 +1205,17 @@
         }
       }
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
+        "minipass": "^7.0.4"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -1576,15 +1507,6 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -2515,6 +2437,282 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
+      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
+      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-x64": "4.1.11",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
+      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
+      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
+      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
+      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
+      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
+      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
+      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
+      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
+      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
+      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.11",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
+      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
+      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.11.tgz",
+      "integrity": "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.11",
+        "@tailwindcss/oxide": "4.1.11",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.11"
+      }
+    },
     "node_modules/@tanstack/react-table": {
       "version": "8.21.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
@@ -3237,28 +3435,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3460,47 +3636,10 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "dev": true,
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
@@ -3568,17 +3707,6 @@
         }
       ]
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/bl": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
@@ -3730,14 +3858,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001718",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001718.tgz",
@@ -3773,38 +3893,14 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">= 6"
+        "node": ">=18"
       }
     },
     "node_modules/class-variance-authority": {
@@ -4018,17 +4114,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4196,11 +4281,6 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
-    },
     "node_modules/diff": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
@@ -4209,11 +4289,6 @@
         "node": ">=0.3.1"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -4249,11 +4324,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.154",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.154.tgz",
@@ -4262,7 +4332,22 @@
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
@@ -5073,32 +5158,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/foreground-child/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -5134,19 +5193,6 @@
         "react": ">=16.8.0"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/framer-motion": {
       "version": "11.18.2",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
@@ -5192,19 +5238,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5379,6 +5412,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -5705,17 +5739,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -6129,26 +6152,14 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "dev": true,
+      "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/jose": {
@@ -6294,15 +6305,243 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lines-and-columns": {
@@ -6402,6 +6641,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -6476,10 +6725,25 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mkdirp": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
@@ -6570,18 +6834,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
       "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
       }
     },
     "node_modules/nanoid": {
@@ -7460,23 +7714,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -7801,11 +8038,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7870,26 +8102,6 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
-    },
     "node_modules/path-to-regexp": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
@@ -7919,22 +8131,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -7971,81 +8167,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-    },
     "node_modules/preact": {
       "version": "10.26.6",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.6.tgz",
@@ -8301,14 +8422,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -8322,17 +8435,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/recast": {
       "version": "0.23.11",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
@@ -9008,25 +9110,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -9166,18 +9249,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -9236,76 +9307,6 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -9339,40 +9340,10 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -9382,83 +9353,58 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
-    "node_modules/tailwindcss/node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
+    "node_modules/tapable": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8.6.0"
+        "node": ">=6"
       }
     },
-    "node_modules/tailwindcss/node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
       },
       "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "engines": {
-        "node": ">= 6"
+        "node": ">=18"
       }
     },
-    "node_modules/tailwindcss/node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
+    "node_modules/tar/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
       },
       "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
+        "node": ">=10"
       },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/tailwindcss/node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">= 14.6"
+        "node": ">=18"
       }
     },
     "node_modules/text-table": {
@@ -9467,25 +9413,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -9593,11 +9520,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
-    },
     "node_modules/ts-morph": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-18.0.0.tgz",
@@ -10093,23 +10015,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/app/next-client-app/package.json b/app/next-client-app/package.json
index 7b096c7f7..e98eacca7 100644
--- a/app/next-client-app/package.json
+++ b/app/next-client-app/package.json
@@ -51,15 +51,15 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "^15.3.2",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5"
   }
 }
diff --git a/app/next-client-app/postcss.config.js b/app/next-client-app/postcss.config.js
index 12a703d90..e5640725a 100644
--- a/app/next-client-app/postcss.config.js
+++ b/app/next-client-app/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

From 1c04bc6ec260f9ebe579f63bac12fcba295ff1fb Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 21:05:11 +0100
Subject: [PATCH 18/30] Fix colours

---
 app/next-client-app/app/globals.css    | 347 ++++++++++++-------------
 app/next-client-app/tailwind.config.ts |   2 +-
 2 files changed, 162 insertions(+), 187 deletions(-)

diff --git a/app/next-client-app/app/globals.css b/app/next-client-app/app/globals.css
index 460080c1b..950e264f4 100644
--- a/app/next-client-app/app/globals.css
+++ b/app/next-client-app/app/globals.css
@@ -2,21 +2,12 @@
 
 @config '../tailwind.config.ts';
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }
 
@@ -24,106 +15,168 @@
 	background: #F98109;
 }
 
-/* shadcn/ui color tokens for dialogs and backgrounds */
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+
 :root {
   --radius: 0.625rem;
-  --background: 300 50% 100%;
-  --foreground: 0 0% 14.5%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 14.5%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 14.5%;
-  --primary: 0 0% 20.5%;
-  --primary-foreground: 0 0% 98.5%;
-  --secondary: 0 0% 97%;
-  --secondary-foreground: 0 0% 20.5%;
-  --muted: 0 0% 97%;
-  --muted-foreground: 0 0% 55.6%;
-  --accent: 300 0% 96%;
-  --accent-foreground: 0 0% 20.5%;
-  --destructive: 27 76% 58%;   /* oklch(0.577 0.245 27.325) → warm orange-red */
-  --border: 0 0% 92.2%;
-  --input: 0 0% 92.2%;
-  --ring: 0 0% 70.8%;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-  --background: 0 0% 4%;
-  --foreground: 0 0% 98.5%;
-  --card: 0 0% 20.5%;
-  --card-foreground: 0 0% 98.5%;
-  --popover: 0 0% 26.9%;
-  --popover-foreground: 0 0% 98.5%;
-  --primary: 0 0% 92.2%;
-  --primary-foreground: 0 0% 20.5%;
-  --secondary: 0 0% 26.9%;
-  --secondary-foreground: 0 0% 98.5%;
-  --muted: 320 0% 15%;
-  --muted-foreground: 0 0% 70.8%;
-  --accent: 330 0% 25%;
-  --accent-foreground: 0 0% 98.5%;
-  --destructive: 22 67% 70%;
-  --border: 0 0% 100% / 10%;
-  --input: 0 0% 100% / 15%;
-  --ring: 0 0% 55.6%;
-}
-
-
-button.rounded-full:hover,
-button.rounded-full:focus-visible {
-  background-color: hsl(var(--muted));
-  transition: background-color 0.2s;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
+
 /* React Select using shadcn/ui tokens - updated to match shadcn design */
 .my-react-select-container {
-  border-color: hsl(var(--border)) !important;
+  border-color: var(--border) !important;
   border-radius: 0.5rem !important;
-  background-color: hsl(var(--background)) !important;
-  color: hsl(var(--foreground)) !important;
+  background-color: var(--background) !important;
+  color: var(--foreground) !important;
   font-size: 0.875rem !important;
   line-height: 1.25rem !important;
   min-height: 2.5rem !important;
 }
 
 .my-react-select-container .my-react-select__control {
-  border: 1px solid hsl(var(--input)) !important;
+  border: 1px solid var(--input) !important;
   border-radius: 0.5rem !important;
-  background-color: hsl(var(--background)) !important;
-  color: hsl(var(--foreground)) !important;
+  background-color: var(--background) !important;
+  color: var(--foreground) !important;
   box-shadow: none !important;
   min-height: 2.5rem !important;
   transition: border-color 0.2s ease-in-out !important;
 }
 
 .my-react-select-container .my-react-select__control:hover {
-  border-color: hsl(var(--border)) !important;
+  border-color: var(--border) !important;
 }
 
 .my-react-select-container .my-react-select__control--is-focused {
-  border-color: hsl(var(--ring)) !important;
-  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
+  border-color: var(--ring) !important;
+  box-shadow: 0 0 0 2px var(--ring) / 0.2 !important;
   outline: none !important;
 }
 
 .my-react-select-container .my-react-select__control--is-disabled {
-  background-color: hsl(var(--muted)) !important;
-  color: hsl(var(--muted-foreground)) !important;
+  background-color: var(--muted) !important;
+  color: var(--muted-foreground) !important;
   cursor: not-allowed !important;
 }
 
 .my-react-select__menu {
-  background-color: hsl(var(--popover)) !important;
-  color: hsl(var(--popover-foreground)) !important;
-  border: 1px solid hsl(var(--border)) !important;
+  background-color: var(--popover) !important;
+  color: var(--popover-foreground) !important;
+  border: 1px solid var(--border) !important;
   border-radius: 0.5rem !important;
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
   z-index: 50 !important;
 }
 
 .my-react-select__option {
-  background-color: hsl(var(--popover)) !important;
-  color: hsl(var(--popover-foreground)) !important;
+  background-color: var(--popover) !important;
+  color: var(--popover-foreground) !important;
   cursor: pointer !important;
   padding: 0.5rem 0.75rem !important;
   font-size: 0.875rem !important;
@@ -132,43 +185,43 @@ button.rounded-full:focus-visible {
 }
 
 .my-react-select__option--is-focused {
-  background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--accent-foreground)) !important;
+  background-color: var(--accent) !important;
+  color: var(--accent-foreground) !important;
 }
 
 .my-react-select__option--is-selected {
-  background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--accent-foreground)) !important;
+  background-color: var(--accent) !important;
+  color: var(--accent-foreground) !important;
   font-weight: 600 !important;
 }
 
 .my-react-select__single-value {
-  color: hsl(var(--foreground)) !important;
+  color: var(--foreground) !important;
   font-size: 0.875rem !important;
   line-height: 1.25rem !important;
 }
 
 .my-react-select__placeholder {
-  color: hsl(var(--muted-foreground)) !important;
+  color: var(--muted-foreground) !important;
   font-size: 0.875rem !important;
   line-height: 1.25rem !important;
 }
 
 .my-react-select__input-container {
-  color: hsl(var(--foreground)) !important;
+  color: var(--foreground) !important;
   font-size: 0.875rem !important;
   line-height: 1.25rem !important;
 }
 
 .my-react-select__multi-value {
-  background-color: hsl(var(--secondary)) !important;
+  background-color: var(--secondary) !important;
   border-radius: 0.375rem !important;
   margin: 0.125rem !important;
   padding: 0.125rem 0.375rem !important;
 }
 
 .my-react-select__multi-value__label {
-  color: hsl(var(--secondary-foreground)) !important;
+  color: var(--secondary-foreground) !important;
   font-weight: 500 !important;
   font-size: 0.75rem !important;
   line-height: 1rem !important;
@@ -179,7 +232,7 @@ button.rounded-full:focus-visible {
 }
 
 .my-react-select__multi-value__remove {
-  color: hsl(var(--muted-foreground)) !important;
+  color: var(--muted-foreground) !important;
   background: transparent !important;
   cursor: pointer !important;
   transition: color 0.2s ease-in-out !important;
@@ -188,161 +241,83 @@ button.rounded-full:focus-visible {
 }
 
 .my-react-select__multi-value__remove:hover {
-  color: hsl(var(--foreground)) !important;
+  color: var(--foreground) !important;
   background: transparent !important;
 }
 
 .my-react-select__indicator-separator {
-  background-color: hsl(var(--border)) !important;
+  background-color: var(--border) !important;
   margin: 0.5rem 0 !important;
 }
 
 .my-react-select__dropdown-indicator {
-  color: hsl(var(--muted-foreground)) !important;
+  color: var(--muted-foreground) !important;
   padding: 0.5rem !important;
   transition: color 0.2s ease-in-out !important;
 }
 
 .my-react-select__dropdown-indicator:hover {
-  color: hsl(var(--foreground)) !important;
+  color: var(--foreground) !important;
 }
 
 .my-react-select__clear-indicator {
-  color: hsl(var(--muted-foreground)) !important;
+  color: var(--muted-foreground) !important;
   padding: 0.5rem !important;
   transition: color 0.2s ease-in-out !important;
 }
 
 .my-react-select__clear-indicator:hover {
-  color: hsl(var(--foreground)) !important;
+  color: var(--foreground) !important;
 }
 
 /* Dark mode adjustments */
 .dark .my-react-select-container {
-  border-color: hsl(var(--input)) !important;
+  border-color: var(--input) !important;
 }
 
 .dark .my-react-select-container .my-react-select__control {
-  border-color: hsl(var(--input)) !important;
-  background-color: hsl(var(--background)) !important;
+  border-color: var(--input) !important;
+  background-color: var(--background) !important;
 }
 
 .dark .my-react-select__option--is-focused {
-  background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--accent-foreground)) !important;
+  background-color: var(--accent) !important;
+  color: var(--accent-foreground) !important;
 }
 
 .dark .my-react-select__option--is-selected {
-  background-color: hsl(var(--accent)) !important;
-  color: hsl(var(--accent-foreground)) !important;
+  background-color: var(--accent) !important;
+  color: var(--accent-foreground) !important;
 }
 
 .dark .my-react-select__multi-value {
-  background-color: hsl(var(--secondary)) !important;
+  background-color: var(--secondary) !important;
 }
 
 .dark .my-react-select__multi-value__label {
-  color: hsl(var(--secondary-foreground)) !important;
+  color: var(--secondary-foreground) !important;
 }
 
 .avatar-initial {
   background-color: #f98109 !important;
   color: #fff !important;
 }
-/* 
-.shadcn-dropdown-item {
-  @apply relative flex select-none items-center rounded-sm py-1.5 text-sm outline-none transition-colors
-    hover:bg-accent hover:text-accent-foreground
-    focus:bg-accent focus:text-accent-foreground
-    data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
-} */
-/* 
-.pagination-btn {
-  @apply size-8 p-0 flex bg-black text-white border border-black ring-1 ring-black;
-}
-.dark .pagination-btn {
-  @apply bg-white text-black border-white ring-white;
-}
-.dark .pagination-btn:hover,
-.dark .pagination-btn:focus-visible {
-  background-color: hsl(var(--muted)) !important;
-  color: hsl(var(--foreground)) !important;
-  border-color: hsl(var(--muted-foreground)) !important;
-} */
+
 
 /* Sonner toast global styles */
 [data-sonner-toast][data-type="success"] {
-  background: hsl(var(--success)) !important;
-  color: hsl(var(--success-foreground)) !important;
+  background: var(--success) !important;
+  color: var(--success-foreground) !important;
 }
 [data-sonner-toast][data-type="error"] {
-  background: hsl(var(--destructive)) !important;
-  color: hsl(var(--destructive-foreground)) !important;
+  background: var(--destructive) !important;
+  color: var(--destructive-foreground) !important;
 }
 [data-sonner-toast][data-type="info"] {
-  background: hsl(var(--primary)) !important;
-  color: hsl(var(--primary-foreground)) !important;
+  background: var(--primary) !important;
+  color: var(--primary-foreground) !important;
 }
 [data-sonner-toast][data-type="warning"] {
-  background: hsl(var(--warning)) !important;
-  color: hsl(var(--warning-foreground)) !important;
-}
-
-/* Make file input text visible in dark mode */
-/* input[type="file"]::file-selector-button {
-  color: hsl(var(--foreground));
-  border-radius: 0.375rem;
-  cursor: pointer;
-}
-
-.dark input[type="file"]::file-selector-button {
-  color: hsl(var(--success-foreground));
-  background: hsl(var(--muted));
-  border: none;
-} */
-
-
-
-/* Make radix switch visible when off */
-[data-slot="switch"][data-state="unchecked"] {
-  background-color: hsl(var(--muted-foreground)) !important;
-}
-
-/* Dark mode: much lighter for visibility */
-.dark [data-slot="switch"][data-state="unchecked"] {
-  background-color: #374151 !important; /* Tailwind gray-700 */
-}
-
-/* Optional: make the "on" state more visible in dark mode */
-.dark [data-slot="switch"][data-state="checked"] {
-  background-color: #3b82f6 !important; /* Tailwind blue-500 */
-}
-
-[data-slot="switch"][data-state="checked"]:hover,
-[data-slot="switch"][data-state="checked"]:focus-visible {
-  background-color: #94a3b8 !important; /* Tailwind gray-300, darker than before */
-}
-/* 
-input[data-slot="input"]:focus-visible {
-  border-color: hsl(var(--ring)) !important;
-  box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
-} */
-
-/* DropdownMenuSeparator: black in light mode, white in dark mode */
-[data-radix-dropdown-menu-separator],
-.dropdown-menu-separator,
-[role="separator"] {
-  display: block !important;
-  height: 0.5px !important;
-  width: 100% !important;
-  background-color: #000 !important; /* Black for light mode */
-  margin: 8px 0 !important;
-  border: none !important;
-  opacity: 1 !important;
-}
-
-.dark [data-radix-dropdown-menu-separator],
-.dark .dropdown-menu-separator,
-.dark [role="separator"] {
-  background-color: #fff !important; /* White for dark mode */
+  background: var(--warning) !important;
+  color: var(--warning-foreground) !important;
 }
diff --git a/app/next-client-app/tailwind.config.ts b/app/next-client-app/tailwind.config.ts
index c3152bbdc..850e3d057 100644
--- a/app/next-client-app/tailwind.config.ts
+++ b/app/next-client-app/tailwind.config.ts
@@ -1,7 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config = {
-  darkMode: ["class"],
+  darkMode: "class",
   content: [
     "./pages/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",

From 992aa422dc0d162280f6fee89f5db6dcf1cd1c45 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Mon, 14 Jul 2025 21:34:20 +0100
Subject: [PATCH 19/30] Fixing styles

---
 .../app/(protected)/datasets/columns.tsx             |  2 +-
 app/next-client-app/app/(protected)/layout.tsx       |  4 +++-
 .../app/(protected)/projects/columns.tsx             |  2 +-
 .../scanreports/[id]/actions-download-menu.tsx       |  4 ++--
 .../scanreports/[id]/downloads/columns.tsx           |  4 ++--
 app/next-client-app/components/core/UserMenu.tsx     | 12 ++++++------
 app/next-client-app/components/core/mode-toggle.tsx  |  9 +++------
 app/next-client-app/components/core/nav-button.tsx   |  2 +-
 app/next-client-app/components/data-table/index.tsx  |  2 +-
 .../components/datasets/CreateDatasetDialog.tsx      |  4 ++--
 .../components/jobs/RefreshButton.tsx                |  2 +-
 .../components/scanreports/DeleteDialog.tsx          |  2 +-
 .../components/scanreports/EditButton.tsx            | 10 +++++-----
 .../components/scanreports/ExportScanReport.tsx      |  2 +-
 .../components/scanreports/FacetsFilter.tsx          |  2 +-
 .../scanreports/ScanReportsTableFilter.tsx           |  4 ++--
 16 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/app/next-client-app/app/(protected)/datasets/columns.tsx b/app/next-client-app/app/(protected)/datasets/columns.tsx
index 890df508f..d472f1b65 100644
--- a/app/next-client-app/app/(protected)/datasets/columns.tsx
+++ b/app/next-client-app/app/(protected)/datasets/columns.tsx
@@ -37,7 +37,7 @@ export const columns: ColumnDef<DataSet>[] = [
         <Link href={`/datasets/${id}/`}>
           <Button
             variant="link"
-            className="font-bold text-black dark:text-white"
+            className="font-bold"
           >
             {name}
           </Button>
diff --git a/app/next-client-app/app/(protected)/layout.tsx b/app/next-client-app/app/(protected)/layout.tsx
index 813750b58..46105217f 100644
--- a/app/next-client-app/app/(protected)/layout.tsx
+++ b/app/next-client-app/app/(protected)/layout.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { getServerSession } from "next-auth";
 import { options } from "@/auth/options";
 import { MenuBar } from "@/components/core/menubar";
+import Footer from "@/components/core/footer";
 
 export default async function ProtectedLayout({
   children,
@@ -14,10 +15,11 @@ export default async function ProtectedLayout({
 
   return (
     <>
-      <section className="container mb-5">
+      <section className="container flex flex-col min-h-svh">
         <MenuBar user={user} />
         {children}
       </section>
+      <Footer />
     </>
   );
 }
diff --git a/app/next-client-app/app/(protected)/projects/columns.tsx b/app/next-client-app/app/(protected)/projects/columns.tsx
index 38d59b032..fe979da4e 100644
--- a/app/next-client-app/app/(protected)/projects/columns.tsx
+++ b/app/next-client-app/app/(protected)/projects/columns.tsx
@@ -20,7 +20,7 @@ export const columns: ColumnDef<Project>[] = [
         <Link href={`/projects/${id}/`}>
           <Button
             variant="link"
-            className="font-bold text-black dark:text-white"
+            className="font-bold"
           >
             {name}
           </Button>
diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/actions-download-menu.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/actions-download-menu.tsx
index 2414c8168..5a594942e 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/actions-download-menu.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/actions-download-menu.tsx
@@ -31,11 +31,11 @@ export function ActionsDownloadMenu({ scanreportId }: Props) {
     <DropdownMenuGroup>
       <DropdownMenuLabel>Downloads</DropdownMenuLabel>
       <DropdownMenuItem onSelect={() => handleDownload("application/json")}>
-        <FileJson className="mr-2 size-4" />
+        <FileJson />
         Mapping JSON
       </DropdownMenuItem>
       <DropdownMenuItem onSelect={() => handleDownload("text/csv")}>
-        <FileSpreadsheet className="mr-2 size-4" />
+        <FileSpreadsheet />
         Mapping CSV
       </DropdownMenuItem>
     </DropdownMenuGroup>
diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx
index 1504c8da8..7ce4162bb 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/downloads/columns.tsx
@@ -107,8 +107,8 @@ export const columns: ColumnDef<FileDownload>[] = [
         }
       };
       return (
-        <Button variant={"outline-solid"} onClick={handleDownload}>
-          Download <Download className="ml-2 size-4" />
+        <Button variant={"outline"} onClick={handleDownload}>
+          Download <Download />
         </Button>
       );
     },
diff --git a/app/next-client-app/components/core/UserMenu.tsx b/app/next-client-app/components/core/UserMenu.tsx
index 97ccf27c1..71b5d18fa 100644
--- a/app/next-client-app/components/core/UserMenu.tsx
+++ b/app/next-client-app/components/core/UserMenu.tsx
@@ -40,24 +40,24 @@ export async function UserMenu({ username }: { username?: string }) {
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56 bg-white dark:bg-gray-900 dark:text-white">
-        <DropdownMenuLabel className="dark:text-white">
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>
           My Account
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
           <Link href="/password-reset" passHref>
             <DropdownMenuItem asChild>
-              <button className="flex items-center w-full dark:text-white">
-                <Settings className="icon-md mr-2 dark:text-white" />
+              <button className="flex items-center w-full">
+                <Settings />
                 <span>Reset Password</span>
               </button>
             </DropdownMenuItem>
           </Link>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="dark:text-white">
-          <LogOut className="icon-md mr-2 dark:text-white" />
+        <DropdownMenuItem>
+          <LogOut />
           <LogoutButton />
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/app/next-client-app/components/core/mode-toggle.tsx b/app/next-client-app/components/core/mode-toggle.tsx
index e973c5841..8d7b9a55b 100644
--- a/app/next-client-app/components/core/mode-toggle.tsx
+++ b/app/next-client-app/components/core/mode-toggle.tsx
@@ -23,26 +23,23 @@ export function ModeToggle() {
           size="icon"
           className="group transition-colors"
         >
-          <Sun className="h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 group-hover:text-blue-400" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 group-hover:text-blue-400" />
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 group-hover:text-blue-400" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 group-hover:text-blue-400" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="bg-white dark:bg-black">
+      <DropdownMenuContent align="end">
         <DropdownMenuItem
-          className="dark:text-white"
           onClick={() => setTheme("light")}
         >
           Light
         </DropdownMenuItem>
         <DropdownMenuItem
-          className="dark:text-white"
           onClick={() => setTheme("dark")}
         >
           Dark
         </DropdownMenuItem>
         <DropdownMenuItem
-          className="dark:text-white"
           onClick={() => setTheme("system")}
         >
           System
diff --git a/app/next-client-app/components/core/nav-button.tsx b/app/next-client-app/components/core/nav-button.tsx
index a28e3d1f7..bcbac53fb 100644
--- a/app/next-client-app/components/core/nav-button.tsx
+++ b/app/next-client-app/components/core/nav-button.tsx
@@ -55,7 +55,7 @@ export const NavButton = ({
           isActive && "bg-muted"
         )}
       >
-        {Icon && <Icon className="mr-2 size-4" />}
+        {Icon && <Icon />}
         {item.text}
       </Button>
     </Link>
diff --git a/app/next-client-app/components/data-table/index.tsx b/app/next-client-app/components/data-table/index.tsx
index f122eab9d..682b549dd 100644
--- a/app/next-client-app/components/data-table/index.tsx
+++ b/app/next-client-app/components/data-table/index.tsx
@@ -106,7 +106,7 @@ export function DataTable<TData, TValue>({
                 variant="outline"
                 className="ml-auto hidden lg:flex transition-colors"
               >
-                <Columns3 className="mr-2 size-4" />
+                <Columns3 />
                 Columns
               </Button>
             </DropdownMenuTrigger>
diff --git a/app/next-client-app/components/datasets/CreateDatasetDialog.tsx b/app/next-client-app/components/datasets/CreateDatasetDialog.tsx
index de9c10df4..59de30ae4 100644
--- a/app/next-client-app/components/datasets/CreateDatasetDialog.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetDialog.tsx
@@ -31,8 +31,8 @@ export function CreateDatasetDialog({
   return (
     <Dialog open={dialogOpened} onOpenChange={setDialogOpened}>
       <DialogTrigger asChild>
-        <Button variant={"outline-solid"} className="ml-4 flex">
-          New Dataset <Plus className="ml-2 h-4 w-4" />
+        <Button variant={"outline"} className="ml-4 flex">
+          New Dataset <Plus />
         </Button>
       </DialogTrigger>
       <DialogContent className="w-full bg-background text-foreground">
diff --git a/app/next-client-app/components/jobs/RefreshButton.tsx b/app/next-client-app/components/jobs/RefreshButton.tsx
index 7ddee06af..6f50d7e72 100644
--- a/app/next-client-app/components/jobs/RefreshButton.tsx
+++ b/app/next-client-app/components/jobs/RefreshButton.tsx
@@ -43,7 +43,7 @@ export function RefreshButton({
         <>Refreshing...</>
       ) : (
         <>
-          <RefreshCw className="mr-2 h-4 w-4" />
+          <RefreshCw />
           Refresh Jobs Progress
         </>
       )}
diff --git a/app/next-client-app/components/scanreports/DeleteDialog.tsx b/app/next-client-app/components/scanreports/DeleteDialog.tsx
index e527af060..a62d0b4de 100644
--- a/app/next-client-app/components/scanreports/DeleteDialog.tsx
+++ b/app/next-client-app/components/scanreports/DeleteDialog.tsx
@@ -52,7 +52,7 @@ const DeleteDialog = ({
             variant="destructive"
             onSelect={(e) => e.preventDefault()}
           >
-            <TrashIcon className="mr-2 size-4"/>
+            <TrashIcon />
             Delete
           </DropdownMenuItem>
         </DialogTrigger>
diff --git a/app/next-client-app/components/scanreports/EditButton.tsx b/app/next-client-app/components/scanreports/EditButton.tsx
index 8a76c5604..5797dfcc1 100644
--- a/app/next-client-app/components/scanreports/EditButton.tsx
+++ b/app/next-client-app/components/scanreports/EditButton.tsx
@@ -40,11 +40,11 @@ export function EditButton({
       <Button
         variant={type === "table" || type === "field" ? "secondary" : "default"}
         disabled={canEdit ? false : true}
-        className={cn(
-          type === "table" || type === "field"
-            ? "hover:bg-gray-300 dark:hover:bg-gray-700"
-            : "hover:bg-primary/90"
-        )}
+        // className={cn(
+        //   type === "table" || type === "field"
+        //     ? "hover:bg-gray-300 dark:hover:bg-gray-700"
+        //     : "hover:bg-primary/90"
+        // )}
       >
         {type === "table" ? "Edit Table" : type === "field" ? "Edit Field" : ""}
         <Pencil className="ml-2 size-4" />
diff --git a/app/next-client-app/components/scanreports/ExportScanReport.tsx b/app/next-client-app/components/scanreports/ExportScanReport.tsx
index 0acd54b9a..3fd8dad54 100644
--- a/app/next-client-app/components/scanreports/ExportScanReport.tsx
+++ b/app/next-client-app/components/scanreports/ExportScanReport.tsx
@@ -30,7 +30,7 @@ const ExportScanReport = ({ scanReportId, scanReportName }: ExportProps) => {
   };
   return (
     <DropdownMenuItem onSelect={handleDownload}>
-      <HardDriveDownload className="mr-2 size-4" />
+      <HardDriveDownload />
       Export
     </DropdownMenuItem>
   );
diff --git a/app/next-client-app/components/scanreports/FacetsFilter.tsx b/app/next-client-app/components/scanreports/FacetsFilter.tsx
index 49495dec4..7b08550eb 100644
--- a/app/next-client-app/components/scanreports/FacetsFilter.tsx
+++ b/app/next-client-app/components/scanreports/FacetsFilter.tsx
@@ -41,7 +41,7 @@ export function FacetsFilter<TData, TValue>({
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline" className="transition-colors">
-          <Filter className="mr-2 size-4" />
+          <Filter />
           {title}
           {selectedOptions && selectedOptions?.length > 0 && (
             <>
diff --git a/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx b/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx
index 894f3e634..326149cac 100644
--- a/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportsTableFilter.tsx
@@ -111,8 +111,8 @@ export function ScanReportsTableFilter({
       </div>
       <div>
         <Link href="/scanreports/create" prefetch={false}>
-          <Button variant={"outline-solid"} className="ml-auto mr-4">
-            <Upload className="mr-2 h-4 w-4" />
+          <Button variant={"outline"} className="ml-auto mr-4">
+            <Upload />
             Upload Scan Report
           </Button>
         </Link>

From 5d2a9cf692feec861d1f5b87312562a4459d2f27 Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Tue, 15 Jul 2025 11:39:18 +0100
Subject: [PATCH 20/30] Undo duplicate styles

---
 .../scanreports/[id]/tables/[tableId]/columns.tsx            | 2 +-
 app/next-client-app/app/(protected)/scanreports/columns.tsx  | 4 ++--
 app/next-client-app/components/core/UserMenu.tsx             | 2 +-
 app/next-client-app/components/core/sidebar-button.tsx       | 1 -
 .../components/data-table/DataTableColumnHeader.tsx          | 2 +-
 app/next-client-app/components/scanreports/EditButton.tsx    | 5 -----
 6 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/columns.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/columns.tsx
index b6d0a65ec..bcc1b4cea 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/columns.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/columns.tsx
@@ -37,7 +37,7 @@ export const columns = (
                 prePath.endsWith("/") ? prePath : prePath + "/"
               }fields/${id}`}
             >
-              <Button variant="link" className="font-bold dark:text-white">
+              <Button variant="link" className="font-bold">
                 {name}
               </Button>
             </Link>
diff --git a/app/next-client-app/app/(protected)/scanreports/columns.tsx b/app/next-client-app/app/(protected)/scanreports/columns.tsx
index d5ac9a75f..f1bde1675 100644
--- a/app/next-client-app/app/(protected)/scanreports/columns.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/columns.tsx
@@ -46,7 +46,7 @@ export const columns: ColumnDef<ScanReport>[] = [
         <Link href={`/scanreports/${id}`}>
           <Button
             variant="link"
-            className="font-bold text-black dark:text-white"
+            className="font-bold"
           >
             {dataset}
           </Button>
@@ -180,7 +180,7 @@ export const columns: ColumnDef<ScanReport>[] = [
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() => setOpen(true)}
-                className="text-black dark:text-white hover:text-destructive focus:text-destructive dark:hover:text-destructive dark:focus:text-destructive"
+                className="hover:text-destructive focus:text-destructive dark:hover:text-destructive dark:focus:text-destructive"
               >
                 Delete <TrashIcon className="ml-auto" />
               </DropdownMenuItem>
diff --git a/app/next-client-app/components/core/UserMenu.tsx b/app/next-client-app/components/core/UserMenu.tsx
index 71b5d18fa..4efe9bc8e 100644
--- a/app/next-client-app/components/core/UserMenu.tsx
+++ b/app/next-client-app/components/core/UserMenu.tsx
@@ -31,7 +31,7 @@ export async function UserMenu({ username }: { username?: string }) {
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
-          className="group dark:text-white p-1 rounded-full"
+          className="group p-1 rounded-full"
         >
           <Avatar>
             <AvatarFallback className="dark:text-white bg-gray-200 dark:bg-gray-800 transition-colors">
diff --git a/app/next-client-app/components/core/sidebar-button.tsx b/app/next-client-app/components/core/sidebar-button.tsx
index 4e89e379b..1f824fb63 100644
--- a/app/next-client-app/components/core/sidebar-button.tsx
+++ b/app/next-client-app/components/core/sidebar-button.tsx
@@ -23,7 +23,6 @@ export function SidebarButton({
       className={cn(
         "gap-2 justify-start focus-visible:ring-0 dark:focus-visible:ring-offset-0",
         "hover:text-foreground transition-colors",
-        "text-black dark:text-white",
         className
       )}
       {...props}
diff --git a/app/next-client-app/components/data-table/DataTableColumnHeader.tsx b/app/next-client-app/components/data-table/DataTableColumnHeader.tsx
index ee3d53d1d..65723d259 100644
--- a/app/next-client-app/components/data-table/DataTableColumnHeader.tsx
+++ b/app/next-client-app/components/data-table/DataTableColumnHeader.tsx
@@ -77,7 +77,7 @@ export function DataTableColumnHeader<TData, TValue>({
           <Button
             variant="ghost"
             size="sm"
-            className="-ml-3 h-8 data-[state=open]:bg-accent text-black dark:text-white"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
           >
             <span>{title}</span>
             {getColumnSortState() ? (
diff --git a/app/next-client-app/components/scanreports/EditButton.tsx b/app/next-client-app/components/scanreports/EditButton.tsx
index 5797dfcc1..87852aaf7 100644
--- a/app/next-client-app/components/scanreports/EditButton.tsx
+++ b/app/next-client-app/components/scanreports/EditButton.tsx
@@ -40,11 +40,6 @@ export function EditButton({
       <Button
         variant={type === "table" || type === "field" ? "secondary" : "default"}
         disabled={canEdit ? false : true}
-        // className={cn(
-        //   type === "table" || type === "field"
-        //     ? "hover:bg-gray-300 dark:hover:bg-gray-700"
-        //     : "hover:bg-primary/90"
-        // )}
       >
         {type === "table" ? "Edit Table" : type === "field" ? "Edit Field" : ""}
         <Pencil className="ml-2 size-4" />

From 353d4d03c10816ed86f358f6f71e1c84af172d8c Mon Sep 17 00:00:00 2001
From: Andy Rae <hello@rae.li>
Date: Tue, 15 Jul 2025 11:41:08 +0100
Subject: [PATCH 21/30] Fix overflow

---
 app/next-client-app/components/data-table/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/next-client-app/components/data-table/index.tsx b/app/next-client-app/components/data-table/index.tsx
index 682b549dd..7ea6b8c81 100644
--- a/app/next-client-app/components/data-table/index.tsx
+++ b/app/next-client-app/components/data-table/index.tsx
@@ -135,7 +135,7 @@ export function DataTable<TData, TValue>({
         )}
       </div>
       <div className="rounded-md border">
-        <Table overflow={overflow}>
+        <Table overflow={overflow.toString()}>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow

From 0d198b33101ac2ae64f27ff8db85c0d17108f1bb Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Thu, 31 Jul 2025 19:34:22 +0100
Subject: [PATCH 22/30] Fix alerts

---
 .../[id]/tables/[tableId]/update/page.tsx     | 20 ++--
 .../(protected)/scanreports/create/page.tsx   | 22 ++++-
 app/next-client-app/components/ui/alert.tsx   | 92 ++++++++++---------
 3 files changed, 79 insertions(+), 55 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx
index d989eba9a..a89c48f76 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx
@@ -6,7 +6,7 @@ import {
 } from "@/api/scanreports";
 import { objToQuery } from "@/lib/client-utils";
 import { AlertCircleIcon } from "lucide-react";
-import { Alert } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { ScanReportTableUpdateForm } from "@/components/scanreports/ScanReportTableUpdateForm";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
@@ -78,19 +78,15 @@ export default async function UpdateTable(props: UpdateTableProps) {
         </Button>
       </Link>
       {(table.date_event === null || table.person_id === null) && (
-        <Alert className="flex items-center gap-3 bg-accent text-accent-foreground mt-3 w-full max-w-2xl">
-          <div>
-            <AlertCircleIcon />
-          </div>
-          <div>
-            {" "}
-            Mapping Rules cannot be generated without the Person ID and Date
-            Event being set.
-            <br />
+        <Alert className="max-w-2xl mb-5">
+          <AlertCircleIcon />
+          <AlertTitle>Mapping Rules cannot be generated without Person ID and Date Event event being set</AlertTitle>
+          <AlertDescription>
+            <p>
             Once you set these, Mapping Rules will be generated for all Concepts
             currently associated to the table.
-            <br />
-          </div>
+            </p>
+          </AlertDescription>
         </Alert>
       )}
       <div className="mt-1">
diff --git a/app/next-client-app/app/(protected)/scanreports/create/page.tsx b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
index 40af4cffe..b41e23eb6 100644
--- a/app/next-client-app/app/(protected)/scanreports/create/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
@@ -1,7 +1,9 @@
 import { getDataPartners } from "@/api/datasets";
 import { getAllProjects } from "@/api/projects";
 import { CreateScanReportForm } from "@/components/scanreports/CreateScanReportForm";
-import { FileScan } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { FileScan, Info } from "lucide-react";
 import Link from "next/link";
 
 export default async function ScanReports() {
@@ -20,6 +22,24 @@ export default async function ScanReports() {
         <h1 className="text-2xl font-semibold">Upload Scan Report</h1>
       </div>
       <div className="mt-4">
+        <Alert className="mb-6 max-w-md">
+          <Info />
+          <AlertTitle>Need help uploading a scan report?</AlertTitle>
+          <AlertDescription>
+            Please ensure your scan report follows the correct format. 
+            <Button variant="link" asChild className="p-0">
+              <Link
+                href="https://carrot.ac.uk/mapper/user_guide/upload_scan_report"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline text-primary hover:text-primary/80"
+                >
+                Read the guide
+              </Link>
+            </Button>
+            for step-by-step instructions.
+          </AlertDescription>
+        </Alert>
         <CreateScanReportForm dataPartners={partners} projects={projects} />
       </div>
     </>
diff --git a/app/next-client-app/components/ui/alert.tsx b/app/next-client-app/components/ui/alert.tsx
index 2c5f5b741..14213546e 100644
--- a/app/next-client-app/components/ui/alert.tsx
+++ b/app/next-client-app/components/ui/alert.tsx
@@ -1,58 +1,66 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border border-border bg-background text-foreground p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
-        default: "",
+        default: "bg-card text-card-foreground",
         destructive:
-          "border-destructive text-destructive [&>svg]:text-destructive",
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   }
-);
+)
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = "Alert";
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = "AlertTitle";
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = "AlertDescription";
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertTitle, AlertDescription }

From e469d96afb8a6d305eb6e5f26f8a213e6f1231b8 Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Thu, 31 Jul 2025 20:16:19 +0100
Subject: [PATCH 23/30] Update CreateScanReportForm to display maximum file
 size for uploads

---
 .../components/scanreports/CreateScanReportForm.tsx          | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index c9c0d3818..cd6cf08df 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -64,6 +64,7 @@ export function CreateScanReportForm({
   const [reloadDataset, setReloadDataset] = useState(false);
   // State to hide/show the viewers field
   const [publicVisibility, setPublicVisibility] = useState<boolean>(true);
+  const maxFileSizeMB = MAX_FILE_SIZE_BYTES / 1024 / 1024;
 
   const handleSubmit = async (data: FormData) => {
     const formData = new FormData();
@@ -287,7 +288,7 @@ export function CreateScanReportForm({
                     <FormLabel>
                       <div className="flex items-center gap-2">
                         WhiteRabbit Scan Report{" "}
-                        <span className="text-muted-foreground text-sm">(.xlsx file)</span>
+                        <span className="text-muted-foreground text-sm">(.xlsx file max {maxFileSizeMB}MB)</span>
                       </div>
                     </FormLabel>
                     <FormDescription>
@@ -321,7 +322,7 @@ export function CreateScanReportForm({
                       <div className="flex items-center gap-2">
                         Data Dictionary{" "}
                         <span className="text-muted-foreground text-sm">
-                          (.csv file, optional)
+                          (.csv file, optional, max {maxFileSizeMB}MB)
                         </span>
                       </div>
                     </FormLabel>

From fc1b20cedbdcd086fc544b226ffe7dca69e902b6 Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Thu, 31 Jul 2025 20:24:08 +0100
Subject: [PATCH 24/30] Refactor ScanReports page and update error alert
 styling in CreateScanReportForm

---
 .../app/(protected)/scanreports/create/page.tsx           | 1 -
 .../components/scanreports/CreateScanReportForm.tsx       | 8 +++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/create/page.tsx b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
index b41e23eb6..bc43cb264 100644
--- a/app/next-client-app/app/(protected)/scanreports/create/page.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
@@ -37,7 +37,6 @@ export default async function ScanReports() {
                 Read the guide
               </Link>
             </Button>
-            for step-by-step instructions.
           </AlertDescription>
         </Alert>
         <CreateScanReportForm dataPartners={partners} projects={projects} />
diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index cd6cf08df..16d89280b 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -98,8 +98,7 @@ export function CreateScanReportForm({
   return (
     <>
       {error && (
-        <Alert variant="destructive" className="mb-3">
-          <div>
+        <Alert variant="destructive" className="mb-3 max-w-2xl">
             <AlertTitle className="flex items-center">
               <AlertCircle className="h-4 w-4 mr-2" />
               Upload New Scan Report Failed. Error:
@@ -109,9 +108,8 @@ export function CreateScanReportForm({
                 {error.split(" * ").map((err, index) => (
                   <li key={index}>* {err}</li>
                 ))}
-              </ul>
-            </AlertDescription>
-          </div>
+            </ul>
+          </AlertDescription>
         </Alert>
       )}
 

From 62de4c152777274edb89cc56d5afa9a91969c002 Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Thu, 31 Jul 2025 20:36:18 +0100
Subject: [PATCH 25/30] Fix text on visbility

---
 .../components/scanreports/CreateScanReportForm.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
index 16d89280b..53ea5a6c0 100644
--- a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
+++ b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -227,7 +227,7 @@ export function CreateScanReportForm({
                           checked={values.visibility === "PUBLIC"}
                         />
                       </FormControl>
-                      <span>
+                      <span className="text-sm">
                         {/* Show user-friendly label */}
                         {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
                       </span>

From 4bc98a682ef664da15e9890f012537f033dc46de Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Thu, 31 Jul 2025 20:40:26 +0100
Subject: [PATCH 26/30] Update DataTable component to enable horizontal
 overflow scrolling

---
 app/next-client-app/components/data-table/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/next-client-app/components/data-table/index.tsx b/app/next-client-app/components/data-table/index.tsx
index 7ea6b8c81..0c80e7d19 100644
--- a/app/next-client-app/components/data-table/index.tsx
+++ b/app/next-client-app/components/data-table/index.tsx
@@ -134,8 +134,8 @@ export function DataTable<TData, TValue>({
           </DropdownMenu>
         )}
       </div>
-      <div className="rounded-md border">
-        <Table overflow={overflow.toString()}>
+      <div className="rounded-md border overflow-x-auto">
+        <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow

From 8b9a6f740a409fa9a387b0450494b88784a0d0da Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Thu, 31 Jul 2025 20:46:42 +0100
Subject: [PATCH 27/30] Remove unused safelist entries from Tailwind CSS
 configuration

---
 app/next-client-app/tailwind.config.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/app/next-client-app/tailwind.config.ts b/app/next-client-app/tailwind.config.ts
index 850e3d057..2c7984eb2 100644
--- a/app/next-client-app/tailwind.config.ts
+++ b/app/next-client-app/tailwind.config.ts
@@ -8,18 +8,6 @@ const config = {
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
   ],
-  safelist: [
-    "text-blue-500",
-    "text-green-600",
-    "text-red-900",
-    "text-orange-300",
-    "text-orange-400",
-    "text-orange-500",
-    "text-orange-600",
-    "text-blue-800",
-    "text-red-500",
-    "text-red-900",
-  ],
   prefix: "",
   theme: {
     container: {

From ee4b351db2d11773a94496d405a3ddc70fee1df1 Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:28:03 +0100
Subject: [PATCH 28/30] Fix size of toggle

---
 app/next-client-app/components/datasets/CreateDatasetForm.tsx   | 2 +-
 app/next-client-app/components/datasets/DatasetForm.tsx         | 2 +-
 .../components/scanreports/ScanReportDetailsForm.tsx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
index a49182966..06a7ce3be 100644
--- a/app/next-client-app/components/datasets/CreateDatasetForm.tsx
+++ b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -188,7 +188,7 @@ export function CreateDatasetForm({
                           defaultChecked
                         />
                       </FormControl>
-                      <span>
+                      <span className="text-sm">
                         {/* Show user-friendly label */}
                         {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
                       </span>
diff --git a/app/next-client-app/components/datasets/DatasetForm.tsx b/app/next-client-app/components/datasets/DatasetForm.tsx
index 9c90fd15a..e8f0285a3 100644
--- a/app/next-client-app/components/datasets/DatasetForm.tsx
+++ b/app/next-client-app/components/datasets/DatasetForm.tsx
@@ -154,7 +154,7 @@ export function DatasetForm({
                         disabled={!canUpdate}
                       />
                     </FormControl>
-                    <span>
+                    <span className="text-sm">
                       {/* Show user-friendly label */}
                       {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
                     </span>
diff --git a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
index 75d177c62..d4e0941c8 100644
--- a/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportDetailsForm.tsx
@@ -154,7 +154,7 @@ export function ScanReportDetailsForm({
                         disabled={!canUpdate}
                       />
                     </FormControl>
-                    <span>
+                    <span className="text-sm">
                       {/* Show user-friendly label */}
                       {values.visibility === "PUBLIC" ? "Shared" : "Restricted"}
                     </span>

From aaf38a3848f1360f93e1dc6585c5abaa446a0bf3 Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:31:05 +0100
Subject: [PATCH 29/30] Update small text

---
 .../components/scanreports/ScanReportTableUpdateForm.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
index aec3d22f3..46d1bc7f4 100644
--- a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
@@ -125,7 +125,7 @@ export function ScanReportTableUpdateForm({
                           className="size-5"
                         />
                       </FormControl>
-                      <span>
+                      <span className="text-sm">
                         {values.triggerReuse === true ? "YES" : "NO"}
                       </span>
                     </div>

From 63616a69e8b6b78e556f69f45cd06a017fcc3ce3 Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:47:25 +0100
Subject: [PATCH 30/30] Stop shouting

---
 .../components/scanreports/ScanReportTableUpdateForm.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
index 46d1bc7f4..2cad5ab96 100644
--- a/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
+++ b/app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx
@@ -126,11 +126,11 @@ export function ScanReportTableUpdateForm({
                         />
                       </FormControl>
                       <span className="text-sm">
-                        {values.triggerReuse === true ? "YES" : "NO"}
+                        {values.triggerReuse === true ? "Yes" : "No"}
                       </span>
                     </div>
                     <FormDescription>
-                      If YES, concepts added to other scan reports which are in same parent dataset will be reused, based on the matching value and field. This feature may make the auto mapping process longer to run.
+                      If Yes, concepts added to other scan reports which are in same parent dataset will be reused, based on the matching value and field. This feature may make the auto mapping process longer to run.
                     </FormDescription>
                     <FormMessage />
                   </FormItem>