From 3f696e365306019e7f7bcb89cc6cc54b538a2899 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Sat, 10 Jan 2026 23:25:30 +0000
Subject: [PATCH] added colour picker to status creation process

---
 .../frontend/src/components/organisations-dialog.tsx     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/organisations-dialog.tsx b/packages/frontend/src/components/organisations-dialog.tsx
index 14c1a0c..d08b77c 100644
--- a/packages/frontend/src/components/organisations-dialog.tsx
+++ b/packages/frontend/src/components/organisations-dialog.tsx
@@ -13,6 +13,7 @@ import { useAuthenticatedSession } from "@/components/session-provider";
 import SmallUserDisplay from "@/components/small-user-display";
 import StatusTag from "@/components/status-tag";
 import { Button } from "@/components/ui/button";
+import ColourPicker from "@/components/ui/colour-picker";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
@@ -42,6 +43,7 @@ function OrganisationsDialog({
     const [statuses, setStatuses] = useState<Record<string, string>>({});
     const [isCreatingStatus, setIsCreatingStatus] = useState(false);
     const [newStatusName, setNewStatusName] = useState("");
+    const [newStatusColour, setNewStatusColour] = useState(DEFAULT_STATUS_COLOUR);
     const [statusError, setStatusError] = useState<string | null>(null);
     const [statusToRemove, setStatusToRemove] = useState<string | null>(null);
     const [reassignToStatus, setReassignToStatus] = useState<string>("");
@@ -202,7 +204,7 @@ function OrganisationsDialog({
             return;
         }
         const newStatuses = { ...statuses };
-        newStatuses[trimmed] = DEFAULT_STATUS_COLOUR;
+        newStatuses[trimmed] = newStatusColour;
         await updateStatuses(newStatuses);
         setNewStatusName("");
         setIsCreatingStatus(false);
@@ -483,6 +485,11 @@ function OrganisationsDialog({
                                                             }}
                                                             autoFocus
                                                         />
+
+                                                        <ColourPicker
+                                                            colour={newStatusColour}
+                                                            onChange={setNewStatusColour}
+                                                        />
                                                         <Button
                                                             variant="outline"
                                                             size="icon"