Fix form border

resources/js/components/Display/InlineForm.tsx

@@ -3,6 +3,7 @@ import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
 import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
 import { cn } from '@/lib/utils';
 import { X } from 'lucide-react';
+import ComponentTitle from '@/components/ui/ComponentTitle';
 
 interface InlineFormProps {
     type: 'purchase' | 'milestone' | 'price' | null;
@@ -13,66 +14,66 @@ interface InlineFormProps {
     className?: string;
 }
 
-export default function InlineForm({ 
-    type, 
-    onClose, 
+export default function InlineForm({
+    type,
+    onClose,
     onPurchaseSuccess,
     onMilestoneSuccess,
     onPriceSuccess,
-    className 
+    className
 }: InlineFormProps) {
     if (!type) return null;
 
     const title = type === 'purchase' ? 'ADD PURCHASE' : type === 'milestone' ? 'ADD MILESTONE' : 'UPDATE PRICE';
 
     return (
-        <div 
+        <div
             className={cn(
-                "bg-black border-4 border-gray-800 rounded-lg",
-                "shadow-2xl shadow-red-500/20",
-                "p-6",
+                "bg-black p-8",
+                "transition-all duration-300",
                 className
             )}
         >
             {/* Header */}
-            <div className="flex items-center justify-between mb-6">
-                <h2 className="text-red-500 font-mono tracking-wide text-lg">
-                    {title}
-                </h2>
-                <button
-                    onClick={onClose}
-                    className="text-red-400 hover:text-red-300 transition-colors p-1"
-                    aria-label="Close form"
-                >
-                    <X className="w-5 h-5" />
-                </button>
-            </div>
+            <div className="w-full border-4 border-red-500 p-2 bg-black space-y-4">
+                <div className="flex items-center justify-between mb-6">
+                    <ComponentTitle>{title}</ComponentTitle>
 
-            {/* Form Content */}
-            <div className="flex justify-center">
-                {type === 'purchase' ? (
-                    <AddPurchaseForm 
-                        onSuccess={() => {
-                            if (onPurchaseSuccess) onPurchaseSuccess();
-                            onClose();
-                        }} 
-                    />
-                ) : type === 'milestone' ? (
-                    <AddMilestoneForm 
-                        onSuccess={() => {
-                            if (onMilestoneSuccess) onMilestoneSuccess();
-                            onClose();
-                        }} 
-                    />
-                ) : (
-                    <UpdatePriceForm 
-                        onSuccess={() => {
-                            if (onPriceSuccess) onPriceSuccess();
-                            onClose();
-                        }} 
-                    />
-                )}
+                    <button
+                        onClick={onClose}
+                        className="text-red-400 hover:text-red-300 transition-colors p-1"
+                        aria-label="Close form"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Form Content */}
+                <div className="flex justify-center">
+                    {type === 'purchase' ? (
+                        <AddPurchaseForm
+                            onSuccess={() => {
+                                if (onPurchaseSuccess) onPurchaseSuccess();
+                                onClose();
+                            }}
+                        />
+                    ) : type === 'milestone' ? (
+                        <AddMilestoneForm
+                            onSuccess={() => {
+                                if (onMilestoneSuccess) onMilestoneSuccess();
+                                onClose();
+                            }}
+                        />
+                    ) : (
+                        <UpdatePriceForm
+                            onSuccess={() => {
+                                if (onPriceSuccess) onPriceSuccess();
+                                onClose();
+                            }}
+                        />
+                    )}
+                </div>
             </div>
         </div>
     );
-}
+}

resources/js/components/Display/StatsBox.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { Plus, ChevronRight } from 'lucide-react';
 import { useState } from 'react';
+import ComponentTitle from '@/components/ui/ComponentTitle';
 
 interface Milestone {
     target: number;
@@ -72,9 +73,8 @@ export default function StatsBox({
             <div className="w-full border-4 border-red-500 p-2 bg-black space-y-4">
                 {/* STATS Title and Current Price */}
                 <div className="flex justify-between items-center mb-6 relative">
-                    <h2 className="text-red-500 text-lg font-mono font-bold tracking-wider">
-                        STATS
-                    </h2>
+                    <ComponentTitle>Stats</ComponentTitle>
+
                     <div className="flex items-center space-x-2 relative">
                         {stats.currentPrice && (
                             <div className="text-red-500 text-sm font-mono tracking-wider">
@@ -185,8 +185,8 @@ export default function StatsBox({
                                         key={index}
                                         className={cn(
                                             isSelectedMilestone
-                                                ? "text-red-500 font-bold"
-                                                : "bg-red-500 text-black"
+                                                ? "bg-red-500 text-black"
+                                                : "text-red-500 font-bold"
                                         )}
                                     >
                                         <td className="py-1 pr-4">

resources/js/components/ui/ComponentTitle.tsx

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+
+interface ComponentTitleProps {
+    children: ReactNode;
+}
+
+const ComponentTitle: FC<ComponentTitleProps> = ({ children }) => {
+    return (
+        <h2 className="text-red-500 text-lg font-mono font-bold tracking-wider uppercase">
+            { children }
+        </h2>
+    )
+}
+
+export default ComponentTitle

resources/js/pages/dashboard.tsx

@@ -27,11 +27,11 @@ export default function Dashboard() {
         total_investment: 0,
         average_cost_per_share: 0,
     });
-    
+
     const [priceData, setPriceData] = useState<CurrentPrice>({
         current_price: null,
     });
-    
+
     const [milestones, setMilestones] = useState<Milestone[]>([]);
     const [selectedMilestoneIndex, setSelectedMilestoneIndex] = useState(0);
     const [showProgressBar, setShowProgressBar] = useState(false);
@@ -121,14 +121,14 @@ export default function Dashboard() {
 
 
     // Calculate portfolio stats
-    const currentValue = priceData.current_price 
-        ? purchaseData.total_shares * priceData.current_price 
+    const currentValue = priceData.current_price
+        ? purchaseData.total_shares * priceData.current_price
         : undefined;
-    
-    const profitLoss = currentValue 
-        ? currentValue - purchaseData.total_investment 
+
+    const profitLoss = currentValue
+        ? currentValue - purchaseData.total_investment
         : undefined;
-    
+
     const profitLossPercentage = profitLoss && purchaseData.total_investment > 0
         ? (profitLoss / purchaseData.total_investment) * 100
         : undefined;
@@ -168,36 +168,37 @@ export default function Dashboard() {
 
     const handleProgressClick = () => {
         setShowStatsBox(!showStatsBox);
+        setActiveForm(null)
     };
 
     return (
         <>
             <Head title="VWCE Tracker" />
-            
+
             {/* Stacked Layout */}
             <div className="min-h-screen bg-black">
                 <div className="w-full max-w-4xl mx-auto px-4">
                     {/* Box 1: LED Number Display - Fixed position from top */}
                     <div className="pt-32">
-                        <LedDisplay 
+                        <LedDisplay
                             value={purchaseData.total_shares}
                             onClick={handleLedClick}
                         />
                     </div>
-                    
+
                     {/* Box 2: Progress Bar (toggleable) */}
-                    <div className="mt-4" style={{ display: showProgressBar ? 'block' : 'none' }}>
-                        <ProgressBar 
+                    <div style={{ display: showProgressBar ? 'block' : 'none' }}>
+                        <ProgressBar
                             currentShares={purchaseData.total_shares}
                             milestones={milestones}
                             selectedMilestoneIndex={selectedMilestoneIndex}
                             onClick={handleProgressClick}
                         />
                     </div>
-                    
+
                     {/* Box 3: Stats Box (toggleable) */}
-                    <div className="mt-4" style={{ display: showStatsBox ? 'block' : 'none' }}>
-                        <StatsBox 
+                    <div style={{ display: showStatsBox ? 'block' : 'none' }}>
+                        <StatsBox
                             stats={statsData}
                             milestones={milestones}
                             selectedMilestoneIndex={selectedMilestoneIndex}
@@ -207,9 +208,9 @@ export default function Dashboard() {
                             onUpdatePrice={() => setActiveForm('price')}
                         />
                     </div>
-                    
+
                     {/* Box 4: Forms (only when active form is set) */}
-                    <div className="mt-4" style={{ display: activeForm ? 'block' : 'none' }}>
+                    <div style={{ display: activeForm && showProgressBar && showStatsBox ? 'block' : 'none' }}>
                         <InlineForm
                             type={activeForm}
                             onClose={() => setActiveForm(null)}