.

client/src/app/quotes/components/QuotesDataTable.tsx

@@ -1,8 +1,13 @@
-import { DataTable, DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components";
+import {
+  ColorBadge,
+  DataTable,
+  DataTableSkeleton,
+  ErrorOverlay,
+  SimpleEmptyState,
+} from "@/components";
 import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
 import { useDataTable, useDataTableContext } from "@/lib/hooks";
 import {
-  Badge,
   Button,
   Card,
   CardContent,
@@ -39,10 +44,6 @@ export const QuotesDataTable = ({
 
   const [activeRow, setActiveRow] = useState<Row<IListQuotes_Response_DTO> | undefined>(undefined);
 
-  const resetActiveRowIndex = (id?: number) => {
-    setActiveRowIndex(id ? id : 0);
-  };
-
   const { useList } = useQuotes();
 
   const { data, isPending, isError, error } = useList({
@@ -98,9 +99,7 @@ export const QuotesDataTable = ({
         id: "reference" as const,
         accessorKey: "reference",
         header: () => <>{t("quotes.list.columns.reference")}</>,
-        cell: ({ row: { original } }) => (
-          <div className='text-left text-ellipsis'>{original.reference}</div>
-        ),
+        cell: ({ renderValue }) => <div className='text-left text-ellipsis'>{renderValue()}</div>,
         enableResizing: false,
       },
       {
@@ -108,7 +107,7 @@ export const QuotesDataTable = ({
         accessorKey: "status",
         header: () => <>{t("quotes.list.columns.status")}</>,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        cell: ({ renderValue }: { renderValue: () => any }) => <Badge>{renderValue()}</Badge>,
+        cell: ({ row: { original } }) => <ColorBadge label={original.status} />,
         enableResizing: false,
       },
       {

client/src/components/ColorBadget/ColorBadget.tsx

@@ -0,0 +1,20 @@
+import { Badge } from "@/ui";
+
+function stringToColor(str: string) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += ("00" + value.toString(16)).substr(-2);
+  }
+  return color;
+}
+
+export const ColorBadge = ({ label }: { label: string }) => {
+  const backgroundColor = stringToColor(label);
+
+  return <Badge style={{ backgroundColor, color: "#fff" }}>{label}</Badge>;
+};

client/src/components/ColorBadget/index.ts

@@ -0,0 +1 @@
+export * from "./ColorBadget";

client/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./ButtonGroup";
 export * from "./Buttons";
+export * from "./ColorBadget";
 export * from "./Container";
 export * from "./CustomButtons";
 export * from "./CustomDialog";
@@ -13,4 +14,5 @@ export * from "./LoadingSpinner";
 export * from "./PDFViewer";
 export * from "./ProtectedRoute";
 //export * from "./SorteableDataTable";
+
 export * from "./TailwindIndicator";