From e9db884fc5c33f43b30c296190183ac7754bb5da Mon Sep 17 00:00:00 2001
From: Sianida26 <chesakeselekkebo@gmail.com>
Date: Tue, 23 Jan 2024 00:08:51 +0700
Subject: [PATCH] Added base user lsit

---
 .../users/_tables/UsersTable/UsersTable.tsx   | 15 ++--
 .../users/_tables/UsersTable/columns.ts       | 29 -------
 .../users/_tables/UsersTable/columns.tsx      | 76 +++++++++++++++++++
 src/utils/stringToColorHex.ts                 | 26 +++++++
 4 files changed, 111 insertions(+), 35 deletions(-)
 delete mode 100644 src/app/dashboard/(auth)/users/_tables/UsersTable/columns.ts
 create mode 100644 src/app/dashboard/(auth)/users/_tables/UsersTable/columns.tsx
 create mode 100644 src/utils/stringToColorHex.ts

diff --git a/src/app/dashboard/(auth)/users/_tables/UsersTable/UsersTable.tsx b/src/app/dashboard/(auth)/users/_tables/UsersTable/UsersTable.tsx
index a3e53f4..98f0184 100644
--- a/src/app/dashboard/(auth)/users/_tables/UsersTable/UsersTable.tsx
+++ b/src/app/dashboard/(auth)/users/_tables/UsersTable/UsersTable.tsx
@@ -7,7 +7,7 @@ import {
 	useReactTable,
 } from "@tanstack/react-table";
 import columns, { UserRow } from "./columns";
-import { Table, TableThead } from "@mantine/core";
+import { Table, TableThead, Text } from "@mantine/core";
 import { showErrorNotification } from "@/utils/notifications";
 
 interface Props {
@@ -20,16 +20,19 @@ export default function UsersTable({users}: Props) {
 		data: users,
 		columns,
 		getCoreRowModel: getCoreRowModel(),
+		defaultColumn: {
+			cell: (props) => <Text>{props.getValue() as React.ReactNode}</Text>
+		}
 	});
 
 	return (
-		<Table>
+		<Table verticalSpacing="sm" horizontalSpacing="xs">
 			{/* Thead */}
 			<Table.Thead>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<Table.Tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => (
-							<Table.Th key={header.id}>
+							<Table.Th key={header.id} style={{maxWidth: `${header.column.columnDef.maxSize}px`, width: `${header.getSize()}`}}>
 								{header.isPlaceholder
 									? null
 									: flexRender(
@@ -47,12 +50,12 @@ export default function UsersTable({users}: Props) {
 				{table.getRowModel().rows.map((row) => (
 					<Table.Tr key={row.id}>
 						{row.getVisibleCells().map((cell) => (
-							<td key={cell.id}>
+							<Table.Td key={cell.id} style={{maxWidth: `${cell.column.columnDef.maxSize}px`}}>
 								{flexRender(
 									cell.column.columnDef.cell,
-									cell.getContext()
+									cell.getContext(),
 								)}
-							</td>
+							</Table.Td>
 						))}
 					</Table.Tr>
 				))}
diff --git a/src/app/dashboard/(auth)/users/_tables/UsersTable/columns.ts b/src/app/dashboard/(auth)/users/_tables/UsersTable/columns.ts
deleted file mode 100644
index 2ac4aaf..0000000
--- a/src/app/dashboard/(auth)/users/_tables/UsersTable/columns.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createColumnHelper } from "@tanstack/react-table";
-
-export interface UserRow {
-    id: string,
-    name: string | null,
-    email: string | null,
-    photoUrl: string | null,
-}
-
-const columnHelper = createColumnHelper<UserRow>()
-
-const columns = [
-    columnHelper.display({
-        id: "seequence",
-        header: "#",
-        cell: props => props.row.index + 1
-    }),
-
-    columnHelper.accessor('name', {}),
-
-    columnHelper.accessor('email', {}),
-
-    columnHelper.display({
-        id: 'actions',
-        cell: () => 'actions'
-    })
-];
-
-export default columns;
diff --git a/src/app/dashboard/(auth)/users/_tables/UsersTable/columns.tsx b/src/app/dashboard/(auth)/users/_tables/UsersTable/columns.tsx
new file mode 100644
index 0000000..20a0292
--- /dev/null
+++ b/src/app/dashboard/(auth)/users/_tables/UsersTable/columns.tsx
@@ -0,0 +1,76 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import Link from "next/link";
+import { ActionIcon, Anchor, Avatar, Badge, Flex, Group, Text, Tooltip } from "@mantine/core";
+import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
+import stringToColorHex from "@/utils/stringToColorHex";
+
+export interface UserRow {
+    id: string,
+    name: string | null,
+    email: string | null,
+    photoUrl: string | null,
+}
+
+const columnHelper = createColumnHelper<UserRow>()
+
+const columns = [
+    columnHelper.display({
+        id: "seequence",
+        header: "#",
+        cell: props => props.row.index + 1,
+        size: 1
+    }),
+
+    columnHelper.accessor('name', {
+        header:  "Name",
+        cell: (props) => <Group>
+            <Avatar color={stringToColorHex(props.row.original.id)} src={props.row.original.photoUrl}>{props.getValue()?.[0].toUpperCase()}</Avatar>
+            <Text>{props.getValue()}</Text>
+        </Group>
+    }),
+
+    columnHelper.accessor('email', {
+        header: "Email",
+        cell: (props) => <Anchor href={`mailto:${props.getValue()}`} component={Link}>{props.getValue()}</Anchor>
+    }),
+
+    columnHelper.display({
+        id: "status",
+        header: "Status",
+        cell: (props) => <Badge color="green">Active</Badge>
+    }),
+
+    columnHelper.display({
+        id: 'actions',
+        header: "Actions",
+        size: 10,
+        meta: {
+            className: "w-fit"
+        },
+        cell: (props) => <Flex gap="xs">
+
+            {/* Detail */}
+            <Tooltip label="Detail">
+                <ActionIcon variant="light" color="green" component={Link} href={`/dashboard/users/detail/${props.row.original.id}`}>
+                    <TbEye />
+                </ActionIcon>
+            </Tooltip>
+
+            {/* Edit */}
+            <Tooltip label="Edit">
+                <ActionIcon variant="light" color="yellow" component={Link} href={`/dashboard/users/edit/${props.row.original.id}`}>
+                    <TbPencil />
+                </ActionIcon>
+            </Tooltip>
+
+            {/* Delete */}
+            <Tooltip label="Delete">
+                <ActionIcon variant="light" color="red">
+                    <TbTrash />
+                </ActionIcon>
+            </Tooltip>
+        </Flex>
+    })
+];
+
+export default columns;
diff --git a/src/utils/stringToColorHex.ts b/src/utils/stringToColorHex.ts
new file mode 100644
index 0000000..d5693c2
--- /dev/null
+++ b/src/utils/stringToColorHex.ts
@@ -0,0 +1,26 @@
+/**
+ * Generates a consistent hex color code from a given string.
+ * 
+ * The function uses a hash algorithm to convert the input string into a number,
+ * which is then converted into a hexadecimal color code. The same input string
+ * will always produce the same color hex code.
+ * 
+ * @param inputString - The input string from which the color is generated.
+ * @returns The generated hex color code.
+ */
+export default function stringToColorHex(inputString: string): string {
+    // Hash function to convert string to number
+    let hash = 0;
+    for (let i = 0; i < inputString.length; i++) {
+        hash = inputString.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    // Convert the number to a hex color code
+    let color = '#';
+    for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 0xFF;
+        color += ('00' + value.toString(16)).substr(-2);
+    }
+
+    return color;
+}
\ No newline at end of file