feat: modernize sign-in and responsive refactor

src/components/BudgetRing.tsx

@@ -0,0 +1,60 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+interface BudgetRingProps {
+    spent: number;
+    total: number;
+    label: string;
+    color?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export const BudgetRing = ({ spent, total, label, color = "text-primary", size = "md" }: BudgetRingProps) => {
+    const percentage = Math.min(100, Math.max(0, (spent / total) * 100));
+    const radius = size === 'sm' ? 20 : size === 'md' ? 30 : 40;
+    const strokeWidth = size === 'sm' ? 4 : size === 'md' ? 6 : 8;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+    return (
+        <div className="flex flex-col items-center justify-center p-4">
+            <div className="relative flex items-center justify-center">
+                {/* Background Circle */}
+                <svg className="transform -rotate-90 w-24 h-24">
+                    <circle
+                        cx="48"
+                        cy="48"
+                        r={radius}
+                        stroke="currentColor"
+                        strokeWidth={strokeWidth}
+                        fill="transparent"
+                        className="text-slate-100"
+                    />
+                    {/* Progress Circle */}
+                    <motion.circle
+                        initial={{ strokeDashoffset: circumference }}
+                        animate={{ strokeDashoffset }}
+                        transition={{ duration: 1.5, ease: "easeOut" }}
+                        cx="48"
+                        cy="48"
+                        r={radius}
+                        stroke="currentColor"
+                        strokeWidth={strokeWidth}
+                        fill="transparent"
+                        strokeDasharray={circumference}
+                        strokeLinecap="round"
+                        className={cn(color)}
+                    />
+                </svg>
+                <div className="absolute text-center">
+                    <span className="text-xs font-bold text-slate-700">{Math.round(percentage)}%</span>
+                </div>
+            </div>
+            <div className="mt-2 text-center">
+                <p className="text-sm font-semibold text-slate-700">{label}</p>
+                <p className="text-xs text-slate-400">₹{spent / 1000}k / ₹{total / 1000}k</p>
+            </div>
+        </div>
+    );
+};