+ {text}
+
+ )
+}
+
+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 (
+
+
+ )
+}
+
+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
+
+
+ {
+ getAnnoncementDetail.isPending ?
+
+ {t('announcement.text_announcement')}
+
+ navigate(-1)} className='text-xs flex gap-0.5 items-center font-extralight'>
+ {t('back')}
+
+
+
+ }
+
+
+
+
+ {getAnnoncementDetail.data?.data?.announcement?.title}
+
+ {
+ getAnnoncementDetail.data?.data?.announcement.isImportant &&
+
+
+
+
+
+ )
+}
+
+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 (
+
+ {t('announcement.announcements')}
+
+
+
+
+
+
+
+
+
+
+ {
+ itemSelected &&
+
+
+
+
+ setSearch(value)}
+ />
+
+
+ {/*
+
+
*/}
+
+ {
+ getAnnoncements.isPending ?
+
+
+ :
+ getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
+ return (
+
+ handleChange(item)} className={clx(
+ 'p-4 border-b border-border cursor-pointer',
+ item.id === itemSelected?.id && 'bg-[#F8F9FB]'
+ )}>
+
+ )
+ })
+ }
+
+
+
+
+
+ {item.announcement.title}
+
+
+
+ {
+ item.announcement.isImportant &&
+
+
+
+
+
+
+ {moment(item.announcement.publishAt).format('jYYYY/jMM/jDD')}
+
+
+
+ }
+
+
+
+
+ متن اطلاعیه
+
+ {
+ itemSelected.announcement.isImportant &&
+
+ {itemSelected.announcement.title}
+
+
+
+
+
+
+
+ )
+}
+
+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:
+ "
+
+
+
+
+
+
+
+
+
+
+
+ این یک اطلاعیه نمونه است. محتوای این اطلاعیه برای نمایش داده شده است.
", + 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) => ( - +
-
+
