UI implementation has been done in Expense

src/components/Dashboard/Dashboard.jsx

@@ -57,7 +57,7 @@ const Dashboard = () => {
                     <ProjectProgressChart />
                 </div>
                 <div className="col-12 col-xl-8">
-                    <div className="card h-100">
+                    <div className="card">
                         <ExpenseAnalysis />
                     </div>
                 </div>

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -7,11 +7,12 @@ import { FormProvider, useForm } from "react-hook-form";
 import { formatCurrency, localToUtc } from "../../utils/appUtils";
 import { useProjectName } from "../../hooks/useProjects";
 import { SpinnerLoader } from "../common/Loader";
+import flatColors from "../Charts/flatColor";
 
 const ExpenseAnalysis = () => {
   const projectId = useSelectedProject();
   const [projectName, setProjectName] = useState("All Project");
-  const { projectNames, loading } = useProjectName();
+  const { projectNames } = useProjectName();
 
   const methods = useForm({
     defaultValues: { startDate: "", endDate: "" },
@@ -50,7 +51,7 @@ const ExpenseAnalysis = () => {
     labels,
     legend: { show: false },
     dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
-    colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
+    colors: flatColors,
     plotOptions: {
       pie: {
         donut: {
@@ -79,11 +80,9 @@ const ExpenseAnalysis = () => {
 
   return (
     <>
-
       <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
         <div className="text-start">
           <h5 className="mb-1 card-title">Expense Breakdown</h5>
-          {/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
           <p className="card-subtitle m-0">{projectName}</p>
         </div>
 
@@ -94,7 +93,6 @@ const ExpenseAnalysis = () => {
         </div>
       </div>
 
-      {/* Card body */}
       <div className="card-body position-relative">
         {isLoading && (
           <div
@@ -114,7 +112,6 @@ const ExpenseAnalysis = () => {
           </div>
         )}
 
-
         {!isLoading && report.length > 0 && (
           <>
             {isFetching && (
@@ -123,50 +120,59 @@ const ExpenseAnalysis = () => {
               </div>
             )}
 
-            <div className="d-flex justify-content-center mb-3">
+            <div className="row">
+              {/* Chart Column */}
+              <div className="col-12 col-lg-6 d-flex justify-content-center mb-3 mb-lg-0">
                 <Chart
                   options={donutOptions}
                   series={series}
                   type="donut"
-                width="100%"
+                  width="80%"
                   height={320}
                 />
               </div>
 
-            <div className="mb-2 w-100">
+              {/* Data/Legend Column */}
-              <div className="row g-2">
+              <div className="col-12 col-lg-6">
+                <div className="row g-4">
                   {report.map((item, idx) => (
                     <div
-                    className="col-12 col-sm-6 d-flex align-items-start"
+                      className="col-6"
                       key={idx}
-                  >
-                    <div className="avatar me-2">
-                      <span
-                        className="avatar-initial rounded-2"
                       style={{
-                          backgroundColor:
+                        borderLeft: `3px solid ${flatColors[idx % flatColors.length]}`,
-                            donutOptions.colors[idx % donutOptions.colors.length],
+                      }}
+                    >
+                      <div className="d-flex flex-column text-start">
+                        <small
+                          className="fw-semibold text-wrap text-dark"
+                          style={{
+                            fontSize: "0.8rem",
+                            whiteSpace: "normal",
+                            wordBreak: "break-word",
+                            lineHeight: "1.2",
+                          }}
+                        >
+                          {item.projectName}
+                        </small>
+                        <span
+                          className="fw-semibold text-muted"
+                          style={{
+                            fontSize: "0.75rem",
                           }}
                         >
-                        <i className="bx bx-receipt fs-4"></i>
-                      </span>
-                    </div>
-                    <div className="d-flex flex-column gap-1 text-start">
-                      <small className="fw-semibold">{item.projectName}</small>
-                      <span className="fw-semibold text-muted ms-1">
                           {formatCurrency(item.totalApprovedAmount)}
                         </span>
                       </div>
                     </div>
+
                   ))}
                 </div>
               </div>
+            </div>
           </>
         )}
       </div>
-
-      {/* Header */}
-
     </>
   );
 };

src/components/Dashboard/ExpenseStatus.jsx

@@ -103,7 +103,7 @@ const ExpenseStatus = () => {
                   </div>
                   <div>
                     <small
-                      className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-2xl"
+                      className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-xl"
                         } text-gray-500`}
                     >
                       {item?.count || 0}
@@ -137,7 +137,7 @@ const ExpenseStatus = () => {
               </div>
               <div className="d-flex align-items-center gap-2">
                 <span
-                  className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-" : "text-3xl"
+                  className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-xl" : "text-3xl"
                     } text-md`}
                 >
                   {formatCurrency(data?.totalAmount || 0)}