barcha apilar ulandi
This commit is contained in:
Samandar Turgunboyev
@@ -1,9 +1,10 @@
|
||||
import type {
|
||||
agencyUserData,
|
||||
GetAllAgencyData,
|
||||
GetDetailAgencyData,
|
||||
} from "@/pages/agencies/lib/type";
|
||||
import httpClient from "@/shared/config/api/httpClient";
|
||||
import { GET_ALL_AGENCY } from "@/shared/config/api/URLs";
|
||||
import { GET_ALL_AGENCY, TOUR_ADMIN } from "@/shared/config/api/URLs";
|
||||
import type { AxiosResponse } from "axios";
|
||||
|
||||
const getAllAgency = async ({
|
||||
@@ -55,4 +56,42 @@ const updateAgencyStatus = async ({
|
||||
return response;
|
||||
};
|
||||
|
||||
export { deleteAgency, getAllAgency, getDetailAgency, updateAgencyStatus };
|
||||
const agencyUser = async (
|
||||
id: number,
|
||||
): Promise<AxiosResponse<agencyUserData>> => {
|
||||
const res = await httpClient.get(`${TOUR_ADMIN}${id}/list/`);
|
||||
return res;
|
||||
};
|
||||
|
||||
const agencyUserDelete = async (id: number) => {
|
||||
const res = await httpClient.delete(`${TOUR_ADMIN}${id}/`);
|
||||
return res;
|
||||
};
|
||||
|
||||
const agencyUserUpdate = async (
|
||||
id: number,
|
||||
): Promise<
|
||||
AxiosResponse<{
|
||||
status: boolean;
|
||||
data: {
|
||||
id: number;
|
||||
phone: string;
|
||||
role: string;
|
||||
travel_agency: string;
|
||||
password: string;
|
||||
};
|
||||
}>
|
||||
> => {
|
||||
const res = await httpClient.post(`${TOUR_ADMIN}${id}/update/`);
|
||||
return res;
|
||||
};
|
||||
|
||||
export {
|
||||
agencyUser,
|
||||
agencyUserDelete,
|
||||
agencyUserUpdate,
|
||||
deleteAgency,
|
||||
getAllAgency,
|
||||
getDetailAgency,
|
||||
updateAgencyStatus,
|
||||
};
|
||||
|
||||
@@ -56,3 +56,14 @@ export interface GetDetailAgencyData {
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
export interface agencyUserData {
|
||||
status: boolean;
|
||||
data: {
|
||||
first_name: string;
|
||||
id: number;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
role: string;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,11 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { getDetailAgency, updateAgencyStatus } from "@/pages/agencies/lib/api";
|
||||
import {
|
||||
agencyUser,
|
||||
agencyUserDelete,
|
||||
agencyUserUpdate,
|
||||
getDetailAgency,
|
||||
updateAgencyStatus,
|
||||
} from "@/pages/agencies/lib/api";
|
||||
import { AgencyUsersSection } from "@/pages/agencies/ui/AgencyUsersSection";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import formatPrice from "@/shared/lib/formatPrice";
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -25,6 +40,7 @@ import {
|
||||
Percent,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
@@ -34,12 +50,30 @@ export default function AgencyDetailPage() {
|
||||
const router = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [openUser, setOpenUser] = useState<boolean>(false);
|
||||
const [user, setUser] = useState<{
|
||||
status: boolean;
|
||||
data: {
|
||||
id: number;
|
||||
phone: string;
|
||||
role: string;
|
||||
travel_agency: string;
|
||||
password: string;
|
||||
};
|
||||
} | null>(null);
|
||||
|
||||
const { data, isLoading, refetch, isError } = useQuery({
|
||||
queryKey: ["detail_agency"],
|
||||
queryFn: () => getDetailAgency({ id: Number(params.id) }),
|
||||
});
|
||||
|
||||
const { data: agency, isLoading: isLoadingUsers } = useQuery({
|
||||
queryKey: ["agency_user", params.id],
|
||||
queryFn: () => {
|
||||
return agencyUser(Number(params.id));
|
||||
},
|
||||
});
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: (newStatus: "pending" | "approved" | "cancelled") =>
|
||||
updateAgencyStatus({
|
||||
@@ -56,12 +90,44 @@ export default function AgencyDetailPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const updateUserMutation = useMutation({
|
||||
mutationFn: (updatedUser: number) => agencyUserUpdate(updatedUser),
|
||||
onSuccess: (res) => {
|
||||
queryClient.refetchQueries({ queryKey: ["agency_user", params.id] });
|
||||
toast.success(t("Foydalanuvchi muvaffaqiyatli yangilandi"));
|
||||
setOpenUser(true);
|
||||
setUser(res.data);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Foydalanuvchini yangilashda xatolik"));
|
||||
},
|
||||
});
|
||||
|
||||
const deleteUserMutation = useMutation({
|
||||
mutationFn: (userId: number) => agencyUserDelete(userId),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["agency_user", params.id] });
|
||||
toast.success(t("Foydalanuvchi muvaffaqiyatli o'chirildi"));
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Foydalanuvchini o'chirishda xatolik"));
|
||||
},
|
||||
});
|
||||
|
||||
const handleStatusChange = (
|
||||
newStatus: "pending" | "approved" | "cancelled",
|
||||
) => {
|
||||
statusMutation.mutate(newStatus);
|
||||
};
|
||||
|
||||
const handleEditUser = (user: number) => {
|
||||
updateUserMutation.mutate(user);
|
||||
};
|
||||
|
||||
const handleDeleteUser = (userId: number) => {
|
||||
deleteUserMutation.mutate(userId);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
|
||||
@@ -337,6 +403,22 @@ export default function AgencyDetailPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{agency?.data.data && (
|
||||
<div className="mb-8">
|
||||
<AgencyUsersSection
|
||||
users={
|
||||
Array.isArray(agency?.data.data)
|
||||
? agency?.data.data
|
||||
: [agency?.data.data]
|
||||
}
|
||||
onEdit={handleEditUser}
|
||||
onDelete={handleDeleteUser}
|
||||
isLoading={isLoadingUsers}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card className="border border-gray-700 shadow-lg bg-gray-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-white">
|
||||
@@ -393,6 +475,47 @@ export default function AgencyDetailPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Dialog open={openUser} onOpenChange={() => {}}>
|
||||
<DialogContent className="bg-gray-900 text-white sm:max-w-sm rounded-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-lg font-semibold">
|
||||
{t("Yangi foydalanuvchi ma'lumotlari")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-gray-400 text-sm">
|
||||
{t("Agentlik uchun tizimga kirish ma'lumotlari")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{user && (
|
||||
<div className="space-y-4 mt-4">
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm mb-1">
|
||||
{t("Telefon raqam (login)")}
|
||||
</p>
|
||||
<p className="text-lg font-medium">
|
||||
{formatPhone(user.data.phone)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm mb-1">{t("Parol")}</p>
|
||||
<p className="text-lg font-semibold text-green-400">
|
||||
{user.data.password}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter className="mt-6">
|
||||
<Button
|
||||
onClick={() => setOpenUser(false)}
|
||||
className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-5 py-2 rounded-md hover:opacity-90"
|
||||
>
|
||||
{t("Yopish")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
195
src/pages/agencies/ui/AgencyUsersSection.tsx
Normal file
195
src/pages/agencies/ui/AgencyUsersSection.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/ui/dialog";
|
||||
|
||||
import { Pencil, Phone, Shield, Trash2, User } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface AgencyUser {
|
||||
first_name: string;
|
||||
id: number;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
interface AgencyUsersProps {
|
||||
users: AgencyUser[];
|
||||
onEdit: (userId: number) => void;
|
||||
onDelete: (userId: number) => void;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function AgencyUsersSection({
|
||||
users,
|
||||
onEdit,
|
||||
onDelete,
|
||||
isLoading = false,
|
||||
}: AgencyUsersProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const getRoleBadge = (role: string) => {
|
||||
const roleColors: Record<string, string> = {
|
||||
admin: "bg-purple-500/20 text-purple-300 border-purple-500/40",
|
||||
manager: "bg-blue-500/20 text-blue-300 border-blue-500/40",
|
||||
user: "bg-gray-500/20 text-gray-300 border-gray-500/40",
|
||||
agent: "bg-green-500/20 text-green-300 border-green-500/40",
|
||||
};
|
||||
|
||||
return (
|
||||
<Badge className={roleColors[role] || roleColors.user}>
|
||||
{role.toUpperCase()}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className="border border-gray-700 shadow-lg bg-gray-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-white flex items-center gap-2">
|
||||
<User className="w-6 h-6" />
|
||||
{t("Agentlik foydalanuvchilari")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center text-gray-400 py-8">
|
||||
{t("Ma'lumotlar yuklanmoqda...")}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!users || users.length === 0) {
|
||||
return (
|
||||
<Card className="border border-gray-700 shadow-lg bg-gray-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-white flex items-center gap-2">
|
||||
<User className="w-6 h-6" />
|
||||
{t("Agentlik foydalanuvchilari")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center text-gray-400 py-8">
|
||||
{t("Hozircha foydalanuvchilar yo'q")}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border border-gray-700 shadow-lg bg-gray-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-white flex items-center gap-2">
|
||||
<User className="w-6 h-6" />
|
||||
{t("Agentlik foydalanuvchilari")}
|
||||
</CardTitle>
|
||||
<p className="text-gray-400">
|
||||
{t("Agentlik bilan bog'langan foydalanuvchilar ro'yxati")}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{users.map((user) => (
|
||||
<div
|
||||
key={user.id}
|
||||
className="p-5 border border-gray-700 rounded-xl bg-gray-800 hover:bg-gray-750 transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
||||
<User className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
{user.first_name} {user.last_name}
|
||||
</h3>
|
||||
{getRoleBadge(user.role)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm">
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<Phone className="w-4 h-4" />
|
||||
<span>{formatPhone(user.phone)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>ID: {user.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Edit Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onEdit(user.id)}
|
||||
className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-blue-400 hover:text-blue-300"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
{/* Delete Alert Dialog */}
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="border-gray-600 bg-gray-700 hover:bg-red-900/20 hover:border-red-500 text-red-400 hover:text-red-300"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="bg-gray-800 border-gray-700 text-white">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{t("Foydalanuvchini o'chirish")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-gray-400">
|
||||
{t("Haqiqatan ham")}{" "}
|
||||
<span className="font-semibold text-white">
|
||||
{user.first_name} {user.last_name}
|
||||
</span>{" "}
|
||||
{t(
|
||||
"ni o'chirmoqchimisiz? Bu amalni qaytarib bo'lmaydi.",
|
||||
)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-white">
|
||||
{t("Bekor qilish")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => onDelete(user.id)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white"
|
||||
>
|
||||
{t("O'chirish")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -40,10 +40,7 @@ const Login = () => {
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: ({ password, phone }: { password: string; phone: string }) =>
|
||||
authLogin({
|
||||
password,
|
||||
phone,
|
||||
}),
|
||||
authLogin({ password, phone }),
|
||||
onSuccess: (res) => {
|
||||
setAuthToken(res.data.access);
|
||||
setAuthRefToken(res.data.refresh);
|
||||
@@ -83,9 +80,17 @@ const Login = () => {
|
||||
});
|
||||
|
||||
function onSubmit(values: z.infer<typeof formSchema>) {
|
||||
const cleanPhone = onlyNumber(values.phone);
|
||||
|
||||
// allow both 998 and 888 prefixes
|
||||
if (!cleanPhone.startsWith("998") && !cleanPhone.startsWith("888")) {
|
||||
toast.error(t("Telefon raqami +998 yoki +888 bilan boshlanishi kerak"));
|
||||
return;
|
||||
}
|
||||
|
||||
mutate({
|
||||
password: values.password,
|
||||
phone: onlyNumber(values.phone),
|
||||
phone: cleanPhone,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -110,12 +115,20 @@ const Login = () => {
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="+998 __ ___-__-__"
|
||||
placeholder="+998 yoki +888 bilan boshlang"
|
||||
{...field}
|
||||
value={field.value || "+998"}
|
||||
onChange={(e) =>
|
||||
field.onChange(formatPhone(e.target.value))
|
||||
}
|
||||
value={field.value}
|
||||
onChange={(e) => {
|
||||
const inputValue = e.target.value;
|
||||
|
||||
if (inputValue.trim() === "") {
|
||||
field.onChange("");
|
||||
return;
|
||||
}
|
||||
|
||||
// Formatlash
|
||||
field.onChange(formatPhone(inputValue));
|
||||
}}
|
||||
maxLength={19}
|
||||
className="h-[56px] text-lg rounded-xl bg-gray-700 border-gray-600 text-white placeholder-gray-400"
|
||||
/>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import type {
|
||||
AgencyOrderData,
|
||||
UserAgencyDetailData,
|
||||
UserOrderData,
|
||||
UserOrderDetailData,
|
||||
} from "@/pages/finance/lib/type";
|
||||
import httpClient from "@/shared/config/api/httpClient";
|
||||
import { USER_ORDERS } from "@/shared/config/api/URLs";
|
||||
import { AGENCY_ORDERS, USER_ORDERS } from "@/shared/config/api/URLs";
|
||||
import type { AxiosResponse } from "axios";
|
||||
|
||||
const getAllOrder = async (params: {
|
||||
@@ -21,6 +23,14 @@ const getAllOrder = async (params: {
|
||||
return res;
|
||||
};
|
||||
|
||||
const getAllOrderAgecy = async (params: {
|
||||
page: number;
|
||||
page_size: number;
|
||||
}): Promise<AxiosResponse<AgencyOrderData>> => {
|
||||
const res = await httpClient.get(AGENCY_ORDERS, { params });
|
||||
return res;
|
||||
};
|
||||
|
||||
const getDetailOrder = async (
|
||||
id: number,
|
||||
): Promise<AxiosResponse<UserOrderDetailData>> => {
|
||||
@@ -28,6 +38,13 @@ const getDetailOrder = async (
|
||||
return res;
|
||||
};
|
||||
|
||||
const getDetailAgencyOrder = async (
|
||||
id: number,
|
||||
): Promise<AxiosResponse<UserAgencyDetailData>> => {
|
||||
const res = await httpClient.get(`${AGENCY_ORDERS}${id}/`);
|
||||
return res;
|
||||
};
|
||||
|
||||
const updateDetailOrder = async ({
|
||||
id,
|
||||
body,
|
||||
@@ -46,4 +63,10 @@ const updateDetailOrder = async ({
|
||||
return res;
|
||||
};
|
||||
|
||||
export { getAllOrder, getDetailOrder, updateDetailOrder };
|
||||
export {
|
||||
getAllOrder,
|
||||
getAllOrderAgecy,
|
||||
getDetailAgencyOrder,
|
||||
getDetailOrder,
|
||||
updateDetailOrder,
|
||||
};
|
||||
|
||||
@@ -110,3 +110,73 @@ export interface UserOrderDetailData {
|
||||
total_price: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface AgencyOrderData {
|
||||
status: boolean;
|
||||
data: {
|
||||
links: {
|
||||
previous: string;
|
||||
next: string;
|
||||
};
|
||||
total_items: number;
|
||||
total_pages: number;
|
||||
page_size: number;
|
||||
current_page: number;
|
||||
results: {
|
||||
id: number;
|
||||
name: string;
|
||||
custom_id: string;
|
||||
paid: number;
|
||||
pending: number;
|
||||
ticket_sold_count: number;
|
||||
ticket_count: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface UserAgencyDetailData {
|
||||
status: boolean;
|
||||
data: {
|
||||
id: 0;
|
||||
name: string;
|
||||
custom_id: string;
|
||||
share_percentage: number;
|
||||
addres: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
web_site: string;
|
||||
paid: number;
|
||||
pending: number;
|
||||
ticket_sold_count: number;
|
||||
ticket_count: string;
|
||||
total_income: number;
|
||||
platform_income: number;
|
||||
total_booking_count: string;
|
||||
rating: string;
|
||||
orders: {
|
||||
id: number;
|
||||
user: {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
contact: string;
|
||||
};
|
||||
total_price: number;
|
||||
departure_date: string;
|
||||
arrival_time: string;
|
||||
created_at: string;
|
||||
}[];
|
||||
comments: {
|
||||
user: {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
contact: string;
|
||||
};
|
||||
text: string;
|
||||
rating: number;
|
||||
ticket: number;
|
||||
created: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { getAllOrder } from "@/pages/finance/lib/api";
|
||||
import { getAllOrder, getAllOrderAgecy } from "@/pages/finance/lib/api";
|
||||
import type { OrderStatus } from "@/pages/finance/lib/type";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import formatPrice from "@/shared/lib/formatPrice";
|
||||
@@ -24,100 +24,28 @@ import {
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
|
||||
type Purchase = {
|
||||
id: number;
|
||||
userName: string;
|
||||
userPhone: string;
|
||||
tourName: string;
|
||||
tourId: number;
|
||||
agencyName: string;
|
||||
agencyId: number;
|
||||
destination: string;
|
||||
travelDate: string;
|
||||
amount: number;
|
||||
paymentStatus: "paid" | "pending" | "cancelled" | "refunded";
|
||||
purchaseDate: string;
|
||||
};
|
||||
type Role =
|
||||
| "superuser"
|
||||
| "admin"
|
||||
| "moderator"
|
||||
| "tour_admin"
|
||||
| "buxgalter"
|
||||
| "operator"
|
||||
| "user";
|
||||
|
||||
const mockPurchases: Purchase[] = [
|
||||
{
|
||||
id: 1,
|
||||
userName: "Aziza Karimova",
|
||||
userPhone: "+998 90 123 45 67",
|
||||
tourName: "Dubai Luxury Tour",
|
||||
tourId: 1,
|
||||
agencyName: "Silk Road Travel",
|
||||
agencyId: 1,
|
||||
destination: "Dubai, UAE",
|
||||
travelDate: "2025-11-10",
|
||||
amount: 1500000,
|
||||
paymentStatus: "paid",
|
||||
purchaseDate: "2025-10-10",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
userName: "Sardor Rahimov",
|
||||
userPhone: "+998 91 234 56 78",
|
||||
tourName: "Bali Adventure Package",
|
||||
tourId: 2,
|
||||
agencyName: "Silk Road Travel",
|
||||
agencyId: 1,
|
||||
destination: "Bali, Indonesia",
|
||||
travelDate: "2025-11-15",
|
||||
amount: 1800000,
|
||||
paymentStatus: "paid",
|
||||
purchaseDate: "2025-10-12",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
userName: "Nilufar Toshmatova",
|
||||
userPhone: "+998 93 345 67 89",
|
||||
tourName: "Dubai Luxury Tour",
|
||||
tourId: 1,
|
||||
agencyName: "Silk Road Travel",
|
||||
agencyId: 1,
|
||||
destination: "Dubai, UAE",
|
||||
travelDate: "2025-11-20",
|
||||
amount: 1500000,
|
||||
paymentStatus: "pending",
|
||||
purchaseDate: "2025-10-14",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
userName: "Jamshid Alimov",
|
||||
userPhone: "+998 94 456 78 90",
|
||||
tourName: "Istanbul Express Tour",
|
||||
tourId: 3,
|
||||
agencyName: "Orient Express",
|
||||
agencyId: 3,
|
||||
destination: "Istanbul, Turkey",
|
||||
travelDate: "2025-11-05",
|
||||
amount: 1200000,
|
||||
paymentStatus: "cancelled",
|
||||
purchaseDate: "2025-10-08",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
userName: "Madina Yusupova",
|
||||
userPhone: "+998 97 567 89 01",
|
||||
tourName: "Paris Romantic Getaway",
|
||||
tourId: 4,
|
||||
agencyName: "Euro Travels",
|
||||
agencyId: 2,
|
||||
destination: "Paris, France",
|
||||
travelDate: "2025-12-01",
|
||||
amount: 2200000,
|
||||
paymentStatus: "paid",
|
||||
purchaseDate: "2025-10-16",
|
||||
},
|
||||
];
|
||||
|
||||
export default function FinancePage() {
|
||||
export default function FinancePage({ user }: { user: Role }) {
|
||||
const { t } = useTranslation();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [tab, setTab] = useState<"bookings" | "agencies">("bookings");
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const tabParam = searchParams.get("tab") as "bookings" | "agencies" | null;
|
||||
const pageParam = Number(searchParams.get("page")) || 1;
|
||||
const pageAgencyParam = Number(searchParams.get("page_agency")) || 1;
|
||||
const [currentPage, setCurrentPage] = useState(pageParam);
|
||||
const [currentPageAgency, setCurrentPageAgency] = useState(pageAgencyParam);
|
||||
const [tab, setTab] = useState<"bookings" | "agencies">(
|
||||
tabParam ?? "bookings",
|
||||
);
|
||||
const [filterStatus, setFilterStatus] = useState<
|
||||
| ""
|
||||
| "pending_payment"
|
||||
@@ -127,9 +55,25 @@ export default function FinancePage() {
|
||||
| "cancelled"
|
||||
>("");
|
||||
|
||||
useEffect(() => {
|
||||
setSearchParams({
|
||||
tab,
|
||||
page: String(currentPage),
|
||||
page_agency: String(currentPageAgency),
|
||||
});
|
||||
}, [tab, currentPage, currentPageAgency, setSearchParams]);
|
||||
|
||||
// ✅ Param o‘zgarsa — holatni sinxronlashtirish
|
||||
useEffect(() => {
|
||||
if (tabParam && tabParam !== tab) {
|
||||
setTab(tabParam);
|
||||
}
|
||||
}, [tabParam]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [filterStatus]);
|
||||
setCurrentPageAgency(1);
|
||||
}, [filterStatus, tab]);
|
||||
|
||||
const { data, isLoading, isError, refetch } = useQuery({
|
||||
queryKey: ["list_order_user", currentPage, filterStatus],
|
||||
@@ -141,6 +85,20 @@ export default function FinancePage() {
|
||||
}),
|
||||
});
|
||||
|
||||
const {
|
||||
data: agencyData,
|
||||
isLoading: agenctLoad,
|
||||
isError: agencyError,
|
||||
refetch: agencyRef,
|
||||
} = useQuery({
|
||||
queryKey: ["agecy_order_list", currentPageAgency],
|
||||
queryFn: () =>
|
||||
getAllOrderAgecy({
|
||||
page: currentPageAgency,
|
||||
page_size: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
const stats = [
|
||||
{
|
||||
title: t("Jami daromad"),
|
||||
@@ -253,52 +211,6 @@ export default function FinancePage() {
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
|
||||
<Loader2 className="w-10 h-10 animate-spin text-cyan-400" />
|
||||
<p className="text-slate-400">{t("Ma'lumotlar yuklanmoqda...")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 w-full text-center text-white gap-4">
|
||||
<AlertTriangle className="w-10 h-10 text-red-500" />
|
||||
<p className="text-lg">
|
||||
{t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => refetch()}
|
||||
className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg px-5 py-2 hover:opacity-90"
|
||||
>
|
||||
{t("Qayta urinish")}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const agencies = Array.from(
|
||||
new Set(mockPurchases.map((p) => p.agencyId)),
|
||||
).map((id) => {
|
||||
const agencyPurchases = mockPurchases.filter((p) => p.agencyId === id);
|
||||
return {
|
||||
id,
|
||||
name: agencyPurchases[0].agencyName,
|
||||
totalPaid: agencyPurchases
|
||||
.filter((p) => p.paymentStatus === "paid")
|
||||
.reduce((sum, p) => sum + p.amount, 0),
|
||||
pending: agencyPurchases
|
||||
.filter((p) => p.paymentStatus === "pending")
|
||||
.reduce((sum, p) => sum + p.amount, 0),
|
||||
purchaseCount: agencyPurchases.length,
|
||||
destinations: Array.from(
|
||||
new Set(agencyPurchases.map((p) => p.destination)),
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-gray-900 text-gray-100">
|
||||
<div className="w-[90%] mx-auto py-6">
|
||||
@@ -330,22 +242,26 @@ export default function FinancePage() {
|
||||
<CreditCard size={18} />
|
||||
{t("Bandlovlar va to‘lovlar")}
|
||||
</button>
|
||||
<button
|
||||
className={`px-6 py-3 rounded-lg flex items-center gap-2 transition-all ${
|
||||
tab === "agencies"
|
||||
? "bg-blue-600 text-white shadow-md"
|
||||
: "text-gray-400 hover:bg-gray-700"
|
||||
}`}
|
||||
onClick={() => setTab("agencies")}
|
||||
>
|
||||
<Users size={18} />
|
||||
{t("Agentlik hisobotlari")}
|
||||
</button>
|
||||
{user === "tour_admin" ||
|
||||
user === "buxgalter" ||
|
||||
user === "admin" ||
|
||||
(user === "superuser" && (
|
||||
<button
|
||||
className={`px-6 py-3 rounded-lg flex items-center gap-2 transition-all ${
|
||||
tab === "agencies"
|
||||
? "bg-blue-600 text-white shadow-md"
|
||||
: "text-gray-400 hover:bg-gray-700"
|
||||
}`}
|
||||
onClick={() => setTab("agencies")}
|
||||
>
|
||||
<Users size={18} />
|
||||
{t("Agentlik hisobotlari")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === "bookings" && (
|
||||
<>
|
||||
{/* Filter */}
|
||||
<div className="flex gap-2 mb-6 flex-wrap">
|
||||
{[
|
||||
"",
|
||||
@@ -389,7 +305,6 @@ export default function FinancePage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
|
||||
{stats.map((item, index) => (
|
||||
<div
|
||||
@@ -410,60 +325,87 @@ export default function FinancePage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Booking Cards */}
|
||||
<h2 className="text-xl font-bold mb-4">{t("Oxirgi bandlovlar")}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{data?.data.data.results.orders.map((p, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-gray-800 p-5 rounded-xl shadow hover:shadow-md transition-all flex flex-col justify-between"
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
|
||||
<Loader2 className="w-10 h-10 animate-spin text-cyan-400" />
|
||||
<p className="text-slate-400">
|
||||
{t("Ma'lumotlar yuklanmoqda...")}
|
||||
</p>
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 w-full text-center text-white gap-4">
|
||||
<AlertTriangle className="w-10 h-10 text-red-500" />
|
||||
<p className="text-lg">
|
||||
{t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => refetch()}
|
||||
className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg px-5 py-2 hover:opacity-90"
|
||||
>
|
||||
<div>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<h2 className="text-lg font-bold text-gray-100">
|
||||
{p.user.first_name} {p.user.last_name}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{p.user.contact.includes("gmail.com")
|
||||
? p.user.contact
|
||||
: formatPhone(p.user.contact)}
|
||||
</p>
|
||||
<p className="mt-3 font-semibold text-gray-200">
|
||||
{p.tour_name}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 mt-1 text-gray-400">
|
||||
<MapPin size={14} />
|
||||
<p className="text-sm">{p.destination}</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-3">
|
||||
{/* <div>
|
||||
{t("Qayta urinish")}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
data &&
|
||||
!isError &&
|
||||
!isLoading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{data?.data.data.results.orders.map((p, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-gray-800 p-5 rounded-xl shadow hover:shadow-md transition-all flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<h2 className="text-lg font-bold text-gray-100">
|
||||
{p.user.first_name} {p.user.last_name}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{p.user.contact.includes("gmail.com")
|
||||
? p.user.contact
|
||||
: formatPhone(p.user.contact)}
|
||||
</p>
|
||||
<p className="mt-3 font-semibold text-gray-200">
|
||||
{p.tour_name}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 mt-1 text-gray-400">
|
||||
<MapPin size={14} />
|
||||
<p className="text-sm">{p.destination}</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-3">
|
||||
{/* <div>
|
||||
<p className="text-gray-500 text-sm">
|
||||
{t("Sayohat sanasi")}
|
||||
{t("Sayohat sanasi")}
|
||||
</p>
|
||||
<p className="text-gray-100 font-medium">
|
||||
{p.travelDate}
|
||||
</p>
|
||||
</div> */}
|
||||
<div className="text-start">
|
||||
<p className="text-gray-500 text-sm">{t("Miqdor")}</p>
|
||||
<p className="text-green-400 font-bold">
|
||||
{formatPrice(p.total_price, true)}
|
||||
{p.travelDate}
|
||||
</p>
|
||||
</div> */}
|
||||
<div className="text-start">
|
||||
<p className="text-gray-500 text-sm">
|
||||
{t("Miqdor")}
|
||||
</p>
|
||||
<p className="text-green-400 font-bold">
|
||||
{formatPrice(p.total_price, true)}
|
||||
</p>
|
||||
</div>
|
||||
<div>{getStatusBadge(p.order_status)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 items-center">
|
||||
<Link to={`/bookings/${p.id}`}>
|
||||
<button className="bg-blue-600 text-white px-3 py-2 w-full justify-center cursor-pointer rounded-lg hover:bg-blue-700 flex items-center gap-1 transition-colors">
|
||||
<Eye className="w-4 h-4" /> {t("Ko'rish")}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div>{getStatusBadge(p.order_status)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 items-center">
|
||||
<Link to={`/bookings/${p.id}`}>
|
||||
<button className="bg-blue-600 text-white px-3 py-2 w-full justify-center cursor-pointer rounded-lg hover:bg-blue-700 flex items-center gap-1 transition-colors">
|
||||
<Eye className="w-4 h-4" /> {t("Ko'rish")}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<div className="flex justify-end gap-2 mt-5">
|
||||
<button
|
||||
disabled={currentPage === 1}
|
||||
@@ -501,64 +443,148 @@ export default function FinancePage() {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "agencies" && (
|
||||
<>
|
||||
<h2 className="text-xl font-bold mb-6">Partner Agencies</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{agencies.map((a) => (
|
||||
<div
|
||||
key={a.id}
|
||||
className="bg-gray-800 p-6 rounded-xl shadow hover:shadow-md transition-all"
|
||||
>
|
||||
<h2 className="text-xl font-bold mb-3 flex items-center gap-2 text-gray-100">
|
||||
<Users className="text-blue-400" size={20} />
|
||||
{a.name}
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="bg-green-900 p-3 rounded-lg">
|
||||
<p className="text-gray-400 text-sm">Paid</p>
|
||||
<p className="text-green-400 font-bold text-lg">
|
||||
${(a.totalPaid / 1000000).toFixed(1)}M
|
||||
{user === "tour_admin" ||
|
||||
user === "buxgalter" ||
|
||||
user === "admin" ||
|
||||
(user === "superuser" && (
|
||||
<>
|
||||
{tab === "agencies" && (
|
||||
<>
|
||||
{agenctLoad ? (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
|
||||
<Loader2 className="w-10 h-10 animate-spin text-cyan-400" />
|
||||
<p className="text-slate-400">
|
||||
{t("Ma'lumotlar yuklanmoqda...")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-yellow-900 p-3 rounded-lg">
|
||||
<p className="text-gray-400 text-sm">Pending</p>
|
||||
<p className="text-yellow-400 font-bold text-lg">
|
||||
${(a.pending / 1000000).toFixed(1)}M
|
||||
) : agencyError ? (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 w-full text-center text-white gap-4">
|
||||
<AlertTriangle className="w-10 h-10 text-red-500" />
|
||||
<p className="text-lg">
|
||||
{t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => agencyRef()}
|
||||
className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg px-5 py-2 hover:opacity-90"
|
||||
>
|
||||
{t("Qayta urinish")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
agencyData &&
|
||||
!agencyError &&
|
||||
!agenctLoad && (
|
||||
<>
|
||||
<h2 className="text-xl font-bold mb-6">
|
||||
{t("Partner Agencies")}
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{agencyData?.data.data.results.map((a) => (
|
||||
<div
|
||||
key={a.id}
|
||||
className="bg-gray-800 p-6 rounded-xl shadow hover:shadow-md transition-all"
|
||||
>
|
||||
<h2 className="text-xl font-bold mb-3 flex items-center gap-2 text-gray-100">
|
||||
<Users className="text-blue-400" size={20} />
|
||||
{a.name}
|
||||
</h2>
|
||||
|
||||
<div className="mb-4 text-gray-400">
|
||||
<p className="text-sm mb-1">
|
||||
Bookings:{" "}
|
||||
<span className="font-medium text-gray-100">
|
||||
{a.purchaseCount}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
Destinations:{" "}
|
||||
<span className="font-medium text-gray-100">
|
||||
{a.destinations.length}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="bg-green-900 p-3 rounded-lg">
|
||||
<p className="text-gray-400 text-sm">
|
||||
{t("Paid")}
|
||||
</p>
|
||||
<p className="text-green-400 font-bold text-lg">
|
||||
{formatPrice(a.paid, true)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-yellow-900 p-3 rounded-lg">
|
||||
<p className="text-gray-400 text-sm">
|
||||
{t("Pending")}
|
||||
</p>
|
||||
<p className="text-yellow-400 font-bold text-lg">
|
||||
{formatPrice(a.pending, true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
to={`/travel/booking/${a.id}`}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-1 transition-colors flex-1 justify-center"
|
||||
<div className="mb-4 text-gray-400">
|
||||
<p className="text-sm mb-1">
|
||||
{t("Bookings")}:{" "}
|
||||
<span className="font-medium text-gray-100">
|
||||
{a.ticket_sold_count}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{t("Destinations")}:{" "}
|
||||
<span className="font-medium text-gray-100">
|
||||
{a.ticket_count}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
to={`/travel/booking/${a.id}`}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-1 transition-colors flex-1 justify-center"
|
||||
>
|
||||
<Eye className="w-4 h-4" /> {t("Ko'rish")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
<div className="flex justify-end gap-2 mt-5">
|
||||
<button
|
||||
disabled={currentPageAgency === 1}
|
||||
onClick={() =>
|
||||
setCurrentPageAgency((p) => Math.max(p - 1, 1))
|
||||
}
|
||||
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
|
||||
>
|
||||
<Eye className="w-4 h-4" /> View Details
|
||||
</Link>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{[...Array(agencyData?.data.data.total_pages)].map(
|
||||
(_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setCurrentPageAgency(i + 1)}
|
||||
className={`px-4 py-2 rounded-lg border transition-all font-medium ${
|
||||
currentPageAgency === i + 1
|
||||
? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
|
||||
: "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
|
||||
<button
|
||||
disabled={
|
||||
currentPageAgency === agencyData?.data.data.total_pages
|
||||
}
|
||||
onClick={() =>
|
||||
setCurrentPageAgency((p) =>
|
||||
Math.min(
|
||||
p + 1,
|
||||
agencyData ? agencyData?.data.data.total_pages : 0,
|
||||
),
|
||||
)
|
||||
}
|
||||
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,166 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { getDetailAgencyOrder } from "@/pages/finance/lib/api";
|
||||
import formatDate from "@/shared/lib/formatDate";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import formatPrice from "@/shared/lib/formatPrice";
|
||||
import { Card, CardHeader } from "@/shared/ui/card";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
Eye,
|
||||
Hotel,
|
||||
Mail,
|
||||
MapPin,
|
||||
Phone,
|
||||
Plane,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
|
||||
type TourPurchase = {
|
||||
id: number;
|
||||
userName: string;
|
||||
userPhone: string;
|
||||
tourName: string;
|
||||
tourId: number;
|
||||
agencyName: string;
|
||||
agencyId: number;
|
||||
destination: string;
|
||||
travelDate: string;
|
||||
amount: number;
|
||||
paymentStatus: "paid" | "pending" | "cancelled" | "refunded";
|
||||
purchaseDate: string;
|
||||
rating: number;
|
||||
review: string;
|
||||
};
|
||||
|
||||
const mockTourData = {
|
||||
id: 1,
|
||||
name: "Dubai Luxury Tour",
|
||||
destination: "Dubai, UAE",
|
||||
duration: "7 days",
|
||||
price: 1500000,
|
||||
totalBookings: 45,
|
||||
totalRevenue: 67500000,
|
||||
averageRating: 4.8,
|
||||
agency: "Silk Road Travel",
|
||||
description:
|
||||
"Experience the ultimate luxury in Dubai with 5-star accommodations, private tours, and exclusive experiences.",
|
||||
inclusions: [
|
||||
"5-star hotel accommodation",
|
||||
"Private city tours",
|
||||
"Desert safari experience",
|
||||
"Burj Khalifa tickets",
|
||||
"Airport transfers",
|
||||
],
|
||||
};
|
||||
|
||||
const mockTourPurchases: TourPurchase[] = [
|
||||
{
|
||||
id: 1,
|
||||
userName: "Aziza Karimova",
|
||||
userPhone: "+998 90 123 45 67",
|
||||
tourName: "Dubai Luxury Tour",
|
||||
tourId: 1,
|
||||
agencyName: "Silk Road Travel",
|
||||
agencyId: 1,
|
||||
destination: "Dubai, UAE",
|
||||
travelDate: "2025-11-10",
|
||||
amount: 1500000,
|
||||
paymentStatus: "paid",
|
||||
purchaseDate: "2025-10-10",
|
||||
rating: 5,
|
||||
review:
|
||||
"Amazing experience! The hotel was luxurious and the tours were well organized.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
userName: "Sardor Rahimov",
|
||||
userPhone: "+998 91 234 56 78",
|
||||
tourName: "Dubai Luxury Tour",
|
||||
tourId: 1,
|
||||
agencyName: "Silk Road Travel",
|
||||
agencyId: 1,
|
||||
destination: "Dubai, UAE",
|
||||
travelDate: "2025-11-15",
|
||||
amount: 1500000,
|
||||
paymentStatus: "paid",
|
||||
purchaseDate: "2025-10-12",
|
||||
rating: 4,
|
||||
review:
|
||||
"Great tour overall. The desert safari was the highlight of our trip.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
userName: "Nilufar Toshmatova",
|
||||
userPhone: "+998 93 345 67 89",
|
||||
tourName: "Dubai Luxury Tour",
|
||||
tourId: 1,
|
||||
agencyName: "Silk Road Travel",
|
||||
agencyId: 1,
|
||||
destination: "Dubai, UAE",
|
||||
travelDate: "2025-11-20",
|
||||
amount: 1500000,
|
||||
paymentStatus: "pending",
|
||||
purchaseDate: "2025-10-14",
|
||||
rating: 0,
|
||||
review: "",
|
||||
},
|
||||
];
|
||||
|
||||
export default function FinanceDetailTour() {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
"overview" | "bookings" | "reviews"
|
||||
>("overview");
|
||||
const params = useParams();
|
||||
|
||||
console.log(params);
|
||||
|
||||
// const {} = useQuery({
|
||||
// queryKey: ["detail_order"],
|
||||
// queryFn: () => getDetailOrder()
|
||||
// })
|
||||
|
||||
const getStatusBadge = (status: TourPurchase["paymentStatus"]) => {
|
||||
const base =
|
||||
"px-3 py-1 rounded-full text-sm font-medium inline-flex items-center gap-2";
|
||||
switch (status) {
|
||||
case "paid":
|
||||
return (
|
||||
<span
|
||||
className={`${base} bg-green-900 text-green-400 border border-green-700`}
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
Paid
|
||||
</span>
|
||||
);
|
||||
case "pending":
|
||||
return (
|
||||
<span
|
||||
className={`${base} bg-yellow-900 text-yellow-400 border border-yellow-700`}
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-yellow-400"></div>
|
||||
Pending
|
||||
</span>
|
||||
);
|
||||
case "cancelled":
|
||||
return (
|
||||
<span
|
||||
className={`${base} bg-red-900 text-red-400 border border-red-700`}
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-red-400"></div>
|
||||
Cancelled
|
||||
</span>
|
||||
);
|
||||
case "refunded":
|
||||
return (
|
||||
<span
|
||||
className={`${base} bg-blue-900 text-blue-400 border border-blue-700`}
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-blue-400"></div>
|
||||
Refunded
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
const { data } = useQuery({
|
||||
queryKey: ["detail_order", params.id],
|
||||
queryFn: () => getDetailAgencyOrder(Number(params.id)),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return (
|
||||
@@ -179,14 +54,6 @@ export default function FinanceDetailTour() {
|
||||
);
|
||||
};
|
||||
|
||||
const paidBookings = mockTourPurchases.filter(
|
||||
(p) => p.paymentStatus === "paid",
|
||||
);
|
||||
const totalRevenue = paidBookings.reduce((sum, p) => sum + p.amount, 0);
|
||||
const pendingRevenue = mockTourPurchases
|
||||
.filter((p) => p.paymentStatus === "pending")
|
||||
.reduce((sum, p) => sum + p.amount, 0);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-gray-900 text-gray-100">
|
||||
<div className="w-[90%] mx-auto py-6">
|
||||
@@ -200,10 +67,7 @@ export default function FinanceDetailTour() {
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Tour Financial Details</h1>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Financial performance for {mockTourData.name}
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold">{data?.name}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -212,48 +76,46 @@ export default function FinanceDetailTour() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div className="bg-gray-800 p-6 rounded-xl shadow">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-gray-400 font-medium">Total Revenue</p>
|
||||
<p className="text-gray-400 font-medium">
|
||||
{t("To'langan summa")}
|
||||
</p>
|
||||
<DollarSign className="text-green-400 w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-green-400 mt-3">
|
||||
${(totalRevenue / 1000000).toFixed(1)}M
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
From completed bookings
|
||||
{data && formatPrice(data?.paid, true)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-xl shadow">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-gray-400 font-medium">Pending Revenue</p>
|
||||
<p className="text-gray-400 font-medium">
|
||||
{t("Kutilayotgan summa")}
|
||||
</p>
|
||||
<TrendingUp className="text-yellow-400 w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-yellow-400 mt-3">
|
||||
${(pendingRevenue / 1000000).toFixed(1)}M
|
||||
{data && formatPrice(data.pending, true)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">Awaiting payment</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-xl shadow">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-gray-400 font-medium">Total Bookings</p>
|
||||
<p className="text-gray-400 font-medium">{t("Total Bookings")}</p>
|
||||
<Users className="text-blue-400 w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-blue-400 mt-3">
|
||||
{mockTourPurchases.length}
|
||||
{data?.ticket_sold_count}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">All bookings</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-xl shadow">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-gray-400 font-medium">Average Rating</p>
|
||||
<p className="text-gray-400 font-medium">{t("Average Rating")}</p>
|
||||
<Star className="text-yellow-400 w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-yellow-400 mt-3">
|
||||
{mockTourData.averageRating}/5
|
||||
{data?.rating}/5
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">Customer satisfaction</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -270,7 +132,7 @@ export default function FinanceDetailTour() {
|
||||
onClick={() => setActiveTab("overview")}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
Tour Overview
|
||||
{t("Umumiy ma'lumot")}
|
||||
</button>
|
||||
<button
|
||||
className={`px-6 py-4 font-medium flex items-center gap-2 transition-colors ${
|
||||
@@ -281,7 +143,7 @@ export default function FinanceDetailTour() {
|
||||
onClick={() => setActiveTab("bookings")}
|
||||
>
|
||||
<Users className="w-4 h-4" />
|
||||
Bookings ({mockTourPurchases.length})
|
||||
{t("Bookings")} ({data?.total_booking_count})
|
||||
</button>
|
||||
<button
|
||||
className={`px-6 py-4 font-medium flex items-center gap-2 transition-colors ${
|
||||
@@ -292,7 +154,7 @@ export default function FinanceDetailTour() {
|
||||
onClick={() => setActiveTab("reviews")}
|
||||
>
|
||||
<Star className="w-4 h-4" />
|
||||
Reviews
|
||||
{t("Reviews")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -301,14 +163,18 @@ export default function FinanceDetailTour() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Tour Information */}
|
||||
<div className="lg:col-span-2">
|
||||
<h3 className="text-lg font-bold mb-4">Tour Information</h3>
|
||||
<h3 className="text-lg font-bold mb-4">
|
||||
{t("Umumiy ma'lumot")}
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">
|
||||
<Plane className="w-5 h-5 text-blue-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Tour Name</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
{t("Agentlik nomi")}
|
||||
</p>
|
||||
<p className="text-gray-100 font-medium">
|
||||
{mockTourData.name}
|
||||
{data?.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -316,54 +182,95 @@ export default function FinanceDetailTour() {
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">
|
||||
<MapPin className="w-5 h-5 text-green-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Destination</p>
|
||||
<p className="text-sm text-gray-400">{t("Manzili")}</p>
|
||||
<p className="text-gray-100">{data?.addres}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">
|
||||
<Phone className="w-5 h-5 text-purple-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">
|
||||
{t("Telefon raqami")}
|
||||
</p>
|
||||
<p className="text-gray-100">
|
||||
{mockTourData.destination}
|
||||
{data && formatPhone(data?.phone)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">
|
||||
<Calendar className="w-5 h-5 text-purple-400" />
|
||||
<Mail className="w-5 h-5 text-yellow-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Duration</p>
|
||||
<p className="text-gray-100">{mockTourData.duration}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">
|
||||
<Hotel className="w-5 h-5 text-yellow-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Agency</p>
|
||||
<p className="text-gray-100">{mockTourData.agency}</p>
|
||||
<p className="text-sm text-gray-400">{t("E-mail")}</p>
|
||||
<p className="text-gray-100">{data?.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-700 rounded-lg">
|
||||
<p className="text-sm text-gray-400 mb-2">Description</p>
|
||||
<p className="text-gray-100">
|
||||
{mockTourData.description}
|
||||
<p className="text-sm text-gray-400 mb-2">
|
||||
{t("Id raqami va ulushi")}
|
||||
</p>
|
||||
<div className="flex gap-10">
|
||||
<p className="text-gray-100">
|
||||
{t("Id")}: {data?.custom_id}
|
||||
</p>
|
||||
<p className="text-gray-100">
|
||||
{t("Ulushi")}: {data?.share_percentage}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold mb-4">Tour Inclusions</h3>
|
||||
<div className="mt-6 p-4 bg-gray-700 rounded-lg">
|
||||
<p className="text-sm text-gray-400 mb-2">Base Price</p>
|
||||
<p className="text-2xl font-bold text-green-400">
|
||||
${(mockTourData.price / 1000000).toFixed(1)}M
|
||||
</p>
|
||||
<p className="text-sm text-gray-400 mt-1">per person</p>
|
||||
{data && (
|
||||
<div className="grid gap-4">
|
||||
<Card className="bg-gray-800 text-white border-gray-700">
|
||||
<CardHeader>
|
||||
{t("Qo'shilgan turlar")}
|
||||
<p className="text-2xl font-bold text-purple-400">
|
||||
{data.ticket_count}
|
||||
</p>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gray-800 text-white border-gray-700">
|
||||
<CardHeader>
|
||||
{t("Umumiy daromad")}
|
||||
<p className="text-2xl font-bold text-blue-400">
|
||||
{formatPrice(data.total_income, true)}
|
||||
</p>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
{/* Platforma daromadi */}
|
||||
<Card className="bg-gray-800 text-white border-gray-700">
|
||||
<CardHeader>
|
||||
{t("Platformaga daromadi")}
|
||||
<p className="text-2xl font-bold text-purple-400">
|
||||
{formatPrice(data.platform_income, true)}
|
||||
</p>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gray-800 text-white border-gray-700">
|
||||
<CardHeader>
|
||||
{t("Agentlik daromadi")}
|
||||
<p className="text-2xl font-bold text-cyan-400">
|
||||
{formatPrice(data.paid + data.pending, true)}
|
||||
</p>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "bookings" && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-bold mb-4">Recent Bookings</h2>
|
||||
{mockTourPurchases.map((purchase) => (
|
||||
<h2 className="text-xl font-bold mb-4">
|
||||
{t("Recent Bookings")}
|
||||
</h2>
|
||||
{data?.orders.map((purchase) => (
|
||||
<div
|
||||
key={purchase.id}
|
||||
className="bg-gray-700 p-6 rounded-lg hover:bg-gray-600 transition-colors"
|
||||
@@ -371,45 +278,48 @@ export default function FinanceDetailTour() {
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-100">
|
||||
{purchase.userName}
|
||||
{purchase.user.first_name} {purchase.user.last_name}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{purchase.userPhone}
|
||||
{formatPhone(purchase.user.contact)}
|
||||
</p>
|
||||
</div>
|
||||
{getStatusBadge(purchase.paymentStatus)}
|
||||
{/* {getStatusBadge(purchase.)} */}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Travel Date</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
{t("Travel Date")}
|
||||
</p>
|
||||
<p className="text-gray-100 font-medium">
|
||||
{purchase.travelDate}
|
||||
{purchase.departure_date}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Booking Date</p>
|
||||
<p className="text-gray-100">{purchase.purchaseDate}</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
{t("Booking Date")}
|
||||
</p>
|
||||
<p className="text-gray-100">
|
||||
{formatDate.format(purchase.created_at, "DD-MM-YYYY")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Amount</p>
|
||||
<p className="text-sm text-gray-400">{t("Amount")}</p>
|
||||
<p className="text-green-400 font-bold">
|
||||
${(purchase.amount / 1000000).toFixed(1)}M
|
||||
{formatPrice(purchase.total_price, true)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pt-4 border-t border-gray-600">
|
||||
<div className="text-sm text-gray-400">
|
||||
Agency: {purchase.agencyName}
|
||||
</div>
|
||||
<div className="flex justify-end items-center pt-4 border-t border-gray-600">
|
||||
<Link
|
||||
to={`/bookings/${purchase.id}`}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
View Details
|
||||
{t("Batafsil")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -420,39 +330,29 @@ export default function FinanceDetailTour() {
|
||||
{activeTab === "reviews" && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-bold mb-4">Customer Reviews</h2>
|
||||
{mockTourPurchases
|
||||
.filter((purchase) => purchase.rating > 0)
|
||||
.map((purchase) => (
|
||||
<div
|
||||
key={purchase.id}
|
||||
className="bg-gray-700 p-6 rounded-lg hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-100">
|
||||
{purchase.userName}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{purchase.travelDate}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{renderStars(purchase.rating)}
|
||||
<span className="text-gray-300">
|
||||
{purchase.rating}.0
|
||||
</span>
|
||||
</div>
|
||||
{data?.comments.map((purchase) => (
|
||||
<div
|
||||
key={purchase.created}
|
||||
className="bg-gray-700 p-6 rounded-lg hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-100">
|
||||
{purchase.user.first_name} {purchase.user.last_name}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{formatDate.format(purchase.created, "DD-MM-YYYY")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-100 mb-4">{purchase.review}</p>
|
||||
|
||||
<div className="flex justify-between items-center pt-4 border-t border-gray-600">
|
||||
<div className="text-sm text-gray-400">
|
||||
Booked on {purchase.purchaseDate}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{renderStars(purchase.rating)}
|
||||
<span className="text-gray-300">{purchase.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<p className="text-gray-100 mb-4">{purchase.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,12 @@ import type {
|
||||
GetSupportUser,
|
||||
} from "@/pages/support/lib/types";
|
||||
import httpClient from "@/shared/config/api/httpClient";
|
||||
import { SUPPORT_AGENCY, SUPPORT_USER } from "@/shared/config/api/URLs";
|
||||
import {
|
||||
GET_ALL_AGENCY,
|
||||
SUPPORT_AGENCY,
|
||||
SUPPORT_USER,
|
||||
TOUR_ADMIN,
|
||||
} from "@/shared/config/api/URLs";
|
||||
import type { AxiosResponse } from "axios";
|
||||
|
||||
const getSupportUser = async (params: {
|
||||
@@ -55,10 +60,43 @@ const getSupportAgencyDetail = async (
|
||||
return res;
|
||||
};
|
||||
|
||||
const createTourAdmin = async (
|
||||
id: number,
|
||||
): Promise<
|
||||
AxiosResponse<{
|
||||
status: boolean;
|
||||
data: {
|
||||
id: number;
|
||||
phone: string;
|
||||
role: string;
|
||||
travel_agency: string;
|
||||
password: string;
|
||||
};
|
||||
}>
|
||||
> => {
|
||||
const res = await httpClient.post(`${TOUR_ADMIN}${id}/create/`);
|
||||
return res;
|
||||
};
|
||||
|
||||
const updateTour = async ({
|
||||
id,
|
||||
body,
|
||||
}: {
|
||||
id: number;
|
||||
body: {
|
||||
status: "pending" | "approved" | "cancelled";
|
||||
};
|
||||
}) => {
|
||||
const res = await httpClient.patch(`${GET_ALL_AGENCY}${id}/`, body);
|
||||
return res;
|
||||
};
|
||||
|
||||
export {
|
||||
createTourAdmin,
|
||||
deleteSupportUser,
|
||||
getSupportAgency,
|
||||
getSupportAgencyDetail,
|
||||
getSupportUser,
|
||||
updateSupportUser,
|
||||
updateTour,
|
||||
};
|
||||
|
||||
@@ -1,15 +1,40 @@
|
||||
import { getSupportAgency } from "@/pages/support/lib/api";
|
||||
import {
|
||||
createTourAdmin,
|
||||
getSupportAgency,
|
||||
updateTour,
|
||||
} from "@/pages/support/lib/api";
|
||||
import type { GetSupportAgencyRes } from "@/pages/support/lib/types";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AlertTriangle, Loader2, XIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const SupportAgency = () => {
|
||||
const [query, setQuery] = useState("");
|
||||
const queryClient = useQueryClient();
|
||||
const [openUser, setOpenUser] = useState<boolean>(false);
|
||||
const [user, setUser] = useState<{
|
||||
status: boolean;
|
||||
data: {
|
||||
id: number;
|
||||
phone: string;
|
||||
role: string;
|
||||
travel_agency: string;
|
||||
password: string;
|
||||
};
|
||||
} | null>(null);
|
||||
const { t } = useTranslation();
|
||||
const [selected, setSelected] = useState<GetSupportAgencyRes | null>(null);
|
||||
|
||||
@@ -19,6 +44,44 @@ const SupportAgency = () => {
|
||||
getSupportAgency({ page: 1, page_size: 10, search: "", status: "" }),
|
||||
});
|
||||
|
||||
const { mutate: updateTours } = useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
body,
|
||||
}: {
|
||||
id: number;
|
||||
body: {
|
||||
status: "pending" | "approved" | "cancelled";
|
||||
};
|
||||
}) => updateTour({ body, id }),
|
||||
onSuccess: (res) => {
|
||||
queryClient.refetchQueries({ queryKey: ["support_agency"] });
|
||||
setOpenUser(true);
|
||||
setUser(res.data);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: createAdmin } = useMutation({
|
||||
mutationFn: (id: number) => createTourAdmin(id),
|
||||
onSuccess: (res) => {
|
||||
queryClient.refetchQueries({ queryKey: ["support_agency"] });
|
||||
setOpenUser(true);
|
||||
setUser(res.data);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
|
||||
@@ -213,8 +276,12 @@ const SupportAgency = () => {
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
alert("Qabul qilindi (ishlab chiqishingiz kerak)");
|
||||
setSelected(null);
|
||||
createAdmin(selected.id);
|
||||
updateTours({
|
||||
body: { status: "approved" },
|
||||
id: selected.id,
|
||||
});
|
||||
}}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition"
|
||||
>
|
||||
@@ -222,8 +289,11 @@ const SupportAgency = () => {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
alert("Rad etildi (ishlab chiqishingiz kerak)");
|
||||
setSelected(null);
|
||||
updateTours({
|
||||
body: { status: "cancelled" },
|
||||
id: selected.id,
|
||||
});
|
||||
}}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"
|
||||
>
|
||||
@@ -233,6 +303,47 @@ const SupportAgency = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Dialog open={openUser} onOpenChange={() => {}}>
|
||||
<DialogContent className="bg-gray-900 text-white sm:max-w-sm rounded-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-lg font-semibold">
|
||||
{t("Yangi foydalanuvchi ma'lumotlari")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-gray-400 text-sm">
|
||||
{t("Agentlik uchun tizimga kirish ma'lumotlari")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{user && (
|
||||
<div className="space-y-4 mt-4">
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm mb-1">
|
||||
{t("Telefon raqam (login)")}
|
||||
</p>
|
||||
<p className="text-lg font-medium">
|
||||
{formatPhone(user.data.phone)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm mb-1">{t("Parol")}</p>
|
||||
<p className="text-lg font-semibold text-green-400">
|
||||
{user.data.password}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter className="mt-6">
|
||||
<Button
|
||||
onClick={() => setOpenUser(false)}
|
||||
className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-5 py-2 rounded-md hover:opacity-90"
|
||||
>
|
||||
{t("Yopish")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -40,7 +40,16 @@ import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const Tours = () => {
|
||||
type Role =
|
||||
| "superuser"
|
||||
| "admin"
|
||||
| "moderator"
|
||||
| "tour_admin"
|
||||
| "buxgalter"
|
||||
| "operator"
|
||||
| "user";
|
||||
|
||||
const Tours = ({ user }: { user: Role }) => {
|
||||
const { t } = useTranslation();
|
||||
const [page, setPage] = useState(1);
|
||||
const [deleteId, setDeleteId] = useState<number | null>(null);
|
||||
@@ -133,7 +142,11 @@ const Tours = () => {
|
||||
<div className="min-h-screen bg-gray-900 text-foreground py-10 px-5 w-full">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-semibold">{t("Turlar ro'yxati")}</h1>
|
||||
<Button onClick={() => navigate("/tours/create")} variant="default">
|
||||
<Button
|
||||
onClick={() => navigate("/tours/create")}
|
||||
variant="default"
|
||||
disabled={user !== "tour_admin"}
|
||||
>
|
||||
<PlusCircle className="w-5 h-5 mr-2" /> {t("Yangi tur qo'shish")}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -149,9 +162,11 @@ const Tours = () => {
|
||||
</TableHead>
|
||||
<TableHead className="min-w-[180px]">{t("Mehmonxona")}</TableHead>
|
||||
<TableHead className="min-w-[200px]">{t("Narxi")}</TableHead>
|
||||
<TableHead className="min-w-[120px] text-center">
|
||||
{t("Popular")}
|
||||
</TableHead>
|
||||
{user && user === "moderator" && (
|
||||
<TableHead className="min-w-[120px] text-center">
|
||||
{t("Popular")}
|
||||
</TableHead>
|
||||
)}
|
||||
<TableHead className="min-w-[150px] text-center">
|
||||
{t("Операции")}
|
||||
</TableHead>
|
||||
@@ -170,7 +185,7 @@ const Tours = () => {
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-primary font-medium">
|
||||
{tour.duration_days} kun
|
||||
{tour.duration_days} {t("kun")}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-col">
|
||||
@@ -185,18 +200,19 @@ const Tours = () => {
|
||||
{formatPrice(tour.price, true)}
|
||||
</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="text-center">
|
||||
<Switch
|
||||
checked={tour.featured_tickets}
|
||||
onCheckedChange={() =>
|
||||
popular({
|
||||
id: tour.id,
|
||||
value: tour.featured_tickets ? 0 : 1,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</TableCell>
|
||||
{user && user === "moderator" && (
|
||||
<TableCell className="text-center">
|
||||
<Switch
|
||||
checked={tour.featured_tickets}
|
||||
onCheckedChange={() =>
|
||||
popular({
|
||||
id: tour.id,
|
||||
value: tour.featured_tickets ? 0 : 1,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
|
||||
<TableCell className="text-center">
|
||||
<div className="flex gap-2 justify-center">
|
||||
|
||||
Reference in New Issue
Block a user