hamid zarghami
98 lines
3.6 KiB
TypeScript
98 lines
3.6 KiB
TypeScript
import Filters, { FilterValues } from '../../components/Filters';
|
||
import { FC, ReactNode, useState } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Table from '../../components/Table';
|
||
import { ColumnType } from '../../components/types/TableTypes';
|
||
import { InfoCircle, More, Refresh2 } from 'iconsax-react';
|
||
|
||
interface Message extends Record<string, unknown> {
|
||
id: string;
|
||
title: string | ReactNode;
|
||
sender: string;
|
||
date: string;
|
||
read: boolean;
|
||
}
|
||
|
||
const List: FC = () => {
|
||
const { t } = useTranslation();
|
||
const [isLoading] = useState(false);
|
||
|
||
const messageData: Message[] = [
|
||
{ id: '1', title: <div className='text-blue-500'>پیش نویس</div>, sender: 'علی محمدی', date: '1402/05/12', read: true },
|
||
{ id: '2', title: <div className='text-blue-500'>پیش نویس</div>, sender: 'زهرا احمدی', date: '1402/05/13', read: true },
|
||
{ id: '3', title: <div className='text-blue-500'>پیش نویس</div>, 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('draft.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>
|
||
}
|
||
selectable={true}
|
||
/>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default List
|