fix(respinsive) : new UI changes respinsived

next.config.js

@@ -6,7 +6,7 @@ module.exports = {
     ignoreDuringBuilds: false,
   },
   typescript: {
-    ignoreBuildErrors: true,
+    ignoreBuildErrors: false,
   },
 
   images: {

src/app/[locale]/(account-pages)/bills/BillCard.tsx

@@ -12,10 +12,25 @@ import { BsCart3 } from "react-icons/bs";
 import { MdCurrencyExchange } from "react-icons/md";
 export interface Bill {
   service: string;
+  id: number;
+  title: string;
   created_at: string;
   expiration_date: string;
   amount: number;
   status: BillStatus;
+  passengers: { type: string; count: number }[];
+  accountNumber: string;
+  message?: string;
+  uploadedImage?: {
+    name: string;
+    size: string;
+    src: string;
+  };
+  detail_service: {
+    passenger_counts: { adults: string; children: string; infants: string };
+  };
+  transaction_receipt: string;
+  card_number: string | number;
 }
 
 interface BillCardProps {

src/app/[locale]/(account-pages)/bills/[slug]/page.tsx

@@ -16,32 +16,31 @@ export type BillStatus =
   | "rejected"
   | "pending";
 
-export interface Bill {
-  id: number;
-  title: string;
-  created_at: string;
-  expiration_date: string;
-  amount: number;
-  status: BillStatus;
-  passengers: { type: string; count: number }[];
-  accountNumber: string;
-  message?: string;
-  uploadedImage?: {
-    name: string;
-    size: string;
-    src: string;
-  };
-  detail_service: {
-    passenger_counts: { adults: string; children: string; infants: string };
-  };
-  transaction_receipt: string;
-  card_number: string | number;
-}
-
-interface BillDetailCardProps {
-  bill: Bill;
-}
-
+  export interface Bill {
+    id: number;
+    title: string;
+    created_at: string;
+    expiration_date: string;
+    amount: number;
+    status: BillStatus;
+    passengers: { type: string; count: number }[];
+    accountNumber: string;
+    message?: string;
+    uploadedImage?: {
+      name: string;
+      size: string;
+      src: string;
+    };
+    detail_service: {
+      passenger_counts: { adults: string; children: string; infants: string };
+    };
+    transaction_receipt: string;
+    card_number: string | number;
+  }
+  
+  interface BillDetailCardProps {
+    bill: Bill;
+  }
 const statusStyles: { [key in BillStatus]: JSX.Element } = {
   awaiting_payment: (
     <span className="px-2 py-1 text-sm rounded-full opacity-70 bg-yellow-100 text-yellow-700">

src/app/[locale]/(account-pages)/bills/page.tsx

@@ -1,85 +1,38 @@
-// BillsPage.tsx
 "use client";
 import React, { useEffect, useState } from "react";
 import BillCard from "./BillCard";
 import BillDetailCard from "./[slug]/page";
 import axiosInstance from "@/components/api/axios";
 import { useUserContext } from "@/components/contexts/userContext";
-import { headers } from "next/dist/client/components/headers";
 
-// types.ts
-export type BillStatus =
-  | "Awaiting Payment"
-  | "Approved"
-  | "Rejected"
-  | "Pending";
+// Define the BillStatus and Bill interfaces
+export type BillStatus = "awaiting_payment" | "approved" | "rejected" | "pending";
 
 export interface Bill {
+  service: string;
+  id: number;
   title: string;
-  issuedDate: string;
-  expirationDate: string;
+  created_at: string;
+  expiration_date: string;
   amount: number;
   status: BillStatus;
-  passengers: {};
+  passengers: { type: string; count: number }[];
   accountNumber: string;
   message?: string;
+  uploadedImage?: {
+    name: string;
+    size: string;
+    src: string;
+  };
+  detail_service: {
+    passenger_counts: { adults: string; children: string; infants: string };
+  };
+  transaction_receipt: string;
+  card_number: string | number;
 }
 
-// const bills: Bill[] = [
-//   {
-//     title: "Karbala Tour Bill",
-//     issuedDate: "12 Jan 2023",
-//     expirationDate: "10 Jan 2023",
-//     amount: 960,
-//     status: "Awaiting Payment",
-//     passengers: [
-//       { type: "Adult", count: 3 },
-//       { type: "Child", count: 2 },
-//       { type: "Infant", count: 1 },
-//     ],
-//     accountNumber: "123-456-7890-0123",
-//   },
-//   {
-//     title: "SIM Card Bill",
-//     issuedDate: "12 Jan 2023",
-//     expirationDate: "10 Jan 2023",
-//     amount: 960,
-//     status: "Approved",
-//     passengers: [
-//       { type: "Adult", count: 2 },
-//       { type: "Child", count: 1 },
-//     ],
-//     accountNumber: "987-654-3210-0123",
-//   },
-//   {
-//     title: "Shop Bill",
-//     issuedDate: "12 Jan 2023",
-//     expirationDate: "10 Jan 2023",
-//     amount: 960,
-//     status: "Rejected",
-//     passengers: [
-//       { type: "Adult", count: 1 },
-//     ],
-//     accountNumber: "456-789-0123-4567",
-//     message:
-//       "The uploaded image does not meet the required quality standards. Please use a higher-resolution photo.",
-//   },
-//   {
-//     title: "Tasrif Bill",
-//     issuedDate: "12 Jan 2023",
-//     expirationDate: "10 Jan 2023",
-//     amount: 960,
-//     status: "Pending",
-//     passengers: [
-//       { type: "Adult", count: 3 },
-//       { type: "Child", count: 2 },
-//     ],
-//     accountNumber: "321-654-9870-1234",
-//   },
-// ];
-
 const BillsPage: React.FC = () => {
-  const [bills, setBills] = useState([]);
+  const [bills, setBills] = useState<Bill[]>([]);
   const [selectedBill, setSelectedBill] = useState<Bill | null>(null);
   const { user } = useUserContext();
 
@@ -90,6 +43,7 @@ const BillsPage: React.FC = () => {
   const handleBackToList = () => {
     setSelectedBill(null);
   };
+
   useEffect(() => {
     axiosInstance("/api/factors/list/", {
       headers: {
@@ -97,13 +51,28 @@ const BillsPage: React.FC = () => {
       },
     })
       .then((response) => {
-        console.log(response);
-        setBills(response.data.results);
+        // Transform API response to match the Bill interface
+        const billsFromApi = response.data.results.map((bill: any) => ({
+          id: bill.id,
+          title: bill.title,
+          created_at: bill.created_at,
+          expiration_date: bill.expiration_date,
+          amount: bill.amount,
+          status: bill.status,
+          passengers: bill.passengers,
+          accountNumber: bill.accountNumber,
+          message: bill.message,
+          uploadedImage: bill.uploadedImage,
+          detail_service: bill.detail_service,
+          transaction_receipt: bill.transaction_receipt,
+          card_number: bill.card_number,
+        }));
+        setBills(billsFromApi);
       })
       .catch((error) => {
-        console.log(error.message);
+        console.error(error.message);
       });
-  }, []);
+  }, [user.token]);
 
   return (
     <div className="p-4 bg-gray-100 dark:bg-neutral-900 min-h-screen">

src/app/[locale]/(client-components)/(Header)/MainNav1.tsx

@@ -5,8 +5,6 @@ import SearchDropdown from "./SearchDropdown";
 import MenuBar from "@/shared/MenuBar";
 import SwitchDarkMode from "@/shared/SwitchDarkMode";
 import HeroSearchForm2MobileFactory from "../(HeroSearchForm2Mobile)/HeroSearchForm2MobileFactory";
-import { MdOutlineCardTravel } from "react-icons/md";
-import Link from "next/link";
 import LangDropdown from "./LangDropdown";
 import UserMenu from "@/components/UserMenu";
 import MyTripButton from "./MyTripButton";

src/app/[locale]/(server-components)/SectionHero.tsx

@@ -2,7 +2,7 @@
 
 import React, { FC } from "react";
 import imagePng from "@/images/hero-right.png";
-import vectorPng from "@/images/Vector.png";
+import vectorPng from "@/images/HeroVector.svg";
 import HeroSearchForm from "../(client-components)/(HeroSearchForm)/HeroSearchForm";
 import Image from "next/image";
 import ButtonPrimary from "@/shared/ButtonPrimary";
@@ -18,9 +18,11 @@ const SectionHero: FC<SectionHeroProps> = ({ className = "" }) => {
   return (
     <div className="">
       <Image
-        className="absolute top-10 left-[-100px]" // Move the image further left and scale it up
+        className="absolute hero-image top-10"
         src={vectorPng}
         alt="hero"
+        width={500}
+        height={500}
         priority
       />
 

src/app/[locale]/page.tsx

@@ -43,8 +43,8 @@ function PageHome() {
         <SectionCustomTour />
 
         {/* <SectionSliderNewCategories categories={DEMO_CATS} /> */}
-        <SectionDowloadApp/>
         <SectionHowItWork />
+        <SectionDowloadApp/>
 
         <div className="relative py-16">
           <BackgroundSection className="bg-orange-50 dark:bg-black/20" />

src/app/[locale]/tours/[slug]/page.tsx

@@ -14,6 +14,7 @@ import ButtonPrimary from "@/shared/ButtonPrimary";
 import StartRating from "@/components/StartRating";
 import { useTranslation } from "react-i18next"; // Import useTranslation
 import Head from "next/head";
+import Badge from "@/shared/Badge";
 
 // Define the type of `details`
 interface TourDetails {
@@ -152,6 +153,8 @@ const ListingStayDetailPage: FC = () => {
             </div>
           )}
           {/* <StartRating /> */}
+        {<Badge className="!text-base"  name={details?.status} color={details?.status} />}
+
         </div>
 
         {/* Booking Form */}

src/app/globals.css

@@ -11,3 +11,19 @@
     box-shadow: none;
     border: none; /* Ensures no border shows on focus */
   }
+
+  .hero-image{
+    left: -450px;
+  }
+
+  @media(max-width : 1400px) {
+    .hero-image{
+      left: -400px;
+    }
+  }
+  @media(max-width :450px){
+    .hero-image{
+      left: -300px;
+      top: 0px;
+    }
+  }

src/components/SectionCustomTour.tsx

@@ -1,18 +1,20 @@
 import BackgroundSection from "@/components/BackgroundSection";
 import React from "react";
-import BackgroundImage from "@/images/Frame 412.png";
+import BackgroundImage from "@/images/Frame-412.webp";
 import Image from "next/image";
 import ButtonPrimary from "@/shared/ButtonPrimary";
 
 const SectionDownloadApp = () => {
   return (
-    <BackgroundSection className="relative h-[455px] lg:py-32 xl:py-40 rounded-lg flex items-center sm:text-left sm:pl-12 lg:pl-56 xl:overflow-hidden bg-gray-900 text-center">
+    <BackgroundSection className="relative h-[455px] lg:py-32 xl:py-40 rounded-lg flex items-center justify-center sm:justify-normal sm:text-left sm:pl-12 lg:pl-56 xl:overflow-hidden bg-gray-900 text-center">
       {/* Background Image */}
       <Image
         className="absolute inset-0 object-cover object-right z-0" // Dim the background image for contrast
         alt="Custom Tour Background"
         src={BackgroundImage}
         fill
+        quality={100}
+        
       />
 
       {/* Content Wrapper */}
@@ -29,48 +31,10 @@ const SectionDownloadApp = () => {
         <p className="text-white text-lg mt-4 opacity-80">
           perfect travel experience tailored to your preferences.
         </p>
-        <ButtonPrimary className="mt-8 px-8 py-3 text-lg">Custom Tour</ButtonPrimary>
+        <ButtonPrimary href="custom-trip" className="mt-8 px-8 py-3 text-lg">Custom Tour</ButtonPrimary>
       </div>
     </BackgroundSection>
   );
 };
 
 export default SectionDownloadApp;
-// import BackgroundSection from "@/components/BackgroundSection";
-// import React from "react";
-// import BackgroundImage from "@/images/Frame 412.png";
-// import Image from "next/image";
-// import ButtonPrimary from "@/shared/ButtonPrimary";
-
-// const SectionDownloadApp = () => {
-//   return (
-//     <BackgroundSection className="relative h-[455px] pl-56 pb-0 pt-24 lg:py-32 xl:py-40 rounded-lg overflow-hidden flex items-center bg-gray-900 bg-opacity-50">
-//       {/* Background Image */}
-//       <Image
-//         className="absolute inset-0 object-cover z-0" // Dim the background image for contrast
-//         alt="Custom Tour Background"
-//         src={BackgroundImage}
-//         fill
-//       />
-
-//       {/* Content Wrapper */}
-//       <div className="relative z-10 ">
-//         <h1 className="text-white text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
-//           Create
-//         </h1>
-//         <h1 className="text-white text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
-//           Custom Tour
-//         </h1>
-//         <p className="text-white text-lg mt-4 opacity-80">
-//           Create your personalized tour and design the 
-//         </p>
-//         <p className="text-white text-lg mt-4 opacity-80">
-//           perfect travel experience tailored to your preferences.
-//         </p>
-//         <ButtonPrimary className="mt-8 px-8 py-3 text-lg">Custom Tour</ButtonPrimary>
-//       </div>
-//     </BackgroundSection>
-//   );
-// };
-
-// export default SectionDownloadApp;

src/shared/Logo.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import logoImg from "@/images/logos/لوگو3 1.png";
-import logoLightImg from "@/images/logos/لوگو3 1.svg";
-import LogoSvgLight from "./LogoSvgLight";
-import LogoSvg from "./LogoSvg";
+import logoImg from "@/images/logos/Frame 3.svg";
+import logoLightImg from "@/images/logos/Frame 3.svg";
+import logoDarkImg from "@/images/logos/Frame 3 Dark.svg";
 import Link from "next/link";
 import Image, { StaticImageData } from "next/image";
 
@@ -20,44 +19,39 @@ const Logo: React.FC<LogoProps> = ({
   return (
     <Link
       href="/"
-      className={`ttnc-logo flex text-primary-6000 focus:outline-none focus:ring-0  ${className}`}
+      className={`ttnc-logo flex text-primary-6000 focus:outline-none focus:ring-0 mr-10  ${className}`}
     >
       {/* <LogoSvgLight /> */}
       {/* THIS USE FOR MY CLIENT */}
       {/* PLEASE UN COMMENT BELLOW CODE AND USE IT */}
 
       {img ? (
-        <div className={`w-96  flex flex-row max-h-12 ${imgLight ? "dark:hidden" : ""}`}>
-
-        <Image
-          width={40}
-          height={40}
-          className={`block max-h-12 ${imgLight ? "dark:hidden" : ""}`}
-          src={img}
-          alt="Logo"
-        />
-          
-        <div>
-          <h3 className=" text-lg hidden font-bold ml-2 lg:flex items-center text-black">Aqila</h3>
-          <h3 className=" text-xs hidden ml-2 lg:flex items-center text-black">Traveling Agency</h3>
-        </div>
-
+        <div
+          className={`flex flex-row max-h-12 ${
+            imgLight ? "dark:hidden " : ""
+          }`}
+        >
+          <Image
+            width={130}
+            height={100}
+            src={img}
+            className="max-w-none"
+            alt="Logo"
+          />
         </div>
-
       ) : (
         "Logo Here"
       )}
       {imgLight && (
-        <div className="w-96  flex flex-row">
+        <div className="w-96 hidden dark:flex flex-row">
           {" "}
           <Image
-            width={40}
-            height={40}
-            className="hidden max-h-12  dark:block"
-            src={imgLight}
-            alt="Logo-Light"
+            width={130}
+            height={100}
+            src={logoDarkImg}
+            className="max-w-none"
+            alt="Logo"
           />
-          <h3 className="hidden font-bold ml-2 lg:dark:flex items-center text-bronze-secondary">AQILA</h3>
         </div>
       )}
     </Link>

src/shared/Navigation/NavigationItem.tsx

@@ -268,8 +268,8 @@ const NavigationItem: FC<NavigationItemWithRouterProps> = ({ menuItem }) => {
       <Link
         rel="noopener noreferrer"
         className={`inline-flex items-center text-sm xl:text-base ${
-          isActive ? "text-neutral-700 font-medium" : "text-neutral-500 font-normal"
-        } dark:text-neutral-300 py-2 px-4 xl:px-5 rounded-full hover:text-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200`}
+          isActive ? "text-neutral-700 font-medium dark:text-neutral-200"  : "text-neutral-500 font-normal dark:text-neutral-400"
+        }  py-2 px-4 xl:px-5 rounded-full hover:text-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200`}
         href={item.href || "/"}
       >
         {item.name}