refactor: enhance representation info fetching and pass it to relevant components

components/layoutPanel/userDetail/Head.js

@@ -6,7 +6,9 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import React from "react";
 
-function Head({ data, loading }) {
+function Head({ data, loading, representationInfo }) {
+  const cityName = representationInfo?.city?.label || "اهواز";
+
   return (
     <div className="flex w-full flex-col items-center justify-start">
       <CircularLoading width={80} height={80} loading={loading}>
@@ -23,7 +25,7 @@ function Head({ data, loading }) {
         <LocationP />
         <TextLoading width={55} height={16} loading={loading}>
           <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
-            نماینده شهر اهواز
+            نماینده شهر {cityName}
           </p>
         </TextLoading>
       </div>