update order

package.json

@@ -28,7 +28,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.10",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.4",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
@@ -42,6 +42,7 @@
     "axios": "^1.12.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.26",
@@ -51,6 +52,7 @@
     "next-intl": "^4.3.9",
     "next-themes": "^0.4.6",
     "react": "^18.3.1",
+    "react-day-picker": "^9.13.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.68.0",
     "recharts": "^2.15.3",

pnpm-lock.yaml

@@ -57,7 +57,7 @@ importers:
         specifier: ^1.1.8
         version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
-        specifier: ^2.2.2
+        specifier: ^2.2.6
         version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
         specifier: ^1.1.4
@@ -98,6 +98,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       dayjs:
         specifier: ^1.11.13
         version: 1.11.19
@@ -125,6 +128,9 @@ importers:
       react:
         specifier: ^18.3.1
         version: 18.3.1
+      react-day-picker:
+        specifier: ^9.13.0
+        version: 9.13.0(react@18.3.1)
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
@@ -212,6 +218,9 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
+  '@date-fns/tz@1.4.1':
+    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+
   '@dnd-kit/accessibility@3.1.1':
     resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
@@ -1864,6 +1873,12 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
@@ -2833,6 +2848,12 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  react-day-picker@9.13.0:
+    resolution: {integrity: sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -3287,6 +3308,8 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
+  '@date-fns/tz@1.4.1': {}
+
   '@dnd-kit/accessibility@3.1.1(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -4855,6 +4878,10 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.1.0: {}
+
   dayjs@1.11.19: {}
 
   debug@3.2.7:
@@ -5913,6 +5940,13 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  react-day-picker@9.13.0(react@18.3.1):
+    dependencies:
+      '@date-fns/tz': 1.4.1
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 18.3.1
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0

src/features/cart/lib/api.ts

@@ -16,14 +16,10 @@ interface CartItem {
 
 export interface OrderCreateBody {
   items: {
-    product_id: string;
+    product_id: number;
     quantity: number;
   }[];
-  payment_type: 'CASH' | 'ACCOUNT_NUMBER';
-  delivery_type: 'YandexGo' | 'DELIVERY_COURIES' | 'PICKUP';
-  contact_number: string;
   comment: string;
-  name: string;
   long: number;
   lat: number;
 }

src/features/cart/lib/form.ts

@@ -1,8 +1,6 @@
 import { z } from 'zod';
 
 export const orderForm = z.object({
-  username: 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' }),
   comment: z.string().min(1, { message: 'Majburiy maydon' }),

src/features/cart/ui/OrderPage.tsx

@@ -2,10 +2,10 @@
 
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { useCartId } from '@/shared/hooks/cartId';
-import formatPhone from '@/shared/lib/formatPhone';
 import formatPrice from '@/shared/lib/formatPrice';
-import onlyNumber from '@/shared/lib/onlyNumber';
+import { cn } from '@/shared/lib/utils';
 import { Button } from '@/shared/ui/button';
+import { Calendar } from '@/shared/ui/calendar';
 import {
   Form,
   FormControl,
@@ -15,6 +15,14 @@ import {
 } from '@/shared/ui/form';
 import { Input } from '@/shared/ui/input';
 import { Label } from '@/shared/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui/select';
 import { Textarea } from '@/shared/ui/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -26,17 +34,15 @@ import {
 } from '@pbe/react-yandex-maps';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
+import { format } from 'date-fns';
+import { uz } from 'date-fns/locale';
 import {
+  Calendar as CalIcon,
   CheckCircle2,
   Clock,
-  CreditCard,
   Loader2,
   LocateFixed,
   MapPin,
-  Package,
-  Truck,
-  User,
-  Wallet,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
@@ -53,16 +59,24 @@ interface CoordsData {
   polygon: [number, number][][];
 }
 
+// Yetkazib berish vaqt oraliqlar
+const deliveryTimeSlots = [
+  { id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' },
+  { id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' },
+  { id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' },
+  { id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' },
+  { id: 5, label: '17:00 - 19:00', start: '17:00', end: '19:00' },
+  { id: 6, label: '19:00 - 21:00', start: '19:00', end: '21:00' },
+];
+
 const OrderPage = () => {
   const t = useTranslations();
   const form = useForm<z.infer<typeof orderForm>>({
     resolver: zodResolver(orderForm),
     defaultValues: {
-      username: '',
       comment: '',
       lat: '41.311081',
       long: '69.240562',
-      phone: '+998',
     },
   });
   const [cart, setCart] = useState<number | string | null>(null);
@@ -103,26 +117,15 @@ const OrderPage = () => {
     select: (data) => data.data.cart_item,
   });
 
-  const [paymentMethod, setPaymentMethod] = useState<'CASH' | 'ACCOUNT_NUMBER'>(
-    'CASH',
-  );
-  const [deliveryMethod, setDeliveryMethod] = useState<
-    'YandexGo' | 'DELIVERY_COURIES' | 'PICKUP'
-  >('DELIVERY_COURIES');
+  // Yetkazib berish vaqti uchun state
+  const [deliveryDate, setDeliveryDate] = useState<Date>();
+  const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');
 
   const subtotal = cartItems?.reduce(
     (sum, item) => sum + item.product_price * item.quantity,
     0,
   );
 
-  const deliveryFee =
-    deliveryMethod === 'DELIVERY_COURIES'
-      ? 25000
-      : subtotal && subtotal > 50000
-        ? 0
-        : 15000;
-  const total = subtotal;
-
   const [coords, setCoords] = useState({
     latitude: 41.311081,
     longitude: 69.240562,
@@ -175,7 +178,7 @@ const OrderPage = () => {
 
   const handleShowMyLocation = () => {
     if (!navigator.geolocation) {
-      alert('Sizning brauzeringiz geolokatsiyani qo‘llab-quvvatlamaydi');
+      alert("Sizning brauzeringiz geolokatsiyani qo'llab-quvvatlamaydi");
       return;
     }
     navigator.geolocation.getCurrentPosition(
@@ -212,14 +215,31 @@ const OrderPage = () => {
 
       form.setValue('lat', result.lat.toString(), { shouldDirty: true });
       form.setValue('long', result.lon.toString(), { shouldDirty: true });
-    }, 700); // debounce
+    }, 700);
 
     return () => clearTimeout(timeout);
   }, [cityValue]);
 
   function onSubmit(value: z.infer<typeof orderForm>) {
     if (!cartItems || cartItems.length === 0) {
-      toast.error('Savatcha bo‘sh', {
+      toast.error("Savatcha bo'sh", {
+        richColors: true,
+        position: 'top-center',
+      });
+      return;
+    }
+
+    // Yetkazib berish vaqtini tekshirish
+    if (!deliveryDate) {
+      toast.error('Yetkazib berish sanasini tanlang', {
+        richColors: true,
+        position: 'top-center',
+      });
+      return;
+    }
+
+    if (!selectedTimeSlot) {
+      toast.error('Yetkazib berish vaqtini tanlang', {
         richColors: true,
         position: 'top-center',
       });
@@ -227,19 +247,18 @@ const OrderPage = () => {
     }
 
     const items = cartItems.map((item) => ({
-      product_id: item.product_id,
+      product_id: Number(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),
+      // delivery_date: format(deliveryDate, 'yyyy-MM-dd'),
+      // delivery_time_start: timeSlot?.start,
+      // delivery_time_end: timeSlot?.end,
     });
   }
 
@@ -269,8 +288,7 @@ const OrderPage = () => {
 
   return (
     <div className="custom-container mb-5">
-      <>
-        {/* Header */}
+      <div>
         <div className="mb-6">
           <h1 className="text-3xl font-bold text-gray-800 mb-2">
             {t('Buyurtmani rasmiylashtirish')}
@@ -278,62 +296,11 @@ const OrderPage = () => {
           <p className="text-gray-600">{t("Ma'lumotlaringizni to'ldiring")}</p>
         </div>
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div onSubmit={form.handleSubmit(onSubmit)} className="contents">
             <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('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"
@@ -433,122 +400,105 @@ const OrderPage = () => {
                   </div>
                 </div>
 
+                {/* Yetkazib berish vaqti - Yangilangan versiya */}
                 <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" />
+                    <Clock className="w-5 h-5 text-blue-600" />
                     <h2 className="text-xl font-semibold">
-                      {t('Yetkazib berish usuli')}
+                      {t('Yetkazib berish vaqti')}
                     </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>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {/* Sana tanlash */}
+                    <div className="space-y-2">
+                      <Label className="block text-sm font-medium text-gray-700">
+                        {t('Yetkazib berish sanasi')}
                       </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"
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            className={cn(
+                              'w-full h-12 justify-start text-left font-normal',
+                              !deliveryDate && 'text-muted-foreground',
+                            )}
+                          >
+                            <CalIcon className="mr-2 h-4 w-4" />
+                            {deliveryDate ? (
+                              format(deliveryDate, 'dd MMMM yyyy', {
+                                locale: uz,
+                              })
+                            ) : (
+                              <span>{t('Sanani tanlang')}</span>
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={deliveryDate}
+                            captionLayout="dropdown"
+                            toYear={new Date().getFullYear() + 10}
+                            onSelect={setDeliveryDate}
+                            disabled={(date) =>
+                              date < new Date() ||
+                              date < new Date(new Date().setHours(0, 0, 0, 0))
+                            }
+                            initialFocus
                           />
-                      <div className="ml-4 flex items-center gap-3">
-                        <CreditCard className="w-6 h-6 text-blue-600" />
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    {/* Vaqt tanlash */}
+                    <div className="space-y-2">
+                      <Label className="block text-sm font-medium text-gray-700">
+                        {t("Vaqt oralig'i")}
+                      </Label>
+                      <Select
+                        value={selectedTimeSlot}
+                        onValueChange={setSelectedTimeSlot}
+                      >
+                        <SelectTrigger className="w-full !h-12">
+                          <SelectValue placeholder={t('Vaqtni tanlang')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {deliveryTimeSlots.map((slot) => (
+                            <SelectItem key={slot.id} value={slot.label}>
+                              <div className="flex items-center gap-2">
+                                <Clock className="w-4 h-4 text-gray-500" />
+                                {slot.label}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {/* Tanlangan vaqt ko'rinishi */}
+                  {deliveryDate && selectedTimeSlot && (
+                    <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                      <div className="flex items-start gap-3">
+                        <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
+                          <CalIcon className="w-5 h-5 text-blue-600" />
+                        </div>
                         <div>
-                          <span className="font-semibold">
-                            {t('Plastik karta')}
-                          </span>
-                          <p className="text-sm text-gray-500">
-                            {t("Online to'lov")}
+                          <p className="font-semibold text-gray-800">
+                            {t('Tanlangan yetkazib berish vaqti')}
+                          </p>
+                          <p className="text-sm text-gray-600 mt-1">
+                            {format(deliveryDate, 'dd MMMM yyyy', {
+                              locale: uz,
+                            })}{' '}
+                            | {selectedTimeSlot}
                           </p>
                         </div>
                       </div>
-                    </Label>
                     </div>
+                  )}
                 </div>
               </div>
 
@@ -593,18 +543,6 @@ const OrderPage = () => {
                       <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">
@@ -613,7 +551,7 @@ const OrderPage = () => {
                         {t('Jami')}:
                       </span>
                       <span className="text-2xl font-bold text-blue-600">
-                        {total && formatPrice(total, true)}
+                        {subtotal && formatPrice(subtotal, true)}
                       </span>
                     </div>
                   </div>
@@ -621,6 +559,7 @@ const OrderPage = () => {
                   <button
                     type="submit"
                     disabled={isPending}
+                    onClick={form.handleSubmit(onSubmit)}
                     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 ? (
@@ -634,9 +573,9 @@ const OrderPage = () => {
                 </div>
               </div>
             </div>
-          </form>
+          </div>
         </Form>
-      </>
+      </div>
     </div>
   );
 };

src/features/product/ui/Product.tsx

@@ -27,7 +27,7 @@ import { toast } from 'sonner';
 
 const ProductDetail = () => {
   const t = useTranslations();
-  const [quantity, setQuantity] = useState(1);
+  const [quantity, setQuantity] = useState<number>(1);
   const { product } = useParams();
   const queryClient = useQueryClient();
   const [selectedImage, setSelectedImage] = useState<number>(0);
@@ -60,31 +60,50 @@ const ProductDetail = () => {
   });
 
   useEffect(() => {
-    if (!cart_id) return;
-    if (quantity <= 1) return;
+    if (!data || !cartItems) return;
 
-    const cartItemId = cartItems?.data?.cart_item.find(
-      (item) => item.product_id === data?.id,
-    )?.id;
+    const item = cartItems?.data.cart_item.find(
+      (item) => Number(item.product_id) === data?.id,
+    );
 
-    if (!cartItemId) return;
+    if (item) {
+      setQuantity(item.quantity);
+    } else {
+      setQuantity(1);
+    }
+  }, [data, cartItems]);
+
+  useEffect(() => {
+    if (!cart_id || !data || !cartItems) return;
+    if (quantity <= 0) return;
+
+    const cartItem = cartItems?.data?.cart_item.find(
+      (item) => Number(item.product_id) === data?.id,
+    );
+
+    if (!cartItem) return;
+    if (cartItem.quantity === quantity) return;
 
     if (debounceRef.current) clearTimeout(debounceRef.current);
 
     debounceRef.current = setTimeout(() => {
-      updateCartItem({ body: { quantity }, cart_item_id: cartItemId });
+      updateCartItem({ body: { quantity }, cart_item_id: cartItem.id });
     }, 500);
 
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
-  }, [quantity, cart_id]);
+  }, [quantity, cart_id, data, cartItems]);
 
   const { mutate } = useMutation({
     mutationFn: (body: { product: string; quantity: number; cart: string }) =>
       cart_api.cart_item(body),
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['cart_items'] });
+      toast.success(t("Mahsulot savatga qo'shildi"), {
+        richColors: true,
+        position: 'top-center',
+      });
     },
     onError: (err: AxiosError) => {
       const detail = (err.response?.data as { detail: string }).detail;
@@ -113,7 +132,6 @@ const ProductDetail = () => {
 
   const favouriteMutation = useMutation({
     mutationFn: (productId: string) => product_api.favourite(productId),
-
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ['product_list'] });
       queryClient.refetchQueries({ queryKey: ['product_detail', product] });
@@ -128,6 +146,27 @@ const ProductDetail = () => {
     }
   };
 
+  const handleAddToCart = () => {
+    if (!data || !cart_id) return;
+
+    const cartItem = cartItems?.data.cart_item.find(
+      (e) => Number(e.product_id) === data.id,
+    );
+
+    if (cartItem) {
+      updateCartItem({
+        body: { quantity: quantity },
+        cart_item_id: cartItem.id,
+      });
+    } else {
+      mutate({
+        product: String(data.id),
+        cart: cart_id,
+        quantity: quantity,
+      });
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="custom-container pb-5">
@@ -166,18 +205,6 @@ const ProductDetail = () => {
                     className="w-full h-[400px] object-contain"
                   />
                 )}
-                {/* {products.discount > 0 && (
-                  <div className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
-                    -{products.discount}%
-                  </div>
-                )} */}
-                {/* {!products.inStock && (
-                  <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-                    <span className="text-white text-xl font-bold">
-                      Mavjud emas
-                    </span>
-                  </div>
-                )} */}
               </div>
 
               <Carousel
@@ -245,52 +272,18 @@ const ProductDetail = () => {
                 {data?.name}
               </h1>
 
-              {/* Rating */}
-              {/* <div className="flex items-center gap-2 mb-4">
-                <div className="flex items-center">
-                  {[...Array(5)].map((_, i) => (
-                    <Star
-                      key={i}
-                      className={`w-5 h-5 ${
-                        i < Math.floor(products.rating)
-                          ? 'fill-yellow-400 text-yellow-400'
-                          : 'text-gray-300'
-                      }`}
-                    />
-                  ))}
-                </div>
-                <span className="text-gray-600">{products.rating}</span>
-              </div> */}
-
               {/* Price */}
               <div className="mb-6">
                 <div className="flex items-center gap-3 max-lg:flex-col max-lg:items-start">
                   <span className="text-4xl font-bold text-blue-600">
                     {data && formatPrice(data.price, true)}
                   </span>
-                  {/* {products.oldPrice && (
-                    <span className="text-xl text-gray-400 line-through">
-                      {products.oldPrice.toLocaleString()} {"so'm"}
-                    </span>
-                  )} */}
                 </div>
               </div>
 
               {/* Description */}
               <p className="text-gray-600 mb-6">{data?.description}</p>
 
-              {/* Brand and Category */}
-              {/* <div className="grid grid-cols-2 gap-4 mb-6 max-md:grid-cols-1">
-                <div>
-                  <span className="text-gray-500">Brand:</span>
-                  <p className="font-semibold">{products.brand}</p>
-                </div>
-                <div>
-                  <span className="text-gray-500">Kategoriya:</span>
-                  <p className="font-semibold">{products.category}</p>
-                </div>
-              </div> */}
-
               {/* Quantity Selector */}
               <div className="mb-6">
                 <label className="text-gray-700 font-medium mb-2 block">
@@ -309,12 +302,11 @@ const ProductDetail = () => {
                       value={quantity}
                       onChange={(e) => {
                         const v = e.target.value;
-
                         if (!/^\d*$/.test(v)) return;
-
                         const num = Number(v);
-
+                        if (num > 0) {
                           setQuantity(num);
+                        }
                       }}
                       inputMode="numeric"
                       className="w-14 h-12 border-none text-center text-sm !p-0 focus-visible:ring-0"
@@ -338,29 +330,8 @@ const ProductDetail = () => {
               {/* Action Buttons */}
               <div className="flex gap-4 mb-6">
                 <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    const cart = cartItems?.data.cart_item.find(
-                      (e) => e.product_id === data?.id,
-                    );
-                    console.log(cart);
-
-                    if (cart && data) {
-                      updateCartItem({
-                        body: {
-                          quantity: quantity,
-                        },
-                        cart_item_id: cart.id,
-                      });
-                    } else if (!cart && data) {
-                      mutate({
-                        product: data.id,
-                        cart: cart_id!,
-                        quantity: quantity,
-                      });
-                    }
-                  }}
-                  className={`flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition ${'bg-green-600 hover:bg-green-700'}`}
+                  onClick={handleAddToCart}
+                  className="flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition bg-green-600 hover:bg-green-700"
                 >
                   <ShoppingCart className="w-5 h-5" />
                   {t('Savatga')}
@@ -400,12 +371,6 @@ const ProductDetail = () => {
                   <Shield className="w-8 h-8 text-blue-600 mb-2" />
                   <span className="text-sm text-gray-600">{t('Kafolat')}</span>
                 </div>
-                {/* <div className="flex flex-col items-center text-center">
-                  <RotateCcw className="w-8 h-8 text-blue-600 mb-2" />
-                  <span className="text-sm text-gray-600">
-                    14 kun qaytarish
-                  </span>
-                </div> */}
               </div>
             </div>
           </div>

src/features/profile/ui/RefreshOrder.tsx

@@ -2,10 +2,11 @@
 
 import { cart_api, OrderCreateBody } from '@/features/cart/lib/api';
 import { orderForm } from '@/features/cart/lib/form';
-import formatPhone from '@/shared/lib/formatPhone';
+import formatDate from '@/shared/lib/formatDate';
 import formatPrice from '@/shared/lib/formatPrice';
-import onlyNumber from '@/shared/lib/onlyNumber';
+import { cn } from '@/shared/lib/utils';
 import { Button } from '@/shared/ui/button';
+import { Calendar } from '@/shared/ui/calendar';
 import {
   Form,
   FormControl,
@@ -15,6 +16,14 @@ import {
 } from '@/shared/ui/form';
 import { Input } from '@/shared/ui/input';
 import { Label } from '@/shared/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/ui/select';
 import { Textarea } from '@/shared/ui/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -26,16 +35,13 @@ import {
 } from '@pbe/react-yandex-maps';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
+  Calendar as CalIcon,
   CheckCircle2,
   Clock,
-  CreditCard,
   Loader2,
   LocateFixed,
   MapPin,
-  Package,
-  Truck,
   User,
-  Wallet,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
@@ -45,6 +51,15 @@ import { toast } from 'sonner';
 import z from 'zod';
 import useOrderStore from '../lib/order';
 
+const deliveryTimeSlots = [
+  { id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' },
+  { id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' },
+  { id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' },
+  { id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' },
+  { id: 5, label: '17:00 - 19:00', start: '17:00', end: '19:00' },
+  { id: 6, label: '19:00 - 21:00', start: '19:00', end: '21:00' },
+];
+
 interface CoordsData {
   lat: number;
   lon: number;
@@ -52,6 +67,8 @@ interface CoordsData {
 }
 
 const RefreshOrder = () => {
+  const [deliveryDate, setDeliveryDate] = useState<Date>();
+  const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');
   const { order: initialValues } = useOrderStore();
   const t = useTranslations();
   const queryClient = useQueryClient();
@@ -73,28 +90,13 @@ const RefreshOrder = () => {
   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(
@@ -103,16 +105,7 @@ const RefreshOrder = () => {
       )
     : 0;
 
-  const deliveryFee =
-    deliveryMethod === 'DELIVERY_COURIES'
-      ? subtotal > 50000
-        ? 0
-        : 15000
-      : deliveryMethod === 'YandexGo'
-        ? 25000
-        : 0;
-
-  const total = subtotal + deliveryFee;
+  const total = subtotal;
 
   const { mutate, isPending } = useMutation({
     mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
@@ -220,16 +213,12 @@ const RefreshOrder = () => {
     }
 
     const items = initialValues.items.map((item) => ({
-      product_id: item.product.id,
+      product_id: Number(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),
@@ -283,50 +272,7 @@ const RefreshOrder = () => {
                       {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"
@@ -348,7 +294,6 @@ const RefreshOrder = () => {
                   />
                 </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" />
@@ -426,122 +371,101 @@ const RefreshOrder = () => {
                   </div>
                 </div>
 
+                {/* Yetkazib berish vaqti - Yangilangan versiya */}
                 <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" />
+                    <Clock className="w-5 h-5 text-blue-600" />
                     <h2 className="text-xl font-semibold">
-                      {t('Yetkazib berish usuli')}
+                      {t('Yetkazib berish vaqti')}
                     </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>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {/* Sana tanlash */}
+                    <div className="space-y-2">
+                      <Label className="block text-sm font-medium text-gray-700">
+                        {t('Yetkazib berish sanasi')}
                       </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"
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            className={cn(
+                              'w-full h-12 justify-start text-left font-normal',
+                              !deliveryDate && 'text-muted-foreground',
+                            )}
+                          >
+                            <CalIcon className="mr-2 h-4 w-4" />
+                            {deliveryDate ? (
+                              formatDate.format(deliveryDate, 'DD-MM-YYYY')
+                            ) : (
+                              <span>{t('Sanani tanlang')}</span>
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={deliveryDate}
+                            captionLayout="dropdown"
+                            toYear={new Date().getFullYear() + 10}
+                            onSelect={setDeliveryDate}
+                            disabled={(date) =>
+                              date < new Date() ||
+                              date < new Date(new Date().setHours(0, 0, 0, 0))
+                            }
+                            initialFocus
                           />
-                      <div className="ml-4 flex items-center gap-3">
-                        <CreditCard className="w-6 h-6 text-blue-600" />
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    {/* Vaqt tanlash */}
+                    <div className="space-y-2">
+                      <Label className="block text-sm font-medium text-gray-700">
+                        {t("Vaqt oralig'i")}
+                      </Label>
+                      <Select
+                        value={selectedTimeSlot}
+                        onValueChange={setSelectedTimeSlot}
+                      >
+                        <SelectTrigger className="w-full !h-12">
+                          <SelectValue placeholder={t('Vaqtni tanlang')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {deliveryTimeSlots.map((slot) => (
+                            <SelectItem key={slot.id} value={slot.label}>
+                              <div className="flex items-center gap-2">
+                                <Clock className="w-4 h-4 text-gray-500" />
+                                {slot.label}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {/* Tanlangan vaqt ko'rinishi */}
+                  {deliveryDate && selectedTimeSlot && (
+                    <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                      <div className="flex items-start gap-3">
+                        <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
+                          <CalIcon className="w-5 h-5 text-blue-600" />
+                        </div>
                         <div>
-                          <span className="font-semibold">
-                            {t('Plastik karta')}
-                          </span>
-                          <p className="text-sm text-gray-500">
-                            {t("Online to'lov")}
+                          <p className="font-semibold text-gray-800">
+                            {t('Tanlangan yetkazib berish vaqti')}
+                          </p>
+                          <p className="text-sm text-gray-600 mt-1">
+                            {formatDate.format(deliveryDate, 'DD-MM-YYYY')} |{' '}
+                            {selectedTimeSlot}
                           </p>
                         </div>
                       </div>
-                    </Label>
                     </div>
+                  )}
                 </div>
               </div>
 
@@ -586,18 +510,6 @@ const RefreshOrder = () => {
                       <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">

src/shared/config/api/product/type.ts

@@ -9,7 +9,7 @@ export interface ProductList {
 }
 
 export interface ProductListResult {
-  id: string;
+  id: number;
   name: string;
   image: string;
   price: number;
@@ -27,7 +27,7 @@ export interface ProductDetail {
   brand: string;
   description: string;
   expires_date: null | string;
-  id: string;
+  id: number;
   image: string;
   images: {
     id: string;
@@ -52,7 +52,7 @@ export interface SearchData {
 }
 
 export interface SearchDataPro {
-  id: string;
+  id: number;
   name: string;
   image: string;
   price: number;
@@ -77,7 +77,7 @@ export interface FavouriteProduct {
 }
 
 export interface FavouriteProductRes {
-  id: string;
+  id: number;
   name: string;
   image: string;
   price: number;

src/shared/ui/calendar.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import * as React from 'react';
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react';
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from 'react-day-picker';
+
+import { cn } from '@/shared/lib/utils';
+import { Button, buttonVariants } from '@/shared/ui/button';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'absolute bg-popover inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          props.showWeekNumber
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-md',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            );
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

src/shared/ui/select.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+import { cn } from '@/shared/lib/utils';
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'item-aligned',
+  align = 'center',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

src/widgets/categories/ui/animation.tsx

@@ -2,6 +2,7 @@
 
 import { ProductListResult } from '@/shared/config/api/product/type';
 import { BASE_URL } from '@/shared/config/api/URLs';
+import Image from 'next/image';
 import React, { useEffect, useRef } from 'react';
 
 interface AnimationProps {
@@ -107,7 +108,6 @@ const Animation: React.FC<AnimationProps> = ({
     const cartIcon = cartIconMobile;
 
     if (!cartIcon) {
-      console.warn('Cart icon topilmadi (mobil yoki desktop)');
       setAnimated(false);
       return;
     }
@@ -184,12 +184,14 @@ const Animation: React.FC<AnimationProps> = ({
         }}
       >
         <div className="relative w-full h-full bg-white">
-          <img
+          <Image
             src={
               product?.image?.includes(BASE_URL)
                 ? product.image
                 : BASE_URL + product.image
             }
+            width={500}
+            height={500}
             alt={product.name}
             className="w-full h-full object-contain p-3"
           />

src/widgets/categories/ui/product-card.tsx

@@ -89,7 +89,7 @@ export function ProductCard({
 
   useEffect(() => {
     const item = cartItems?.data?.cart_item?.find(
-      (item) => item.product_id === product.id,
+      (item) => Number(item.product_id) === product.id,
     );
 
     setQuantity(item ? item.quantity : 0);
@@ -120,7 +120,7 @@ export function ProductCard({
 
     if (newQty > 1) {
       const cartItemId = cartItems?.data?.cart_item.find(
-        (item) => item.product_id === product.id,
+        (item) => Number(item.product_id) === product.id,
       )?.id;
       if (cartItemId) {
         updateCartItem({
@@ -140,7 +140,7 @@ export function ProductCard({
     const newQty = currentQty - 1;
 
     const cartItemId = cartItems.data.cart_item.find(
-      (item) => item.product_id === product.id,
+      (item) => Number(item.product_id) === product.id,
     )?.id;
 
     if (!cartItemId) return;
@@ -189,7 +189,7 @@ export function ProductCard({
             <Button
               onClick={(e) => {
                 e.stopPropagation();
-                favouriteMutation.mutate(product.id);
+                favouriteMutation.mutate(String(product.id));
               }}
               aria-label="liked"
               className="absolute top-2 right-2 z-10 bg-white hover:bg-gray-200 cursor-pointer rounded-full p-1.5 sm:p-2 shadow hover:scale-110"
@@ -247,7 +247,7 @@ export function ProductCard({
                 onClick={(e) => {
                   e.stopPropagation();
                   mutate({
-                    product: product.id,
+                    product: String(product.id),
                     quantity: 1,
                     cart: cart_id!,
                   });
@@ -292,7 +292,7 @@ export function ProductCard({
                     if (!cartItems) return;
 
                     const cartItemId = cartItems.data.cart_item.find(
-                      (item) => item.product_id === product.id,
+                      (item) => Number(item.product_id) === product.id,
                     )?.id;
 
                     if (!cartItemId) return;