381 lines
13 KiB
TypeScript
381 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
addedPopularTours,
|
|
deleteTours,
|
|
getAllTours,
|
|
} from "@/pages/tours/lib/api";
|
|
import formatPrice from "@/shared/lib/formatPrice";
|
|
import { Button } from "@/shared/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/shared/ui/dialog";
|
|
import { Switch } from "@/shared/ui/switch";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/shared/ui/table";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
AlertTriangle,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Edit,
|
|
Loader2,
|
|
Plane,
|
|
PlusCircle,
|
|
Trash2,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
|
|
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);
|
|
const [showPopularDialog, setShowPopularDialog] = useState(false);
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data, isLoading, isError, refetch } = useQuery({
|
|
queryKey: ["all_tours", page],
|
|
queryFn: () => getAllTours({ page: page, page_size: 10 }),
|
|
});
|
|
|
|
const { data: popularTour } = useQuery({
|
|
queryKey: ["popular_tours"],
|
|
queryFn: () =>
|
|
getAllTours({ page: 1, page_size: 10, featured_tickets: true }),
|
|
});
|
|
|
|
const { mutate, isPending } = useMutation({
|
|
mutationFn: (id: number) => deleteTours({ id }),
|
|
onSuccess: () => {
|
|
queryClient.refetchQueries({ queryKey: ["all_tours"] });
|
|
setDeleteId(null);
|
|
},
|
|
onError: () => {
|
|
toast.error(t("Xatolik yuz berdi"), {
|
|
richColors: true,
|
|
position: "top-center",
|
|
});
|
|
},
|
|
});
|
|
|
|
const { mutate: popular } = useMutation({
|
|
mutationFn: ({ id, value }: { id: number; value: number }) =>
|
|
addedPopularTours({ id, value }),
|
|
onSuccess: () => {
|
|
queryClient.refetchQueries({ queryKey: ["all_tours"] });
|
|
queryClient.refetchQueries({ queryKey: ["popular_tours"] });
|
|
},
|
|
onError: () => {
|
|
if (popularTour?.data.data.results.length === 5) {
|
|
setShowPopularDialog(true);
|
|
} else {
|
|
toast.error(t("Xatolik yuz berdi"), {
|
|
richColors: true,
|
|
position: "top-center",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
const confirmDelete = (id: number) => {
|
|
mutate(id);
|
|
};
|
|
|
|
const removeFromPopular = (id: number) => {
|
|
popular({ id, value: 0 });
|
|
setShowPopularDialog(false);
|
|
};
|
|
|
|
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-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"
|
|
disabled={user !== "tour_admin"}
|
|
>
|
|
<PlusCircle className="w-5 h-5 mr-2" /> {t("Yangi tur qo'shish")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="rounded-xl border overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-muted/50">
|
|
<TableHead className="w-[50px] text-center">#</TableHead>
|
|
<TableHead className="min-w-[150px]">{t("Manzil")}</TableHead>
|
|
<TableHead className="min-w-[120px]">
|
|
{t("Davomiyligi")}
|
|
</TableHead>
|
|
<TableHead className="min-w-[180px]">{t("Mehmonxona")}</TableHead>
|
|
<TableHead className="min-w-[200px]">{t("Narxi")}</TableHead>
|
|
{user && user === "moderator" && (
|
|
<TableHead className="min-w-[120px] text-center">
|
|
{t("Popular")}
|
|
</TableHead>
|
|
)}
|
|
<TableHead className="min-w-[150px] text-center">
|
|
{t("Операции")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data?.data.data.results.map((tour, idx) => (
|
|
<TableRow key={tour.id}>
|
|
<TableCell className="font-medium text-center">
|
|
{(page - 1) * 6 + idx + 1}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2 font-semibold">
|
|
<Plane className="w-4 h-4 text-primary" />
|
|
{tour.destination}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-primary font-medium">
|
|
{tour.duration_days} {t("kun")}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{tour.hotel_name}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{tour.hotel_rating} {t("yulduzli mehmonxona")}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="font-bold text-base text-green-600">
|
|
{formatPrice(tour.price, true)}
|
|
</span>
|
|
</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">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => navigate(`/tours/${tour.id}/edit`)}
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="destructive"
|
|
size="icon"
|
|
onClick={() => setDeleteId(tour.id)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onClick={() => navigate(`/tours/${tour.id}`)}
|
|
>
|
|
{t("Batafsil")}
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{/* Delete Tour Dialog */}
|
|
<Dialog open={deleteId !== null} onOpenChange={() => setDeleteId(null)}>
|
|
<DialogContent className="sm:max-w-[425px] bg-gray-900">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl">
|
|
{t("Turni o'chirishni tasdiqlang")}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<p className="text-muted-foreground">
|
|
{t(
|
|
"Haqiqatan ham bu turni o'chirib tashlamoqchimisiz? Bu amalni ortga qaytarib bo'lmaydi.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
<DialogFooter className="gap-4 flex">
|
|
<Button variant="outline" onClick={() => setDeleteId(null)}>
|
|
{t("Bekor qilish")}
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => confirmDelete(deleteId!)}
|
|
>
|
|
{isPending ? (
|
|
<Loader2 className="animate-spin" />
|
|
) : (
|
|
<>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
{t("O'chirish")}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Popular Tours Dialog */}
|
|
<Dialog open={showPopularDialog} onOpenChange={setShowPopularDialog}>
|
|
<DialogContent className="sm:max-w-[600px] bg-gray-900">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl">
|
|
{t("Popular turlar (5/5)")}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<p className="text-muted-foreground mb-4">
|
|
{t(
|
|
"Popular turlar ro'yxati to'lgan. Yangi tur qo'shish uchun biror turni o'chiring.",
|
|
)}
|
|
</p>
|
|
<div className="space-y-2 max-h-[400px] overflow-y-auto">
|
|
{popularTour?.data.data.results.map((tour) => (
|
|
<div
|
|
key={tour.id}
|
|
className="flex items-center justify-between p-3 border border-slate-700 rounded-lg hover:bg-slate-800/50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<Plane className="w-4 h-4 text-primary flex-shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-semibold truncate">
|
|
{tour.destination}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{tour.duration_days} kun • {tour.hotel_name}
|
|
</p>
|
|
</div>
|
|
<span className="text-green-600 font-bold text-sm flex-shrink-0">
|
|
{formatPrice(tour.price, true)}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => removeFromPopular(tour.id)}
|
|
className="ml-2 text-red-500 hover:text-red-600 hover:bg-red-500/10"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowPopularDialog(false)}
|
|
>
|
|
{t("Yopish")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<div className="flex justify-end mt-10 gap-3">
|
|
<button
|
|
disabled={page === 1}
|
|
onClick={() => setPage((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"
|
|
>
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</button>
|
|
{[...Array(data?.data.data.total_pages)].map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setPage(i + 1)}
|
|
className={`px-4 py-2 rounded-lg border transition-all font-medium ${
|
|
page === 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={page === data?.data.data.total_pages}
|
|
onClick={() =>
|
|
setPage((p) =>
|
|
Math.min(p + 1, data ? data.data.data.total_pages : 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"
|
|
>
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Tours;
|