Breakup of EstimateBuilder.tsx

2026-03-11 14:44:15 -05:00
parent cd6265e2f2
commit 001d7ad3c1
13 changed files with 1106 additions and 850 deletions
@@ -0,0 +1,39 @@
+import type { Component } from 'solid-js';
+import { Show } from 'solid-js';
+import { AlertTriangle, CheckCircle2 } from 'lucide-solid';
+
+interface ValidationStatusBarProps {
+    validationStats: {
+        hasIncomplete: boolean;
+        incompleteCount: number;
+    };
+}
+
+export const ValidationStatusBar: Component<ValidationStatusBarProps> = (props) => {
+    return (
+        <div class={`mt-12 p-5 rounded-3xl border shadow-premium transition-all duration-500 flex items-center justify-between ${props.validationStats.hasIncomplete ? 'bg-destructive/5 border-destructive/20 text-destructive' : 'bg-primary/5 border-primary/20 text-primary'}`}>
+            <div class="flex items-center gap-4">
+                <div class={`p-3 rounded-2xl shadow-sm ${props.validationStats.hasIncomplete ? 'bg-destructive/20' : 'bg-primary/20'}`}>
+                    {props.validationStats.hasIncomplete ? <AlertTriangle class="w-5 h-5" /> : <CheckCircle2 class="w-5 h-5" />}
+                </div>
+                <div>
+                    <p class="font-black text-sm uppercase tracking-tight">
+                        {props.validationStats.hasIncomplete
+                            ? `Attention Required: ${props.validationStats.incompleteCount} fields contain unfinalized information (#)`
+                            : "All notes have been updated."}
+                    </p>
+                    <p class={`text-[10px] font-bold uppercase tracking-widest opacity-80 mt-0.5`}>
+                        {props.validationStats.hasIncomplete
+                            ? "Please replace all '#' markers with final project data before finalizing."
+                            : "Everything looks good to go!"}
+                    </p>
+                </div>
+            </div>
+            <Show when={!props.validationStats.hasIncomplete}>
+                <div class="px-4 py-2 bg-primary text-primary-foreground rounded-xl text-[10px] font-black uppercase tracking-wider shadow-lg shadow-primary/20 transition-all">
+                    Ready to Print
+                </div>
+            </Show>
+        </div>
+    );
+};