Perfect 👍 Let’s complete your getUserPreviousDetails function so that it fetches the old user data and displays it under “Raw” as “Old User Data” — and also optimize your component for clarity, readability, and reusability.

Below is a cleaned-up, optimized version of your React component (RequestDetailsDialog.jsx) that: ✅ Uses useState to store fetched old user details. ✅ Displays formatted “Old User Data” nicely instead of raw JSON dump. ✅ Avoids unnecessary re-renders. ✅ Has better error and loading handling.

---

✅ Optimized & Completed Code

// components/RequestDetailsDialog.jsx import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Stack, Typography, Divider, CircularProgress, } from "@mui/material"; import { useEffect, useState } from "react"; import useApi from "../../../hooks/useApi";

function Row({ label, value }) { return ( <Typography sx={{ minWidth: 140 }} color="text.secondary"> {label} <Typography sx={{ wordBreak: "break-word" }}>{value ?? "-"} ); }

export default function RequestDetailsDialog({ open, row, onClose }) { const { callApi, loading, error: apiError } = useApi(); const [oldUserData, setOldUserData] = useState(null);

useEffect(() => { if (row?.USERID && row?.ROLE_ID) { getUserPreviousDetails(row.USERID, row.BRANCH, row.ROLE_ID); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [row]);

// ✅ Completed & Optimized Function const getUserPreviousDetails = async (userId, reqBranch, reqRole) => { try { const params = new URLSearchParams({ id: userId, branch: reqBranch || "", roleId: reqRole, });

  const data = await callApi(`/UM/user/user-details?${params}`, {}, "GET");

  if (data?.result?.users?.length > 0) {
    setOldUserData(data.result.users[0]);
  } else {
    setOldUserData(null);
  }
} catch (err) {
  console.error("Error fetching previous user details:", err);
  setOldUserData(null);
}

};

const renderOldUserData = () => { if (loading) return ; if (apiError) return Failed to load old user data; if (!oldUserData) return No previous user data found.;

return (
  <Stack spacing={1}>
    <Row label="First Name" value={oldUserData.FIRST_NAME} />
    <Row label="Last Name" value={oldUserData.LAST_NAME} />
    <Row label="User ID" value={oldUserData.USERID} />
    <Row label="Email" value={oldUserData.EMAIL} />
    <Row label="Phone" value={oldUserData.PHONE_NUMBER} />
    <Row label="Role" value={`${oldUserData.ROLE_NAME} (${oldUserData.ROLE_ID})`} />
    <Row label="Branch" value={oldUserData.BRANCH} />
    <Row label="Account Status" value={oldUserData.ACCOUNT_STATUS} />
  </Stack>
);

};

return ( Request Details <Stack spacing={1.25} sx={{ mt: 0.5 }}> <Divider sx={{ my: 1 }} /> <Row label="User" value={${row?.__name ?? ""} (${row?.USERID ?? ""})} /> <Row label="Role" value={${row?.ROLE_NAME ?? ""} (${row?.ROLE_ID ?? ""})} /> <Divider sx={{ my: 1 }} /> <Divider sx={{ my: 2 }} />

      <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
        Old User Data
      </Typography>
      {renderOldUserData()}
    </Stack>
  </DialogContent>

  <DialogActions>
    <Button onClick={onClose} variant="contained">
      Close
    </Button>
  </DialogActions>
</Dialog>

); }

---

🧠 What Changed & Why

Change Purpose

✅ Used useState for oldUserData Keeps previous user’s data separate from request row ✅ Used URLSearchParams Cleaner way to build query params ✅ Added error & loading UI Improves UX ✅ Removed unnecessary console logs Cleaner code ✅ Displayed previous user data in labeled format Easier to read than raw JSON ✅ Function is safe even if API fails Graceful fallback UI

---

Would you like me to modify it so that it shows differences between current and old data (highlighting changed fields)? That’s a very common and useful enhancement for “Request Details” dialogs.