+ {p.user.contact.includes("gmail.com")
+ ? p.user.contact
+ : formatPhone(p.user.contact)}
+
- {p.tourName}
+ {p.tour_name}
-
+
+ {/*
{t("Sayohat sanasi")}
{p.travelDate}
-
-
+
*/}
+
{t("Miqdor")}
- {formatPrice(p.amount, true)}
+ {formatPrice(p.total_price, true)}
+
{getStatusBadge(p.order_status)}
-
- {getStatusBadge(p.paymentStatus)}
+
-
);
diff --git a/src/pages/finance/ui/FinanceDetailTour.tsx b/src/pages/finance/ui/FinanceDetailTour.tsx
index aa62fac..ca482ac 100644
--- a/src/pages/finance/ui/FinanceDetailTour.tsx
+++ b/src/pages/finance/ui/FinanceDetailTour.tsx
@@ -13,7 +13,7 @@ import {
Users,
} from "lucide-react";
import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
type TourPurchase = {
id: number;
@@ -110,6 +110,14 @@ export default function FinanceDetailTour() {
const [activeTab, setActiveTab] = useState<
"overview" | "bookings" | "reviews"
>("overview");
+ const params = useParams();
+
+ console.log(params);
+
+ // const {} = useQuery({
+ // queryKey: ["detail_order"],
+ // queryFn: () => getDetailOrder()
+ // })
const getStatusBadge = (status: TourPurchase["paymentStatus"]) => {
const base =
diff --git a/src/pages/finance/ui/FinanceDetailUsers.tsx b/src/pages/finance/ui/FinanceDetailUsers.tsx
index 198869c..7853f40 100644
--- a/src/pages/finance/ui/FinanceDetailUsers.tsx
+++ b/src/pages/finance/ui/FinanceDetailUsers.tsx
@@ -1,7 +1,17 @@
"use client";
+import { getDetailOrder, updateDetailOrder } from "@/pages/finance/lib/api";
+import type { OrderStatus } from "@/pages/finance/lib/type";
import formatPhone from "@/shared/lib/formatPhone";
import formatPrice from "@/shared/lib/formatPrice";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/shared/ui/select";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
ArrowLeft,
Calendar,
@@ -10,129 +20,80 @@ import {
Mail,
MapPin,
Phone,
- TrendingUp,
User,
+ UsersIcon,
} from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-
-type UserPurchase = {
- id: number;
- userName: string;
- userPhone: string;
- userEmail: string;
- tourName: string;
- tourId: number;
- agencyName: string;
- agencyId: number;
- destination: string;
- travelDate: string;
- returnDate: string;
- amount: number;
- paymentStatus: "paid" | "pending" | "cancelled" | "refunded";
- paymentMethod: "credit_card" | "paypal" | "bank_transfer" | "crypto";
- purchaseDate: string;
- travelers: number;
- bookingReference: string;
-};
-
-const mockUserData = {
- id: 1,
- userName: "Aziza Karimova",
- userPhone: "+998 90 123 45 67",
- userEmail: "aziza.karimova@example.com",
- joinDate: "2024-01-15",
- totalSpent: 4500000,
- totalBookings: 3,
- memberLevel: "Gold",
-};
-
-const mockUserPurchases: UserPurchase[] = [
- {
- id: 1,
- userName: "Aziza Karimova",
- userPhone: "+998 90 123 45 67",
- userEmail: "aziza.karimova@example.com",
- tourName: "Dubai Luxury Tour",
- tourId: 1,
- agencyName: "Silk Road Travel",
- agencyId: 1,
- destination: "Dubai, UAE",
- travelDate: "2025-11-10",
- returnDate: "2025-11-17",
- amount: 1500000,
- paymentStatus: "paid",
- paymentMethod: "credit_card",
- purchaseDate: "2025-10-10",
- travelers: 2,
- bookingReference: "TRV-DXB-001",
- },
- {
- id: 2,
- userName: "Aziza Karimova",
- userPhone: "+998 90 123 45 67",
- userEmail: "aziza.karimova@example.com",
- tourName: "Paris Romantic Getaway",
- tourId: 4,
- agencyName: "Euro Travels",
- agencyId: 2,
- destination: "Paris, France",
- travelDate: "2025-12-01",
- returnDate: "2025-12-08",
- amount: 2200000,
- paymentStatus: "paid",
- paymentMethod: "paypal",
- purchaseDate: "2025-10-16",
- travelers: 2,
- bookingReference: "TRV-PAR-002",
- },
- {
- id: 3,
- userName: "Aziza Karimova",
- userPhone: "+998 90 123 45 67",
- userEmail: "aziza.karimova@example.com",
- tourName: "Bali Adventure Package",
- tourId: 2,
- agencyName: "Silk Road Travel",
- agencyId: 1,
- destination: "Bali, Indonesia",
- travelDate: "2025-11-15",
- returnDate: "2025-11-22",
- amount: 1800000,
- paymentStatus: "pending",
- paymentMethod: "bank_transfer",
- purchaseDate: "2025-10-12",
- travelers: 1,
- bookingReference: "TRV-BAL-003",
- },
-];
+import { Link, useParams } from "react-router-dom";
+import { toast } from "sonner";
export default function FinanceDetailUser() {
const { t } = useTranslation();
+ const queryClient = useQueryClient();
const [activeTab, setActiveTab] = useState<"bookings" | "details">(
"bookings",
);
- const getStatusBadge = (status: UserPurchase["paymentStatus"]) => {
+ const params = useParams();
+
+ const { data } = useQuery({
+ queryKey: ["detail_order"],
+ queryFn: () => getDetailOrder(Number(params.id)),
+ select(data) {
+ return data.data.data;
+ },
+ });
+
+ const { mutate } = useMutation({
+ mutationFn: ({
+ id,
+ body,
+ }: {
+ id: number;
+ body: {
+ order_status:
+ | "pending_payment"
+ | "pending_confirmation"
+ | "cancelled"
+ | "confirmed"
+ | "completed";
+ };
+ }) => updateDetailOrder({ body, id }),
+ onSuccess: () => {
+ toast.success(t("Status muvaffaqiyatli yangilandi"), {
+ richColors: true,
+ position: "top-center",
+ });
+ queryClient.invalidateQueries({ queryKey: ["detail_order"] });
+ },
+ onError: () => {
+ toast.error(t("Statusni yangilashda xatolik yuz berdi"), {
+ richColors: true,
+ position: "top-center",
+ });
+ },
+ });
+
+ const getStatusBadge = (status: OrderStatus["order_status"]) => {
const base =
"px-3 py-1 rounded-full text-sm font-medium inline-flex items-center gap-2";
switch (status) {
- case "paid":
- return (
-
-
- {t("Paid")}
-
- );
- case "pending":
+ case "pending_confirmation":
return (
+ {t("Paid")}
+
+ );
+ case "pending_payment":
+ return (
+
+
{t("Pending")}
);
@@ -145,39 +106,18 @@ export default function FinanceDetailUser() {
{t("Cancelled")}
);
- case "refunded":
+ case "confirmed":
return (
- Refunded
+ {t("Refunded")}
);
}
};
- const getPaymentMethod = (method: UserPurchase["paymentMethod"]) => {
- switch (method) {
- case "credit_card":
- return "Credit Card";
- case "paypal":
- return "PayPal";
- case "bank_transfer":
- return "Bank Transfer";
- case "crypto":
- return "Cryptocurrency";
- }
- };
-
- const totalSpent = mockUserPurchases
- .filter((p) => p.paymentStatus === "paid")
- .reduce((sum, p) => sum + p.amount, 0);
-
- const pendingAmount = mockUserPurchases
- .filter((p) => p.paymentStatus === "pending")
- .reduce((sum, p) => sum + p.amount, 0);
-
return (
@@ -195,67 +135,12 @@ export default function FinanceDetailUser() {
{t("Foydalanuvchi moliyaviy tafsilotlari")}
- {mockUserData.userName} {t("uchun batafsil moliyaviy sharh")}
+ {data?.user.username} {t("uchun batafsil moliyaviy sharh")}