danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

invoice bg cover service

Browse Source
This commit is contained in:
hamid zarghami
2025-04-23 16:03:53 +03:30
parent b891a2dde6
commit e4a0f49a19
23 changed files with 7061 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/blog/BlogList.tsx
+16 -10
View File
@@ -1,7 +1,7 @@
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye, Trash } from 'iconsax-react'
import { Add, Eye } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
@@ -9,6 +9,7 @@ import Input from '../../components/Input'
import { useGetBlogs, useDeleteBlog } from './hooks/useBlogData'
import { BlogItemType } from './types/BlogTypes'
import moment from 'moment-jalaali'
import TrashWithConfrim from '../../components/TrashWithConfrim'
const BlogList: FC = () => {
const { t } = useTranslation('global')
@@ -116,9 +117,11 @@ const BlogList: FC = () => {
<Td text={''}>
<img src={item.imageUrl} alt={item.title} className='w-20 rounded-lg' />
</Td>
<Td text={item.title} />
<Td text={''}>
<p dangerouslySetInnerHTML={{ __html: item.previewContent }}></p>
<p className='max-w-[150px] truncate'>{item.title}</p>
</Td>
<Td text={''}>
<p className='max-w-[150px] truncate' dangerouslySetInnerHTML={{ __html: item.previewContent }}></p>
</Td>
<Td text={item.category?.title} />
<Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
@@ -133,13 +136,16 @@ const BlogList: FC = () => {
<Link to={Pages.blog.detail + item.id}>
<Eye size={20} color='#8C90A3' />
</Link>
<Trash onClick={() => {
deleteBlog.mutate(item.id, {
onSuccess: () => {
getBlogs.refetch()
}
})
}} size={20} color='#8C90A3' />
<TrashWithConfrim
onDelete={() => {
deleteBlog.mutate(item.id, {
onSuccess: () => {
getBlogs.refetch()
}
})
}}
isLoading={deleteBlog.isPending}
/>
</div>
</Td>
</tr>
src/pages/notification/Notification.tsx
+165 -103
View File
@@ -1,113 +1,175 @@
import { Notification } from 'iconsax-react'
import { FC, useState } from 'react'
import XIcon from '../../assets/images/close-circle.svg'
import { useTranslation } from 'react-i18next'
import { clx } from '../../helpers/utils'
import StatusCircle from '../../components/StatusCircle'
import { useOutsideClick } from '../../hooks/useOutSideClick'
import { Notification } from 'iconsax-react';
import { FC, useState } from 'react';
import XIcon from '../../assets/images/close-circle.svg';
import { useTranslation } from 'react-i18next';
import { clx } from '../../helpers/utils';
import StatusCircle from '../../components/StatusCircle';
import { useOutsideClick } from '../../hooks/useOutSideClick';
import { useGetNotification, useReadAll } from './hooks/useNotificationData';
import { NotificationItemType, NotificationTypeEnum } from './types/NotificationTypes';
import { timeAgo } from '../../config/func';
import InfiniteScroll from 'react-infinite-scroll-component';
import MoonLoader from "react-spinners/MoonLoader"
import Button from '../../components/Button';
import { toast } from 'react-toastify';
// import { useGetDashboardSummary } from '../home/hooks/useHomeData';
import { useNavigate } from 'react-router-dom';
import { Pages } from '../../config/Pages';
import { useGetDashboard } from '../home/hooks/useHomeData';
const Notifications: FC = () => {
const navigate = useNavigate()
const { t } = useTranslation('global');
const ref = useOutsideClick(() => setShowModal(false));
const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
const [showModal, setShowModal] = useState<boolean>(false);
const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
const readAll = useReadAll()
const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
const getDashboard = useGetDashboard()
const { t } = useTranslation('global')
const ref = useOutsideClick(() => setShowModal(false))
const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all')
const [showModal, setShowModal] = useState<boolean>(false)
const handleAllRead = () => {
readAll.mutate(undefined, {
onSuccess: () => {
getDashboard.refetch()
refetch()
toast.success(t('success'))
}
})
}
const handleRedirect = (type: NotificationTypeEnum) => {
switch (type) {
case NotificationTypeEnum.USER_LOGIN:
break;
case NotificationTypeEnum.ANNOUNCEMENT:
navigate(Pages.announcement.list)
break;
case NotificationTypeEnum.WALLET_CHARGE:
navigate(Pages.transactions)
break;
case NotificationTypeEnum.WALLET_DEDUCTION:
navigate(Pages.transactions)
break;
case NotificationTypeEnum.BILL_INVOICE_REMINDER:
navigate(Pages.receipts.index)
break;
case NotificationTypeEnum.BILL_INVOICE:
navigate(Pages.receipts.index)
break;
case NotificationTypeEnum.CREATE_INVOICE:
navigate(Pages.receipts.index)
break;
case NotificationTypeEnum.CREATE_SERVICE:
navigate(Pages.services.other)
break;
case NotificationTypeEnum.UNBLOCK_SERVICE:
navigate(Pages.services.other)
break;
case NotificationTypeEnum.BLOCK_SERVICE:
navigate(Pages.services.other)
break;
case NotificationTypeEnum.ANSWER_TICKET:
navigate(Pages.ticket.list)
break;
case NotificationTypeEnum.CREATE_TICKET:
navigate(Pages.ticket.list)
break;
default:
break
}
setShowModal(false)
}
return (
<div ref={ref}>
<Notification onClick={() => setShowModal(!showModal)} size={18} color='black' />
<div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
<Notification size={18} color="black" />
<div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
{/* {getDashboard.data?.data?.notificationCount} */}
</div>
</div>
{
showModal && (
<div className='xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 '>
<div className='flex justify-between items-center'>
<div>
{t('notif.natification')}
</div>
<div className='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
<img src={XIcon} alt='close' className='w-4 h-4' onClick={() => setShowModal(false)} />
</div>
</div>
<div className='mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden'>
<div onClick={() => setActiveTab('all')} className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
)}>
همه
</div>
<div onClick={() => setActiveTab('unread')} className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
)}>
خوانده نشده
</div>
<div onClick={() => setActiveTab('read')} className={clx(
'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
)}>
خوانده شده
</div>
</div>
<div className='mt-6 flex flex-col gap-4 text-xs'>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
{showModal && (
<div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
<div className="flex justify-between items-center">
<div>{t('notif.natification')}</div>
<div className="size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center">
<img src={XIcon} alt="close" className="w-4 h-4" onClick={() => setShowModal(false)} />
</div>
</div>
)
}
</div>
)
}
export default Notifications
<div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
<div
onClick={() => setActiveTab('unread')}
className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
)}
>
خوانده نشده
</div>
<div
onClick={() => setActiveTab('read')}
className={clx(
'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
)}
>
خوانده شده
</div>
</div>
<div className='flex mt-4 justify-end'>
<Button
isLoading={readAll.isPending}
onClick={handleAllRead}
className={clx(
'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
)}
>
{t('notif.all_read')}
</Button>
</div>
<div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
<InfiniteScroll
dataLength={posts.length}
next={fetchNextPage}
hasMore={hasNextPage}
loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
scrollableTarget="notificationsContainer"
>
{
posts.map((item: NotificationItemType) => (
<div onClick={() => handleRedirect(item.type)} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
{
!item.isRead &&
<div className="mt-1">
<StatusCircle color="#00BA4B" />
</div>
}
<div>
<div className="truncate max-w-[200px]">{item.message}</div>
<div className="mt-2 flex gap-2 text-[10px] text-description">
<div>{timeAgo(item.createdAt)}</div>
<div className="flex gap-1 items-center">
<StatusCircle color="#8C90A3" />
<div>{item.title}</div>
</div>
</div>
</div>
</div>
))
}
</InfiniteScroll>
</div>
</div>
)}
</div>
);
};
export default Notifications;
src/pages/notification/hooks/useNotificationData.ts
+22
View File
@@ -0,0 +1,22 @@
import * as api from "../service/NotificationService";
import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
export const useGetNotification = (status: "all" | "read" | "unread") => {
return useInfiniteQuery({
queryKey: ["notifications", status],
queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
initialPageParam: 1, // صفحه اول به طور پیشفرض
getNextPageParam: (lastPage) => {
const currentPage = lastPage.data?.pager.page;
const totalPages = lastPage.data?.pager.totalPages;
return currentPage < totalPages ? currentPage + 1 : undefined;
},
});
};
export const useReadAll = () => {
return useMutation({
mutationFn: (_) => api.readAll(),
});
};
src/pages/notification/service/NotificationService.ts
+18
View File
@@ -0,0 +1,18 @@
import axios from "../../../config/axios";
export const getNotifications = async (
page: number,
status: "all" | "read" | "unread"
) => {
let query = ``;
if (status !== "all") {
query = `&isRead=${status === "read" ? 1 : 0}`;
}
const { data } = await axios.get(`/notifications?page=${page}${query}`);
return data;
};
export const readAll = async () => {
const { data } = await axios.patch(`/notifications/read-all`);
return data;
};
src/pages/notification/types/NotificationTypes.ts
+31
View File
@@ -0,0 +1,31 @@
export type NotificationItemType = {
id: string;
title: string;
message: string;
createdAt: string;
isRead: boolean;
type: NotificationTypeEnum;
};
export enum NotificationTypeEnum {
USER_LOGIN = "USER_LOGIN",
ANNOUNCEMENT = "ANNOUNCEMENT",
// Finance category
WALLET_CHARGE = "WALLET_CHARGE",
WALLET_DEDUCTION = "WALLET_DEDUCTION",
//Invoice
BILL_INVOICE_REMINDER = "BILL_INVOICE_REMINDER",
BILL_INVOICE = "BILL_INVOICE",
CREATE_INVOICE = "CREATE_INVOICE",
// Service category
CREATE_SERVICE = "CREATE_SERVICE",
UNBLOCK_SERVICE = "UNBLOCK_SERVICE",
BLOCK_SERVICE = "BLOCK_SERVICE",
// Support category
ANSWER_TICKET = "ANSWER_TICKET",
CREATE_TICKET = "CREATE_TICKET",
}
src/pages/receipts/Create.tsx
+46 -2
View File
@@ -15,13 +15,17 @@ import { useCreateInvoice } from './hooks/useReceiptData'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { ErrorType } from '../../helpers/types'
import { ReceiptTypeEnum } from './enum/ReceipEnum'
import SwitchComponent from '../../components/Switch'
const CreateReceipt: FC = () => {
const navigate = useNavigate()
const { t } = useTranslation('global')
const [items, setItems] = useState<ReceiptCreateItemsType[]>([])
const [customer, setCustomer] = useState<CustomerItemType>()
const [isRecurring, setIsRecurring] = useState<boolean>(false)
const [type, setType] = useState<ReceiptTypeEnum>(ReceiptTypeEnum.DAILY)
const [maxRecurringCycles, setMaxRecurringCycles] = useState<number>(0)
const getCustomers = useGetCustomers()
const createInvoice = useCreateInvoice()
@@ -58,7 +62,10 @@ const CreateReceipt: FC = () => {
if (customer) {
const params: CreateReceiptType = {
userId: customer?.id,
items: items
items: items,
isRecurring: isRecurring,
recurringPeriod: isRecurring ? +type : undefined,
maxRecurringCycles: isRecurring ? maxRecurringCycles : undefined
}
createInvoice.mutate(params, {
@@ -179,6 +186,43 @@ const CreateReceipt: FC = () => {
</div>
}
<div className='mt-10'>
<SwitchComponent
label={t('receip.recurring')}
active={isRecurring}
onChange={(value) => setIsRecurring(value)}
/>
</div>
{
isRecurring &&
<div className='mt-10'>
<div>
{t('receip.select_type')}
</div>
<div className='mt-4 rowTwoInput'>
<Select
label={t('select')}
items={Object.values(ReceiptTypeEnum).map((item) => {
return {
label: t(`receip.${item}`),
value: item
}
})}
onChange={(e) => setType(e.target.value as ReceiptTypeEnum)}
/>
<Input
label={t('receip.maxRecurringCycles')}
name='maxRecurringCycles'
value={maxRecurringCycles}
onChange={(e) => setMaxRecurringCycles(+e.target.value)}
/>
</div>
</div>
}
<div className='mt-10'>
<div>{t('receip.receipt_information')}</div>
</div>
src/pages/receipts/List.tsx
+10 -2
View File
@@ -129,6 +129,8 @@ const ReceiptsList: FC = () => {
<Td text={t('receip.service')} />
<Td text={t('receip.status')} />
<Td text={t('receip.status_paid')} />
<Td text={t('receip.recurring')} />
<Td text={t('receip.maxRecurringCycles')} />
<Td text={''} />
</tr>
</thead>
@@ -139,12 +141,18 @@ const ReceiptsList: FC = () => {
<tr className='tr'>
<Td text={String(index + 1)} />
<Td text={item.user.firstName + ' ' + item.user.lastName} />
<Td text={item.createdAt} />
<Td text={item.dueDate} />
<Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
<Td text={moment(item.dueDate).format('jYYYY/jMM/jDD')} />
<Td text={NumberFormat(item.totalPrice)} />
<Td text={t('receip.service')} />
<Td text={item.status === 'APPROVED' || item.status === 'PAID' ? t('receip.approved') : t('receip.pending')} />
<Td text={t(`receip.${item.status}`)} />
<Td text=''>
{item.isRecurring ? t('receip.recurringPeriod') : '_'}
</Td>
<Td text=''>
{item.maxRecurringCycles}
</Td>
<Td text={''} />
</tr>
)
src/pages/receipts/enum/ReceipEnum.tsx
+7
View File
@@ -0,0 +1,7 @@
export enum ReceiptTypeEnum {
DAILY = '1',
WEEKLY = '2',
MONTHLY = '3',
QUARTERLY = '4',
YEARLY = '5',
}
src/pages/receipts/types/ReceiptTypes.ts
+6
View File
@@ -1,6 +1,9 @@
export type CreateReceiptType = {
userId: string;
items: ReceiptCreateItemsType[];
isRecurring: boolean;
recurringPeriod: number | undefined;
maxRecurringCycles: number | undefined;
};
export type ReceiptCreateItemsType = {
@@ -28,4 +31,7 @@ export type ReceiptItemType = {
dueDate: string;
status: "PENDING" | "PAID" | "CANCELLED" | "EXPIRED" | "APPROVED";
paidAt: string;
isRecurring: boolean;
recurringPeriod?: number;
maxRecurringCycles?: number;
};
src/pages/service/UpdateService.tsx
+3 -1
View File
@@ -68,7 +68,8 @@ const UpdateService: FC = () => {
serviceLanguage: '',
softwareLanguage: '',
userCount: 0,
createDate: ''
createDate: '',
coverUrl: ''
},
validationSchema: Yup.object({
name: Yup.string().required(t('errors.required')),
@@ -151,6 +152,7 @@ const UpdateService: FC = () => {
softwareLanguage: data?.softwareLanguage,
userCount: data?.userCount || 0,
createDate: moment(data?.createDate).format('YYYY-MM-DD'),
coverUrl: data?.coverUrl
});
const editorElement = editorRef.current?.querySelector('.ql-editor');
if (editorElement) {
src/pages/service/components/UpdateServiceSidebar.tsx
+2
View File
@@ -94,6 +94,8 @@ const UpdateServiceSidebar: FC<Props> = (props: Props) => {
isMultiple
preview={data?.data?.danakService?.images?.map((image: { imageUrl: string }) => image.imageUrl) || []}
onChangePreview={(images: string[]) => formik.setFieldValue('images', images)}
getCover={(url: string) => formik.setFieldValue('coverUrl', url)}
coverUrl={formik.values.coverUrl}
/>
</div>
</div>
src/pages/service/types/ServiceTypes.ts
+1
View File
@@ -43,6 +43,7 @@ export type CreateServiceType = {
icon?: string;
images?: string[];
createDate: string;
coverUrl?: string;
};
export type ServiceItemType = {
src/pages/slider/List.tsx
+5 -5
View File
@@ -2,7 +2,7 @@ import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Button from '../../components/Button'
import { Add, Edit, Trash } from 'iconsax-react'
import { Add, Edit } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { useDeleteSlider, useGetSliders } from './hooks/useSliderData'
@@ -10,6 +10,7 @@ import { SliderItemType } from './types/SliderTypes'
import PageLoading from '../../components/PageLoading'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import TrashWithConfrim from '../../components/TrashWithConfrim'
const SliderList: FC = () => {
const { t } = useTranslation('global')
@@ -85,10 +86,9 @@ const SliderList: FC = () => {
color='#888'
/>
</Link>
<Trash
onClick={() => handleDelete(item.id)}
className='size-5'
color='#888'
<TrashWithConfrim
onDelete={() => handleDelete(item.id)}
isLoading={deleteSlider.isPending}
/>
</div>
</Td>
src/pages/users/Update.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ const UpdateUser: FC = () => {
<div className='mt-4'>
<div className='flex justify-between items-center'>
<div>
{t('service.cateory_services')}
{t('user.update_user')}
</div>
<Button
className='w-fit px-8'