feat(components): add CryptosTable and WalletTable data-tables components

Introduce CryptosTable and WalletTable components. CryptosTable is responsible for displaying cryptocurrency information available for purchase, while WalletTable displays the user's current cryptocurrency holdings. Both components utilize react-table for table generation and sorting functionality. Additional "Buy" and "View" modals have been configured for CryptosTable.

src/components/data-tables/cryptos-table.tsx

@@ -0,0 +1,86 @@
+'use client'
+import * as React from 'react';
+import type {ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
+
+import {
+ type ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+import {DataTable} from "@/components/ui/data-table";
+import {Button} from "@/components/ui/button";
+import {ArrowUpDown, MoreHorizontal} from "lucide-react";
+import {useRouter} from "next/navigation";
+import {useState} from "react";
+import {BuyModal} from "@/components/cryptos/buy-modal";
+import {ViewModal} from "@/components/cryptos/view-modal";
+
+interface DataTableProps<TData, TValue> {
+ columns: ColumnDef<TData, TValue>[]
+ data: TData[]
+}
+
+type Props = {
+	cryptosArray: ICryptoInWalletInfo[]
+};
+
+export function CryptosTable(props: Props) {
+	const router = useRouter()
+	const cryptos= props.cryptosArray
+
+	const columns: ColumnDef<ICryptoInWalletInfo, any>[] = [
+		{
+			accessorKey: "name",
+			header: "Name",
+		},
+		{
+			accessorKey: "value",
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="light"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Value - USD
+						<ArrowUpDown className="ml-2 h-4 w-4" />
+					</Button>
+				)
+			},
+		},
+		{
+			accessorKey: "quantity",
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="light"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Available from server
+						<ArrowUpDown className="ml-2 h-4 w-4" />
+					</Button>
+				)
+			},
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				const payment = row.original
+
+				return (
+					<div className={"flex gap-2"}>
+						<BuyModal cryptoData={row.original}/>
+						<ViewModal targetedCryptoId={row.original.id}/>
+					</div>
+				)
+			},
+		},
+	];
+
+	return (
+		<>
+			<DataTable columns={columns} data={cryptos} fieldToFilter={"name"}/>
+		</>
+	);
+
+}

src/components/data-tables/wallet-table.tsx

@@ -0,0 +1,86 @@
+'use client'
+import * as React from 'react';
+import type {ICryptoInUserWalletInfo, ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+} from "@tanstack/react-table"
+import {DataTable} from "@/components/ui/data-table";
+import {Button} from "@/components/ui/button";
+import {ArrowUpDown, MoreHorizontal} from "lucide-react";
+import {useRouter} from "next/navigation";
+import {useState} from "react";
+import {BuyModal} from "@/components/cryptos/buy-modal";
+import {ViewModal} from "@/components/cryptos/view-modal";
+import {IUserWallet} from "@/interfaces/userdata.interface";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[]
+	data: TData[]
+}
+
+type Props = {
+	walletArray: IUserWallet
+};
+
+export function WalletTable(props: Props) {
+	const router = useRouter()
+	const wallet= props.walletArray.owned_cryptos
+
+	const columns: ColumnDef<ICryptoInUserWalletInfo, any>[] = [
+		{
+			accessorKey: "name",
+			header: "Name",
+		},
+		{
+			accessorKey: "value",
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="light"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Value - USD
+						<ArrowUpDown className="ml-2 h-4 w-4" />
+					</Button>
+				)
+			},
+		},
+		{
+			accessorKey: "owned_amount",
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="light"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Amount owned
+						<ArrowUpDown className="ml-2 h-4 w-4" />
+					</Button>
+				)
+			},
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				const payment = row.original
+
+				return (
+					<div className={"flex gap-2"}>
+						<p className={"font-light italic text-xs"}>Soon here : Sell, History</p>
+					</div>
+				)
+			},
+		},
+	];
+
+	return (
+		<>
+			<DataTable columns={columns} data={wallet} fieldToFilter={"name"}/>
+		</>
+	);
+
+}