From bfb9f3cbcb3b35e4a1899f6eb93d089365e0fabc Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 26 Jan 2025 08:57:06 +0330
Subject: [PATCH] messages

---
 package-lock.json             |  3 --
 src/components/DatePicker.tsx | 15 ++++---
 src/config/Pages.ts           |  7 +--
 src/langs/fa.json             |  9 ++++
 src/pages/messages/List.tsx   | 82 +++++++++++++++++++++++++++++++++++
 src/router/Main.tsx           |  2 +
 6 files changed, 107 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/messages/List.tsx

diff --git a/package-lock.json b/package-lock.json
index 427c4b2..d1bc9ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3401,10 +3401,7 @@
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
       "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
-<<<<<<< HEAD
       "dev": true,
-=======
->>>>>>> add-discount-blog
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.8.0"
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
index 6e2f994..1b6ac87 100644
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@@ -4,6 +4,7 @@ import persian from 'react-date-object/calendars/persian';
 import persian_fa from 'react-date-object/locales/persian_fa';
 import DateObject from 'react-date-object';
 import CalenderIcon from '../assets/images/calendar.svg'
+import { clx } from '../helpers/utils';
 
 type Props = {
     onChange: (date: string) => void;
@@ -13,7 +14,7 @@ type Props = {
     reset?: boolean;
     isDateTime?: boolean;
     className?: string;
-    label: string
+    label?: string
 };
 
 const DatePickerComponent: FC<Props> = (props: Props) => {
@@ -45,10 +46,14 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
 
     return (
         <div className="w-full">
-            <div className='text-sm'>
-                {props.label}
-            </div>
-            <div className='relative mt-1.5'>
+            {props.label &&
+                <div className='text-sm'>
+                    {props.label}
+                </div>}
+            <div className={clx(
+                'relative ',
+                props.label && 'mt-1.5'
+            )}>
                 <DatePicker
                     placeholder={props.placeholder}
                     value={value}
diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index ac9dc15..097f6a9 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -45,7 +45,7 @@ export const Pages = {
   },
   discount: {
     list: "/discounts/list",
-      create: "/discounts/create"
+    create: "/discounts/create",
   },
   referralCode: {
     list: "/referral-code/list",
@@ -55,15 +55,16 @@ export const Pages = {
   },
   ads: {
     list: "/ads/list",
-    create: "/ads/create"
+    create: "/ads/create",
   },
   blog: {
     list: "/blog/list",
     create: "/blog/create",
-    category: "/blog/category"
+    category: "/blog/category",
   },
   messages: {
     list: "/messages/list",
+    detail: "/messages/detail/",
   },
   customer: {
     list: "/customers/list",
diff --git a/src/langs/fa.json b/src/langs/fa.json
index dc3a02d..1242e9f 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -472,5 +472,14 @@
     "city": "شهر",
     "password": "رمز عبور",
     "reapeat_password": "تکرار رمز عبور"
+  },
+  "messages": {
+    "messages_list": "لیست پیام ها",
+    "submit_date": "تاریخ ثبت",
+    "number": "شماره",
+    "fullName": "نام و نام خانوادگی",
+    "email": "ایمیل",
+    "subject": "موضوع",
+    "date": "تاریخ"
   }
 }
diff --git a/src/pages/messages/List.tsx b/src/pages/messages/List.tsx
new file mode 100644
index 0000000..79309ff
--- /dev/null
+++ b/src/pages/messages/List.tsx
@@ -0,0 +1,82 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { Eye } from 'iconsax-react'
+import DatePickerComponent from '../../components/DatePicker'
+import Input from '../../components/Input'
+
+const MessagesList: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('messages.messages_list')}
+            </div>
+
+            <div className='mt-6 flex justify-between items-center'>
+                <div>
+                    <DatePickerComponent
+                        onChange={() => { }}
+                        placeholder={t('messages.submit_date')}
+                    />
+                </div>
+
+                <div>
+                    <Input
+                        placeholder={t('search')}
+                        variant='search'
+                        className='bg-white border'
+                    />
+                </div>
+
+            </div>
+
+            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                <table className='w-full text-sm '>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={t('messages.number')} />
+                            <Td text={t('messages.fullName')} />
+                            <Td text={t('messages.email')} />
+                            <Td text={t('messages.subject')} />
+                            <Td text={t('messages.date')} />
+                            <Td text={''} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr className='tr'>
+                            <Td text={'۱۲۳۳۴'} />
+                            <Td text={'سیما فرهادی'} />
+                            <Td text={'info@example.com'} />
+                            <Td text={'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ'} />
+                            <Td text={'(۲۰۲۴-۱۱-۱) ۱۴۰۳/۰۹/۰۱'} />
+                            <Td text={''}>
+                                <Link to={Pages.messages.detail + '1'}>
+                                    <Eye size={20} color='black' />
+                                </Link>
+                            </Td>
+                        </tr>
+                        <tr className='tr'>
+                            <Td text={'۱۲۳۳۴'} />
+                            <Td text={'سیما فرهادی'} />
+                            <Td text={'info@example.com'} />
+                            <Td text={'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ'} />
+                            <Td text={'(۲۰۲۴-۱۱-۱) ۱۴۰۳/۰۹/۰۱'} />
+                            <Td text={''}>
+                                <Link to={Pages.messages.detail + '1'}>
+                                    <Eye size={20} color='black' />
+                                </Link>
+                            </Td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default MessagesList
\ No newline at end of file
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 5a2cd9f..292e615 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -37,6 +37,7 @@ import Category from '../pages/service/Category'
 import CustomerList from '../pages/customer/List'
 import CreateCustomer from '../pages/customer/Create'
 import TicketCategory from '../pages/ticket/Category'
+import MessagesList from '../pages/messages/List'
 
 const MainRouter: FC = () => {
 
@@ -86,6 +87,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.profile} element={<Profile />} />
                             <Route path={Pages.customer.list} element={<CustomerList />} />
                             <Route path={Pages.customer.create} element={<CreateCustomer />} />
+                            <Route path={Pages.messages.list} element={<MessagesList />} />
 
                         </Routes>
                     </div>