show full message in contact us

src/components/ContactUsMessageModal.tsx

@@ -0,0 +1,56 @@
+import { type FC } from 'react'
+import DefaulModal from './DefaulModal'
+import { type ContactUsItem } from '../pages/contactUs/types'
+
+interface Props {
+    open: boolean
+    close: () => void
+    contactUs: ContactUsItem | null
+}
+
+const ContactUsMessageModal: FC<Props> = ({ open, close, contactUs }) => {
+    if (!contactUs) return null
+
+    return (
+        <DefaulModal
+            open={open}
+            close={close}
+            isHeader={true}
+            title_header="مشاهده پیام کامل"
+            width={600}
+        >
+            <div className="p-4">
+                <div className="space-y-4">
+                    <div className="flex flex-col space-y-2">
+                        <label className="text-sm font-medium text-gray-700">
+                            نام کامل
+                        </label>
+                        <div className="p-3 bg-gray-50 rounded-lg text-sm text-gray-900">
+                            {contactUs.fullName}
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col space-y-2">
+                        <label className="text-sm font-medium text-gray-700">
+                            ایمیل / تلفن
+                        </label>
+                        <div className="p-3 bg-gray-50 text-sm rounded-lg text-gray-900">
+                            {contactUs.email_phone}
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col space-y-2">
+                        <label className="text-sm font-medium text-gray-700">
+                            پیام
+                        </label>
+                        <div className="p-3 text-sm bg-gray-50 rounded-lg text-gray-900 whitespace-pre-wrap break-words">
+                            {contactUs.message}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default ContactUsMessageModal

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>
     )
 }