Cardoza_Construction/EstiMaker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Breakup of EstimateBuilder.tsx

Browse Source
This commit is contained in:
Timothy Cardoza
2026-03-11 14:44:15 -05:00
parent cd6265e2f2
commit 001d7ad3c1
13 changed files with 1106 additions and 850 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/estimate-builder/BuilderHeader.tsx
+90
View File
@@ -0,0 +1,90 @@
import type { Component } from 'solid-js';
import { PanelLeftOpen, PanelLeftClose, Calculator, Plus, FileUp, Upload, Table, Download } from 'lucide-solid';
import { appStore } from '../../store/appStore';
interface BuilderHeaderProps {
isSidebarCollapsed: boolean;
onToggleSidebar: () => void;
onAddScope: () => void;
onReset: () => void;
onImportEstimate: (e: Event) => void;
onShowExportTableModal: () => void;
onExportEstimate: () => void;
onShowLoadModal: () => void;
onShowSaveModal: () => void;
}
export const BuilderHeader: Component<BuilderHeaderProps> = (props) => {
const { scopes, estimateItems: items } = appStore;
return (
<div class="h-16 px-6 border-b border-border bg-background/50 flex items-center justify-between sticky top-0 z-50 backdrop-blur-md">
<div class="flex items-center gap-4">
<button
onClick={props.onToggleSidebar}
class="p-2 hover:bg-accent rounded-xl transition-colors text-muted-foreground shrink-0"
title={props.isSidebarCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
>
{props.isSidebarCollapsed ? <PanelLeftOpen class="w-5 h-5" /> : <PanelLeftClose class="w-5 h-5" />}
</button>
<div class="flex items-center gap-3">
<div class="p-2 bg-primary rounded-xl text-primary-foreground shadow-md shadow-primary/20 shrink-0">
<Calculator class="w-5 h-5" />
</div>
<div>
<h2 class="text-lg font-black text-foreground tracking-tight leading-none">Estimate <span class="text-primary">Builder</span></h2>
<div class="flex items-center gap-2 text-muted-foreground text-[10px] font-bold uppercase tracking-wider mt-0.5">
<span>{scopes.length} Scopes</span>
<span class="text-border">•</span>
<span>{items.length} Items</span>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<button
onClick={props.onAddScope}
class="flex items-center gap-2 px-4 py-2 bg-foreground text-background rounded-xl text-sm font-bold hover:bg-foreground/90 transition-all shadow-lg shadow-foreground/10 mr-2"
>
<Plus class="w-4 h-4" /> New Scope
</button>
<button
onClick={props.onReset}
class="flex items-center gap-2 px-3 py-2 bg-muted/50 text-primary rounded-xl text-xs font-black hover:bg-primary/10 transition-all border border-border"
>
<FileUp class="w-4 h-4" /> New CSV
</button>
<div class="h-6 w-px bg-border mx-1"></div>
<label class="flex items-center gap-2 px-3 py-2 bg-muted text-muted-foreground rounded-xl text-xs font-bold hover:bg-accent hover:text-accent-foreground transition-all border border-border cursor-pointer">
<Upload class="w-4 h-4" /> Import JSON
<input type="file" accept=".json" class="hidden" onChange={props.onImportEstimate} />
</label>
<button
onClick={props.onShowExportTableModal}
class="flex items-center gap-2 px-3 py-2 bg-muted text-muted-foreground rounded-xl text-xs font-bold hover:bg-accent hover:text-accent-foreground transition-all border border-border mr-2"
>
<Table class="w-4 h-4" /> Export Table
</button>
<button
onClick={props.onExportEstimate}
class="flex items-center gap-2 px-3 py-2 bg-muted text-muted-foreground rounded-xl text-xs font-bold hover:bg-accent hover:text-accent-foreground transition-all border border-border mr-2"
>
<Download class="w-4 h-4" /> Export JSON
</button>
<div class="h-6 w-px bg-border mx-1"></div>
<button
onClick={props.onShowLoadModal}
class="flex items-center gap-2 px-3 py-2 bg-blue-50 text-blue-600 rounded-xl text-xs font-bold hover:bg-blue-100 transition-all border border-blue-200"
>
<Download class="w-4 h-4" /> Load
</button>
<button
onClick={props.onShowSaveModal}
class="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-xl text-sm font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/10"
>
<Upload class="w-4 h-4" /> Save
</button>
</div>
</div>
);
};