Layout Fixes
This commit is contained in:
+232
-182
@@ -56,7 +56,7 @@ const ItemRow: Component<ItemRowProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`group flex items-start gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2
|
||||
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 w-full
|
||||
${props.isSelected
|
||||
? 'bg-primary/5 border-primary shadow-premium z-10'
|
||||
: 'bg-card border-border hover:shadow-premium-hover hover:border-border/80'
|
||||
@@ -64,218 +64,268 @@ const ItemRow: Component<ItemRowProps> = (props) => {
|
||||
${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : 'rounded-2xl'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
draggable={!isEditing() || props.anySelected}
|
||||
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 class="flex items-start gap-3">
|
||||
<div
|
||||
draggable={!isEditing() || props.anySelected}
|
||||
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]">
|
||||
<textarea
|
||||
ref={descriptionRef}
|
||||
value={localDescription()}
|
||||
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>
|
||||
|
||||
{/* Mobile Actions Container */}
|
||||
<div class="flex md:hidden items-center gap-1.5 mt-1.5 px-1">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
props.onDuplicateItem(props.item.id);
|
||||
}}
|
||||
class="text-muted-foreground/40 hover:text-primary transition-colors"
|
||||
title="Duplicate Item"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 relative min-w-[200px]">
|
||||
{/* Numeric Fields Group */}
|
||||
<div class="flex flex-wrap md:flex-nowrap items-center gap-3 md:gap-4 pl-7 md:pl-0">
|
||||
{/* Qty & Price Group */}
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-20 shrink-0">
|
||||
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Qty</div>
|
||||
<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>
|
||||
|
||||
<textarea
|
||||
ref={descriptionRef}
|
||||
value={localDescription()}
|
||||
onFocus={() => {
|
||||
if (!props.anySelected) setIsEditing(true);
|
||||
}}
|
||||
onBlur={handleBlur}
|
||||
onInput={(e) => {
|
||||
setLocalDescription(e.currentTarget.value);
|
||||
<div class="w-24 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
|
||||
dataFieldName="price"
|
||||
step="0.1"
|
||||
value={props.item.unitPrice}
|
||||
onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
|
||||
onDragStart={(e) => {
|
||||
const val = props.item.unitPrice;
|
||||
const data = {
|
||||
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('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 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 cursor-text font-bold text-foreground/80 transition-all"
|
||||
placeholder="Price"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// 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 })}
|
||||
<div
|
||||
draggable="true"
|
||||
onDragStart={(e) => {
|
||||
const val = props.item.quantity;
|
||||
const val = baseTotal();
|
||||
const data = {
|
||||
type: 'item-field',
|
||||
itemId: props.item.id,
|
||||
fieldName: 'qty',
|
||||
fieldName: 'subtotal',
|
||||
value: val,
|
||||
label: `${props.item.description || 'Unnamed Item'}: Qty`
|
||||
label: `${props.item.description || 'Unnamed Item'}: Subtotal`
|
||||
};
|
||||
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>
|
||||
class={`hidden md:block 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>
|
||||
|
||||
<div class="w-24 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
|
||||
dataFieldName="price"
|
||||
step="0.1"
|
||||
value={props.item.unitPrice}
|
||||
onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
|
||||
{/* Markup & Contingency Group */}
|
||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-32 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
|
||||
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">
|
||||
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Contingency</div>
|
||||
<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="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="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>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
draggable="true"
|
||||
onDragStart={(e) => {
|
||||
const val = props.item.unitPrice;
|
||||
const val = total();
|
||||
const data = {
|
||||
type: 'item-field',
|
||||
itemId: props.item.id,
|
||||
fieldName: 'price',
|
||||
fieldName: 'total',
|
||||
value: val,
|
||||
label: `${props.item.description || 'Unnamed Item'}: Price`
|
||||
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();
|
||||
}}
|
||||
draggable="true"
|
||||
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 cursor-text font-bold text-foreground/80 transition-all"
|
||||
placeholder="Price"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
draggable="true"
|
||||
onDragStart={(e) => {
|
||||
const val = baseTotal();
|
||||
const data = {
|
||||
type: 'item-field',
|
||||
itemId: props.item.id,
|
||||
fieldName: 'subtotal',
|
||||
value: val,
|
||||
label: `${props.item.description || 'Unnamed Item'}: Subtotal`
|
||||
};
|
||||
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
||||
e.dataTransfer!.setData('text/plain', String(val));
|
||||
e.dataTransfer!.effectAllowed = 'copy';
|
||||
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"
|
||||
class={`w-28 shrink-0 text-right font-black text-sm md:mt-2 cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
|
||||
>
|
||||
{props.item.markupType === 'percent' ? '%' : '$'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="w-32 shrink-0 flex items-center gap-1.5 mt-1">
|
||||
<NumericInput
|
||||
dataFieldName="contingency"
|
||||
value={props.item.contingency}
|
||||
onUpdate={(val) => props.onUpdate(props.item.id, { contingency: 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="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>
|
||||
</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 class="w-16 shrink-0 flex items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
props.onDuplicateItem(props.item.id);
|
||||
}}
|
||||
class="text-muted-foreground/40 hover:text-primary transition-colors"
|
||||
title="Duplicate Item"
|
||||
>
|
||||
<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 class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Total</div>
|
||||
${formatNumber(total())}
|
||||
</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 class="hidden md:flex w-16 shrink-0 items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
props.onDuplicateItem(props.item.id);
|
||||
}}
|
||||
class="text-muted-foreground/40 hover:text-primary transition-colors"
|
||||
title="Duplicate Item"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -202,55 +202,59 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
|
||||
|
||||
<div
|
||||
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
|
||||
class="p-6 space-y-4 relative"
|
||||
class="relative overflow-x-auto min-w-0"
|
||||
>
|
||||
<Show when={scopeItems().length > 0}>
|
||||
<div class="relative pb-4">
|
||||
{/* Column Headers - Sticky, Square Top */}
|
||||
<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-4 shrink-0"></div> {/* Grip space */}
|
||||
<div class="flex-1 min-w-[200px]">Description</div>
|
||||
<div class="w-20 shrink-0 text-right">Qty</div>
|
||||
<div class="w-24 shrink-0 text-right">Price</div>
|
||||
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||
<div class="w-32 shrink-0 text-center">Markup</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 class="p-6 space-y-4 min-w-full md:min-w-max flex flex-col items-stretch">
|
||||
<Show when={scopeItems().length > 0}>
|
||||
<div class="relative">
|
||||
{/* Column Headers - Sticky, Square Top */}
|
||||
<div class="sticky top-0 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-4 shrink-0"></div> {/* Grip space */}
|
||||
<div class="flex-1 min-w-[200px]">Description</div>
|
||||
<div class="w-20 shrink-0 text-right">Qty</div>
|
||||
<div class="w-24 shrink-0 text-right">Price</div>
|
||||
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||
<div class="w-32 shrink-0 text-center">Markup</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>
|
||||
|
||||
<div class="grid gap-2">
|
||||
{/* Scope Level Items */}
|
||||
<For each={props.items.filter(i => !i.subScopeId)}>
|
||||
{(item) => (
|
||||
<LazyItem estimatedHeight={60}>
|
||||
<ItemRow
|
||||
item={item}
|
||||
onUpdate={props.onUpdateItem}
|
||||
onDelete={props.onDeleteItem}
|
||||
onDragStart={props.onDragStart}
|
||||
onDuplicateItem={props.onDuplicateItem}
|
||||
isSidebarCollapsed={props.isSidebarCollapsed}
|
||||
isSelected={props.selectedIds.includes(item.id)}
|
||||
anySelected={props.selectedIds.length > 0}
|
||||
onToggleSelection={props.onToggleSelection}
|
||||
hideColumns={props.hideColumns}
|
||||
/>
|
||||
</LazyItem>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="grid gap-2">
|
||||
{/* Scope Level Items */}
|
||||
<For each={props.items.filter(i => !i.subScopeId)}>
|
||||
{(item) => (
|
||||
<LazyItem estimatedHeight={60}>
|
||||
<ItemRow
|
||||
item={item}
|
||||
onUpdate={props.onUpdateItem}
|
||||
onDelete={props.onDeleteItem}
|
||||
onDragStart={props.onDragStart}
|
||||
onDuplicateItem={props.onDuplicateItem}
|
||||
isSidebarCollapsed={props.isSidebarCollapsed}
|
||||
isSelected={props.selectedIds.includes(item.id)}
|
||||
anySelected={props.selectedIds.length > 0}
|
||||
onToggleSelection={props.onToggleSelection}
|
||||
hideColumns={props.hideColumns}
|
||||
/>
|
||||
</LazyItem>
|
||||
)}
|
||||
</For>
|
||||
<Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
|
||||
<div class="text-center py-8 text-muted-foreground/50 italic text-sm">
|
||||
Empty scope. Drag items here or add sub-scopes.
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
|
||||
<div class="text-center py-8 text-muted-foreground/50 italic text-sm">
|
||||
Empty scope. Drag items here or add sub-scopes.
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-0 space-y-4 relative">
|
||||
{/* Sub-scopes */}
|
||||
<div class="space-y-6 pt-4">
|
||||
<For each={props.subScopes}>
|
||||
|
||||
@@ -166,48 +166,50 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
|
||||
<Show when={!isCollapsed()}>
|
||||
<div
|
||||
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
|
||||
class="p-2 space-y-1.5 relative"
|
||||
class="relative overflow-x-auto min-w-0"
|
||||
>
|
||||
{/* SubScope Column Headers */}
|
||||
<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="w-4 shrink-0"></div>
|
||||
<div class="flex-1 min-w-[200px]">Description</div>
|
||||
<div class="w-20 shrink-0 text-right">Qty</div>
|
||||
<div class="w-24 shrink-0 text-right">Price</div>
|
||||
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||
<div class="w-32 shrink-0 text-center">Markup</div>
|
||||
<div class="w-32 shrink-0 text-center">Contingency</div>
|
||||
</Show>
|
||||
<div class="w-28 shrink-0 text-right px-2">Total</div>
|
||||
<div class="w-16 shrink-0"></div>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="p-2 space-y-1.5 min-w-full md:min-w-max flex flex-col items-stretch">
|
||||
{/* SubScope Column Headers */}
|
||||
<Show when={props.items.length > 0}>
|
||||
<div class="sticky top-0 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="w-4 shrink-0"></div>
|
||||
<div class="flex-1 min-w-[200px]">Description</div>
|
||||
<div class="w-20 shrink-0 text-right">Qty</div>
|
||||
<div class="w-24 shrink-0 text-right">Price</div>
|
||||
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||
<div class="w-32 shrink-0 text-center">Markup</div>
|
||||
<div class="w-32 shrink-0 text-center">Contingency</div>
|
||||
</Show>
|
||||
<div class="w-28 shrink-0 text-right px-2">Total</div>
|
||||
<div class="w-16 shrink-0"></div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<For each={props.items}>
|
||||
{(item) => (
|
||||
<LazyItem estimatedHeight={60}>
|
||||
<ItemRow
|
||||
item={item}
|
||||
onUpdate={props.onUpdateItem}
|
||||
onDelete={props.onDeleteItem}
|
||||
onDragStart={props.onDragStart}
|
||||
onDuplicateItem={props.onDuplicateItem}
|
||||
isSidebarCollapsed={props.isSidebarCollapsed}
|
||||
isSelected={props.selectedIds.includes(item.id)}
|
||||
anySelected={props.selectedIds.length > 0}
|
||||
onToggleSelection={props.onToggleSelection}
|
||||
hideColumns={props.hideColumns}
|
||||
/>
|
||||
</LazyItem>
|
||||
)}
|
||||
</For>
|
||||
<Show when={props.items.length === 0}>
|
||||
<div class="text-center py-4 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest italic">
|
||||
Empty Sub-scope
|
||||
</div>
|
||||
</Show>
|
||||
<For each={props.items}>
|
||||
{(item) => (
|
||||
<LazyItem estimatedHeight={60}>
|
||||
<ItemRow
|
||||
item={item}
|
||||
onUpdate={props.onUpdateItem}
|
||||
onDelete={props.onDeleteItem}
|
||||
onDragStart={props.onDragStart}
|
||||
onDuplicateItem={props.onDuplicateItem}
|
||||
isSidebarCollapsed={props.isSidebarCollapsed}
|
||||
isSelected={props.selectedIds.includes(item.id)}
|
||||
anySelected={props.selectedIds.length > 0}
|
||||
onToggleSelection={props.onToggleSelection}
|
||||
hideColumns={props.hideColumns}
|
||||
/>
|
||||
</LazyItem>
|
||||
)}
|
||||
</For>
|
||||
<Show when={props.items.length === 0}>
|
||||
<div class="text-center py-4 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest italic">
|
||||
Empty Sub-scope
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
@@ -43,9 +43,13 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
|
||||
{props.unassignedItems.length} Items Pending
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative pb-4">
|
||||
{/* 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
|
||||
onClick={(e) => { if (e.target === e.currentTarget) props.clearSelection(e); }}
|
||||
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="flex-1 min-w-[200px]">Description</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>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<For each={props.unassignedItems}>
|
||||
{(item) => (
|
||||
<LazyItem estimatedHeight={60}>
|
||||
<ItemRow
|
||||
item={item}
|
||||
onUpdate={props.updateItem}
|
||||
onDelete={props.deleteItem}
|
||||
onDragStart={props.handleDragStart}
|
||||
onDuplicateItem={props.duplicateItem}
|
||||
isSidebarCollapsed={props.isSidebarCollapsed}
|
||||
isSelected={props.selectedIds.includes(item.id)}
|
||||
anySelected={props.selectedIds.length > 0}
|
||||
onToggleSelection={(id, isMulti, isShift) => props.toggleSelection(id, isMulti, isShift)}
|
||||
hideColumns={props.anyDescriptionIsLong()}
|
||||
/>
|
||||
</LazyItem>
|
||||
)}
|
||||
</For>
|
||||
<div class="grid gap-2">
|
||||
<For each={props.unassignedItems}>
|
||||
{(item) => (
|
||||
<LazyItem estimatedHeight={60}>
|
||||
<ItemRow
|
||||
item={item}
|
||||
onUpdate={props.updateItem}
|
||||
onDelete={props.deleteItem}
|
||||
onDragStart={props.handleDragStart}
|
||||
onDuplicateItem={props.duplicateItem}
|
||||
isSidebarCollapsed={props.isSidebarCollapsed}
|
||||
isSelected={props.selectedIds.includes(item.id)}
|
||||
anySelected={props.selectedIds.length > 0}
|
||||
onToggleSelection={(id, isMulti, isShift) => props.toggleSelection(id, isMulti, isShift)}
|
||||
hideColumns={props.anyDescriptionIsLong()}
|
||||
/>
|
||||
</LazyItem>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,94 +30,124 @@ const TemplateItemRow: Component<TemplateItemRowProps> = (props) => {
|
||||
};
|
||||
|
||||
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)">
|
||||
<GripVertical class="w-4 h-4" />
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<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)">
|
||||
<GripVertical class="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1 relative">
|
||||
<textarea
|
||||
ref={descriptionRef}
|
||||
value={localDescription()}
|
||||
onFocus={() => 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';
|
||||
}
|
||||
}}
|
||||
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 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 class="flex-1 relative min-w-[200px]">
|
||||
<textarea
|
||||
ref={descriptionRef}
|
||||
value={localDescription()}
|
||||
onFocus={() => 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';
|
||||
}
|
||||
}}
|
||||
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>
|
||||
|
||||
{/* 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 class="w-28 shrink-0 flex items-center gap-1.5 mt-1">
|
||||
<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 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" />
|
||||
{/* Numeric Fields Group */}
|
||||
<div class="flex flex-wrap md:flex-nowrap items-center gap-3 md:gap-4 pl-7 md:pl-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-24 shrink-0">
|
||||
<div class="md:hidden 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 })}
|
||||
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>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user