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*.local
.env*.production
.env*.vercel
# vercel
.vercel
# typescript
*.tsbuildinfo

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

@@ -312,54 +312,62 @@ export function InvoiceCalendarView({
) : (
<div className="space-y-4">
{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 className="flex gap-4">
<div className="flex-1 space-y-1.5">
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Description</Label>
<div key={item.id} className="bg-card border rounded-xl p-4 transition-all shadow-sm group hover:border-primary/20">
<div className="flex-1 space-y-3">
{/* Description */}
<div>
<Input
value={item.description}
onChange={(e) => onUpdateItem(index, "description", e.target.value)}
placeholder="What did you work on?"
className="bg-muted/30 border-transparent focus:border-input focus:bg-background transition-all font-medium"
placeholder="Describe the work performed..."
className="w-full text-sm font-medium"
/>
</div>
</div>
<div className="flex items-end gap-3">
<div className="w-28 space-y-1.5">
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Hours</Label>
{/* Controls Row */}
<div className="flex flex-wrap items-center gap-3">
{/* Hours */}
<NumberInput
value={item.hours}
onChange={v => onUpdateItem(index, "hours", v)}
step={0.25}
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">
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Rate</Label>
{/* Rate */}
<NumberInput
value={item.rate}
onChange={v => onUpdateItem(index, "rate", v)}
prefix="$"
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">
<span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-bold">
{/* 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="icon"
className="h-10 w-10 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-xl"
size="sm"
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>
</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">
<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,
rate: item.rate,
amount: item.amount,
})) || [];
})).sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) || [];
setFormData({
invoiceNumber: existingInvoice.invoiceNumber,
businessId: existingInvoice.businessId ?? "",
@@ -134,10 +134,11 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
}, [formData.items, formData.taxRate]);
// 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) => ({
...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) })); };
@@ -232,7 +233,9 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
status: formData.status,
notes: formData.notes,
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 });
else await createInvoice.mutateAsync(payload);

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

@@ -174,7 +174,7 @@ function SortableLineItem({
value={item.description}
onChange={(e) => onUpdate(index, "description", e.target.value)}
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>
@@ -187,7 +187,8 @@ function SortableLineItem({
onUpdate(index, "date", date ?? new Date())
}
size="sm"
className="h-9 w-36"
className="w-full sm:w-[180px]"
inputClassName="h-9"
/>
{/* Hours */}
@@ -197,7 +198,8 @@ function SortableLineItem({
min={0}
step={0.25}
width="auto"
className="h-9 w-32"
className="h-9 flex-1 min-w-[100px] font-mono"
suffix="h"
/>
{/* Rate */}
@@ -208,7 +210,7 @@ function SortableLineItem({
step={1}
prefix="$"
width="auto"
className="h-9 w-32"
className="h-9 flex-1 min-w-[100px] font-mono"
/>
{/* Amount */}
@@ -281,6 +283,7 @@ function MobileLineItem({
date={item.date}
onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
size="sm"
inputClassName="h-9"
/>
</div>

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

@@ -34,6 +34,7 @@ interface DatePickerProps {
disabled?: boolean;
id?: string;
size?: "sm" | "md" | "lg";
inputClassName?: string;
}
export function DatePicker({
@@ -41,6 +42,7 @@ export function DatePicker({
onDateChange,
placeholder = "Tomorrow or next week",
className,
inputClassName,
disabled = false,
id,
size = "md",
@@ -75,7 +77,7 @@ export function DatePicker({
value={value}
placeholder={placeholder}
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) => {
setValue(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",
);
const inputRef = React.useRef<HTMLInputElement>(null);
React.useEffect(() => {
// Only update display value if the input is NOT focused
if (document.activeElement !== inputRef.current) {
setDisplayValue(value ? value.toFixed(2) : "0.00");
}
}, [value]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -95,6 +100,7 @@ export function NumberInput({
<span className="text-muted-foreground text-xs">{prefix}</span>
)}
<input
ref={inputRef}
id={id}
type="text"
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": []
}