From cfa84d04abb9ae14b964eadcd0fa99ede4ced830 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Mon, 27 Apr 2026 12:29:17 +0500
Subject: [PATCH] new things

---
 app/[lang]/[carType]/[carDeatil]/page.tsx    | 43 +++++++-----
 app/[lang]/layout.tsx                        |  5 +-
 components/lib_components/carRentalModal.tsx | 72 +++++++++++++++-----
 components/pageParts/contact.tsx             |  6 +-
 public/locales/ru/common.json                | 17 ++++-
 public/locales/uz/common.json                | 17 ++++-
 6 files changed, 117 insertions(+), 43 deletions(-)

diff --git a/app/[lang]/[carType]/[carDeatil]/page.tsx b/app/[lang]/[carType]/[carDeatil]/page.tsx
index 5e2e07b..b5082de 100644
--- a/app/[lang]/[carType]/[carDeatil]/page.tsx
+++ b/app/[lang]/[carType]/[carDeatil]/page.tsx
@@ -8,6 +8,7 @@ import { usePathname, useParams } from "next/navigation";
 import { logoImg } from "@/assets";
 import { useSubCategory } from "@/store/subCategory";
 import { minimumValues } from "@/data/minimimValues";
+import { useTranslation } from "react-i18next";
 import { LoadingSkeleton } from "@/components/loadingProduct";
 import { EmptyState } from "@/components/emptyState";
 import { ErrorState } from "@/components/errorState";
@@ -32,6 +33,7 @@ function checkCategory(categoryName: string | undefined, lang: string) {
 }
 
 export default function CarDetailPage() {
+  const { t } = useTranslation();
   const [modalOpen, setModalOpen] = useState<boolean>(false);
 
   const initialSubCategory = useSubCategory(
@@ -107,7 +109,8 @@ export default function CarDetailPage() {
     );
   }
 
-  const firstData = cars[0];
+  const firstData = cars[0]?.data[0];
+  console.log("First Data: ", firstData);
 
   if (!firstData) {
     return (
@@ -138,7 +141,7 @@ export default function CarDetailPage() {
             alt={firstData?.name ? firstData?.name : "image"}
             width={600}
             height={200}
-            className="rounded-lg object-cover border border-gray-200 w-full"
+            className="rounded-lg object-contain border border-gray-200 w-full"
           />
         </div>
 
@@ -147,7 +150,9 @@ export default function CarDetailPage() {
           <div className="text-lg font-semibold flex gap-2">
             {isMinimum ? <p>{text}</p> : <Text txt="hour-price" />} :
             <span className="font-medium flex gap-2 text-gray-500">
-              {firstData.price?.toLocaleString("uz-UZ")}
+              {firstData.price
+                ? Math.round(Number(firstData.price)).toLocaleString("ru-RU")
+                : ""}
               <Text txt="wallet" />
             </span>
           </div>
@@ -181,22 +186,24 @@ export default function CarDetailPage() {
       </div>
 
       {/* Texnik xususiyatlar */}
-      <div className="w-full border-t border-gray-300 pt-6">
-        <h2 className="text-xl font-semibold mb-4 text-secondary">
-          Texnik xususiyatlari
-        </h2>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-700">
-          {firstData?.features.map((item: any) => (
-            <div
-              key={item.id}
-              className="p-3 rounded-md bg-gray-50 border border-gray-200 hover:bg-gray-100 transition"
-            >
-              <p className="font-medium">{item?.name}:</p>
-              <p className="text-gray-600">{item?.value}</p>
-            </div>
-          ))}
+      {firstData?.features.length > 0 && (
+        <div className="w-full border-t border-gray-300 pt-6">
+          <h2 className="text-xl font-semibold mb-4 text-secondary">
+            {t("tech-features")}
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-700">
+            {firstData?.features?.map((item: any) => (
+              <div
+                key={item.id}
+                className="p-3 rounded-md bg-gray-50 border border-gray-200 hover:bg-gray-100 transition"
+              >
+                <p className="font-medium">{item?.name}:</p>
+                <p className="text-gray-600">{item?.value}</p>
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Ijara modal */}
       <CarRentalModal
diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx
index 879cad0..fc2eea7 100644
--- a/app/[lang]/layout.tsx
+++ b/app/[lang]/layout.tsx
@@ -1,4 +1,3 @@
-import { dir } from "i18next";
 import Header from "@/components/nav_foot/header";
 import Navbar from "@/components/nav_foot/navbar";
 import Footer from "@/components/nav_foot/footer";
@@ -17,7 +16,7 @@ export default async function LangLayout({
   const { lang } = await params; // ✅ await bilan destructuring
 
   return (
-    <html lang={lang} dir="rtl">
+    <html lang={lang} dir="rtl" suppressHydrationWarning>
       <body>
         <Suspense fallback={null}>
           <Header />
@@ -29,7 +28,7 @@ export default async function LangLayout({
         </section>
         <Footer />
         <UpScrollIcon />
-        <Time/>
+        <Time />
       </body>
     </html>
   );
diff --git a/components/lib_components/carRentalModal.tsx b/components/lib_components/carRentalModal.tsx
index 7899ab5..36b92c8 100644
--- a/components/lib_components/carRentalModal.tsx
+++ b/components/lib_components/carRentalModal.tsx
@@ -3,6 +3,7 @@
 import { innerCardTypes } from "@/types";
 import React, { useState, useEffect } from "react";
 import axios from "axios";
+import { useTranslation } from "react-i18next";
 
 interface CarRentalModalProps {
   car: innerCardTypes;
@@ -15,8 +16,10 @@ export default function CarRentalModal({
   isOpen,
   onClose,
 }: CarRentalModalProps) {
+  const { t } = useTranslation();
   const [userName, setUserName] = useState("");
-  const [phone, setPhone] = useState("");
+  const [phone, setPhone] = useState("+998 ");
+  const [phoneError, setPhoneError] = useState("");
   const [hours, setHours] = useState<number>(1);
   const [total, setTotal] = useState<number | undefined>(car?.price);
 
@@ -24,12 +27,40 @@ export default function CarRentalModal({
     if (car.price) setTotal(hours * car.price);
   }, [hours, car.price]);
 
+  const formatPhone = (value: string): string => {
+    let digits = value.replace(/\D/g, "");
+    if (digits.startsWith("998")) digits = digits.slice(3);
+    digits = digits.slice(0, 9);
+    let formatted = "+998";
+    if (digits.length > 0) formatted += " " + digits.slice(0, 2);
+    if (digits.length > 2) formatted += " " + digits.slice(2, 5);
+    if (digits.length > 5) formatted += " " + digits.slice(5, 7);
+    if (digits.length > 7) formatted += " " + digits.slice(7, 9);
+    return formatted;
+  };
+
+  const isPhoneValid = (value: string): boolean => {
+    const digits = value.replace(/\D/g, "");
+    return digits.length === 12;
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatPhone(e.target.value);
+    setPhone(formatted);
+    if (phoneError) setPhoneError("");
+  };
+
   // 🧩 Telegramga yuboruvchi funksiya
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!userName || !phone || !hours) {
-      alert("Iltimos, barcha maydonlarni to‘ldiring!");
+      alert(t("modal-fill-required"));
+      return;
+    }
+
+    if (!isPhoneValid(phone)) {
+      setPhoneError(t("modal-phone-error"));
       return;
     }
 
@@ -65,14 +96,14 @@ export default function CarRentalModal({
         parse_mode: "Markdown",
       });
 
-      alert("✅ Buyurtmangiz muvaffaqiyatli yuborildi!");
+      alert(t("modal-success"));
       onClose();
       setUserName("");
-      setPhone("");
+      setPhone("+998 ");
       setHours(1);
     } catch (error) {
       console.error("Yuborishda xatolik:", error);
-      alert("❌ Xatolik yuz berdi. Qayta urinib ko‘ring!");
+      alert(t("modal-error"));
     }
   };
 
@@ -95,9 +126,11 @@ export default function CarRentalModal({
             <h2 className="text-2xl font-bold text-gray-800">{car.name}</h2>
             <p className="text-gray-600 mt-2">{car.path}</p>
             <p className="text-gray-700 mt-2 font-semibold">
-              Soatlik narx:{" "}
+              {t("modal-hourly-price")}{" "}
               <span className="text-red-600">
-                {car.price?.toLocaleString()} UZS
+                {car.price
+                ? Math.round(Number(car.price)).toLocaleString("ru-RU")
+                : ""} UZS
               </span>
             </p>
           </div>
@@ -107,7 +140,7 @@ export default function CarRentalModal({
         <form onSubmit={handleSubmit} className="mt-6 space-y-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
-              Ismingiz
+              {t("modal-name-label")}
             </label>
             <input
               type="text"
@@ -115,27 +148,30 @@ export default function CarRentalModal({
               className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"
               value={userName}
               onChange={(e) => setUserName(e.target.value)}
-              placeholder="Ismingizni kiriting"
+              placeholder={t("modal-name-placeholder")}
             />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
-              Telefon
+              {t("modal-phone-label")}
             </label>
             <input
               type="tel"
               name="phone"
-              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"
+              className={`w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent ${phoneError ? "border-red-500" : "border-gray-300"}`}
               value={phone}
-              onChange={(e) => setPhone(e.target.value)}
-              placeholder="+998 90 123 45 67"
+              onChange={handlePhoneChange}
+              placeholder={t("modal-phone-placeholder")}
             />
+            {phoneError && (
+              <p className="text-red-500 text-xs mt-1">{phoneError}</p>
+            )}
           </div>
 
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
-              Qancha vaqt (soat)
+              {t("modal-hours-label")}
             </label>
             <input
               type="number"
@@ -148,9 +184,11 @@ export default function CarRentalModal({
           </div>
 
           <div className="text-lg font-semibold text-gray-800 mt-2">
-            Jami summa:{" "}
+            {t("modal-total")}{" "}
             <span className="text-green-600">
-              {total?.toLocaleString()} UZS
+              {total
+                ? Math.round(Number(total)).toLocaleString("ru-RU")
+                : ""} UZS
             </span>
           </div>
 
@@ -158,7 +196,7 @@ export default function CarRentalModal({
             type="submit"
             className="w-full bg-secondary text-white py-2 rounded-lg hover:bg-primary transition font-medium"
           >
-            Buyurtma berish
+            {t("book")}
           </button>
         </form>
       </div>
diff --git a/components/pageParts/contact.tsx b/components/pageParts/contact.tsx
index b96169d..2afb608 100644
--- a/components/pageParts/contact.tsx
+++ b/components/pageParts/contact.tsx
@@ -53,7 +53,7 @@ export default function Contact() {
     event.preventDefault();
 
     if (!phone || !isValidPhone(phone)) {
-      alert("Iltimos, telefon raqamingizni to'g'ri kiriting!");
+      alert(t("contact-phone-error"));
       return;
     }
 
@@ -77,11 +77,11 @@ export default function Contact() {
         text: message,
       });
 
-      alert("✅ Muvaffaqiyatli yuborildi!");
+      alert(t("contact-success"));
       setPhone("");
     } catch (error) {
       console.error("Yuborishda xatolik:", error);
-      alert("❌ Yuborishda xatolik yuz berdi!");
+      alert(t("contact-error"));
     }
   };
 
diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json
index 980427e..281e9cf 100644
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -188,5 +188,20 @@
   "retry": "Повторить",
   "downloadError": "Ошибка при загрузке данных",
   "noData": "Специальная техника не найдена",
-  "noDataDesc": "На данный момент товары отсутствуют. Пожалуйста, попробуйте позже."
+  "noDataDesc": "На данный момент товары отсутствуют. Пожалуйста, попробуйте позже.",
+  "tech-features": "Технические характеристики",
+  "modal-fill-required": "Пожалуйста, заполните все поля!",
+  "modal-phone-error": "Введите полный номер телефона: +998 XX XXX XX XX",
+  "modal-success": "Ваш заказ успешно отправлен!",
+  "modal-error": "Произошла ошибка. Попробуйте ещё раз!",
+  "modal-hourly-price": "Почасовая цена:",
+  "modal-name-label": "Ваше имя",
+  "modal-name-placeholder": "Введите ваше имя",
+  "modal-phone-label": "Телефон",
+  "modal-phone-placeholder": "+998 90 123 45 67",
+  "modal-hours-label": "Количество часов",
+  "modal-total": "Итоговая сумма:",
+  "contact-phone-error": "Пожалуйста, введите правильный номер телефона!",
+  "contact-success": "Успешно отправлено!",
+  "contact-error": "Произошла ошибка при отправке!"
 }
diff --git a/public/locales/uz/common.json b/public/locales/uz/common.json
index 408485a..2065395 100644
--- a/public/locales/uz/common.json
+++ b/public/locales/uz/common.json
@@ -188,5 +188,20 @@
   "retry": "Qayta urinish",
   "downloadError": "Ma'lumotlarni yuklashda xatolik",
   "noData": "Mahsus texnikalar topilmadi",
-  "noDataDesc": "Hozircha mahsulotlar mavjud emas. Iltimos, keyinroq qayta urinib ko'ring."
+  "noDataDesc": "Hozircha mahsulotlar mavjud emas. Iltimos, keyinroq qayta urinib ko'ring.",
+  "tech-features": "Texnik xususiyatlari",
+  "modal-fill-required": "Iltimos, barcha maydonlarni to'ldiring!",
+  "modal-phone-error": "Telefon raqamini to'liq kiriting: +998 XX XXX XX XX",
+  "modal-success": "Buyurtmangiz muvaffaqiyatli yuborildi!",
+  "modal-error": "Xatolik yuz berdi. Qayta urinib ko'ring!",
+  "modal-hourly-price": "Soatlik narx:",
+  "modal-name-label": "Ismingiz",
+  "modal-name-placeholder": "Ismingizni kiriting",
+  "modal-phone-label": "Telefon",
+  "modal-phone-placeholder": "+998 90 123 45 67",
+  "modal-hours-label": "Qancha vaqt (soat)",
+  "modal-total": "Jami summa:",
+  "contact-phone-error": "Iltimos, telefon raqamingizni to'g'ri kiriting!",
+  "contact-success": "Muvaffaqiyatli yuborildi!",
+  "contact-error": "Yuborishda xatolik yuz berdi!"
 }