api ulandi

src/pages/tours/ui/Tours.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { deleteTours, getAllTours } from "@/pages/tours/lib/api";
+import {
+  addedPopularTours,
+  deleteTours,
+  getAllTours,
+} from "@/pages/tours/lib/api";
 import formatPrice from "@/shared/lib/formatPrice";
 import { Button } from "@/shared/ui/button";
 import {
@@ -10,6 +14,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
+import { Switch } from "@/shared/ui/switch";
 import {
   Table,
   TableBody,
@@ -28,15 +33,18 @@ import {
   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";
 
 const Tours = () => {
   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();
 
@@ -45,18 +53,54 @@ const Tours = () => {
     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 } = 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">
@@ -105,6 +149,9 @@ 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>
               <TableHead className="min-w-[150px] text-center">
                 {t("Операции")}
               </TableHead>
@@ -139,6 +186,18 @@ const Tours = () => {
                   </span>
                 </TableCell>
 
+                <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
@@ -172,6 +231,7 @@ const Tours = () => {
         </Table>
       </div>
 
+      {/* Delete Tour Dialog */}
       <Dialog open={deleteId !== null} onOpenChange={() => setDeleteId(null)}>
         <DialogContent className="sm:max-w-[425px] bg-gray-900">
           <DialogHeader>
@@ -201,6 +261,63 @@ const Tours = () => {
         </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}