From 9a90f96170270c8b21157c6745a64469f7de5064 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 25 Oct 2025 11:26:12 +0330
Subject: [PATCH] announcement

---
 src/App.tsx                                   |  13 +-
 src/components/PageLoading.tsx                |  14 ++
 src/components/StatusWithText.tsx             |  29 ++++
 src/config/Paths.tsx                          |   1 +
 src/index.css                                 |   2 +-
 src/locale/fa.ts                              |  10 +-
 src/pages/annoncement/Detail.tsx              |  54 +++++++
 src/pages/annoncement/List.tsx                | 146 ++++++++++++++++++
 .../components/AnouncementSkeleton.tsx        |  41 +++++
 .../annoncement/hooks/useAnnoncementData.ts   |  17 ++
 .../annoncement/service/AnnoncementService.ts | 130 ++++++++++++++++
 .../annoncement/types/AnnoncementTypes.ts     |  18 +++
 src/pages/ticket/TicketList.tsx               |   3 +-
 src/router/MainRouter.tsx                     |   4 +
 src/shared/Sidebar.tsx                        |   2 +-
 15 files changed, 476 insertions(+), 8 deletions(-)
 create mode 100644 src/components/PageLoading.tsx
 create mode 100644 src/components/StatusWithText.tsx
 create mode 100644 src/pages/annoncement/Detail.tsx
 create mode 100644 src/pages/annoncement/List.tsx
 create mode 100644 src/pages/annoncement/components/AnouncementSkeleton.tsx
 create mode 100644 src/pages/annoncement/hooks/useAnnoncementData.ts
 create mode 100644 src/pages/annoncement/service/AnnoncementService.ts
 create mode 100644 src/pages/annoncement/types/AnnoncementTypes.ts

diff --git a/src/App.tsx b/src/App.tsx
index f6c0015..a14b315 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,19 +3,24 @@ import '@/assets/fonts/irancell/style.css'
 import 'swiper/swiper-bundle.css';
 import 'react-loading-skeleton/dist/skeleton.css'
 import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 // import { getToken } from './config/func'
 import MainRouter from './router/MainRouter'
 // import AuthRouter from './router/AuthRouter'
 
+const queryClient = new QueryClient()
+
 const App: FC = () => {
 
   // const isLoggedIn = getToken()
 
   return (
-    <BrowserRouter>
-      {/* {isLoggedIn ? <MainRouter /> : <AuthRouter />} */}
-      <MainRouter />
-    </BrowserRouter>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        {/* {isLoggedIn ? <MainRouter /> : <AuthRouter />} */}
+        <MainRouter />
+      </BrowserRouter>
+    </QueryClientProvider>
   )
 }
 
diff --git a/src/components/PageLoading.tsx b/src/components/PageLoading.tsx
new file mode 100644
index 0000000..e94ebad
--- /dev/null
+++ b/src/components/PageLoading.tsx
@@ -0,0 +1,14 @@
+import { type FC } from 'react'
+
+const PageLoading: FC = () => {
+    return (
+        <div className='flex items-center justify-center min-h-[200px]'>
+            <div className='flex flex-col items-center gap-4'>
+                <div className='w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin' />
+                <div className='text-sm text-gray-500'>در حال بارگذاری...</div>
+            </div>
+        </div>
+    )
+}
+
+export default PageLoading
diff --git a/src/components/StatusWithText.tsx b/src/components/StatusWithText.tsx
new file mode 100644
index 0000000..02a40cf
--- /dev/null
+++ b/src/components/StatusWithText.tsx
@@ -0,0 +1,29 @@
+import { type FC } from 'react'
+import { clx } from '../helpers/utils'
+
+type Props = {
+    variant: 'error' | 'success' | 'warning' | 'info'
+    text: string
+    className?: string
+}
+
+const StatusWithText: FC<Props> = ({ variant, text, className }) => {
+    const variantStyles = {
+        error: 'bg-red-50 text-red-600',
+        success: 'bg-green-50 text-green-600',
+        warning: 'bg-orange-50 text-orange-600',
+        info: 'bg-blue-50 text-blue-600',
+    }
+
+    return (
+        <div className={clx(
+            'px-2 py-1 rounded-lg text-xs font-medium whitespace-nowrap',
+            variantStyles[variant],
+            className
+        )}>
+            {text}
+        </div>
+    )
+}
+
+export default StatusWithText
diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx
index 98d50ac..ae9c50d 100644
--- a/src/config/Paths.tsx
+++ b/src/config/Paths.tsx
@@ -11,6 +11,7 @@ export const Paths = {
     },
     announcement: {
         list: '/announcement',
+        detail: '/announcement/',
     },
     criticisms: '/criticisms',
     learning: '/learning',
diff --git a/src/index.css b/src/index.css
index a0e1f33..ed8974a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -42,7 +42,7 @@ textarea::placeholder {
 
 @theme {
   --color-primary: #ffa800;
-  --color-border: #f5f7fc;
+  --color-border: #d0d0d0;
   --color-secondary: #ebedf5;
   --color-description: #c3c7dd;
   --color-desc: #8c90a3;
diff --git a/src/locale/fa.ts b/src/locale/fa.ts
index e7e1d3c..136fbea 100644
--- a/src/locale/fa.ts
+++ b/src/locale/fa.ts
@@ -7,13 +7,21 @@ export const fa = {
     myOrders: "سفارشات من",
     preFactors: "پیش فاکتورها",
     tickets: "تیکت ها",
-    announcement: "انتشارات",
+    announcement: "اطلاعیه",
     criticisms: "انتقادات",
     learning: "آموزش",
     submitYourOrder: "سفارش خودرا ثبت کنید",
     submitYourOrderDescription: "کارت ویزیت ، کاتالوگ ، بروشور و...",
     newOrder: "سفارش جدید",
   },
+  announcement: {
+    announcements: "اطلاعیه ها",
+    search: "جستجو",
+    important: "مهم",
+    new: "جدید",
+    text_announcement: "متن اطلاعیه",
+  },
+  back: "بازگشت",
   notif: {
     natification: "اعلان‌ها",
     all_read: "خواندن همه",
diff --git a/src/pages/annoncement/Detail.tsx b/src/pages/annoncement/Detail.tsx
new file mode 100644
index 0000000..eb7487e
--- /dev/null
+++ b/src/pages/annoncement/Detail.tsx
@@ -0,0 +1,54 @@
+import { type FC } from 'react'
+import StatusWithText from '../../components/StatusWithText'
+import { useNavigate, useParams } from 'react-router-dom'
+import { ArrowLeft2 } from 'iconsax-react'
+import { useGetAnnoncementDetail } from './hooks/useAnnoncementData'
+import PageLoading from '../../components/PageLoading'
+import { t } from '@/locale'
+
+const AnnouncementDetail: FC = () => {
+
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const getAnnoncementDetail = useGetAnnoncementDetail(id ? id : '')
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between'>
+                <div>
+                    {t('announcement.text_announcement')}
+                </div>
+                <div onClick={() => navigate(-1)} className='text-xs flex gap-0.5 items-center font-extralight'>
+                    {t('back')}
+                    <ArrowLeft2 size={12} color='black' />
+                </div>
+            </div>
+
+            {
+                getAnnoncementDetail.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
+                        <div className='flex justify-between items-start'>
+                            <div className='text-sm max-w-[70%] leading-67'>
+                                {getAnnoncementDetail.data?.data?.announcement?.title}
+                            </div>
+                            {
+                                getAnnoncementDetail.data?.data?.announcement.isImportant &&
+                                <StatusWithText
+                                    variant='error'
+                                    text={t('announcement.important')}
+                                />
+                            }
+                        </div>
+
+                        <div dangerouslySetInnerHTML={{ __html: getAnnoncementDetail.data?.data?.announcement?.content || '' }} className='mt-5 leading-7 text-xs font-light'>
+
+                        </div>
+                    </div>
+            }
+        </div>
+    )
+}
+
+export default AnnouncementDetail
\ No newline at end of file
diff --git a/src/pages/annoncement/List.tsx b/src/pages/annoncement/List.tsx
new file mode 100644
index 0000000..7bc1906
--- /dev/null
+++ b/src/pages/annoncement/List.tsx
@@ -0,0 +1,146 @@
+import { type FC, Fragment, useState } from 'react'
+import Input from '@/components/Input'
+import StatusWithText from '@/components/StatusWithText'
+import { clx } from '@/helpers/utils'
+import { useNavigate } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
+import { useGetAnnoncement, useGetAnnoncementDetail } from './hooks/useAnnoncementData'
+import type { AnnoncementItemType } from './types/AnnoncementTypes'
+import moment from 'moment-jalaali'
+import AnouncementSkeleton from './components/AnouncementSkeleton'
+import { t } from '@/locale'
+
+const AnnouncementtList: FC = () => {
+
+    const navigate = useNavigate()
+    const [search, setSearch] = useState<string>('')
+    const [itemSelected, setItemSelected] = useState<AnnoncementItemType>()
+    const getAnnoncements = useGetAnnoncement(search)
+    useGetAnnoncementDetail(itemSelected ? itemSelected.announcement.id : '')
+
+
+    const handleChange = (item: AnnoncementItemType) => {
+        if (window.innerWidth < 1280) {
+            navigate(Paths.announcement.detail + item.announcement.id)
+        } else {
+            setItemSelected(item)
+        }
+    }
+
+    return (
+        <div className='mt-4 text-sm'>
+            <div className='text-base'>
+                {t('announcement.announcements')}
+            </div>
+
+            <div className='mt-10 flex gap-8'>
+                <div className='bg-white xl:w-[400px] w-full rounded-2xl p-6'>
+                    <div className='flex gap-3 items-center'>
+                        <div className='flex-1'>
+                            <Input
+                                variant='search'
+                                placeholder={t('announcement.search')}
+                                className='-mt-1'
+                                onChangeSearchFinal={(value) => setSearch(value)}
+                            />
+                        </div>
+
+                        {/* <div>
+                            <Select
+                                items={[
+                                    { value: '1', label: 'همه' },
+                                    { value: '2', label: 'فعال' },
+                                    { value: '3', label: 'غیر فعال' },
+                                ]}
+                                className='bg-[#EEF0F7] w-[68px]'
+                            />
+                        </div> */}
+                    </div>
+
+                    <Fragment>
+                        <div className='mt-8'>
+                            {
+                                getAnnoncements.isPending ?
+                                    <Fragment>
+                                        <AnouncementSkeleton />
+                                        <AnouncementSkeleton />
+                                        <AnouncementSkeleton />
+                                    </Fragment>
+                                    :
+                                    getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
+                                        return (
+                                            <div onClick={() => handleChange(item)} className={clx(
+                                                'p-4 border-b border-border cursor-pointer',
+                                                item.id === itemSelected?.id && 'bg-[#F8F9FB]'
+                                            )}>
+                                                <div className='flex justify-between'>
+                                                    <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
+                                                        {item.announcement.title}
+                                                    </div>
+
+                                                    <div className='flex gap-1'>
+                                                        {
+                                                            item.announcement.isImportant &&
+                                                            <StatusWithText
+                                                                variant='error'
+                                                                text={t('announcement.important')}
+                                                            />
+                                                        }
+                                                        {
+                                                            !item.isRead &&
+                                                            <StatusWithText
+                                                                variant='success'
+                                                                text={t('announcement.new')}
+                                                            />
+                                                        }
+                                                    </div>
+                                                </div>
+
+                                                <div className='m-2 flex justify-between items-center text-[11px]'>
+                                                    <div dangerouslySetInnerHTML={{ __html: item.announcement.content || '' }} className='max-w-[70%] line-clamp-1 truncate text-description'>
+                                                    </div>
+                                                    <div className='text-description'>
+                                                        {moment(item.announcement.publishAt).format('jYYYY/jMM/jDD')}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                            }
+
+                        </div>
+                    </Fragment>
+                </div>
+
+                {
+                    itemSelected &&
+                    <div className='flex-1 hidden xl:block bg-white py-7 px-5 rounded-2xl'>
+                        <div className='flex justify-between items-center'>
+                            <div className='text-lg'>
+                                متن اطلاعیه
+                            </div>
+                            {
+                                itemSelected.announcement.isImportant &&
+                                <StatusWithText
+                                    variant='error'
+                                    text={t('announcement.important')}
+                                />
+                            }
+                        </div>
+
+                        <div className='mt-8'>
+                            {itemSelected.announcement.title}
+                        </div>
+
+                        <div dangerouslySetInnerHTML={{ __html: itemSelected.announcement.content || '' }} className='mt-5 leading-7 text-xs font-light'>
+
+                        </div>
+                    </div>
+                }
+            </div>
+
+        </div>
+    )
+}
+
+export default AnnouncementtList
\ No newline at end of file
diff --git a/src/pages/annoncement/components/AnouncementSkeleton.tsx b/src/pages/annoncement/components/AnouncementSkeleton.tsx
new file mode 100644
index 0000000..8f30138
--- /dev/null
+++ b/src/pages/annoncement/components/AnouncementSkeleton.tsx
@@ -0,0 +1,41 @@
+import { type FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+const AnouncementSkeleton: FC = () => {
+    return (
+        <div className={'p-4 border-b'}>
+            <div className='flex items-center justify-between'>
+                <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
+                    <Skeleton
+                        height={7}
+                        width={100}
+                    />
+                </div>
+
+                <div className='flex gap-1'>
+                    <Skeleton
+                        className='!w-10 !h-6 !rounded-full'
+                    />
+                    <Skeleton
+                        className='!w-10 !h-6 !rounded-full'
+                    />
+                </div>
+            </div>
+
+            <div className='m-2 flex justify-between items-center text-[11px]'>
+                <Skeleton
+                    height={7}
+                    width={150}
+                />
+                <div className='text-description'>
+                    <Skeleton
+                        height={7}
+                        width={40}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AnouncementSkeleton
\ No newline at end of file
diff --git a/src/pages/annoncement/hooks/useAnnoncementData.ts b/src/pages/annoncement/hooks/useAnnoncementData.ts
new file mode 100644
index 0000000..87ab3e5
--- /dev/null
+++ b/src/pages/annoncement/hooks/useAnnoncementData.ts
@@ -0,0 +1,17 @@
+import * as api from "../service/AnnoncementService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetAnnoncement = (search: string) => {
+  return useQuery({
+    queryKey: ["announcements", search],
+    queryFn: () => api.getAnnoncements(search),
+  });
+};
+
+export const useGetAnnoncementDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["announcement", id],
+    queryFn: () => api.getAnnoncementDetail(id),
+    enabled: !!id,
+  });
+};
diff --git a/src/pages/annoncement/service/AnnoncementService.ts b/src/pages/annoncement/service/AnnoncementService.ts
new file mode 100644
index 0000000..30a8734
--- /dev/null
+++ b/src/pages/annoncement/service/AnnoncementService.ts
@@ -0,0 +1,130 @@
+// import axios from "../../../config/axios";
+
+// داده‌های استاتیک برای نمایش
+const mockAnnoncementsData = {
+  data: {
+    announcements: [
+      {
+        id: "1",
+        createdAt: "2024-01-15T10:00:00Z",
+        updatedAt: "2024-01-15T10:00:00Z",
+        announcement: {
+          id: "ann1",
+          createdAt: "2024-01-15T10:00:00Z",
+          title: "به‌روزرسانی سیستم اطلاع‌رسانی",
+          content:
+            "سیستم اطلاع‌رسانی با ویژگی‌های جدید به‌روزرسانی شد. لطفاً از طریق بخش تنظیمات، تنظیمات خود را بررسی کنید.",
+          publishAt: "2024-01-15T10:00:00Z",
+          targetService: {
+            id: "1",
+            name: "سرویس عمومی",
+          },
+          isImportant: true,
+        },
+        isRead: false,
+      },
+      {
+        id: "2",
+        createdAt: "2024-01-14T08:00:00Z",
+        updatedAt: "2024-01-14T08:00:00Z",
+        announcement: {
+          id: "ann2",
+          createdAt: "2024-01-14T08:00:00Z",
+          title: "نگه‌داری برنامه‌ریزی شده",
+          content:
+            "در تاریخ ۲۰ دی ماه، به‌دلیل انجام نگه‌داری برنامه‌ریزی شده، سرویس‌ها به مدت ۲ ساعت در دسترس نخواهند بود.",
+          publishAt: "2024-01-14T08:00:00Z",
+          targetService: {
+            id: "1",
+            name: "سرویس عمومی",
+          },
+          isImportant: false,
+        },
+        isRead: false,
+      },
+      {
+        id: "3",
+        createdAt: "2024-01-13T15:30:00Z",
+        updatedAt: "2024-01-13T15:30:00Z",
+        announcement: {
+          id: "ann3",
+          createdAt: "2024-01-13T15:30:00Z",
+          title: "ویژگی جدید: پشتیبانی از پرداخت آنلاین",
+          content:
+            "ویژگی پرداخت آنلاین به سیستم اضافه شد. از این پس می‌توانید به‌راحتی از طریق درگاه‌های بانکی پرداخت خود را انجام دهید.",
+          publishAt: "2024-01-13T15:30:00Z",
+          targetService: {
+            id: "2",
+            name: "سرویس پرداخت",
+          },
+          isImportant: false,
+        },
+        isRead: true,
+      },
+    ],
+  },
+};
+
+const mockAnnoncementDetailData = (id: string) => {
+  const announcement = mockAnnoncementsData.data.announcements.find(
+    (item) => item.announcement.id === id
+  );
+
+  if (!announcement) {
+    return {
+      data: {
+        announcement: {
+          id: id,
+          createdAt: "2024-01-15T10:00:00Z",
+          title: "اطلاعیه نمونه",
+          content:
+            "<p>این یک اطلاعیه نمونه است. محتوای این اطلاعیه برای نمایش داده شده است.</p>",
+          publishAt: "2024-01-15T10:00:00Z",
+          targetService: {
+            id: "1",
+            name: "سرویس عمومی",
+          },
+          isImportant: false,
+        },
+      },
+    };
+  }
+
+  return {
+    data: {
+      announcement: announcement.announcement,
+    },
+  };
+};
+
+export const getAnnoncements = async (search: string) => {
+  // ارتباط با سرور کامنت شده - از داده استاتیک استفاده می‌شود
+  // const { data } = await axios.get(`/announcements/user?q=${search}`);
+  // return data;
+
+  // شبیه‌سازی تاخیر شبکه
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  // فیلتر بر اساس جستجو
+  let filteredData = { ...mockAnnoncementsData };
+  if (search && search.trim()) {
+    filteredData.data.announcements = mockAnnoncementsData.data.announcements.filter(
+      (item) =>
+        item.announcement.title.includes(search) ||
+        item.announcement.content.includes(search)
+    );
+  }
+
+  return filteredData;
+};
+
+export const getAnnoncementDetail = async (id: string) => {
+  // ارتباط با سرور کامنت شده - از داده استاتیک استفاده می‌شود
+  // const { data } = await axios.get(`/announcements/${id}`);
+  // return data;
+
+  // شبیه‌سازی تاخیر شبکه
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  return mockAnnoncementDetailData(id);
+};
diff --git a/src/pages/annoncement/types/AnnoncementTypes.ts b/src/pages/annoncement/types/AnnoncementTypes.ts
new file mode 100644
index 0000000..6ebe9bf
--- /dev/null
+++ b/src/pages/annoncement/types/AnnoncementTypes.ts
@@ -0,0 +1,18 @@
+export type AnnoncementItemType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  announcement: {
+    id: string;
+    createdAt: string;
+    title: string;
+    content: string;
+    publishAt: string;
+    targetService: {
+      id: string;
+      name: string;
+    };
+    isImportant: boolean;
+  };
+  isRead: boolean;
+};
diff --git a/src/pages/ticket/TicketList.tsx b/src/pages/ticket/TicketList.tsx
index f4717a2..e6449ad 100644
--- a/src/pages/ticket/TicketList.tsx
+++ b/src/pages/ticket/TicketList.tsx
@@ -8,6 +8,7 @@ import { staticTicketsData } from './data/staticData'
 import { t } from '@/locale'
 import moment from 'moment-jalaali'
 import type { ColumnType } from '@/components/types/TableTypes'
+import { Paths } from '@/config/Paths'
 
 // تعریف type برای تیکت
 interface TicketItem {
@@ -89,7 +90,7 @@ const TicketList: FC = () => {
             title: t('ticket.detail'),
             key: 'actions',
             render: (item) => (
-                <Link to={`/tickets/${item.id}`}>
+                <Link to={Paths.tickets.detail + item.id}>
                     <Eye size={20} color='#8C90A3' />
                 </Link>
             )
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index f1f34ec..1e951c1 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -11,6 +11,8 @@ import OrderDetail from '@/pages/order/OrderDetail'
 import TicketList from '@/pages/ticket/TicketList'
 import CreateTicket from '@/pages/ticket/CreateTicket'
 import TicketDetail from '@/pages/ticket/Detail'
+import AnnouncementList from '@/pages/annoncement/List'
+import AnnouncementDetail from '@/pages/annoncement/Detail'
 
 const MainRouter: FC = () => {
     return (
@@ -31,6 +33,8 @@ const MainRouter: FC = () => {
                             <Route path={Paths.tickets.list} element={<TicketList />} />
                             <Route path={Paths.tickets.create} element={<CreateTicket />} />
                             <Route path={`${Paths.tickets.detail}:id`} element={<TicketDetail />} />
+                            <Route path={Paths.announcement.list} element={<AnnouncementList />} />
+                            <Route path={`${Paths.announcement.detail}:id`} element={<AnnouncementDetail />} />
                         </Routes>
                     </div>
                 </div>
diff --git a/src/shared/Sidebar.tsx b/src/shared/Sidebar.tsx
index 62a9273..ec24bfc 100644
--- a/src/shared/Sidebar.tsx
+++ b/src/shared/Sidebar.tsx
@@ -32,7 +32,7 @@ const SideBar: FC = () => {
                 )}
             >
                 <div className='px-6'>
-                    <div className='flex border-b-2 border-border pb-10'>
+                    <div className='flex border-b-2 border-[#f5f7fc] pb-10'>
                         <img src={LogoImage} className='w-[120px]' />
                     </div>
                 </div>