npm update pnpm

coutry crud added
table id
2025-12-25 17:52:38 +05:00 · 2025-12-04 12:41:01 +05:00 · 2025-11-24 18:17:27 +05:00 · 2025-11-24 18:08:09 +05:00 · 2025-11-18 15:06:04 +05:00 · 2025-11-17 13:09:24 +05:00
43 changed files with 8286 additions and 7660 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,6 @@
+# pnpm configuration
+
+audit=true
+ignore-scripts=false
+strict-ssl=true
+minimum-release-age=262974
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/pages/agencies/ui/Agencies.tsx
+++ b/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 itemsPerPage = 4;
+  const [searchParams, setSearchParams] = useSearchParams();
+  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))}
-            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"
+            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"
          >
            <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)}
-              className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-                currentPage === i + 1
-                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                onClick={() => updatePage(pageNum)}
+                className={`px-4 py-2 rounded-lg border font-medium transition-all ${
+                  currentPage === 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"
                }`}
              >
-              {i + 1}
+                {pageNum}
              </button>
-          ))}
+            );
+          })}

          <button
            disabled={currentPage === data?.data.data.total_pages}
            onClick={() =>
-              setCurrentPage((p) =>
-                Math.min(p + 1, data ? data?.data.data.total_pages : 0),
+              updatePage(
+                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>
--- a/src/pages/agencies/ui/AgencyDetail.tsx
+++ b/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>
        )}
--- a/src/pages/agencies/ui/AgencyUsersSection.tsx
+++ b/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>
-          <CardTitle className="text-2xl text-white flex items-center gap-2">
-            <User className="w-6 h-6" />
-            {t("Agentlik foydalanuvchilari")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="text-center text-gray-400 py-8">
-            {t("Hozircha foydalanuvchilar yo'q")}
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className="border border-gray-700 shadow-lg bg-gray-800">
-      <CardHeader>
+      <CardHeader className="flex justify-between items-center">
+        <div>
          <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>
  );
--- a/src/pages/agencies/ui/EditAgecy.tsx
+++ b/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,
    });
  };
--- a/src/pages/employees/ui/Employees.tsx
+++ b/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],
-    queryFn: () => getAllEmployees({ page: currentPage, page_size: 10 }),
+    queryKey: ["employees", page],
+    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}
-                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+                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?.total_pages || 0)].map((_, i) => (
+              {[...Array(data?.total_pages)].map((_, i) => {
+                const pageNum = i + 1;
+                return (
                  <button
                    key={i}
-                  onClick={() => setCurrentPage(i + 1)}
-                  className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-                    currentPage === i + 1
-                      ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                      : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                    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"
                    }`}
                  >
-                  {i + 1}
+                    {pageNum}
                  </button>
-              ))}
+                );
+              })}

              <button
-                disabled={currentPage === data?.total_pages}
+                disabled={page === data?.total_pages}
                onClick={() =>
-                  setCurrentPage((p) =>
-                    Math.min(p + 1, data ? data?.total_pages : 0),
-                  )
+                  updatePage(Math.min(page + 1, 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>
--- a/src/pages/faq/ui/Faq.tsx
+++ b/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_size: 10,
+        page,
+        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}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+          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(faq?.total_pages)].map((_, i) => (
+        {[...Array(faq?.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
            <button
              key={i}
-            onClick={() => setCurrentPage(i + 1)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-              currentPage === i + 1
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+              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"
              }`}
            >
-            {i + 1}
+              {pageNum}
            </button>
-        ))}
+          );
+        })}

        <button
-          disabled={currentPage === faq?.total_pages}
-          onClick={() =>
-            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 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+          disabled={page === faq?.total_pages}
+          onClick={() => updatePage(Math.min(page + 1, faq?.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>
--- a/src/pages/faq/ui/FaqCategory.tsx
+++ b/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}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+          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(category?.total_pages)].map((_, i) => (
+        {[...Array(category?.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
            <button
              key={i}
-            onClick={() => setCurrentPage(i + 1)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-              currentPage === i + 1
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+              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"
              }`}
            >
-            {i + 1}
+              {pageNum}
            </button>
-        ))}
+          );
+        })}

        <button
-          disabled={currentPage === category?.total_pages}
+          disabled={page === category?.total_pages}
          onClick={() =>
-            setCurrentPage((p) =>
-              Math.min(p + 1, category ? category.total_pages : 0),
-            )
+            updatePage(Math.min(page + 1, category?.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>
--- a/src/pages/finance/ui/Finance.tsx
+++ b/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<
-    | ""
-    | "pending_payment"
-    | "pending_confirmation"
-    | "confirmed"
-    | "completed"
-    | "cancelled"
-  >("");
+  const [filterStatus, setFilterStatus] = useState(filterParam);

  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);
-    setCurrentPageAgency(1);
-  }, [filterStatus, tab]);
+    if (filterParam === "null") {
+      setFilterStatus("");
+    }
+  }, [filterParam]);

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["list_order_user", currentPage, filterStatus],
    queryFn: () =>
      getAllOrder({
        page: currentPage,
-        page_size: 10,
-        order_status: filterStatus,
+        page_size: 12,
+        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")
--- a/src/pages/news/lib/form.ts
+++ b/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(),
--- a/src/pages/news/lib/type.ts
+++ b/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;
--- a/src/pages/news/ui/News.tsx
+++ b/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],
-    queryFn: () => getAllNews({ page: currentPage, page_size: 10 }),
+    queryKey: ["all_news", page],
+    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}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+          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(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)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-              currentPage === i + 1
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+              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"
              }`}
            >
-            {i + 1}
+              {pageNum}
            </button>
-        ))}
+          );
+        })}

        <button
-          disabled={currentPage === allNews?.data.data.total_pages}
+          disabled={page === allNews?.data.data.total_pages}
          onClick={() =>
-            setCurrentPage((p) =>
-              Math.min(p + 1, allNews ? allNews?.data.data.total_pages : 0),
-            )
+            updatePage(Math.min(page + 1, allNews?.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>
--- a/src/pages/news/ui/NewsCategory.tsx
+++ b/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>
--- a/src/pages/news/ui/StepTwo.tsx
+++ b/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
-            ? mappedSections
-            : [{ image: "", text: "", text_ru: "" }],
+          detail.post_images?.map((img) => ({
+            id: img.id,
+            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_ru", stepOneData.desc_ru);
+    formData.append("text", values.desc);
+    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)
-        formData.append(`post_images[${i}]`, section.image);
-      if (section.text) formData.append(`post_text[${i}]`, section.text);
+      if (section.id) {
+        formData.append(`updates[${i}]id`, String(section.id));
+
+        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) });
-    else added(formData);
+    if (id) {
+      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>
--- a/src/pages/payout-request/ui/PayoutRequest.tsx
+++ b/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_size: 10,
+        page,
+        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}
-          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+          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) => (
+        {[...Array(data?.data.data.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
            <button
              key={i}
-            onClick={() => setCurrentPage(i + 1)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-              currentPage === i + 1
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+              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"
              }`}
            >
-            {i + 1}
+              {pageNum}
            </button>
-        ))}
+          );
+        })}

        <button
-          disabled={currentPage === data?.data.data.total_pages}
+          disabled={page === data?.data.data.total_pages}
          onClick={() =>
-            setCurrentPage((p) =>
-              Math.min(p + 1, data ? data?.data.data.total_pages : 0),
-            )
+            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 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>
--- a/src/pages/site-banner/ui/Banner.tsx
+++ b/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],
-    queryFn: () => getBanner({ page: currentPage, page_size: 10 }),
+    queryKey: ["all_banner", page],
+    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}
-            onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-            className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+            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(banner?.total_pages)].map((_, i) => (
+          {[...Array(banner?.total_pages)].map((_, i) => {
+            const pageNum = i + 1;
+            return (
              <button
                key={i}
-              onClick={() => setCurrentPage(i + 1)}
-              className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-                currentPage === i + 1
-                  ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                  : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                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"
                }`}
              >
-              {i + 1}
+                {pageNum}
              </button>
-          ))}
+            );
+          })}

          <button
-            disabled={currentPage === banner?.total_pages}
+            disabled={page === banner?.total_pages}
            onClick={() =>
-              setCurrentPage((p) =>
-                Math.min(p + 1, banner ? banner?.total_pages : 0),
-              )
+              updatePage(Math.min(page + 1, banner?.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>
--- a/src/pages/support/ui/SupportAgency.tsx
+++ b/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"
--- a/src/pages/tours/lib/api.ts
+++ b/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,
 };
--- a/src/pages/tours/lib/column.tsx
+++ b/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>
+      );
+    },
+  },
+];
--- a/src/pages/tours/lib/form.ts
+++ b/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, {
-    message: "Ketish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
+  departure: z.string().min(1, {
+    message: "Ketish joyi eng kamida 1 ta belgidan iborat bo'lishi kerak.",
  }),
-  departure_ru: z.string().min(2, {
-    message: "Ketish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
-  }),
-  destination: 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.",
+  // departure_ru: z.string().min(2, {
+  //   message: "Ketish joyi eng kamida 2 ta belgidan iborat bo'lishi kerak.",
+  // }),
+  destination: z.string().min(1, {
+    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.",
+  // }),
  location_name: z.string().min(2, {
    message: "Eng kamida 2 ta belgidan iborat bo'lishi kerak.",
  }),
--- a/src/pages/tours/lib/type.ts
+++ b/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_ru: string;
-    departure_uz: string;
-    destination: string;
-    destination_ru: string;
-    destination_uz: string;
+    departure: {
+      id: number;
+      name: string;
+      name_ru: string;
+      country: {
+        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_ru: string;
-    destination: string;
-    destination_ru: string;
+    departure: number;
+    // departure_ru: string;
+    destination: number;
+    // 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_ru: string;
-    departure_uz: string;
-    destination: string;
-    destination_ru: string;
-    destination_uz: string;
+    departure: {
+      id: number;
+      name: string;
+      name_ru: string;
+      country: {
+        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;
+  };
+}
--- a/src/pages/tours/ui/CountryTable.tsx
+++ b/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;
--- a/src/pages/tours/ui/CreateEditTour.tsx
+++ b/src/pages/tours/ui/CreateEditTour.tsx
@@ -22,6 +22,7 @@ const CreateEditTour = () => {
    select(data) {
      return data.data;
    },
+    enabled: !!id,
  });

  return (
--- a/src/pages/tours/ui/HotelType.tsx
+++ b/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;
--- a/src/pages/tours/ui/MealTable.tsx
+++ b/src/pages/tours/ui/MealTable.tsx
@@ -1,11 +1,11 @@
 import {
-  hotelTypeCreate,
-  hotelTypeDelete,
-  hotelTypeDetail,
-  hotelTypeUpdate,
+  hotelMealCreate,
+  hotelMealDelete,
+  hotelMealDetail,
+  hotelMealUpdate,
 } from "@/pages/tours/lib/api";
-import { TypeColumns } from "@/pages/tours/lib/column";
-import type { Type } from "@/pages/tours/lib/type";
+import { MealColumns } from "@/pages/tours/lib/column";
+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;
-          next: string;
+          previous: string | null;
+          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({
-    queryKey: ["detail_type", editId],
-    queryFn: () => hotelTypeDetail({ id: editId! }),
+  const { data: badgeDetail } = useQuery({
+    queryKey: ["detail_meal", 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: ["all_type"] });
+      queryClient.refetchQueries({ queryKey: ["detail_meal"] });
+      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 } }) =>
-      hotelTypeCreate({ body }),
+    mutationFn: ({
+      body,
+    }: {
+      body: {
+        name: string;
+        name_ru: string;
+      };
+    }) => hotelMealCreate(body),
    onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ["detail_type"] });
-      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      queryClient.refetchQueries({ queryKey: ["detail_meal"] });
+      queryClient.refetchQueries({ queryKey: ["all_meal"] });
      setOpen(false);
      form.reset();
    },
@@ -129,11 +135,14 @@ const MealTable = ({
      id,
    }: {
      id: number;
-      body: { name: string; name_ru: string };
-    }) => hotelTypeUpdate({ body, id }),
+      body: {
+        name: string;
+        name_ru: string;
+      };
+    }) => hotelMealUpdate({ body, id }),
    onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ["detail_type"] });
-      queryClient.refetchQueries({ queryKey: ["all_type"] });
+      queryClient.refetchQueries({ queryKey: ["detail_meal"] });
+      queryClient.refetchQueries({ queryKey: ["all_meal"] });
      setOpen(false);
      form.reset();
    },
@@ -154,11 +163,11 @@ const MealTable = ({
  });

  useEffect(() => {
-    if (typeDetail) {
-      form.setValue("name", typeDetail.data.data.name_uz);
-      form.setValue("name_ru", typeDetail.data.data.name_ru);
+    if (badgeDetail) {
+      form.setValue("name", badgeDetail.data.data.name_uz);
+      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;
--- a/src/pages/tours/ui/RegionTable.tsx
+++ b/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;
--- a/src/pages/tours/ui/StepOne.tsx
+++ b/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 { ChevronDownIcon, SquareCheckBig, XIcon } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+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) => ({
-        transport: i + 1,
+      tour.transports?.map((t) => ({
+        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_ru: tour.departure_ru ?? "",
-      destination: tour.destination_uz ?? "",
-      destination_ru: tour.destination_ru ?? "",
+      departure: tour.departure?.id.toString() ?? "",
+      // departure_ru: tour.departure_ru ?? "",
+      destination: tour.destination?.id.toString() ?? "",
+      // 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 }) => (
-              <FormItem>
-                <Label className="text-md">{t("Ketish joyi")}</Label>
+            control={form.control}
+            render={({ field }) => {
+              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
-                    placeholder="Toshkent"
-                    {...field}
-                    className="h-12 !text-md"
-                  />
+                          <Button
+                            variant="outline"
+                            className={cn(
+                              "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 />
-              </FormItem>
+                      </PopoverTrigger>
+                      <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 }) => (
-              <FormItem>
-                <Label className="text-md">{t("Borish joyi")}</Label>
+            control={form.control}
+            render={({ field }) => {
+              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
-                    placeholder="Dubai"
-                    {...field}
-                    className="h-12 !text-md"
-                  />
+                          <Button
+                            variant="outline"
+                            className={cn(
+                              "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 />
-              </FormItem>
+                      </PopoverTrigger>
+                      <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>
--- a/src/pages/tours/ui/StepTwo.tsx
+++ b/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 =
-        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("mealPlan", hotel.meal_plan.toString());

      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 =
-      data.mealPlan === "Breakfast Only"
-        ? "breakfast"
-        : data.mealPlan === "Half Board"
-          ? "half_board"
-          : data.mealPlan === "Full Board"
-            ? "full_board"
-            : "all_inclusive";
-    formData.append("meal_plan", mealPlan);
+    formData.append("meal_plan", data.mealPlan);

    data.hotelType &&
      data.hotelType.forEach((id) => formData.append("hotel_type", id));
-    data.hotelFeatures &&
-      data.hotelFeatures.forEach((id) => formData.append("hotel_features", id));
+    data.hotelFeaturesType &&
+      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 }) => (
-              <FormItem>
-                <Label>{t("Taom rejasi")}</Label>
+            control={form.control}
+            render={({ field }) => {
+              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}>
-                    <SelectTrigger className="!h-12 w-full">
-                      <SelectValue placeholder={t("Tanlang")} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {mealPlans.map((plan) => (
-                        <SelectItem key={plan} value={plan}>
-                          {t(plan)}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={openMeal}
+                          className={cn(
+                            "w-full h-12 justify-between",
+                            !field.value && "text-muted-foreground",
+                          )}
+                        >
+                          {selectedUser
+                            ? `${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 */}
--- a/src/pages/tours/ui/TourDetail.tsx
+++ b/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>
--- a/src/pages/tours/ui/Tours.tsx
+++ b/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))}
-          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"
+          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) => (
+
+        {[...Array(data?.data.data.total_pages)].map((_, i) => {
+          const pageNum = i + 1;
+          return (
            <button
              key={i}
-            onClick={() => setPage(i + 1)}
-            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-              page === i + 1
-                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+              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"
              }`}
            >
-            {i + 1}
+              {pageNum}
            </button>
-        ))}
+          );
+        })}
+
        <button
          disabled={page === data?.data.data.total_pages}
          onClick={() =>
-            setPage((p) =>
-              Math.min(p + 1, data ? data.data.data.total_pages : 1),
-            )
+            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 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>
--- a/src/pages/tours/ui/ToursSetting.tsx
+++ b/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],
-    queryFn: () => getAllAmenities({ page, page_size: pageSize }),
+    queryKey: ["all_amenities", pageAmenities, pageSizeAmenities],
+    queryFn: () =>
+      getAllAmenities({ page: pageAmenities, page_size: pageSizeAmenities }),
    select: (res) => res.data.data,
  });

-  if (
-    isLoading ||
-    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>
-    );
-  }
+  const pageMeal = parseInt(searchParams.get("pageMeal") || "1", 10);
+  const pageSizeMeal = parseInt(searchParams.get("pageSizeMeal") || "10", 10);

-  if (
-    isError ||
-    tarifError ||
-    transportError ||
-    typeError ||
-    featureError ||
-    featureTypeError ||
-    amenitiesError
-  ) {
-    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 {
+    data: mealData,
+    isLoading: mealLoad,
+    isError: mealError,
+    refetch: mealRef,
+  } = useQuery({
+    queryKey: ["all_meal", pageMeal, pageSizeMeal],
+    queryFn: () => hotelMealList({ page: pageMeal, page_size: pageSizeMeal }),
+    select: (res) => res.data.data,
+  });

  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
-              data={typeData}
-              page={pageTransport}
-              pageSize={pageSizeTransport}
+            {typeLoad ? (
+              <LoadingDisplay />
+            ) : typeError ? (
+              <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>
--- a/src/pages/tours/ui/TransportTable.tsx
+++ b/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>
-                      <FormControl className="w-full">
+                      <Label className="text-md">{t("Belgi (Icon)")}</Label>
+
+                      <div className="flex flex-col gap-4 w-full">
                        <IconSelect
-                          setSelectedIcon={setSelectedIcon}
-                          selectedIcon={selectedIcon}
+                          selectedIcon={field.value ?? ""}
+                          setSelectedIcon={(val: string) => field.onChange(val)}
                        />
-                      </FormControl>
+                      </div>
+
                      <FormMessage />
                    </FormItem>
                  )}
--- a/src/pages/users/ui/Edit.tsx
+++ b/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>
--- a/src/pages/users/ui/User.tsx
+++ b/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}
-                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                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) => (
+              {[...Array(data?.data.data.total_pages)].map((_, i) => {
+                const pageNum = i + 1;
+                return (
                  <button
                    key={i}
-                  onClick={() => setCurrentPage(i + 1)}
-                  className={`px-4 py-2 rounded-lg border transition-all font-medium ${
-                    currentPage === i + 1
-                      ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
-                      : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+                    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"
                    }`}
                  >
-                  {i + 1}
+                    {pageNum}
                  </button>
-              ))}
+                );
+              })}

              <button
-                disabled={
-                  data
-                    ? currentPage === data.data.data.total_pages
-                    : currentPage === 1
-                }
+                disabled={page === data?.data.data.total_pages}
                onClick={() =>
-                  setCurrentPage((p) =>
-                    Math.min(p + 1, data ? data.data.data.total_pages : 1),
+                  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 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>
--- a/src/shared/config/api/URLs.ts
+++ b/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,
--- a/src/shared/config/api/httpClient.ts
+++ b/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
-    if (config.method?.toLowerCase() === "get") {
-      const language = i18n.language;
-      config.headers["Accept-Language"] = language;
+    const method: string = (config.method || "").toLowerCase();
+
+    if (method === "get") {
+      // 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();
--- a/src/shared/config/i18n/locales/ru/translation.json
+++ b/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": "Настройки туров",
--- a/src/shared/config/i18n/locales/uz/translation.json
+++ b/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",
--- a/src/shared/lib/iconTranslations.ts
+++ b/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: "Телевизор" },
--- a/src/shared/ui/popover.tsx
+++ b/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 };
Author	SHA1	Message	Date
Samandar Turgunboyev	5918da89be	npm update pnpm	2025-12-25 17:52:38 +05:00
Samandar Turgunboyev	da46b6cac1	coutry crud added	2025-12-04 12:41:01 +05:00
Samandar Turgunboyev	394d158947	table id	2025-11-24 18:17:27 +05:00
Samandar Turgunboyev	3eddadaad0	bug fix	2025-11-24 18:08:09 +05:00
Samandar Turgunboyev	11f88d1edf	news added and update bug fix	2025-11-18 15:06:04 +05:00
Samandar Turgunboyev	0f650ad15a	added pagination params page	2025-11-17 13:09:24 +05:00
Samandar Turgunboyev	41fe8725c7	bug fix	2025-11-17 11:56:12 +05:00
Samandar Turgunboyev	fa19172634	bug fix	2025-11-12 15:41:59 +05:00
Samandar Turgunboyev	e09ec2b7d5	put create and delete header-language request uz	2025-11-12 13:53:30 +05:00
Samandar Turgunboyev	64f8467f41	bug fix loading	2025-11-11 16:05:22 +05:00