npm update pnpm

.npmrc

@@ -0,0 +1,6 @@
+# pnpm configuration
+
+audit=true
+ignore-scripts=false
+strict-ssl=true
+minimum-release-age=262974

package.json

@@ -11,6 +11,7 @@
     "prettier": "prettier src --write",
     "prepare": "husky"
   },
+  "packageManager": "pnpm@9.0.0",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
@@ -40,7 +41,7 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.18",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.24",
+    "framer-motion": "^12.23.25",
     "i18next": "^25.5.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "js-cookie": "^3.0.5",

src/pages/agencies/ui/Agencies.tsx

@@ -26,22 +26,29 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 
 export default function TourAgenciesPage() {
   const { t } = useTranslation();
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
-  const itemsPerPage = 4;
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const itemsPerPage = 6;
   const navigate = useNavigate();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
+  const updatePage = (newPage: number) => {
+    setCurrentPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const { data, refetch, isLoading, isError } = useQuery({
     queryKey: ["all_agency", currentPage],
     queryFn: () => getAllAgency({ page: currentPage, page_size: itemsPerPage }),
   });
 
-  const { mutate } = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn: ({ id }: { id: number }) => {
       return deleteAgency({ id });
     },
@@ -293,7 +300,11 @@ export default function TourAgenciesPage() {
                           onClick={() => handleDelete(agency.id)}
                           className="bg-red-600 hover:bg-red-700 text-white"
                         >
-                          {t("O'chirish")}
+                          {isPending ? (
+                            <Loader2 className="animate-spin" />
+                          ) : (
+                            t("O'chirish")
+                          )}
                         </Button>
                       </DialogFooter>
                     </DialogContent>
@@ -305,37 +316,40 @@ export default function TourAgenciesPage() {
         </div>
 
         {/* Pagination */}
-        <div className="flex justify-end gap-2">
+        <div className="flex justify-end mt-10 gap-3">
           <button
             disabled={currentPage === 1}
-            onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+            onClick={() => updatePage(Math.max(currentPage - 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"
+            className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
           >
             <ChevronLeft className="w-5 h-5" />
           </button>
 
-          {[...Array(data?.data.data.total_pages)].map((_, i) => (
+          {[...Array(data?.data.data.total_pages)].map((_, i) => {
+            const pageNum = i + 1;
+            return (
               <button
                 key={i}
-              onClick={() => setCurrentPage(i + 1)}
+                onClick={() => updatePage(pageNum)}
-              className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+                className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-                currentPage === i + 1
+                  currentPage === pageNum
-                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                    ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                    : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
                 }`}
               >
-              {i + 1}
+                {pageNum}
               </button>
-          ))}
+            );
+          })}
 
           <button
             disabled={currentPage === data?.data.data.total_pages}
             onClick={() =>
-              setCurrentPage((p) =>
+              updatePage(
-                Math.min(p + 1, data ? data?.data.data.total_pages : 0),
+                Math.min(currentPage + 1, 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 hover:border-slate-500"
+            className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
           >
             <ChevronRight className="w-5 h-5" />
           </button>

src/pages/agencies/ui/AgencyDetail.tsx

@@ -8,6 +8,7 @@ import {
   updateAgencyStatus,
 } from "@/pages/agencies/lib/api";
 import { AgencyUsersSection } from "@/pages/agencies/ui/AgencyUsersSection";
+import { createTourAdmin } from "@/pages/support/lib/api";
 import formatPhone from "@/shared/lib/formatPhone";
 import formatPrice from "@/shared/lib/formatPrice";
 import { Badge } from "@/shared/ui/badge";
@@ -50,6 +51,7 @@ export default function AgencyDetailPage() {
   const router = useNavigate();
   const { t } = useTranslation();
   const [edit, setEdit] = useState<boolean>(false);
+  const [added, setAdded] = useState<boolean>(false);
   const queryClient = useQueryClient();
   const [openUser, setOpenUser] = useState<boolean>(false);
   const [user, setUser] = useState<{
@@ -105,6 +107,22 @@ export default function AgencyDetailPage() {
     },
   });
 
+  const createAdmin = useMutation({
+    mutationFn: (id: number) => createTourAdmin(id),
+    onSuccess: (res) => {
+      queryClient.refetchQueries({ queryKey: ["agency_user"] });
+      setOpenUser(true);
+      setUser(res.data);
+      setAdded(false);
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
   const deleteUserMutation = useMutation({
     mutationFn: (userId: number) => agencyUserDelete(userId),
     onSuccess: () => {
@@ -126,6 +144,10 @@ export default function AgencyDetailPage() {
     updateUserMutation.mutate(user);
   };
 
+  const handleAddeUser = () => {
+    createAdmin.mutate(Number(params.id!));
+  };
+
   const handleDeleteUser = (userId: number) => {
     deleteUserMutation.mutate(userId);
   };
@@ -409,8 +431,14 @@ export default function AgencyDetailPage() {
         {agency?.data.data && (
           <div className="mb-8">
             <AgencyUsersSection
+              agencyId={Number(params.id)}
+              added={added}
+              setAdded={setAdded}
               edit={edit}
+              handleAddeUser={handleAddeUser}
               setEdit={setEdit}
+              isPending={updateUserMutation.isPending}
+              createAdminPending={createAdmin.isPending}
               users={
                 Array.isArray(agency?.data.data)
                   ? agency?.data.data
@@ -419,6 +447,7 @@ export default function AgencyDetailPage() {
               onEdit={handleEditUser}
               onDelete={handleDeleteUser}
               isLoading={isLoadingUsers}
+              deletePending={deleteUserMutation.isPending}
             />
           </div>
         )}

src/pages/agencies/ui/AgencyUsersSection.tsx

@@ -13,7 +13,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/shared/ui/dialog";
-import { Pencil, Phone, Shield, Trash2, User } from "lucide-react";
+import {
+  Loader2,
+  Pencil,
+  Phone,
+  Shield,
+  Trash2,
+  User,
+  UserPlus,
+} from "lucide-react";
 import { type Dispatch, type SetStateAction } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -27,22 +35,36 @@ interface AgencyUser {
 
 interface AgencyUsersProps {
   users: AgencyUser[];
+  agencyId: number;
   onEdit: (userId: number) => void;
+  handleAddeUser: () => void;
   onDelete: (userId: number) => void;
   isLoading?: boolean;
+  isPending: boolean;
+  createAdminPending: boolean;
   edit: boolean;
+  added: boolean;
+  deletePending: boolean;
   setEdit: Dispatch<SetStateAction<boolean>>;
+  setAdded: Dispatch<SetStateAction<boolean>>;
 }
 
 export function AgencyUsersSection({
   users,
   onEdit,
+  setAdded,
+  added,
   edit,
   setEdit,
+  handleAddeUser,
+  createAdminPending,
   onDelete,
   isLoading = false,
+  deletePending,
+  isPending = 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",
@@ -75,27 +97,10 @@ export function AgencyUsersSection({
     );
   }
 
-  if (!users || users.length === 0) {
   return (
     <Card className="border border-gray-700 shadow-lg bg-gray-800">
-        <CardHeader>
+      <CardHeader className="flex justify-between items-center">
-          <CardTitle className="text-2xl text-white flex items-center gap-2">
+        <div>
-            <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")}
@@ -103,8 +108,54 @@ export function AgencyUsersSection({
           <p className="text-gray-400">
             {t("Agentlik bilan bog'langan foydalanuvchilar ro'yxati")}
           </p>
+        </div>
+
+        <Dialog open={added} onOpenChange={setAdded}>
+          <DialogTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-blue-400 hover:text-blue-300"
+            >
+              <UserPlus className="w-4 h-4" onClick={() => setAdded(true)} />
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="bg-gray-800 border-gray-700 text-white">
+            <DialogHeader>
+              <DialogTitle>{t("Foydalanuvchi qo'shish")}</DialogTitle>
+              <DialogDescription className="text-gray-400">
+                {t("Siz agentlikga yangi foydalanuvchi qo'shmoqchimisiz")}
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter>
+              <Button
+                className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-white"
+                onClick={() => setAdded(false)}
+              >
+                {t("Bekor qilish")}
+              </Button>
+              <Button
+                onClick={() => handleAddeUser()}
+                className="bg-blue-600 hover:bg-blue-700 text-white"
+              >
+                {createAdminPending ? (
+                  <Loader2 className="animate-spin" />
+                ) : (
+                  t("Qo'shish")
+                )}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </CardHeader>
+
       <CardContent>
+        {users.length === 0 ? (
+          <div className="text-center text-gray-400 py-8">
+            {t("Hozircha foydalanuvchilar yo'q")}
+          </div>
+        ) : (
           <div className="space-y-3">
             {users.map((user) => (
               <div
@@ -138,9 +189,8 @@ export function AgencyUsersSection({
                     </div>
                   </div>
 
-                {/* Actions */}
                   <div className="flex items-center gap-2">
-                  {/* Edit Confirm Dialog */}
+                    {/* ✏️ Edit */}
                     <Dialog open={edit} onOpenChange={setEdit}>
                       <DialogTrigger asChild>
                         <Button
@@ -171,7 +221,7 @@ export function AgencyUsersSection({
                         <DialogFooter>
                           <Button
                             className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-white"
-                          onClick={() => setEdit(true)}
+                            onClick={() => setEdit(false)}
                           >
                             {t("Bekor qilish")}
                           </Button>
@@ -179,13 +229,17 @@ export function AgencyUsersSection({
                             onClick={() => onEdit(user.id)}
                             className="bg-blue-600 hover:bg-blue-700 text-white"
                           >
-                          {t("Tahrirlash")}
+                            {isPending ? (
+                              <Loader2 className="animate-spin" />
+                            ) : (
+                              t("Tahrirlash")
+                            )}
                           </Button>
                         </DialogFooter>
                       </DialogContent>
                     </Dialog>
 
-                  {/* Delete Confirm Dialog */}
+                    {/* 🗑 Delete */}
                     <Dialog>
                       <DialogTrigger asChild>
                         <Button
@@ -219,7 +273,11 @@ export function AgencyUsersSection({
                             onClick={() => onDelete(user.id)}
                             className="bg-red-600 hover:bg-red-700 text-white"
                           >
-                          {t("O'chirish")}
+                            {deletePending ? (
+                              <Loader2 className="animate-spin" />
+                            ) : (
+                              t("O'chirish")
+                            )}
                           </Button>
                         </DialogFooter>
                       </DialogContent>
@@ -229,6 +287,7 @@ export function AgencyUsersSection({
               </div>
             ))}
           </div>
+        )}
       </CardContent>
     </Card>
   );

src/pages/agencies/ui/EditAgecy.tsx

@@ -2,6 +2,7 @@
 
 import { getDetailAgency, updateAgencyStatus } from "@/pages/agencies/lib/api";
 import formatPhone from "@/shared/lib/formatPhone";
+import onlyNumber from "@/shared/lib/onlyNumber";
 import { Button } from "@/shared/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
 import {
@@ -40,7 +41,7 @@ const formSchema = z.object({
   addres: z.string().min(1, "Manzil kiritish shart"),
   email: z.string().email("Email noto‘g‘ri"),
   phone: z.string().min(3, "Telefon raqami noto‘g‘ri"),
-  web_site: z.string().url("URL noto‘g‘ri"),
+  web_site: z.string().min(1, "URL noto‘g‘ri"),
 });
 
 type FormData = z.infer<typeof formSchema>;
@@ -63,12 +64,12 @@ const EditAgency = () => {
   });
   const queryClient = useQueryClient();
 
-  const { data, isPending } = useQuery({
+  const { data } = useQuery({
     queryKey: ["detail_agency", params.id],
     queryFn: () => getDetailAgency({ id: Number(params.id) }),
   });
 
-  const { mutate } = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn: (body: {
       status: "pending" | "approved" | "cancelled";
       custom_id?: string;
@@ -106,7 +107,7 @@ const EditAgency = () => {
       form.setValue("name", agency.name);
       form.setValue("addres", agency.addres);
       form.setValue("email", agency.email);
-      form.setValue("phone", agency.phone);
+      form.setValue("phone", onlyNumber(agency.phone));
       form.setValue("web_site", agency.web_site);
     }
   }, [data, form]);
@@ -118,7 +119,7 @@ const EditAgency = () => {
       name: values.name,
       addres: values.addres,
       email: values.email,
-      phone: values.phone,
+      phone: onlyNumber(values.phone),
       web_site: values.web_site,
     });
   };

src/pages/employees/ui/Employees.tsx

@@ -25,17 +25,26 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 
 const EmployeesManagement = () => {
   const { t } = useTranslation();
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const queryClient = useQueryClient();
 
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const { data, isLoading } = useQuery({
-    queryKey: ["employees", currentPage],
+    queryKey: ["employees", page],
-    queryFn: () => getAllEmployees({ page: currentPage, page_size: 10 }),
+    queryFn: () => getAllEmployees({ page: page, page_size: 12 }),
     select: (data) => data.data.data,
   });
 
@@ -193,37 +202,38 @@ const EmployeesManagement = () => {
             </div>
 
             {/* Pagination */}
-            <div className="flex justify-end gap-2">
+            <div className="flex justify-end mt-10 gap-3">
               <button
-                disabled={currentPage === 1}
+                disabled={page === 1}
-                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+                onClick={() => updatePage(Math.max(page - 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"
+                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
               >
                 <ChevronLeft className="w-5 h-5" />
               </button>
 
-              {[...Array(data?.total_pages || 0)].map((_, i) => (
+              {[...Array(data?.total_pages)].map((_, i) => {
+                const pageNum = i + 1;
+                return (
                   <button
                     key={i}
-                  onClick={() => setCurrentPage(i + 1)}
+                    onClick={() => updatePage(pageNum)}
-                  className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+                    className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-                    currentPage === i + 1
+                      page === pageNum
-                      ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                        ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                      : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                        : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
                     }`}
                   >
-                  {i + 1}
+                    {pageNum}
                   </button>
-              ))}
+                );
+              })}
 
               <button
-                disabled={currentPage === data?.total_pages}
+                disabled={page === data?.total_pages}
                 onClick={() =>
-                  setCurrentPage((p) =>
+                  updatePage(Math.min(page + 1, data?.total_pages ?? 1))
-                    Math.min(p + 1, 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"
+                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
               >
                 <ChevronRight className="w-5 h-5" />
               </button>

src/pages/faq/ui/Faq.tsx

@@ -54,6 +54,7 @@ import {
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 import z from "zod";
 
@@ -67,7 +68,10 @@ const faqForm = z.object({
 
 const Faq = () => {
   const [activeTab, setActiveTab] = useState<string>("");
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
   const { t } = useTranslation();
   const [openModal, setOpenModal] = useState(false);
   const [editFaq, setEditFaq] = useState<number | null>(null);
@@ -75,6 +79,11 @@ const Faq = () => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const loaderRef = useRef<HTMLDivElement>(null);
 
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   // Infinite scroll uchun useInfiniteQuery
   const {
     data: categoryData,
@@ -96,20 +105,16 @@ const Faq = () => {
     initialPageParam: 1,
   });
 
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [activeTab]);
-
   const category = useMemo(() => {
     return categoryData?.pages.flatMap((page) => page.data.data.results) ?? [];
   }, [categoryData]);
 
   const { data: faq } = useQuery({
-    queryKey: ["all_faq", activeTab, currentPage],
+    queryKey: ["all_faq", activeTab, page],
     queryFn: () => {
       return getAllFaq({
-        page: currentPage,
+        page,
-        page_size: 10,
+        page_size: 1,
         category: Number(activeTab),
       });
     },
@@ -301,7 +306,14 @@ const Faq = () => {
       </div>
 
       {/* Tabs */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => {
+          setActiveTab(value);
+          updatePage(1);
+        }}
+        className="w-full"
+      >
         <div className="relative">
           <TabsList
             ref={scrollRef}
@@ -390,35 +402,36 @@ const Faq = () => {
         ))}
       </Tabs>
 
-      <div className="flex justify-end gap-2">
+      <div className="flex justify-end mt-10 gap-3">
         <button
-          disabled={currentPage === 1}
+          disabled={page === 1}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+          onClick={() => updatePage(Math.max(page - 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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronLeft className="w-5 h-5" />
         </button>
 
-        {[...Array(faq?.total_pages)].map((_, i) => (
+        {[...Array(faq?.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
             <button
               key={i}
-            onClick={() => setCurrentPage(i + 1)}
+              onClick={() => updatePage(pageNum)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+              className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-              currentPage === i + 1
+                page === pageNum
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
               }`}
             >
-            {i + 1}
+              {pageNum}
             </button>
-        ))}
+          );
+        })}
 
         <button
-          disabled={currentPage === faq?.total_pages}
+          disabled={page === faq?.total_pages}
-          onClick={() =>
+          onClick={() => updatePage(Math.min(page + 1, faq?.total_pages ?? 1))}
-            setCurrentPage((p) => Math.min(p + 1, faq ? faq.total_pages : 0))
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
-          }
-          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>

src/pages/faq/ui/FaqCategory.tsx

@@ -45,6 +45,7 @@ import {
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 import z from "zod";
 
@@ -55,13 +56,22 @@ const categoryFormSchema = z.object({
 
 const FaqCategory = () => {
   const [deleteId, setDeleteId] = useState<number | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
   const [categories, setCategories] = useState<number | null>(null);
   const queryClient = useQueryClient();
+
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const { data: category } = useQuery({
-    queryKey: ["all_faqcategory", currentPage],
+    queryKey: ["all_faqcategory", page],
     queryFn: () => {
-      return getAllFaqCategory({ page: currentPage, page_size: 10 });
+      return getAllFaqCategory({ page: page, page_size: 20 });
     },
     select(data) {
       return data.data.data;
@@ -255,37 +265,38 @@ const FaqCategory = () => {
         </Table>
       </div>
 
-      <div className="flex justify-end gap-2">
+      <div className="flex justify-end mt-10 gap-3">
         <button
-          disabled={currentPage === 1}
+          disabled={page === 1}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+          onClick={() => updatePage(Math.max(page - 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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronLeft className="w-5 h-5" />
         </button>
 
-        {[...Array(category?.total_pages)].map((_, i) => (
+        {[...Array(category?.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
             <button
               key={i}
-            onClick={() => setCurrentPage(i + 1)}
+              onClick={() => updatePage(pageNum)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+              className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-              currentPage === i + 1
+                page === pageNum
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
               }`}
             >
-            {i + 1}
+              {pageNum}
             </button>
-        ))}
+          );
+        })}
 
         <button
-          disabled={currentPage === category?.total_pages}
+          disabled={page === category?.total_pages}
           onClick={() =>
-            setCurrentPage((p) =>
+            updatePage(Math.min(page + 1, category?.total_pages ?? 1))
-              Math.min(p + 1, category ? category.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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronRight className="w-5 h-5" />
         </button>

src/pages/finance/ui/Finance.tsx

@@ -40,28 +40,23 @@ export default function FinancePage({ user }: { user: Role }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const tabParam = searchParams.get("tab") as "bookings" | "agencies" | null;
   const pageParam = Number(searchParams.get("page")) || 1;
+  const filterParam = searchParams.get("filter") ?? "";
   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<
+  const [filterStatus, setFilterStatus] = useState(filterParam);
-    | ""
-    | "pending_payment"
-    | "pending_confirmation"
-    | "confirmed"
-    | "completed"
-    | "cancelled"
-  >("");
 
   useEffect(() => {
     setSearchParams({
       tab,
       page: String(currentPage),
       page_agency: String(currentPageAgency),
+      filter: String(filterStatus),
     });
-  }, [tab, currentPage, currentPageAgency, setSearchParams]);
+  }, [tab, currentPage, currentPageAgency, setSearchParams, filterStatus]);
 
   useEffect(() => {
     if (tabParam && tabParam !== tab) {
@@ -70,17 +65,24 @@ export default function FinancePage({ user }: { user: Role }) {
   }, [tabParam]);
 
   useEffect(() => {
-    setCurrentPage(1);
+    if (filterParam === "null") {
-    setCurrentPageAgency(1);
+      setFilterStatus("");
-  }, [filterStatus, tab]);
+    }
+  }, [filterParam]);
 
   const { data, isLoading, isError, refetch } = useQuery({
     queryKey: ["list_order_user", currentPage, filterStatus],
     queryFn: () =>
       getAllOrder({
         page: currentPage,
-        page_size: 10,
+        page_size: 12,
-        order_status: filterStatus,
+        order_status: filterStatus as
+          | ""
+          | "pending_payment"
+          | "pending_confirmation"
+          | "confirmed"
+          | "completed"
+          | "cancelled",
       }),
   });
 
@@ -94,7 +96,7 @@ export default function FinancePage({ user }: { user: Role }) {
     queryFn: () =>
       getAllOrderAgecy({
         page: currentPageAgency,
-        page_size: 10,
+        page_size: 12,
       }),
   });
 
@@ -277,7 +279,7 @@ export default function FinancePage({ user }: { user: Role }) {
                       ? "bg-blue-600 text-white shadow-md"
                       : "bg-gray-800 text-gray-300 hover:bg-gray-700"
                   }`}
-                  onClick={() =>
+                  onClick={() => {
                     setFilterStatus(
                       s as
                         | ""
@@ -286,8 +288,9 @@ export default function FinancePage({ user }: { user: Role }) {
                         | "confirmed"
                         | "completed"
                         | "cancelled",
-                    )
+                    );
-                  }
+                    setCurrentPage(1);
+                  }}
                 >
                   {s === ""
                     ? t("Barcha bandlovlar")

src/pages/news/lib/form.ts

@@ -37,6 +37,7 @@ export const newsPostForm = z.object({
   sections: z
     .array(
       z.object({
+        id: z.number().optional(),
         image: z.union([z.instanceof(File), z.string()]).optional(),
         text: z.string().optional(),
         text_ru: z.string().optional(),

src/pages/news/lib/type.ts

@@ -48,6 +48,7 @@ export interface NewsAll {
         name_ru: string;
       }[];
       post_images: {
+        id: number;
         image: string;
         text: string;
         text_ru: string;
@@ -109,6 +110,7 @@ export interface NewsDetail {
     ];
     post_images: [
       {
+        id: number;
         image: string;
         text: string;
         text_ru: string;

src/pages/news/ui/News.tsx

@@ -26,22 +26,31 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 
 const News = () => {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
   const { t } = useTranslation();
   const [deleteId, setDeleteId] = useState<number | null>(null);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const {
     data: allNews,
     isLoading,
     isError,
   } = useQuery({
-    queryKey: ["all_news", currentPage],
+    queryKey: ["all_news", page],
-    queryFn: () => getAllNews({ page: currentPage, page_size: 10 }),
+    queryFn: () => getAllNews({ page, page_size: 12 }),
   });
 
   const { mutate: deleteMutate, isPending } = useMutation({
@@ -303,37 +312,38 @@ const News = () => {
       </Dialog>
 
       {/* Pagination */}
-      <div className="flex justify-end gap-2 w-[90%] mx-auto mt-8">
+      <div className="flex justify-end mt-10 gap-3">
         <button
-          disabled={currentPage === 1}
+          disabled={page === 1}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+          onClick={() => updatePage(Math.max(page - 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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronLeft className="w-5 h-5" />
         </button>
 
-        {[...Array(allNews?.data.data.total_pages)].map((_, i) => (
+        {[...Array(allNews?.data.data.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
             <button
               key={i}
-            onClick={() => setCurrentPage(i + 1)}
+              onClick={() => updatePage(pageNum)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+              className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-              currentPage === i + 1
+                page === pageNum
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
               }`}
             >
-            {i + 1}
+              {pageNum}
             </button>
-        ))}
+          );
+        })}
 
         <button
-          disabled={currentPage === allNews?.data.data.total_pages}
+          disabled={page === allNews?.data.data.total_pages}
           onClick={() =>
-            setCurrentPage((p) =>
+            updatePage(Math.min(page + 1, allNews?.data.data.total_pages ?? 1))
-              Math.min(p + 1, allNews ? allNews?.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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronRight className="w-5 h-5" />
         </button>

src/pages/news/ui/NewsCategory.tsx

@@ -95,7 +95,7 @@ const NewsCategory = () => {
     setIsDialogOpen(true);
   };
 
-  const { mutate: added } = useMutation({
+  const { mutate: added, isPending } = useMutation({
     mutationFn: (body: { name: string; name_ru: string }) =>
       addNewsCategory(body),
     onSuccess: () => {
@@ -111,7 +111,7 @@ const NewsCategory = () => {
     },
   });
 
-  const { mutate: edit } = useMutation({
+  const { mutate: edit, isPending: editPending } = useMutation({
     mutationFn: ({
       body,
       id,
@@ -349,7 +349,11 @@ const NewsCategory = () => {
                     type="submit"
                     className="bg-blue-600 px-5 py-5 hover:bg-blue-700 text-white mt-4 cursor-pointer"
                   >
-                    {t("Saqlash")}
+                    {isPending || editPending ? (
+                      <Loader2 className="animate-spin" />
+                    ) : (
+                      t("Saqlash")
+                    )}
                   </Button>
                 </div>
               </form>

src/pages/news/ui/StepTwo.tsx

@@ -16,7 +16,7 @@ import { Label } from "@/shared/ui/label";
 import { Textarea } from "@/shared/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ImagePlus, PlusCircle, Trash2 } from "lucide-react";
+import { ImagePlus, Loader2, PlusCircle, Trash2 } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -45,6 +45,7 @@ interface Data {
     name_uz: string;
   }>;
   post_images: Array<{
+    id: number;
     image: string;
     text: string;
     text_ru: string;
@@ -65,6 +66,7 @@ const StepTwo = ({
   const navigate = useNavigate();
   const { stepOneData, resetStepOneData } = useNewsStore();
   const queryClient = useQueryClient();
+  const deletedSections = useRef<number[]>([]);
 
   const form = useForm<NewsPostFormType>({
     resolver: zodResolver(newsPostForm),
@@ -79,13 +81,6 @@ const StepTwo = ({
 
   useEffect(() => {
     if (detail && !hasReset.current) {
-      const mappedSections =
-        detail.post_images?.map((img) => ({
-          image: img.image,
-          text: img.text_uz,
-          text_ru: img.text_ru,
-        })) ?? [];
-
       const mappedTags =
         detail.post_tags?.map((t) => ({
           name: t.name_uz,
@@ -99,15 +94,29 @@ const StepTwo = ({
         post_tags:
           mappedTags.length > 0 ? mappedTags : [{ name: "", name_ru: "" }],
         sections:
-          mappedSections.length > 0
+          detail.post_images?.map((img) => ({
-            ? mappedSections
+            id: img.id,
-            : [{ image: "", text: "", text_ru: "" }],
+            image: img.image,
+            text: img.text_uz,
+            text_ru: img.text_ru,
+          })) ?? [],
       });
 
       hasReset.current = true;
     }
   }, [detail, form]);
 
+  const handleRemoveSection = (index: number) => {
+    const section = form.getValues(`sections.${index}`);
+
+    if (section?.id) {
+      deletedSections.current.push(section.id);
+    }
+
+    // Formdan o'chiramiz
+    removeSection(index);
+  };
+
   const {
     fields: sectionFields,
     append: appendSection,
@@ -134,7 +143,7 @@ const StepTwo = ({
     if (file) form.setValue(`sections.${index}.image`, file);
   };
 
-  const { mutate: added } = useMutation({
+  const { mutate: added, isPending } = useMutation({
     mutationFn: (body: FormData) => addNews(body),
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ["all_news"] });
@@ -150,7 +159,7 @@ const StepTwo = ({
     },
   });
 
-  const { mutate: update } = useMutation({
+  const { mutate: update, isPending: updatePending } = useMutation({
     mutationFn: ({ body, id }: { id: number; body: FormData }) =>
       updateNews({ id, body }),
     onSuccess: () => {
@@ -172,8 +181,8 @@ const StepTwo = ({
 
     formData.append("title", stepOneData.title);
     formData.append("title_ru", stepOneData.title_ru);
-    formData.append("text", stepOneData.desc);
+    formData.append("text", values.desc);
-    formData.append("text_ru", stepOneData.desc_ru);
+    formData.append("text_ru", values.desc_ru);
     formData.append("is_public", values.is_public === "no" ? "false" : "true");
     formData.append("category", String(stepOneData.category));
 
@@ -181,27 +190,44 @@ const StepTwo = ({
       formData.append("image", stepOneData.banner);
     }
 
-    // Sections
     values.sections?.forEach((section, i) => {
-      if (section.image instanceof File)
+      if (section.id) {
-        formData.append(`post_images[${i}]`, section.image);
+        formData.append(`updates[${i}]id`, String(section.id));
-      if (section.text) formData.append(`post_text[${i}]`, section.text);
+
+        if (section.text) formData.append(`updates[${i}]text`, section.text);
+
         if (section.text_ru)
-        formData.append(`post_text_ru[${i}]`, section.text_ru);
+          formData.append(`updates[${i}]text_ru`, section.text_ru);
+
+        if (section.image instanceof File) {
+          formData.append(`updates[${i}]image`, section.image);
+        }
+      } else {
+        if (section.image instanceof File)
+          formData.append(`post_images`, section.image);
+
+        if (section.text) formData.append(`post_text`, section.text);
+
+        if (section.text_ru) formData.append(`post_text_ru`, section.text_ru);
+      }
+    });
+
+    deletedSections.current.forEach((id) => {
+      formData.append(`delete_list`, String(id));
     });
 
-    // Post Tags
     values.post_tags.forEach((tag, i) => {
       formData.append(`post_tags[${i}]name`, tag.name);
       formData.append(`post_tags[${i}]name_ru`, tag.name_ru);
     });
 
-    if (id) update({ body: formData, id: Number(id) });
+    if (id) {
-    else added(formData);
+      update({ body: formData, id: Number(id) });
+    } else {
+      added(formData);
+    }
   };
 
-  console.log(form.formState.errors);
-
   return (
     <Form {...form}>
       <form
@@ -276,7 +302,7 @@ const StepTwo = ({
                 <button
                   type="button"
                   onClick={() => removeTag(i)}
-                  className="text-red-400 hover:text-red-500 mt-1"
+                  className="text-red-400 hover:text-red-500"
                 >
                   <Trash2 className="size-4" />
                 </button>
@@ -305,7 +331,7 @@ const StepTwo = ({
               </p>
               <button
                 type="button"
-                onClick={() => removeSection(index)}
+                onClick={() => handleRemoveSection(index)}
                 className="text-red-400 hover:text-red-500"
               >
                 <Trash2 className="size-4" />
@@ -404,7 +430,11 @@ const StepTwo = ({
             type="submit"
             className="mt-6 px-8 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer"
           >
-            {t("Saqlash")}
+            {isPending || updatePending ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              t("Saqlash")
+            )}
           </Button>
         </div>
       </form>

src/pages/payout-request/ui/PayoutRequest.tsx

@@ -38,6 +38,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 
 export default function WithdrawRequests({
@@ -53,7 +54,16 @@ export default function WithdrawRequests({
     | "user";
 }) {
   const queryClient = useQueryClient();
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
+
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const [statusFilter, setStatusFilter] = useState<
     "pending" | "approved" | "cancelled" | ""
   >("");
@@ -70,11 +80,11 @@ export default function WithdrawRequests({
   const [closeId, setCloseId] = useState<number | null>(null);
 
   const { data, isLoading, isError, refetch } = useQuery({
-    queryKey: ["withdraw-requests", currentPage, statusFilter],
+    queryKey: ["withdraw-requests", page, statusFilter],
     queryFn: () =>
       getPayoutList({
-        page: currentPage,
+        page,
-        page_size: 10,
+        page_size: 20,
         status: statusFilter,
       }),
   });
@@ -178,7 +188,7 @@ export default function WithdrawRequests({
               key={tab.value}
               onClick={() => {
                 setStatusFilter(tab.value);
-                setCurrentPage(1);
+                updatePage(1);
               }}
               className={`rounded-xl px-4 py-2 font-medium transition-all ${
                 statusFilter === tab.value
@@ -360,37 +370,38 @@ export default function WithdrawRequests({
       </Card>
 
       {/* 🔹 PAGINATION */}
-      <div className="flex justify-end gap-2 mt-5">
+      <div className="flex justify-end mt-10 gap-3">
         <button
-          disabled={currentPage === 1}
+          disabled={page === 1}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+          onClick={() => updatePage(Math.max(page - 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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronLeft className="w-5 h-5" />
         </button>
 
-        {[...Array(data?.data.data.total_pages)].map((_, i) => (
+        {[...Array(data?.data.data.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
             <button
               key={i}
-            onClick={() => setCurrentPage(i + 1)}
+              onClick={() => updatePage(pageNum)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+              className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-              currentPage === i + 1
+                page === pageNum
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
               }`}
             >
-            {i + 1}
+              {pageNum}
             </button>
-        ))}
+          );
+        })}
 
         <button
-          disabled={currentPage === data?.data.data.total_pages}
+          disabled={page === data?.data.data.total_pages}
           onClick={() =>
-            setCurrentPage((p) =>
+            updatePage(Math.min(page + 1, data?.data.data.total_pages ?? 1))
-              Math.min(p + 1, data ? data?.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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronRight className="w-5 h-5" />
         </button>

src/pages/site-banner/ui/Banner.tsx

@@ -56,6 +56,7 @@ import {
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 import { z } from "zod";
 
@@ -92,15 +93,24 @@ const positions = [
 ];
 
 const SiteBannerAdmin = () => {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
+
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const {
     data: banner,
     isLoading,
     isError,
     refetch,
   } = useQuery({
-    queryKey: ["all_banner", currentPage],
+    queryKey: ["all_banner", page],
-    queryFn: () => getBanner({ page: currentPage, page_size: 10 }),
+    queryFn: () => getBanner({ page, page_size: 20 }),
     select(data) {
       return data.data.data;
     },
@@ -385,37 +395,38 @@ const SiteBannerAdmin = () => {
           </Table>
         </div>
 
-        <div className="flex justify-end gap-2 mt-5">
+        <div className="flex justify-end mt-10 gap-3">
           <button
-            disabled={currentPage === 1}
+            disabled={page === 1}
-            onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+            onClick={() => updatePage(Math.max(page - 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"
+            className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
           >
             <ChevronLeft className="w-5 h-5" />
           </button>
 
-          {[...Array(banner?.total_pages)].map((_, i) => (
+          {[...Array(banner?.total_pages)].map((_, i) => {
+            const pageNum = i + 1;
+            return (
               <button
                 key={i}
-              onClick={() => setCurrentPage(i + 1)}
+                onClick={() => updatePage(pageNum)}
-              className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+                className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-                currentPage === i + 1
+                  page === pageNum
-                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                    ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                    : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
                 }`}
               >
-              {i + 1}
+                {pageNum}
               </button>
-          ))}
+            );
+          })}
 
           <button
-            disabled={currentPage === banner?.total_pages}
+            disabled={page === banner?.total_pages}
             onClick={() =>
-              setCurrentPage((p) =>
+              updatePage(Math.min(page + 1, banner?.total_pages ?? 1))
-                Math.min(p + 1, banner ? banner?.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"
+            className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
           >
             <ChevronRight className="w-5 h-5" />
           </button>

src/pages/support/ui/SupportAgency.tsx

@@ -15,15 +15,25 @@ import {
   DialogTitle,
 } from "@/shared/ui/dialog";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertTriangle, Loader2, XIcon } from "lucide-react";
+import {
+  AlertTriangle,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  XIcon,
+} from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 
 const SupportAgency = () => {
   const [query, setQuery] = useState("");
   const queryClient = useQueryClient();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
   const [openUser, setOpenUser] = useState<boolean>(false);
   const [user, setUser] = useState<{
     status: boolean;
@@ -38,10 +48,15 @@ const SupportAgency = () => {
   const { t } = useTranslation();
   const [selected, setSelected] = useState<GetSupportAgencyRes | null>(null);
 
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const { data, isLoading, isError, refetch } = useQuery({
-    queryKey: ["support_agency"],
+    queryKey: ["support_agency", page],
     queryFn: () =>
-      getSupportAgency({ page: 1, page_size: 10, search: "", status: "" }),
+      getSupportAgency({ page: page, page_size: 12, search: "", status: "" }),
   });
 
   const { mutate: updateTours } = useMutation({
@@ -117,7 +132,10 @@ const SupportAgency = () => {
       <div className="flex gap-3 mb-6">
         <input
           value={query}
-          onChange={(e) => setQuery(e.target.value)}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            updatePage(1);
+          }}
           placeholder={t("Qidiruv (ism, email yoki telefon)...")}
           className="flex-1 p-2 border rounded-md focus:outline-none focus:ring"
         />
@@ -188,6 +206,43 @@ const SupportAgency = () => {
         </div>
       )}
 
+      <div className="flex justify-end mt-10 gap-3">
+        <button
+          disabled={page === 1}
+          onClick={() => updatePage(Math.max(page - 1, 1))}
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+
+        {[...Array(data?.data.data.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
+            <button
+              key={i}
+              onClick={() => updatePage(pageNum)}
+              className={`px-4 py-2 rounded-lg border font-medium transition-all ${
+                page === pageNum
+                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
+                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
+              }`}
+            >
+              {pageNum}
+            </button>
+          );
+        })}
+
+        <button
+          disabled={page === data?.data.data.total_pages}
+          onClick={() =>
+            updatePage(Math.min(page + 1, 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"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+
       {selected && (
         <div
           className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"

src/pages/tours/lib/api.ts

@@ -1,5 +1,7 @@
 import type {
   AllAmenitiesData,
+  CountryDeatil,
+  CountryList,
   CreateTourRes,
   DetailAmenitiesData,
   GetAllTours,
@@ -18,10 +20,13 @@ import type {
   HotelAllFeaturesType,
   HotelFeaturesDetail,
   HotelFeaturesTypeDetail,
+  HotelMealdetail,
+  HotelMealList,
 } from "@/pages/tours/lib/type";
 import httpClient from "@/shared/config/api/httpClient";
 import {
   AMENITIES,
+  COUNTRY,
   GET_TICKET,
   HOTEL,
   HOTEL_BADGE,
@@ -29,7 +34,9 @@ import {
   HOTEL_FEATURES_TYPE,
   HOTEL_TARIF,
   HPTEL_TYPES,
+  MEAL_PLAN,
   POPULAR_TOURS,
+  REGION,
   TOUR_TRANSPORT,
 } from "@/shared/config/api/URLs";
 import type { AxiosResponse } from "axios";
@@ -67,7 +74,7 @@ const getDetailToursId = async ({
 }: {
   id: number;
 }): Promise<AxiosResponse<GetDetailTours>> => {
-  const response = await httpClient.get(`tickets/${id}/`);
+  const response = await httpClient.get(`${GET_TICKET}${id}/`);
   return response;
 };
 
@@ -500,10 +507,124 @@ const amenitiesUpdate = async ({
   return response;
 };
 
+const countryList = async (params: {
+  page: number;
+  page_size: number;
+  name?: string;
+}): Promise<AxiosResponse<CountryList>> => {
+  const res = await httpClient.get(COUNTRY, { params });
+  return res;
+};
+
+const countryDeatil = async (
+  id: number,
+): Promise<AxiosResponse<CountryDeatil>> => {
+  const res = await httpClient.get(`${COUNTRY}${id}/`);
+  return res;
+};
+
+const countryCreate = async (body: { name: string; name_ru: string }) => {
+  const res = await httpClient.post(`${COUNTRY}`, body);
+  return res;
+};
+const countryUpdate = async ({
+  body,
+  id,
+}: {
+  id: number;
+  body: { name: string; name_ru: string };
+}) => {
+  const res = await httpClient.patch(`${COUNTRY}${id}/`, body);
+  return res;
+};
+
+const countryDelete = async (id: number) => {
+  const res = await httpClient.delete(`${COUNTRY}${id}/`);
+  return res;
+};
+
+const regionList = async (params: {
+  page: number;
+  name?: string;
+  country: number;
+  page_size: number;
+}): Promise<AxiosResponse<CountryList>> => {
+  const res = await httpClient.get(REGION, { params });
+  return res;
+};
+
+const regionDeatil = async (
+  id: number,
+): Promise<AxiosResponse<CountryDeatil>> => {
+  const res = await httpClient.get(`${REGION}${id}/`);
+  return res;
+};
+
+const regionCreate = async (body: {
+  name: string;
+  name_ru: string;
+  country: number;
+}) => {
+  const res = await httpClient.post(`${REGION}`, body);
+  return res;
+};
+const regionUpdate = async ({
+  body,
+  id,
+}: {
+  id: number;
+  body: { name: string; name_ru: string; country: number };
+}) => {
+  const res = await httpClient.patch(`${REGION}${id}/`, body);
+  return res;
+};
+
+const hotelMealList = async (params: {
+  page: number;
+  page_size: number;
+  name?: string;
+}): Promise<AxiosResponse<HotelMealList>> => {
+  const res = await httpClient.get(`${MEAL_PLAN}`, { params });
+  return res;
+};
+
+const hotelMealDetail = async (
+  id: number,
+): Promise<AxiosResponse<HotelMealdetail>> => {
+  const res = await httpClient.get(`${MEAL_PLAN}${id}/`);
+  return res;
+};
+
+const hotelMealDelete = async (id: number) => {
+  const res = await httpClient.delete(`${MEAL_PLAN}${id}/`);
+  return res;
+};
+
+const hotelMealCreate = async (body: { name: string; name_ru: string }) => {
+  const res = await httpClient.post(`${MEAL_PLAN}`, body);
+  return res;
+};
+
+const hotelMealUpdate = async ({
+  body,
+  id,
+}: {
+  id: number;
+  body: { name: string; name_ru: string };
+}) => {
+  const res = await httpClient.patch(`${MEAL_PLAN}${id}/`, body);
+  return res;
+};
+
 export {
   addedPopularTours,
   amenitiesCreate,
   amenitiesUpdate,
+  countryCreate,
+  countryDeatil,
+  countryDelete,
+  countryList,
+  countryUpdate,
   createHotel,
   createTours,
   deleteAmenities,
@@ -530,6 +651,11 @@ export {
   hotelFeatureTypeDetail,
   hotelFeatureTypeUpdate,
   hotelFeatureUpdate,
+  hotelMealCreate,
+  hotelMealDelete,
+  hotelMealDetail,
+  hotelMealList,
+  hotelMealUpdate,
   hotelTarfiDetail,
   hotelTarif,
   hotelTarifCreate,
@@ -545,5 +671,9 @@ export {
   hotelTypeDelete,
   hotelTypeDetail,
   hotelTypeUpdate,
+  regionCreate,
+  regionDeatil,
+  regionList,
+  regionUpdate,
   updateTours,
 };

src/pages/tours/lib/column.tsx

@@ -3,8 +3,10 @@
 import type {
   AllAmenitiesDataRes,
   Badge,
+  CountryLisResult,
   HotelFeatures,
   HotelFeaturesType,
+  HotelMealListData,
   Tarif,
   Transport,
   Type,
@@ -364,3 +366,111 @@ export const AmenitiesColumns = (
     },
   },
 ];
+
+export const CountryColumns = (
+  onEdit: (id: number) => void,
+  onDelete: (id: number) => void,
+  t: (key: string) => string,
+  setActiveTab?: Dispatch<SetStateAction<string>>,
+  setFeatureId?: Dispatch<SetStateAction<number | null>>,
+): ColumnDef<CountryLisResult>[] => [
+  {
+    accessorKey: "id",
+    header: "ID",
+    cell: ({ row }) => <span>{row.original.id}</span>,
+  },
+  {
+    accessorKey: "name",
+    header: t("Nomi"),
+    cell: ({ row }) => <span>{row.original.name_uz}</span>,
+  },
+  {
+    accessorKey: "name",
+    header: () => <div>{t("Nomi")} (ru)</div>,
+    cell: ({ row }) => <span>{row.original.name_ru}</span>,
+  },
+  {
+    id: "actions",
+    header: () => <div className="text-right">{t("Harakatlar")}</div>,
+    cell: ({ row }) => {
+      const { t } = useTranslation();
+      return (
+        <div className="flex justify-end gap-2">
+          {setActiveTab && setFeatureId && (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                setActiveTab("region");
+                setFeatureId(row.original.id);
+              }}
+            >
+              {t("Ko'rish")}
+            </Button>
+          )}
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => onEdit(row.original.id)}
+          >
+            {t("Tahrirlash")}
+          </Button>
+          <Button
+            size="sm"
+            variant="destructive"
+            onClick={() => onDelete(row.original.id)}
+          >
+            {t("O'chirish")}
+          </Button>
+        </div>
+      );
+    },
+  },
+];
+
+export const MealColumns = (
+  onEdit: (id: number) => void,
+  onDelete: (id: number) => void,
+  t: (key: string) => string,
+): ColumnDef<HotelMealListData>[] => [
+  {
+    accessorKey: "id",
+    header: "ID",
+    cell: ({ row }) => <span>{row.original.id}</span>,
+  },
+  {
+    accessorKey: "name",
+    header: t("Nomi"),
+    cell: ({ row }) => <span>{row.original.name_uz}</span>,
+  },
+  {
+    accessorKey: "name",
+    header: () => <div>{t("Nomi")} (ru)</div>,
+    cell: ({ row }) => <span>{row.original.name_ru}</span>,
+  },
+  {
+    id: "actions",
+    header: () => <div className="text-right">{t("Harakatlar")}</div>,
+    cell: ({ row }) => {
+      const { t } = useTranslation();
+      return (
+        <div className="flex justify-end gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => onEdit(row.original.id)}
+          >
+            {t("Tahrirlash")}
+          </Button>
+          <Button
+            size="sm"
+            variant="destructive"
+            onClick={() => onDelete(row.original.id)}
+          >
+            {t("O'chirish")}
+          </Button>
+        </div>
+      );
+    },
+  },
+];

src/pages/tours/lib/form.ts

@@ -23,18 +23,18 @@ export const TourformSchema = z.object({
   max_person: z.string().min(1, {
     message: "Kamida 1 yo'lovchi bo'lishi kerak.",
   }),
-  departure: z.string().min(2, {
+  departure: z.string().min(1, {
-    message: "Ketish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
+    message: "Ketish joyi eng kamida 1 ta belgidan iborat bo'lishi kerak.",
   }),
-  departure_ru: z.string().min(2, {
+  // departure_ru: z.string().min(2, {
-    message: "Ketish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
+  //   message: "Ketish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
-  }),
+  // }),
-  destination: z.string().min(2, {
+  destination: z.string().min(1, {
-    message: "Borish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
+    message: "Borish joyi eng kamida 1 ta belgidan iborat bo'lishi kerak.",
-  }),
-  destination_ru: z.string().min(2, {
-    message: "Borish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
   }),
+  // destination_ru: z.string().min(2, {
+  //   message: "Borish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
+  // }),
   location_name: z.string().min(2, {
     message: "Eng kamida 2 ta belgidan iborat bo'lishi kerak.",
   }),

src/pages/tours/lib/type.ts

@@ -11,7 +11,18 @@ export interface GetAllTours {
     current_page: number;
     results: {
       id: number;
-      destination: string;
+      destination:
+        | {
+            id: number;
+            name: string;
+            name_ru: string;
+            country: {
+              id: number;
+              name: string;
+              name_ru: string;
+            };
+          }
+        | string;
       featured_tickets: boolean;
       duration_days: number;
       hotel_name: string;
@@ -35,12 +46,26 @@ export interface GetOneTours {
     price: number;
     min_person: number;
     max_person: number;
-    departure: string;
+    departure: {
-    departure_ru: string;
+      id: number;
-    departure_uz: string;
+      name: string;
-    destination: string;
+      name_ru: string;
-    destination_ru: string;
+      country: {
-    destination_uz: string;
+        id: number;
+        name: string;
+        name_ru: string;
+      };
+    };
+    destination: {
+      id: number;
+      name: string;
+      name_ru: string;
+      country: {
+        id: number;
+        name: string;
+        name_ru: string;
+      };
+    };
     departure_time: string;
     travel_time: string;
     location_name: string;
@@ -151,10 +176,10 @@ export interface CreateTourRes {
     price: number;
     min_person: number;
     max_person: number;
-    departure: string;
+    departure: number;
-    departure_ru: string;
+    // departure_ru: string;
-    destination: string;
+    destination: number;
-    destination_ru: string;
+    // destination_ru: string;
     departure_time: string;
     travel_time: string;
     location_name: string;
@@ -349,6 +374,33 @@ export interface HotelFeaturesTypeDetail {
   };
 }
 
+export interface HotelMealList {
+  status: boolean;
+  data: {
+    links: {
+      previous: null | string;
+      next: null | string;
+    };
+    total_items: number;
+    total_pages: number;
+    page_size: number;
+    current_page: number;
+    results: HotelMealListData[];
+  };
+}
+
+export interface HotelMealdetail {
+  status: boolean;
+  data: HotelMealListData;
+}
+
+export interface HotelMealListData {
+  id: number;
+  name: string;
+  name_ru: string;
+  name_uz: string;
+}
+
 export interface GetDetailTours {
   status: boolean;
   data: {
@@ -363,12 +415,26 @@ export interface GetDetailTours {
     price: number;
     min_person: number;
     max_person: number;
-    departure: string;
+    departure: {
-    departure_ru: string;
+      id: number;
-    departure_uz: string;
+      name: string;
-    destination: string;
+      name_ru: string;
-    destination_ru: string;
+      country: {
-    destination_uz: string;
+        id: number;
+        name: string;
+        name_ru: string;
+      };
+    };
+    destination: {
+      id: number;
+      name: string;
+      name_ru: string;
+      country: {
+        id: number;
+        name: string;
+        name_ru: string;
+      };
+    };
     departure_time: string;
     travel_time: string;
     location_name: string;
@@ -488,12 +554,11 @@ export interface GetHotelRes {
     total_pages: number;
     page_size: number;
     current_page: number;
-    results: [
+    results: {
-      {
       id: number;
       name: string;
       rating: number;
-        meal_plan: string;
+      meal_plan: number;
       ticket: number;
       hotel_type: [
         {
@@ -524,8 +589,7 @@ export interface GetHotelRes {
           };
         },
       ];
-      },
+    }[];
-    ];
   };
 }
 
@@ -562,3 +626,35 @@ export interface DetailAmenitiesData {
     icon_name: string;
   };
 }
+
+export interface CountryList {
+  status: boolean;
+  data: {
+    links: {
+      previous: null | string;
+      next: null | string;
+    };
+    total_items: number;
+    total_pages: number;
+    page_size: number;
+    current_page: number;
+    results: CountryLisResult[];
+  };
+}
+
+export interface CountryLisResult {
+  id: number;
+  name: string;
+  name_ru: string;
+  name_uz: string;
+}
+
+export interface CountryDeatil {
+  status: boolean;
+  data: {
+    id: number;
+    name: string;
+    name_ru: string;
+    name_uz: string;
+  };
+}

src/pages/tours/ui/CountryTable.tsx

@@ -0,0 +1,340 @@
+import {
+  countryCreate,
+  countryDeatil,
+  countryDelete,
+  countryUpdate,
+} from "@/pages/tours/lib/api";
+import { CountryColumns } from "@/pages/tours/lib/column";
+import type { CountryLisResult } from "@/pages/tours/lib/type";
+import { Button } from "@/shared/ui/button";
+import { Dialog, DialogContent } from "@/shared/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/ui/form";
+import { Input } from "@/shared/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import RealPagination from "@/widgets/real-pagination/ui/RealPagination";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Loader, PlusIcon } from "lucide-react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import z from "zod";
+
+const formSchema = z.object({
+  name: z.string().min(1, { message: "Majburiy maydon" }),
+  name_ru: z.string().min(1, { message: "Majburiy maydon" }),
+});
+
+const CountryTable = ({
+  data,
+  page,
+  pageSize,
+  setActiveTab,
+  setFeatureId,
+}: {
+  page: number;
+  pageSize: number;
+  setActiveTab: Dispatch<SetStateAction<string>>;
+  setFeatureId: Dispatch<SetStateAction<number | null>>;
+  data:
+    | {
+        links: {
+          previous: string | null;
+          next: string | null;
+        };
+        total_items: number;
+        total_pages: number;
+        page_size: number;
+        current_page: number;
+        results: CountryLisResult[];
+      }
+    | undefined;
+}) => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState<boolean>(false);
+  const [editId, setEditId] = useState<number | null>(null);
+  const queryClient = useQueryClient();
+  const [types, setTypes] = useState<"edit" | "create">("create");
+
+  const handleEdit = (id: number) => {
+    setTypes("edit");
+    setOpen(true);
+    setEditId(id);
+  };
+
+  const { data: badgeDetail } = useQuery({
+    queryKey: ["detail_country", editId],
+    queryFn: () => countryDeatil(editId!),
+    enabled: !!editId,
+  });
+
+  const { mutate: deleteMutate } = useMutation({
+    mutationFn: (id: number) => countryDelete(id),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["all_country"] });
+      queryClient.refetchQueries({ queryKey: ["detail_country"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const handleDelete = (id: number) => {
+    deleteMutate(id);
+  };
+
+  const columns = CountryColumns(
+    handleEdit,
+    handleDelete,
+    t,
+    setActiveTab,
+    setFeatureId,
+  );
+
+  const { mutate: create, isPending } = useMutation({
+    mutationFn: (body: { name: string; name_ru: string }) =>
+      countryCreate(body),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["all_country"] });
+      queryClient.refetchQueries({ queryKey: ["detail_country"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const { mutate: update, isPending: updatePending } = useMutation({
+    mutationFn: ({
+      body,
+      id,
+    }: {
+      id: number;
+      body: {
+        name: string;
+        name_ru: string;
+      };
+    }) => countryUpdate({ body, id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["all_country"] });
+      queryClient.refetchQueries({ queryKey: ["detail_country"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      name_ru: "",
+    },
+  });
+
+  useEffect(() => {
+    if (badgeDetail) {
+      form.setValue("name", badgeDetail.data.data.name_uz);
+      form.setValue("name_ru", badgeDetail.data.data.name_ru);
+    }
+  }, [editId, badgeDetail]);
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    if (types === "create") {
+      create({
+        name: values.name,
+        name_ru: values.name_ru,
+      });
+    } else if (types === "edit" && editId) {
+      update({
+        id: editId,
+        body: {
+          name: values.name,
+          name_ru: values.name_ru,
+        },
+      });
+    }
+  }
+
+  const table = useReactTable({
+    data: data?.results ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: data?.total_pages ?? 0,
+    state: {
+      pagination: {
+        pageIndex: page - 1,
+        pageSize: pageSize,
+      },
+    },
+  });
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <Button
+          variant="default"
+          onClick={() => {
+            setOpen(true);
+            setTypes("create");
+            form.reset();
+          }}
+        >
+          <PlusIcon className="mr-2" />
+          {t("Qo‘shish")}
+        </Button>
+      </div>
+
+      <div className="border border-gray-700 rounded-md overflow-hidden mt-4">
+        <Table key={data?.current_page}>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center text-gray-400"
+                >
+                  {t("Ma'lumot topilmadi")}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <RealPagination
+        table={table}
+        totalPages={data?.total_pages}
+        namePage="pageCountry"
+        namePageSize="pageSizeCountry"
+      />
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <p className="text-xl">
+            {types === "create" ? t("Saqlash") : t("Tahrirlash")}
+          </p>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-6 p-2"
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Nomi")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t("Nomi")} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="name_ru"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Nomi (ru)")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t("Nomi (ru)")} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end gap-4">
+                <Button
+                  type="button"
+                  onClick={() => setOpen(false)}
+                  className="border-slate-600 text-white hover:bg-gray-600 bg-gray-600"
+                >
+                  {t("Bekor qilish")}
+                </Button>
+                <Button type="submit">
+                  {isPending || updatePending ? (
+                    <Loader className="animate-spin" />
+                  ) : types === "create" ? (
+                    t("Saqlash")
+                  ) : (
+                    t("Tahrirlash")
+                  )}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default CountryTable;

src/pages/tours/ui/CreateEditTour.tsx

@@ -22,6 +22,7 @@ const CreateEditTour = () => {
     select(data) {
       return data.data;
     },
+    enabled: !!id,
   });
 
   return (

src/pages/tours/ui/HotelType.tsx

@@ -0,0 +1,324 @@
+import {
+  hotelTypeCreate,
+  hotelTypeDelete,
+  hotelTypeDetail,
+  hotelTypeUpdate,
+} from "@/pages/tours/lib/api";
+import { TypeColumns } from "@/pages/tours/lib/column";
+import type { Type } from "@/pages/tours/lib/type";
+import { Button } from "@/shared/ui/button";
+import { Dialog, DialogContent } from "@/shared/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/ui/form";
+import { Input } from "@/shared/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import RealPagination from "@/widgets/real-pagination/ui/RealPagination";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Loader, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import z from "zod";
+
+const formSchema = z.object({
+  name: z.string().min(1, { message: "Majburiy maydon" }),
+  name_ru: z.string().min(1, { message: "Majburiy maydon" }),
+});
+
+const HotelType = ({
+  data,
+  page,
+  pageSize,
+}: {
+  page: number;
+  pageSize: number;
+  data:
+    | {
+        links: {
+          previous: string;
+          next: string;
+        };
+        total_items: number;
+        total_pages: number;
+        page_size: number;
+        current_page: number;
+        results: Type[];
+      }
+    | undefined;
+}) => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState<boolean>(false);
+  const [editId, setEditId] = useState<number | null>(null);
+  const queryClient = useQueryClient();
+  const [types, setTypes] = useState<"edit" | "create">("create");
+
+  const handleEdit = (id: number) => {
+    setTypes("edit");
+    setOpen(true);
+    setEditId(id);
+  };
+
+  const { data: typeDetail } = useQuery({
+    queryKey: ["detail_type", editId],
+    queryFn: () => hotelTypeDetail({ id: editId! }),
+    enabled: !!editId,
+  });
+
+  const { mutate: deleteMutate } = useMutation({
+    mutationFn: ({ id }: { id: number }) => hotelTypeDelete({ id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["detail_type"] });
+      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const handleDelete = (id: number) => {
+    deleteMutate({ id });
+  };
+
+  const columns = TypeColumns(handleEdit, handleDelete, t);
+
+  const { mutate: create, isPending } = useMutation({
+    mutationFn: ({ body }: { body: { name: string; name_ru: string } }) =>
+      hotelTypeCreate({ body }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["detail_type"] });
+      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const { mutate: update, isPending: updatePending } = useMutation({
+    mutationFn: ({
+      body,
+      id,
+    }: {
+      id: number;
+      body: { name: string; name_ru: string };
+    }) => hotelTypeUpdate({ body, id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["detail_type"] });
+      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      name_ru: "",
+    },
+  });
+
+  useEffect(() => {
+    if (typeDetail) {
+      form.setValue("name", typeDetail.data.data.name_uz);
+      form.setValue("name_ru", typeDetail.data.data.name_ru);
+    }
+  }, [editId, typeDetail]);
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    if (types === "create") {
+      create({
+        body: {
+          name: values.name,
+          name_ru: values.name_ru,
+        },
+      });
+    } else if (types === "edit" && editId) {
+      update({
+        id: editId,
+        body: {
+          name: values.name,
+          name_ru: values.name_ru,
+        },
+      });
+    }
+  }
+
+  const table = useReactTable({
+    data: data?.results ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: data?.total_pages ?? 0,
+    state: {
+      pagination: {
+        pageIndex: page - 1,
+        pageSize: pageSize,
+      },
+    },
+  });
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <Button
+          variant="default"
+          onClick={() => {
+            setOpen(true);
+            setTypes("create");
+            form.reset();
+          }}
+        >
+          <PlusIcon className="mr-2" />
+          {t("Qo‘shish")}
+        </Button>
+      </div>
+
+      <div className="border border-gray-700 rounded-md overflow-hidden mt-4">
+        <Table key={data?.current_page}>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center text-gray-400"
+                >
+                  {t("Ma'lumot topilmadi")}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <RealPagination table={table} totalPages={data?.total_pages} />
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <p className="text-xl">
+            {types === "create" ? t("Saqlash") : t("Tahrirlash")}
+          </p>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-6 p-2"
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Nomi")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t("Nomi")} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="name_ru"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Nomi (ru)")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t("Nomi (ru)")} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end gap-4">
+                <Button
+                  type="button"
+                  onClick={() => setOpen(false)}
+                  className="border-slate-600 text-white hover:bg-gray-600 bg-gray-600"
+                >
+                  {t("Bekor qilish")}
+                </Button>
+                <Button type="submit">
+                  {isPending || updatePending ? (
+                    <Loader className="animate-spin" />
+                  ) : types === "create" ? (
+                    t("Saqlash")
+                  ) : (
+                    t("Tahrirlash")
+                  )}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default HotelType;

src/pages/tours/ui/MealTable.tsx

@@ -1,11 +1,11 @@
 import {
-  hotelTypeCreate,
+  hotelMealCreate,
-  hotelTypeDelete,
+  hotelMealDelete,
-  hotelTypeDetail,
+  hotelMealDetail,
-  hotelTypeUpdate,
+  hotelMealUpdate,
 } from "@/pages/tours/lib/api";
-import { TypeColumns } from "@/pages/tours/lib/column";
+import { MealColumns } from "@/pages/tours/lib/column";
-import type { Type } from "@/pages/tours/lib/type";
+import type { HotelMealListData } from "@/pages/tours/lib/type";
 import { Button } from "@/shared/ui/button";
 import { Dialog, DialogContent } from "@/shared/ui/dialog";
 import {
@@ -45,7 +45,7 @@ const formSchema = z.object({
   name_ru: z.string().min(1, { message: "Majburiy maydon" }),
 });
 
-const MealTable = ({
+const MealPlan = ({
   data,
   page,
   pageSize,
@@ -55,14 +55,14 @@ const MealTable = ({
   data:
     | {
         links: {
-          previous: string;
+          previous: string | null;
-          next: string;
+          next: string | null;
         };
         total_items: number;
         total_pages: number;
         page_size: number;
         current_page: number;
-        results: Type[];
+        results: HotelMealListData[];
       }
     | undefined;
 }) => {
@@ -78,17 +78,17 @@ const MealTable = ({
     setEditId(id);
   };
 
-  const { data: typeDetail } = useQuery({
+  const { data: badgeDetail } = useQuery({
-    queryKey: ["detail_type", editId],
+    queryKey: ["detail_meal", editId],
-    queryFn: () => hotelTypeDetail({ id: editId! }),
+    queryFn: () => hotelMealDetail(editId!),
     enabled: !!editId,
   });
 
   const { mutate: deleteMutate } = useMutation({
-    mutationFn: ({ id }: { id: number }) => hotelTypeDelete({ id }),
+    mutationFn: ({ id }: { id: number }) => hotelMealDelete(id),
     onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ["detail_type"] });
+      queryClient.refetchQueries({ queryKey: ["detail_meal"] });
-      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      queryClient.refetchQueries({ queryKey: ["all_meal"] });
       setOpen(false);
       form.reset();
     },
@@ -104,14 +104,20 @@ const MealTable = ({
     deleteMutate({ id });
   };
 
-  const columns = TypeColumns(handleEdit, handleDelete, t);
+  const columns = MealColumns(handleEdit, handleDelete, t);
 
   const { mutate: create, isPending } = useMutation({
-    mutationFn: ({ body }: { body: { name: string; name_ru: string } }) =>
+    mutationFn: ({
-      hotelTypeCreate({ body }),
+      body,
+    }: {
+      body: {
+        name: string;
+        name_ru: string;
+      };
+    }) => hotelMealCreate(body),
     onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ["detail_type"] });
+      queryClient.refetchQueries({ queryKey: ["detail_meal"] });
-      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      queryClient.refetchQueries({ queryKey: ["all_meal"] });
       setOpen(false);
       form.reset();
     },
@@ -129,11 +135,14 @@ const MealTable = ({
       id,
     }: {
       id: number;
-      body: { name: string; name_ru: string };
+      body: {
-    }) => hotelTypeUpdate({ body, id }),
+        name: string;
+        name_ru: string;
+      };
+    }) => hotelMealUpdate({ body, id }),
     onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ["detail_type"] });
+      queryClient.refetchQueries({ queryKey: ["detail_meal"] });
-      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      queryClient.refetchQueries({ queryKey: ["all_meal"] });
       setOpen(false);
       form.reset();
     },
@@ -154,11 +163,11 @@ const MealTable = ({
   });
 
   useEffect(() => {
-    if (typeDetail) {
+    if (badgeDetail) {
-      form.setValue("name", typeDetail.data.data.name_uz);
+      form.setValue("name", badgeDetail.data.data.name_uz);
-      form.setValue("name_ru", typeDetail.data.data.name_ru);
+      form.setValue("name_ru", badgeDetail.data.data.name_ru);
     }
-  }, [editId, typeDetail]);
+  }, [editId, badgeDetail]);
 
   function onSubmit(values: z.infer<typeof formSchema>) {
     if (types === "create") {
@@ -192,7 +201,6 @@ const MealTable = ({
       },
     },
   });
-
   return (
     <>
       <div className="flex justify-end">
@@ -256,7 +264,12 @@ const MealTable = ({
         </Table>
       </div>
 
-      <RealPagination table={table} totalPages={data?.total_pages} />
+      <RealPagination
+        table={table}
+        totalPages={data?.total_pages}
+        namePage="pageMeal"
+        namePageSize="pageSizeMeal"
+      />
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
@@ -321,4 +334,4 @@ const MealTable = ({
   );
 };
 
-export default MealTable;
+export default MealPlan;

src/pages/tours/ui/RegionTable.tsx

@@ -0,0 +1,335 @@
+import {
+  hotelFeatureTypeDelete,
+  regionCreate,
+  regionDeatil,
+  regionUpdate,
+} from "@/pages/tours/lib/api";
+import { CountryColumns } from "@/pages/tours/lib/column";
+import type { CountryLisResult } from "@/pages/tours/lib/type";
+import { Button } from "@/shared/ui/button";
+import { Dialog, DialogContent } from "@/shared/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/ui/form";
+import { Input } from "@/shared/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import RealPagination from "@/widgets/real-pagination/ui/RealPagination";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Loader, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import z from "zod";
+
+const formSchema = z.object({
+  name: z.string().min(1, { message: "Majburiy maydon" }),
+  name_ru: z.string().min(1, { message: "Majburiy maydon" }),
+});
+
+const RegionTable = ({
+  data,
+  page,
+  pageSize,
+  featureId,
+}: {
+  page: number;
+  featureId: number | null;
+  pageSize: number;
+  data:
+    | {
+        links: {
+          previous: string | null;
+          next: string | null;
+        };
+        total_items: number;
+        total_pages: number;
+        page_size: number;
+        current_page: number;
+        results: CountryLisResult[];
+      }
+    | undefined;
+}) => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState<boolean>(false);
+  const [editId, setEditId] = useState<number | null>(null);
+  const queryClient = useQueryClient();
+  const [types, setTypes] = useState<"edit" | "create">("create");
+
+  const handleEdit = (id: number) => {
+    setTypes("edit");
+    setOpen(true);
+    setEditId(id);
+  };
+
+  const { data: badgeDetail } = useQuery({
+    queryKey: ["region_detail", editId],
+    queryFn: () => regionDeatil(editId!),
+    enabled: !!editId,
+  });
+
+  const { mutate: deleteMutate } = useMutation({
+    mutationFn: ({ id }: { id: number }) => hotelFeatureTypeDelete({ id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["region_detail"] });
+      queryClient.refetchQueries({ queryKey: ["all_region"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const handleDelete = (id: number) => {
+    deleteMutate({ id });
+  };
+
+  const columns = CountryColumns(handleEdit, handleDelete, t);
+
+  const { mutate: create, isPending } = useMutation({
+    mutationFn: (body: { name: string; name_ru: string; country: number }) =>
+      regionCreate(body),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["region_detail"] });
+      queryClient.refetchQueries({ queryKey: ["all_region"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const { mutate: update, isPending: updatePending } = useMutation({
+    mutationFn: ({
+      body,
+      id,
+    }: {
+      id: number;
+      body: {
+        name: string;
+        name_ru: string;
+        country: number;
+      };
+    }) => regionUpdate({ body, id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["region_detail"] });
+      queryClient.refetchQueries({ queryKey: ["all_region"] });
+      setOpen(false);
+      form.reset();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        position: "top-center",
+        richColors: true,
+      });
+    },
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      name_ru: "",
+    },
+  });
+
+  useEffect(() => {
+    if (badgeDetail) {
+      form.setValue("name", badgeDetail.data.data.name_uz);
+      form.setValue("name_ru", badgeDetail.data.data.name_ru);
+    }
+  }, [editId, badgeDetail]);
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    if (types === "create") {
+      create({
+        country: Number(featureId),
+        name: values.name,
+        name_ru: values.name_ru,
+      });
+    } else if (types === "edit" && editId) {
+      update({
+        id: editId,
+        body: {
+          country: Number(featureId),
+          name: values.name,
+          name_ru: values.name_ru,
+        },
+      });
+    }
+  }
+
+  const table = useReactTable({
+    data: data?.results ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: data?.total_pages ?? 0,
+    state: {
+      pagination: {
+        pageIndex: page - 1,
+        pageSize: pageSize,
+      },
+    },
+  });
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <Button
+          variant="default"
+          onClick={() => {
+            setOpen(true);
+            setTypes("create");
+            form.reset();
+          }}
+        >
+          <PlusIcon className="mr-2" />
+          {t("Qo‘shish")}
+        </Button>
+      </div>
+
+      <div className="border border-gray-700 rounded-md overflow-hidden mt-4">
+        <Table key={data?.current_page}>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center text-gray-400"
+                >
+                  {t("Ma'lumot topilmadi")}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <RealPagination
+        table={table}
+        totalPages={data?.total_pages}
+        namePage="pageRegion"
+        namePageSize="pageSizeRegion"
+      />
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <p className="text-xl">
+            {types === "create" ? t("Saqlash") : t("Tahrirlash")}
+          </p>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-6 p-2"
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Nomi")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t("Nomi")} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="name_ru"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Nomi (ru)")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t("Nomi (ru)")} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end gap-4">
+                <Button
+                  type="button"
+                  onClick={() => setOpen(false)}
+                  className="border-slate-600 text-white hover:bg-gray-600 bg-gray-600"
+                >
+                  {t("Bekor qilish")}
+                </Button>
+                <Button type="submit">
+                  {isPending || updatePending ? (
+                    <Loader className="animate-spin" />
+                  ) : types === "create" ? (
+                    t("Saqlash")
+                  ) : (
+                    t("Tahrirlash")
+                  )}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default RegionTable;

src/pages/tours/ui/StepOne.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import {
+  countryList,
   createTours,
   getAllAmenities,
   hotelBadge,
   hotelTransport,
+  regionList,
   updateTours,
 } from "@/pages/tours/lib/api";
 import { TourformSchema } from "@/pages/tours/lib/form";
@@ -12,12 +14,14 @@ import { useTicketStore } from "@/pages/tours/lib/store";
 import type { GetOneTours } from "@/pages/tours/lib/type";
 import TicketsImagesModel from "@/pages/tours/ui/TicketsImagesModel";
 import formatPrice from "@/shared/lib/formatPrice";
+import { cn } from "@/shared/lib/utils";
 import { Badge } from "@/shared/ui/badge";
 import { Button } from "@/shared/ui/button";
 import { Calendar } from "@/shared/ui/calendar";
 import {
   Command,
   CommandGroup,
+  CommandInput,
   CommandItem,
   CommandList,
 } from "@/shared/ui/command";
@@ -34,8 +38,17 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/shared/ui/radio-group";
 import { Textarea } from "@/shared/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ChevronDownIcon, SquareCheckBig, XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  Check,
+  ChevronDownIcon,
+  ChevronsUpDown,
+  Loader2,
+  MoveLeft,
+  SquareCheckBig,
+  XIcon,
+} from "lucide-react";
 import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -54,6 +67,7 @@ const StepOne = ({
   isEditMode: boolean;
 }) => {
   const [displayPrice, setDisplayPrice] = useState("");
+  const queryClient = useQueryClient();
   // const [tarifdisplayPrice, setTarifDisplayPrice] = useState<string[]>([]);
   const [transportPrices, setTransportPrices] = useState<string[]>([]);
 
@@ -71,9 +85,9 @@ const StepOne = ({
       departure: "",
       // tarif: [],
       transport: [],
-      departure_ru: "",
+      // departure_ru: "",
       destination: "",
-      destination_ru: "",
+      // destination_ru: "",
       location_name: "",
       location_name_ru: "",
       departureDateTime: {
@@ -126,12 +140,13 @@ const StepOne = ({
       };
     }
 
-    // 🔹 Transport
+    // 🔹 TransportS
     const transports =
-      tour.transports?.map((t, i) => ({
+      tour.transports?.map((t) => ({
-        transport: i + 1,
+        transport: t.transport.id,
         price: t.price ?? 0,
       })) ?? [];
+
     setTransportPrices(transports.map((t) => formatPrice(t.price ?? 0)));
 
     // 🔹 Tarif
@@ -149,10 +164,10 @@ const StepOne = ({
       passenger_count: String(tour.passenger_count) ?? "1",
       min_person: String(tour.min_person) ?? "1",
       max_person: String(tour.max_person) ?? "1",
-      departure: tour.departure_uz ?? "",
+      departure: tour.departure?.id.toString() ?? "",
-      departure_ru: tour.departure_ru ?? "",
+      // departure_ru: tour.departure_ru ?? "",
-      destination: tour.destination_uz ?? "",
+      destination: tour.destination?.id.toString() ?? "",
-      destination_ru: tour.destination_ru ?? "",
+      // destination_ru: tour.destination_ru ?? "",
       location_name: tour.location_name_uz ?? "",
       location_name_ru: tour.location_name_ru ?? "",
       hotel_info: tour.hotel_info_uz ?? "",
@@ -225,17 +240,25 @@ const StepOne = ({
 
     // TicketStore uchun id
     setId(tour.id);
+    setSelectedCountry(data.data.departure?.country?.id);
+    setSearchCity(data.data.departure?.name);
+    setSelectedCountryDes(data.data.destination?.country.id);
+    setSearchCityDes(data.data.destination?.name);
   }, [isEditMode, data, form, setId]);
 
   const { watch, setValue } = form;
   const selectedDate = watch("departureDateTime.date");
   const selectedDateTravel = watch("travelDateTime.date");
 
-  const { mutate: create } = useMutation({
+  const { mutate: create, isPending } = useMutation({
     mutationFn: (body: FormData) => {
       return createTours({ body });
     },
     onSuccess: (res) => {
+      queryClient.refetchQueries({ queryKey: ["popular_tours"] });
+      queryClient.refetchQueries({ queryKey: ["all_tours"] });
+      queryClient.refetchQueries({ queryKey: ["tours_detail"] });
+      queryClient.refetchQueries({ queryKey: ["hotel_detail"] });
       setId(res.data.data.id);
       setStep(2);
     },
@@ -247,11 +270,15 @@ const StepOne = ({
     },
   });
 
-  const { mutate: update } = useMutation({
+  const { mutate: update, isPending: updatePending } = useMutation({
     mutationFn: ({ body, id }: { id: number; body: FormData }) => {
       return updateTours({ body, id });
     },
     onSuccess: (res) => {
+      queryClient.refetchQueries({ queryKey: ["popular_tours"] });
+      queryClient.refetchQueries({ queryKey: ["all_tours"] });
+      queryClient.refetchQueries({ queryKey: ["tours_detail"] });
+      queryClient.refetchQueries({ queryKey: ["hotel_detail"] });
       setId(res.data.data.id);
       setStep(2);
     },
@@ -265,7 +292,7 @@ const StepOne = ({
 
   function onSubmit(value: z.infer<typeof TourformSchema>) {
     const formData = new FormData();
-
+    const tour = data ? data.data : null;
     // Asosiy ma'lumotlar
     formData.append("title", value.title);
     formData.append("location_name", value.location_name);
@@ -279,9 +306,9 @@ const StepOne = ({
     formData.append("min_person", String(value.min_person));
     formData.append("max_person", String(value.max_person));
     formData.append("departure", String(value.departure));
-    formData.append("departure_ru", String(value.departure_ru));
+    // formData.append("departure_ru", String(value.departure_ru));
     formData.append("destination", String(value.destination));
-    formData.append("destination_ru", String(value.destination_ru));
+    // formData.append("destination_ru", String(value.destination_ru));
     formData.append(
       "departure_time",
       value.departureDateTime.date?.toISOString(),
@@ -308,12 +335,11 @@ const StepOne = ({
       formData.append("hotel_meals_ru", value.hotel_meals_info_ru);
     }
     formData.append("duration_days", String(value.duration));
-    formData.append("rating", String("0.0"));
+    formData.append("rating", tour ? String(tour.rating) : "0.0");
 
     if (value.banner instanceof File) {
       formData.append("image_banner", value.banner);
     }
-    console.log(value.banner, "value.banner");
 
     // Tarif va transport
     // value.tarif?.forEach((e, i) => {
@@ -479,6 +505,70 @@ const StepOne = ({
   //   queryFn: () => hotelTarif({ page: 1, page_size: 10 }),
   // });
 
+  const [searchCountry, setSearchCountry] = useState<string>("");
+  const [searchCity, setSearchCity] = useState<string>("");
+  const [openCountry, setOpenCountry] = useState<boolean>(false);
+  const [openCity, setOpenCity] = useState<boolean>(false);
+  const [selectedCountry, setSelectedCountry] = useState<number | null>(null);
+
+  const { data: countryData, isLoading: countryLoad } = useQuery({
+    queryKey: ["all_country", searchCountry],
+    queryFn: () => countryList({ page: 1, page_size: 10, name: searchCountry }),
+    select: (res) => res.data.data,
+  });
+
+  const { data: regionData, isLoading: regionLoad } = useQuery({
+    queryKey: ["all_region", selectedCountry, searchCity],
+    queryFn: () =>
+      regionList({
+        page: 1,
+        page_size: 10,
+        country: selectedCountry!,
+        name: searchCity,
+      }),
+    select: (res) => res.data.data,
+    enabled: !!selectedCountry,
+  });
+  //destions select country
+  const [searchCountryDes, setSearchCountryDes] = useState<string>("");
+  const [searchCityDes, setSearchCityDes] = useState<string>("");
+  const [openCountryDes, setOpenCountryDes] = useState<boolean>(false);
+  const [openCityDes, setOpenCityDes] = useState<boolean>(false);
+  const [selectedCountryDes, setSelectedCountryDes] = useState<number | null>(
+    null,
+  );
+  const { data: countryDataDes, isLoading: countryLoadDes } = useQuery({
+    queryKey: ["all_country_des", searchCountryDes],
+    queryFn: () =>
+      countryList({ page: 1, page_size: 10, name: searchCountryDes }),
+    select: (res) => res.data.data,
+  });
+
+  const { data: regionDataDes, isLoading: regionLoadDes } = useQuery({
+    queryKey: ["all_region_des", selectedCountryDes, searchCityDes],
+    queryFn: () =>
+      regionList({
+        page: 1,
+        page_size: 10,
+        country: selectedCountryDes!,
+        name: searchCityDes,
+      }),
+    select: (res) => res.data.data,
+    enabled: !!selectedCountryDes,
+  });
+
+  const handleCountrySelect = (id: number | null) => {
+    setSelectedCountry(id);
+    form.setValue("departure", "");
+    setOpenCountry(false);
+  };
+
+  const handleCountrySelectDes = (id: number | null) => {
+    setSelectedCountryDes(id);
+    form.setValue("destination", "");
+    setOpenCountryDes(false);
+  };
+
   const { data: transport } = useQuery({
     queryKey: ["all_transport"],
     queryFn: () => hotelTransport({ page: 1, page_size: 10 }),
@@ -613,24 +703,224 @@ const StepOne = ({
 
         <div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 items-start">
           <FormField
-            control={form.control}
             name="departure"
-            render={({ field }) => (
+            control={form.control}
-              <FormItem>
+            render={({ field }) => {
-                <Label className="text-md">{t("Ketish joyi")}</Label>
+              const selectedCity = regionData?.results.find(
+                (u) => String(u.id) === field.value,
+              );
+
+              return (
+                <FormItem className="flex flex-col gap-2">
+                  <Label className="text-md">Ketish joyi</Label>
+                  {!selectedCountry && (
+                    <Popover open={openCountry} onOpenChange={setOpenCountry}>
+                      <PopoverTrigger asChild>
                         <FormControl>
-                  <Input
+                          <Button
-                    placeholder="Toshkent"
+                            variant="outline"
-                    {...field}
+                            className={cn(
-                    className="h-12 !text-md"
+                              "w-full h-12 justify-between transition-all duration-200",
-                  />
+                              !selectedCountry && "text-muted-foreground",
+                            )}
+                          >
+                            {selectedCountry
+                              ? countryData?.results.find(
+                                  (c) => c.id === selectedCountry,
+                                )?.name
+                              : "Davlatni tanlang"}
+                            <ChevronsUpDown className="ml-2 h-4 opacity-50" />
+                          </Button>
                         </FormControl>
-                <FormMessage />
+                      </PopoverTrigger>
-              </FormItem>
+                      <AnimatePresence mode="wait">
+                        <motion.div
+                          initial={{ opacity: 0, y: -10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0, y: -10 }}
+                          transition={{ duration: 0.3, ease: "easeOut" }}
+                        >
+                          <PopoverContent className="!w-96 p-0">
+                            <Command shouldFilter={false}>
+                              <CommandInput
+                                placeholder="Qidirish..."
+                                value={searchCountry}
+                                onValueChange={setSearchCountry}
+                              />
+                              <CommandList>
+                                {countryLoad ? (
+                                  <div className="py-6 text-center">
+                                    <Loader2 className="animate-spin mx-auto" />
+                                  </div>
+                                ) : (
+                                  <CommandGroup>
+                                    {countryData?.results.map((c, index) => (
+                                      <motion.div
+                                        key={c.id}
+                                        initial={{ opacity: 0, x: -20 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        transition={{
+                                          duration: 0.2,
+                                          delay: index * 0.03,
+                                          ease: "easeOut",
+                                        }}
+                                      >
+                                        <CommandItem
+                                          onSelect={() => {
+                                            handleCountrySelect(c.id);
+                                            setOpenCountry(false);
+                                            setTimeout(
+                                              () => setOpenCity(true),
+                                              200,
+                                            );
+                                          }}
+                                          className="cursor-pointer transition-colors"
+                                        >
+                                          <Check
+                                            className={cn(
+                                              "mr-2 h-4 transition-opacity duration-200",
+                                              selectedCountry === c.id
+                                                ? "opacity-100"
+                                                : "opacity-0",
                                             )}
                                           />
+                                          {c.name}
+                                        </CommandItem>
+                                      </motion.div>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </motion.div>
+                      </AnimatePresence>
+                    </Popover>
+                  )}
 
-          <FormField
+                  {/* CITY DROPDOWN */}
+                  {selectedCountry && (
+                    <Popover open={openCity} onOpenChange={setOpenCity}>
+                      <PopoverTrigger asChild>
+                        <FormControl>
+                          <Button
+                            variant="outline"
+                            className={cn(
+                              "w-full h-12 justify-between transition-all duration-200",
+                              !field.value && "text-muted-foreground",
+                            )}
+                          >
+                            {selectedCity
+                              ? selectedCity.name
+                              : "Shaharni tanlang"}
+                            <ChevronsUpDown className="ml-2 h-4 opacity-50" />
+                          </Button>
+                        </FormControl>
+                      </PopoverTrigger>
+                      <AnimatePresence>
+                        <motion.div
+                          initial={{ opacity: 0, height: 0, y: -10 }}
+                          animate={{
+                            opacity: 1,
+                            height: "auto",
+                            y: 0,
+                            transition: {
+                              height: { duration: 0.3 },
+                              opacity: { duration: 0.3, delay: 0.1 },
+                              y: { duration: 0.3 },
+                            },
+                          }}
+                          exit={{
+                            opacity: 0,
+                            height: 0,
+                            y: -10,
+                            transition: {
+                              height: { duration: 0.25 },
+                              opacity: { duration: 0.15 },
+                            },
+                          }}
+                          style={{ overflow: "hidden" }}
+                        >
+                          <PopoverContent className="!w-96 p-0">
+                            <Command shouldFilter={false}>
+                              <CommandInput
+                                placeholder="Qidirish..."
+                                value={searchCity}
+                                onValueChange={setSearchCity}
+                              />
+                              <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ delay: 0.1 }}
+                              >
+                                <Button
+                                  className="w-fit ml-2 p-1 cursor-pointer hover:bg-accent transition-colors"
+                                  size={"icon"}
+                                  variant={"ghost"}
+                                  onClick={() => {
+                                    handleCountrySelect(null);
+                                    setOpenCity(false);
+                                    setTimeout(() => setOpenCountry(true), 200);
+                                  }}
+                                >
+                                  <MoveLeft className="mr-1" />
+                                  <p>Orqaga</p>
+                                </Button>
+                              </motion.div>
+                              <CommandList>
+                                {regionLoad ? (
+                                  <div className="py-6 text-center">
+                                    <Loader2 className="animate-spin mx-auto" />
+                                  </div>
+                                ) : (
+                                  <CommandGroup>
+                                    {regionData?.results.map((r, index) => (
+                                      <motion.div
+                                        key={r.id}
+                                        initial={{ opacity: 0, x: -20 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        transition={{
+                                          duration: 0.2,
+                                          delay: index * 0.03,
+                                          ease: "easeOut",
+                                        }}
+                                      >
+                                        <CommandItem
+                                          onSelect={() => {
+                                            field.onChange(String(r.id));
+                                            setOpenCity(false);
+                                          }}
+                                          className="cursor-pointer transition-colors"
+                                        >
+                                          <Check
+                                            className={cn(
+                                              "mr-2 h-4 transition-opacity duration-200",
+                                              field.value === String(r.id)
+                                                ? "opacity-100"
+                                                : "opacity-0",
+                                            )}
+                                          />
+                                          {r.name}
+                                        </CommandItem>
+                                      </motion.div>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </motion.div>
+                      </AnimatePresence>
+                    </Popover>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
+          {/* <FormField
             control={form.control}
             name="departure_ru"
             render={({ field }) => (
@@ -646,27 +936,234 @@ const StepOne = ({
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
 
           <FormField
-            control={form.control}
             name="destination"
-            render={({ field }) => (
+            control={form.control}
-              <FormItem>
+            render={({ field }) => {
-                <Label className="text-md">{t("Borish joyi")}</Label>
+              const selectedCity = regionDataDes?.results.find(
+                (u) => String(u.id) === field.value,
+              );
+
+              return (
+                <FormItem className="flex flex-col gap-2">
+                  <Label className="text-md">Borish joyi</Label>
+
+                  {/* COUNTRY DROPDOWN */}
+                  {!selectedCountryDes && (
+                    <Popover
+                      open={openCountryDes}
+                      onOpenChange={setOpenCountryDes}
+                    >
+                      <PopoverTrigger asChild>
                         <FormControl>
-                  <Input
+                          <Button
-                    placeholder="Dubai"
+                            variant="outline"
-                    {...field}
+                            className={cn(
-                    className="h-12 !text-md"
+                              "w-full h-12 justify-between transition-all duration-200",
-                  />
+                              !selectedCountryDes && "text-muted-foreground",
+                            )}
+                          >
+                            {selectedCountryDes
+                              ? countryDataDes?.results.find(
+                                  (c) => c.id === selectedCountryDes,
+                                )?.name
+                              : "Davlatni tanlang"}
+                            <ChevronsUpDown className="ml-2 h-4 opacity-50" />
+                          </Button>
                         </FormControl>
-                <FormMessage />
+                      </PopoverTrigger>
-              </FormItem>
+                      <AnimatePresence mode="wait">
+                        <motion.div
+                          initial={{ opacity: 0, y: -10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0, y: -10 }}
+                          transition={{ duration: 0.3, ease: "easeOut" }}
+                        >
+                          <PopoverContent className="!w-96 p-0">
+                            <Command shouldFilter={false}>
+                              <CommandInput
+                                placeholder="Qidirish..."
+                                value={searchCountryDes}
+                                onValueChange={setSearchCountryDes}
+                              />
+                              <CommandList>
+                                {countryLoadDes ? (
+                                  <div className="py-6 text-center">
+                                    <Loader2 className="animate-spin mx-auto" />
+                                  </div>
+                                ) : (
+                                  <CommandGroup>
+                                    {countryDataDes?.results.map((c, index) => (
+                                      <motion.div
+                                        key={c.id}
+                                        initial={{ opacity: 0, x: -20 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        transition={{
+                                          duration: 0.2,
+                                          delay: index * 0.03,
+                                          ease: "easeOut",
+                                        }}
+                                      >
+                                        <CommandItem
+                                          onSelect={() => {
+                                            handleCountrySelectDes(c.id);
+                                            setOpenCountryDes(false);
+                                            setTimeout(
+                                              () => setOpenCityDes(true),
+                                              200,
+                                            );
+                                          }}
+                                          className="cursor-pointer transition-colors"
+                                        >
+                                          <Check
+                                            className={cn(
+                                              "mr-2 h-4 transition-opacity duration-200",
+                                              selectedCountryDes === c.id
+                                                ? "opacity-100"
+                                                : "opacity-0",
                                             )}
                                           />
+                                          {c.name}
+                                        </CommandItem>
+                                      </motion.div>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </motion.div>
+                      </AnimatePresence>
+                    </Popover>
+                  )}
 
-          <FormField
+                  {selectedCountryDes && (
+                    <Popover open={openCityDes} onOpenChange={setOpenCityDes}>
+                      <PopoverTrigger asChild>
+                        <FormControl>
+                          <Button
+                            variant="outline"
+                            className={cn(
+                              "w-full h-12 justify-between transition-all duration-200",
+                              !field.value && "text-muted-foreground",
+                            )}
+                          >
+                            {selectedCity
+                              ? selectedCity.name
+                              : "Shaharni tanlang"}
+                            <ChevronsUpDown className="ml-2 h-4 opacity-50" />
+                          </Button>
+                        </FormControl>
+                      </PopoverTrigger>
+                      <AnimatePresence>
+                        <motion.div
+                          initial={{ opacity: 0, height: 0, y: -10 }}
+                          animate={{
+                            opacity: 1,
+                            height: "auto",
+                            y: 0,
+                            transition: {
+                              height: { duration: 0.3 },
+                              opacity: { duration: 0.3, delay: 0.1 },
+                              y: { duration: 0.3 },
+                            },
+                          }}
+                          exit={{
+                            opacity: 0,
+                            height: 0,
+                            y: -10,
+                            transition: {
+                              height: { duration: 0.25 },
+                              opacity: { duration: 0.15 },
+                            },
+                          }}
+                          style={{ overflow: "hidden" }}
+                        >
+                          <PopoverContent className="!w-96 p-0">
+                            <Command shouldFilter={false}>
+                              <CommandInput
+                                placeholder="Qidirish..."
+                                value={searchCityDes}
+                                onValueChange={setSearchCityDes}
+                              />
+                              <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ delay: 0.1 }}
+                              >
+                                <Button
+                                  className="w-fit ml-2 p-1 cursor-pointer hover:bg-accent transition-colors"
+                                  size={"icon"}
+                                  variant={"ghost"}
+                                  onClick={() => {
+                                    handleCountrySelectDes(null);
+                                    setOpenCityDes(false);
+                                    setTimeout(
+                                      () => setOpenCountryDes(true),
+                                      200,
+                                    );
+                                  }}
+                                >
+                                  <MoveLeft className="mr-1" />
+                                  <p>Orqaga</p>
+                                </Button>
+                              </motion.div>
+                              <CommandList>
+                                {regionLoadDes ? (
+                                  <div className="py-6 text-center">
+                                    <Loader2 className="animate-spin mx-auto" />
+                                  </div>
+                                ) : (
+                                  <CommandGroup>
+                                    {regionDataDes?.results.map((r, index) => (
+                                      <motion.div
+                                        key={r.id}
+                                        initial={{ opacity: 0, x: -20 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        transition={{
+                                          duration: 0.2,
+                                          delay: index * 0.03,
+                                          ease: "easeOut",
+                                        }}
+                                      >
+                                        <CommandItem
+                                          onSelect={() => {
+                                            field.onChange(String(r.id));
+                                            setOpenCityDes(false);
+                                          }}
+                                          className="cursor-pointer transition-colors"
+                                        >
+                                          <Check
+                                            className={cn(
+                                              "mr-2 h-4 transition-opacity duration-200",
+                                              field.value === String(r.id)
+                                                ? "opacity-100"
+                                                : "opacity-0",
+                                            )}
+                                          />
+                                          {r.name}
+                                        </CommandItem>
+                                      </motion.div>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </motion.div>
+                      </AnimatePresence>
+                    </Popover>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
+          {/* <FormField
             control={form.control}
             name="destination_ru"
             render={({ field }) => (
@@ -682,7 +1179,7 @@ const StepOne = ({
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
 
           <FormField
             control={form.control}
@@ -2204,7 +2701,11 @@ const StepOne = ({
             type="submit"
             className="mt-6 px-8 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-600 cursor-pointer"
           >
-            {t("Saqlash")}
+            {isPending || updatePending ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              t("Saqlash")
+            )}
           </Button>
         </div>
       </form>

src/pages/tours/ui/StepTwo.tsx

@@ -6,6 +6,7 @@ import {
   getHotel,
   hotelFeature,
   hotelFeatureType,
+  hotelMealList,
   hotelType,
 } from "@/pages/tours/lib/api";
 import { useTicketStore } from "@/pages/tours/lib/store";
@@ -15,6 +16,16 @@ import type {
   HotelFeaturesType,
   Type,
 } from "@/pages/tours/lib/type";
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shared/ui/command";
 import {
   Form,
   FormControl,
@@ -24,6 +35,7 @@ import {
 } from "@/shared/ui/form";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
 import {
   Select,
   SelectContent,
@@ -33,7 +45,7 @@ import {
 } from "@/shared/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { X } from "lucide-react";
+import { Check, ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -100,19 +112,7 @@ const StepTwo = ({
       form.setValue("title", hotel.name);
       form.setValue("rating", String(hotel.rating));
 
-      const mealPlan =
+      form.setValue("mealPlan", hotel.meal_plan.toString());
-        hotel.meal_plan === "breakfast"
-          ? "Breakfast Only"
-          : hotel.meal_plan === "all_inclusive"
-            ? "All Inclusive"
-            : hotel.meal_plan === "half_board"
-              ? "Half Board"
-              : hotel.meal_plan === "full_board"
-                ? "Full Board"
-                : "all_inclusive";
-
-      // ✅ SetValue faqat backenddan qiymat kelganda chaqiriladi
-      form.setValue("mealPlan", mealPlan);
 
       form.setValue(
         "hotelType",
@@ -126,7 +126,7 @@ const StepTwo = ({
         ...new Set(hotel.hotel_features?.map((f) => String(f.id)) ?? []),
       ]);
     }
-  }, [isEditMode, hotelDetail, form]);
+  }, [isEditMode, hotelDetail, form, data]);
 
   // 🧩 Select ma'lumotlari
   const [allHotelTypes, setAllHotelTypes] = useState<Type[]>([]);
@@ -231,6 +231,9 @@ const StepTwo = ({
   const { mutate, isPending } = useMutation({
     mutationFn: (body: FormData) => createHotel({ body }),
     onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["popular_tours"] });
+      queryClient.refetchQueries({ queryKey: ["all_tours"] });
+      queryClient.refetchQueries({ queryKey: ["tours_detail"] });
       queryClient.refetchQueries({ queryKey: ["hotel_detail"] });
       toast.success(t("Muvaffaqiyatli saqlandi"));
       navigate("/tours");
@@ -247,6 +250,9 @@ const StepTwo = ({
     mutationFn: ({ body, id }: { id: number; body: FormData }) =>
       editHotel({ body, id }),
     onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["popular_tours"] });
+      queryClient.refetchQueries({ queryKey: ["all_tours"] });
+      queryClient.refetchQueries({ queryKey: ["tours_detail"] });
       queryClient.refetchQueries({ queryKey: ["hotel_detail"] });
       toast.success(t("Muvaffaqiyatli saqlandi"));
       navigate("/tours");
@@ -280,6 +286,15 @@ const StepTwo = ({
     );
   };
 
+  const [openMeal, setOpenMeal] = useState<boolean>(false);
+  const [searchMeal, setSearchMeal] = useState<string>("");
+
+  const { data: mealData, isLoading: mealLoad } = useQuery({
+    queryKey: ["all_meal", searchMeal],
+    queryFn: () => hotelMealList({ page: 1, page_size: 99, name: searchMeal }),
+    select: (res) => res.data.data,
+  });
+
   const removeFeatureType = (id: string) =>
     form.setValue(
       "hotelFeaturesType",
@@ -297,38 +312,27 @@ const StepTwo = ({
       formData.append(`hotel_amenities[${i}]`, String(e));
     });
 
-    const mealPlan =
+    formData.append("meal_plan", data.mealPlan);
-      data.mealPlan === "Breakfast Only"
-        ? "breakfast"
-        : data.mealPlan === "Half Board"
-          ? "half_board"
-          : data.mealPlan === "Full Board"
-            ? "full_board"
-            : "all_inclusive";
-    formData.append("meal_plan", mealPlan);
 
     data.hotelType &&
       data.hotelType.forEach((id) => formData.append("hotel_type", id));
-    data.hotelFeatures &&
+    data.hotelFeaturesType &&
-      data.hotelFeatures.forEach((id) => formData.append("hotel_features", id));
+      data.hotelFeaturesType.forEach((id) =>
+        formData.append("hotel_features", id),
+      );
 
-    if (isEditMode && hotelDetail) {
+    if (isEditMode && hotelDetail && hotelDetail?.length > 0) {
       edit({
         body: formData,
         id: Number(hotelDetail[0].id),
       });
+    } else if (isEditMode && hotelDetail && hotelDetail?.length === 0) {
+      mutate(formData);
     } else {
       mutate(formData);
     }
   };
 
-  const mealPlans = [
-    "Breakfast Only",
-    "Half Board",
-    "Full Board",
-    "All Inclusive",
-  ];
-
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -391,28 +395,89 @@ const StepTwo = ({
 
           {/* Meal Plan */}
           <FormField
-            control={form.control}
             name="mealPlan"
-            render={({ field }) => (
+            control={form.control}
-              <FormItem>
+            render={({ field }) => {
-                <Label>{t("Taom rejasi")}</Label>
+              const selectedUser = mealData?.results.find(
+                (u) => String(u.id) === field.value,
+              );
+              return (
+                <FormItem className="flex flex-col">
+                  <Label className="text-md">Taom rejasi</Label>
+
+                  <Popover open={openMeal} onOpenChange={setOpenMeal}>
+                    <PopoverTrigger asChild>
                       <FormControl>
-                  <Select value={field.value} onValueChange={field.onChange}>
+                        <Button
-                    <SelectTrigger className="!h-12 w-full">
+                          type="button"
-                      <SelectValue placeholder={t("Tanlang")} />
+                          variant="outline"
-                    </SelectTrigger>
+                          role="combobox"
-                    <SelectContent>
+                          aria-expanded={openMeal}
-                      {mealPlans.map((plan) => (
+                          className={cn(
-                        <SelectItem key={plan} value={plan}>
+                            "w-full h-12 justify-between",
-                          {t(plan)}
+                            !field.value && "text-muted-foreground",
-                        </SelectItem>
+                          )}
-                      ))}
+                        >
-                    </SelectContent>
+                          {selectedUser
-                  </Select>
+                            ? `${selectedUser.name}`
+                            : "Taom rejasi tanlang"}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
                       </FormControl>
+                    </PopoverTrigger>
+
+                    <PopoverContent
+                      className="w-[--radix-popover-trigger-width] p-0"
+                      align="start"
+                    >
+                      <Command shouldFilter={false}>
+                        <CommandInput
+                          placeholder="Qidirish..."
+                          className="h-9"
+                          value={searchMeal}
+                          onValueChange={setSearchMeal}
+                        />
+
+                        <CommandList>
+                          {mealLoad ? (
+                            <div className="py-6 text-center text-sm">
+                              <Loader2 className="mx-auto h-4 w-4 animate-spin" />
+                            </div>
+                          ) : mealData && mealData.results.length > 0 ? (
+                            <CommandGroup>
+                              {mealData.results.map((u) => (
+                                <CommandItem
+                                  key={u.id}
+                                  value={`${u.id}`}
+                                  onSelect={() => {
+                                    field.onChange(String(u.id));
+                                    setOpenMeal(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      field.value === String(u.id)
+                                        ? "opacity-100"
+                                        : "opacity-0",
+                                    )}
+                                  />
+                                  {u.name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          ) : (
+                            <CommandEmpty>Taom rejasi topilmadi</CommandEmpty>
+                          )}
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+
                   <FormMessage />
                 </FormItem>
-            )}
+              );
+            }}
           />
 
           {/* Hotel Type */}

src/pages/tours/ui/TourDetail.tsx

@@ -221,7 +221,7 @@ export default function TourDetailPage() {
                             {t("Jo'nash joyi")}
                           </p>
                           <p className="font-semibold text-white">
-                            {tour.departure}
+                            {tour.departure?.name}
                           </p>
                         </div>
                       </div>
@@ -233,7 +233,7 @@ export default function TourDetailPage() {
                             {t("Yo'nalish")}
                           </p>
                           <p className="font-semibold text-white">
-                            {tour.destination}
+                            {tour.destination?.name}
                           </p>
                         </div>
                       </div>

src/pages/tours/ui/Tours.tsx

@@ -37,7 +37,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 
 type Role =
@@ -51,15 +51,17 @@ type Role =
 
 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 [searchParams, setSearchParams] = useSearchParams();
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
 
   const { data, isLoading, isError, refetch } = useQuery({
     queryKey: ["all_tours", page],
-    queryFn: () => getAllTours({ page: page, page_size: 10 }),
+    queryFn: () => getAllTours({ page, page_size: 10 }),
   });
 
   const { data: popularTour } = useQuery({
@@ -68,7 +70,7 @@ const Tours = ({ user }: { user: Role }) => {
       getAllTours({ page: 1, page_size: 10, featured_tickets: true }),
   });
 
-  const { mutate } = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn: (id: number) => deleteTours({ id }),
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ["all_tours"] });
@@ -110,6 +112,11 @@ const Tours = ({ user }: { user: Role }) => {
     setShowPopularDialog(false);
   };
 
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   if (isLoading) {
     return (
       <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
@@ -176,12 +183,14 @@ const Tours = ({ user }: { user: Role }) => {
             {data?.data.data.results.map((tour, idx) => (
               <TableRow key={tour.id}>
                 <TableCell className="font-medium text-center">
-                  {(page - 1) * 6 + idx + 1}
+                  {(page - 1) * 10 + idx + 1}
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center gap-2 font-semibold">
                     <Plane className="w-4 h-4 text-primary" />
-                    {tour.destination}
+                    {typeof tour.destination === "object"
+                      ? tour.destination?.name
+                      : tour.destination}
                   </div>
                 </TableCell>
                 <TableCell className="text-sm text-primary font-medium">
@@ -235,7 +244,12 @@ const Tours = ({ user }: { user: Role }) => {
                     <Button
                       variant="default"
                       size="sm"
-                      onClick={() => navigate(`/tours/${tour.id}`)}
+                      onClick={() => {
+                        navigate(`/tours/${tour.id}`);
+                        queryClient.refetchQueries({
+                          queryKey: ["tours_detail"],
+                        });
+                      }}
                     >
                       {t("Batafsil")}
                     </Button>
@@ -270,8 +284,14 @@ const Tours = ({ user }: { user: Role }) => {
               variant="destructive"
               onClick={() => confirmDelete(deleteId!)}
             >
+              {isPending ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                <>
                   <Trash2 className="w-4 h-4 mr-2" />
                   {t("O'chirish")}
+                </>
+              )}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -301,7 +321,9 @@ const Tours = ({ user }: { user: Role }) => {
                     <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}
+                        {typeof tour.destination === "object"
+                          ? tour.destination?.name
+                          : tour.destination}
                       </p>
                       <p className="text-xs text-muted-foreground">
                         {tour.duration_days} kun • {tour.hotel_name}
@@ -337,32 +359,35 @@ const Tours = ({ user }: { user: Role }) => {
       <div className="flex justify-end mt-10 gap-3">
         <button
           disabled={page === 1}
-          onClick={() => setPage((p) => Math.max(p - 1, 1))}
+          onClick={() => updatePage(Math.max(page - 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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronLeft className="w-5 h-5" />
         </button>
-        {[...Array(data?.data.data.total_pages)].map((_, i) => (
+
+        {[...Array(data?.data.data.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
             <button
               key={i}
-            onClick={() => setPage(i + 1)}
+              onClick={() => updatePage(pageNum)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+              className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-              page === i + 1
+                page === pageNum
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
               }`}
             >
-            {i + 1}
+              {pageNum}
             </button>
-        ))}
+          );
+        })}
+
         <button
           disabled={page === data?.data.data.total_pages}
           onClick={() =>
-            setPage((p) =>
+            updatePage(Math.min(page + 1, data?.data.data.total_pages ?? 1))
-              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"
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
         >
           <ChevronRight className="w-5 h-5" />
         </button>

src/pages/tours/ui/ToursSetting.tsx

@@ -1,19 +1,25 @@
 "use client";
 
 import {
+  countryList,
   getAllAmenities,
   hotelBadge,
   hotelFeature,
   hotelFeatureType,
+  hotelMealList,
   hotelTarif,
   hotelTransport,
   hotelType,
+  regionList,
 } from "@/pages/tours/lib/api";
 import Amenities from "@/pages/tours/ui/Amenities";
 import BadgeTable from "@/pages/tours/ui/BadgeTable";
+import CountryTable from "@/pages/tours/ui/CountryTable";
 import FeaturesTable from "@/pages/tours/ui/FeaturesTable";
 import FeaturesTableType from "@/pages/tours/ui/FeaturesTableType";
+import HotelType from "@/pages/tours/ui/HotelType";
 import MealTable from "@/pages/tours/ui/MealTable";
+import RegionTable from "@/pages/tours/ui/RegionTable";
 import TarifTable from "@/pages/tours/ui/TarifTable";
 import TransportTable from "@/pages/tours/ui/TransportTable";
 import { Button } from "@/shared/ui/button";
@@ -25,11 +31,45 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
+// Error Component
+const ErrorDisplay: React.FC<{ message: string; onRetry: () => void }> = ({
+  message,
+  onRetry,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[300px] bg-slate-800/50 rounded-lg text-center text-white gap-4 p-6">
+      <AlertTriangle className="w-10 h-10 text-red-500" />
+      <p className="text-lg">{message}</p>
+      <Button
+        onClick={onRetry}
+        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>
+  );
+};
+
+// Loading Component
+const LoadingDisplay: React.FC<{ message?: string }> = ({ message }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[300px] bg-slate-800/50 rounded-lg text-white gap-4">
+      <Loader2 className="w-10 h-10 animate-spin text-cyan-400" />
+      <p className="text-slate-400">
+        {message || t("Ma'lumotlar yuklanmoqda...")}
+      </p>
+    </div>
+  );
+};
+
 const ToursSetting: React.FC = () => {
   const { t } = useTranslation();
   const [searchParams] = useSearchParams();
   const [activeTab, setActiveTab] = useState("badge");
   const [featureId, setFeatureId] = useState<number | null>(null);
+  const [countryId, setCountryId] = useState<number | null>(null);
   const navigate = useNavigate();
 
   const page = parseInt(searchParams.get("page") || "1", 10);
@@ -87,6 +127,47 @@ const ToursSetting: React.FC = () => {
     select: (res) => res.data.data,
   });
 
+  const pageCountry = parseInt(searchParams.get("pageCountry") || "1", 10);
+  const pageSizeCountry = parseInt(
+    searchParams.get("pageSizeCountry") || "10",
+    10,
+  );
+
+  const {
+    data: countryData,
+    isLoading: countryLoad,
+    isError: countryError,
+    refetch: countryRef,
+  } = useQuery({
+    queryKey: ["all_country", pageCountry, pageSizeCountry],
+    queryFn: () =>
+      countryList({ page: pageCountry, page_size: pageSizeCountry }),
+    select: (res) => res.data.data,
+  });
+
+  const pageRegion = parseInt(searchParams.get("pageRegion") || "1", 10);
+  const pageSizeRegion = parseInt(
+    searchParams.get("pageSizeRegion") || "10",
+    10,
+  );
+
+  const {
+    data: regionData,
+    isLoading: regionLoad,
+    isError: regionError,
+    refetch: regionRef,
+  } = useQuery({
+    queryKey: ["all_region", pageRegion, pageSizeRegion, countryId],
+    queryFn: () =>
+      regionList({
+        page: pageRegion,
+        page_size: pageSizeRegion,
+        country: countryId!,
+      }),
+    select: (res) => res.data.data,
+    enabled: !!countryId,
+  });
+
   const pageFeature = parseInt(searchParams.get("pageFeature") || "1", 10);
   const pageSizeFeature = parseInt(
     searchParams.get("pageSizeFeature") || "10",
@@ -134,60 +215,25 @@ const ToursSetting: React.FC = () => {
     isError: amenitiesError,
     refetch: amenitiesRef,
   } = useQuery({
-    queryKey: ["all_amenities", page, pageSize],
+    queryKey: ["all_amenities", pageAmenities, pageSizeAmenities],
-    queryFn: () => getAllAmenities({ page, page_size: pageSize }),
+    queryFn: () =>
+      getAllAmenities({ page: pageAmenities, page_size: pageSizeAmenities }),
     select: (res) => res.data.data,
   });
 
-  if (
+  const pageMeal = parseInt(searchParams.get("pageMeal") || "1", 10);
-    isLoading ||
+  const pageSizeMeal = parseInt(searchParams.get("pageSizeMeal") || "10", 10);
-    tarifLoad ||
-    transportLoad ||
-    typeLoad ||
-    featureLoad ||
-    featureTypeLoad ||
-    amenitiesLoad
-  ) {
-    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 (
+  const {
-    isError ||
+    data: mealData,
-    tarifError ||
+    isLoading: mealLoad,
-    transportError ||
+    isError: mealError,
-    typeError ||
+    refetch: mealRef,
-    featureError ||
+  } = useQuery({
-    featureTypeError ||
+    queryKey: ["all_meal", pageMeal, pageSizeMeal],
-    amenitiesError
+    queryFn: () => hotelMealList({ page: pageMeal, page_size: pageSizeMeal }),
-  ) {
+    select: (res) => res.data.data,
-    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();
-            tarifRef();
-            transportRef();
-            typeRef();
-            featureRef();
-            featureTypeRef();
-            amenitiesRef();
-          }}
-          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 handleTabChange = (value: string) => {
     setActiveTab(value);
@@ -207,6 +253,9 @@ const ToursSetting: React.FC = () => {
         >
           <TabsList className="w-full">
             <TabsTrigger value="badge">{t("Belgilar (Badge)")}</TabsTrigger>
+            <TabsTrigger value="meal_plan">
+              {t("Ovqatlanish turlari")}
+            </TabsTrigger>
             <TabsTrigger value="tarif">{t("Tariflar")}</TabsTrigger>
             <TabsTrigger value="transport">{t("Transport")}</TabsTrigger>
             <TabsTrigger value="meal">{t("Qulayliklar")}</TabsTrigger>
@@ -214,40 +263,116 @@ const ToursSetting: React.FC = () => {
             <TabsTrigger value="hotel_features">
               {t("Otel sharoitlari")}
             </TabsTrigger>
+            <TabsTrigger value="country">{t("Davlatlar")}</TabsTrigger>
           </TabsList>
 
           <TabsContent value="badge" className="space-y-4">
+            {isLoading ? (
+              <LoadingDisplay />
+            ) : isError ? (
+              <ErrorDisplay
+                message={t("Belgilarni yuklashda xatolik yuz berdi.")}
+                onRetry={refetch}
+              />
+            ) : (
               <BadgeTable data={data} page={page} pageSize={pageSize} />
+            )}
           </TabsContent>
+
           <TabsContent value="tarif" className="space-y-4">
+            {tarifLoad ? (
+              <LoadingDisplay />
+            ) : tarifError ? (
+              <ErrorDisplay
+                message={t("Tariflarni yuklashda xatolik yuz berdi.")}
+                onRetry={tarifRef}
+              />
+            ) : (
               <TarifTable
                 data={tarifData}
                 page={pageTarif}
                 pageSize={pageSizeTarif}
               />
+            )}
           </TabsContent>
+
           <TabsContent value="transport" className="space-y-4">
+            {transportLoad ? (
+              <LoadingDisplay />
+            ) : transportError ? (
+              <ErrorDisplay
+                message={t("Transportlarni yuklashda xatolik yuz berdi.")}
+                onRetry={transportRef}
+              />
+            ) : (
               <TransportTable
                 data={transportData}
                 page={pageTransport}
                 pageSize={pageSizeTransport}
               />
+            )}
           </TabsContent>
+
           <TabsContent value="meal" className="space-y-4">
+            {amenitiesLoad ? (
+              <LoadingDisplay />
+            ) : amenitiesError ? (
+              <ErrorDisplay
+                message={t("Qulayliklarni yuklashda xatolik yuz berdi.")}
+                onRetry={amenitiesRef}
+              />
+            ) : (
               <Amenities
                 data={amenitiesData}
                 page={pageAmenities}
                 pageSize={pageSizeAmenities}
               />
+            )}
           </TabsContent>
+
           <TabsContent value="hotel_type" className="space-y-4">
-            <MealTable
+            {typeLoad ? (
-              data={typeData}
+              <LoadingDisplay />
-              page={pageTransport}
+            ) : typeError ? (
-              pageSize={pageSizeTransport}
+              <ErrorDisplay
+                message={t("Otel turlarini yuklashda xatolik yuz berdi.")}
+                onRetry={typeRef}
               />
+            ) : (
+              <HotelType
+                data={typeData}
+                page={pageType}
+                pageSize={pageSizeType}
+              />
+            )}
           </TabsContent>
+
+          <TabsContent value="meal_plan" className="space-y-4">
+            {mealLoad ? (
+              <LoadingDisplay />
+            ) : mealError ? (
+              <ErrorDisplay
+                message={t("Otel turlarini yuklashda xatolik yuz berdi.")}
+                onRetry={mealRef}
+              />
+            ) : (
+              <MealTable
+                data={mealData}
+                page={pageMeal}
+                pageSize={pageSizeMeal}
+              />
+            )}
+          </TabsContent>
+
           <TabsContent value="hotel_features" className="space-y-4">
+            {featureLoad ? (
+              <LoadingDisplay />
+            ) : featureError ? (
+              <ErrorDisplay
+                message={t("Otel sharoitlarini yuklashda xatolik yuz berdi.")}
+                onRetry={featureRef}
+              />
+            ) : (
               <FeaturesTable
                 data={featureData}
                 page={pageFeature}
@@ -255,14 +380,62 @@ const ToursSetting: React.FC = () => {
                 setActiveTab={setActiveTab}
                 setFeatureId={setFeatureId}
               />
+            )}
           </TabsContent>
+
           <TabsContent value="feature_type" className="space-y-4">
+            {featureTypeLoad ? (
+              <LoadingDisplay />
+            ) : featureTypeError ? (
+              <ErrorDisplay
+                message={t("Sharoit turlarini yuklashda xatolik yuz berdi.")}
+                onRetry={featureTypeRef}
+              />
+            ) : (
               <FeaturesTableType
                 data={featureTypeData}
                 page={pageFeature}
                 featureId={featureId}
                 pageSize={pageSizeFeature}
               />
+            )}
+          </TabsContent>
+
+          <TabsContent value="country" className="space-y-4">
+            {countryLoad ? (
+              <LoadingDisplay />
+            ) : countryError ? (
+              <ErrorDisplay
+                message={t("Sharoit turlarini yuklashda xatolik yuz berdi.")}
+                onRetry={countryRef}
+              />
+            ) : (
+              <CountryTable
+                data={countryData}
+                page={pageCountry}
+                setActiveTab={setActiveTab}
+                setFeatureId={setCountryId}
+                pageSize={pageSizeCountry}
+              />
+            )}
+          </TabsContent>
+
+          <TabsContent value="region" className="space-y-4">
+            {regionLoad ? (
+              <LoadingDisplay />
+            ) : regionError ? (
+              <ErrorDisplay
+                message={t("Sharoit turlarini yuklashda xatolik yuz berdi.")}
+                onRetry={regionRef}
+              />
+            ) : (
+              <RegionTable
+                data={regionData}
+                page={pageRegion}
+                featureId={countryId}
+                pageSize={pageSizeRegion}
+              />
+            )}
           </TabsContent>
         </Tabs>
       </div>

src/pages/tours/ui/TransportTable.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/shared/ui/form";
 import { Input } from "@/shared/ui/input";
 import IconSelect from "@/shared/ui/iocnSelect";
+import { Label } from "@/shared/ui/label";
 import {
   Table,
   TableBody,
@@ -312,15 +313,17 @@ const TransportTable = ({
                 <FormField
                   control={form.control}
                   name="icon_name"
-                  render={() => (
+                  render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t("Belgi (Icon)")}</FormLabel>
+                      <Label className="text-md">{t("Belgi (Icon)")}</Label>
-                      <FormControl className="w-full">
+
+                      <div className="flex flex-col gap-4 w-full">
                         <IconSelect
-                          setSelectedIcon={setSelectedIcon}
+                          selectedIcon={field.value ?? ""}
-                          selectedIcon={selectedIcon}
+                          setSelectedIcon={(val: string) => field.onChange(val)}
                         />
-                      </FormControl>
+                      </div>
+
                       <FormMessage />
                     </FormItem>
                   )}

src/pages/users/ui/Edit.tsx

@@ -19,7 +19,7 @@ import {
   FormMessage,
 } from "@/shared/ui/form";
 import { Input } from "@/shared/ui/input";
-import { ArrowLeft, Mail, Phone, Save, User } from "lucide-react";
+import { ArrowLeft, Loader2, Mail, Phone, Save, User } from "lucide-react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
@@ -250,8 +250,14 @@ export default function EditUser() {
                   disabled={isPending}
                   className="flex-1 h-11 rounded-lg bg-gradient-to-r from-emerald-600 to-teal-700 hover:from-emerald-700 hover:to-teal-800 text-white font-medium"
                 >
+                  {isPending ? (
+                    <Loader2 className="animate-spin" />
+                  ) : (
+                    <>
                       <Save className="w-5 h-5 mr-2" />
                       {t("Yangilash")}
+                    </>
+                  )}
                 </Button>
               </div>
             </form>

src/pages/users/ui/User.tsx

@@ -18,20 +18,28 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 export default function UserList() {
   const [searchQuery, setSearchQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initialPage = Number(searchParams.get("page")) || 1;
+  const [page, setPage] = useState(initialPage);
   const usersPerPage = 6;
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const updatePage = (newPage: number) => {
+    setPage(newPage);
+    setSearchParams({ page: newPage.toString() });
+  };
+
   const { data, isLoading, isError, refetch } = useQuery({
-    queryKey: ["user_all", currentPage, searchQuery],
+    queryKey: ["user_all", page, searchQuery],
     queryFn: () =>
       getAllUsers({
-        page: currentPage,
+        page,
         page_size: usersPerPage,
         search: searchQuery,
       }),
@@ -119,7 +127,7 @@ export default function UserList() {
               value={searchQuery}
               onChange={(e) => {
                 setSearchQuery(e.target.value);
-                setCurrentPage(1);
+                updatePage(1);
               }}
               className="w-full pl-14 pr-4 py-3 bg-slate-700/30 border border-slate-600/50 text-white placeholder-slate-400 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
             />
@@ -214,41 +222,40 @@ export default function UserList() {
                 ))}
             </div>
 
-            <div className="flex justify-end gap-2">
+            <div className="flex justify-end mt-10 gap-3">
               <button
-                disabled={currentPage === 1}
+                disabled={page === 1}
-                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+                onClick={() => updatePage(Math.max(page - 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"
+                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
               >
                 <ChevronLeft className="w-5 h-5" />
               </button>
 
-              {[...Array(data?.data.data.total_pages)].map((_, i) => (
+              {[...Array(data?.data.data.total_pages)].map((_, i) => {
+                const pageNum = i + 1;
+                return (
                   <button
                     key={i}
-                  onClick={() => setCurrentPage(i + 1)}
+                    onClick={() => updatePage(pageNum)}
-                  className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+                    className={`px-4 py-2 rounded-lg border font-medium transition-all ${
-                    currentPage === i + 1
+                      page === pageNum
-                      ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                        ? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
-                      : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                        : "border-slate-600 text-slate-300 hover:bg-slate-700/50"
                     }`}
                   >
-                  {i + 1}
+                    {pageNum}
                   </button>
-              ))}
+                );
+              })}
 
               <button
-                disabled={
+                disabled={page === data?.data.data.total_pages}
-                  data
-                    ? currentPage === data.data.data.total_pages
-                    : currentPage === 1
-                }
                 onClick={() =>
-                  setCurrentPage((p) =>
+                  updatePage(
-                    Math.min(p + 1, data ? data.data.data.total_pages : 1),
+                    Math.min(page + 1, 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"
+                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
               >
                 <ChevronRight className="w-5 h-5" />
               </button>

src/shared/config/api/URLs.ts

@@ -36,6 +36,9 @@ const BANNER = "dashboard/dashboard-site-banner/";
 const TOUR_ADMIN = "dashboard/dashboard-tour-admin/";
 const PAYMENT_AGENCY = "dashboard/dashboard-site-agency-payments/";
 const PAYOT_REQUEST = "dashboard/dashboard-agency-payout-request/";
+const COUNTRY = "dashboard/dashboard-ticket-settings-country/";
+const REGION = "dashboard/dashboard-ticket-settings-region/";
+const MEAL_PLAN = "dashboard/dashboard-hotel-meal-plan/";
 
 export {
   AGENCY_ORDERS,
@@ -45,6 +48,7 @@ export {
   AUTH_LOGIN,
   BANNER,
   BASE_URL,
+  COUNTRY,
   DOWNLOAD_PDF,
   FAQ,
   FAQ_CATEGORIES,
@@ -60,12 +64,14 @@ export {
   HOTEL_FEATURES_TYPE,
   HOTEL_TARIF,
   HPTEL_TYPES,
+  MEAL_PLAN,
   NEWS,
   NEWS_CATEGORY,
   OFFERTA,
   PAYMENT_AGENCY,
   PAYOT_REQUEST,
   POPULAR_TOURS,
+  REGION,
   SITE_SEO,
   SITE_SETTING,
   SUPPORT_AGENCY,

src/shared/config/api/httpClient.ts

@@ -30,10 +30,14 @@ const httpClient = axios.create({
 
 httpClient.interceptors.request.use(
   async (config) => {
-    // Faqat GET so'rovlarida Accept-Language headerini qo'shish
+    const method: string = (config.method || "").toLowerCase();
-    if (config.method?.toLowerCase() === "get") {
+
-      const language = i18n.language;
+    if (method === "get") {
-      config.headers["Accept-Language"] = language;
+      // GET so'rovlarda hozirgi i18n tilini yuboramiz
+      config.headers["Accept-Language"] = i18n.language;
+    } else if (["put", "patch", "post", "delete"].includes(method)) {
+      // PUT, PATCH, POST, DELETE da faqat "uz"
+      config.headers["Accept-Language"] = "uz";
     }
 
     const accessToken = getAuthToken();

src/shared/config/i18n/locales/ru/translation.json

@@ -8,6 +8,10 @@
   "Foydalanuvchilar": "Пользователи",
   "Tur firmalar": "Турфирмы",
   "Xodimlar": "Сотрудники",
+  "Siz agentlikga yangi foydalanuvchi qo'shmoqchimisiz": "Вы хотите добавить нового пользователя в агентство",
+  "Foydalanuvchi qo'shish": "Добавить пользователя",
+  "Ovqatlanish turlari": "Виды питания",
+  "Davlatlar": "Государство",
   "Byudjet": "Бюджет",
   "Turlar": "Туры",
   "Tur sozlamalari": "Настройки туров",

src/shared/config/i18n/locales/uz/translation.json

@@ -10,6 +10,10 @@
   "Xodimlar": "Xodimlar",
   "Byudjet": "Byudjet",
   "Turlar": "Turlar",
+  "Siz agentlikga yangi foydalanuvchi qo'shmoqchimisiz": "Siz agentlikga yangi foydalanuvchi qo'shmoqchimisiz",
+  "Foydalanuvchi qo'shish": "Foydalanuvchi qo'shish",
+  "Ovqalanish turlari": "Ovqalanish turlari",
+  "Davlatlar": "Davlatlar",
   "Tur sozlamalari": "Tur sozlamalari",
   "Bronlar": "Bronlar",
   "Yangiliklar": "Yangiliklar",

src/shared/lib/iconTranslations.ts

@@ -1,7 +1,6 @@
 export const hotelIcons = [
   { name: "Wifi", uz: "Wi-Fi", ru: "Wi-Fi" },
   { name: "Bus", uz: "Avtobus", ru: "Автобус" },
-  { name: "CarFront", uz: "Auto", ru: "Авто" },
   { name: "PlaneTakeoff", uz: "Avia", ru: "Авиа" },
   { name: "WifiOff", uz: "Wi-Fi mavjud emas", ru: "Нет Wi-Fi" },
   { name: "Tv", uz: "Televizor", ru: "Телевизор" },

src/shared/ui/popover.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
 import { cn } from "@/shared/lib/utils";
 
@@ -43,4 +43,4 @@ function PopoverAnchor({
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };