change list invoce and tickets + pwa + ...
This commit is contained in:
+2
-1
@@ -427,7 +427,8 @@
|
||||
"approved": "تایید شده",
|
||||
"APPROVED": "تایید شده",
|
||||
"pending": "در انتظار",
|
||||
"since": "از تاریخ"
|
||||
"since": "از تاریخ",
|
||||
"to": "تا تاریخ"
|
||||
},
|
||||
"edit": "ویرایش",
|
||||
"transaction": {
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
|
||||
import { Element3, Messages3, NotificationStatus, People, Receipt2 } from 'iconsax-react'
|
||||
import ItemDashboard from './components/ItemDashboard'
|
||||
import { useGetDashboard } from './hooks/useHomeData'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
|
||||
const Home: FC = () => {
|
||||
@@ -21,6 +22,7 @@ const Home: FC = () => {
|
||||
color='#00D16C'
|
||||
count={getDashboard.data?.data?.danakServicesCount}
|
||||
description={t('home.service')}
|
||||
to={Pages.services.list}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
@@ -29,6 +31,7 @@ const Home: FC = () => {
|
||||
color='#00D16C'
|
||||
count={getDashboard.data?.data?.customersCount}
|
||||
description={t('home.customer')}
|
||||
to={Pages.customers.list}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
@@ -37,6 +40,7 @@ const Home: FC = () => {
|
||||
color='#FF7B00'
|
||||
count={getDashboard.data?.data?.unreadTickets}
|
||||
description={t('home.unread_messages')}
|
||||
to={Pages.ticket.list}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
@@ -45,6 +49,7 @@ const Home: FC = () => {
|
||||
color='#FF0000'
|
||||
count={getDashboard.data?.data?.adsCount}
|
||||
description={t('home.active_ads')}
|
||||
to={Pages.ads.list}
|
||||
/>
|
||||
|
||||
<ItemDashboard
|
||||
@@ -53,6 +58,7 @@ const Home: FC = () => {
|
||||
color='#0047FF'
|
||||
count={getDashboard.data?.data?.invoicesCount}
|
||||
description={t('home.new_invoice')}
|
||||
to={Pages.receipts.index}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
import { FC, ReactNode } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
icon: ReactNode,
|
||||
color: string,
|
||||
count: number,
|
||||
description: string
|
||||
description: string,
|
||||
to?: string
|
||||
}
|
||||
|
||||
const ItemDashboard: FC<Props> = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div className='p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<Link to={props.to ? props.to : ''} className='p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
|
||||
{props.icon}
|
||||
</div>
|
||||
@@ -28,7 +30,7 @@ const ItemDashboard: FC<Props> = (props: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -93,6 +93,7 @@ const CreateReceipt: FC = () => {
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={handleSubmit}
|
||||
isLoading={createInvoice.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
|
||||
@@ -13,22 +13,25 @@ import Input from '../../components/Input'
|
||||
import { CustomerItemType } from '../customer/types/CustomerTypes'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
const ReceiptsList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [searchParams] = useSearchParams()
|
||||
const [activeTab, setActiveTab] = useState<"PENDING" | "PAID" | "CANCELED" | "EXPIRED">('PENDING')
|
||||
const [activeTab, setActiveTab] = useState<"PENDING" | "PAID" | "CANCELLED" | "EXPIRED" | ''>('PENDING')
|
||||
const [customerId, setCustomerId] = useState<string>('')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const [date, setDate] = useState<string>('')
|
||||
const getInvoices = useGetInvoices(activeTab, customerId, search, date)
|
||||
const [endDate, setEndDate] = useState<string>('')
|
||||
const getInvoices = useGetInvoices(activeTab, customerId, search, date, endDate)
|
||||
const getCustomers = useGetCustomers()
|
||||
|
||||
useEffect(() => {
|
||||
const urlCustomerId = searchParams.get('user')
|
||||
if (urlCustomerId) {
|
||||
setCustomerId(urlCustomerId)
|
||||
setActiveTab('')
|
||||
}
|
||||
}, [searchParams])
|
||||
|
||||
@@ -55,12 +58,19 @@ const ReceiptsList: FC = () => {
|
||||
/>
|
||||
|
||||
<DatePickerComponent
|
||||
onChange={(date) => setDate(date)}
|
||||
onChange={(date) => setDate(moment(date, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
|
||||
label={t('receip.since')}
|
||||
className='min-w-40'
|
||||
placeholder={t('select')}
|
||||
/>
|
||||
|
||||
<DatePickerComponent
|
||||
onChange={(date) => setEndDate(moment(date, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
|
||||
label={t('receip.to')}
|
||||
className='min-w-40'
|
||||
placeholder={t('select')}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
@@ -87,9 +97,9 @@ const ReceiptsList: FC = () => {
|
||||
value: 'PAID'
|
||||
},
|
||||
{
|
||||
icon: <CloseCircle color={activeTab === 'CANCELED' ? 'black' : '#8C90A3'} size={22} />,
|
||||
icon: <CloseCircle color={activeTab === 'CANCELLED' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('receip.canceled'),
|
||||
value: 'CANCELED'
|
||||
value: 'CANCELLED'
|
||||
},
|
||||
{
|
||||
icon: <FolderOpen color={activeTab === 'EXPIRED' ? 'black' : '#8C90A3'} size={22} />,
|
||||
@@ -97,7 +107,7 @@ const ReceiptsList: FC = () => {
|
||||
value: 'EXPIRED'
|
||||
},
|
||||
]}
|
||||
onChange={(value) => setActiveTab(value as "PENDING" | "PAID" | "CANCELED" | "EXPIRED")}
|
||||
onChange={(value) => setActiveTab(value as "PENDING" | "PAID" | "CANCELLED" | "EXPIRED")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,11 +6,12 @@ export const useGetInvoices = (
|
||||
status: string,
|
||||
customerId: string,
|
||||
search: string,
|
||||
date: string
|
||||
date: string,
|
||||
endDate: string
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: ["invoices", status, customerId, search, date],
|
||||
queryFn: () => api.getInvoces(status, customerId, search, date),
|
||||
queryKey: ["invoices", status, customerId, search, date, endDate],
|
||||
queryFn: () => api.getInvoces(status, customerId, search, date, endDate),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -5,12 +5,16 @@ export const getInvoces = async (
|
||||
status: string,
|
||||
customerId: string,
|
||||
search: string,
|
||||
date: string
|
||||
date: string,
|
||||
endDate: string
|
||||
) => {
|
||||
let query = `status=${status}`;
|
||||
if (customerId) query += `&userId=${customerId}`;
|
||||
if (search) query += `&q=${search}`;
|
||||
if (date) query += `&date=${date}`;
|
||||
const params = new URLSearchParams();
|
||||
if (status) params.append("status", status);
|
||||
if (customerId) params.append("userId", customerId);
|
||||
if (search) params.append("q", search);
|
||||
if (date) params.append("since", date);
|
||||
if (endDate) params.append("to", endDate);
|
||||
const query = params.toString();
|
||||
const { data } = await axios.get(`/invoices?${query}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -26,6 +26,6 @@ export type ReceiptItemType = {
|
||||
lastName: string;
|
||||
};
|
||||
dueDate: string;
|
||||
status: "PENDING" | "PAID" | "CANCELED" | "EXPIRED" | "APPROVED";
|
||||
status: "PENDING" | "PAID" | "CANCELLED" | "EXPIRED" | "APPROVED";
|
||||
paidAt: string;
|
||||
};
|
||||
|
||||
@@ -14,13 +14,14 @@ const TicketList: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
const [searchParams] = useSearchParams()
|
||||
const [customerId, setCustomerId] = useState<string>('')
|
||||
const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED'>('PENDING')
|
||||
const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED' | ''>('PENDING')
|
||||
const getTicket = useGetTickets(activeTab, customerId)
|
||||
|
||||
useEffect(() => {
|
||||
const urlCustomerId = searchParams.get('user')
|
||||
if (urlCustomerId) {
|
||||
setCustomerId(urlCustomerId)
|
||||
setActiveTab('')
|
||||
}
|
||||
}, [searchParams])
|
||||
|
||||
|
||||
@@ -2,11 +2,11 @@ import axios from "../../../config/axios";
|
||||
import { AddMessageTicketType, CreateCategoryType } from "../types/TicketTypes";
|
||||
|
||||
export const getTickets = async (status: string, customerId?: string) => {
|
||||
let query = `/tickets/admin?status=${status}`;
|
||||
if (customerId) {
|
||||
query += `&userId=${customerId}`;
|
||||
}
|
||||
const { data } = await axios.get(query);
|
||||
const params = new URLSearchParams();
|
||||
if (status) params.append("status", status);
|
||||
if (customerId) params.append("userId", customerId);
|
||||
const query = params.toString();
|
||||
const { data } = await axios.get(`/tickets/admin?${query}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user