api ulandi

src/pages/support/lib/api.ts

@@ -0,0 +1,64 @@
+import type {
+  GetSupportAgency,
+  GetSupportUser,
+} from "@/pages/support/lib/types";
+import httpClient from "@/shared/config/api/httpClient";
+import { SUPPORT_AGENCY, SUPPORT_USER } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+const getSupportUser = async (params: {
+  page: number;
+  page_size: number;
+  status: "pending" | "done" | "failed" | "";
+}): Promise<AxiosResponse<GetSupportUser>> => {
+  const res = await httpClient.get(SUPPORT_USER, { params });
+  return res;
+};
+
+const updateSupportUser = async ({
+  body,
+  id,
+}: {
+  id: number;
+  body: {
+    name: string;
+    phone_number: string;
+    travel_agency: number | null;
+    status: "pending" | "done" | "failed";
+  };
+}) => {
+  const res = await httpClient.patch(`${SUPPORT_USER}${id}/`, body);
+  return res;
+};
+
+const deleteSupportUser = async ({ id }: { id: number }) => {
+  const res = await httpClient.delete(`${SUPPORT_USER}${id}/`);
+  return res;
+};
+
+//support for agency
+
+const getSupportAgency = async (params: {
+  page: number;
+  page_size: number;
+  search: string;
+  status: "pending" | "approved" | "cancelled" | "";
+}): Promise<AxiosResponse<GetSupportAgency>> => {
+  const res = await httpClient.get(SUPPORT_AGENCY, { params });
+  return res;
+};
+
+const getSupportAgencyDetail = async (
+  id: number,
+): Promise<AxiosResponse<any>> => {
+  const res = await httpClient.get(`${SUPPORT_AGENCY}${id}/`);
+  return res;
+};
+
+export {
+  deleteSupportUser,
+  getSupportAgency,
+  getSupportAgencyDetail,
+  getSupportUser,
+  updateSupportUser,
+};

src/pages/support/lib/types.ts

@@ -0,0 +1,80 @@
+export interface GetSupportUser {
+  status: boolean;
+  data: {
+    links: {
+      previous: null | string;
+      next: null | string;
+    };
+    total_items: number;
+    total_pages: number;
+    page_size: number;
+    current_page: number;
+    results: GetSupportUserRes[];
+  };
+}
+
+export interface GetSupportUserRes {
+  id: number;
+  name: string;
+  phone_number: string;
+  travel_agency: null | number;
+  status: "pending" | "done" | "failed";
+}
+
+export interface GetSupportAgency {
+  status: boolean;
+  data: {
+    links: {
+      previous: null | string;
+      next: null | string;
+    };
+    total_items: number;
+    total_pages: number;
+    page_size: number;
+    current_page: number;
+    results: GetSupportAgencyRes[];
+  };
+}
+
+export interface GetSupportAgencyRes {
+  id: number;
+  status: "pending" | "approved" | "cancelled";
+  name: string;
+  addres: string;
+  email: string;
+  phone: string;
+  web_site: string;
+  travel_agency_documents: [
+    {
+      file: string;
+    },
+  ];
+}
+
+export interface GetSupportAgencyDetail {
+  status: boolean;
+  data: {
+    links: {
+      previous: null | string;
+      next: null | string;
+    };
+    total_items: number;
+    total_pages: number;
+    page_size: number;
+    current_page: number;
+    results: {
+      id: number;
+      status: "pending" | "approved" | "cancelled";
+      name: string;
+      addres: string;
+      email: string;
+      phone: string;
+      web_site: string;
+      travel_agency_documents: [
+        {
+          file: string;
+        },
+      ];
+    }[];
+  };
+}

src/pages/support/ui/SupportAgency.tsx

@@ -1,5 +1,11 @@
-import { XIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import { getSupportAgency } from "@/pages/support/lib/api";
+import type { GetSupportAgencyRes } from "@/pages/support/lib/types";
+import formatPhone from "@/shared/lib/formatPhone";
+import { Button } from "@/shared/ui/button";
+import { useQuery } from "@tanstack/react-query";
+import { AlertTriangle, Loader2, XIcon } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 interface Data {
@@ -43,110 +49,118 @@ const sampleData: Data[] = [
 
 const SupportAgency = ({ requests = sampleData }) => {
   const [query, setQuery] = useState("");
-  const [selected, setSelected] = useState<Data | null>(null);
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState<GetSupportAgencyRes | null>(null);
 
-  const filtered = useMemo(() => {
-    if (!query.trim()) return requests;
-    const q = query.toLowerCase();
-    return requests.filter(
-      (r) =>
-        (r.name && r.name.toLowerCase().includes(q)) ||
-        (r.email && r.email.toLowerCase().includes(q)) ||
-        (r.phone && r.phone.toLowerCase().includes(q)),
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["support_agency"],
+    queryFn: () =>
+      getSupportAgency({ page: 1, page_size: 10, search: "", status: "" }),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
+        <Loader2 className="w-10 h-10 animate-spin text-cyan-400" />
+        <p className="text-slate-400">{t("Ma'lumotlar yuklanmoqda...")}</p>
+      </div>
     );
-  }, [requests, query]);
+  }
+
+  if (isError) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 w-full text-center text-white gap-4">
+        <AlertTriangle className="w-10 h-10 text-red-500" />
+        <p className="text-lg">
+          {t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
+        </p>
+        <Button
+          onClick={() => refetch()}
+          className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg px-5 py-2 hover:opacity-90"
+        >
+          {t("Qayta urinish")}
+        </Button>
+      </div>
+    );
+  }
 
   return (
     <div className="p-4 w-full mx-auto">
-      <h2 className="text-2xl font-semibold mb-4">Agentlik soʻrovlari</h2>
+      <h2 className="text-2xl font-semibold mb-4">
+        {t("Agentlik so'rovlari")}
+      </h2>
 
       <div className="flex gap-3 mb-6">
         <input
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          placeholder="Qidiruv (ism, email yoki telefon)..."
+          placeholder={t("Qidiruv (ism, email yoki telefon)...")}
           className="flex-1 p-2 border rounded-md focus:outline-none focus:ring"
         />
         <button
           onClick={() => setQuery("")}
           className="px-4 py-2 bg-gray-500 rounded-md hover:bg-gray-300 transition"
         >
-          Tozalash
+          {t("Tozalash")}
         </button>
       </div>
 
-      {filtered.length === 0 ? (
-        <div className="text-center text-gray-500">Soʻrov topilmadi.</div>
+      {data && data.data.data.results.length === 0 ? (
+        <div className="text-center text-gray-500">{t("So'rov topilmadi")}</div>
       ) : (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {filtered.map((r) => (
-            <div
-              key={r.id}
-              className="border rounded-lg p-4 shadow-sm hover:shadow-md transition bg-gray-800 text-white"
-            >
-              <div className="flex items-start justify-between">
-                <div>
-                  <h3 className="text-lg font-medium">{r.name}</h3>
-                  <p className="text-md">{r.address}</p>
+          {data &&
+            data.data.data.results.map((r) => (
+              <div
+                key={r.id}
+                className="border rounded-lg p-4 shadow-sm hover:shadow-md transition bg-gray-800 text-white"
+              >
+                <div className="flex items-start justify-between">
+                  <div>
+                    <h3 className="text-lg font-medium">{r.name}</h3>
+                    <p className="text-md">{r.addres}</p>
+                  </div>
+                  <div className="text-md">{formatPhone(r.phone)}</div>
                 </div>
-                <div className="text-md">{r.phone}</div>
-              </div>
 
-              <div className="mt-3 text-sm text-white">
-                <div>
-                  <strong>Email:</strong>{" "}
-                  <Link to={`mailto:${r.email}`} className="text-white">
-                    {r.email}
+                <div className="mt-3 text-sm text-white">
+                  <div>
+                    <strong>{t("Email")}:</strong>{" "}
+                    <Link to={`mailto:${r.email}`} className="text-white">
+                      {r.email}
+                    </Link>
+                  </div>
+                  {r.web_site && (
+                    <div>
+                      <strong>{t("Veb-sayt")}:</strong>{" "}
+                      <a
+                        href={r.web_site}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-white hover:underline"
+                      >
+                        {r.web_site.replace(/^https?:\/\//, "")}
+                      </a>
+                    </div>
+                  )}
+                </div>
+
+                <div className="mt-4 flex gap-2">
+                  <button
+                    onClick={() => setSelected(r)}
+                    className="px-3 py-1 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 transition"
+                  >
+                    {t("Tafsilotlar")}
+                  </button>
+                  <Link
+                    to={`mailto:${r.email}`}
+                    className="px-3 py-1 rounded border text-sm transition"
+                  >
+                    {t("Javob yozish")}
                   </Link>
                 </div>
-                {r.instagram && (
-                  <div>
-                    <strong>Instagram:</strong>{" "}
-                    <a
-                      href={r.instagram}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-white hover:underline"
-                    >
-                      @
-                      {r.instagram.replace(
-                        /^https?:\/\/(www\.)?instagram\.com\/?/,
-                        "",
-                      )}
-                    </a>
-                  </div>
-                )}
-                {r.web_site && (
-                  <div>
-                    <strong>Website:</strong>{" "}
-                    <a
-                      href={r.web_site}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-white hover:underline"
-                    >
-                      {r.web_site.replace(/^https?:\/\//, "")}
-                    </a>
-                  </div>
-                )}
               </div>
-
-              <div className="mt-4 flex gap-2">
-                <button
-                  onClick={() => setSelected(r)}
-                  className="px-3 py-1 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 transition"
-                >
-                  Tafsilotlar
-                </button>
-                <Link
-                  to={`mailto:${r.email}`}
-                  className="px-3 py-1 rounded border text-sm transition"
-                >
-                  Javob yozish
-                </Link>
-              </div>
-            </div>
-          ))}
+            ))}
         </div>
       )}
 
@@ -167,11 +181,11 @@ const SupportAgency = ({ requests = sampleData }) => {
             </button>
 
             <h3 className="text-xl font-semibold mb-2">{selected.name}</h3>
-            <p className="text-md text-white mb-4">{selected.address}</p>
+            <p className="text-md text-white mb-4">{selected.addres}</p>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <div>
-                <div className="text-md text-white">Email</div>
+                <div className="text-md text-white">{t("Email")}</div>
                 <a
                   href={`mailto:${selected.email}`}
                   className="block text-white hover:underline"
@@ -181,28 +195,12 @@ const SupportAgency = ({ requests = sampleData }) => {
               </div>
 
               <div>
-                <div className="text-md text-white">Telefon</div>
-                <div>{selected.phone}</div>
+                <div className="text-md text-white">{t("Telefon raqam")}</div>
+                <div>{formatPhone(selected.phone)}</div>
               </div>
 
               <div>
-                <div className="text-md text-white">Instagram</div>
-                {selected.instagram ? (
-                  <a
-                    href={selected.instagram}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="block text-white hover:underline"
-                  >
-                    {selected.instagram}
-                  </a>
-                ) : (
-                  <div className="text-white">—</div>
-                )}
-              </div>
-
-              <div>
-                <div className="text-xs text-white">Website</div>
+                <div className="text-xs text-white">{t("Veb-sayt")}</div>
                 {selected.web_site ? (
                   <a
                     href={selected.web_site}
@@ -219,26 +217,27 @@ const SupportAgency = ({ requests = sampleData }) => {
             </div>
 
             <div className="mt-5">
-              <div className="text-sm font-medium mb-2">Hujjatlar</div>
-              {selected.documents && selected.documents.length > 0 ? (
+              <div className="text-sm font-medium mb-2">{t("Hujjatlar")}</div>
+              {selected.travel_agency_documents &&
+              selected.travel_agency_documents.length > 0 ? (
                 <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-                  {selected.documents.map((doc, i) => (
+                  {selected.travel_agency_documents.map((doc, i) => (
                     <a
                       key={i}
-                      href={doc}
+                      href={doc.file}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="group relative aspect-square border-2 border-gray-200 rounded-lg overflow-hidden hover:border-blue-500 transition"
                     >
                       <img
-                        src={doc}
+                        src={doc.file}
                         alt={`Hujjat ${i + 1}`}
                         className="w-full h-full object-cover"
                       />
                       <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition flex items-end">
                         <div className="w-full bg-gradient-to-t from-black/70 to-transparent p-2">
                           <span className="text-white text-xs font-medium">
-                            Hujjat {i + 1}
+                            {t("Hujjat")} {i + 1}
                           </span>
                         </div>
                       </div>
@@ -246,7 +245,7 @@ const SupportAgency = ({ requests = sampleData }) => {
                   ))}
                 </div>
               ) : (
-                <div className="text-gray-500">Hujjat topilmadi</div>
+                <div className="text-gray-500">{t("Hujjat topilmadi")}</div>
               )}
             </div>
 
@@ -258,7 +257,7 @@ const SupportAgency = ({ requests = sampleData }) => {
                 }}
                 className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition"
               >
-                Qabul qilish
+                {t("Qabul qilish")}
               </button>
               <button
                 onClick={() => {
@@ -267,7 +266,7 @@ const SupportAgency = ({ requests = sampleData }) => {
                 }}
                 className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"
               >
-                Rad etish
+                {t("Rad etish")}
               </button>
             </div>
           </div>

src/pages/support/ui/SupportTours.tsx

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