bug fix

2025-11-01 19:12:38 +05:00
parent 4e9b2f3bd8
commit 193d01ed51
27 changed files with 1300 additions and 120 deletions
--- a/src/pages/agencies/ui/AgencyDetail.tsx
+++ b/src/pages/agencies/ui/AgencyDetail.tsx
@@ -49,6 +49,7 @@ export default function AgencyDetailPage() {
  const params = useParams();
  const router = useNavigate();
  const { t } = useTranslation();
+  const [edit, setEdit] = useState<boolean>(false);
  const queryClient = useQueryClient();
  const [openUser, setOpenUser] = useState<boolean>(false);
  const [user, setUser] = useState<{
@@ -97,6 +98,7 @@ export default function AgencyDetailPage() {
      toast.success(t("Foydalanuvchi muvaffaqiyatli yangilandi"));
      setOpenUser(true);
      setUser(res.data);
+      setEdit(false);
    },
    onError: () => {
      toast.error(t("Foydalanuvchini yangilashda xatolik"));
@@ -407,6 +409,8 @@ export default function AgencyDetailPage() {
        {agency?.data.data && (
          <div className="mb-8">
            <AgencyUsersSection
+              edit={edit}
+              setEdit={setEdit}
              users={
                Array.isArray(agency?.data.data)
                  ? agency?.data.data
--- a/src/pages/agencies/ui/AgencyUsersSection.tsx
+++ b/src/pages/agencies/ui/AgencyUsersSection.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import formatPhone from "@/shared/lib/formatPhone";
 import { Badge } from "@/shared/ui/badge";
 import { Button } from "@/shared/ui/button";
@@ -11,8 +13,8 @@ import {
  DialogTitle,
  DialogTrigger,
 } from "@/shared/ui/dialog";
-
 import { Pencil, Phone, Shield, Trash2, User } from "lucide-react";
+import { type Dispatch, type SetStateAction } from "react";
 import { useTranslation } from "react-i18next";

 interface AgencyUser {
@@ -28,16 +30,19 @@ interface AgencyUsersProps {
  onEdit: (userId: number) => void;
  onDelete: (userId: number) => void;
  isLoading?: boolean;
+  edit: boolean;
+  setEdit: Dispatch<SetStateAction<boolean>>;
 }

 export function AgencyUsersSection({
  users,
  onEdit,
+  edit,
+  setEdit,
  onDelete,
  isLoading = 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",
@@ -45,7 +50,6 @@ export function AgencyUsersSection({
      user: "bg-gray-500/20 text-gray-300 border-gray-500/40",
      agent: "bg-green-500/20 text-green-300 border-green-500/40",
    };
-
    return (
      <Badge className={roleColors[role] || roleColors.user}>
        {role.toUpperCase()}
@@ -134,18 +138,54 @@ export function AgencyUsersSection({
                  </div>
                </div>

+                {/* Actions */}
                <div className="flex items-center gap-2">
-                  {/* Edit Button */}
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    onClick={() => onEdit(user.id)}
-                    className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-blue-400 hover:text-blue-300"
-                  >
-                    <Pencil className="w-4 h-4" />
-                  </Button>
+                  {/* Edit Confirm Dialog */}
+                  <Dialog open={edit} onOpenChange={setEdit}>
+                    <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"
+                      >
+                        <Pencil
+                          className="w-4 h-4"
+                          onClick={() => setEdit(true)}
+                        />
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="bg-gray-800 border-gray-700 text-white">
+                      <DialogHeader>
+                        <DialogTitle>
+                          {t("Foydalanuvchini tahrirlash")}
+                        </DialogTitle>
+                        <DialogDescription className="text-gray-400">
+                          {t("Haqiqatan ham")}{" "}
+                          <span className="font-semibold text-white">
+                            {user.first_name} {user.last_name}
+                          </span>{" "}
+                          {t("ni tahrirlamoqchimisiz?")}
+                        </DialogDescription>
+                      </DialogHeader>

-                  {/* Delete Alert Dialog */}
+                      <DialogFooter>
+                        <Button
+                          className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-white"
+                          onClick={() => setEdit(true)}
+                        >
+                          {t("Bekor qilish")}
+                        </Button>
+                        <Button
+                          onClick={() => onEdit(user.id)}
+                          className="bg-blue-600 hover:bg-blue-700 text-white"
+                        >
+                          {t("Tahrirlash")}
+                        </Button>
+                      </DialogFooter>
+                    </DialogContent>
+                  </Dialog>
+
+                  {/* Delete Confirm Dialog */}
                  <Dialog>
                    <DialogTrigger asChild>
                      <Button
--- a/src/pages/finance/lib/api.ts
+++ b/src/pages/finance/lib/api.ts
@@ -1,11 +1,16 @@
 import type {
  AgencyOrderData,
+  History,
  UserAgencyDetailData,
  UserOrderData,
  UserOrderDetailData,
 } from "@/pages/finance/lib/type";
 import httpClient from "@/shared/config/api/httpClient";
-import { AGENCY_ORDERS, USER_ORDERS } from "@/shared/config/api/URLs";
+import {
+  AGENCY_ORDERS,
+  PAYMENT_AGENCY,
+  USER_ORDERS,
+} from "@/shared/config/api/URLs";
 import type { AxiosResponse } from "axios";

 const getAllOrder = async (params: {
@@ -63,10 +68,33 @@ const updateDetailOrder = async ({
  return res;
 };

+const payAgency = async ({
+  body,
+}: {
+  body: {
+    travel_agency: number;
+    amount: number;
+    note: string;
+  };
+}) => {
+  const res = await httpClient.post(PAYMENT_AGENCY, body);
+  return res;
+};
+
+const getPaymentHistory = async (params: {
+  page_size: number;
+  page: number;
+}): Promise<AxiosResponse<History>> => {
+  const res = await httpClient.get(PAYMENT_AGENCY, { params });
+  return res;
+};
+
 export {
  getAllOrder,
  getAllOrderAgecy,
  getDetailAgencyOrder,
  getDetailOrder,
+  getPaymentHistory,
+  payAgency,
  updateDetailOrder,
 };
--- a/src/pages/finance/lib/type.ts
+++ b/src/pages/finance/lib/type.ts
@@ -180,3 +180,36 @@ export interface UserAgencyDetailData {
    }[];
  };
 }
+
+export interface History {
+  status: boolean;
+  data: {
+    links: {
+      previous: string;
+      next: string;
+    };
+    total_items: number;
+    total_pages: number;
+    page_size: number;
+    current_page: number;
+    results: [
+      {
+        id: number;
+        travel_agency: {
+          custom_id: string;
+          name: string;
+          email: string;
+          phone: string;
+        };
+        amount: number;
+        note: string;
+        accountant: {
+          id: number;
+          first_name: string;
+          last_name: string;
+          role: string;
+        };
+      },
+    ];
+  };
+}
--- a/src/pages/finance/ui/FinanceDetailTour.tsx
+++ b/src/pages/finance/ui/FinanceDetailTour.tsx
@@ -1,13 +1,17 @@
 "use client";

 import { getDetailAgencyOrder } from "@/pages/finance/lib/api";
+import { PayDialog } from "@/pages/finance/ui/PayDialog";
+import { PaymentHistory } from "@/pages/finance/ui/PaymentHistory";
 import formatDate from "@/shared/lib/formatDate";
 import formatPhone from "@/shared/lib/formatPhone";
 import formatPrice from "@/shared/lib/formatPrice";
+import { Button } from "@/shared/ui/button";
 import { Card, CardHeader } from "@/shared/ui/card";
 import { useQuery } from "@tanstack/react-query";
 import {
  ArrowLeft,
+  Banknote,
  DollarSign,
  Eye,
  Mail,
@@ -23,9 +27,10 @@ import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";

 export default function FinanceDetailTour() {
+  const [openPayDialog, setOpenPayDialog] = useState(false);
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState<
-    "overview" | "bookings" | "reviews"
+    "overview" | "bookings" | "reviews" | "payment"
  >("overview");
  const params = useParams();

@@ -70,6 +75,21 @@ export default function FinanceDetailTour() {
              <h1 className="text-3xl font-bold">{data?.name}</h1>
            </div>
          </div>
+          <div className="flex justify-end mt-8">
+            <Button
+              onClick={() => setOpenPayDialog(true)}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg"
+            >
+              {t("Qolgan summani to‘lash")}
+            </Button>
+          </div>
+          {data && (
+            <PayDialog
+              open={openPayDialog}
+              onClose={() => setOpenPayDialog(false)}
+              agencyId={data?.id}
+            />
+          )}
        </div>

        {/* Tour Summary Cards */}
@@ -156,8 +176,18 @@ export default function FinanceDetailTour() {
              <Star className="w-4 h-4" />
              {t("Reviews")}
            </button>
+            <button
+              className={`px-6 py-4 font-medium flex items-center gap-2 transition-colors ${
+                activeTab === "payment"
+                  ? "text-blue-400 border-b-2 border-blue-400"
+                  : "text-gray-400 hover:text-gray-300"
+              }`}
+              onClick={() => setActiveTab("payment")}
+            >
+              <Banknote className="w-4 h-4" />
+              {t("To'lovlar tarixi")}
+            </button>
          </div>
-
          <div className="p-6">
            {activeTab === "overview" && (
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
@@ -355,6 +385,8 @@ export default function FinanceDetailTour() {
                ))}
              </div>
            )}
+
+            {activeTab === "payment" && <PaymentHistory />}
          </div>
        </div>
      </div>
--- a/src/pages/finance/ui/PayDialog.tsx
+++ b/src/pages/finance/ui/PayDialog.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { payAgency } from "@/pages/finance/lib/api";
+import { Button } from "@/shared/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog";
+import { Input } from "@/shared/ui/input";
+import { Label } from "@/shared/ui/label";
+import { useMutation } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+interface PayDialogProps {
+  open: boolean;
+  onClose: () => void;
+  agencyId: number;
+}
+
+interface PayFormValues {
+  amount: string; // formatted value (e.g. "1 200 000")
+  note: string;
+}
+
+// Narxni formatlovchi funksiya
+function formatPrice(value: number | string): string {
+  const num = Number(value.toString().replace(/\D/g, ""));
+  if (isNaN(num)) return "";
+  return num.toLocaleString("ru-RU");
+}
+
+export function PayDialog({ open, onClose, agencyId }: PayDialogProps) {
+  const { t } = useTranslation();
+
+  const form = useForm<PayFormValues>({
+    defaultValues: {
+      amount: "",
+      note: "",
+    },
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: ({
+      body,
+    }: {
+      body: {
+        travel_agency: number;
+        amount: number;
+        note: string;
+      };
+    }) => payAgency({ body }),
+    onSuccess: () => {
+      onClose();
+    },
+    onError: () => {
+      toast.error(t("Xatolik yuz berdi"), {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.replace(/\D/g, "");
+    const formatted = formatPrice(raw);
+    form.setValue("amount", formatted);
+  };
+
+  const handleSubmit = async (values: PayFormValues) => {
+    const cleanAmount = Number(
+      values.amount.replace(/\s/g, "").replace(/,/g, ""),
+    );
+    mutate({
+      body: {
+        amount: cleanAmount,
+        note: values.note,
+        travel_agency: agencyId,
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md text-white bg-gray-900">
+        <DialogHeader>
+          <DialogTitle>{t("Qolgan summani to‘lash")}</DialogTitle>
+        </DialogHeader>
+
+        <form
+          onSubmit={form.handleSubmit(handleSubmit)}
+          className="space-y-4 py-2"
+        >
+          {/* Summani kiritish */}
+          <div className="space-y-2">
+            <Label htmlFor="amount">{t("Summani kiriting")}</Label>
+            <Input
+              id="amount"
+              inputMode="numeric"
+              placeholder="1 200 000"
+              value={form.watch("amount")}
+              onChange={handleAmountChange}
+            />
+            {form.formState.errors.amount && (
+              <p className="text-red-400 text-sm">
+                {t("Summani to‘g‘ri kiriting")}
+              </p>
+            )}
+          </div>
+
+          {/* Izoh */}
+          <div className="space-y-2">
+            <Label htmlFor="note">{t("Izoh")}</Label>
+            <Input
+              id="note"
+              type="text"
+              placeholder={t("Izoh kiriting") || ""}
+              {...form.register("note")}
+            />
+          </div>
+
+          {/* Tugmalar */}
+          <DialogFooter className="flex justify-end gap-3 pt-4">
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t("Bekor qilish")}
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? <Loader2 className="animate-spin" /> : t("To‘lash")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/pages/finance/ui/PaymentHistory.tsx
+++ b/src/pages/finance/ui/PaymentHistory.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { getPaymentHistory } from "@/pages/finance/lib/api";
+import formatPrice from "@/shared/lib/formatPrice";
+import { Button } from "@/shared/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft, ChevronRightIcon, Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export function PaymentHistory() {
+  const { t } = useTranslation();
+  const [page, setPage] = useState(1);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["payment-history", page],
+    queryFn: () => getPaymentHistory({ page, page_size: 10 }),
+  });
+
+  if (isLoading)
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Loader2 className="animate-spin text-gray-500" size={40} />
+      </div>
+    );
+
+  if (isError || !data)
+    return (
+      <Card className="p-6 text-center">
+        <p className="text-red-500">Xatolik yuz berdi. Qayta urinib ko‘ring.</p>
+      </Card>
+    );
+
+  const history = data.data;
+
+  return (
+    <Card className="bg-gray-900 text-white">
+      <CardHeader>
+        <CardTitle>{t("To'lovlar tarixi")}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>ID</TableHead>
+              <TableHead>{t("Agentlik")}</TableHead>
+              <TableHead>{t("Telefon")}</TableHead>
+              <TableHead>{t("Summasi")}</TableHead>
+              <TableHead>{t("Izoh")}</TableHead>
+              <TableHead>{t("Buxgalter")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {history.data.results.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell>{item.travel_agency.custom_id}</TableCell>
+                <TableCell>{item.travel_agency.name}</TableCell>
+                <TableCell>{item.travel_agency.phone}</TableCell>
+                <TableCell>{formatPrice(item.amount, true)}</TableCell>
+                <TableCell>{item.note || "-"}</TableCell>
+                <TableCell>
+                  {item.accountant.first_name} {item.accountant.last_name}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+
+        {/* Pagination */}
+        <div className="flex justify-between items-center mt-6">
+          <p className="text-sm text-gray-400">
+            {t("Sahifa")} {history.data.current_page} /{" "}
+            {history.data.total_pages}
+          </p>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={!history.data.links.previous}
+              onClick={() => setPage((p) => Math.max(p - 1, 1))}
+            >
+              <ChevronLeft className="size-6" />
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={!history.data.links.next}
+              onClick={() =>
+                setPage((p) =>
+                  Math.min(p + 1, history.data.total_pages || p + 1),
+                )
+              }
+            >
+              <ChevronRightIcon className="size-6" />
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/pages/profile/lib/api.ts
+++ b/src/pages/profile/lib/api.ts
@@ -0,0 +1,10 @@
+import httpClient from "@/shared/config/api/httpClient";
+import { GET_ME } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+const getMeAgency = async (): Promise<AxiosResponse<any>> => {
+  const res = await httpClient.get(GET_ME);
+  return res;
+};
+
+export { getMeAgency };
--- a/src/pages/profile/ui/AgencyInfo.tsx
+++ b/src/pages/profile/ui/AgencyInfo.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import formatPhone from "@/shared/lib/formatPhone";
+import formatPrice from "@/shared/lib/formatPrice";
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
+import { DollarSign, Mail, Phone, Star, Ticket } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export interface UserAgencyDetailData {
+  id: number;
+  name: string;
+  custom_id: string;
+  share_percentage: number;
+  addres: string;
+  email: string;
+  phone: string;
+  web_site: string;
+  paid: number;
+  pending: number;
+  ticket_sold_count: number;
+  ticket_count: string;
+  total_income: number;
+  platform_income: number;
+  total_booking_count: string;
+  rating: string;
+  orders: {
+    id: number;
+    user: {
+      id: number;
+      first_name: string;
+      last_name: string;
+      contact: string;
+    };
+    total_price: number;
+    departure_date: string;
+    arrival_time: string;
+    created_at: string;
+  }[];
+  comments: {
+    user: {
+      id: number;
+      first_name: string;
+      last_name: string;
+      contact: string;
+    };
+    text: string;
+    rating: number;
+    ticket: number;
+    created: string;
+  }[];
+}
+
+export function AgencyCard({ agency }: { agency: UserAgencyDetailData }) {
+  const { t } = useTranslation();
+  return (
+    <Card className="border border-gray-700 bg-gray-900 text-white shadow-lg">
+      {/* HEADER */}
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold">{agency.name}</CardTitle>
+        <p className="text-gray-400 text-sm">
+          {t("Agentlik ID")}: {agency.custom_id}
+        </p>
+      </CardHeader>
+
+      {/* CONTENT */}
+      <CardContent className="space-y-4">
+        {/* Contact info */}
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-xs text-gray-400">Email</p>
+            <div className="flex items-center gap-2">
+              <Mail className="w-4 h-4 text-blue-400" />
+              <p>{agency.email || "—"}</p>
+            </div>
+          </div>
+
+          <div>
+            <p className="text-xs text-gray-400">{t("Telefon")}</p>
+            <div className="flex items-center gap-2">
+              <Phone className="w-4 h-4 text-green-400" />
+              <p>{formatPhone(agency.phone) || "—"}</p>
+            </div>
+          </div>
+
+          <div>
+            <p className="text-xs text-gray-400">{t("Veb-sayt")}</p>
+            <p>{agency.web_site || "—"}</p>
+          </div>
+
+          <div>
+            <p className="text-xs text-gray-400">{t("Manzil")}</p>
+            <p>{agency.addres || "—"}</p>
+          </div>
+        </div>
+
+        {/* Financial data */}
+        <div className="border-t border-gray-700 pt-3 space-y-2">
+          <div className="flex items-center gap-2">
+            <DollarSign className="w-5 h-5 text-yellow-400" />
+            <p>
+              <strong>{t("Jami daromad")}:</strong>{" "}
+              {formatPrice(agency.total_income, true)}
+            </p>
+          </div>
+
+          <p>
+            <strong>{t("To'langan")}:</strong> {formatPrice(agency.paid, true)}
+          </p>
+
+          <p>
+            <strong>{t("Kutilayotgan to‘lovlar")}:</strong>{" "}
+            {formatPrice(agency.pending)}
+          </p>
+
+          <p>
+            <strong>{t("Platformaga tegishli")}:</strong>{" "}
+            {formatPrice(agency.platform_income, true)}
+          </p>
+        </div>
+
+        {/* Stats */}
+        <div className="border-t border-gray-700 pt-3 space-y-2">
+          <div className="flex items-center gap-2">
+            <Ticket className="w-5 h-5 text-blue-400" />
+            <p>
+              <strong>{t("Sotilgan turlar soni")}:</strong>{" "}
+              {agency.ticket_sold_count}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Star className="w-5 h-5 text-yellow-500" />
+            <p>
+              <strong>{t("Reyting")}:</strong> {agency.rating || "—"}
+            </p>
+          </div>
+
+          <p>
+            <strong>{t("Bookings")}:</strong> {agency.total_booking_count}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/pages/profile/ui/EditDialog.tsx
+++ b/src/pages/profile/ui/EditDialog.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { Button } from "@/shared/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog";
+import { Input } from "@/shared/ui/input";
+import { Auth_Api } from "@/widgets/welcome/lib/data";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+interface EditDialogProps {
+  open: boolean;
+  onClose: () => void;
+  user: {
+    id: number;
+    first_name: string;
+    last_name: string;
+  };
+}
+
+export function EditDialog({ open, onClose, user }: EditDialogProps) {
+  const [firstName, setFirstName] = useState(user.first_name);
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [lastName, setLastName] = useState(user.last_name);
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: ({
+      first_name,
+      last_name,
+    }: {
+      first_name: string;
+      last_name: string;
+    }) => {
+      return Auth_Api.updateUser({ first_name, last_name });
+    },
+    onSuccess() {
+      queryClient.resetQueries({ queryKey: ["get_me"] });
+      onClose();
+    },
+    onError(error: AxiosError<{ non_field_errors: [string] }>) {
+      toast.error(t("Xatolik yuz berdi"), {
+        icon: null,
+        description: error.name,
+        position: "bottom-right",
+      });
+    },
+  });
+
+  const handleSave = async () => {
+    mutate({
+      first_name: firstName,
+      last_name: lastName,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px] rounded-2xl">
+        <DialogHeader>
+          <DialogTitle>{t("Tahrirlash")}</DialogTitle>
+          <DialogDescription>
+            {t(
+              "Update your personal information below and click save when done.",
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <label className="text-sm font-medium text-gray-200">
+              {t("First Name")}
+            </label>
+            <Input
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              placeholder={t("First Name")}
+            />
+          </div>
+          <div className="grid gap-2">
+            <label className="text-sm font-medium text-gray-200">
+              {t("Last Name")}
+            </label>
+            <Input
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              placeholder={t("Last Name")}
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>
+            {t("Bekor qilish")}
+          </Button>
+          <Button onClick={handleSave}>
+            {isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              </>
+            ) : (
+              t("Saqlash")
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/pages/profile/ui/Profile.tsx
+++ b/src/pages/profile/ui/Profile.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { getDetailAgencyOrder } from "@/pages/finance/lib/api";
+import { AgencyCard } from "@/pages/profile/ui/AgencyInfo";
+import { EditDialog } from "@/pages/profile/ui/EditDialog";
+import { ProfileCard, type ProfileData } from "@/pages/profile/ui/ProfileCard";
+import { getMe } from "@/shared/config/api/auth/api";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+export default function Page() {
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [editingUser, setEditingUser] = useState<any>(null);
+
+  const { data: get_me, isLoading: userLoading } = useQuery({
+    queryKey: ["get_me"],
+    queryFn: () => getMe(),
+    select(data) {
+      return data.data.data;
+    },
+  });
+
+  const { data: agencyData, isLoading: agencyLoading } = useQuery({
+    queryKey: ["agency", get_me?.travel_agency],
+    queryFn: () => getDetailAgencyOrder(Number(get_me?.travel_agency)),
+    enabled: !!get_me?.travel_agency,
+    select: (data) => data.data?.data,
+  });
+
+  const handleOpenEdit = (user: ProfileData) => {
+    setEditingUser(user);
+    setEditDialogOpen(true);
+  };
+
+  return (
+    <main className="min-h-screen bg-gray-900 p-4 md:p-8">
+      <div className="mx-auto max-w-[100%] space-y-8">
+        <h1 className="text-3xl font-bold">Profile</h1>
+
+        {get_me && (
+          <ProfileCard
+            user={get_me}
+            onEditClick={() => handleOpenEdit(get_me)}
+            isLoading={userLoading}
+          />
+        )}
+
+        {agencyData && <AgencyCard agency={agencyData} />}
+
+        {(userLoading || agencyLoading) && (
+          <p className="text-center text-gray-500">Loading...</p>
+        )}
+
+        {editDialogOpen && editingUser && (
+          <EditDialog
+            open={editDialogOpen}
+            onClose={() => setEditDialogOpen(false)}
+            user={editingUser}
+          />
+        )}
+      </div>
+    </main>
+  );
+}
--- a/src/pages/profile/ui/ProfileCard.tsx
+++ b/src/pages/profile/ui/ProfileCard.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import formatPhone from "@/shared/lib/formatPhone";
+import { Button } from "@/shared/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
+import { BadgeCheck, Phone } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export interface ProfileData {
+  id: number;
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone: string;
+  avatar?: string;
+  username: string;
+  is_active: boolean;
+}
+
+interface ProfileCardProps {
+  user: ProfileData;
+  onEditClick: () => void;
+  isLoading?: boolean;
+}
+
+export function ProfileCard({
+  user,
+  onEditClick,
+  isLoading,
+}: ProfileCardProps) {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div>
+            <CardTitle className="text-2xl font-semibold">
+              {user.first_name} {user.last_name}
+            </CardTitle>
+            <p className="text-sm text-gray-500">@{user.username}</p>
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onEditClick}
+          disabled={isLoading}
+        >
+          {t("Tahrirlash")}
+        </Button>
+      </CardHeader>
+
+      <CardContent className="grid grid-cols-2 gap-4">
+        <div className="flex items-center gap-2">
+          <Phone className="h-4 w-4 text-gray-400" />
+          <span>{formatPhone(user.phone)}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <BadgeCheck
+            className={`h-4 w-4 ${user.is_active ? "text-green-500" : "text-gray-400"}`}
+          />
+          <span>{user.is_active ? "Active" : "Inactive"}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/pages/support/lib/api.ts
+++ b/src/pages/support/lib/api.ts
@@ -4,7 +4,7 @@ import type {
 } from "@/pages/support/lib/types";
 import httpClient from "@/shared/config/api/httpClient";
 import {
-  GET_ALL_AGENCY,
+  APPROVED_AGENCY,
  SUPPORT_AGENCY,
  SUPPORT_USER,
  TOUR_ADMIN,
@@ -87,7 +87,7 @@ const updateTour = async ({
    status: "pending" | "approved" | "cancelled";
  };
 }) => {
-  const res = await httpClient.patch(`${GET_ALL_AGENCY}${id}/`, body);
+  const res = await httpClient.patch(`${APPROVED_AGENCY}${id}/`, body);
  return res;
 };

--- a/src/pages/support/ui/SupportAgency.tsx
+++ b/src/pages/support/ui/SupportAgency.tsx
@@ -220,7 +220,7 @@ const SupportAgency = () => {

              <div>
                <div className="text-md text-white">{t("Telefon raqam")}</div>
-                <div>{formatPhone(selected.phone)}</div>
+                <div>{formatPhone(selected.phone ?? "")}</div>
              </div>

              <div>
@@ -321,7 +321,7 @@ const SupportAgency = () => {
                  {t("Telefon raqam (login)")}
                </p>
                <p className="text-lg font-medium">
-                  {formatPhone(user.data.phone)}
+                  {formatPhone(user.data.phone ?? "")}
                </p>
              </div>

--- a/src/pages/tours/ui/CreateEditTour.tsx
+++ b/src/pages/tours/ui/CreateEditTour.tsx
@@ -50,7 +50,14 @@ const CreateEditTour = () => {
          id={id}
        />
      )}
-      {step === 2 && <StepTwo data={data} isEditMode={isEditMode} />}
+      {step === 2 && (
+        <StepTwo
+          data={data}
+          isEditMode={isEditMode}
+          step={step}
+          setStep={setStep}
+        />
+      )}
    </div>
  );
 };
--- a/src/pages/tours/ui/StepOne.tsx
+++ b/src/pages/tours/ui/StepOne.tsx
@@ -354,6 +354,7 @@ const StepOne = ({
        }
      });
    value.ticket_itinerary?.forEach((itinerary, i) => {
+      // Har bir itinerary uchun asosiy maydonlar
      formData.append(`ticket_itinerary[${i}]title`, itinerary.title);
      formData.append(`ticket_itinerary[${i}]title_ru`, itinerary.title_ru);
      formData.append(
@@ -361,10 +362,17 @@ const StepOne = ({
        String(itinerary.duration),
      );

-      // Rasmlar
+      // 🖼 Rasmlar (faqat yangi yuklangan File-larni yuborish)
      if (Array.isArray(itinerary.ticket_itinerary_image)) {
        itinerary.ticket_itinerary_image.forEach((img, j) => {
-          const file = img instanceof File ? img : img.image;
+          // img -> File yoki { image: File | string } shaklida bo‘lishi mumkin
+          const file =
+            img instanceof File
+              ? img
+              : img?.image instanceof File
+                ? img.image
+                : null;
+
          if (file) {
            formData.append(
              `ticket_itinerary[${i}]ticket_itinerary_image[${j}]image`,
@@ -374,7 +382,7 @@ const StepOne = ({
        });
      }

-      // Destinations
+      // 📍 Destinations (yo‘nalishlar)
      if (Array.isArray(itinerary.ticket_itinerary_destinations)) {
        itinerary.ticket_itinerary_destinations.forEach((dest, k) => {
          formData.append(
@@ -388,6 +396,7 @@ const StepOne = ({
        });
      }
    });
+
    value.hotel_meals.forEach((e, i) => {
      if (e.image instanceof File) {
        formData.append(`ticket_hotel_meals[${i}]image`, e.image);
--- a/src/pages/tours/ui/StepTwo.tsx
+++ b/src/pages/tours/ui/StepTwo.tsx
@@ -32,9 +32,9 @@ import {
  SelectValue,
 } from "@/shared/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -55,13 +55,17 @@ const formSchema = z.object({
 const StepTwo = ({
  data,
  isEditMode,
+  setStep,
 }: {
  data: GetOneTours | undefined;
  isEditMode: boolean;
+  step: number;
+  setStep: Dispatch<SetStateAction<number>>;
 }) => {
  const { amenities, id: ticketId } = useTicketStore();
  const navigate = useNavigate();
  const { t } = useTranslation();
+  const queryClient = useQueryClient();

  // 🧩 Query - Hotel detail
  const { data: hotelDetail } = useQuery({
@@ -77,16 +81,20 @@ const StepTwo = ({
    defaultValues: {
      title: "",
      rating: "3.0",
-      mealPlan: "",
+      mealPlan: "all_inclusive",
      hotelType: [],
      hotelFeatures: [],
      hotelFeaturesType: [],
    },
  });

-  // 🧩 Edit holati uchun formni to‘ldirish
  useEffect(() => {
-    if (isEditMode && hotelDetail?.[0]) {
+    if (
+      isEditMode &&
+      hotelDetail &&
+      hotelDetail.length > 0 &&
+      hotelDetail[0].meal_plan
+    ) {
      const hotel = hotelDetail[0];

      form.setValue("title", hotel.name);
@@ -101,8 +109,9 @@ const StepTwo = ({
              ? "Half Board"
              : hotel.meal_plan === "full_board"
                ? "Full Board"
-                : "All Inclusive";
+                : "all_inclusive";

+      // ✅ SetValue faqat backenddan qiymat kelganda chaqiriladi
      form.setValue("mealPlan", mealPlan);

      form.setValue(
@@ -117,7 +126,7 @@ const StepTwo = ({
        ...new Set(hotel.hotel_features?.map((f) => String(f.id)) ?? []),
      ]);
    }
-  }, [isEditMode, hotelDetail, form, data]);
+  }, [isEditMode, hotelDetail, form]);

  // 🧩 Select ma'lumotlari
  const [allHotelTypes, setAllHotelTypes] = useState<Type[]>([]);
@@ -222,8 +231,10 @@ const StepTwo = ({
  const { mutate, isPending } = useMutation({
    mutationFn: (body: FormData) => createHotel({ body }),
    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["hotel_detail"] });
      toast.success(t("Muvaffaqiyatli saqlandi"));
      navigate("/tours");
+      setStep(1);
    },
    onError: () =>
      toast.error(t("Xatolik yuz berdi"), {
@@ -236,8 +247,10 @@ const StepTwo = ({
    mutationFn: ({ body, id }: { id: number; body: FormData }) =>
      editHotel({ body, id }),
    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["hotel_detail"] });
      toast.success(t("Muvaffaqiyatli saqlandi"));
      navigate("/tours");
+      setStep(1);
    },
    onError: () =>
      toast.error(t("Xatolik yuz berdi"), {