feat: add sent messages list page with filters and table

src/components/Input.tsx

@@ -101,7 +101,7 @@ const Input: FC<Props> = (props: Props) => {
 
                 {
                     props.variant === 'search' &&
-                    <SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
+                    <SearchNormal size={20} color='#8C90A3' className='absolute pointer-events-none top-0 w-5 bottom-0 my-auto right-3' />
                 }
 
                 {

src/components/Table.tsx

@@ -2,6 +2,7 @@ import React, { Fragment, useState } from 'react';
 import DefaultTableSkeleton from './DefaultTableSkeleton';
 import Td from './Td';
 import { TableProps, RowDataType, ColumnType } from './types/TableTypes';
+import { Checkbox } from './ui/checkbox';
 
 const Table = <T extends RowDataType>({
     columns,
@@ -41,6 +42,18 @@ const Table = <T extends RowDataType>({
                 setSelectedRows([...selectedRows, item]);
             }
         }
+
+        if (onRowClick) {
+            onRowClick(item.id, item);
+        }
+    };
+
+    const handleSelectAll = () => {
+        if (selectedRows.length === data.length) {
+            setSelectedRows([]);
+        } else {
+            setSelectedRows([...data]);
+        }
     };
 
     const renderTableBody = () => {
@@ -61,16 +74,24 @@ const Table = <T extends RowDataType>({
                 </tr>
             );
         }
-
         return data.map((item, rowIndex) => (
             <tr
                 key={item.id}
                 className={`tr border-b hover:bg-gray-50 ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)}`}
-                onClick={() => onRowClick && onRowClick(item.id, item)}
+                onClick={() => handleRowClick(item)}
             >
                 {selectable && (
-                    <td className="p-3 w-10 relative z-[5]">
-                        <input type="checkbox" checked={selectedRows.includes(item)} onChange={() => handleRowClick(item)} />
+                    <td className="p-3 w-10  relative z-[5]">
+                        <Checkbox
+                            checked={selectedRows.includes(item)}
+                            onCheckedChange={(checked) => {
+                                if (checked) {
+                                    setSelectedRows([...selectedRows, item]);
+                                } else {
+                                    setSelectedRows(selectedRows.filter((row) => row !== item));
+                                }
+                            }}
+                        />
                     </td>
                 )}
                 {columns.map((col) => (
@@ -91,11 +112,11 @@ const Table = <T extends RowDataType>({
                     {selectable && (
                         <th
                             className="p-3 w-10 relative z-[5]"
-                            onClick={(e) => {
-                                e.stopPropagation();
-                            }}
                         >
-                            <input type="checkbox" checked={false} onChange={() => { }} />
+                            <Checkbox
+                                checked={data.length > 0 && selectedRows.length === data.length}
+                                onCheckedChange={handleSelectAll}
+                            />
                         </th>
                     )}
                     {columns.map((col) => (

src/components/Td.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react'
 
 interface Props {
-    text: string,
+    text: string | number,
     children?: ReactNode,
     dir?: string,
 }

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }