diff --git a/src/components/stats.tsx b/src/components/stats.tsx
index 6691ccb..9a6f574 100644
--- a/src/components/stats.tsx
+++ b/src/components/stats.tsx
@@ -32,22 +32,22 @@ export default function Statistics() {
})
const statsData: StatsType[] = [
- { id: 1, title: 'Organisations', value: stats?.companies, icon: icons.companiesIcon, color: 'blue' },
- { id: 2, title: 'Utilisateurs', value: stats?.users, icon: icons.userIcon, color: 'blue' },
- { id: 3, title: 'Documents', value: stats?.documents, icon: icons.docummentTextIcon, color: 'blue' },
- { id: 4, title: 'Stockage', value: stats?.documents_size, icon: icons.archivesIcon, color: 'blue' }
+ { id: 1, title: 'Organisations', value: stats?.companies, icon: icons.companiesIconBlue, color: 'blue' },
+ { id: 2, title: 'Utilisateurs', value: stats?.users, icon: icons.peopleIcon, color: 'blue' },
+ { id: 3, title: 'Documents', value: stats?.documents, icon: icons.docsArchive, color: 'blue' },
+ { id: 4, title: 'Stockage', value: (stats?.documents_size + " GB"), icon: icons.maximizeIcon, color: 'blue' }
];
return (
-
+
{statsData.map(({ id, title, value, icon }) => (
-
-
+
+ {/*
*/}
-
{title}
+
{title}
{status === "loading" && isLoading ? "Chargement..." : value}
-
+ {/*
*/}
))}
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 948ca8c..7c15b62 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -1,214 +1,209 @@
"use client";
import {
- ColumnDef,
- flexRender,
- getCoreRowModel,
- useReactTable,
- getPaginationRowModel,
- ColumnFiltersState,
- getFilteredRowModel,
- Table as TableType,
- } from "@tanstack/react-table"
+ ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ useReactTable,
+ getPaginationRowModel,
+ ColumnFiltersState,
+ getFilteredRowModel,
+ Table as TableType,
+} from "@tanstack/react-table"
import { ReactNode, useEffect, useRef, useState } from "react";
import Image from "next/image";
import { icons } from "#/assets/icons";
import clsx from "clsx";
- interface DataTableProps
{
- columns: ColumnDef[]
- data: TData[],
- pageSize?: number,
- header?: ReactNode | ((table: TableType) => ReactNode),
- isDataLoading?: boolean
- }
+interface DataTableProps {
+ columns: ColumnDef[]
+ data: TData[],
+ pageSize?: number,
+ header?: ReactNode | ((table: TableType) => ReactNode),
+ isDataLoading?: boolean
+}
export default function Table({
- columns,
+ columns,
+ data,
+ pageSize = 10,
+ header,
+ isDataLoading = true
+}: DataTableProps) {
+ const [rowSelection, setRowSelection] = useState({})
+ const [columnFilters, setColumnFilters] = useState(
+ []
+ )
+
+ const table = useReactTable({
data,
- pageSize = 10,
- header,
- isDataLoading = true
- }: DataTableProps) {
- const [rowSelection, setRowSelection] = useState({})
- const [columnFilters, setColumnFilters] = useState(
- []
- )
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
- const table = useReactTable({
- data,
- columns,
- getCoreRowModel: getCoreRowModel(),
- getPaginationRowModel: getPaginationRowModel(),
-
- state: {
- rowSelection,
- columnFilters,
- },
- initialState: {
- pagination: {
- pageSize: pageSize,
- }
- },
- enableRowSelection: true,
- getFilteredRowModel: getFilteredRowModel(),
- onRowSelectionChange: setRowSelection,
- onColumnFiltersChange: setColumnFilters,
- })
+ state: {
+ rowSelection,
+ columnFilters,
+ },
+ initialState: {
+ pagination: {
+ pageSize: pageSize,
+ }
+ },
+ enableRowSelection: true,
+ getFilteredRowModel: getFilteredRowModel(),
+ onRowSelectionChange: setRowSelection,
+ onColumnFiltersChange: setColumnFilters,
+ })
- const headerCheckboxRef = useRef(null);
+ const headerCheckboxRef = useRef(null);
- useEffect(() => {
- if (headerCheckboxRef.current) {
- headerCheckboxRef.current.indeterminate =
- table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected();
- }
-
- const selectedRows = table.getSelectedRowModel().rows;
- const filteredSelectedRows = table
- .getRowModel()
- .rows.filter((row) => row.getIsSelected())
- .map((row) => row.original);
-
- console.log("SELECTED ALL = ", selectedRows);
- console.log("SELECTED = ", filteredSelectedRows);
- }, [
- table
- ]);
-
- const totalPages = table.getPageCount()
- const currentPage = table.getState().pagination.pageIndex + 1
-
- const getPageNumbers = () => {
- const pages = []
- for (let i = 1; i <= totalPages; i++) {
- pages.push(i)
- }
- return pages
+ useEffect(() => {
+ if (headerCheckboxRef.current) {
+ headerCheckboxRef.current.indeterminate =
+ table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected();
}
- const render = () => {
- if(!header) return null
+ const selectedRows = table.getSelectedRowModel().rows;
+ const filteredSelectedRows = table
+ .getRowModel()
+ .rows.filter((row) => row.getIsSelected())
+ .map((row) => row.original);
- return(
-
- {typeof header === 'function'
- ? header(table)
- : header}
-
- )
+ console.log("SELECTED ALL = ", selectedRows);
+ console.log("SELECTED = ", filteredSelectedRows);
+ }, [
+ table
+ ]);
+
+ const totalPages = table.getPageCount()
+ const currentPage = table.getState().pagination.pageIndex + 1
+
+ const getPageNumbers = () => {
+ const pages = []
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i)
}
+ return pages
+ }
- return(
-
- {render()}
+ const render = () => {
+ if (!header) return null
-
-
-
-
-
-
- {getPageNumbers().map((pageNumber) => (
-
- ))}
-
-
-
-
-
+ return (
+
+ {typeof header === 'function'
+ ? header(table)
+ : header}
+
)
+ }
+
+ return (
+
+ {render()}
+
+
+
+
+
+
+
+ {getPageNumbers().map((pageNumber) => (
+
+ ))}
+
+
+
+
+
+ )
}
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 6d2aab8..4dacfc0 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -30,7 +30,7 @@ export interface FormProps{
export interface StatsType {
id: number;
title: string;
- value: number | undefined;
+ value: number | string | undefined;
icon: string;
color: string;
}