💄 style(FinancialDashboard): update debt ratio modal bar visualization

- redesign debt ratio modal SVG with gradient colors and new shape structure
- replace solid color rectangles with gradient paths for enhanced visual effect
- adjust SVG viewBox and dimensions for better scaling in modal context
- update component import from BarSVG to ModalBarSVG in VariationModal

src/client/home/pages/FinancialDashboard/components/ModalBarSVG.tsx

@@ -243,26 +243,43 @@ export default function ModalBarSVG({ variant, width = 36, height = 225, classNa
 
   if (variant === "debt-ratio") {
     return (
-      <svg width={width} height={height} viewBox="0 0 96 240" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-        <rect width="90" height="240" transform="translate(3)" fill="#297AD8"/>
-        <rect width="90" height="175" transform="translate(3 65)" fill="#46BDBD"/>
-        <rect x="3.25" y="65.25" width="89.5" height="1.5" stroke="white" strokeWidth="0.5"/>
-        <g filter="url(#filter0_d_debt_ratio_modal)">
-          <rect x="3" y="65" width="90" height="2" fill="white"/>
-          <rect x="2.5" y="64.5" width="91" height="3" stroke="white"/>
-        </g>
+      <svg width={width} height={height} viewBox="0 0 26 158" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M12.5 156H0L0 3L12.5 3L12.5 156Z" fill="url(#paint0_linear_debt_ratio_modal)"/>
+        <rect x="12.5" y="3" width="1" height="153" fill="url(#paint1_linear_debt_ratio_modal)"/>
+        <path d="M26 156H13.5L13.5 3L26 3L26 156Z" fill="url(#paint2_linear_debt_ratio_modal)"/>
+        <path d="M0 155.998L13 158L26 155.998L13 153.667L0 155.998Z" fill="url(#paint3_linear_debt_ratio_modal)" fillOpacity="0.6"/>
+        <path d="M12.5 152.5H13.5V157.5H12.5V152.5Z" fill="url(#paint4_linear_debt_ratio_modal)"/>
+        <path d="M13 0L0 2.99636L13 6L26 2.99636L13 0Z" fill="url(#paint5_linear_debt_ratio_modal)"/>
+        <path d="M0 3C2.21964 3.36748 4.40696 3.78174 6.59428 4.20267C7.69333 4.40312 8.77082 4.63697 9.8591 4.85746L13.1239 5.52561H12.8761L16.1409 4.85746C17.2292 4.63697 18.3067 4.40312 19.4057 4.20267C21.593 3.78174 23.7804 3.36748 26 3C23.8881 3.54788 21.7439 4.049 19.5997 4.54343C18.5329 4.79733 17.4447 5.0245 16.3672 5.25835L13.1239 5.96659L12.9946 6L12.8761 5.97327L9.63282 5.26503C8.55532 5.0245 7.46705 4.80401 6.40033 4.54343C4.25611 4.049 2.11189 3.54788 0 3Z" fill="url(#paint6_linear_debt_ratio_modal)"/>
         <defs>
-          <filter id="filter0_d_debt_ratio_modal" x="0" y="62" width="96" height="8" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-            <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_debt_ratio_modal"/>
-            <feOffset/>
-            <feGaussianBlur stdDeviation="0.5"/>
-            <feComposite in2="hardAlpha" operator="out"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0.116736 0 0 0 0 0.144867 0 0 0 0 0.170833 0 0 0 0.2 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_debt_ratio_modal"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_debt_ratio_modal" result="shape"/>
-          </filter>
+          <linearGradient id="paint0_linear_debt_ratio_modal" x1="6.24719" y1="155.667" x2="6.24719" y2="3.00517" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#00FFD1" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#00DDB5"/>
+          </linearGradient>
+          <linearGradient id="paint1_linear_debt_ratio_modal" x1="13" y1="3" x2="13" y2="156" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#D8FFFD"/>
+            <stop offset="1" stopColor="#00D7A3" stopOpacity="0.3"/>
+          </linearGradient>
+          <linearGradient id="paint2_linear_debt_ratio_modal" x1="19.7472" y1="155.428" x2="19.7472" y2="3.00518" gradientUnits="userSpaceOnUse">
+            <stop offset="0.00462963" stopColor="#01DEB6" stopOpacity="0.2"/>
+            <stop offset="1" stopColor="#00BC9A"/>
+          </linearGradient>
+          <linearGradient id="paint3_linear_debt_ratio_modal" x1="13" y1="153.667" x2="13" y2="158" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#0A6C61"/>
+            <stop offset="1" stopColor="#1B9B93"/>
+          </linearGradient>
+          <linearGradient id="paint4_linear_debt_ratio_modal" x1="13.5" y1="152.885" x2="13.5" y2="157.885" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#216655"/>
+            <stop offset="1" stopColor="#407B8D" stopOpacity="0"/>
+          </linearGradient>
+          <linearGradient id="paint5_linear_debt_ratio_modal" x1="13.002" y1="5.9965" x2="13.002" y2="0" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#9EFFE8"/>
+            <stop offset="1" stopColor="#047A5E"/>
+          </linearGradient>
+          <linearGradient id="paint6_linear_debt_ratio_modal" x1="12.9967" y1="5.99719" x2="12.9967" y2="2.5" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white"/>
+            <stop offset="1" stopColor="white" stopOpacity="0.3"/>
+          </linearGradient>
         </defs>
       </svg>
     );

src/client/home/pages/FinancialDashboard/components/VariationModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import BarElement from './BarElement';
-import BarSVG from './BarSVG';
+import ModalBarSVG from './ModalBarSVG';
 import ModalBorder from './ModalBorder';
 import Icon from './Icon';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
@@ -56,7 +56,7 @@ const CustomBar = (props: any) => {
     <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
       <foreignObject width={svgWidth} height={svgHeight}>
         <div style={{ width: '100%', height: '100%' }}>
-          <BarSVG variant={variant} width={svgWidth} height={svgHeight} />
+          <ModalBarSVG variant={variant} width={svgWidth} height={svgHeight} />
         </div>
       </foreignObject>
     </g>