table and filter reusable component

2025-04-28 14:13:11 +03:30
parent 53212445c6
commit d11837fd3f
18 changed files with 706 additions and 55 deletions
@@ -0,0 +1,95 @@
+import Filters, { FilterValues } from '../../components/Filters';
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Table, { ColumnType } from '../../components/Table';
+import { InfoCircle, More, Refresh2 } from 'iconsax-react';
+
+interface Message extends Record<string, unknown> {
+    id: string;
+    title: string;
+    sender: string;
+    date: string;
+    read: boolean;
+}
+
+const List: FC = () => {
+    const { t } = useTranslation();
+    const [isLoading] = useState(false);
+
+    const messageData: Message[] = [
+        { id: '1', title: 'اولین پیام', sender: 'علی محمدی', date: '1402/05/12', read: true },
+        { id: '2', title: 'دومین پیام', sender: 'زهرا احمدی', date: '1402/05/13', read: true },
+        { id: '3', title: 'جلسه هفتگی', sender: 'مدیریت', date: '1402/05/14', read: true },
+    ];
+
+    const columns: ColumnType<Message>[] = [
+        {
+            key: 'title',
+            title: 'عنوان پیام',
+            render: (item) => (
+                <div className="flex items-center">
+                    {!item.read && <div className="w-2 h-2 rounded-full bg-blue-500 mr-2" />}
+                    <span>{item.title}</span>
+                </div>
+            )
+        },
+        { key: 'sender', title: 'فرستنده' },
+        { key: 'date', title: 'تاریخ', align: 'center' },
+    ];
+
+    const tableActions = (
+        <div className='flex items-center gap-4'>
+            <Refresh2 size={20} color='black' />
+            <More size={20} color='black' className='rotate-90' />
+        </div>
+    );
+
+    const handleFilterChange = (newFilters: FilterValues) => {
+        console.log('Applied filters:', newFilters);
+    };
+
+    return (
+        <div className='mt-4'>
+            <h1>{t('received.title')}</h1>
+
+            <Filters
+                fields={[
+                    { type: 'date', name: 'from_date', placeholder: t('received.from_date') },
+                    { type: 'date', name: 'to_date', placeholder: t('received.to_date') },
+                    {
+                        type: 'select',
+                        name: 'status',
+                        placeholder: t('received.all'),
+                        options: [
+                            { value: 'all', label: t('received.all') },
+                            { value: 'read', label: t('received.read') },
+                            { value: 'unread', label: t('received.unread') }
+                        ]
+                    },
+                    { type: 'input', name: 'search', placeholder: t('received.search') }
+                ]}
+                onChange={handleFilterChange}
+                className="mt-8 flex justify-between items-center"
+                searchField="search"
+            />
+
+            <Table<Message>
+                columns={columns}
+                data={messageData}
+                isLoading={isLoading}
+                showHeader={false}
+                actions={tableActions}
+                onRowClick={(id) => console.log(`کلیک روی پیام با شناسه ${id}`)}
+                noDataMessage={
+                    <div className="flex flex-col items-center py-6">
+                        <InfoCircle size={40} className="text-gray-300 mb-2" />
+                        <div>هیچ پیامی یافت نشد</div>
+                    </div>
+                }
+            />
+
+        </div>
+    )
+}
+
+export default List