adding internationalization

package.json

@@ -13,6 +13,9 @@
   "dependencies": {
     "@auth-kit/react-router": "^3.1.3",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@reduxjs/toolkit": "^2.2.5",
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.3",

src/Components/Homepage/BestDeals.tsx

@@ -5,7 +5,7 @@ const BestDeals: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-  const productId = 'de400228-de1e-4bad-b464-d81e27b83777'; 
+  const productId = "13baa530-0f0c-4ca0-bcea-00f6a764619c"; 
 
   useEffect(() => {
     const fetchImage = async () => {

src/Components/OrderTracking/contactInfo.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { useGetOrderQuery } from "../../Redux/OrderSlice";
+
+interface ContactInfoProps {
+  address: String;
+  contactName: string;
+  email: string;
+  phoneNumber: string;
+  orderId: string;
+}
+export const ContactInfo: React.FC<ContactInfoProps> = ({
+  address,
+  contactName,
+  email,
+  phoneNumber,
+  orderId,
+}) => {
+  const { data, error, isLoading } = useGetOrderQuery({ orderId });
+
+  if (error) {
+    console.error("Error fetching order:", error);
+    return <p>Error fetching order details</p>;
+  }
+
+  if (isLoading) return <p>Loading...</p>;
+  if (!data) return <p>No order details available</p>;
+
+  const deliveryAddress = data.deliveryAddress;
+
+  return (
+    <>
+      <div className="flex flex-col gap-12 lg:flex-row justify-between border-b pb-8  font-outfit pl-10 lg:pl-0 lg:pr-20">
+        <div className="delivery-address ">
+          <h3 className="font-bold pb-2 font-poppins">Delivery Address</h3>
+          <p className="text-gray-300">
+            {deliveryAddress.city}, {deliveryAddress.street}
+          </p>
+        </div>
+
+        <div className="contact">
+          <h3 className="font-bold pb-2 font-poppins">Contact Details</h3>
+          <p className="text-gray-300">Name: {contactName}</p>
+          <p className="text-gray-300">Tel: {phoneNumber}</p>
+          <p className="text-gray-300">Email: {email}</p>
+        </div>
+      </div>
+    </>
+  );
+};

src/Components/OrderTracking/orderDetails.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import OrderStatus from "./orderStatus";
+import { useGetOrderQuery } from "../../Redux/OrderSlice";
+
+interface OrderDetailsProps {
+  orderId: string;
+}
+
+const OrderDetails: React.FC<OrderDetailsProps> = ({ orderId }) => {
+  const { data: order, error, isLoading } = useGetOrderQuery({ orderId });
+
+  if (error) {
+    console.error("Error fetching order:", error);
+    return <p>Error fetching order details</p>;
+  }
+
+  if (isLoading) return <p>Loading...</p>;
+
+  if (!order) return <p>No order details available</p>;
+
+  const { status, createdAt, expectedDeliveryDate } = order;
+
+  return (
+    <>
+      <div className="border-b pb-8 ">
+        <div className="font-poppins font-bold pb-8">
+          <p>Order #{orderId}</p>
+        </div>
+
+        <div className="flex flex-col gap-8 justify-between pb-8  lg:flex-row font-outfit">
+          <div className="placed-date">
+            <p className="text-gray-300">Placed On</p>
+            <p>
+              {new Date(createdAt).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </p>
+          </div>
+          <div className="expected-delivery pr-10">
+            <p className="text-gray-300">Expected Delivery Date</p>
+            <p>
+              {expectedDeliveryDate
+                ? new Date(expectedDeliveryDate).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+
+        <div className="order-status font-outfit">
+          <OrderStatus orderId={orderId} currentStatus={status} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default OrderDetails;

src/Components/OrderTracking/orderProductDetails.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { useGetOrderQuery } from "../../Redux/OrderSlice";
+
+interface Product {
+  productName: string;
+  quantity: number;
+  price: number;
+  total: number;
+}
+
+interface OrderDetailsProps {
+  products: Product[];
+  orderId: string;
+}
+
+export const OrderProductDetails: React.FC<OrderDetailsProps> = ({
+  products,
+  orderId,
+}) => {
+  const { data: product, error, isLoading } = useGetOrderQuery({ orderId });
+
+  if (error) {
+    console.error("Error fetching order: ", error);
+    return <p>Error fetching product details</p>;
+  }
+
+  if (isLoading) return <p>Loading...</p>;
+
+  if (!product) return <p>No product found </p>;
+
+  const { productName, quantity, price, total } = product;
+  return (
+    <>
+      <div className="container mx-auto font-outfit">
+        <h3 className="font-bold mb-4 text-lg font-poppins">Order Details</h3>
+        <div>
+          <table className="min-w-full bg-white">
+            <thead>
+              <tr className=" text-left">
+                <th className="text-primary pr-8">Product</th>
+                <th className="text-primary">Quantity</th>
+                <th className="text-primary">Price</th>
+                <th className="text-primary">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              {products.map((product, index) => (
+                <tr key={index} className="py-4">
+                  <td>{product.productName}</td>
+                  <td>{product.quantity}</td>
+                  <td>{product.price}</td>
+                  <td>{product.total}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+};

src/Components/OrderTracking/orderStatus.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { useGetOrderQuery } from "../../Redux/OrderSlice";
+
+interface OrderStatusProps {
+  orderId: string;
+  currentStatus: string;
+}
+
+const OrderStatus: React.FC<OrderStatusProps> = ({
+  orderId,
+  currentStatus,
+}) => {
+  const statuses = ["pending", "processing", "shipped", "delivered"];
+
+  const { data, error, isLoading } = useGetOrderQuery({ orderId });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error loading order status</div>;
+
+  const currentStatusIndex = statuses.indexOf(currentStatus);
+  const getStatusClass = (status: string) => {
+    const statusIndex = statuses.indexOf(status);
+    if (statusIndex <= currentStatusIndex) {
+      return "bg-primary text-white";
+    } else {
+      return "bg-gray-200 text-black";
+    }
+  };
+
+  const getLineClass = (index: number) => {
+    return currentStatusIndex >= index + 1 ? "bg-primary" : "bg-gray-200";
+  };
+
+  return (
+    <div className="flex items-center justify-center mt-8 gap-14">
+      {statuses.map((status, index) => (
+        <div key={status} className="flex items-center">
+          <div className="flex flex-col items-center relative">
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center ${getStatusClass(
+                status
+              )} z-10`}
+            >
+              <FontAwesomeIcon icon={faCheck} className="text-white" />
+            </div>
+            <span className="mt-2 text-sm">{status}</span>
+            {index < statuses.length - 1 && (
+              <div
+                className={`absolute top-5 transform -translate-y-1/2 left-10 w-24 h-1 ${getLineClass(
+                  index
+                )}`}
+              ></div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OrderStatus;

src/Components/dashboard/InteractionCard.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface CardProps {
+  data: any;
+}
+const InteractionCard: React.FC<CardProps> = ({ data }) => {
+  return (
+    <div className="flex flex-row w-full justify-between bg-white rounded-[12px] p-4">
+      <div className="flex flex-col gap-[10px]">
+        <span className="font-outfit font-[600] text-[16px]">{data.name}</span>
+        <h1 className="font-outfit font-[600] text-black text-[20px]">
+          {data.numbers}
+        </h1>
+      </div>
+      <div>
+        <div className="flex p-2 rounded-[6px] bg-gray-100">{data.icons}</div>
+      </div>
+    </div>
+  );
+};
+
+export default InteractionCard;

src/Components/dashboard/SellerTable.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+interface UserData {
+  id: number;
+  name: string;
+  email: string;
+}
+
+interface UserTableProps {
+  users: UserData[];
+  onRemove: (id: number) => void;
+}
+
+const UserTable: React.FC<UserTableProps> = ({ users, onRemove }) => {
+  return (
+    <div className="w-full bg-white rounded-lg shadow-md overflow-hidden">
+      <table className="min-w-full">
+        <thead>
+          <tr className="bg-white-200 text-gray-200">
+            <th className="px-4 py-2 text-left">No</th>
+            <th className="px-4 py-2 text-left">User Name</th>
+            <th className="px-4 py-2 text-left">Email</th>
+            <th className="px-4 py-2 text-left">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user, index) => (
+            <tr key={user.id} className="">
+              <td className="px-4 py-2 text-left">
+                {String(index + 1).padStart(2, "0")}
+              </td>
+              <td className="px-4 py-2">{user.name}</td>
+              <td className="px-4 py-2">{user.email}</td>
+              <td
+                className="px-4 py-2 text-orange-500 cursor-pointer"
+                onClick={() => onRemove(user.id)}
+              >
+                Remove
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default UserTable;