Starting working on settings Page.

src/components/wrappers/Dashboard/Settings/SettingsTabs/SettingsTabs.tsx

@@ -0,0 +1,36 @@
+"use client"
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
+import {DataTableWithPagination} from "@/components/wrappers/table/data-table-with-pagination";
+import {usersColumns} from "@/components/wrappers/Dashboard/Settings/SettingsTabs/columns-users";
+import {User} from "@prisma/client";
+import {backupColumns} from "@/features/backup/columns";
+
+
+export type SettingsTabsProps = {
+    users: User[];
+}
+
+export const SettingsTabs = (props: SettingsTabsProps) => {
+
+
+
+
+    return(
+        <Tabs defaultValue="informations" >
+            <TabsList className="w-full" >
+                <TabsTrigger className="w-full" value="informations">Informations</TabsTrigger>
+                <TabsTrigger className="w-full" value="users">Users</TabsTrigger>
+                <TabsTrigger className="w-full" value="email">Email</TabsTrigger>
+                <TabsTrigger className="w-full" value="storage">Storage</TabsTrigger>
+            </TabsList>
+            <TabsContent value="informations">
+                ok
+            </TabsContent>
+            <TabsContent value="users" className="h-full justify-between">
+                <DataTableWithPagination columns={usersColumns} data={props.users}/>
+            </TabsContent>
+            <TabsContent value="email">Change your password here.</TabsContent>
+            <TabsContent value="storage">Change your password here.</TabsContent>
+        </Tabs>
+    )
+}

src/components/wrappers/Dashboard/Settings/SettingsTabs/columns-users.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import {ColumnDef} from "@tanstack/react-table"
+import {Badge} from "@/components/ui/badge";
+import {User} from "@prisma/client";
+
+export const usersColumns: ColumnDef<User>[] = [
+    {
+        accessorKey: "id",
+        header: "Id",
+    },
+    {
+        accessorKey: "name",
+        header: "Name"
+    },
+    {
+        accessorKey: "email",
+        header: "Email"
+    },
+    {
+        accessorKey: "createdAt",
+        header: "Created At",
+        cell: ({row}) => {
+            return new Date(row.getValue("createdAt")).toLocaleString("fr-FR");
+        },
+    },
+    {
+        accessorKey: "authMethod",
+        header: "Method",
+        cell: ({row}) => {
+            return <Badge variant="outline">{row.getValue("authMethod")}</Badge>
+        },
+    }
+]

src/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu.tsx

@@ -3,14 +3,16 @@ import {SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem} from
 import Link from "next/link";
 import {cn} from "@/lib/utils";
 import {buttonVariants} from "@/components/ui/button";
-import {PropsWithChildren, useState} from "react";
+import {PropsWithChildren, useEffect, useState} from "react";
 import {ChartArea, Home, Settings, ShieldHalf} from "lucide-react";
+import {usePathname} from "next/navigation";
 
 export type SidebarMenuCustomProps = {}
 
 export const SidebarMenuCustom = (props: SidebarMenuCustomProps) => {
 
     const BASE_URL = "/dashboard";
+    const pathname = usePathname();
     // Menu items.
     const items = [
         {
@@ -35,6 +37,14 @@ export const SidebarMenuCustom = (props: SidebarMenuCustomProps) => {
         },
     ]
 
+    useEffect(() => {
+        const currentUrl = pathname;
+        const currentItem = items.find((item) => `${BASE_URL}/${item.url}` === currentUrl);
+        if (currentItem) {
+            setActiveItem(currentItem.title);
+        }
+    }, [pathname]);
+
     const [activeItem, setActiveItem] = useState(items[0].title);
     const handleItemClick = (title: string) => {
         setActiveItem(title);

src/components/wrappers/table/data-table-with-pagination.tsx

@@ -18,7 +18,7 @@ export function DataTableWithPagination<TData, TValue>({columns, data}: DataTabl
     const [sorting, setSorting] = useState<SortingState>([])
 
     const table = useReactTable({
-        data,
+        data: data,
         columns,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),

src/components/wrappers/table/data-table.tsx

@@ -6,7 +6,6 @@ export type dataTableProps = {
 }
 
 export const DataTable = ({table}: dataTableProps) => {
-
     return (
         <Table>
             <TableHeader>
@@ -43,7 +42,7 @@ export const DataTable = ({table}: dataTableProps) => {
                     ))
                 ) : (
                     <TableRow>
-                        <TableCell colSpan={table.columns.length} className="h-24 text-center">
+                        <TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
                             No results.
                         </TableCell>
                     </TableRow>