From 9f655d47c041f9f7f918bb2a91518fb82167247a Mon Sep 17 00:00:00 2001
From: David Arranz <darranz@rodax-software.com>
Date: Tue, 20 Aug 2024 17:23:25 +0200
Subject: [PATCH] .

---
 .../app/quotes/components/QuotesDataTable.tsx | 19 +++++++++---------
 .../components/ColorBadget/ColorBadget.tsx    | 20 +++++++++++++++++++
 client/src/components/ColorBadget/index.ts    |  1 +
 client/src/components/index.ts                |  2 ++
 4 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/ColorBadget/ColorBadget.tsx
 create mode 100644 client/src/components/ColorBadget/index.ts

diff --git a/client/src/app/quotes/components/QuotesDataTable.tsx b/client/src/app/quotes/components/QuotesDataTable.tsx
index 61cdbf1..f3df88d 100644
--- a/client/src/app/quotes/components/QuotesDataTable.tsx
+++ b/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,
       },
       {
diff --git a/client/src/components/ColorBadget/ColorBadget.tsx b/client/src/components/ColorBadget/ColorBadget.tsx
new file mode 100644
index 0000000..29cc9c7
--- /dev/null
+++ b/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>;
+};
diff --git a/client/src/components/ColorBadget/index.ts b/client/src/components/ColorBadget/index.ts
new file mode 100644
index 0000000..8ac36de
--- /dev/null
+++ b/client/src/components/ColorBadget/index.ts
@@ -0,0 +1 @@
+export * from "./ColorBadget";
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index 604a37d..ce9e226 100644
--- a/client/src/components/index.ts
+++ b/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";