mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-05-08 17:48:55 -04:00
remove reordering controls, add auto sort
This commit is contained in:
@@ -9,98 +9,93 @@ import { InvoiceCalendarView } from "../invoice-calendar-view";
|
||||
import type { InvoiceFormData } from "./types";
|
||||
|
||||
interface InvoiceWorkspaceProps {
|
||||
formData: InvoiceFormData;
|
||||
viewMode: "list" | "calendar";
|
||||
setViewMode: (mode: "list" | "calendar") => void;
|
||||
addItem: (date?: Date) => void;
|
||||
removeItem: (index: number) => void;
|
||||
updateItem: (index: number, field: string, value: string | number | Date) => void;
|
||||
moveItemUp: (index: number) => void;
|
||||
moveItemDown: (index: number) => void;
|
||||
reorderItems: (items: InvoiceFormData['items']) => void;
|
||||
className?: string;
|
||||
formData: InvoiceFormData;
|
||||
viewMode: "list" | "calendar";
|
||||
setViewMode: (mode: "list" | "calendar") => void;
|
||||
addItem: (date?: Date) => void;
|
||||
removeItem: (index: number) => void;
|
||||
updateItem: (
|
||||
index: number,
|
||||
field: string,
|
||||
value: string | number | Date,
|
||||
) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InvoiceWorkspace({
|
||||
formData,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
addItem,
|
||||
removeItem,
|
||||
updateItem,
|
||||
moveItemUp,
|
||||
moveItemDown,
|
||||
reorderItems,
|
||||
className,
|
||||
formData,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
addItem,
|
||||
removeItem,
|
||||
updateItem,
|
||||
className,
|
||||
}: InvoiceWorkspaceProps) {
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col h-full", className)}>
|
||||
{/* Workspace Header / View Toggle */}
|
||||
<div className="flex items-center justify-between p-4 border-b bg-background/50 backdrop-blur-sm sticky top-0 z-10">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-lg font-semibold tracking-tight">
|
||||
{viewMode === 'list' ? 'Line Items' : 'Timesheet'}
|
||||
</h2>
|
||||
<div className="text-sm text-muted-foreground ml-2">
|
||||
{formData.items.length} {formData.items.length === 1 ? 'entry' : 'entries'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center bg-secondary/50 p-1 rounded-lg">
|
||||
<Button
|
||||
variant={viewMode === 'list' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('list')}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<List className="w-3.5 h-3.5" />
|
||||
List
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'calendar' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('calendar')}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<CalendarIcon className="w-3.5 h-3.5" />
|
||||
Calendar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Workspace Content */}
|
||||
<div className="flex-1 overflow-hidden relative">
|
||||
<div className="absolute inset-0 overflow-y-auto p-6 md:p-8">
|
||||
{viewMode === 'list' ? (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div className="bg-background/40 backdrop-blur-md rounded-xl border border-white/10 p-1">
|
||||
<InvoiceLineItems
|
||||
items={formData.items}
|
||||
onAddItem={() => addItem()}
|
||||
onRemoveItem={removeItem}
|
||||
onUpdateItem={updateItem}
|
||||
onMoveUp={moveItemUp}
|
||||
onMoveDown={moveItemDown}
|
||||
onReorderItems={reorderItems}
|
||||
className="p-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full">
|
||||
<InvoiceCalendarView
|
||||
items={formData.items}
|
||||
onAddItem={addItem}
|
||||
onRemoveItem={removeItem}
|
||||
onUpdateItem={updateItem}
|
||||
defaultHourlyRate={formData.defaultHourlyRate}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className={cn("flex h-full flex-col", className)}>
|
||||
{/* Workspace Header / View Toggle */}
|
||||
<div className="bg-background/50 sticky top-0 z-10 flex items-center justify-between border-b p-4 backdrop-blur-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-lg font-semibold tracking-tight">
|
||||
{viewMode === "list" ? "Line Items" : "Timesheet"}
|
||||
</h2>
|
||||
<div className="text-muted-foreground ml-2 text-sm">
|
||||
{formData.items.length}{" "}
|
||||
{formData.items.length === 1 ? "entry" : "entries"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
<div className="bg-secondary/50 flex items-center rounded-lg p-1">
|
||||
<Button
|
||||
variant={viewMode === "list" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("list")}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<List className="h-3.5 w-3.5" />
|
||||
List
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "calendar" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("calendar")}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<CalendarIcon className="h-3.5 w-3.5" />
|
||||
Calendar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Workspace Content */}
|
||||
<div className="relative flex-1 overflow-hidden">
|
||||
<div className="absolute inset-0 overflow-y-auto p-6 md:p-8">
|
||||
{viewMode === "list" ? (
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<div className="bg-background/40 rounded-xl border border-white/10 p-1 backdrop-blur-md">
|
||||
<InvoiceLineItems
|
||||
items={formData.items}
|
||||
onAddItem={() => addItem()}
|
||||
onRemoveItem={removeItem}
|
||||
onUpdateItem={updateItem}
|
||||
className="p-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full">
|
||||
<InvoiceCalendarView
|
||||
items={formData.items}
|
||||
onAddItem={addItem}
|
||||
onRemoveItem={removeItem}
|
||||
onUpdateItem={updateItem}
|
||||
defaultHourlyRate={formData.defaultHourlyRate}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user