show full message in contact us

src/pages/contactUs/List.tsx

@@ -6,9 +6,13 @@ import PageLoading from '../../components/PageLoading';
 import Error from '../../components/Error';
 import PaginationUi from '../../components/PaginationUi';
 import Td from '../../components/Td';
+import { Eye } from 'iconsax-react';
+import ContactUsMessageModal from '../../components/ContactUsMessageModal';
 
 const ContactUsList: FC = () => {
     const [currentPage, setCurrentPage] = useState(1);
+    const [selectedContactUs, setSelectedContactUs] = useState<ContactUsItem | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
     const { data: contactUsData, isLoading, error } = useGetContactUs(currentPage);
 
     if (isLoading) {
@@ -34,6 +38,16 @@ const ContactUsList: FC = () => {
         return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
     };
 
+    const handleViewMessage = (contactUs: ContactUsItem) => {
+        setSelectedContactUs(contactUs);
+        setIsModalOpen(true);
+    };
+
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setSelectedContactUs(null);
+    };
+
     return (
         <div>
             <PageTitle />
@@ -44,6 +58,8 @@ const ContactUsList: FC = () => {
                             <Td text={'نام کامل'} />
                             <Td text={'ایمیل/تلفن'} />
                             <Td text={'پیام'} />
+                            <Td text=''>
+                            </Td>
                         </tr>
                     </thead>
                     <tbody>
@@ -59,6 +75,14 @@ const ContactUsList: FC = () => {
                                     <Td text={contact.fullName} />
                                     <Td text={contact.email_phone} />
                                     <Td text={truncateText(contact.message)} />
+                                    <Td text=''>
+                                        <button
+                                            onClick={() => handleViewMessage(contact)}
+                                            className="cursor-pointer hover:opacity-70 transition-opacity"
+                                        >
+                                            <Eye size={20} color='#8C90A3' />
+                                        </button>
+                                    </Td>
                                 </tr>
                             ))
                         )}
@@ -72,6 +96,12 @@ const ContactUsList: FC = () => {
                     setCurrentPage(page);
                 }}
             />
+
+            <ContactUsMessageModal
+                open={isModalOpen}
+                close={handleCloseModal}
+                contactUs={selectedContactUs}
+            />
         </div>
     )
 }