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

feat: Enhance DatePicker and NumberInput components, refactor invoice line item UI, sort invoice items by date, and remove Vercel configuration.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-14 21:13:18 -05:00
parent ed0dacb435
commit 32cffa34fa
7 changed files with 62 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -36,10 +36,6 @@ yarn-error.log*
.env .env
.env*.local .env*.local
.env*.production .env*.production
.env*.vercel
# vercel
.vercel
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo

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

@@ -312,54 +312,62 @@ 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="group relative bg-card hover:bg-accent/10 transition-colors p-5 rounded-2xl border shadow-sm space-y-4"> <div key={item.id} className="bg-card border rounded-xl p-4 transition-all shadow-sm group hover:border-primary/20">
<div className="flex gap-4"> <div className="flex-1 space-y-3">
<div className="flex-1 space-y-1.5"> {/* Description */}
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Description</Label> <div>
<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="What did you work on?" placeholder="Describe the work performed..."
className="bg-muted/30 border-transparent focus:border-input focus:bg-background transition-all font-medium" className="w-full text-sm font-medium"
/> />
</div> </div>
</div>
<div className="flex items-end gap-3"> {/* Controls Row */}
<div className="w-28 space-y-1.5"> <div className="flex flex-wrap items-center gap-3">
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Hours</Label> {/* Hours */}
<NumberInput <NumberInput
value={item.hours} value={item.hours}
onChange={v => onUpdateItem(index, "hours", v)} onChange={v => onUpdateItem(index, "hours", v)}
step={0.25} step={0.25}
min={0} min={0}
className="bg-muted/30" width="auto"
className="h-9 flex-1 min-w-[100px] font-mono"
suffix="h"
/> />
</div>
<div className="w-32 space-y-1.5"> {/* Rate */}
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Rate</Label>
<NumberInput <NumberInput
value={item.rate} value={item.rate}
onChange={v => onUpdateItem(index, "rate", v)} onChange={v => onUpdateItem(index, "rate", v)}
prefix="$" prefix="$"
min={0} min={0}
className="bg-muted/30" step={1}
width="auto"
className="h-9 flex-1 min-w-[100px] font-mono"
/> />
</div>
<div className="flex-1 flex justify-end items-center pb-2 text-sm font-medium text-muted-foreground"> {/* Amount */}
<span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-bold"> <div className="ml-auto">
<span className="text-primary font-semibold">
${(item.hours * item.rate).toFixed(2)} ${(item.hours * item.rate).toFixed(2)}
</span> </span>
</div> </div>
{/* Actions */}
<Button <Button
type="button"
variant="ghost" variant="ghost"
size="icon" size="sm"
className="h-10 w-10 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-xl"
onClick={() => onRemoveItem(index)} onClick={() => onRemoveItem(index)}
className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>
</div>
))} ))}
<Button variant="outline" onClick={handleAddNewItem} className="w-full border-dashed py-8 rounded-xl hover:bg-accent/50 hover:border-primary/50 text-muted-foreground hover:text-primary transition-all gap-2 group"> <Button variant="outline" onClick={handleAddNewItem} className="w-full border-dashed py-8 rounded-xl hover:bg-accent/50 hover:border-primary/50 text-muted-foreground hover:text-primary transition-all gap-2 group">
<div className="bg-muted group-hover:bg-primary/10 p-1 rounded-md transition-colors"> <div className="bg-muted group-hover:bg-primary/10 p-1 rounded-md transition-colors">

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

@@ -105,7 +105,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
hours: item.hours, hours: item.hours,
rate: item.rate, rate: item.rate,
amount: item.amount, amount: item.amount,
})) || []; })).sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) || [];
setFormData({ setFormData({
invoiceNumber: existingInvoice.invoiceNumber, invoiceNumber: existingInvoice.invoiceNumber,
businessId: existingInvoice.businessId ?? "", businessId: existingInvoice.businessId ?? "",
@@ -134,10 +134,11 @@ 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) => { const addItem = (date?: Date | unknown) => {
const validDate = date instanceof Date ? date : new Date();
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
items: [...prev.items, { id: crypto.randomUUID(), date: date ?? new Date(), description: "", hours: 1, rate: prev.defaultHourlyRate ?? 0, amount: prev.defaultHourlyRate ?? 0 }], items: [...prev.items, { id: crypto.randomUUID(), date: validDate, description: "", hours: 1, rate: prev.defaultHourlyRate ?? 0, amount: prev.defaultHourlyRate ?? 0 }],
})); }));
}; };
const removeItem = (idx: number) => { if (formData.items.length > 1) setFormData((prev) => ({ ...prev, items: prev.items.filter((_, i) => i !== idx) })); }; const removeItem = (idx: number) => { if (formData.items.length > 1) setFormData((prev) => ({ ...prev, items: prev.items.filter((_, i) => i !== idx) })); };
@@ -232,7 +233,9 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
status: formData.status, status: formData.status,
notes: formData.notes, notes: formData.notes,
taxRate: formData.taxRate, taxRate: formData.taxRate,
items: formData.items.map(i => ({ date: i.date, description: i.description, hours: i.hours, rate: i.rate, amount: i.hours * i.rate })), items: formData.items
.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
.map(i => ({ date: i.date, description: i.description, hours: i.hours, rate: i.rate, amount: i.hours * i.rate })),
}; };
if (invoiceId && invoiceId !== "new" && invoiceId !== undefined) await updateInvoice.mutateAsync({ id: invoiceId, ...payload }); if (invoiceId && invoiceId !== "new" && invoiceId !== undefined) await updateInvoice.mutateAsync({ id: invoiceId, ...payload });
else await createInvoice.mutateAsync(payload); else await createInvoice.mutateAsync(payload);

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

@@ -174,7 +174,7 @@ function SortableLineItem({
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 border-transparent bg-transparent hover:bg-muted/50 focus:bg-background focus:ring-1 focus:ring-ring transition-all rounded-md px-2 -ml-2" className="w-full text-sm font-medium"
/> />
</div> </div>
@@ -187,7 +187,8 @@ function SortableLineItem({
onUpdate(index, "date", date ?? new Date()) onUpdate(index, "date", date ?? new Date())
} }
size="sm" size="sm"
className="h-9 w-36" className="w-full sm:w-[180px]"
inputClassName="h-9"
/> />
{/* Hours */} {/* Hours */}
@@ -197,7 +198,8 @@ function SortableLineItem({
min={0} min={0}
step={0.25} step={0.25}
width="auto" width="auto"
className="h-9 w-32" className="h-9 flex-1 min-w-[100px] font-mono"
suffix="h"
/> />
{/* Rate */} {/* Rate */}
@@ -208,7 +210,7 @@ function SortableLineItem({
step={1} step={1}
prefix="$" prefix="$"
width="auto" width="auto"
className="h-9 w-32" className="h-9 flex-1 min-w-[100px] font-mono"
/> />
{/* Amount */} {/* Amount */}
@@ -281,6 +283,7 @@ function MobileLineItem({
date={item.date} date={item.date}
onDateChange={(date) => onUpdate(index, "date", date ?? new Date())} onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
size="sm" size="sm"
inputClassName="h-9"
/> />
</div> </div>

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

@@ -34,6 +34,7 @@ interface DatePickerProps {
disabled?: boolean; disabled?: boolean;
id?: string; id?: string;
size?: "sm" | "md" | "lg"; size?: "sm" | "md" | "lg";
inputClassName?: string;
} }
export function DatePicker({ export function DatePicker({
@@ -41,6 +42,7 @@ export function DatePicker({
onDateChange, onDateChange,
placeholder = "Tomorrow or next week", placeholder = "Tomorrow or next week",
className, className,
inputClassName,
disabled = false, disabled = false,
id, id,
size = "md", size = "md",
@@ -75,7 +77,7 @@ export function DatePicker({
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}
disabled={disabled} disabled={disabled}
className={cn("bg-background pr-10", sizeClasses[size], "w-full")} className={cn("bg-background pr-10", sizeClasses[size], "w-full", inputClassName)}
onChange={(e) => { onChange={(e) => {
setValue(e.target.value); setValue(e.target.value);
const parsedDate = parseDate(e.target.value); const parsedDate = parseDate(e.target.value);

6
src/components/ui/number-input.tsx
View File

@@ -36,8 +36,13 @@ export function NumberInput({
value ? value.toFixed(2) : "0.00", value ? value.toFixed(2) : "0.00",
); );
const inputRef = React.useRef<HTMLInputElement>(null);
React.useEffect(() => { React.useEffect(() => {
// Only update display value if the input is NOT focused
if (document.activeElement !== inputRef.current) {
setDisplayValue(value ? value.toFixed(2) : "0.00"); setDisplayValue(value ? value.toFixed(2) : "0.00");
}
}, [value]); }, [value]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -95,6 +100,7 @@ export function NumberInput({
<span className="text-muted-foreground text-xs">{prefix}</span> <span className="text-muted-foreground text-xs">{prefix}</span>
)} )}
<input <input
ref={inputRef}
id={id} id={id}
type="text" type="text"
inputMode="decimal" inputMode="decimal"

14
vercel.json
View File

@@ -1,14 +0,0 @@
{
"buildCommand": "bun run db:push && bun run build",
"installCommand": "bun install --frozen-lockfile",
"framework": "nextjs",
"functions": {
"app/api/**": {
"maxDuration": 30
},
"app/**": {
"maxDuration": 30
}
},
"crons": []
}