admin/src/views/PrincipalDistributors/singlePrincipalDistributorAllDetails.js

import { Typography, Button } from "@mui/material";
import axios from "axios";
import React, { useCallback, useEffect, useState, useRef } from "react";
import { Link, useParams, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import { isAutheticated } from "src/auth";

const SinglePrincipalDistributorAllDetails = () => {
  const [user, setUser] = useState(null);
  const [userOrder, setUserOrder] = useState({
    totalOrders: 0,
    totalValue: 0,
    lastPurchaseOrderDate: null,
  });
  const [userAllAddress, setUserAllAddress] = useState([]);

  const token = isAutheticated();
  const { _id } = useParams();

  // Fetch Shipping address of the individual user
  const getUserAddress = useCallback(async () => {
    try {
      const response = await axios.get(
        `/api/shipping/address/user/address/${_id}`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );
      setUserAllAddress(response.data?.UserShippingAddress || []);
    } catch (error) {
      swal({
        title: "Warning",
        text: error.message,
        icon: "error",
        button: "Close",
        dangerMode: true,
      });
    }
  }, [_id, token]);

  // Fetch Order Count and Total Value
  const getOrdersCount = useCallback(async () => {
    try {
      const response = await axios.get(`/api/single-pd-ordercount/${_id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      setUserOrder(response.data);
    } catch (error) {
      swal({
        title: "Warning",
        text: error.message,
        icon: "error",
        button: "Close",
        dangerMode: true,
      });
    }
  }, [_id, token]);

  // Fetch User Details
  const getUserDetails = useCallback(async () => {
    try {
      const response = await axios.get(`/api/v1/admin/user/${_id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      setUser(response.data.user);
    } catch (error) {
      swal({
        title: "Warning",
        text: error.message,
        icon: "error",
        button: "Close",
        dangerMode: true,
      });
    }
  }, [_id, token]);

  useEffect(() => {
    getOrdersCount();
    getUserAddress();
    getUserDetails();
  }, [_id, getOrdersCount, getUserAddress, getUserDetails]);

  return (
    <div>
      <div className="row">
        <div className="col-12">
          <div className="page-title-box d-flex align-items-center justify-content-between">
            <div style={{ fontSize: "22px" }} className="fw-bold">
              Principal Distributor All Details
            </div>
            <div className="page-title-right">
              <Link to="/principal-distributor">
                <Button
                  variant="contained"
                  color="secondary"
                  style={{
                    fontWeight: "bold",
                    marginBottom: "1rem",
                    textTransform: "capitalize",
                  }}
                >
                  Back
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div className="card" style={{ padding: "1rem" }}>
        <h5 style={{ fontWeight: "bold" }}>
          &bull; Principal Distributor Profile
        </h5>
        <div style={{ marginLeft: "1rem", marginTop: "1rem" }}>
          <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
            Principal Distributor ID:
            <Typography
              component="span"
              style={{ fontWeight: "normal", marginLeft: "0.5rem" }}
            >
              {user?.uniqueId}
            </Typography>
          </Typography>
          {/* Repeating fields with similar styling and structure */}
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <div style={{ flex: 1, paddingRight: "1rem" }}>
              {[
                { label: "SBU", value: user?.SBU },
                { label: "Name", value: user?.name },
                { label: "Email", value: user?.email },
                { label: "Mobile Number", value: user?.phone },
              ].map((item, index) => (
                <Typography
                  key={index}
                  style={{ fontWeight: "bold", fontSize: "1.2rem" }}
                >
                  {item.label}:
                  <Typography
                    component="span"
                    style={{ fontWeight: "normal", marginLeft: "0.5rem" }}
                  >
                    {item.value}
                  </Typography>
                </Typography>
              ))}
            </div>
            <div style={{ flex: 1, paddingLeft: "1rem" }}>
              {[
                {
                  label: "Date Registered",
                  value: new Date(user?.createdAt).toLocaleString("en-IN", {
                    weekday: "short",
                    month: "short",
                    day: "numeric",
                    year: "numeric",
                    hour: "numeric",
                    minute: "numeric",
                    hour12: true,
                  }),
                },
                {
                  label: "Last Purchase",
                  value: userOrder?.lastPurchaseOrderDate
                    ? new Date(userOrder?.lastPurchaseOrderDate).toLocaleString(
                        "en-IN",
                        {
                          weekday: "short",
                          month: "short",
                          day: "numeric",
                          year: "numeric",
                          hour: "numeric",
                          minute: "numeric",
                          hour12: true,
                        }
                      )
                    : "No Purchase",
                },
                {
                  label: "Total Orders",
                  value: userOrder?.totalOrders ? userOrder?.totalOrders : 0,
                },
                {
                  label: "Total Spent",
                  value: `₹ ${
                    userOrder?.totalValue ? userOrder?.totalValue : 0
                  }`,
                },
              ].map((item, index) => (
                <Typography
                  key={index}
                  style={{ fontWeight: "bold", fontSize: "1.2rem" }}
                >
                  {item.label}:
                  <Typography
                    component="span"
                    style={{ fontWeight: "normal", marginLeft: "0.5rem" }}
                  >
                    {item.value}
                  </Typography>
                </Typography>
              ))}
            </div>
          </div>
        </div>
        <div style={{ marginTop: "2rem" }}>
          <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
            &bull; Addresses{" "}
          </h5>{" "}
          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
            &bull; Total Addresses : {userAllAddress?.length}{" "}
          </h5>
          {userAllAddress?.length > 0 && (
            <div className="table-responsive table-shoot mt-3">
              <table
                className="table table-centered table-nowrap"
                style={{ border: "1px solid" }}
              >
                <thead
                  className="thead-info"
                  style={{ background: "rgb(140, 213, 213)" }}
                >
                  <tr>
                    <th>SL No.</th>
                    <th>Address </th>
                    {/* <th>Profile Image</th> */}
                  </tr>
                </thead>
                <tbody>
                  {userAllAddress?.length === 0 && (
                    <tr className="text-center">
                      <td colSpan="6">
                        <h5>No Data Available</h5>
                      </td>
                    </tr>
                  )}
                  {userAllAddress?.map((address, i) => {
                    return (
                      <tr key={i}>
                        <td className="text-start">{i + 1}</td>
                        <td style={{ maxWidth: "400px" }}>
                          <strong>
                            {address?.first_Name} {address?.last_name}
                            {address.tradeName
                              ? `${address.tradeName},`
                              : "No tradeName "}
                            {address.gstNumber ? `${address.gstNumber},` : ""}
                            {address?.street},{address?.city},{address?.state},
                            {address?.country},{address?.postalCode}
                          </strong>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
export default SinglePrincipalDistributorAllDetails;