True clean start with src folder
This commit is contained in:
@@ -0,0 +1,976 @@
|
||||
import type { Component } from 'solid-js';
|
||||
import { createSignal, For, createMemo, onMount, Show } from 'solid-js';
|
||||
import { Portal } from 'solid-js/web';
|
||||
import { createStore } from 'solid-js/store';
|
||||
import { Plus, ChevronRight, ListTree, Calculator, FolderKanban, Info, PanelLeftOpen, PanelLeftClose, FileUp, Download, Upload, FileText, ChevronDown, AlertTriangle, CheckCircle2, X } from 'lucide-solid';
|
||||
import { GENERAL_NOTES_DEFAULT, GENERAL_PRE_NOTES_DEFAULT } from '../company-info';
|
||||
import type { Scope, SubScope, EstimateItem, JobInfo } from '../types';
|
||||
import type { ExtractedItem } from '../utils/csv-parser';
|
||||
import ScopeCard from './ScopeCard';
|
||||
import ItemRow from './ItemRow';
|
||||
import PrintEstimate from './PrintEstimate';
|
||||
import NoteEditor from './NoteEditor';
|
||||
import LazyItem from './LazyItem';
|
||||
import CalculatorPopover from './CalculatorPopover';
|
||||
|
||||
interface EstimateBuilderProps {
|
||||
initialItems: ExtractedItem[];
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
const EstimateBuilder: Component<EstimateBuilderProps> = (props) => {
|
||||
const [scopes, setScopes] = createStore<Scope[]>([]);
|
||||
const [subScopes, setSubScopes] = createStore<SubScope[]>([]);
|
||||
const [items, setItems] = createStore<EstimateItem[]>([]);
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
|
||||
const [isNotesExpanded, setIsNotesExpanded] = createSignal(true);
|
||||
const [isPreNotesExpanded, setIsPreNotesExpanded] = createSignal(true);
|
||||
const [hoveredScopeId, setHoveredScopeId] = createSignal<string | null>(null);
|
||||
const [selectedIds, setSelectedIds] = createSignal<string[]>([]);
|
||||
const [lastSelectedId, setLastSelectedId] = createSignal<string | null>(null);
|
||||
const [generalEstimateNotes, setGeneralEstimateNotes] = createSignal(GENERAL_NOTES_DEFAULT);
|
||||
const [generalPreNotes, setGeneralPreNotes] = createSignal(GENERAL_PRE_NOTES_DEFAULT);
|
||||
|
||||
// Client & Project signals
|
||||
const [clientInfo, setClientInfo] = createStore({
|
||||
name: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
fax: ''
|
||||
});
|
||||
const [jobInfo, setJobInfo] = createStore<JobInfo>({
|
||||
number: '',
|
||||
name: '',
|
||||
address: '',
|
||||
workOrder: ''
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
// Convert initial items to Estimate items
|
||||
const transformed: EstimateItem[] = props.initialItems.map(item => ({
|
||||
id: item.id,
|
||||
description: item.description,
|
||||
quantity: parseFloat(item.quantity.replace(/,/g, '')) || 0,
|
||||
unitPrice: 0,
|
||||
markup: 0,
|
||||
markupType: 'percent',
|
||||
contingency: 0,
|
||||
contingencyType: 'percent'
|
||||
}));
|
||||
setItems(transformed);
|
||||
});
|
||||
|
||||
const unassignedItems = createMemo(() => items.filter(i => !i.scopeId));
|
||||
|
||||
const grandTotals = createMemo(() => {
|
||||
let subtotal = 0;
|
||||
let markup = 0;
|
||||
let contingency = 0;
|
||||
let fees = 0;
|
||||
const scopeSubtotals = new Map<string, number>();
|
||||
|
||||
items.forEach(item => {
|
||||
const base = item.quantity * item.unitPrice;
|
||||
subtotal += base;
|
||||
markup += item.markupType === 'percent' ? base * (item.markup / 100) : item.markup;
|
||||
contingency += item.contingencyType === 'percent' ? base * (item.contingency / 100) : item.contingency;
|
||||
|
||||
if (item.scopeId) {
|
||||
scopeSubtotals.set(item.scopeId, (scopeSubtotals.get(item.scopeId) || 0) + base);
|
||||
}
|
||||
});
|
||||
|
||||
scopes.forEach(scope => {
|
||||
const scopeSubtotal = scopeSubtotals.get(scope.id) || 0;
|
||||
|
||||
fees += scope.useManagementLogic === 'percent'
|
||||
? scopeSubtotal * (scope.managementFee / 100)
|
||||
: scope.managementFee;
|
||||
|
||||
fees += scope.useDeliveryLogic === 'percent'
|
||||
? scopeSubtotal * (scope.deliveryFee / 100)
|
||||
: scope.deliveryFee;
|
||||
});
|
||||
|
||||
return {
|
||||
subtotal,
|
||||
markup,
|
||||
contingency,
|
||||
fees,
|
||||
grandTotal: subtotal + markup + contingency + fees
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
const validationStats = createMemo(() => {
|
||||
let count = 0;
|
||||
if (generalPreNotes().includes('#')) count++;
|
||||
if (generalEstimateNotes().includes('#')) count++;
|
||||
|
||||
scopes.forEach(s => {
|
||||
if (s.bidDescription?.includes('#')) count++;
|
||||
if (s.estimatorNotes?.includes('#')) count++;
|
||||
});
|
||||
|
||||
return {
|
||||
hasIncomplete: count > 0,
|
||||
incompleteCount: count
|
||||
};
|
||||
});
|
||||
|
||||
const anyDescriptionIsLong = createMemo(() => {
|
||||
return items.some(item => (item.description || '').length > 120);
|
||||
});
|
||||
|
||||
const finalizeBid = () => {
|
||||
window.print();
|
||||
};
|
||||
|
||||
const exportEstimate = () => {
|
||||
const data = {
|
||||
scopes: [...scopes],
|
||||
subScopes: [...subScopes],
|
||||
items: [...items],
|
||||
clientInfo: { ...clientInfo },
|
||||
jobInfo: { ...jobInfo },
|
||||
generalEstimateNotes: generalEstimateNotes(),
|
||||
generalPreNotes: generalPreNotes(),
|
||||
version: '1.0'
|
||||
};
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${jobInfo.number || '0000'}-${jobInfo.name || 'unnamed'}-${clientInfo.name || 'client'}-estimate.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const importEstimate = (e: Event) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.target?.result as string);
|
||||
if (data.scopes) setScopes(data.scopes);
|
||||
if (data.subScopes) setSubScopes(data.subScopes);
|
||||
if (data.items) setItems(data.items);
|
||||
if (data.clientInfo) setClientInfo(data.clientInfo);
|
||||
if (data.jobInfo) setJobInfo(data.jobInfo);
|
||||
if (data.generalEstimateNotes !== undefined) setGeneralEstimateNotes(data.generalEstimateNotes);
|
||||
if (data.generalNotes !== undefined) setGeneralEstimateNotes(data.generalNotes); // Support old files
|
||||
if (data.generalPreNotes !== undefined) setGeneralPreNotes(data.generalPreNotes);
|
||||
} catch (err) {
|
||||
alert('Failed to parse estimate file.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
const addScope = () => {
|
||||
const scopeId = crypto.randomUUID();
|
||||
const newScope: Scope = {
|
||||
id: scopeId,
|
||||
name: 'New Scope',
|
||||
managementFee: 0,
|
||||
managementFeeType: 'percent',
|
||||
deliveryFee: 0,
|
||||
deliveryFeeType: 'percent',
|
||||
useManagementLogic: 'percent',
|
||||
useDeliveryLogic: 'percent',
|
||||
estimatorNotes: '',
|
||||
bidDescription: '**Material and labor to install #**\n**Includes:**\n- #\n**Does Not Include:**\n- #'
|
||||
};
|
||||
setScopes(prev => [...prev, newScope]);
|
||||
|
||||
// Add default sub-scopes
|
||||
addSubScopeWithName(scopeId, 'Materials');
|
||||
addSubScopeWithName(scopeId, 'Labor');
|
||||
};
|
||||
|
||||
const addSubScopeWithName = (scopeId: string, name: string) => {
|
||||
const newSubScope: SubScope = {
|
||||
id: crypto.randomUUID(),
|
||||
name,
|
||||
scopeId
|
||||
};
|
||||
setSubScopes(prev => [...prev, newSubScope]);
|
||||
};
|
||||
|
||||
const addSubScope = (scopeId: string) => {
|
||||
addSubScopeWithName(scopeId, 'New Sub-scope');
|
||||
};
|
||||
|
||||
const updateItem = (id: string, updates: Partial<EstimateItem>) => {
|
||||
setItems(item => item.id === id, updates);
|
||||
};
|
||||
|
||||
const deleteItem = (id: string) => {
|
||||
setItems(items.filter(i => i.id !== id));
|
||||
setSelectedIds(prev => prev.filter(selId => selId !== id));
|
||||
if (lastSelectedId() === id) setLastSelectedId(null);
|
||||
};
|
||||
|
||||
const duplicateItem = (id: string) => {
|
||||
const itemIndex = items.findIndex(i => i.id === id);
|
||||
if (itemIndex !== -1) {
|
||||
const itemToClone = items[itemIndex];
|
||||
const newItem: EstimateItem = {
|
||||
...itemToClone,
|
||||
id: crypto.randomUUID()
|
||||
};
|
||||
// Insert immediately after the original item
|
||||
const newItems = [...items];
|
||||
newItems.splice(itemIndex + 1, 0, newItem);
|
||||
setItems(newItems);
|
||||
}
|
||||
};
|
||||
|
||||
const copySubScopeItems = (sourceSubScopeId: string, targetSubScopeId: string) => {
|
||||
const targetSubScope = subScopes.find(ss => ss.id === targetSubScopeId);
|
||||
if (!targetSubScope) return;
|
||||
|
||||
const itemsToClone = items.filter(i => i.subScopeId === sourceSubScopeId);
|
||||
const newClonedItems = itemsToClone.map(item => ({
|
||||
...item,
|
||||
id: crypto.randomUUID(),
|
||||
subScopeId: targetSubScopeId,
|
||||
scopeId: targetSubScope.scopeId
|
||||
}));
|
||||
|
||||
setItems(prev => [...prev, ...newClonedItems]);
|
||||
};
|
||||
|
||||
const updateScope = (id: string, updates: Partial<Scope>) => {
|
||||
setScopes(s => s.id === id, updates);
|
||||
};
|
||||
|
||||
const updateSubScope = (id: string, updates: Partial<SubScope>) => {
|
||||
setSubScopes(ss => ss.id === id, updates);
|
||||
};
|
||||
|
||||
const deleteScope = (id: string) => {
|
||||
setScopes(scopes.filter(s => s.id !== id));
|
||||
// Move items back to unassigned
|
||||
setItems(i => i.scopeId === id, { scopeId: undefined, subScopeId: undefined });
|
||||
// Delete related sub-scopes
|
||||
setSubScopes(subScopes.filter(ss => ss.scopeId !== id));
|
||||
};
|
||||
|
||||
const deleteSubScope = (id: string) => {
|
||||
setSubScopes(subScopes.filter(ss => ss.id !== id));
|
||||
// Move items back to parent scope
|
||||
setItems(i => i.subScopeId === id, { subScopeId: undefined });
|
||||
};
|
||||
|
||||
const getVisualOrderedItems = () => {
|
||||
const ordered: EstimateItem[] = [];
|
||||
|
||||
// 1. Unassigned
|
||||
ordered.push(...items.filter(i => !i.scopeId));
|
||||
|
||||
// 2. Scopes
|
||||
scopes.forEach(scope => {
|
||||
// Scope level items
|
||||
ordered.push(...items.filter(i => i.scopeId === scope.id && !i.subScopeId));
|
||||
|
||||
// Sub-scope items
|
||||
subScopes.filter(ss => ss.scopeId === scope.id).forEach(ss => {
|
||||
ordered.push(...items.filter(i => i.subScopeId === ss.id));
|
||||
});
|
||||
});
|
||||
|
||||
return ordered;
|
||||
};
|
||||
|
||||
const toggleSelection = (id: string, isMulti: boolean, isShift: boolean = false) => {
|
||||
if (isShift && lastSelectedId()) {
|
||||
const orderedItems = getVisualOrderedItems();
|
||||
const lastIdx = orderedItems.findIndex(i => i.id === lastSelectedId());
|
||||
const currentIdx = orderedItems.findIndex(i => i.id === id);
|
||||
|
||||
if (lastIdx !== -1 && currentIdx !== -1) {
|
||||
const start = Math.min(lastIdx, currentIdx);
|
||||
const end = Math.max(lastIdx, currentIdx);
|
||||
const rangeIds = orderedItems.slice(start, end + 1).map(i => i.id);
|
||||
|
||||
setSelectedIds(prev => {
|
||||
const newSet = new Set(prev);
|
||||
rangeIds.forEach(rid => newSet.add(rid));
|
||||
return Array.from(newSet);
|
||||
});
|
||||
}
|
||||
} else if (isMulti) {
|
||||
setSelectedIds(prev => prev.includes(id)
|
||||
? prev.filter(i => i !== id)
|
||||
: [...prev, id]
|
||||
);
|
||||
} else {
|
||||
if (selectedIds().includes(id) && selectedIds().length === 1) {
|
||||
setSelectedIds([]);
|
||||
} else {
|
||||
setSelectedIds([id]);
|
||||
}
|
||||
}
|
||||
setLastSelectedId(id);
|
||||
};
|
||||
|
||||
const clearSelection = (e: MouseEvent) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
setSelectedIds([]);
|
||||
setLastSelectedId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragStart = (e: DragEvent, id: string) => {
|
||||
// If the dragged item isn't selected, make it the only selection
|
||||
if (!selectedIds().includes(id)) {
|
||||
setSelectedIds([id]);
|
||||
}
|
||||
e.dataTransfer!.setData('text/plain', id);
|
||||
e.dataTransfer!.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
const handleDrop = (e: DragEvent, scopeId?: string, subScopeId?: string) => {
|
||||
e.preventDefault();
|
||||
setHoveredScopeId(null);
|
||||
|
||||
const idsToMove = selectedIds();
|
||||
if (idsToMove.length > 0) {
|
||||
idsToMove.forEach(id => {
|
||||
updateItem(id, { scopeId, subScopeId });
|
||||
});
|
||||
// Clear selection after move to avoid confusion
|
||||
setSelectedIds([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkUpdate = (scopeId: string, subScopeId: string | undefined, updates: any) => {
|
||||
setItems(
|
||||
item => item.scopeId === scopeId && (subScopeId === undefined || item.subScopeId === subScopeId),
|
||||
updates
|
||||
);
|
||||
};
|
||||
|
||||
const formatNumber = (num: number) => {
|
||||
return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
};
|
||||
|
||||
const [copyToast, setCopyToast] = createSignal<string | null>(null);
|
||||
|
||||
const selectionTotals = createMemo(() => {
|
||||
const selected = items.filter(i => selectedIds().includes(i.id));
|
||||
let qty = 0, price = 0, sub = 0, mark = 0, cont = 0, tot = 0;
|
||||
|
||||
selected.forEach(item => {
|
||||
const base = item.quantity * item.unitPrice;
|
||||
const markupAmt = item.markupType === 'percent' ? base * (item.markup / 100) : item.markup;
|
||||
const contingencyAmt = item.contingencyType === 'percent' ? base * (item.contingency / 100) : item.contingency;
|
||||
|
||||
qty += item.quantity;
|
||||
price += item.unitPrice;
|
||||
sub += base;
|
||||
mark += markupAmt;
|
||||
cont += contingencyAmt;
|
||||
tot += base + markupAmt + contingencyAmt;
|
||||
});
|
||||
|
||||
return {
|
||||
quantity: Math.round(qty * 100) / 100,
|
||||
unitPrice: Math.round(price * 100) / 100,
|
||||
subtotal: Math.round(sub * 100) / 100,
|
||||
markup: Math.round(mark * 100) / 100,
|
||||
contingency: Math.round(cont * 100) / 100,
|
||||
total: Math.round(tot * 100) / 100
|
||||
};
|
||||
});
|
||||
|
||||
const copyColumnSum = (column: keyof ReturnType<typeof selectionTotals>) => {
|
||||
const val = selectionTotals()[column];
|
||||
navigator.clipboard.writeText(String(val)).then(() => {
|
||||
const labels: Record<string, string> = {
|
||||
quantity: 'Qty', unitPrice: 'Price', subtotal: 'Subtotal',
|
||||
markup: 'Markup', contingency: 'Contingency', total: 'Total'
|
||||
};
|
||||
setCopyToast(`Copied ${labels[column]}: ${val}`);
|
||||
setTimeout(() => setCopyToast(null), 2500);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="w-full flex flex-col min-h-screen bg-white shadow-2xl relative print:shadow-none print:border-none print:rounded-none">
|
||||
{/* Print Summary View */}
|
||||
<PrintEstimate
|
||||
scopes={scopes}
|
||||
items={items}
|
||||
grandTotals={grandTotals}
|
||||
clientInfo={clientInfo}
|
||||
jobInfo={jobInfo}
|
||||
generalEstimateNotes={generalEstimateNotes()}
|
||||
generalPreNotes={generalPreNotes()}
|
||||
formatNumber={formatNumber}
|
||||
hideColumns={anyDescriptionIsLong()}
|
||||
/>
|
||||
|
||||
{/* Main Application UI */}
|
||||
<div class="no-print flex flex-col min-h-dvh">
|
||||
{/* Header Area - Sticky & Slim */}
|
||||
<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={() => setIsSidebarCollapsed(!isSidebarCollapsed())}
|
||||
class="p-2 hover:bg-accent rounded-xl transition-colors text-muted-foreground shrink-0"
|
||||
title={isSidebarCollapsed() ? "Expand Sidebar" : "Collapse Sidebar"}
|
||||
>
|
||||
{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={addScope}
|
||||
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" /> Load Estimate
|
||||
<input type="file" accept=".json" class="hidden" onChange={importEstimate} />
|
||||
</label>
|
||||
<button
|
||||
onClick={exportEstimate}
|
||||
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"
|
||||
>
|
||||
<Download class="w-4 h-4" /> Save Estimate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 relative items-start">
|
||||
{/* Collapsible Sidebar */}
|
||||
<aside
|
||||
class={`h-[calc(100vh-var(--spacing-header))] sticky top-header bg-background border-r border-border flex flex-col transition-all duration-500 ease-in-out relative group/sidebar
|
||||
${isSidebarCollapsed() ? 'w-0 opacity-0 -translate-x-full overflow-hidden' : 'w-72 opacity-100'}`}
|
||||
> <div class="flex-1 overflow-y-auto px-4 py-8">
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center justify-between mb-4 px-2">
|
||||
<span class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">Estimate Navigator</span>
|
||||
<button
|
||||
onClick={addScope}
|
||||
class="p-1.5 bg-muted hover:bg-primary/10 text-muted-foreground hover:text-primary rounded-lg transition-all"
|
||||
>
|
||||
<Plus class="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
{/* Unassigned Sidebar Link */}
|
||||
<div
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setHoveredScopeId('unassigned');
|
||||
}}
|
||||
onDragLeave={() => setHoveredScopeId(null)}
|
||||
onDrop={(e) => handleDrop(e, undefined, undefined)}
|
||||
onClick={() => {
|
||||
const el = document.getElementById('unassigned-section');
|
||||
if (el) {
|
||||
const headerOffset = 180;
|
||||
const elementPosition = el.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}}
|
||||
class={`group flex items-center justify-between px-3 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all cursor-pointer border-2 ${hoveredScopeId() === 'unassigned' ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium-lg shadow-primary/10 text-primary' : (unassignedItems().length > 0 ? 'bg-muted/30 text-foreground border-border/50 hover:bg-muted/50' : 'text-muted-foreground border-transparent hover:bg-accent')}`}
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<ListTree class="w-4 h-4" /> Unassigned
|
||||
</span>
|
||||
<span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors ${hoveredScopeId() === 'unassigned' ? 'bg-primary text-primary-foreground border-primary' : 'bg-background text-primary border-border'}`}>
|
||||
{unassignedItems().length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="h-4"></div>
|
||||
|
||||
{/* Scopes Sidebar Links */}
|
||||
<For each={scopes}>
|
||||
{(scope) => (
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setHoveredScopeId(scope.id);
|
||||
}}
|
||||
onDragLeave={() => setHoveredScopeId(null)}
|
||||
onDrop={(e) => handleDrop(e, scope.id)}
|
||||
class={`group flex items-center justify-between px-4 py-3 rounded-xl text-sm font-bold transition-all cursor-pointer border-2 ${hoveredScopeId() === scope.id ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium-lg shadow-primary/10 text-primary-foreground' : 'text-muted-foreground border-transparent hover:bg-card hover:shadow-premium hover:border-border'}`}
|
||||
onClick={() => {
|
||||
const el = document.getElementById(`scope-${scope.id}`);
|
||||
if (el) {
|
||||
const headerOffset = 180;
|
||||
const elementPosition = el.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span class="truncate pr-2">{scope.name}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors ${hoveredScopeId() === scope.id ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted text-muted-foreground border-border'}`}>
|
||||
{items.filter(i => i.scopeId === scope.id).length}
|
||||
</span>
|
||||
<ChevronRight class={`w-4 h-4 text-muted-foreground/40 group-hover:text-primary transition-colors ${hoveredScopeId() === scope.id ? 'text-primary' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nested Sub-scopes in Sidebar */}
|
||||
<div class="pl-4 space-y-0.5 border-l-2 border-gray-50 ml-6">
|
||||
<For each={subScopes.filter(ss => ss.scopeId === scope.id)}>
|
||||
{(subScope) => (
|
||||
<div
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setHoveredScopeId(subScope.id);
|
||||
}}
|
||||
onDragLeave={() => setHoveredScopeId(null)}
|
||||
onDrop={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDrop(e, scope.id, subScope.id);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const el = document.getElementById(`subscope-${subScope.id}`);
|
||||
if (el) {
|
||||
const headerOffset = 180;
|
||||
const elementPosition = el.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}}
|
||||
class={`flex items-center justify-between px-3 py-1.5 rounded-lg text-[11px] font-black uppercase tracking-wider transition-all cursor-pointer border ${hoveredScopeId() === subScope.id ? 'bg-primary/5 border-primary/30 text-primary scale-[1.02]' : 'text-muted-foreground/60 border-transparent hover:bg-muted hover:text-foreground'}`}
|
||||
>
|
||||
<span class="truncate">{subScope.name}</span>
|
||||
<span class="text-[10px] opacity-60 font-medium">
|
||||
{items.filter(i => i.subScopeId === subScope.id).length}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Sidebar Footer */}
|
||||
<div class="p-4 border-t border-border bg-muted/30">
|
||||
<div class="bg-card rounded-2xl p-4 border border-border shadow-sm">
|
||||
<div class="text-[10px] font-black text-muted-foreground uppercase tracking-widest mb-1">Current Total</div>
|
||||
<div class="text-xl font-black text-foreground">${formatNumber(grandTotals().grandTotal)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main
|
||||
onClick={clearSelection}
|
||||
class="flex-1 p-8 bg-zinc-50/50 space-y-8 min-h-screen"
|
||||
>
|
||||
{/* Client & Project Details Form (No Print) */}
|
||||
<div class="bg-card border border-border rounded-[2.5rem] p-8 shadow-premium transition-all">
|
||||
<div class="flex items-center gap-3 text-foreground mb-8">
|
||||
<div class="p-2.5 bg-primary/10 text-primary rounded-2xl shadow-sm">
|
||||
<FolderKanban class="w-5 h-5" />
|
||||
</div>
|
||||
<h3 class="font-black text-xl tracking-tight">Client & Project Details</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em] px-1 blur-[0.2px]">Client Information</h4>
|
||||
<div class="grid gap-3">
|
||||
<input type="text" value={clientInfo.name} onInput={(e) => setClientInfo('name', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Client Name" />
|
||||
<input type="text" value={clientInfo.address} onInput={(e) => setClientInfo('address', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Client Address" />
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<input type="text" value={clientInfo.phone} onInput={(e) => setClientInfo('phone', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Phone" />
|
||||
<input type="text" value={clientInfo.fax} onInput={(e) => setClientInfo('fax', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Fax" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em] px-1 blur-[0.2px]">Project Information</h4>
|
||||
<div class="grid gap-3">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<input type="text" value={jobInfo.number} onInput={(e) => setJobInfo('number', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Job Number" />
|
||||
<input type="text" value={jobInfo.name} onInput={(e) => setJobInfo('name', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Job Name" />
|
||||
</div>
|
||||
<input type="text" value={jobInfo.workOrder} onInput={(e) => setJobInfo('workOrder', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Work Order Number" />
|
||||
<input type="text" value={jobInfo.address} onInput={(e) => setJobInfo('address', e.currentTarget.value)} class="bg-muted/20 border border-border/60 p-3 rounded-2xl text-sm outline-none focus:bg-background focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium" placeholder="Job Site Address" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* General Pre-Notes Section */}
|
||||
<div class="bg-muted/30 border border-border rounded-3xl p-6 mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3 text-foreground">
|
||||
<div class="p-2 bg-background rounded-xl shadow-sm">
|
||||
<FileText class="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-black text-lg">General Pre-Notes</h3>
|
||||
<p class="text-muted-foreground text-[10px] font-bold uppercase tracking-wider">Project-wide preamble & terms</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsPreNotesExpanded(!isPreNotesExpanded())}
|
||||
class="p-2 hover:bg-background rounded-xl transition-all text-muted-foreground"
|
||||
>
|
||||
<ChevronDown class={`w-5 h-5 transition-transform ${isPreNotesExpanded() ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Show when={isPreNotesExpanded()}>
|
||||
<div class="p-6 pt-0">
|
||||
<NoteEditor
|
||||
label="Pre-Scope Terms"
|
||||
value={generalPreNotes()}
|
||||
onUpdate={setGeneralPreNotes}
|
||||
icon={FileText}
|
||||
highlight={generalPreNotes().includes('#')}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Unassigned Items Section */}
|
||||
<Show when={unassignedItems().length > 0}>
|
||||
<div
|
||||
id="unassigned-section"
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => handleDrop(e, undefined, undefined)}
|
||||
onClick={clearSelection}
|
||||
class="bg-muted/10 border-2 border-dashed border-border rounded-3xl p-6 transition-all hover:bg-muted/20"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-3 text-foreground">
|
||||
<div class="p-2 bg-primary/10 rounded-xl text-primary shadow-sm">
|
||||
<ListTree class="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-black text-lg tracking-tight">Unassigned Takeoff Items</h3>
|
||||
<p class="text-muted-foreground text-sm">Drag these items into scopes to begin your estimate.</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-4 py-1.5 bg-card border border-border text-primary rounded-full text-[10px] font-black uppercase tracking-widest shadow-sm">
|
||||
{unassignedItems().length} Items Pending
|
||||
</span>
|
||||
</div>
|
||||
{/* Sticky Column Headers for Unassigned */}
|
||||
<div class="sticky top-header z-10 bg-background/95 backdrop-blur-sm border-b border-border py-3 mb-4 hidden md:flex items-center gap-4 text-[10px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] px-3">
|
||||
<div class="w-4"></div>
|
||||
<div class="flex-1">Description</div>
|
||||
<div class="w-20 text-right">Qty</div>
|
||||
<div class="w-24 text-right">Unit Price</div>
|
||||
<div class="w-24 text-right">Subtotal</div>
|
||||
<Show when={isSidebarCollapsed() || !anyDescriptionIsLong()}>
|
||||
<div class="w-32 text-center">Markup</div>
|
||||
<div class="w-32 text-center">Contingency</div>
|
||||
</Show>
|
||||
<div class="w-28 text-right px-2">Total</div>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<For each={unassignedItems()}>
|
||||
{(item) => (
|
||||
<LazyItem estimatedHeight={60}>
|
||||
<ItemRow
|
||||
item={item}
|
||||
onUpdate={updateItem}
|
||||
onDelete={deleteItem}
|
||||
onDragStart={handleDragStart}
|
||||
onDuplicateItem={duplicateItem}
|
||||
isSidebarCollapsed={isSidebarCollapsed}
|
||||
isSelected={selectedIds().includes(item.id)}
|
||||
anySelected={selectedIds().length > 0}
|
||||
onToggleSelection={(id, isMulti, isShift) => toggleSelection(id, isMulti, isShift)}
|
||||
hideColumns={anyDescriptionIsLong()}
|
||||
/>
|
||||
</LazyItem>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Scopes Content */}
|
||||
<div class="space-y-12">
|
||||
<For each={scopes}>
|
||||
{(scope) => (
|
||||
<div id={`scope-${scope.id}`}>
|
||||
<ScopeCard
|
||||
scope={scope}
|
||||
subScopes={subScopes.filter(ss => ss.scopeId === scope.id)}
|
||||
items={items.filter(i => i.scopeId === scope.id)}
|
||||
onUpdateScope={updateScope}
|
||||
onDeleteScope={deleteScope}
|
||||
onUpdateItem={updateItem}
|
||||
onDeleteItem={deleteItem}
|
||||
onAddSubScope={addSubScope}
|
||||
onUpdateSubScope={updateSubScope}
|
||||
onDeleteSubScope={deleteSubScope}
|
||||
onDragStart={handleDragStart}
|
||||
onDrop={handleDrop}
|
||||
onBulkUpdate={handleBulkUpdate}
|
||||
onDuplicateItem={duplicateItem}
|
||||
allScopes={scopes}
|
||||
allSubScopes={subScopes}
|
||||
onCopySubScopeItems={copySubScopeItems}
|
||||
isSidebarCollapsed={isSidebarCollapsed}
|
||||
selectedIds={selectedIds()}
|
||||
onToggleSelection={toggleSelection}
|
||||
onClearSelection={() => setSelectedIds([])}
|
||||
hideColumns={anyDescriptionIsLong()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<Show when={scopes.length > 0}>
|
||||
<div class="mt-8 bg-card border border-border rounded-3xl overflow-hidden shadow-premium transition-all duration-300">
|
||||
<button
|
||||
onClick={() => setIsNotesExpanded(!isNotesExpanded())}
|
||||
class="w-full flex items-center justify-between p-6 hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<div class="flex items-center gap-3 text-foreground">
|
||||
<div class="p-2 bg-muted rounded-xl shadow-sm">
|
||||
<FileText class="w-5 h-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<h3 class="font-black text-lg">General Estimate Notes</h3>
|
||||
<p class="text-muted-foreground text-xs font-bold uppercase tracking-wider">Configure standard project terms and exclusions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class={`transition-transform duration-300 ${isNotesExpanded() ? 'rotate-180' : ''}`}>
|
||||
<ChevronDown class="w-5 h-5 text-muted-foreground" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class={`transition-all duration-300 ease-in-out ${isNotesExpanded() ? 'max-h-[2000px] border-t border-gray-50' : 'max-h-0'}`}>
|
||||
<div class="p-6 pt-2">
|
||||
<NoteEditor
|
||||
label="Inclusions, Exclusions & Terms"
|
||||
value={generalEstimateNotes()}
|
||||
onUpdate={setGeneralEstimateNotes}
|
||||
icon={FileText}
|
||||
placeholder="Add project-wide notes here..."
|
||||
highlight={generalEstimateNotes().includes('#')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={scopes.length === 0}>
|
||||
<div class="flex flex-col items-center justify-center py-20 text-center space-y-6">
|
||||
<div class="p-8 bg-muted rounded-full text-muted-foreground/30 shadow-inner">
|
||||
<FolderKanban class="w-16 h-16" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-2xl font-black text-foreground tracking-tight">No Scopes Defined</h3>
|
||||
<p class="text-muted-foreground max-w-sm mx-auto font-medium">Click "New Scope" in the header to start building your estimate structure.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={addScope}
|
||||
class="flex items-center gap-2 px-8 py-4 bg-primary text-primary-foreground rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-primary/90 transition-all shadow-xl shadow-primary/20 active:scale-95"
|
||||
>
|
||||
<Plus class="w-5 h-5" /> Start First Scope
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Note Validation Status Bar */}
|
||||
<div class={`mt-12 p-5 rounded-3xl border shadow-premium transition-all duration-500 flex items-center justify-between ${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 ${validationStats().hasIncomplete ? 'bg-destructive/20' : 'bg-primary/20'}`}>
|
||||
{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">
|
||||
{validationStats().hasIncomplete
|
||||
? `Attention Required: ${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`}>
|
||||
{validationStats().hasIncomplete
|
||||
? "Please replace all '#' markers with final project data before finalizing."
|
||||
: "Everything looks good to go!"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={!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>
|
||||
|
||||
{/* Light-Themed Bottom Executive Summary */}
|
||||
<div class="mt-20 p-10 bg-muted/30 rounded-[3rem] border border-border shadow-inner">
|
||||
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 items-center lg:items-end justify-between">
|
||||
<div class="flex-1 w-full space-y-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="px-4 py-1.5 bg-primary/10 text-primary rounded-full text-[10px] font-black uppercase tracking-[0.2em] border border-primary/20 shadow-sm">
|
||||
Executive Summary
|
||||
</div>
|
||||
<div class="flex-1 h-px bg-border/60"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-card p-6 rounded-3xl border border-border shadow-premium space-y-2 flex flex-col justify-center min-w-0 transition-transform hover:-translate-y-1">
|
||||
<span class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest truncate">Project Subtotal</span>
|
||||
<div class="text-2xl xl:text-3xl font-black text-foreground tracking-tight truncate">${formatNumber(grandTotals().subtotal)}</div>
|
||||
</div>
|
||||
<div class="bg-card p-6 rounded-3xl border border-border shadow-premium space-y-2 flex flex-col justify-center min-w-0 transition-transform hover:-translate-y-1">
|
||||
<span class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest truncate">Total Markup</span>
|
||||
<div class="text-2xl xl:text-3xl font-black text-primary tracking-tight truncate">${formatNumber(grandTotals().markup)}</div>
|
||||
</div>
|
||||
<div class="bg-card p-6 rounded-3xl border border-border shadow-premium space-y-2 flex flex-col justify-center min-w-0 transition-transform hover:-translate-y-1">
|
||||
<span class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest truncate">Contingency</span>
|
||||
<div class="text-2xl xl:text-3xl font-black text-foreground tracking-tight truncate">${formatNumber(grandTotals().contingency)}</div>
|
||||
</div>
|
||||
<div class="bg-card p-6 rounded-3xl border border-border shadow-premium space-y-2 flex flex-col justify-center min-w-0 transition-transform hover:-translate-y-1">
|
||||
<span class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest truncate">Fees & Logistics</span>
|
||||
<div class="text-2xl xl:text-3xl font-black text-foreground tracking-tight truncate">${formatNumber(grandTotals().fees)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4 px-6 py-4 bg-primary/5 rounded-2xl border border-primary/10 shadow-sm">
|
||||
<Info class="w-5 h-5 text-primary/60 shrink-0 mt-0.5" />
|
||||
<p class="text-xs font-medium text-primary/70 leading-relaxed">
|
||||
Comprehensive project total including all active scopes, sub-scopes, and unassigned takeoff items.
|
||||
Pricing is calculated dynamically based on current material/labor allocations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 text-center lg:text-right group bg-card p-10 rounded-[3rem] border border-primary/10 shadow-elevated min-w-[340px] lg:min-w-[380px] max-w-full transition-all hover:shadow-2xl">
|
||||
<div class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.4em] mb-3 group-hover:text-primary transition-colors">Total Estimate Value</div>
|
||||
<div class="text-5xl sm:text-6xl xl:text-7xl font-black text-foreground tracking-tighter transition-all group-hover:scale-[1.02] duration-500 break-words drop-shadow-sm">
|
||||
<span class="text-2xl sm:text-3xl text-primary font-medium align-top mr-1">$</span>
|
||||
{formatNumber(grandTotals().grandTotal)}
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<button
|
||||
onClick={finalizeBid}
|
||||
class="w-full py-5 bg-primary hover:bg-primary/90 text-primary-foreground rounded-2xl font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-primary/20 active:scale-[0.98] flex items-center justify-center gap-3"
|
||||
>
|
||||
<Plus class="w-5 h-5" /> Finalize Bid
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{/* Floating Calculator */}
|
||||
<CalculatorPopover />
|
||||
</div>
|
||||
|
||||
{/* Floating Selection Toolbar - Portal used to ensure it anchors to viewport */}
|
||||
<Show when={selectedIds().length >= 2}>
|
||||
<Portal>
|
||||
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] flex items-center gap-3 bg-card/95 backdrop-blur-md text-foreground px-5 py-4 rounded-[2rem] shadow-elevated border border-border animate-in fade-in slide-in-from-bottom-6 duration-500">
|
||||
<div class="flex flex-col items-center justify-center pr-2 border-r border-border">
|
||||
<span class="text-[10px] font-black uppercase tracking-widest text-primary mb-0.5">
|
||||
{selectedIds().length}
|
||||
</span>
|
||||
<span class="text-[8px] font-black uppercase tracking-tighter text-muted-foreground">Selected</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<For each={[
|
||||
{ key: 'quantity', label: 'Qty' },
|
||||
{ key: 'unitPrice', label: 'Price' },
|
||||
{ key: 'subtotal', label: 'Sub' },
|
||||
{ key: 'markup', label: 'Mark' },
|
||||
{ key: 'contingency', label: 'Cont' },
|
||||
{ key: 'total', label: 'Total' },
|
||||
] as const}>
|
||||
{(item) => (
|
||||
<button
|
||||
onClick={() => copyColumnSum(item.key)}
|
||||
class="flex flex-col items-center gap-0 px-4 py-2 rounded-2xl bg-muted/40 hover:bg-primary hover:text-primary-foreground text-foreground transition-all border border-border/40 hover:border-primary hover:-translate-y-1 group relative active:scale-95"
|
||||
>
|
||||
<span class="text-[8px] font-black uppercase tracking-tighter text-muted-foreground group-hover:text-primary-foreground/60 transition-colors">{item.label}</span>
|
||||
<span class="text-xs font-black mt-[-1px] tracking-tight">
|
||||
{item.key === 'quantity' ? selectionTotals()[item.key] : `$${formatNumber(selectionTotals()[item.key])}`}
|
||||
</span>
|
||||
{/* Simple hover tooltip hint */}
|
||||
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-foreground text-background text-[8px] font-black px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none uppercase tracking-widest">
|
||||
Copy
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-border mx-1" />
|
||||
<button
|
||||
onClick={() => { setSelectedIds([]); setLastSelectedId(null); }}
|
||||
class="p-3 rounded-2xl hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-all active:scale-90"
|
||||
title="Clear selection"
|
||||
>
|
||||
<X class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
|
||||
{/* Copy Toast */}
|
||||
<Show when={copyToast() !== null}>
|
||||
<Portal>
|
||||
<div class="fixed bottom-24 left-1/2 -translate-x-1/2 z-[101] bg-gray-900/90 backdrop-blur-md text-white text-[11px] font-black uppercase tracking-widest px-6 py-3 rounded-2xl shadow-2xl animate-in fade-in slide-in-from-bottom-2 border border-gray-700">
|
||||
✓ {copyToast()}
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EstimateBuilder;
|
||||
Reference in New Issue
Block a user