api ulandi
This commit is contained in:
Samandar Turgunboyev
@@ -1,5 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { getDetailAgency } from "@/pages/agencies/lib/api";
|
||||
import {
|
||||
deleteSupportUser,
|
||||
getSupportUser,
|
||||
updateSupportUser,
|
||||
} from "@/pages/support/lib/api"; // deleteSupportUser import qiling
|
||||
import type { GetSupportUserRes } from "@/pages/support/lib/types";
|
||||
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";
|
||||
@@ -10,129 +18,201 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { MessageCircle, Phone, User } from "lucide-react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AlertTriangle, Loader2, Phone, Trash2, User } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
type SupportRequest = {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
message: string;
|
||||
status: "Pending" | "Resolved";
|
||||
};
|
||||
|
||||
const initialRequests: SupportRequest[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Alisher Karimov",
|
||||
phone: "+998 90 123 45 67",
|
||||
message: "Sayohat uchun viza hujjatlarini tayyorlashda yordam kerak.",
|
||||
status: "Pending",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Dilnoza Tursunova",
|
||||
phone: "+998 91 765 43 21",
|
||||
message: "To‘lov muvaffaqiyatli o‘tmadi, yordam bera olasizmi?",
|
||||
status: "Resolved",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Jamshid Abdullayev",
|
||||
phone: "+998 93 555 22 11",
|
||||
message: "Sayohat sanasini o‘zgartirishni istayman.",
|
||||
status: "Pending",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Jamshid Abdullayev",
|
||||
phone: "+998 93 555 22 11",
|
||||
message: "Sayohat sanasini o‘zgartirishni istayman.",
|
||||
status: "Pending",
|
||||
},
|
||||
];
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const SupportTours = () => {
|
||||
const [requests, setRequests] = useState<SupportRequest[]>(initialRequests);
|
||||
const [selected, setSelected] = useState<SupportRequest | null>(null);
|
||||
const { t } = useTranslation();
|
||||
const [selected, setSelected] = useState<GetSupportUserRes | null>(null);
|
||||
const [selectedToDelete, setSelectedToDelete] =
|
||||
useState<GetSupportUserRes | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
const [filterStatus, setFilterStatus] = useState<
|
||||
"" | "pending" | "done" | "failed"
|
||||
>("");
|
||||
|
||||
const handleToggleStatus = (id: number) => {
|
||||
setRequests((prev) =>
|
||||
prev.map((req) =>
|
||||
req.id === id
|
||||
? {
|
||||
...req,
|
||||
status: req.status === "Pending" ? "Resolved" : "Pending",
|
||||
}
|
||||
: req,
|
||||
),
|
||||
);
|
||||
setSelected((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
status: prev.status === "Pending" ? "Resolved" : "Pending",
|
||||
}
|
||||
: prev,
|
||||
);
|
||||
const { data, isLoading, isError, refetch } = useQuery({
|
||||
queryKey: ["support_user", filterStatus],
|
||||
queryFn: () =>
|
||||
getSupportUser({ page: 1, page_size: 99, status: filterStatus }),
|
||||
});
|
||||
|
||||
const { data: agency } = useQuery({
|
||||
queryKey: ["detail_agency", selected?.travel_agency],
|
||||
queryFn: () => getDetailAgency({ id: Number(selected?.travel_agency) }),
|
||||
enabled: !!selected?.travel_agency,
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ body, id }: { id: number; body: GetSupportUserRes }) =>
|
||||
updateSupportUser({ body, id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["support_user"] });
|
||||
setSelected(null);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => deleteSupportUser({ id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["support_user"] });
|
||||
setSelectedToDelete(null);
|
||||
toast.success(t("Muvaffaqiyatli o'chirildi"), {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("O'chirishda xatolik yuz berdi"), {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleToggleStatus = (body: GetSupportUserRes) => {
|
||||
updateMutation.mutate({
|
||||
body: {
|
||||
...body,
|
||||
status: body.status === "pending" ? "done" : "pending",
|
||||
},
|
||||
id: body.id,
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-gray-100 p-6 space-y-6 w-full">
|
||||
<h1 className="text-3xl font-bold tracking-tight mb-4 text-white">
|
||||
Yordam so‘rovlari
|
||||
{t("Yordam so'rovlari")}
|
||||
</h1>
|
||||
|
||||
<div className="grid gap-5 sm:grid-cols-3 lg:grid-cols-3">
|
||||
{requests.map((req) => (
|
||||
<Card
|
||||
key={req.id}
|
||||
className="bg-gray-800/70 border border-gray-700 shadow-md hover:shadow-lg hover:bg-gray-800 transition-all duration-200"
|
||||
{/* Status Tabs */}
|
||||
<div className="flex gap-3 mb-4">
|
||||
{[
|
||||
{ label: t("Barchasi"), value: "" },
|
||||
{ label: t("Kutilmoqda"), value: "pending" },
|
||||
{ label: t("done"), value: "done" },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
|
||||
filterStatus === tab.value
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-gray-700 text-gray-300 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setFilterStatus(tab.value as any)}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2 text-lg font-semibold text-white">
|
||||
<User className="w-5 h-5 text-blue-400" />
|
||||
{req.name}
|
||||
</span>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="grid gap-5 sm:grid-cols-3 lg:grid-cols-3">
|
||||
{data && data.data.data.results.length === 0 ? (
|
||||
<div className="col-span-full flex flex-col items-center justify-center min-h-[50vh] w-full text-center text-white gap-4">
|
||||
<p className="text-lg">{t("Natija topilmadi")}</p>
|
||||
</div>
|
||||
) : (
|
||||
data?.data.data.results.map((req) => (
|
||||
<Card
|
||||
key={req.id}
|
||||
className="bg-gray-800/70 border border-gray-700 shadow-md hover:shadow-lg hover:bg-gray-800 transition-all duration-200 justify-between"
|
||||
>
|
||||
<CardHeader className="pb-2 flex justify-between items-center">
|
||||
<div className="flex gap-2">
|
||||
<CardTitle className="flex items-center gap-2 text-lg font-semibold text-white">
|
||||
<User className="w-5 h-5 text-blue-400" />
|
||||
{req.name}
|
||||
</CardTitle>
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`px-2 py-1 rounded-md text-xs font-medium ${
|
||||
req.status === "Pending"
|
||||
req.status === "pending"
|
||||
? "bg-red-500/10 text-red-400 border-red-400/40"
|
||||
: "bg-green-500/10 text-green-400 border-green-400/40"
|
||||
}`}
|
||||
>
|
||||
{req.status === "Pending" ? "Kutilmoqda" : "Yakunlangan"}
|
||||
{req.status === "pending" ? t("Kutilmoqda") : t("done")}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3 mt-1">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Phone className="w-4 h-4 text-gray-400" />
|
||||
{req.phone}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-2 text-gray-300">
|
||||
<MessageCircle className="w-4 h-4 text-gray-400 mt-1" />
|
||||
<p className="text-sm leading-relaxed">{req.message}</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-3 w-full border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-white"
|
||||
onClick={() => setSelected(req)}
|
||||
>
|
||||
Batafsil ko‘rish
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<CardContent className="space-y-3 mt-1">
|
||||
{req.travel_agency !== null ? (
|
||||
<span className="text-md text-gray-400">
|
||||
{t("Agentlikka tegishli")}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-md text-gray-400">
|
||||
{t("Sayt bo'yicha")}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-gray-400">
|
||||
<Phone className="w-4 h-4 text-gray-400" />
|
||||
{formatPhone(req.phone_number)}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 justify-end items-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-3 w-full border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-white"
|
||||
onClick={() => setSelected(req)}
|
||||
>
|
||||
{t("Batafsil ko'rish")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
className="flex items-center gap-1"
|
||||
onClick={() => setSelectedToDelete(req)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" /> {t("O'chirish")}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal (Dialog) */}
|
||||
{/* Detail Modal */}
|
||||
<Dialog open={!!selected} onOpenChange={() => setSelected(null)}>
|
||||
<DialogContent className="bg-gray-800 border border-gray-700 text-gray-100 sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
@@ -145,24 +225,26 @@ const SupportTours = () => {
|
||||
<div className="space-y-3 mt-2">
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<Phone className="w-4 h-4" />
|
||||
{selected?.phone}
|
||||
</div>
|
||||
<div className="flex items-start gap-2 text-gray-300">
|
||||
<MessageCircle className="w-4 h-4 mt-1" />
|
||||
<p className="text-sm leading-relaxed">{selected?.message}</p>
|
||||
{selected && formatPhone(selected?.phone_number)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-400">Status:</span>
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
{selected && selected.travel_agency && agency?.data.data && (
|
||||
<span className="text-sm text-gray-400">
|
||||
{t("Agentlikka tegishli")}: {agency?.data.data.name}
|
||||
</span>
|
||||
)}
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`px-2 py-1 rounded-md text-xs font-medium ${
|
||||
selected?.status === "Pending"
|
||||
selected?.status === "pending"
|
||||
? "bg-red-500/10 text-red-400 border-red-400/40"
|
||||
: "bg-green-500/10 text-green-400 border-green-400/40"
|
||||
}`}
|
||||
>
|
||||
{selected?.status === "Pending" ? "Kutilmoqda" : "Yakunlangan"}
|
||||
{selected?.status === "pending"
|
||||
? t("Kutilmoqda")
|
||||
: t("Yakunlangan")}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
@@ -173,25 +255,60 @@ const SupportTours = () => {
|
||||
className="border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-white"
|
||||
onClick={() => setSelected(null)}
|
||||
>
|
||||
Yopish
|
||||
{t("Yopish")}
|
||||
</Button>
|
||||
{selected && (
|
||||
<Button
|
||||
onClick={() => handleToggleStatus(selected.id)}
|
||||
onClick={() => handleToggleStatus(selected)}
|
||||
className={`${
|
||||
selected.status === "Pending"
|
||||
selected.status === "pending"
|
||||
? "bg-green-600 hover:bg-green-700"
|
||||
: "bg-red-600 hover:bg-red-700"
|
||||
} text-white`}
|
||||
>
|
||||
{selected.status === "Pending"
|
||||
? "Yakunlandi deb belgilash"
|
||||
: "Kutilmoqda deb belgilash"}
|
||||
{selected.status === "pending"
|
||||
? t("Yakunlandi deb belgilash")
|
||||
: t("Kutilmoqda deb belgilash")}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={!!selectedToDelete}
|
||||
onOpenChange={() => setSelectedToDelete(null)}
|
||||
>
|
||||
<DialogContent className="bg-gray-800 border border-gray-700 text-gray-100 sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-lg font-semibold text-red-500 flex items-center gap-2">
|
||||
<Trash2 className="w-5 h-5" />
|
||||
{t("Diqqat! O'chirish")}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-gray-300 mt-2">
|
||||
{t("Siz rostdan ham ushbu so'rovni o'chirmoqchimisiz?")}
|
||||
</p>
|
||||
<DialogFooter className="flex justify-end gap-2 mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-white"
|
||||
onClick={() => setSelectedToDelete(null)}
|
||||
>
|
||||
{t("Bekor qilish")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
className="bg-red-600 hover:bg-red-700 text-white"
|
||||
onClick={() =>
|
||||
selectedToDelete && deleteMutation.mutate(selectedToDelete.id)
|
||||
}
|
||||
>
|
||||
{t("O'chirish")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user