resources/js/components/Display/ProgressBar.tsx

@@ -1,28 +1,64 @@
 import { cn } from '@/lib/utils';
 
+interface Milestone {
+    target: number;
+    description: string;
+    created_at: string;
+}
+
 interface ProgressBarProps {
+    currentShares: number;
+    milestones: Milestone[];
     className?: string;
     onClick?: () => void;
 }
 
 export default function ProgressBar({ 
+    currentShares,
+    milestones,
     className,
     onClick
 }: ProgressBarProps) {
+    // Get the first milestone (lowest target) for progress calculation
+    const firstMilestone = milestones.length > 0 ? milestones[0] : null;
+    
+    // Calculate progress percentage
+    const progressPercentage = firstMilestone 
+        ? Math.min((currentShares / firstMilestone.target) * 100, 100)
+        : 0;
     return (
         <div 
             className={cn(
-                "bg-black border-4 border-gray-800 rounded-lg",
-                "shadow-2xl shadow-red-500/20 cursor-pointer",
+                "bg-black cursor-pointer",
                 "transition-all duration-300",
-                "hover:shadow-red-500/40 hover:border-red-600",
-                "p-8 text-center",
+                "p-8",
                 className
             )}
             onClick={onClick}
         >
-            <div className="text-red-500 text-2xl font-mono tracking-wide">
-                PROGRESS BAR
+            {/* Progress Bar Container */}
+            <div className="w-full">
+                {/* Old-school progress bar with overlaid text */}
+                <div className="w-full border-4 border-red-500 p-2 bg-black relative overflow-hidden">
+                    {/* Inner container */}
+                    <div className="relative h-8">
+                        {/* Progress fill */}
+                        <div 
+                            className="absolute top-0 left-0 h-full bg-red-500 transition-all duration-500 ease-out"
+                            style={{ width: `${progressPercentage}%` }}
+                        />
+                        
+                        {/* Text overlay */}
+                        {firstMilestone && (
+                            <div className="relative h-full flex items-center justify-center">
+                                {/* Base text (red on black background) */}
+                                <div className="text-red-500 font-mono text-sm font-bold mix-blend-difference relative z-10">
+                                    {progressPercentage.toFixed(1)}%
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
             </div>
         </div>
     );

resources/js/pages/dashboard.tsx

@@ -167,6 +167,8 @@ export default function Dashboard() {
                     {/* Box 2: Progress Bar (toggleable) */}
                     <div className="mt-4" style={{ display: showProgressBar ? 'block' : 'none' }}>
                         <ProgressBar 
+                            currentShares={purchaseData.total_shares}
+                            milestones={milestones}
                             onClick={handleProgressClick}
                         />
                     </div>