-
Jo'nash sanasi
+
{t("Jo'nash sanasi")}
{new Date(tour.departure_date).toLocaleDateString("uz-UZ")}
@@ -302,31 +305,31 @@ export default function TourDetailPage() {
value="overview"
className="data-[state=active]:bg-gray-700 data-[state=active]:text-white text-gray-400"
>
- Umumiy
+ {t("Umumiy")}
- Marshshrut
+ {t("Marshshrut")}
- Xizmatlar
+ {t("Xizmatlar")}
- Mehmonxona
+ {t("Mehmonxona")}
- Sharhlar
+ {t("Sharhlar")}
@@ -334,7 +337,7 @@ export default function TourDetailPage() {
- Tur haqida ma'lumot
+ {t("Tur haqida ma'lumot")}
@@ -343,7 +346,9 @@ export default function TourDetailPage() {
-
Jo'nash joyi
+
+ {t("Jo'nash joyi")}
+
{tour.departure}
@@ -353,7 +358,9 @@ export default function TourDetailPage() {
-
Yo'nalish
+
+ {t("Yo'nalish")}
+
{tour.destination}
@@ -363,7 +370,7 @@ export default function TourDetailPage() {
-
Tillar
+
{t("Tillar")}
{tour.languages}
@@ -375,7 +382,9 @@ export default function TourDetailPage() {
-
Mehmonxona
+
+ {t("Mehmonxona")}
+
{tour.hotel_info}
@@ -385,7 +394,9 @@ export default function TourDetailPage() {
-
Ovqatlanish
+
+ {t("Ovqatlanish")}
+
{tour.hotel_meals}
@@ -395,7 +406,7 @@ export default function TourDetailPage() {
-
Tarif
+
{t("Tarif")}
{tour.tariff[0]?.name}
@@ -406,7 +417,7 @@ export default function TourDetailPage() {
- Qulayliklar
+ {t("Qulayliklar")}
{tour.ticket_amenities.map((amenity, idx) => (
@@ -430,7 +441,7 @@ export default function TourDetailPage() {
- Sayohat marshshruti
+ {t("Sayohat marshshruti")}
@@ -444,7 +455,7 @@ export default function TourDetailPage() {
variant="outline"
className="text-base border-gray-600 text-gray-300"
>
- {day.duration}-kun
+ {day.duration}-{t("kun")}
{day.title}
@@ -492,7 +503,7 @@ export default function TourDetailPage() {
- Narxga kiritilgan xizmatlar
+ {t("Narxga kiritilgan xizmatlar")}
@@ -526,7 +537,7 @@ export default function TourDetailPage() {
- Mehmonxona va ovqatlanish
+ {t("Mehmonxona va ovqatlanish")}
@@ -542,7 +553,7 @@ export default function TourDetailPage() {
- Ovqatlanish tafsilotlari
+ {t("Ovqatlanish tafsilotlari")}
{tour.ticket_hotel_meals.map((meal, idx) => (
@@ -576,7 +587,7 @@ export default function TourDetailPage() {
- Mijozlar sharhlari
+ {t("Mijozlar sharhlari")}
@@ -586,7 +597,7 @@ export default function TourDetailPage() {
{tour.rating}
- ({tour.ticket_comments.length} sharh)
+ ({tour.ticket_comments.length} {t("sharh")})
@@ -621,9 +632,9 @@ export default function TourDetailPage() {
-
Tur firmasi
+
{t("Tur firmasi")}
- Firma ID: {tour.travel_agency_id}
+ {t("Firma ID")}: {tour.travel_agency_id}
router(`/agencies/${tour.travel_agency_id}`)}
className="border-gray-700 bg-gray-800 hover:bg-gray-700 text-gray-300"
>
- Firma sahifasiga o'tish
+ {t("Firma sahifasiga o'tish")}
diff --git a/src/pages/tours/ui/Tours.tsx b/src/pages/tours/ui/Tours.tsx
index 7571445..64806a9 100644
--- a/src/pages/tours/ui/Tours.tsx
+++ b/src/pages/tours/ui/Tours.tsx
@@ -1,5 +1,7 @@
"use client";
+import { deleteTours, getAllTours } from "@/pages/tours/lib/api";
+import formatPrice from "@/shared/lib/formatPrice";
import { Button } from "@/shared/ui/button";
import {
Dialog,
@@ -16,65 +18,79 @@ import {
TableHeader,
TableRow,
} from "@/shared/ui/table";
-import { Edit, Plane, PlusCircle, Trash2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ AlertTriangle,
+ ChevronLeft,
+ ChevronRight,
+ Edit,
+ Loader2,
+ Plane,
+ PlusCircle,
+ Trash2,
+} from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
-type Tour = {
- id: number;
- image?: string;
- tickets: string;
- min_price: string;
- max_price: string;
- top_duration: string;
- top_destinations: string;
- hotel_features_by_type: string;
- hotel_types: string;
- hotel_amenities: string;
-};
-
const Tours = () => {
- const [tours, setTours] = useState
([]);
+ const { t } = useTranslation();
const [page, setPage] = useState(1);
- const [totalPages, setTotalPages] = useState(3);
const [deleteId, setDeleteId] = useState(null);
const navigate = useNavigate();
+ const queryClient = useQueryClient();
- useEffect(() => {
- const mockData: Tour[] = Array.from({ length: 10 }, (_, i) => ({
- id: i + 1,
- image: `/dubai-marina.jpg`,
- tickets: `Bilet turi ${i + 1}`,
- min_price: `${200 + i * 50}$`,
- max_price: `${400 + i * 70}$`,
- top_duration: `${3 + i} kun`,
- top_destinations: `Shahar ${i + 1}`,
- hotel_features_by_type: "Spa, Wi-Fi, Pool",
- hotel_types: "5 yulduzli mehmonxona",
- hotel_amenities: "Nonushta, Parking, Bar",
- }));
+ const { data, isLoading, isError, refetch } = useQuery({
+ queryKey: ["all_tours", page],
+ queryFn: () => getAllTours({ page: page, page_size: 10 }),
+ });
- const itemsPerPage = 6;
- const start = (page - 1) * itemsPerPage;
- const end = start + itemsPerPage;
-
- setTotalPages(Math.ceil(mockData.length / itemsPerPage));
- setTours(mockData.slice(start, end));
- }, [page]);
-
- const confirmDelete = () => {
- if (deleteId !== null) {
- setTours((prev) => prev.filter((t) => t.id !== deleteId));
+ const { mutate } = useMutation({
+ mutationFn: (id: number) => deleteTours({ id }),
+ onSuccess: () => {
+ queryClient.refetchQueries({ queryKey: ["all_tours"] });
setDeleteId(null);
- }
+ },
+ });
+
+ const confirmDelete = (id: number) => {
+ mutate(id);
};
+ if (isLoading) {
+ return (
+
+
+
{t("Ma'lumotlar yuklanmoqda...")}
+
+
+
+ {t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
+
+
{
+ 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")}
+
+
-
Turlar ro'yxati
+
{t("Turlar ro'yxati")}
navigate("/tours/create")} variant="default">
-
@@ -83,18 +99,19 @@ const Tours = () => {
#
- Manzil
- Davomiyligi
- Mehmonxona
- Narx Oralig'i
- Imkoniyatlar
+ {t("Manzil")}
+
+ {t("Davomiyligi")}
+
+ {t("Mehmonxona")}
+ {t("Narxi")}
- Amallar
+ {t("Операции")}
- {tours.map((tour, idx) => (
+ {data?.data.data.results.map((tour, idx) => (
{(page - 1) * 6 + idx + 1}
@@ -102,28 +119,25 @@ const Tours = () => {
- {tour.top_destinations}
+ {tour.destination}
- {tour.top_duration}
+ {tour.duration_days} kun
- {tour.hotel_types}
+ {tour.hotel_name}
- {tour.tickets}
+ {tour.hotel_rating} {t("yulduzli mehmonxona")}
- {tour.min_price} – {tour.max_price}
+ {formatPrice(tour.price, true)}
-
- {tour.hotel_amenities}
-
@@ -148,7 +162,7 @@ const Tours = () => {
size="sm"
onClick={() => navigate(`/tours/${tour.id}`)}
>
- Batafsil
+ {t("Batafsil")}
@@ -158,50 +172,67 @@ const Tours = () => {
- {/* Delete Confirmation Dialog - Faqat bitta */}
setDeleteId(null)}>
- Turni o'chirishni tasdiqlang
+ {t("Turni o'chirishni tasdiqlang")}
- Haqiqatan ham bu turni o'chirib tashlamoqchimisiz? Bu amalni ortga
- qaytarib bo'lmaydi.
+ {t(
+ "Haqiqatan ham bu turni o'chirib tashlamoqchimisiz? Bu amalni ortga qaytarib bo'lmaydi.",
+ )}
setDeleteId(null)}>
- Bekor qilish
+ {t("Bekor qilish")}
-
+ confirmDelete(deleteId!)}
+ >
-
-
setPage((p) => Math.max(1, p - 1))}
+
+ 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"
>
- Oldingi
-
-
- Sahifa {page} / {totalPages}
-
- setPage((p) => Math.min(totalPages, p + 1))}
- disabled={page === totalPages}
+
+ {[...Array(data?.data.data.total_pages)].map((_, i) => (
+ setPage(i + 1)}
+ className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+ page === i + 1
+ ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+ : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+ }`}
+ >
+ {i + 1}
+
+ ))}
+
+ setPage((p) =>
+ Math.min(p + 1, data ? data.data.data.total_pages : 1),
+ )
+ }
+ className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
>
- Keyingi
-
+
("badges");
- const [searchTerm, setSearchTerm] = useState("");
- const [isModalOpen, setIsModalOpen] = useState(false);
- const [modalMode, setModalMode] = useState<"add" | "edit">("add");
- const [currentItem, setCurrentItem] = useState(null);
+ const { t } = useTranslation();
+ const [searchParams] = useSearchParams();
+ const [activeTab, setActiveTab] = useState("badge");
+ const [featureId, setFeatureId] = useState(null);
+ const navigate = useNavigate();
- const [badges, setBadges] = useState([
- { id: 1, name: "Bestseller", color: "#FFD700" },
- { id: 2, name: "Yangi", color: "#4CAF50" },
- ]);
+ const page = parseInt(searchParams.get("page") || "1", 10);
+ const pageSize = parseInt(searchParams.get("pageSize") || "10", 10);
- const [tariffs, setTariffs] = useState([
- { id: 1, name: "Standart", price: 500 },
- { id: 2, name: "Premium", price: 1000 },
- ]);
+ const { data, isLoading, isError, refetch } = useQuery({
+ queryKey: ["all_badge", page, pageSize],
+ queryFn: () => hotelBadge({ page, page_size: pageSize }),
+ select: (res) => res.data.data,
+ });
- const [transports, setTransports] = useState([
- { id: 1, name: "Avtobus", price: 200 },
- { id: 2, name: "Minivan", price: 500 },
- ]);
+ const pageTarif = parseInt(searchParams.get("pageTarif") || "1", 10);
+ const pageSizeTarif = parseInt(searchParams.get("pageTarifSize") || "10", 10);
- const [mealPlans, setMealPlans] = useState([
- { id: 1, name: "BB (Bed & Breakfast)" },
- { id: 2, name: "HB (Half Board)" },
- { id: 3, name: "FB (Full Board)" },
- ]);
+ const {
+ data: tarifData,
+ isLoading: tarifLoad,
+ isError: tarifError,
+ refetch: tarifRef,
+ } = useQuery({
+ queryKey: ["all_tarif", pageTarif, pageSizeTarif],
+ queryFn: () => hotelTarif({ page: pageTarif, page_size: pageSizeTarif }),
+ select: (res) => res.data.data,
+ });
- const [hotelTypes, setHotelTypes] = useState([
- { id: 1, name: "3 Yulduz" },
- { id: 2, name: "5 Yulduz" },
- ]);
-
- const [formData, setFormData] = useState>({});
-
- const getCurrentData = (): DataItem[] => {
- switch (activeTab) {
- case "badges":
- return badges;
- case "tariffs":
- return tariffs;
- case "transports":
- return transports;
- case "mealPlans":
- return mealPlans;
- case "hotelTypes":
- return hotelTypes;
- default:
- return [];
- }
- };
-
- const getSetterFunction = (): React.Dispatch<
- React.SetStateAction
- > => {
- switch (activeTab) {
- case "badges":
- return setBadges as React.Dispatch>;
- case "tariffs":
- return setTariffs as React.Dispatch>;
- case "transports":
- return setTransports as React.Dispatch<
- React.SetStateAction
- >;
- case "mealPlans":
- return setMealPlans as React.Dispatch>;
- case "hotelTypes":
- return setHotelTypes as React.Dispatch<
- React.SetStateAction
- >;
- default:
- return (() => {}) as React.Dispatch>;
- }
- };
-
- const filteredData = getCurrentData().filter((item) =>
- Object.values(item).some((val) =>
- val?.toString().toLowerCase().includes(searchTerm.toLowerCase()),
- ),
+ const pageTransport = parseInt(searchParams.get("pageTransport") || "1", 10);
+ const pageSizeTransport = parseInt(
+ searchParams.get("pageTransportSize") || "10",
+ 10,
);
- const getFormFields = (): FormField[] => {
- switch (activeTab) {
- case "badges":
- return [
- { name: "name", label: "Nomi", type: "text", required: true },
- { name: "color", label: "Rang", type: "color", required: true },
- ];
- case "tariffs":
- return [
- { name: "name", label: "Tarif nomi", type: "text", required: true },
- { name: "price", label: "Narx", type: "number", required: true },
- ];
- case "transports":
- return [
- {
- name: "name",
- label: "Transport nomi",
- type: "text",
- required: true,
- },
- { name: "capacity", label: "Sig'im", type: "number", required: true },
- ];
- case "mealPlans":
- return [{ name: "name", label: "Nomi", type: "text", required: true }];
- case "hotelTypes":
- return [
- { name: "name", label: "Tur nomi", type: "text", required: true },
- ];
- default:
- return [];
- }
- };
+ const {
+ data: transportData,
+ isLoading: transportLoad,
+ isError: transportError,
+ refetch: transportRef,
+ } = useQuery({
+ queryKey: ["all_transport", pageTransport, pageSizeTransport],
+ queryFn: () =>
+ hotelTransport({ page: pageTransport, page_size: pageSizeTransport }),
+ select: (res) => res.data.data,
+ });
- const openModal = (
- mode: "add" | "edit",
- item: DataItem | null = null,
- ): void => {
- setModalMode(mode);
- setCurrentItem(item);
- if (mode === "edit" && item) {
- setFormData(item);
- } else {
- setFormData({});
- }
- setIsModalOpen(true);
- };
+ const pageType = parseInt(searchParams.get("pageType") || "1", 10);
+ const pageSizeType = parseInt(searchParams.get("pageTypeSize") || "10", 10);
- const closeModal = (): void => {
- setIsModalOpen(false);
- setFormData({});
- setCurrentItem(null);
- };
+ const {
+ data: typeData,
+ isLoading: typeLoad,
+ isError: typeError,
+ refetch: typeRef,
+ } = useQuery({
+ queryKey: ["all_type", pageType, pageSizeType],
+ queryFn: () => hotelType({ page: pageType, page_size: pageSizeType }),
+ select: (res) => res.data.data,
+ });
- const handleSubmit = (): void => {
- const setter = getSetterFunction();
+ const pageFeature = parseInt(searchParams.get("pageFeature") || "1", 10);
+ const pageSizeFeature = parseInt(
+ searchParams.get("pageSizeFeature") || "10",
+ 10,
+ );
- if (modalMode === "add") {
- const newId = Math.max(...getCurrentData().map((i) => i.id), 0) + 1;
- setter([...getCurrentData(), { ...formData, id: newId } as DataItem]);
- } else {
- setter(
- getCurrentData().map((item) =>
- item.id === currentItem?.id ? { ...item, ...formData } : item,
- ),
- );
- }
- closeModal();
- };
+ const {
+ data: featureData,
+ isLoading: featureLoad,
+ isError: featureError,
+ refetch: featureRef,
+ } = useQuery({
+ queryKey: ["all_feature", pageFeature, pageSizeFeature],
+ queryFn: () =>
+ hotelFeature({ page: pageFeature, page_size: pageSizeFeature }),
+ select: (res) => res.data.data,
+ });
- const handleDelete = (id: number): void => {
- if (window.confirm("Rostdan ham o'chirmoqchimisiz?")) {
- const setter = getSetterFunction();
- setter(getCurrentData().filter((item) => item.id !== id));
- }
- };
+ const {
+ data: featureTypeData,
+ isLoading: featureTypeLoad,
+ isError: featureTypeError,
+ refetch: featureTypeRef,
+ } = useQuery({
+ queryKey: ["all_feature_type", pageFeature, pageSizeFeature, featureId],
+ queryFn: () =>
+ hotelFeatureType({
+ page: pageFeature,
+ page_size: pageSizeFeature,
+ feature_type: featureId!,
+ }),
+ select: (res) => res.data.data,
+ enabled: !!featureId,
+ });
- const tabs: Tab[] = [
- { id: "badges", label: "Belgilar" },
- { id: "tariffs", label: "Tariflar" },
- { id: "transports", label: "Transportlar" },
- { id: "mealPlans", label: "Ovqatlanish" },
- { id: "hotelTypes", label: "Otel turlari" },
- ];
+ if (
+ isLoading ||
+ tarifLoad ||
+ transportLoad ||
+ typeLoad ||
+ featureLoad ||
+ featureTypeLoad
+ ) {
+ return (
+
+
+
{t("Ma'lumotlar yuklanmoqda...")}
+
)[fieldName] || "";
+ if (
+ isError ||
+ tarifError ||
+ transportError ||
+ typeError ||
+ featureError ||
+ featureTypeError
+ ) {
+ return (
+
+
+
+ {t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
+
+
{
+ refetch();
+ tarifRef();
+ transportRef();
+ typeRef();
+ featureRef();
+ featureTypeRef();
+ }}
+ 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")}
+
+
-
-
Tur Sozlamalari
-
+
+
{
- setActiveTab(v as TabId);
- setSearchTerm("");
- }}
+ onValueChange={handleTabChange}
+ className="w-full"
>
-
- {tabs.map((tab) => (
-
- {tab.label}
-
- ))}
+
+ {t("Belgilar (Badge)")}
+ {t("Tariflar")}
+ {t("Transport")}
+ {/* {t("Ovqatlanish")} */}
+ {t("Otel turlari")}
+
+ {t("Otel sharoitlari")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
openModal("add")}
- className="w-full sm:w-auto cursor-pointer"
- >
-
-
-
-
-
-
-
-
-
-
- ID
-
-
- Nomi
-
- {activeTab === "badges" && (
-
- Rang
-
- )}
- {(activeTab === "tariffs" || activeTab === "transports") && (
-
- Narx
-
- )}
-
- Amallar
-
-
-
-
- {filteredData.length === 0 ? (
-
- Ma'lumot topilmadi
-
- ) : (
- filteredData.map((item) => (
-
-
{item.id}
-
- {item.name}
-
- {activeTab === "badges" && (
-
-
-
-
{(item as Badge).color}
-
-
- )}
- {(activeTab === "tariffs" ||
- activeTab === "transports") && (
-
- {(item as Tariff).price}
-
- )}
-
-
- openModal("edit", item)}
- >
-
- handleDelete(item.id)}
- >
-
-
-
-
- ))
- )}
-
-
-
-
-
-
-
-
- {modalMode === "add" ? "Yangi qo'shish" : "Tahrirlash"}
-
-
-
- {getFormFields().map((field) => (
-
-
- {field.label}
- {field.required && (
- *
- )}
-
- {field.type === "textarea" ? (
-