structure + layout header sidebar
This commit is contained in:
hamid zarghami
@@ -0,0 +1,9 @@
|
||||
import { type FC } from 'react'
|
||||
|
||||
const Home: FC = () => {
|
||||
return (
|
||||
<div>صفحه اصلی</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
@@ -0,0 +1,149 @@
|
||||
import { Notification } from 'iconsax-react';
|
||||
import { type FC, useState } from 'react';
|
||||
import XIcon from '../../assets/images/close-circle.svg';
|
||||
import { clx } from '../../helpers/utils';
|
||||
import StatusCircle from '@/components/StatusCircle';
|
||||
import { useOutsideClick } from '@/hooks/useOutSideClick';
|
||||
import { type NotificationItemType, NotificationTypeEnum } from './types/NotificationTypes';
|
||||
import Button from '@/components/Button';
|
||||
import { t } from '@/locale';
|
||||
|
||||
const Notifications: FC = () => {
|
||||
const ref = useOutsideClick(() => setShowModal(false));
|
||||
const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
|
||||
const [showModal, setShowModal] = useState<boolean>(false);
|
||||
const posts: NotificationItemType[] = [];
|
||||
// const getDashboard = useGetNotification('all')
|
||||
|
||||
const handleAllRead = () => {
|
||||
// TODO: Implement read all functionality
|
||||
}
|
||||
|
||||
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}>
|
||||
<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?.pages?.[0]?.data?.notificationCount || 0} */}
|
||||
2
|
||||
</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 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={false}
|
||||
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">
|
||||
{
|
||||
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>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notifications;
|
||||
@@ -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(),
|
||||
});
|
||||
};
|
||||
@@ -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;
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
export type NotificationItemType = {
|
||||
id: string;
|
||||
title: string;
|
||||
message: string;
|
||||
createdAt: string;
|
||||
isRead: boolean;
|
||||
type: NotificationTypeEnum;
|
||||
};
|
||||
|
||||
export const 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",
|
||||
} as const;
|
||||
|
||||
export type NotificationTypeEnum = typeof NotificationTypeEnum[keyof typeof NotificationTypeEnum];
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "@/config/axios";
|
||||
|
||||
export interface ProfileData {
|
||||
user: {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
profilePic?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const useGetProfile = () => {
|
||||
return useQuery({
|
||||
queryKey: ["profile"],
|
||||
queryFn: async (): Promise<{ data: ProfileData }> => {
|
||||
const response = await axios.get("/profile");
|
||||
return response.data;
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "@/config/axios";
|
||||
|
||||
export interface WalletBalanceData {
|
||||
balance: number;
|
||||
}
|
||||
|
||||
export const useGetWalletBalance = () => {
|
||||
return useQuery({
|
||||
queryKey: ["wallet-balance"],
|
||||
queryFn: async (): Promise<{ data: WalletBalanceData }> => {
|
||||
const response = await axios.get("/wallet/balance");
|
||||
return response.data;
|
||||
},
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user