initial commit

src/pages/Orders/index.jsx

@@ -0,0 +1,153 @@
+// Orders.jsx
+import React from "react";
+import styles from "./Orders.module.scss";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useGetOrdersQuery } from "../../app/api/orderApi"; // Update with your correct path
+import EmptyOrderState from "./emptyOrder"; // Import the EmptyOrderState component
+import Loader from "../../components/Loader/index";
+import { Result, Button } from "antd";
+import { useNavigate } from "react-router-dom";
+const Orders = () => {
+  const { t } = useTranslation();
+  const { data: orders, isLoading, error } = useGetOrdersQuery();
+  const navigate = useNavigate();
+  // Function to format date - implement this or use a library like date-fns
+  const formatOrderDate = (dateString) => {
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleString("tk-TM", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    } catch (e) {
+      return dateString;
+    }
+  };
+
+  if (isLoading) return <Loader />;
+
+  // Handle error state
+  if (error)
+    return (
+      <Result
+        status="500"
+        title="500"
+        subTitle="Näbelli ýalňyşlyk ýüze çykdy."
+        extra={
+          <Button type="primary" onClick={() => navigate("/")}>
+            Baş sahypa gidiň
+          </Button>
+        }
+      />
+    );
+
+  // Handle empty orders - render EmptyOrderState component
+  if (!orders || orders.length === 0) {
+    return <EmptyOrderState />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>Sargytlarym</h2>
+
+      {/* Desktop table view */}
+      <div className={styles.tableContainer}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th>{t("order.orderNumber")}</th>
+              <th>{t("order.orderDate")}</th>
+              <th>{t("order.sum")}</th>
+              <th>{t("checkout.paymentMethod")}</th>
+              <th>{t("order.orderStatus")}</th>
+              <th>{t("order.action")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {orders.map((order) => {
+              // Calculate total order amount
+              const totalAmount = order.orderItems.reduce(
+                (sum, item) =>
+                  sum + parseFloat(item.unit_price_amount) * item.quantity,
+                0
+              );
+
+              return (
+                <tr key={order.id}>
+                  <td>{order.id}</td>
+                  <td>{formatOrderDate(order.delivery_at)}</td>
+                  <td style={{ color: "#888888", fontWeight: "700" }}>
+                    {totalAmount.toFixed(2)} m.
+                  </td>
+                  <td>{order.payment_type}</td>
+                  <td>{order.status}</td>
+                  <td>
+                    <Link to={`/orderdetail/${order.id}`}>
+                      <button className={styles.actionButton}>
+                        {t("order.information")}
+                      </button>
+                    </Link>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile card view */}
+      <div className={styles.Mobilecontainer}>
+        {orders.map((order) => {
+          const totalAmount = order.orderItems.reduce(
+            (sum, item) =>
+              sum + parseFloat(item.unit_price_amount) * item.quantity,
+            0
+          );
+
+          return (
+            <Link to={`/orderdetail/${order.id}`} key={order.id}>
+              <div className={styles.orderCard}>
+                <div className={styles.orderRow}>
+                  <span className={styles.label}>
+                    {t("order.orderNumber")}:
+                  </span>
+                  <span className={styles.value}>{order.id}</span>
+                </div>
+                <div className={styles.orderRow}>
+                  <span className={styles.label}>{t("order.orderDate")}:</span>
+                  <span className={styles.value}>
+                    {formatOrderDate(order.delivery_at)}
+                  </span>
+                </div>
+                <div className={styles.orderRow}>
+                  <span className={styles.label}>{t("order.sum")}:</span>
+                  <span className={styles.total}>
+                    {totalAmount.toFixed(2)} m.
+                  </span>
+                </div>
+                <div className={styles.orderRow}>
+                  <span className={styles.label}>
+                    {t("checkout.paymentMethod")}:
+                  </span>
+                  <span className={styles.value}>{order.payment_type}</span>
+                </div>
+                <div className={styles.orderRow}>
+                  <span className={styles.label}>
+                    {t("order.orderStatus")}:
+                  </span>
+                  <span className={styles.value}>{order.status}</span>
+                </div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Orders;