soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2026-02-05 00:06:36 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: improve invoice calendar item display and date picker icon button styling

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-14 22:02:04 -05:00
parent 32cffa34fa
commit 180f14dfb0
7 changed files with 195 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bun.lock
View File

@@ -6,6 +6,7 @@
"name": "beenvoice", "name": "beenvoice",
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",
"@dnd-kit/modifiers": "^9.0.0",
"@dnd-kit/sortable": "^10.0.0", "@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2", "@dnd-kit/utilities": "^3.2.2",
"@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -145,6 +146,8 @@
"@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="], "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
"@dnd-kit/modifiers": ["@dnd-kit/modifiers@9.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw=="],
"@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="], "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
"@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="], "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],

1
package.json
View File

@@ -25,6 +25,7 @@
}, },
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",
"@dnd-kit/modifiers": "^9.0.0",
"@dnd-kit/sortable": "^10.0.0", "@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2", "@dnd-kit/utilities": "^3.2.2",
"@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-alert-dialog": "^1.1.15",

87
src/components/forms/invoice-calendar-view.tsx
View File

@@ -255,8 +255,8 @@ export function InvoiceCalendarView({
{dayItems.length > 0 ? ( {dayItems.length > 0 ? (
dayItems.map(({ item }, i) => ( dayItems.map(({ item }, i) => (
<div key={i} className="bg-background rounded-xl p-2 text-xs shadow-sm border"> <div key={i} className="bg-background rounded-xl p-2 text-xs shadow-sm border">
<div className="font-medium truncate">{item.description || "No description"}</div> <div className="font-medium line-clamp-2 text-wrap break-words">{item.description || "No description"}</div>
<div className="text-muted-foreground">{item.hours}h</div> <div className="text-muted-foreground whitespace-nowrap">{item.hours}h</div>
</div> </div>
)) ))
) : ( ) : (
@@ -285,11 +285,11 @@ export function InvoiceCalendarView({
> >
<SheetContent side="right" className="w-[400px] sm:w-[540px] flex flex-col gap-0 p-0 sm:max-w-[540px]"> <SheetContent side="right" className="w-[400px] sm:w-[540px] flex flex-col gap-0 p-0 sm:max-w-[540px]">
<SheetHeader className="p-6 border-b"> <SheetHeader className="p-6 border-b">
<SheetTitle className="flex items-center gap-3 text-2xl"> <SheetTitle className="flex items-center gap-3 text-2xl flex-wrap">
<div className="bg-primary/10 p-2.5 rounded-full"> <div className="bg-primary/10 p-2.5 rounded-full flex-shrink-0">
<CalendarIcon className="w-6 h-6 text-primary" /> <CalendarIcon className="w-6 h-6 text-primary" />
</div> </div>
{date ? format(date, "EEEE, MMMM do") : "Details"} <span className="break-words text-left">{date ? format(date, "EEEE, MMMM do") : "Details"}</span>
</SheetTitle> </SheetTitle>
</SheetHeader> </SheetHeader>
@@ -312,50 +312,48 @@ export function InvoiceCalendarView({
) : ( ) : (
<div className="space-y-4"> <div className="space-y-4">
{selectedDateItems.map(({ item, index }) => ( {selectedDateItems.map(({ item, index }) => (
<div key={item.id} className="bg-card border rounded-xl p-4 transition-all shadow-sm group hover:border-primary/20"> <div key={item.id} className="border-border bg-card overflow-hidden rounded-lg border group hover:border-primary/50 transition-colors">
<div className="flex-1 space-y-3"> <div className="space-y-3 p-4">
{/* Description */} {/* Description */}
<div> <div className="space-y-1">
<Label className="text-muted-foreground text-xs">Description</Label>
<Input <Input
value={item.description} value={item.description}
onChange={(e) => onUpdateItem(index, "description", e.target.value)} onChange={(e) => onUpdateItem(index, "description", e.target.value)}
placeholder="Describe the work performed..." placeholder="Describe the work performed..."
className="w-full text-sm font-medium" className="pl-3 text-sm"
/> />
</div> </div>
{/* Controls Row */} {/* Hours and Rate in a row */}
<div className="flex flex-wrap items-center gap-3"> <div className="grid grid-cols-2 gap-3">
{/* Hours */} <div className="space-y-1">
<NumberInput <Label className="text-muted-foreground text-xs">Hours</Label>
value={item.hours} <NumberInput
onChange={v => onUpdateItem(index, "hours", v)} value={item.hours}
step={0.25} onChange={v => onUpdateItem(index, "hours", v)}
min={0} step={0.25}
width="auto" min={0}
className="h-9 flex-1 min-w-[100px] font-mono" width="full"
suffix="h" />
/>
{/* Rate */}
<NumberInput
value={item.rate}
onChange={v => onUpdateItem(index, "rate", v)}
prefix="$"
min={0}
step={1}
width="auto"
className="h-9 flex-1 min-w-[100px] font-mono"
/>
{/* Amount */}
<div className="ml-auto">
<span className="text-primary font-semibold">
${(item.hours * item.rate).toFixed(2)}
</span>
</div> </div>
<div className="space-y-1">
<Label className="text-muted-foreground text-xs">Rate</Label>
<NumberInput
value={item.rate}
onChange={v => onUpdateItem(index, "rate", v)}
prefix="$"
min={0}
step={1}
width="full"
/>
</div>
</div>
</div>
{/* Actions */} {/* Bottom section with controls, item name, and total */}
<div className="border-border bg-muted/50 flex items-center justify-between border-t px-4 py-2">
<div className="flex items-center gap-2">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
@@ -366,6 +364,17 @@ export function InvoiceCalendarView({
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
<div className="flex-1 px-3 text-center">
<span className="text-muted-foreground block text-sm font-medium">
Item #{index + 1}
</span>
</div>
<div className="flex flex-col items-end">
<span className="text-muted-foreground text-xs">Total</span>
<span className="text-primary text-lg font-bold">
${(item.hours * item.rate).toFixed(2)}
</span>
</div>
</div> </div>
</div> </div>
))} ))}

2
src/components/forms/invoice-form.tsx
View File

@@ -134,7 +134,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
}, [formData.items, formData.taxRate]); }, [formData.items, formData.taxRate]);
// Handlers (addItem, updateItem etc. - same as before) // Handlers (addItem, updateItem etc. - same as before)
const addItem = (date?: Date | unknown) => { const addItem = (date?: unknown) => {
const validDate = date instanceof Date ? date : new Date(); const validDate = date instanceof Date ? date : new Date();
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,

356
src/components/forms/invoice-line-items.tsx
View File

@@ -1,26 +1,8 @@
"use client"; "use client";
import {
closestCenter,
DndContext,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
type DragEndEvent,
} from "@dnd-kit/core";
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
useSortable,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { import {
ChevronDown, ChevronDown,
ChevronUp, ChevronUp,
GripVertical,
Plus, Plus,
Trash2, Trash2,
} from "lucide-react"; } from "lucide-react";
@@ -73,73 +55,30 @@ interface LineItemRowProps {
isLast: boolean; isLast: boolean;
} }
interface SortableLineItemProps { const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
item: InvoiceItem; (
index: number; {
canRemove: boolean; item,
onRemove: (index: number) => void; index,
onUpdate: ( canRemove,
index: number, onRemove,
field: string, onUpdate,
value: string | number | Date, onMoveUp,
) => void; onMoveDown,
onMoveUp: (index: number) => void; isFirst,
onMoveDown: (index: number) => void; isLast,
isFirst: boolean; },
isLast: boolean; ref,
} ) => {
return (
function SortableLineItem({ <div
item, ref={ref}
index, className={cn(
canRemove, "bg-card border hidden rounded-xl p-4 md:block transition-all shadow-sm group hover:border-primary/20",
onRemove, )}
onUpdate, >
onMoveUp, <div className="flex items-center gap-3">
onMoveDown, {/* Arrow Controls */}
isFirst,
isLast,
}: SortableLineItemProps) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: item.id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
};
return (
<motion.div
ref={setNodeRef}
style={style}
layout
// Add ID here for scrolling
id={`invoice-item-${index}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.2, ease: "easeOut" }}
className={cn(
"bg-card border hidden rounded-xl p-4 md:block transition-all shadow-sm group hover:border-primary/20",
isDragging && "opacity-50 shadow-md rotate-1 scale-[1.01] z-50 ring-2 ring-primary/20",
)}
>
<div className="flex items-start gap-3">
{/* Drag Handle and Arrow Controls */}
<div className="mt-1 flex flex-col items-center gap-1">
<div
className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded-md transition-colors mt-2"
{...attributes}
{...listeners}
>
<GripVertical className="text-muted-foreground/50 hover:text-foreground h-4 w-4 transition-colors" />
</div>
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
<Button <Button
type="button" type="button"
@@ -164,80 +103,81 @@ function SortableLineItem({
<ChevronDown className="h-3 w-3" /> <ChevronDown className="h-3 w-3" />
</Button> </Button>
</div> </div>
</div>
{/* Main Content */} {/* Main Content */}
<div className="flex-1 space-y-3"> <div className="flex-1 space-y-3">
{/* Description */} {/* Description */}
<div> <div>
<Input <Input
value={item.description} value={item.description}
onChange={(e) => onUpdate(index, "description", e.target.value)} onChange={(e) => onUpdate(index, "description", e.target.value)}
placeholder="Describe the work performed..." placeholder="Describe the work performed..."
className="w-full text-sm font-medium" className="w-full text-sm font-medium"
/> />
</div>
{/* Controls Row */}
<div className="flex flex-wrap items-center gap-3">
{/* Date */}
<DatePicker
date={item.date}
onDateChange={(date) =>
onUpdate(index, "date", date ?? new Date())
}
size="sm"
className="w-full sm:w-[180px]"
inputClassName="h-9"
/>
{/* Hours */}
<NumberInput
value={item.hours}
onChange={(value) => onUpdate(index, "hours", value)}
min={0}
step={0.25}
width="auto"
className="h-9 flex-1 min-w-[100px] font-mono"
suffix="h"
/>
{/* Rate */}
<NumberInput
value={item.rate}
onChange={(value) => onUpdate(index, "rate", value)}
min={0}
step={1}
prefix="$"
width="auto"
className="h-9 flex-1 min-w-[100px] font-mono"
/>
{/* Amount */}
<div className="ml-auto">
<span className="text-primary font-semibold">
${(item.hours * item.rate).toFixed(2)}
</span>
</div> </div>
{/* Actions */} {/* Controls Row */}
<Button <div className="flex flex-wrap items-center gap-3">
type="button" {/* Date */}
variant="ghost" <DatePicker
size="sm" date={item.date}
onClick={() => onRemove(index)} onDateChange={(date) =>
className="text-muted-foreground hover:text-destructive h-8 w-8 p-0" onUpdate(index, "date", date ?? new Date())
disabled={!canRemove} }
aria-label="Remove item" size="sm"
> className="w-full sm:w-[180px]"
<Trash2 className="h-4 w-4" /> inputClassName="h-9"
</Button> />
{/* Hours */}
<NumberInput
value={item.hours}
onChange={(value) => onUpdate(index, "hours", value)}
min={0}
step={0.25}
width="auto"
className="h-9 flex-1 min-w-[100px] font-mono"
suffix="h"
/>
{/* Rate */}
<NumberInput
value={item.rate}
onChange={(value) => onUpdate(index, "rate", value)}
min={0}
step={1}
prefix="$"
width="auto"
className="h-9 flex-1 min-w-[100px] font-mono"
/>
{/* Amount */}
<div className="ml-auto">
<span className="text-primary font-semibold">
${(item.hours * item.rate).toFixed(2)}
</span>
</div>
{/* Actions */}
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => onRemove(index)}
className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
disabled={!canRemove}
aria-label="Remove item"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>
</motion.div> );
); },
} );
LineItemCard.displayName = "LineItemCard";
function MobileLineItem({ function MobileLineItem({
item, item,
@@ -253,10 +193,6 @@ function MobileLineItem({
return ( return (
<motion.div <motion.div
layout layout
// Add ID here for scrolling (mobile uses same ID since only one is shown usually via CSS)
// But safer to differentiate or handle duplicates?
// Actually, IDs must be unique. Let's rely on the structure that only one is visible.
// Or just duplicate ID knowing it's slightly invalid but functional if one is `display:none`.
id={`invoice-item-${index}-mobile`} id={`invoice-item-${index}-mobile`}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
@@ -308,6 +244,7 @@ function MobileLineItem({
step={1} step={1}
prefix="$" prefix="$"
width="full" width="full"
className="font-mono"
/> />
</div> </div>
</div> </div>
@@ -375,77 +312,54 @@ export function InvoiceLineItems({
onUpdateItem, onUpdateItem,
onMoveUp, onMoveUp,
onMoveDown, onMoveDown,
onReorderItems,
className, className,
}: InvoiceLineItemsProps) { }: InvoiceLineItemsProps) {
const canRemoveItems = items.length > 1; const canRemoveItems = items.length > 1;
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
}),
);
function handleDragEnd(event: DragEndEvent) {
const { active, over } = event;
if (active.id !== over?.id) {
const oldIndex = items.findIndex((item) => item.id === active.id);
const newIndex = items.findIndex((item) => item.id === over?.id);
const newItems = arrayMove(items, oldIndex, newIndex);
onReorderItems(newItems);
}
}
return ( return (
<div className={cn("space-y-2", className)}> <div className={cn("space-y-2", className)}>
{/* Desktop Cards with Drag and Drop */} <AnimatePresence>
<DndContext <div className="space-y-2">
sensors={sensors} {items.map((item, index) => (
collisionDetection={closestCenter} <React.Fragment key={item.id}>
onDragEnd={handleDragEnd} {/* Desktop/Tablet Card */}
> <motion.div
<SortableContext layout
items={items.map((item) => item.id)} id={`invoice-item-${index}`}
strategy={verticalListSortingStrategy} initial={{ opacity: 0, y: 20 }}
> animate={{ opacity: 1, y: 0 }}
<AnimatePresence> exit={{ opacity: 0, y: -20 }}
<div className="space-y-2"> transition={{ duration: 0.2, ease: "easeOut" }}
{items.map((item, index) => ( >
<React.Fragment key={item.id}> <LineItemCard
{/* Desktop/Tablet Card with Drag and Drop */} item={item}
<SortableLineItem index={index}
item={item} canRemove={canRemoveItems}
index={index} onRemove={onRemoveItem}
canRemove={canRemoveItems} onUpdate={onUpdateItem}
onRemove={onRemoveItem} onMoveUp={onMoveUp}
onUpdate={onUpdateItem} onMoveDown={onMoveDown}
onMoveUp={onMoveUp} isFirst={index === 0}
onMoveDown={onMoveDown} isLast={index === items.length - 1}
isFirst={index === 0} />
isLast={index === items.length - 1} </motion.div>
/>
{/* Mobile Card */} {/* Mobile Card */}
<MobileLineItem <MobileLineItem
item={item} item={item}
index={index} index={index}
canRemove={canRemoveItems} canRemove={canRemoveItems}
onRemove={onRemoveItem} onRemove={onRemoveItem}
onUpdate={onUpdateItem} onUpdate={onUpdateItem}
onMoveUp={onMoveUp} onMoveUp={onMoveUp}
onMoveDown={onMoveDown} onMoveDown={onMoveDown}
isFirst={index === 0} isFirst={index === 0}
isLast={index === items.length - 1} isLast={index === items.length - 1}
/> />
</React.Fragment> </React.Fragment>
))} ))}
</div> </div>
</AnimatePresence> </AnimatePresence>
</SortableContext>
</DndContext>
{/* Add Item Button */} {/* Add Item Button */}
<div className="px-3 pt-3"> <div className="px-3 pt-3">

7
src/components/ui/calendar.tsx
View File

@@ -100,10 +100,11 @@ function Calendar({
defaultClassNames.week_number defaultClassNames.week_number
), ),
day: cn( day: cn(
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", "relative w-full h-full p-0 text-center group/day aspect-square select-none",
props.showWeekNumber props.mode !== "single" && "[&:last-child[data-selected=true]_button]:rounded-r-md",
props.mode !== "single" && (props.showWeekNumber
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
: "[&:first-child[data-selected=true]_button]:rounded-l-md", : "[&:first-child[data-selected=true]_button]:rounded-l-md"),
defaultClassNames.day defaultClassNames.day
), ),
range_start: cn( range_start: cn(

6
src/components/ui/date-picker.tsx
View File

@@ -98,13 +98,13 @@ export function DatePicker({
<Button <Button
variant="ghost" variant="ghost"
disabled={disabled} disabled={disabled}
className="absolute top-1/2 right-2 size-6 -translate-y-1/2" className="absolute top-1/2 right-2 size-6 p-0 -translate-y-1/2 text-primary/80 hover:text-primary transition-colors z-20"
> >
<CalendarIcon className="size-3.5" /> <CalendarIcon className="size-4" />
<span className="sr-only">Select date</span> <span className="sr-only">Select date</span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-auto overflow-hidden p-0" align="end"> <PopoverContent className="w-auto overflow-hidden p-0 rounded-xl" align="end">
<Calendar <Calendar
mode="single" mode="single"
selected={date} selected={date}