feat: add sent messages list page with filters and table

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) => (