api testing

src/app/[locale]/profile/refresh-order/page.tsx

@@ -0,0 +1,7 @@
+import RefreshOrder from '@/features/profile/ui/RefreshOrder';
+
+const Page = () => {
+  return <RefreshOrder />;
+};
+
+export default Page;

src/features/cart/lib/api.ts

@@ -24,6 +24,8 @@ export interface OrderCreateBody {
   contact_number: string;
   comment: string;
   name: string;
+  long: number;
+  lat: number;
 }
 
 export const cart_api = {

src/features/cart/lib/form.ts

@@ -1,8 +1,7 @@
 import { z } from 'zod';
 
 export const orderForm = z.object({
-  firstName: z.string().min(1, { message: 'Majburiy maydon' }),
+  username: z.string().min(1, { message: 'Majburiy maydon' }),
-  lastName: z.string().min(1, { message: 'Majburiy maydon' }),
   phone: z.string().min(12, { message: 'Xato raqam kiritildi' }),
   long: z.string().min(1, { message: 'Majburiy maydon' }),
   lat: z.string().min(1, { message: 'Majburiy maydon' }),

src/features/cart/ui/CartPage.tsx

@@ -158,7 +158,7 @@ const CartPage = () => {
                     width={500}
                     height={500}
                     className="object-cover"
-                    style={{ width: '100%', height: 'auto' }}
+                    style={{ width: '100%', height: '100%' }}
                   />
                 </div>
 

src/features/cart/ui/OrderPage.tsx

@@ -57,11 +57,10 @@ const OrderPage = () => {
   const form = useForm<z.infer<typeof orderForm>>({
     resolver: zodResolver(orderForm),
     defaultValues: {
-      firstName: '',
+      username: '',
       comment: '',
-      lastName: '',
+      lat: '41.311081',
-      lat: '',
+      long: '69.240562',
-      long: '',
       phone: '+998',
     },
   });
@@ -232,9 +231,11 @@ const OrderPage = () => {
       comment: value.comment,
       contact_number: onlyNumber(value.phone),
       delivery_type: deliveryMethod,
-      name: value.firstName + ' ' + value.lastName,
+      name: value.username,
       payment_type: paymentMethod,
       items: items,
+      long: Number(value.long),
+      lat: Number(value.lat),
     });
   }
 
@@ -288,37 +289,17 @@ const OrderPage = () => {
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <FormField
                       control={form.control}
-                      name="firstName"
+                      name="username"
                       render={({ field }) => (
                         <FormItem className="flex justify-start flex-col">
                           <Label className="block text-sm font-medium text-gray-700">
-                            {t('Ism')}
+                            {t('Ism Familiya')}
                           </Label>
                           <FormControl>
                             <Input
                               {...field}
                               className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
-                              placeholder={t('Ismingiz')}
+                              placeholder={t('Ism Familiyangiz')}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <FormField
-                      control={form.control}
-                      name="lastName"
-                      render={({ field }) => (
-                        <FormItem className="flex justify-start flex-col">
-                          <Label className="block text-sm font-medium text-gray-700">
-                            {t('Familiya')}
-                          </Label>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
-                              placeholder={t('Familiyangiz')}
                             />
                           </FormControl>
                           <FormMessage />

src/features/profile/lib/api.ts

@@ -3,9 +3,12 @@ import { API_URLS } from '@/shared/config/api/URLs';
 import { AxiosResponse } from 'axios';
 
 export interface OrderList {
-  count: number;
+  total: number;
-  next: string;
+  page: number;
-  previous: string;
+  page_size: number;
+  total_pages: number;
+  has_next: boolean;
+  has_previous: boolean;
   results: OrderListRes[];
 }
 

src/features/profile/lib/order.ts

@@ -0,0 +1,35 @@
+// store/orderStore.ts
+import { create } from 'zustand';
+import { OrderListRes } from './api';
+
+type State = {
+  order: OrderListRes | null;
+};
+
+type Actions = {
+  setOrder: (order: OrderListRes) => void;
+};
+
+const getInitialOrder = (): OrderListRes | null => {
+  if (typeof window === 'undefined') return null; // SSR check
+  const stored = localStorage.getItem('order');
+  if (!stored) return null;
+  try {
+    return JSON.parse(stored);
+  } catch (err) {
+    console.error('Failed to parse order from localStorage', err);
+    return null;
+  }
+};
+
+const useOrderStore = create<State & Actions>((set) => ({
+  order: getInitialOrder(),
+  setOrder: (order: OrderListRes) => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('order', JSON.stringify(order));
+    }
+    set({ order });
+  },
+}));
+
+export default useOrderStore;

src/features/profile/ui/History.tsx

@@ -1,95 +1,245 @@
+import { usePathname, useRouter } from '@/shared/config/i18n/navigation';
+import formatDate from '@/shared/lib/formatDate';
+import formatPrice from '@/shared/lib/formatPrice';
+import { cn } from '@/shared/lib/utils';
 import { Button } from '@/shared/ui/button';
 import { Card, CardContent } from '@/shared/ui/card';
+import { GlobalPagination } from '@/shared/ui/global-pagination';
 import { useQuery } from '@tanstack/react-query';
-import { Calendar, CheckCircle, Clock, RefreshCw } from 'lucide-react';
+import {
+  Calendar,
+  CheckCircle,
+  Clock,
+  Loader2,
+  Package,
+  RefreshCw,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import Image from 'next/image';
+import { useSearchParams } from 'next/navigation';
-import { order_api } from '../lib/api';
+import { useEffect, useState } from 'react';
-import { orders } from '../lib/data';
+import { order_api, OrderListRes } from '../lib/api';
+import useOrderStore from '../lib/order';
 
 const HistoryTabs = () => {
   const t = useTranslations();
+  const searchParams = useSearchParams();
+  const { setOrder } = useOrderStore();
+  const [page, setPage] = useState(1);
+  const PAGE_SIZE = 36;
+  const router = useRouter();
+  const pathname = usePathname();
 
-  const { data } = useQuery({
+  const { data, isLoading } = useQuery({
-    queryKey: ['order_list'],
+    queryKey: ['order_list', page],
-    queryFn: () => order_api.list({ page: 1, page_size: 1 }),
+    queryFn: () => order_api.list({ page, page_size: PAGE_SIZE }),
+    select(data) {
+      return data.data;
+    },
   });
 
-  console.log(data);
+  useEffect(() => {
+    const urlPage = Number(searchParams.get('page')) || 1;
+    setPage(urlPage);
+  }, [searchParams]);
+
+  const handlePageChange = (newPage: number) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('page', newPage.toString());
+
+    router.push(`${pathname}?${params.toString()}`, {
+      scroll: true,
+    });
+  };
+
+  const getStatusConfig = (status: 'NEW' | 'DONE') => {
+    return status === 'DONE'
+      ? {
+          bgColor: 'bg-emerald-100',
+          textColor: 'text-emerald-600',
+          icon: CheckCircle,
+          text: 'Yetkazildi',
+        }
+      : {
+          bgColor: 'bg-yellow-100',
+          textColor: 'text-yellow-600',
+          icon: Clock,
+          text: 'Kutilmoqda',
+        };
+  };
+
+  const getPaymentTypeText = (type: 'CASH' | 'ACCOUNT_NUMBER') => {
+    return type === 'CASH' ? 'Naqd pul' : 'Hisob raqami';
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="w-8 h-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (!data?.results || data.results.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <Package className="w-16 h-16 text-muted-foreground mb-4" />
+        <p className="text-lg font-semibold text-foreground mb-2">
+          {t('Buyurtmalar topilmadi')}
+        </p>
+        <p className="text-sm text-muted-foreground">
+          {t('Hali buyurtma qilmagansiz')}
+        </p>
+      </div>
+    );
+  }
 
   return (
     <>
       <div className="flex items-center justify-between mb-4 md:mb-6">
         <h2 className="text-xl md:text-2xl font-bold text-foreground">
-          {t('Tarix')}
+          {t('Buyurtmalar tarixi')}
         </h2>
+        <div className="text-sm text-muted-foreground">
+          {data.results.length} ta buyurtma
         </div>
+      </div>
+
       <div className="space-y-3 md:space-y-4">
-        {orders
+        {data.results.map((order: OrderListRes, idx: number) => {
-          .filter((o) => o.status === 'delivered')
+          const statusConfig = getStatusConfig(order.status);
-          .map((order, idx) => (
+          const StatusIcon = statusConfig.icon;
+
+          return (
             <div key={order.id} className="flex gap-3 md:gap-4">
+              {/* Status Timeline */}
               <div className="flex flex-col items-center">
-                <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
+                <div
-                  <CheckCircle className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
+                  className={cn(
+                    'w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center shrink-0',
+                    statusConfig.bgColor,
+                  )}
+                >
+                  <StatusIcon
+                    className={cn(
+                      'w-4 h-4 md:w-5 md:h-5',
+                      statusConfig.textColor,
+                    )}
+                  />
                 </div>
-                {idx <
+
-                  orders.filter((o) => o.status === 'delivered').length - 1 && (
+                {idx < data.results.length - 1 && (
-                  <div className="w-0.5 h-full bg-slate-200 my-2" />
+                  <div className="w-0.5 flex-1 bg-slate-200 my-2" />
                 )}
               </div>
-              <Card className="flex-1 border-0 shadow-sm">
+
+              {/* Order Card */}
+              <Card className="flex-1 border-0 shadow-sm hover:shadow-md transition-shadow">
                 <CardContent className="p-3 md:p-4">
-                  <div className="flex flex-col md:flex-row md:items-start justify-between mb-2 md:mb-3 gap-1">
+                  {/* Header */}
-                    <div>
+                  <div className="flex flex-col md:flex-row md:items-start justify-between mb-3 gap-2">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
                         <p className="font-semibold text-sm md:text-base text-foreground">
-                        {order.id}
+                          #{order.order_number}
                         </p>
+                        <span
+                          className={cn(
+                            'text-xs px-2 py-0.5 rounded-full',
+                            statusConfig.bgColor,
+                            statusConfig.textColor,
+                          )}
+                        >
+                          {statusConfig.text}
+                        </span>
+                      </div>
                       <div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground flex-wrap">
                         <span className="flex items-center gap-1">
                           <Calendar className="w-3 h-3 md:w-4 md:h-4" />
-                          {order.date}
+                          {formatDate.format(
-                        </span>
+                            order.created_at,
-                        <span className="flex items-center gap-1">
+                            'DD.MM.YYYY HH:mm',
-                          <Clock className="w-3 h-3 md:w-4 md:h-4" />
+                          )}
-                          {order.time}
                         </span>
                       </div>
                     </div>
-                    <p className="font-bold text-sm md:text-base text-foreground">
+                    <div className="text-right">
-                      {(order.total + order.deliveryFee).toLocaleString()}{' '}
+                      <p className="font-bold text-base md:text-lg text-foreground">
-                      {"so'm"}
+                        {formatPrice(
+                          order.total_price + order.delivery_price,
+                          true,
+                        )}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {getPaymentTypeText(order.payment_type)}
                       </p>
                     </div>
-                  <div className="flex items-center gap-2 overflow-x-auto pb-2">
+                  </div>
-                    {order.items.map((item, i) => (
+
-                      <Image
+                  {order.comment && (
-                        width={500}
+                    <div className="mb-3 p-2 bg-slate-50 rounded-lg">
-                        height={500}
+                      <p className="text-xs text-muted-foreground mb-1">
-                        key={i}
+                        Izoh:
-                        src={item.image || '/placeholder.svg'}
+                      </p>
-                        alt={item.name}
+                      <p className="text-sm text-foreground">{order.comment}</p>
-                        className="w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover shrink-0"
+                    </div>
-                      />
+                  )}
-                    ))}
+
-                    <span className="text-xs md:text-sm text-muted-foreground ml-1 truncate">
+                  {/* Total Price Breakdown */}
-                      {order.items.map((i) => i.name).join(', ')}
+                  <div className="border-t pt-3 mb-3 space-y-1 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">
+                        Mahsulotlar narxi:
+                      </span>
+                      <span className="font-medium">
+                        {formatPrice(order.total_price, true)}
                       </span>
                     </div>
-                  <div className="flex gap-2 mt-2 md:mt-3">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Yetkazish:</span>
+                      <span className="font-medium">
+                        {formatPrice(order.delivery_price, true)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between font-bold text-base pt-1 border-t">
+                      <span>Jami:</span>
+                      <span>
+                        {formatPrice(
+                          order.total_price + order.delivery_price,
+                          true,
+                        )}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex gap-2">
                     <Button
                       variant="outline"
                       size="sm"
+                      onClick={() => {
+                        router.push('/profile/refresh-order');
+                        setOrder(order);
+                      }}
                       className="bg-transparent gap-1 md:gap-2 text-xs md:text-sm h-8 md:h-9 px-2 md:px-3"
                     >
                       <RefreshCw className="w-3 h-3 md:w-4 md:h-4" />
-                      {t('Qayta')}
+                      {t('Qayta buyurtma')}
                     </Button>
                   </div>
                 </CardContent>
               </Card>
             </div>
-          ))}
+          );
+        })}
+      </div>
+
+      <div className="w-full flex justify-end mt-5">
+        <GlobalPagination
+          onChange={handlePageChange}
+          page={page}
+          total={data.total_pages}
+          pageSize={PAGE_SIZE}
+        />
       </div>
     </>
   );

src/features/profile/ui/RefreshOrder.tsx

@@ -0,0 +1,637 @@
+'use client';
+
+import { cart_api, OrderCreateBody } from '@/features/cart/lib/api';
+import { orderForm } from '@/features/cart/lib/form';
+import formatPhone from '@/shared/lib/formatPhone';
+import formatPrice from '@/shared/lib/formatPrice';
+import onlyNumber from '@/shared/lib/onlyNumber';
+import { Button } from '@/shared/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/shared/ui/form';
+import { Input } from '@/shared/ui/input';
+import { Label } from '@/shared/ui/label';
+import { Textarea } from '@/shared/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Map,
+  Placemark,
+  Polygon,
+  YMaps,
+  ZoomControl,
+} from '@pbe/react-yandex-maps';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  CheckCircle2,
+  Clock,
+  CreditCard,
+  Loader2,
+  LocateFixed,
+  MapPin,
+  Package,
+  Truck,
+  User,
+  Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import z from 'zod';
+import useOrderStore from '../lib/order';
+
+interface CoordsData {
+  lat: number;
+  lon: number;
+  polygon: [number, number][][];
+}
+
+const RefreshOrder = () => {
+  const { order: initialValues } = useOrderStore();
+  const t = useTranslations();
+  const queryClient = useQueryClient();
+
+  const initialCartItems = initialValues?.items.map((item) => ({
+    id: item.id,
+    product_id: item.product.id,
+    product_name: item.product.name,
+    product_price: item.price,
+    product_image:
+      item.product.image ||
+      item.product.images?.[0]?.image ||
+      '/placeholder.svg',
+    quantity: item.quantity,
+  }));
+
+  const cartItems = initialCartItems;
+
+  const form = useForm<z.infer<typeof orderForm>>({
+    resolver: zodResolver(orderForm),
+    defaultValues: {
+      username: initialValues?.name,
+      comment: initialValues?.comment,
+      lat: '41.311081',
+      long: '69.240562',
+      phone: initialValues?.contact_number,
+    },
+  });
+
+  const [orderSuccess, setOrderSuccess] = useState(false);
+  const [paymentMethod, setPaymentMethod] = useState<'CASH' | 'ACCOUNT_NUMBER'>(
+    'CASH',
+  );
+  const [deliveryMethod, setDeliveryMethod] = useState<
+    'YandexGo' | 'DELIVERY_COURIES' | 'PICKUP'
+  >('DELIVERY_COURIES');
+
+  useEffect(() => {
+    if (initialValues) {
+      setPaymentMethod(initialValues.payment_type);
+      setDeliveryMethod(initialValues.delivery_type);
+    }
+  }, [initialValues]);
+
+  const subtotal = cartItems
+    ? cartItems.reduce(
+        (sum, item) => sum + item.product_price * item.quantity,
+        0,
+      )
+    : 0;
+
+  const deliveryFee =
+    deliveryMethod === 'DELIVERY_COURIES'
+      ? subtotal > 50000
+        ? 0
+        : 15000
+      : deliveryMethod === 'YandexGo'
+        ? 25000
+        : 0;
+
+  const total = subtotal + deliveryFee;
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
+    onSuccess: () => {
+      setOrderSuccess(true);
+      queryClient.refetchQueries({ queryKey: ['cart_items'] });
+    },
+    onError: () => {
+      toast.error('Xatolik yuz berdi', {
+        richColors: true,
+        position: 'top-center',
+      });
+    },
+  });
+
+  const [coords, setCoords] = useState({
+    latitude: 41.311081,
+    longitude: 69.240562,
+    zoom: 12,
+  });
+  const [polygonCoords, setPolygonCoords] = useState<
+    [number, number][][] | null
+  >(null);
+
+  const getCoords = async (name: string): Promise<CoordsData | null> => {
+    const res = await fetch(
+      `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(
+        name,
+      )}&format=json&polygon_geojson=1&limit=1`,
+    );
+    const data = await res.json();
+    if (data.length > 0 && data[0].geojson) {
+      const lat = parseFloat(data[0].lat);
+      const lon = parseFloat(data[0].lon);
+      let polygon: [number, number][][] = [];
+      if (data[0].geojson.type === 'Polygon') {
+        polygon = data[0].geojson.coordinates.map((ring: [number, number][]) =>
+          ring.map((coord: [number, number]) => [coord[1], coord[0]]),
+        );
+      } else if (data[0].geojson.type === 'MultiPolygon') {
+        polygon = data[0].geojson.coordinates.map(
+          (poly: [number, number][][]) =>
+            poly[0].map((coord: [number, number]) => [coord[1], coord[0]]),
+        );
+      }
+      return { lat, lon, polygon };
+    }
+    return null;
+  };
+
+  const handleMapClick = (
+    e: ymaps.IEvent<MouseEvent, { coords: [number, number] }>,
+  ) => {
+    const [lat, lon] = e.get('coords');
+    setCoords({ latitude: lat, longitude: lon, zoom: 18 });
+    form.setValue('lat', lat.toString(), { shouldDirty: true });
+    form.setValue('long', lon.toString(), { shouldDirty: true });
+  };
+
+  const handleShowMyLocation = () => {
+    if (!navigator.geolocation) {
+      alert('Sizning brauzeringiz geolokatsiyani qo‘llab-quvvatlamaydi');
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const lat = position.coords.latitude;
+        const lon = position.coords.longitude;
+        setCoords({ latitude: lat, longitude: lon, zoom: 14 });
+        form.setValue('lat', lat.toString());
+        form.setValue('long', lon.toString());
+      },
+      (error) => {
+        alert('Joylashuv aniqlanmadi: ' + error.message);
+      },
+    );
+  };
+
+  const cityValue = form.watch('city');
+
+  useEffect(() => {
+    if (!cityValue || cityValue.length < 3) return;
+    const timeout = setTimeout(async () => {
+      const result = await getCoords(cityValue);
+      if (!result) return;
+      setCoords({
+        latitude: result.lat,
+        longitude: result.lon,
+        zoom: 12,
+      });
+      setPolygonCoords(result.polygon);
+      form.setValue('lat', result.lat.toString(), { shouldDirty: true });
+      form.setValue('long', result.lon.toString(), { shouldDirty: true });
+    }, 700);
+    return () => clearTimeout(timeout);
+  }, [cityValue]);
+
+  const onSubmit = (value: z.infer<typeof orderForm>) => {
+    if (initialValues === null) {
+      toast.error('Savatcha bo‘sh', {
+        richColors: true,
+        position: 'top-center',
+      });
+      return;
+    }
+
+    const items = initialValues.items.map((item) => ({
+      product_id: item.product.id,
+      quantity: item.quantity,
+    }));
+
+    mutate({
+      comment: value.comment,
+      contact_number: onlyNumber(value.phone),
+      delivery_type: deliveryMethod,
+      name: value.username,
+      payment_type: paymentMethod,
+      items: items,
+      long: Number(value.long),
+      lat: Number(value.lat),
+    });
+  };
+
+  if (orderSuccess) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
+          <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <CheckCircle2 className="w-12 h-12 text-green-600" />
+          </div>
+          <h2 className="text-2xl font-bold text-gray-800 mb-2">
+            {t('Buyurtma qabul qilindi!')}
+          </h2>
+          <p className="text-gray-500 mb-6">
+            {t('Buyurtmangiz muvaffaqiyatli qabul qilindi')}
+          </p>
+          <button
+            onClick={() => (window.location.href = '/')}
+            className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
+          >
+            {t('Bosh sahifaga qaytish')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="custom-container mb-5">
+      <>
+        {/* Header */}
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold text-gray-800 mb-2">
+            {t('Buyurtmani rasmiylashtirish')}
+          </h1>
+          <p className="text-gray-600">{t("Ma'lumotlaringizni to'ldiring")}</p>
+        </div>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* Left Column - Forms */}
+              <div className="lg:col-span-2 space-y-6">
+                {/* Contact Information */}
+                <div className="bg-white rounded-lg shadow-md p-6">
+                  <div className="flex items-center gap-2 mb-4">
+                    <User className="w-5 h-5 text-blue-600" />
+                    <h2 className="text-xl font-semibold">
+                      {t("Shaxsiy ma'lumotlar")}
+                    </h2>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="username"
+                      render={({ field }) => (
+                        <FormItem className="flex justify-start flex-col">
+                          <Label className="block text-sm font-medium text-gray-700">
+                            {t('Ism Familiya')}
+                          </Label>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
+                              placeholder={t('Ism Familiyangiz')}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="phone"
+                      render={({ field }) => (
+                        <FormItem>
+                          <Label className="block text-sm font-medium text-gray-700">
+                            {t('Telefon raqam')}
+                          </Label>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              value={formatPhone(field.value ?? '')}
+                              onChange={(e) => field.onChange(e.target.value)}
+                              type="tel"
+                              className="w-full h-12 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
+                              placeholder="+998 90 123 45 67"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  <FormField
+                    control={form.control}
+                    name="comment"
+                    render={({ field }) => (
+                      <FormItem>
+                        <Label className="block mt-3 text-sm font-medium text-gray-700">
+                          {t('Izoh')}
+                        </Label>
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            className="w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
+                            placeholder={t('Izoh')}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                {/* Delivery Address */}
+                <div className="bg-white rounded-lg shadow-md p-6">
+                  <div className="flex items-center gap-2 mb-4">
+                    <MapPin className="w-5 h-5 text-blue-600" />
+                    <h2 className="text-xl font-semibold">
+                      {t('Yetkazib berish manzili')}
+                    </h2>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="city"
+                      render={({ field }) => (
+                        <FormItem>
+                          <Label className="block text-sm font-medium text-gray-700">
+                            {t('Manzilni qidirish')}
+                          </Label>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              type="text"
+                              className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
+                              placeholder={t('Toshkent')}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <div className="md:col-span-2">
+                      <div className="relative h-80 border rounded-lg overflow-hidden">
+                        <YMaps query={{ lang: 'en_RU' }}>
+                          <Map
+                            key={`${coords.latitude}-${coords.longitude}`}
+                            state={{
+                              center: [coords.latitude, coords.longitude],
+                              zoom: coords.zoom,
+                            }}
+                            width="100%"
+                            height="100%"
+                            onClick={handleMapClick}
+                          >
+                            <ZoomControl
+                              options={{
+                                position: { right: '10px', bottom: '70px' },
+                              }}
+                            />
+                            <Placemark
+                              geometry={[coords.latitude, coords.longitude]}
+                            />
+                            {polygonCoords && (
+                              <Polygon
+                                geometry={polygonCoords}
+                                options={{
+                                  fillColor: 'rgba(0, 150, 255, 0.2)',
+                                  strokeColor: 'rgba(0, 150, 255, 0.8)',
+                                  strokeWidth: 2,
+                                  interactivityModel: 'default#transparent',
+                                }}
+                              />
+                            )}
+                          </Map>
+                        </YMaps>
+                        <Button
+                          type="button"
+                          size="sm"
+                          onClick={handleShowMyLocation}
+                          className="absolute bottom-3 right-2.5 shadow-md bg-white text-black hover:bg-gray-100"
+                        >
+                          <LocateFixed className="w-4 h-4 mr-1" />
+                          {t('Mening joylashuvim')}
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="bg-white rounded-lg shadow-md p-6">
+                  <div className="flex items-center gap-2 mb-4">
+                    <Truck className="w-5 h-5 text-blue-600" />
+                    <h2 className="text-xl font-semibold">
+                      {t('Yetkazib berish usuli')}
+                    </h2>
+                  </div>
+                  <div className="space-y-3">
+                    <label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
+                      <Input
+                        type="radio"
+                        name="delivery"
+                        value="standard"
+                        checked={deliveryMethod === 'DELIVERY_COURIES'}
+                        onChange={() => setDeliveryMethod('DELIVERY_COURIES')}
+                        className="w-4 h-4 text-blue-600"
+                      />
+                      <div className="ml-4 flex-1">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Clock className="w-5 h-5 text-gray-600" />
+                            <span className="font-semibold">
+                              {t('Standart yetkazib berish')}
+                            </span>
+                          </div>
+                          <span className="font-bold text-blue-600">
+                            {subtotal && subtotal > 50000
+                              ? 'Bepul'
+                              : "15,000 so'm"}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-500 mt-1">
+                          {t('2-3 kun ichida')}
+                        </p>
+                      </div>
+                    </label>
+
+                    <label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
+                      <Input
+                        type="radio"
+                        name="delivery"
+                        value="express"
+                        checked={deliveryMethod === 'YandexGo'}
+                        onChange={() => setDeliveryMethod('YandexGo')}
+                        className="w-4 h-4 text-blue-600"
+                      />
+                      <div className="ml-4 flex-1">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Package className="w-5 h-5 text-gray-600" />
+                            <span className="font-semibold">
+                              {t('Tez yetkazib berish')}
+                            </span>
+                          </div>
+                          <span className="font-bold text-blue-600">
+                            {"25,000 so'm"}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-500 mt-1">
+                          {t('1 kun ichida')}
+                        </p>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+
+                <div className="bg-white rounded-lg shadow-md p-6">
+                  <div className="flex items-center gap-2 mb-4">
+                    <CreditCard className="w-5 h-5 text-blue-600" />
+                    <h2 className="text-xl font-semibold">
+                      {t("To'lov usuli")}
+                    </h2>
+                  </div>
+                  <div className="space-y-3">
+                    <Label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
+                      <Input
+                        type="radio"
+                        name="payment"
+                        value="cash"
+                        checked={paymentMethod === 'CASH'}
+                        onChange={() => setPaymentMethod('CASH')}
+                        className="w-4 h-4 text-blue-600"
+                      />
+                      <div className="ml-4 flex items-center gap-3">
+                        <Wallet className="w-6 h-6 text-green-600" />
+                        <div>
+                          <span className="font-semibold">{t('Naqd pul')}</span>
+                          <p className="text-sm text-gray-500">
+                            {t("Yetkazib berishda to'lash")}
+                          </p>
+                        </div>
+                      </div>
+                    </Label>
+
+                    <Label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
+                      <Input
+                        type="radio"
+                        name="payment"
+                        value="card"
+                        checked={paymentMethod === 'ACCOUNT_NUMBER'}
+                        onChange={() => setPaymentMethod('ACCOUNT_NUMBER')}
+                        className="w-4 h-4 text-blue-600"
+                      />
+                      <div className="ml-4 flex items-center gap-3">
+                        <CreditCard className="w-6 h-6 text-blue-600" />
+                        <div>
+                          <span className="font-semibold">
+                            {t('Plastik karta')}
+                          </span>
+                          <p className="text-sm text-gray-500">
+                            {t("Online to'lov")}
+                          </p>
+                        </div>
+                      </div>
+                    </Label>
+                  </div>
+                </div>
+              </div>
+
+              {/* Right Column - Order Summary */}
+              <div className="lg:col-span-1">
+                <div className="bg-white rounded-lg shadow-md p-6 sticky top-4">
+                  <h3 className="text-xl font-bold mb-4">{t('Mahsulotlar')}</h3>
+
+                  {/* Cart Items */}
+                  <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
+                    {cartItems?.map((item) => (
+                      <div key={item.id} className="flex gap-3 pb-3 border-b">
+                        <Image
+                          width={500}
+                          height={500}
+                          src={item.product_image}
+                          alt={item.product_name}
+                          className="w-16 h-16 object-contain bg-gray-100 rounded"
+                        />
+                        <div className="flex-1">
+                          <h4 className="font-medium text-sm">
+                            {item.product_name}
+                          </h4>
+                          <p className="text-sm text-gray-500">
+                            {item.quantity} x{' '}
+                            {formatPrice(item.product_price, true)}
+                          </p>
+                          <p className="font-semibold text-sm">
+                            {formatPrice(
+                              item.product_price * item.quantity,
+                              true,
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Pricing */}
+                  <div className="space-y-2 mb-4 pt-4 border-t">
+                    <div className="flex justify-between text-gray-600">
+                      <span>{t('Mahsulotlar')}:</span>
+                      <span>{subtotal && formatPrice(subtotal, true)}</span>
+                    </div>
+                    <div className="flex justify-between text-gray-600">
+                      <span>{t('Yetkazib berish')}:</span>
+                      <span>
+                        {deliveryFee === 0 ? (
+                          <span className="text-green-600 font-semibold">
+                            {t('Bepul')}
+                          </span>
+                        ) : (
+                          `${deliveryFee.toLocaleString()} so'm`
+                        )}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="border-t pt-4 mb-6">
+                    <div className="flex justify-between items-center">
+                      <span className="text-lg font-semibold">
+                        {t('Jami')}:
+                      </span>
+                      <span className="text-2xl font-bold text-blue-600">
+                        {total && formatPrice(total, true)}
+                      </span>
+                    </div>
+                  </div>
+
+                  <button
+                    type="submit"
+                    disabled={isPending}
+                    className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed"
+                  >
+                    {isPending ? (
+                      <span className="flex items-center justify-center gap-2">
+                        <Loader2 className="animate-spin" />
+                      </span>
+                    ) : (
+                      t('Buyurtmani tasdiqlash')
+                    )}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </Form>
+      </>
+    </div>
+  );
+};
+
+export default RefreshOrder;

src/shared/config/i18n/messages/ru.json

@@ -135,8 +135,8 @@
   "Shaxsiy ma'lumotlar": "Личные данные",
   "Ism": "Имя",
   "Ismingiz": "Ваше имя",
-  "Familiya": "Фамилия",
+  "Familiya": "Имя Фамилия",
-  "Familiyangiz": "Ваша фамилия",
+  "Familiyangiz": "Ваше имя и фамилия",
   "Telefon raqam": "Номер телефона",
   "Izoh": "Комментарий",
   "Yetkazib berish manzili": "Адрес доставки",

src/shared/config/i18n/messages/uz.d.json.ts

@@ -140,8 +140,8 @@ declare const messages: {
   "Shaxsiy ma'lumotlar": "Shaxsiy ma'lumotlar";
   Ism: 'Ism';
   Ismingiz: 'Ismingiz';
-  Familiya: 'Familiya';
+  Familiya: 'Ism Familiya';
-  Familiyangiz: 'Familiyangiz';
+  Familiyangiz: 'Ism Familiyangiz';
   'Telefon raqam': 'Telefon raqam';
   Izoh: 'Izoh';
   'Yetkazib berish manzili': 'Yetkazib berish manzili';

src/shared/config/i18n/messages/uz.json

@@ -137,8 +137,8 @@
   "Shaxsiy ma'lumotlar": "Shaxsiy ma'lumotlar",
   "Ism": "Ism",
   "Ismingiz": "Ismingiz",
-  "Familiya": "Familiya",
+  "Familiya": "Ism Familiya",
-  "Familiyangiz": "Familiyangiz",
+  "Familiyangiz": "Ism Familiyangiz",
   "Telefon raqam": "Telefon raqam",
   "Izoh": "Izoh",
   "Yetkazib berish manzili": "Yetkazib berish manzili",