src/components/Cards/AvailableJobsCard.jsx

@@ -187,7 +187,7 @@ export default function AvailableJobsCard({
               </div>
             </div> */}
             <div className="block sm:flex flex-wrap gap-4">
-              <p className="text-sm text-thin-light-gray">
+              <p className="text-sm text-thin-light-gray flex flext-start gap-1">
                 Price: <span className="text-purple">{thePrice}</span>
               </p>
               <p className="text-sm text-thin-light-gray">

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -72,7 +72,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                       {value.title}
                                     </h1>
                                     <div className="flex gap-4 items-center">
-                                      <span className="text-sm text-thin-light-gray">
+                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
                                         Price:{" "}
                                         <span className="text-purple">
                                           {thePrice}

src/components/Helpers/PriceFormatter.jsx

@@ -1,16 +1,48 @@
-export const PriceFormatter = (price, currency, currencyName) => {
-  const supportedCurrencies = ["USD", "EUR", "GBP"];
-  const symbolFormatter = supportedCurrencies.includes(currency)
-    ? currency
-    : undefined;
+import React from 'react'
 
-  const formatter = new Intl.NumberFormat("en", {
-    style: symbolFormatter,
-    currencyDisplay: "symbol",
-    minimumFractionDigits: 2,
-  });
+// export const PriceFormatter = (price, currency, currencyName) => {
+//   const supportedCurrencies = ["USD", "EUR", "GBP"];
+//   const symbolFormatter = supportedCurrencies.includes(currency)
+//     ? currency
+//     : undefined;
 
-  const displayCurrencyName = symbolFormatter ? "" : currencyName;
+//   const formatter = new Intl.NumberFormat("en", {
+//     style: symbolFormatter,
+//     currencyDisplay: "symbol",
+//     minimumFractionDigits: 2,
+//   });
 
-  return `${formatter.format(price)} ${displayCurrencyName}`;
-};
+//   const displayCurrencyName = symbolFormatter ? "" : currencyName;
+
+//   return `${formatter.format(price)} ${displayCurrencyName}`;
+// };
+
+
+export const PriceFormatter = (price='00', currency='', currencyName='') => {
+  // Convert the number to a string
+let numStr = String(price);
+
+// Split the string into integer and decimal parts
+let parts = numStr.split('.');
+let integerPart = parts[0];
+let decimalPart = parts[1] || '';
+
+// Add thousands separators to the integer part
+// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+let formattedInteger = integerPart;
+
+// Truncate or pad the decimal part to two decimal points
+let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
+
+// Combine the formatted integer and decimal parts
+// let formattedNumber = formattedInteger + '.' + formattedDecimal;
+
+// return formattedNumber;
+  return (
+    <span className='text-sm flex items-center'>
+      <sup>{currency || currencyName || ''}</sup>
+      <span className='px-1 font-bold text-lg'>{formattedInteger}</span>
+      <sup>{formattedDecimal}</sup>
+    </span>
+  )
+}

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -68,7 +68,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                   {value.title}
                                 </h1>
                                 <div>{value.description}</div>
-                                <span className="text-sm text-thin-light-gray">
+                                <span className="text-sm text-thin-light-gray flex flext-start gap-1">
                                   Price:{" "}
                                   <span className="text-purple">
                                     {thePrice}

src/components/MyJobs/MyJobTable.jsx

@@ -119,7 +119,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   {value.title}
                 </h1>
                 <div>{value.description}</div>
-                <span className="text-sm text-thin-light-gray">
+                <span className="text-sm text-thin-light-gray flex items-start gap-1">
                   Price: <span className="text-purple">{thePrice}</span>
                 </span>
                 <span className="text-sm text-thin-light-gray">

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -67,7 +67,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                   {value.title}
                                 </h1>
                                 <div>{value.description}</div>
-                                <span className="text-sm text-thin-light-gray">
+                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
                                   Price:{" "}
                                   <span className="text-purple">
                                     {thePrice}

src/components/MyTasks/MyJobTable.jsx

@@ -86,7 +86,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                         <span className="text-base text-gray-600">
                           {task?.description}
                         </span>
-                        <span className="text-sm text-thin-light-gray">
+                        <span className="text-sm text-thin-light-gray flex flext-start gap-1">
                           Price:
                           <span className="text-purple ml-1">{thePrice}</span>
                         </span>

src/components/jobPopout/DeleteJobPopout.jsx

@@ -118,7 +118,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
             <p className="text-xl tracking-wide text-dark-gray dark:text-white">
               {details.title}
             </p>
-            <p className="text-lg tracking-wide text-dark-gray dark:text-white">
+            <p className="text-lg tracking-wide text-dark-gray dark:text-white flex items-start gap-1">
               Price: {details.thePrice}
             </p>
             <p className="text-lg tracking-wide text-dark-gray dark:text-white">

src/components/jobPopout/PendingJobsPopout.jsx

@@ -4,6 +4,7 @@ import ModalCom from "../Helpers/ModalCom";
 import usersService from "../../services/UsersService";
 import { toast } from "react-toastify";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 const showSuccessToast = (message) => {
   toast.success(message, {
@@ -133,7 +134,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
             <div className="my-2 md:flex">
               <Detail
                 label="Price"
-                value={`${details.price * 0.01} ${details.currency}`}
+                // value={`${details.price * 0.01} ${details.currency}`}
+                value={PriceFormatter(details.price * 0.01, details?.currency_code, details.currency)}
               />
             </div>