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

Compare commits

base: Cardoza_Construction/EstiMaker:989baa9be749fabdc10e97e37e6a95501c718738
Branches Tags
Cardoza_Construction/EstiMaker:main
...
compare: Cardoza_Construction/EstiMaker:f4ad67e097b9b53b4cb7140e69eaafc2f84ffde0
Branches Tags
Cardoza_Construction/EstiMaker:main

5 Commits
989baa9be7 ... f4ad67e097

Author SHA1 Message Date
tcardoza f4ad67e097 sidebar improvements 2026-03-13 19:01:56 -05:00
tcardoza 6a1af4b723 Layout fixed 2026-03-13 18:53:59 -05:00
tcardoza b52564d44d mid layout change 2026-03-13 18:41:44 -05:00
tcardoza c72da2fad5 mostly fixed layouts 2026-03-13 18:31:21 -05:00
tcardoza dfc4cccb56 Layout Fixes 2026-03-13 16:49:17 -05:00
10 changed files with 737 additions and 493 deletions
Expand all files Collapse all files
src/components/EstimateBuilder.tsx
+12 -3
View File
@@ -208,9 +208,18 @@ const EstimateBuilder: Component<EstimateBuilderProps> = (props) => {
onSaveChanges={() => appStore.isLatestVersion() ? saveChangesToCloud() : saveAsNewestToCloud()} onSaveChanges={() => appStore.isLatestVersion() ? saveChangesToCloud() : saveAsNewestToCloud()}
/> />
<div class="flex flex-1 relative items-start"> <div
<BuilderSidebar style={{
display: 'grid',
'grid-template-columns': isSidebarCollapsed() ? '0px 1fr' : '18rem 1fr',
transition: 'grid-template-columns 500ms ease',
'align-items': 'start',
flex: '1',
}}
>
<BuilderSidebar
isCollapsed={isSidebarCollapsed()} isCollapsed={isSidebarCollapsed()}
onToggleSidebar={() => setIsSidebarCollapsed(!isSidebarCollapsed())}
unassignedItems={unassignedItems()} unassignedItems={unassignedItems()}
grandTotals={grandTotals()} grandTotals={grandTotals()}
hoveredScopeId={hoveredScopeId()} hoveredScopeId={hoveredScopeId()}
@@ -219,7 +228,7 @@ const EstimateBuilder: Component<EstimateBuilderProps> = (props) => {
onAddScope={addScope} onAddScope={addScope}
/> />
<main onClick={clearSelection} class="flex-1 min-w-0 p-4 md:p-8 bg-zinc-50/50 space-y-8 min-h-screen"> <main onClick={clearSelection} class="min-w-0 p-4 md:p-8 bg-zinc-50/50 space-y-8 min-h-screen">
<ProjectDetailsForm /> <ProjectDetailsForm />
<div class="bg-muted/30 border border-border rounded-3xl p-6 mb-8"> <div class="bg-muted/30 border border-border rounded-3xl p-6 mb-8">
src/components/ItemRow.tsx
+240 -182
View File
@@ -54,89 +54,88 @@ const ItemRow: Component<ItemRowProps> = (props) => {
return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}; };
/* ─────────────────────────────────────────────
MOBILE layout (<md): stacked card
DESKTOP layout (≥md): flat flex row, columns
match header widths exactly:
w-4 | flex-1 min-w-[200px] | w-20 | w-24 |
w-24 | w-32 | w-32 | w-28 | w-16
──────────────────────────────────────────── */
return ( return (
<div <div
class={`group flex items-start gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2 class={`group transition-all animate-in fade-in slide-in-from-left-2 w-full border
${props.isSelected ${props.isSelected
? 'bg-primary/5 border-primary shadow-premium z-10' ? 'bg-primary/5 border-primary shadow-premium z-10'
: 'bg-card border-border hover:shadow-premium-hover hover:border-border/80' : 'bg-card border-border hover:shadow-premium-hover hover:border-border/80'
} }
${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : 'rounded-2xl'} ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30 rounded-2xl' : 'rounded-2xl'}
`} `}
> >
<div {/* ── DESKTOP ROW ── */}
draggable={!isEditing() || props.anySelected} <div class="hidden md:flex items-center gap-4 px-3 py-2">
onDragStart={(e) => props.onDragStart(e, props.item.id)}
onClick={(e) => {
e.stopPropagation();
props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
}}
class={`cursor-grab transition-colors shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
title="Drag to move or click to select"
>
<GripVertical class="w-4 h-4" />
</div>
<div class="flex-1 relative min-w-[200px]"> {/* Grip / Select — w-4 */}
<div
<textarea draggable={!isEditing() || props.anySelected}
ref={descriptionRef} onDragStart={(e) => props.onDragStart(e, props.item.id)}
value={localDescription()} onClick={(e) => {
onFocus={() => {
if (!props.anySelected) setIsEditing(true);
}}
onBlur={handleBlur}
onInput={(e) => {
setLocalDescription(e.currentTarget.value);
// Fallback auto-resize for browsers without field-sizing support
if (!('fieldSizing' in document.documentElement.style)) {
e.currentTarget.style.height = 'auto';
e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
}
}}
disabled={props.anySelected}
rows="1"
class={`w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90
${props.anySelected ? 'cursor-default pointer-events-none' : ''}
`}
style={{
"field-sizing": "content",
"min-height": "1.5em"
}}
placeholder="Item description..."
/>
</div>
<div class="w-20 shrink-0 mt-1">
<NumericInput
dataFieldName="qty"
value={props.item.quantity}
onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
onDragStart={(e) => {
const val = props.item.quantity;
const data = {
type: 'item-field',
itemId: props.item.id,
fieldName: 'qty',
value: val,
label: `${props.item.description || 'Unnamed Item'}: Qty`
};
e.dataTransfer!.setData('application/json', JSON.stringify(data));
e.dataTransfer!.setData('text/plain', String(val));
e.dataTransfer!.effectAllowed = 'copy';
e.stopPropagation(); e.stopPropagation();
props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
}} }}
draggable="true" class={`cursor-grab shrink-0 w-4 p-1 rounded hover:bg-muted transition-colors ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
disabled={props.anySelected} title="Drag to move or click to select"
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 cursor-text font-bold text-foreground/80 transition-all" >
placeholder="Qty" <GripVertical class="w-4 h-4" />
/> </div>
</div>
<div class="w-24 shrink-0 mt-1"> {/* Description — flex-1 min-w-[200px] */}
<div class="relative"> <div class="flex-1 min-w-[200px] relative">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span> <textarea
ref={descriptionRef}
value={localDescription()}
onFocus={() => { if (!props.anySelected) setIsEditing(true); }}
onBlur={handleBlur}
onInput={(e) => {
setLocalDescription(e.currentTarget.value);
if (!('fieldSizing' in document.documentElement.style)) {
e.currentTarget.style.height = 'auto';
e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
}
}}
disabled={props.anySelected}
rows="1"
class={`w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-sm font-medium text-foreground/90
${props.anySelected ? 'cursor-default pointer-events-none' : ''}
`}
style={{ "field-sizing": "content", "min-height": "1.5em" }}
placeholder="Item description..."
/>
</div>
{/* Qty — w-20 */}
<div class="w-20 shrink-0">
<NumericInput
dataFieldName="qty"
value={props.item.quantity}
onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
onDragStart={(e) => {
const val = props.item.quantity;
const data = { type: 'item-field', itemId: props.item.id, fieldName: 'qty', value: val, label: `${props.item.description || 'Unnamed Item'}: Qty` };
e.dataTransfer!.setData('application/json', JSON.stringify(data));
e.dataTransfer!.setData('text/plain', String(val));
e.dataTransfer!.effectAllowed = 'copy';
e.stopPropagation();
}}
draggable="true"
disabled={props.anySelected}
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 cursor-text font-bold text-foreground/80 transition-all"
placeholder="Qty"
/>
</div>
{/* Price — w-24 */}
<div class="w-24 shrink-0 relative">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px] pointer-events-none">$</span>
<NumericInput <NumericInput
dataFieldName="price" dataFieldName="price"
step="0.1" step="0.1"
@@ -144,13 +143,7 @@ const ItemRow: Component<ItemRowProps> = (props) => {
onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })} onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
onDragStart={(e) => { onDragStart={(e) => {
const val = props.item.unitPrice; const val = props.item.unitPrice;
const data = { const data = { type: 'item-field', itemId: props.item.id, fieldName: 'price', value: val, label: `${props.item.description || 'Unnamed Item'}: Price` };
type: 'item-field',
itemId: props.item.id,
fieldName: 'price',
value: val,
label: `${props.item.description || 'Unnamed Item'}: Price`
};
e.dataTransfer!.setData('application/json', JSON.stringify(data)); e.dataTransfer!.setData('application/json', JSON.stringify(data));
e.dataTransfer!.setData('text/plain', String(val)); e.dataTransfer!.setData('text/plain', String(val));
e.dataTransfer!.effectAllowed = 'copy'; e.dataTransfer!.effectAllowed = 'copy';
@@ -162,120 +155,185 @@ const ItemRow: Component<ItemRowProps> = (props) => {
placeholder="Price" placeholder="Price"
/> />
</div> </div>
</div>
<div {/* Subtotal — w-24 */}
draggable="true" <div
onDragStart={(e) => { draggable="true"
const val = baseTotal(); onDragStart={(e) => {
const data = { const val = baseTotal();
type: 'item-field', const data = { type: 'item-field', itemId: props.item.id, fieldName: 'subtotal', value: val, label: `${props.item.description || 'Unnamed Item'}: Subtotal` };
itemId: props.item.id, e.dataTransfer!.setData('application/json', JSON.stringify(data));
fieldName: 'subtotal', e.dataTransfer!.setData('text/plain', String(val));
value: val, e.dataTransfer!.effectAllowed = 'copy';
label: `${props.item.description || 'Unnamed Item'}: Subtotal` e.stopPropagation();
}; }}
e.dataTransfer!.setData('application/json', JSON.stringify(data)); class="w-24 shrink-0 text-right text-muted-foreground/60 text-[11px] font-bold uppercase tracking-tighter cursor-grab hover:text-primary transition-colors"
e.dataTransfer!.setData('text/plain', String(val)); >
e.dataTransfer!.effectAllowed = 'copy'; ${formatNumber(baseTotal())}
e.stopPropagation();
}}
class={`w-24 shrink-0 text-right text-muted-foreground/60 text-[11px] mt-2 font-bold uppercase tracking-tighter cursor-grab hover:text-primary transition-colors`}
>
${formatNumber(baseTotal())}
</div>
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
<div class="w-32 shrink-0 flex items-center gap-1.5 mt-1">
<NumericInput
dataFieldName="markup"
value={props.item.markup}
onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
disabled={props.anySelected}
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all"
placeholder="Markup"
/>
<button
onClick={(e) => {
e.stopPropagation();
props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' });
}}
disabled={props.anySelected}
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
>
{props.item.markupType === 'percent' ? '%' : '$'}
</button>
</div> </div>
<div class="w-32 shrink-0 flex items-center gap-1.5 mt-1"> {/* Markup — w-32 (conditional) */}
<NumericInput <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
dataFieldName="contingency" <div class="w-32 shrink-0">
value={props.item.contingency} <div class="flex items-center gap-1.5">
onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })} <NumericInput
disabled={props.anySelected} dataFieldName="markup"
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" value={props.item.markup}
placeholder="Contingency" onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
/> disabled={props.anySelected}
class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all"
placeholder="Markup"
/>
<button
onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' }); }}
disabled={props.anySelected}
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
>
{props.item.markupType === 'percent' ? '%' : '$'}
</button>
</div>
</div>
{/* Contingency — w-32 */}
<div class="w-32 shrink-0">
<div class="flex items-center gap-1.5">
<NumericInput
dataFieldName="contingency"
value={props.item.contingency}
onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
disabled={props.anySelected}
class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all"
placeholder="Contingency"
/>
<button
onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' }); }}
disabled={props.anySelected}
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
>
{props.item.contingencyType === 'percent' ? '%' : '$'}
</button>
</div>
</div>
</Show>
{/* Total — w-28 */}
<div
draggable="true"
onDragStart={(e) => {
const val = total();
const data = { type: 'item-field', itemId: props.item.id, fieldName: 'total', value: val, label: `${props.item.description || 'Unnamed Item'}: Total` };
e.dataTransfer!.setData('application/json', JSON.stringify(data));
e.dataTransfer!.setData('text/plain', String(val));
e.dataTransfer!.effectAllowed = 'copy';
e.stopPropagation();
}}
class={`w-28 shrink-0 text-right font-black text-sm cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
>
${formatNumber(total())}
</div>
{/* Actions — w-16 */}
<div class="w-16 shrink-0 flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
<button <button
onClick={(e) => { onClick={(e) => { e.stopPropagation(); props.onDuplicateItem(props.item.id); }}
e.stopPropagation(); class="text-muted-foreground/40 hover:text-primary transition-colors"
props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' }); title="Duplicate Item"
}}
disabled={props.anySelected}
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
> >
{props.item.contingencyType === 'percent' ? '%' : '$'} <div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-primary/10">
<Copy class="w-3 h-3" />
</div>
</button>
<button
onClick={(e) => { e.stopPropagation(); props.onDelete(props.item.id); }}
class="text-muted-foreground/40 hover:text-destructive transition-colors"
title="Delete Item"
>
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10">
<Trash2 class="w-3 h-3" />
</div>
</button> </button>
</div> </div>
</Show>
<div
draggable="true"
onDragStart={(e) => {
const val = total();
const data = {
type: 'item-field',
itemId: props.item.id,
fieldName: 'total',
value: val,
label: `${props.item.description || 'Unnamed Item'}: Total`
};
e.dataTransfer!.setData('application/json', JSON.stringify(data));
e.dataTransfer!.setData('text/plain', String(val));
e.dataTransfer!.effectAllowed = 'copy';
e.stopPropagation();
}}
class={`w-28 shrink-0 text-right font-black text-sm mt-2 cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
>
${formatNumber(total())}
</div> </div>
<div class="w-16 shrink-0 flex items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity"> {/* ── MOBILE LAYOUT ── (stacked card, shown below md) */}
<button <div class="md:hidden flex flex-col gap-3 p-3">
onClick={(e) => { <div class="flex items-start gap-3">
e.stopPropagation(); {/* Grip */}
props.onDuplicateItem(props.item.id); <div
}} draggable={!isEditing() || props.anySelected}
class="text-muted-foreground/40 hover:text-primary transition-colors" onDragStart={(e) => props.onDragStart(e, props.item.id)}
title="Duplicate Item" onClick={(e) => {
> e.stopPropagation();
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-primary/10"> props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
<Copy class="w-3 h-3" /> }}
class={`cursor-grab shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted transition-colors ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
>
<GripVertical class="w-4 h-4" />
</div> </div>
</button> {/* Description */}
<div class="flex-1 relative">
<button <textarea
onClick={(e) => { value={localDescription()}
e.stopPropagation(); onFocus={() => { if (!props.anySelected) setIsEditing(true); }}
props.onDelete(props.item.id); onBlur={handleBlur}
}} onInput={(e) => {
class="text-muted-foreground/40 hover:text-destructive transition-colors" setLocalDescription(e.currentTarget.value);
title="Delete Item" if (!('fieldSizing' in document.documentElement.style)) {
> e.currentTarget.style.height = 'auto';
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10"> e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
<Trash2 class="w-3 h-3" /> }
}}
disabled={props.anySelected}
rows="1"
class="w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90"
style={{ "field-sizing": "content", "min-height": "1.5em" }}
placeholder="Item description..."
/>
</div> </div>
</button> {/* Mobile actions */}
<div class="flex items-center gap-1.5 mt-1">
<button onClick={(e) => { e.stopPropagation(); props.onDuplicateItem(props.item.id); }} class="text-muted-foreground/40 hover:text-primary transition-colors">
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-primary/10"><Copy class="w-3 h-3" /></div>
</button>
<button onClick={(e) => { e.stopPropagation(); props.onDelete(props.item.id); }} class="text-muted-foreground/40 hover:text-destructive transition-colors">
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10"><Trash2 class="w-3 h-3" /></div>
</button>
</div>
</div>
{/* Numeric fields — wrapping grid on mobile */}
<div class="flex flex-wrap gap-3 pl-7">
<div class="w-20">
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Qty</div>
<NumericInput value={props.item.quantity} onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })} disabled={props.anySelected} class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Qty" />
</div>
<div class="w-24">
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Price</div>
<div class="relative">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span>
<NumericInput step="0.1" value={props.item.unitPrice} onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })} disabled={props.anySelected} class="w-full bg-muted/30 border border-border/60 rounded-xl pl-5 pr-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Price" />
</div>
</div>
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
<div class="w-32">
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Markup</div>
<div class="flex items-center gap-1.5">
<NumericInput value={props.item.markup} onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })} disabled={props.anySelected} class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all" placeholder="Markup" />
<button onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' }); }} disabled={props.anySelected} class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40">{props.item.markupType === 'percent' ? '%' : '$'}</button>
</div>
</div>
<div class="w-32">
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Contingency</div>
<div class="flex items-center gap-1.5">
<NumericInput value={props.item.contingency} onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })} disabled={props.anySelected} class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Contingency" />
<button onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' }); }} disabled={props.anySelected} class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40">{props.item.contingencyType === 'percent' ? '%' : '$'}</button>
</div>
</div>
</Show>
<div class="w-28">
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Total</div>
<div class={`font-black text-sm text-right ${props.isSelected ? 'text-primary' : 'text-foreground'}`}>${formatNumber(total())}</div>
</div>
</div>
</div> </div>
</div> </div>
); );
src/components/ScopeCard.tsx
+50 -47
View File
@@ -7,6 +7,7 @@ import ItemRow from './ItemRow';
import SubScopeCard from './SubScopeCard'; import SubScopeCard from './SubScopeCard';
import NoteEditor from './NoteEditor'; import NoteEditor from './NoteEditor';
import LazyItem from './LazyItem'; import LazyItem from './LazyItem';
import ScopeScaleWrapper from './ui/ScopeScaleWrapper';
interface ScopeCardProps { interface ScopeCardProps {
scope: Scope; scope: Scope;
@@ -200,59 +201,59 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
</div> </div>
</Show> </Show>
<div <ScopeScaleWrapper>
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }} {/* Sticky Column Headers */}
class="p-6 space-y-4 relative" <div class="scope-sticky-header py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3">
> <div class="w-4 shrink-0"></div> {/* Grip space */}
<Show when={scopeItems().length > 0}> <div class="flex-1 min-w-[200px]">Description</div>
<div class="relative pb-4"> <div class="w-20 shrink-0 text-right">Qty</div>
{/* Column Headers - Sticky, Square Top */} <div class="w-24 shrink-0 text-right">Price</div>
<div class="sticky top-header z-20 bg-background/95 backdrop-blur-sm border-b border-border py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3 rounded-none"> <div class="w-24 shrink-0 text-right">Subtotal</div>
<div class="w-4 shrink-0"></div> {/* Grip space */} <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
<div class="flex-1 min-w-[200px]">Description</div> <div class="w-32 shrink-0 text-center">Markup</div>
<div class="w-20 shrink-0 text-right">Qty</div> <div class="w-32 shrink-0 text-center">Contingency</div>
<div class="w-24 shrink-0 text-right">Price</div> </Show>
<div class="w-24 shrink-0 text-right">Subtotal</div> <div class="w-28 shrink-0 text-right">Total</div>
<Show when={props.isSidebarCollapsed() || !props.hideColumns}> <div class="w-16 shrink-0"></div> {/* Action space */}
<div class="w-32 shrink-0 text-center">Markup</div> </div>
<div class="w-32 shrink-0 text-center">Contingency</div>
</Show>
<div class="w-28 shrink-0 text-right">Total</div>
<div class="w-16 shrink-0"></div> {/* Action space */}
</div>
{/* Scope-level items */}
<div
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
class="px-3 pb-3 space-y-2"
>
<Show when={scopeItems().length > 0}>
<div class="grid gap-2"> <div class="grid gap-2">
{/* Scope Level Items */}
<For each={props.items.filter(i => !i.subScopeId)}> <For each={props.items.filter(i => !i.subScopeId)}>
{(item) => ( {(item) => (
<LazyItem estimatedHeight={60}> <LazyItem estimatedHeight={60}>
<ItemRow <ItemRow
item={item} item={item}
onUpdate={props.onUpdateItem} onUpdate={props.onUpdateItem}
onDelete={props.onDeleteItem} onDelete={props.onDeleteItem}
onDragStart={props.onDragStart} onDragStart={props.onDragStart}
onDuplicateItem={props.onDuplicateItem} onDuplicateItem={props.onDuplicateItem}
isSidebarCollapsed={props.isSidebarCollapsed} isSidebarCollapsed={props.isSidebarCollapsed}
isSelected={props.selectedIds.includes(item.id)} isSelected={props.selectedIds.includes(item.id)}
anySelected={props.selectedIds.length > 0} anySelected={props.selectedIds.length > 0}
onToggleSelection={props.onToggleSelection} onToggleSelection={props.onToggleSelection}
hideColumns={props.hideColumns} hideColumns={props.hideColumns}
/> />
</LazyItem> </LazyItem>
)} )}
</For> </For>
</div> </div>
</div> </Show>
</Show>
<Show when={scopeItems().length === 0 && props.subScopes.length === 0}> <Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
<div class="text-center py-8 text-muted-foreground/50 italic text-sm"> <div class="text-center py-8 text-muted-foreground/50 italic text-sm">
Empty scope. Drag items here or add sub-scopes. Empty scope. Drag items here or add sub-scopes.
</div> </div>
</Show> </Show>
</div>
{/* Sub-scopes */} {/* Sub-scopes — rendered inside the same scale wrapper so they zoom together */}
<div class="space-y-6 pt-4"> <div class="px-3 pb-3 space-y-4">
<For each={props.subScopes}> <For each={props.subScopes}>
{(subScope) => ( {(subScope) => (
<SubScopeCard <SubScopeCard
@@ -277,9 +278,11 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
)} )}
</For> </For>
</div> </div>
</ScopeScaleWrapper>
<div class="p-6 pt-4 space-y-4">
{/* Scope Extras & Totals */} {/* Scope Extras & Totals */}
<div class="mt-8 pt-6 border-t border-border space-y-3"> <div class="mt-4 pt-6 border-t border-border space-y-3">
{/* Management Line */} {/* Management Line */}
<div class="flex items-center justify-between group"> <div class="flex items-center justify-between group">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
src/components/SubScopeCard.tsx
+27 -25
View File
@@ -166,11 +166,11 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
<Show when={!isCollapsed()}> <Show when={!isCollapsed()}>
<div <div
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }} onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
class="p-2 space-y-1.5 relative" class="relative"
> >
{/* SubScope Column Headers */} {/* SubScope Column Headers */}
<Show when={props.items.length > 0}> <Show when={props.items.length > 0}>
<div class="sticky top-header z-20 bg-background/95 backdrop-blur-sm hidden md:flex items-center gap-4 text-[9px] font-bold text-muted-foreground/60 uppercase tracking-wider px-3 pb-2 pt-1 mb-2 border-b border-border/40"> <div class="scope-sticky-header py-2 mb-2 hidden md:flex items-center gap-4 text-[9px] font-bold text-muted-foreground/60 uppercase tracking-wider px-3">
<div class="w-4 shrink-0"></div> <div class="w-4 shrink-0"></div>
<div class="flex-1 min-w-[200px]">Description</div> <div class="flex-1 min-w-[200px]">Description</div>
<div class="w-20 shrink-0 text-right">Qty</div> <div class="w-20 shrink-0 text-right">Qty</div>
@@ -185,29 +185,31 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
</div> </div>
</Show> </Show>
<For each={props.items}> <div class="px-3 pb-3 space-y-1.5">
{(item) => ( <For each={props.items}>
<LazyItem estimatedHeight={60}> {(item) => (
<ItemRow <LazyItem estimatedHeight={60}>
item={item} <ItemRow
onUpdate={props.onUpdateItem} item={item}
onDelete={props.onDeleteItem} onUpdate={props.onUpdateItem}
onDragStart={props.onDragStart} onDelete={props.onDeleteItem}
onDuplicateItem={props.onDuplicateItem} onDragStart={props.onDragStart}
isSidebarCollapsed={props.isSidebarCollapsed} onDuplicateItem={props.onDuplicateItem}
isSelected={props.selectedIds.includes(item.id)} isSidebarCollapsed={props.isSidebarCollapsed}
anySelected={props.selectedIds.length > 0} isSelected={props.selectedIds.includes(item.id)}
onToggleSelection={props.onToggleSelection} anySelected={props.selectedIds.length > 0}
hideColumns={props.hideColumns} onToggleSelection={props.onToggleSelection}
/> hideColumns={props.hideColumns}
</LazyItem> />
)} </LazyItem>
</For> )}
<Show when={props.items.length === 0}> </For>
<div class="text-center py-4 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest italic"> <Show when={props.items.length === 0}>
Empty Sub-scope <div class="text-center py-4 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest italic">
</div> Empty Sub-scope
</Show> </div>
</Show>
</div>
</div> </div>
</Show> </Show>
</div> </div>
src/components/estimate-builder/BuilderHeader.tsx
+1 -8
View File
@@ -1,6 +1,6 @@
import { createSignal, onCleanup, Show } from 'solid-js'; import { createSignal, onCleanup, Show } from 'solid-js';
import type { Component } from 'solid-js'; import type { Component } from 'solid-js';
import { PanelLeftOpen, PanelLeftClose, Calculator, Plus, Upload, Table, Download, History, Save, ChevronDown, MoreHorizontal } from 'lucide-solid'; import { Calculator, Plus, Upload, Table, Download, History, Save, ChevronDown, MoreHorizontal } from 'lucide-solid';
import { appStore } from '../../store/appStore'; import { appStore } from '../../store/appStore';
interface BuilderHeaderProps { interface BuilderHeaderProps {
@@ -34,13 +34,6 @@ export const BuilderHeader: Component<BuilderHeaderProps> = (props) => {
return ( return (
<div class="min-h-[4rem] py-3 px-6 border-b border-border bg-background/50 flex flex-wrap gap-y-4 items-center justify-between sticky top-0 z-50 backdrop-blur-md"> <div class="min-h-[4rem] py-3 px-6 border-b border-border bg-background/50 flex flex-wrap gap-y-4 items-center justify-between sticky top-0 z-50 backdrop-blur-md">
<div class="flex items-center gap-4"> <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="flex items-center gap-3">
<div class="p-2 bg-primary rounded-xl text-primary-foreground shadow-md shadow-primary/20 shrink-0"> <div class="p-2 bg-primary rounded-xl text-primary-foreground shadow-md shadow-primary/20 shrink-0">
<Calculator class="w-5 h-5" /> <Calculator class="w-5 h-5" />
src/components/estimate-builder/BuilderSidebar.tsx
+138 -124
View File
@@ -1,11 +1,12 @@
import type { Component } from 'solid-js'; import type { Component } from 'solid-js';
import { For } from 'solid-js'; import { For } from 'solid-js';
import { Plus, ListTree, ChevronRight } from 'lucide-solid'; import { Plus, ListTree, ChevronRight, PanelLeftOpen, PanelLeftClose } from 'lucide-solid';
import { appStore } from '../../store/appStore'; import { appStore } from '../../store/appStore';
import type { EstimateItem } from '../../types'; import type { EstimateItem } from '../../types';
interface BuilderSidebarProps { interface BuilderSidebarProps {
isCollapsed: boolean; isCollapsed: boolean;
onToggleSidebar: () => void;
unassignedItems: EstimateItem[]; unassignedItems: EstimateItem[];
grandTotals: { grandTotal: number }; grandTotals: { grandTotal: number };
hoveredScopeId: string | null; hoveredScopeId: string | null;
@@ -22,138 +23,151 @@ export const BuilderSidebar: Component<BuilderSidebarProps> = (props) => {
}; };
return ( return (
/*
* The sidebar sits inside a CSS grid column (in EstimateBuilder.tsx).
* We use overflow-visible on the aside so the toggle button can remain
* visible and clickable even when the grid column width is 0px.
*/
<aside <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 class="h-[calc(100vh-var(--spacing-header))] sticky top-[var(--spacing-header)] bg-background border-r border-border flex flex-col overflow-visible z-40 transition-colors"
${props.isCollapsed ? 'w-0 opacity-0 -translate-x-full overflow-hidden' : 'w-72 opacity-100'}`} style={{ "min-width": 0 }}
> >
<div class="flex-1 overflow-y-auto px-4 py-8"> {/*
<div class="mb-4"> * Sticky Toggle Button
<div class="flex items-center justify-between mb-4 px-2"> * Anchored to the right edge (100% width) of the sidebar column.
<span class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">Estimate Navigator</span> * As the column width animates, the button follows perfectly.
<button * We use translateX to adjust horizontal offset from the edge.
onClick={props.onAddScope} */}
class="p-1.5 bg-muted hover:bg-primary/10 text-muted-foreground hover:text-primary rounded-lg transition-all" <button
> onClick={props.onToggleSidebar}
<Plus class="w-3 h-3" /> class="absolute top-4 z-50 w-10 h-10 bg-background hover:bg-accent rounded-xl transition-all duration-500 ease-in-out shadow-premium border border-border text-muted-foreground hover:text-primary active:scale-95 flex items-center justify-center cursor-pointer"
</button> style={{
</div> left: '100%',
transform: props.isCollapsed
? 'translateX(1.25rem)' // When closed (0px width), sit 20px off the left edge
: 'translateX(-0.5rem)' // When open, hang 80% out to the right (overlap only 8px)
}}
title={props.isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
>
{props.isCollapsed ? <PanelLeftOpen class="w-5 h-5" /> : <PanelLeftClose class="w-5 h-5" />}
</button>
<nav class="space-y-1"> {/*
{/* Unassigned Sidebar Link */} * Sidebar Content Wrapper
<div * We apply the overflow-hidden here so the content doesn't leak out
onDragOver={(e) => { * when the grid column is 0px.
e.preventDefault(); */}
props.setHoveredScopeId('unassigned'); <div class={`flex-1 overflow-y-auto overflow-x-hidden transition-all duration-500 flex flex-col ${props.isCollapsed ? 'w-0 opacity-0 pointer-events-none' : 'w-72 opacity-100'}`}>
}} <div class="flex-1 px-4 py-8">
onDragLeave={() => props.setHoveredScopeId(null)} <div class="mb-4">
onDrop={(e) => props.onDrop(e, undefined, undefined)} <div class="flex items-center justify-between mb-4 px-2">
onClick={() => { <span class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em] whitespace-nowrap">Estimate Navigator</span>
const el = document.getElementById('unassigned-section'); <button
if (el) { onClick={props.onAddScope}
const headerOffset = 180; class="p-1.5 bg-muted hover:bg-primary/10 text-muted-foreground hover:text-primary rounded-lg transition-all"
const elementPosition = el.getBoundingClientRect().top; >
const offsetPosition = elementPosition + window.pageYOffset - headerOffset; <Plus class="w-3 h-3" />
window.scrollTo({ </button>
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 ${props.hoveredScopeId === 'unassigned' ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium-lg shadow-primary/10 text-primary' : (props.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 ${props.hoveredScopeId === 'unassigned' ? 'bg-primary text-primary-foreground border-primary' : 'bg-background text-primary border-border'}`}>
{props.unassignedItems.length}
</span>
</div> </div>
<div class="h-4"></div> <nav class="space-y-1">
{/* Unassigned Sidebar Link */}
<div
onDragOver={(e) => {
e.preventDefault();
props.setHoveredScopeId('unassigned');
}}
onDragLeave={() => props.setHoveredScopeId(null)}
onDrop={(e) => props.onDrop(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 ${props.hoveredScopeId === 'unassigned' ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium text-primary' : (props.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 whitespace-nowrap">
<ListTree class="w-4 h-4 shrink-0" /> Unassigned
</span>
<span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors shrink-0 ${props.hoveredScopeId === 'unassigned' ? 'bg-primary text-primary-foreground border-primary' : 'bg-background text-primary border-border'}`}>
{props.unassignedItems.length}
</span>
</div>
{/* Scopes Sidebar Links */} <div class="h-4"></div>
<For each={scopes}>
{(scope) => ( {/* Scopes Sidebar Links */}
<div class="space-y-1"> <For each={scopes}>
<div {(scope) => (
onDragOver={(e) => { <div class="space-y-1">
e.preventDefault(); <div
props.setHoveredScopeId(scope.id); onDragOver={(e) => { e.preventDefault(); props.setHoveredScopeId(scope.id); }}
}} onDragLeave={() => props.setHoveredScopeId(null)}
onDragLeave={() => props.setHoveredScopeId(null)} onDrop={(e) => props.onDrop(e, scope.id)}
onDrop={(e) => props.onDrop(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 ${props.hoveredScopeId === scope.id ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium text-primary' : 'text-muted-foreground border-transparent hover:bg-card hover:shadow-premium hover:border-border'}`}
class={`group flex items-center justify-between px-4 py-3 rounded-xl text-sm font-bold transition-all cursor-pointer border-2 ${props.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={() => {
onClick={() => { const el = document.getElementById(`scope-${scope.id}`);
const el = document.getElementById(`scope-${scope.id}`); if (el) {
if (el) { const headerOffset = 180;
const headerOffset = 180; const elementPosition = el.getBoundingClientRect().top;
const elementPosition = el.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset; window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
window.scrollTo({ }
top: offsetPosition, }}
behavior: 'smooth' >
}); <span class="truncate pr-2">{scope.name}</span>
} <div class="flex items-center gap-2 shrink-0">
}} <span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors ${props.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 class="truncate pr-2">{scope.name}</span> </span>
<div class="flex items-center gap-2"> <ChevronRight class={`w-4 h-4 text-muted-foreground/40 group-hover:text-primary transition-colors ${props.hoveredScopeId === scope.id ? 'text-primary' : ''}`} />
<span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors ${props.hoveredScopeId === scope.id ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted text-muted-foreground border-border'}`}> </div>
{items.filter(i => i.scopeId === scope.id).length} </div>
</span>
<ChevronRight class={`w-4 h-4 text-muted-foreground/40 group-hover:text-primary transition-colors ${props.hoveredScopeId === scope.id ? 'text-primary' : ''}`} /> {/* 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(); props.setHoveredScopeId(subScope.id); }}
onDragLeave={() => props.setHoveredScopeId(null)}
onDrop={(e) => { e.stopPropagation(); props.onDrop(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 ${props.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 shrink-0">
{items.filter(i => i.subScopeId === subScope.id).length}
</span>
</div>
)}
</For>
</div> </div>
</div> </div>
)}
</For>
</nav>
</div>
{/* Nested Sub-scopes in Sidebar */} {/* Sidebar Footer */}
<div class="pl-4 space-y-0.5 border-l-2 border-gray-50 ml-6"> <div class="p-4 border-t border-border bg-muted/30 rounded-2xl mt-4">
<For each={subScopes.filter(ss => ss.scopeId === scope.id)}> <div class="bg-card rounded-2xl p-4 border border-border shadow-sm">
{(subScope) => ( <div class="text-[10px] font-black text-muted-foreground uppercase tracking-widest mb-1 whitespace-nowrap">Current Total</div>
<div <div class="text-xl font-black text-foreground">${formatNumber(props.grandTotals.grandTotal)}</div>
onDragOver={(e) => { </div>
e.preventDefault();
e.stopPropagation();
props.setHoveredScopeId(subScope.id);
}}
onDragLeave={() => props.setHoveredScopeId(null)}
onDrop={(e) => {
e.stopPropagation();
props.onDrop(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 ${props.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(props.grandTotals.grandTotal)}</div>
</div> </div>
</div> </div>
</div> </div>
src/components/estimate-builder/UnassignedItemsSection.tsx
+28 -23
View File
@@ -43,9 +43,13 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
{props.unassignedItems.length} Items Pending {props.unassignedItems.length} Items Pending
</span> </span>
</div> </div>
<div class="relative pb-4"> <div
{/* Sticky Column Headers for Unassigned */} onClick={(e) => { if (e.target === e.currentTarget) props.clearSelection(e); }}
<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"> class="relative overflow-x-auto min-w-0 px-6"
>
<div class="min-w-full md:min-w-max flex flex-col items-stretch pb-4">
{/* Sticky Column Headers for Unassigned */}
<div class="sticky top-0 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 shrink-0"></div> <div class="w-4 shrink-0"></div>
<div class="flex-1 min-w-[200px]">Description</div> <div class="flex-1 min-w-[200px]">Description</div>
<div class="w-20 shrink-0 text-right">Qty</div> <div class="w-20 shrink-0 text-right">Qty</div>
@@ -59,28 +63,29 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
<div class="w-16 shrink-0"></div> <div class="w-16 shrink-0"></div>
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<For each={props.unassignedItems}> <For each={props.unassignedItems}>
{(item) => ( {(item) => (
<LazyItem estimatedHeight={60}> <LazyItem estimatedHeight={60}>
<ItemRow <ItemRow
item={item} item={item}
onUpdate={props.updateItem} onUpdate={props.updateItem}
onDelete={props.deleteItem} onDelete={props.deleteItem}
onDragStart={props.handleDragStart} onDragStart={props.handleDragStart}
onDuplicateItem={props.duplicateItem} onDuplicateItem={props.duplicateItem}
isSidebarCollapsed={props.isSidebarCollapsed} isSidebarCollapsed={props.isSidebarCollapsed}
isSelected={props.selectedIds.includes(item.id)} isSelected={props.selectedIds.includes(item.id)}
anySelected={props.selectedIds.length > 0} anySelected={props.selectedIds.length > 0}
onToggleSelection={(id, isMulti, isShift) => props.toggleSelection(id, isMulti, isShift)} onToggleSelection={(id, isMulti, isShift) => props.toggleSelection(id, isMulti, isShift)}
hideColumns={props.anyDescriptionIsLong()} hideColumns={props.anyDescriptionIsLong()}
/> />
</LazyItem> </LazyItem>
)} )}
</For> </For>
</div>
</div>
</div> </div>
</div> </div>
</div>
</Show> </Show>
); );
}; };
src/components/template/TemplateItemRow.tsx
+111 -81
View File
@@ -30,94 +30,124 @@ const TemplateItemRow: Component<TemplateItemRowProps> = (props) => {
}; };
return ( return (
<div class={`group flex items-start gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2 rounded-2xl bg-card border-border hover:shadow-premium-hover hover:border-border/80 ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : ''}`}> <div class={`group flex flex-col md:flex-row items-stretch md:items-start gap-3 md:gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2 rounded-2xl bg-card border-border hover:shadow-premium-hover hover:border-border/80 ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : ''}`}>
<div class="cursor-grab transition-colors shrink-0 w-4 mt-2 p-1 -m-1 rounded hover:bg-muted text-muted-foreground/30 hover:text-muted-foreground/60" title="Drag to reorder (Coming soon)"> <div class="flex items-start gap-3">
<GripVertical class="w-4 h-4" /> <div class="cursor-grab transition-colors shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted text-muted-foreground/30 hover:text-muted-foreground/60" title="Drag to reorder (Coming soon)">
</div> <GripVertical class="w-4 h-4" />
</div>
<div class="flex-1 relative"> <div class="flex-1 relative min-w-[200px]">
<textarea <textarea
ref={descriptionRef} ref={descriptionRef}
value={localDescription()} value={localDescription()}
onFocus={() => setIsEditing(true)} onFocus={() => setIsEditing(true)}
onBlur={handleBlur} onBlur={handleBlur}
onInput={(e) => { onInput={(e) => {
setLocalDescription(e.currentTarget.value); setLocalDescription(e.currentTarget.value);
if (!('fieldSizing' in document.documentElement.style)) { if (!('fieldSizing' in document.documentElement.style)) {
e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = 'auto';
e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
} }
}} }}
rows="1" rows="1"
class="w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90" class="w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90"
style={{ "field-sizing": "content", "min-height": "1.5em" }} style={{ "field-sizing": "content", "min-height": "1.5em" }}
placeholder="Item description..." placeholder="Item description..."
/>
</div>
<div class="w-24 shrink-0 mt-1">
<NumericInput
value={props.item.quantity}
onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-foreground/80 transition-all"
placeholder="Qty"
/>
</div>
<div class="w-32 shrink-0 mt-1">
<div class="relative">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span>
<NumericInput
step="0.1"
value={props.item.unitPrice}
onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
class="w-full bg-muted/30 border border-border/60 rounded-xl pl-5 pr-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-foreground/80 transition-all"
placeholder="Price"
/> />
</div> </div>
{/* Mobile Actions Container */}
<div class="flex md:hidden items-center gap-1.5 mt-1.5 px-1">
<button
onClick={() => props.onDelete(props.item.id)}
class="text-muted-foreground/40 hover:text-destructive transition-colors"
title="Delete Item"
>
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10">
<Trash2 class="w-3 h-3" />
</div>
</button>
</div>
</div> </div>
<div class="w-28 shrink-0 flex items-center gap-1.5 mt-1"> {/* Numeric Fields Group */}
<NumericInput <div class="flex flex-wrap md:flex-nowrap items-center gap-3 md:gap-4 pl-7 md:pl-0">
value={props.item.markup} <div class="flex items-center gap-2">
onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })} <div class="w-24 shrink-0">
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-primary transition-all" <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Qty</div>
placeholder="Markup" <NumericInput
/> value={props.item.quantity}
<button onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
onClick={() => props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' })} class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-foreground/80 transition-all"
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] transition-colors border border-border/40" placeholder="Qty"
> />
{props.item.markupType === 'percent' ? '%' : '$'}
</button>
</div>
<div class="w-28 shrink-0 flex items-center gap-1.5 mt-1">
<NumericInput
value={props.item.contingency}
onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-foreground/80 transition-all"
placeholder="Cont"
/>
<button
onClick={() => props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' })}
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] transition-colors border border-border/40"
>
{props.item.contingencyType === 'percent' ? '%' : '$'}
</button>
</div>
<div class="w-10 shrink-0 flex items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => props.onDelete(props.item.id)}
class="text-muted-foreground/40 hover:text-destructive transition-colors"
title="Delete Item"
>
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10">
<Trash2 class="w-3 h-3" />
</div> </div>
</button>
<div class="w-32 shrink-0">
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Price</div>
<div class="relative">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span>
<NumericInput
step="0.1"
value={props.item.unitPrice}
onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
class="w-full bg-muted/30 border border-border/60 rounded-xl pl-5 pr-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-foreground/80 transition-all"
placeholder="Price"
/>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<div class="w-28 shrink-0">
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Markup</div>
<div class="flex items-center gap-1.5">
<NumericInput
value={props.item.markup}
onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-primary transition-all"
placeholder="Markup"
/>
<button
onClick={() => props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' })}
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] transition-colors border border-border/40"
>
{props.item.markupType === 'percent' ? '%' : '$'}
</button>
</div>
</div>
<div class="w-28 shrink-0">
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Cont</div>
<div class="flex items-center gap-1.5">
<NumericInput
value={props.item.contingency}
onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-bold text-foreground/80 transition-all"
placeholder="Cont"
/>
<button
onClick={() => props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' })}
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] transition-colors border border-border/40"
>
{props.item.contingencyType === 'percent' ? '%' : '$'}
</button>
</div>
</div>
</div>
<div class="hidden md:flex w-10 shrink-0 items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => props.onDelete(props.item.id)}
class="text-muted-foreground/40 hover:text-destructive transition-colors"
title="Delete Item"
>
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10">
<Trash2 class="w-3 h-3" />
</div>
</button>
</div>
</div> </div>
</div> </div>
); );
src/components/ui/ScopeScaleWrapper.tsx
+104
View File
@@ -0,0 +1,104 @@
/**
* ScopeScaleWrapper
*
* Wraps a scope's items/header block so that on narrow screens the
* whole thing scales down as a unit rather than overflowing.
*
* Critical CSS behaviour used here:
*
* overflow: clip
* Clips the inner element at the outer's edges — identical to
* `overflow: hidden` visually, BUT does NOT create a scroll
* container. This matters because `position: sticky` elements
* inside reference the nearest scroll container ancestor. With
* `overflow: hidden` that would be this element (which doesn't
* scroll → sticky breaks). With `overflow: clip` there is no
* new scroll container → sticky still references the page.
*
* transform: scale() + transform-origin: top left
* Visually shrinks the inner block. Layout size is unaffected
* (transform never changes layout). We compensate by setting
* the outer div's explicit height = naturalHeight × scale, and
* clipping with overflow: clip.
*/
import type { Component, JSX } from 'solid-js';
import { onMount, onCleanup } from 'solid-js';
interface ScopeScaleWrapperProps {
children: JSX.Element;
class?: string;
/** Minimum scale factor — won't zoom below this. Default: 0.65 */
minScale?: number;
}
const ScopeScaleWrapper: Component<ScopeScaleWrapperProps> = (props) => {
let outerEl: HTMLDivElement | undefined;
let innerEl: HTMLDivElement | undefined;
const recalculate = () => {
if (!outerEl || !innerEl) return;
const minScale = props.minScale ?? 0.65;
// ── Step 1: measure the inner's TRUE natural width ───────────────
// Must set max-content BEFORE measuring — if width is unset the
// element stretches to fill the parent, making scrollWidth == outerWidth
// and we'd never think scaling is needed.
innerEl.style.width = 'max-content';
innerEl.style.transform = 'none';
outerEl.style.height = '';
outerEl.style.overflow = '';
void outerEl.offsetWidth; // force reflow
const naturalWidth = innerEl.scrollWidth;
const naturalHeight = innerEl.scrollHeight;
const outerWidth = outerEl.clientWidth;
if (naturalWidth <= outerWidth) {
// ── Fits naturally — fill available width, no clip/scale ──────
innerEl.style.width = '100%';
innerEl.style.transform = '';
outerEl.style.height = '';
outerEl.style.overflow = '';
} else {
// ── Too wide — scale down ─────────────────────────────────────
const rawScale = outerWidth / naturalWidth;
const newScale = Math.max(minScale, rawScale);
// Fix inner to its natural pixel width so transform-origin math
// is reliable, then scale from the top-left corner
innerEl.style.width = `${naturalWidth}px`;
innerEl.style.transformOrigin = 'top left';
innerEl.style.transform = `scale(${newScale})`;
// Set outer height to visual (post-scale) height so no dead space
// appears below the scaled block
outerEl.style.height = `${naturalHeight * newScale}px`;
// overflow: clip — clips layout overflow WITHOUT creating a scroll
// container, so position:sticky inside still works against the page
outerEl.style.overflow = 'clip';
}
};
let ro: ResizeObserver;
onMount(() => {
ro = new ResizeObserver(recalculate);
if (outerEl) ro.observe(outerEl);
if (innerEl) ro.observe(innerEl);
recalculate();
});
onCleanup(() => ro?.disconnect());
return (
<div ref={outerEl} class={`relative ${props.class ?? ''}`}>
<div ref={innerEl}>
{props.children}
</div>
</div>
);
};
export default ScopeScaleWrapper;
src/index.css
+26
View File
@@ -104,4 +104,30 @@
.print-only { .print-only {
@apply hidden; @apply hidden;
} }
}
/* =========================================================
Scope Sticky Header
A shared class for scope and sub-scope column headers.
position:sticky works inside the ScopeScaleWrapper because
the outer container has overflow-y:visible.
========================================================= */
.scope-sticky-header {
position: sticky;
top: 0;
z-index: 20;
background: hsl(0 0% 100% / 0.97);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-bottom: 1px solid hsl(240 5.9% 90%);
}
/* shadow-premium custom utility */
.shadow-premium {
box-shadow: var(--shadow-premium);
}
.shadow-premium-hover:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
} }