Improved UI

public/assets/img/findash_dashboard.svg

@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 500" width="630" height="500">
+    <defs>
+        <linearGradient id="fg" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stop-color="#12222a"/>
+            <stop offset="1" stop-color="#0d1117"/>
+        </linearGradient>
+        <linearGradient id="line" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0" stop-color="#3fb950"/>
+            <stop offset="1" stop-color="#58a6ff"/>
+        </linearGradient>
+    </defs>
+
+    <rect width="630" height="500" fill="url(#fg)"/>
+
+    <!-- top bar -->
+    <rect x="30" y="28" width="570" height="54" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
+    <rect x="48" y="48" width="120" height="14" rx="7" fill="#3fb950"/>
+    <rect x="470" y="44" width="112" height="22" rx="11" fill="#21262d" stroke="#30363d" stroke-width="2"/>
+
+    <!-- balance card -->
+    <rect x="30" y="100" width="270" height="120" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
+    <rect x="48" y="118" width="90" height="10" rx="5" fill="#8b949e"/>
+    <text x="48" y="168" font-family="monospace" font-size="34" font-weight="700" fill="#e6edf3">&#8364; 1 284,50</text>
+    <rect x="48" y="186" width="70" height="9" rx="4" fill="#3fb950"/>
+    <rect x="126" y="186" width="52" height="9" rx="4" fill="#21262d"/>
+
+    <!-- spending chart card -->
+    <rect x="330" y="100" width="270" height="120" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
+    <rect x="348" y="118" width="80" height="10" rx="5" fill="#8b949e"/>
+    <g fill="#3fb950">
+        <rect x="352" y="168" width="18" height="28" rx="4"/>
+        <rect x="382" y="152" width="18" height="44" rx="4"/>
+        <rect x="412" y="160" width="18" height="36" rx="4"/>
+        <rect x="442" y="134" width="18" height="62" rx="4"/>
+        <rect x="472" y="146" width="18" height="50" rx="4"/>
+    </g>
+    <g fill="#58a6ff">
+        <rect x="510" y="156" width="18" height="40" rx="4"/>
+        <rect x="540" y="122" width="18" height="74" rx="4"/>
+        <rect x="570" y="142" width="18" height="54" rx="4"/>
+    </g>
+
+    <!-- line chart card -->
+    <rect x="30" y="240" width="570" height="150" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
+    <rect x="48" y="258" width="110" height="10" rx="5" fill="#8b949e"/>
+    <polyline points="48,370 108,344 168,356 228,312 288,326 348,290 408,300 468,268 528,280 582,252"
+        fill="none" stroke="url(#line)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="582" cy="252" r="7" fill="#3fb950" stroke="#0d1117" stroke-width="3"/>
+
+    <!-- category rows -->
+    <rect x="30" y="410" width="570" height="62" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
+    <circle cx="58" cy="441" r="12" fill="#3fb950"/>
+    <rect x="82" y="433" width="96" height="14" rx="7" fill="#8b949e"/>
+    <circle cx="238" cy="441" r="12" fill="#58a6ff"/>
+    <rect x="262" y="433" width="80" height="14" rx="7" fill="#8b949e"/>
+    <circle cx="402" cy="441" r="12" fill="#d29922"/>
+    <rect x="426" y="433" width="88" height="14" rx="7" fill="#8b949e"/>
+</svg>