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

refactor: improve invoice editor UX and fix visual issues

Browse Source 
- Remove clock icons and hour text from calendar month view, show only activity bars
- Fix calendar week view mobile layout (2-column grid instead of vertical stack)
- Update invoice form skeleton to match actual layout structure
- Add client-side validation for empty invoice item descriptions with auto-scroll to error
- Fix hourly rate defaulting logic with proper type guards
- Update invoice details skeleton to match page structure with PageHeader
- Fix hydration error in sidebar (div inside button -> span)
- Improve dashboard chart color consistency (draft status now matches monthly metrics)
- Fix mobile header layout to prevent text squishing (vertical stack on mobile)
- Add IDs to invoice line items for scroll-into-view functionality
This commit is contained in:
Sean O'Connor
2025-12-11 19:57:54 -05:00
parent 39fdf16280
commit 1a3c2e08ce
27 changed files with 1685 additions and 2024 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
src/components/forms/invoice-calendar-view.tsx Normal file
View File

@@ -0,0 +1,375 @@
"use client";
import * as React from "react";
import { format, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, subWeeks, addWeeks, subMonths, addMonths } from "date-fns";
import { Calendar } from "~/components/ui/calendar";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "~/components/ui/dialog";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { NumberInput } from "~/components/ui/number-input";
import { Plus, Trash2, Clock, DollarSign, Calendar as CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "~/lib/utils";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
interface InvoiceItem {
id: string;
date: Date;
description: string;
hours: number;
rate: number;
amount: number;
}
interface InvoiceCalendarViewProps {
items: InvoiceItem[];
onUpdateItem: (
index: number,
field: string,
value: string | number | Date
) => void;
onAddItem: (date?: Date) => void;
onRemoveItem: (index: number) => void;
className?: string;
defaultHourlyRate: number | null;
}
export function InvoiceCalendarView({
items,
onUpdateItem,
onAddItem,
onRemoveItem,
className,
defaultHourlyRate,
}: InvoiceCalendarViewProps) {
const [date, setDate] = React.useState<Date | undefined>(undefined); // Start unselected
const [viewDate, setViewDate] = React.useState<Date>(new Date()); // Controls the view (month/week)
const [view, setView] = React.useState<"month" | "week">("month");
const [dialogOpen, setDialogOpen] = React.useState(false);
const [selectedDateItems, setSelectedDateItems] = React.useState<{ item: InvoiceItem; index: number }[]>([]);
// Function to get items for the selected date
const getItemsForDate = React.useCallback((targetDate: Date) => {
return items
.map((item, index) => ({ item, index }))
.filter((wrapper) => {
const itemDate = new Date(wrapper.item.date);
return isSameDay(itemDate, targetDate);
});
}, [items]);
const handleSelectDate = (newDate: Date | undefined) => {
if (!newDate) return;
setDate(newDate);
// Optionally update viewDate to match selection if desired, but user wants them decoupled during nav
// setViewDate(newDate);
const dateItems = getItemsForDate(newDate);
setSelectedDateItems(dateItems);
setDialogOpen(true);
};
// refresh selected items when main items change
React.useEffect(() => {
if (date && dialogOpen) {
setSelectedDateItems(getItemsForDate(date));
}
}, [items, date, dialogOpen, getItemsForDate]);
const handleAddNewItem = () => {
if (date) {
onAddItem(date);
}
};
// Week View Logic - Uses viewDate
const currentWeekStart = startOfWeek(viewDate);
const currentWeekEnd = endOfWeek(viewDate);
const weekDays = eachDayOfInterval({ start: currentWeekStart, end: currentWeekEnd });
const handleCloseDialog = (isOpen: boolean) => {
setDialogOpen(isOpen);
if (!isOpen) {
setDate(undefined);
}
};
return (
<div className={cn("flex flex-col gap-4 h-full w-full", className)}>
<div className="flex items-center justify-between px-4 pt-4 w-full gap-4">
{/* Navigation Controls */}
<div className="flex items-center gap-2">
{view === "week" ? (
<>
<Button variant="outline" size="icon" onClick={() => setViewDate(d => subWeeks(d, 1))} className="h-8 w-8 rounded-lg">
<ChevronLeft className="h-4 w-4" />
</Button>
<span className="text-sm font-medium w-36 text-center">
{`${format(currentWeekStart, "MMM d")} - ${format(currentWeekEnd, "MMM d")}`}
</span>
<Button variant="outline" size="icon" onClick={() => setViewDate(d => addWeeks(d, 1))} className="h-8 w-8 rounded-lg">
<ChevronRight className="h-4 w-4" />
</Button>
</>
) : (
<>
<Button variant="outline" size="icon" onClick={() => setViewDate(d => subMonths(d, 1))} className="h-8 w-8 rounded-lg">
<ChevronLeft className="h-4 w-4" />
</Button>
<span className="text-sm font-medium w-36 text-center">
{format(viewDate, "MMMM yyyy")}
</span>
<Button variant="outline" size="icon" onClick={() => setViewDate(d => addMonths(d, 1))} className="h-8 w-8 rounded-lg">
<ChevronRight className="h-4 w-4" />
</Button>
</>
)}
</div>
<div className="flex items-center space-x-2 ml-auto">
{/* View Switcher */}
<div className="bg-muted p-1 rounded-lg flex text-sm">
<button
type="button"
onClick={() => setView("month")}
className={cn("px-3 py-1.5 rounded-md transition-all text-center font-medium", view === "month" ? "bg-background shadow text-foreground" : "text-muted-foreground hover:text-foreground")}
>
Month
</button>
<button
type="button"
onClick={() => setView("week")}
className={cn("px-3 py-1.5 rounded-md transition-all text-center font-medium", view === "week" ? "bg-background shadow text-foreground" : "text-muted-foreground hover:text-foreground")}
>
Week
</button>
</div>
</div>
</div>
<div className="flex-1 w-full overflow-hidden">
{view === "month" ? (
<Calendar
mode="single"
selected={date}
onSelect={handleSelectDate}
month={viewDate}
onMonthChange={setViewDate}
className="rounded-md border-0 w-full p-0"
classNames={{
root: "w-full p-0",
months: "flex flex-col w-full",
month: "flex flex-col w-full space-y-4",
// Grid - Revert to Flex but Enforce 1/7th Width
// table: "w-full border-collapse", // No table-fixed
head_row: "flex w-full",
row: "flex w-full mt-2",
// Cells & Headers: Explicit width 14.28%
// Use calc(100%/7) via tailwind arbitrary or just flex bases.
// Better: w-[14.28%] flex-none (approx 1/7)
weekdays: "flex w-full border-b",
weekday: "w-[14.285%] flex-none text-muted-foreground font-normal text-[0.8rem] text-center pb-4",
week: "flex w-full mt-2",
cell: "w-[14.285%] flex-none h-32 border-b p-0 relative focus-within:relative focus-within:z-20 text-center text-sm",
// Hide internal navigation & caption entirely
nav: "hidden",
caption: "hidden",
day: cn(
"w-full h-full p-2 font-normal aria-selected:opacity-100 flex flex-col items-start justify-start gap-1 hover:bg-accent/50 hover:text-accent-foreground align-top transition-colors rounded-xl"
),
day_selected: "bg-primary/5 text-primary",
day_today: "bg-accent/20",
day_outside: "text-muted-foreground opacity-30",
}}
formatters={{
formatMonthCaption: () => "", // Clear default caption text to prevent duplication
}}
components={{
DayButton: (props) => {
const { day, modifiers, className, ...buttonProps } = props;
const DayDate = day.date;
const dayItems = getItemsForDate(DayDate);
// const totalHours = dayItems.reduce((acc, curr) => acc + curr.item.hours, 0); // Unused now
return (
<button
{...buttonProps}
type="button"
className={cn(
"relative flex h-full w-full flex-col items-start justify-between p-2 transition-all rounded-xl border border-transparent hover:border-border/50 hover:bg-secondary/30 text-left overflow-hidden",
// Selected State: Filled Box, No Outline
modifiers.selected && "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md transform scale-[0.98]",
modifiers.today && !modifiers.selected && "bg-accent/40 rounded-xl",
className
)}
>
<span className="text-sm font-medium z-10">{DayDate.getDate()}</span>
{dayItems.length > 0 && (
<div className="flex flex-col gap-1 w-full mt-1 overflow-hidden h-full justify-end pb-1">
<div className="flex flex-col gap-1 w-full mt-1">
{dayItems.slice(0, 4).map((item, idx) => (
<div key={idx} className={cn("h-1 w-full rounded-full", modifiers.selected ? "bg-primary-foreground/50" : "bg-primary/50")} />
))}
{dayItems.length > 4 && <div className={cn("h-1 w-1/3 rounded-full", modifiers.selected ? "bg-primary-foreground/30" : "bg-muted-foreground/30")} />}
</div>
</div>
)}
</button>
);
}
}}
/>
) : (
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 p-4 h-full w-full">
{weekDays.map((day) => {
const isSelected = date && isSameDay(day, date);
const isToday = isSameDay(day, new Date());
const dayItems = getItemsForDate(day);
const totalHours = dayItems.reduce((acc, curr) => acc + curr.item.hours, 0);
return (
<button
key={day.toString()}
type="button"
onClick={() => handleSelectDate(day)}
className={cn(
"flex flex-col h-full min-h-[400px] border rounded-3xl p-4 text-left transition-all hover:bg-accent/30 w-full",
isSelected ? "ring-2 ring-primary ring-offset-2 bg-primary/5" : "bg-background/40",
isToday && !isSelected ? "bg-accent/40" : ""
)}
>
<div className="flex flex-col items-center mb-4 pb-4 border-b w-full">
<span className="text-xs font-bold text-muted-foreground uppercase">{format(day, "EEE")}</span>
<span className="text-2xl font-light">{format(day, "d")}</span>
</div>
<div className="flex-1 space-y-2 w-full overflow-hidden">
{dayItems.length > 0 ? (
dayItems.map(({ item }, i) => (
<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="text-muted-foreground">{item.hours}h</div>
</div>
))
) : (
<div className="h-full flex items-center justify-center text-muted-foreground/20">
<Plus className="w-8 h-8" />
</div>
)}
</div>
{dayItems.length > 0 && (
<div className="pt-2 mt-auto text-center w-full">
<span className="text-sm font-semibold">{totalHours}h Total</span>
</div>
)}
</button>
);
})}
</div>
)}
</div>
{/* Dialog for Day Details - Now consistently used and rounded */}
<Dialog
open={dialogOpen}
onOpenChange={handleCloseDialog}
>
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-[600px] rounded-3xl">
<DialogHeader>
<DialogTitle className="flex items-center gap-2 text-xl">
<div className="bg-primary/10 p-2 rounded-full">
<CalendarIcon className="w-5 h-5 text-primary" />
</div>
{date ? format(date, "EEEE, MMMM do") : "Details"}
</DialogTitle>
</DialogHeader>
<div className="space-y-6 py-4">
{date && selectedDateItems.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center space-y-3 bg-secondary/20 rounded-3xl border border-dashed border-border">
<Clock className="w-12 h-12 text-muted-foreground/30" />
<div className="space-y-1">
<p className="font-medium text-foreground">No hours logged</p>
<p className="text-sm text-muted-foreground">Add time entries for this day.</p>
</div>
<Button onClick={handleAddNewItem} variant="secondary" className="mt-2 text-primary">
Start Logging
</Button>
</div>
) : (
<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-4 rounded-2xl border shadow-sm space-y-3">
<div className="flex gap-4">
<div className="flex-1 space-y-1.5">
<Label className="text-xs font-semibold text-muted-foreground">Description</Label>
<Input
value={item.description}
onChange={(e) => onUpdateItem(index, "description", e.target.value)}
placeholder="What did you work on?"
className="bg-background/50 border-transparent focus:border-input focus:bg-background transition-all"
/>
</div>
</div>
<div className="flex items-end gap-3">
<div className="w-24 space-y-1.5">
<Label className="text-xs font-semibold text-muted-foreground">Hours</Label>
<NumberInput
value={item.hours}
onChange={v => onUpdateItem(index, "hours", v)}
step={0.25}
min={0}
className="bg-background/50"
/>
</div>
<div className="w-28 space-y-1.5">
<Label className="text-xs font-semibold text-muted-foreground">Rate ($/hr)</Label>
<NumberInput
value={item.rate}
onChange={v => onUpdateItem(index, "rate", v)}
prefix="$"
min={0}
className="bg-background/50"
/>
</div>
<div className="flex-1 flex justify-end items-center pb-2 text-sm font-medium text-muted-foreground">
<span>${(item.hours * item.rate).toFixed(2)}</span>
</div>
<Button
variant="ghost"
size="icon"
className="h-10 w-10 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-xl"
onClick={() => onRemoveItem(index)}
>
<Trash2 className="w-4 h-4" />
</Button>
</div>
</div>
))}
<Button variant="outline" onClick={handleAddNewItem} className="w-full border-dashed py-6 rounded-xl hover:bg-accent/40 hover:border-primary/50 text-muted-foreground hover:text-primary transition-all">
<Plus className="w-4 h-4 mr-2" />
Add Another Entry
</Button>
</div>
)}
</div>
<DialogFooter>
<Button className="w-full sm:w-auto rounded-xl" onClick={() => handleCloseDialog(false)}>Done</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}

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

File diff suppressed because it is too large Load Diff

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

@@ -119,12 +119,14 @@ function SortableLineItem({
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-secondary hidden rounded-lg p-4 md:block",
"bg-secondary hidden rounded-lg p-4 md:block transition-all",
isDragging && "opacity-50",
)}
>
@@ -249,6 +251,11 @@ function MobileLineItem({
return (
<motion.div
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`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}

202
src/components/forms/invoice/invoice-meta-sidebar.tsx Normal file
View File

@@ -0,0 +1,202 @@
"use client";
import { cn } from "~/lib/utils";
import { Label } from "~/components/ui/label";
import { Input } from "~/components/ui/input";
import { Textarea } from "~/components/ui/textarea";
import { DatePicker } from "~/components/ui/date-picker";
import { NumberInput } from "~/components/ui/number-input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "~/components/ui/select";
import {
STATUS_OPTIONS,
} from "./types";
import type {
InvoiceFormData,
ClientType,
BusinessType,
} from "./types";
interface InvoiceMetaSidebarProps {
formData: InvoiceFormData;
updateField: <K extends keyof InvoiceFormData>(
field: K,
value: InvoiceFormData[K]
) => void;
clients: ClientType[] | undefined;
businesses: BusinessType[] | undefined;
className?: string;
}
export function InvoiceMetaSidebar({
formData,
updateField,
clients,
businesses,
className,
}: InvoiceMetaSidebarProps) {
return (
<div className={cn("flex flex-col gap-6 p-4 h-full", className)}>
<div className="space-y-4">
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
Invoice Details
</h3>
{/* Status */}
<div className="space-y-1.5">
<Label htmlFor="status" className="text-xs">Status</Label>
<Select
value={formData.status}
onValueChange={(value: "draft" | "sent" | "paid") =>
updateField("status", value)
}
>
<SelectTrigger className="bg-background/50">
<SelectValue />
</SelectTrigger>
<SelectContent>
{STATUS_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Invoice Number */}
<div className="space-y-1.5">
<Label htmlFor="invoiceNumber" className="text-xs">Invoice Number</Label>
<Input
id="invoiceNumber"
value={formData.invoiceNumber}
placeholder="INV-..."
disabled
className="bg-muted/50 font-mono text-sm"
/>
</div>
</div>
<div className="space-y-4">
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
Involved Parties
</h3>
{/* From (Business) */}
<div className="space-y-1.5">
<Label htmlFor="business" className="text-xs">From (Business)</Label>
<Select
value={formData.businessId}
onValueChange={(value) => updateField("businessId", value)}
>
<SelectTrigger aria-label="From Business" className="bg-background/50 text-sm">
<span className="truncate">
<SelectValue placeholder="Select business" />
</span>
</SelectTrigger>
<SelectContent>
{businesses?.map((business) => (
<SelectItem key={business.id} value={business.id}>
{business.name}{business.nickname ? ` (${business.nickname})` : ""}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Bill To (Client) */}
<div className="space-y-1.5">
<Label htmlFor="client" className="text-xs">Bill To (Client)</Label>
<Select
value={formData.clientId}
onValueChange={(value) => updateField("clientId", value)}
>
<SelectTrigger aria-label="Bill To Client" className="bg-background/50 text-sm">
<span className="truncate">
<SelectValue placeholder="Select client" />
</span>
</SelectTrigger>
<SelectContent>
{clients?.map((client) => (
<SelectItem key={client.id} value={client.id}>
{client.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-4">
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
Dates
</h3>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5">
<Label className="text-xs">Issued</Label>
<DatePicker
date={formData.issueDate}
onDateChange={(date) => updateField("issueDate", date ?? new Date())}
className="w-full bg-background/50"
/>
</div>
<div className="space-y-1.5">
<Label className="text-xs">Due</Label>
<DatePicker
date={formData.dueDate}
onDateChange={(date) => updateField("dueDate", date ?? new Date())}
className="w-full bg-background/50"
/>
</div>
</div>
</div>
<div className="space-y-4">
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
Config
</h3>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5">
<Label className="text-xs">Tax Rate</Label>
<NumberInput
value={formData.taxRate}
onChange={(v) => updateField("taxRate", v)}
min={0}
max={100}
step={1}
suffix="%"
className="bg-background/50"
/>
</div>
<div className="space-y-1.5">
<Label className="text-xs">Hourly Rate</Label>
<NumberInput
value={formData.defaultHourlyRate ?? 0}
onChange={(v) => updateField("defaultHourlyRate", v)}
min={0}
prefix="$"
placeholder={!formData.clientId ? "Select client" : "Rate"}
disabled={!formData.clientId}
className={cn("bg-background/50", !formData.clientId && "opacity-50")}
/>
</div>
</div>
</div>
<div className="space-y-1.5 flex-1">
<Label className="text-xs">Notes</Label>
<Textarea
value={formData.notes}
onChange={(e) => updateField("notes", e.target.value)}
placeholder="Notes for client..."
className="bg-background/50 resize-none h-24"
/>
</div>
</div>
);
}

108
src/components/forms/invoice/invoice-workspace.tsx Normal file
View File

@@ -0,0 +1,108 @@
"use client";
import * as React from "react";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card";
import { ScrollArea } from "~/components/ui/scroll-area";
import { List, Calendar as CalendarIcon, Plus } from "lucide-react";
import { InvoiceLineItems } from "../invoice-line-items";
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: any[]) => void;
className?: string;
}
export function InvoiceWorkspace({
formData,
viewMode,
setViewMode,
addItem,
removeItem,
updateItem,
moveItemUp,
moveItemDown,
reorderItems,
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>
</div>
);
}

32
src/components/forms/invoice/types.ts Normal file
View File

@@ -0,0 +1,32 @@
import { type RouterOutputs } from "~/trpc/react";
export type ClientType = RouterOutputs["clients"]["getAll"][number];
export type BusinessType = RouterOutputs["businesses"]["getAll"][number];
export interface InvoiceItem {
id: string;
date: Date;
description: string;
hours: number;
rate: number;
amount: number;
}
export interface InvoiceFormData {
invoiceNumber: string;
businessId: string;
clientId: string;
issueDate: Date;
dueDate: Date;
status: "draft" | "sent" | "paid";
notes: string;
taxRate: number;
defaultHourlyRate: number | null;
items: InvoiceItem[];
}
export const STATUS_OPTIONS = [
{ value: "draft", label: "Draft" },
{ value: "sent", label: "Sent" },
{ value: "paid", label: "Paid" },
] as const;

14
src/components/layout/dashboard-shell.tsx
View File

@@ -5,6 +5,7 @@ import { Sidebar } from "~/components/layout/sidebar";
import { SidebarProvider, useSidebar } from "~/components/layout/sidebar-provider";
import { cn } from "~/lib/utils";
import { Menu } from "lucide-react";
import { Logo } from "~/components/branding/logo";
import { Button } from "~/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
import { DashboardBreadcrumbs } from "~/components/navigation/dashboard-breadcrumbs";
@@ -21,15 +22,22 @@ function DashboardContent({ children }: { children: React.ReactNode }) {
</div>
{/* Mobile Sidebar (Sheet) */}
<div className="md:hidden fixed top-4 left-4 z-50">
<div className="md:hidden fixed top-0 left-0 right-0 h-16 bg-background/80 backdrop-blur-md border-b z-50 px-4 flex items-center">
<Sheet open={isMobileOpen} onOpenChange={setIsMobileOpen}>
<SheetTrigger asChild>
<Button variant="outline" size="icon" className="h-10 w-10 bg-background shadow-sm">
<Button variant="outline" size="icon" className="h-10 w-10 bg-background shadow-sm" suppressHydrationWarning>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle menu</span>
</Button>
</SheetTrigger>
{/* Mobile Link / Logo */}
<div className="ml-4 flex items-center gap-2">
<Logo size="sm" />
</div>
<SheetContent side="left" className="p-0 w-72">
<div className="sr-only">
<h2 id="mobile-nav-title">Navigation Menu</h2>
</div>
<Sidebar mobile onClose={() => setIsMobileOpen(false)} />
</SheetContent>
</Sheet>
@@ -39,7 +47,7 @@ function DashboardContent({ children }: { children: React.ReactNode }) {
<main
suppressHydrationWarning
className={cn(
"flex-1 min-h-screen transition-all duration-300 ease-in-out",
"flex-1 min-h-screen min-w-0 transition-all duration-300 ease-in-out",
// Desktop margins based on collapsed state
"md:ml-0",
// Sidebar is fixed at left: 1rem (16px), width: 16rem (256px) or 4rem (64px)

8
src/components/layout/floating-action-bar.tsx
View File

@@ -13,12 +13,15 @@ interface FloatingActionBarProps {
className?: string;
}
import { useSidebar } from "~/components/layout/sidebar-provider";
export function FloatingActionBar({
leftContent,
children,
className,
}: FloatingActionBarProps) {
const [isDocked, setIsDocked] = useState(false);
const { isCollapsed } = useSidebar();
useEffect(() => {
const handleScroll = () => {
@@ -48,9 +51,10 @@ export function FloatingActionBar({
<div
className={cn(
// Base positioning - always at bottom
"fixed right-0 left-0 z-50",
"fixed right-0 z-50 transition-all duration-300 ease-in-out",
// Safe area and sidebar adjustments
"pb-safe-area-inset-bottom md:left-64",
"pb-safe-area-inset-bottom left-0",
isCollapsed ? "md:left-24" : "md:left-[18rem]",
// Conditional centering based on dock state
isDocked ? "flex justify-center" : "",
// Dynamic bottom positioning

10
src/components/layout/page-header.tsx
View File

@@ -46,7 +46,8 @@ export function PageHeader({
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent pointer-events-none" />
<div className="p-6 relative">
<DashboardBreadcrumbs className="mb-4" />
<div className="flex items-start justify-between gap-4">
{/* UPDATED: flex-col on mobile to prevent squishing, row on sm+ */}
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="space-y-1">
<h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
{description && (
@@ -56,7 +57,7 @@ export function PageHeader({
)}
</div>
{children && (
<div className="flex flex-shrink-0 gap-2 sm:gap-3">
<div className="flex flex-shrink-0 gap-2 sm:gap-3 w-full sm:w-auto">
{children}
</div>
)}
@@ -66,7 +67,8 @@ export function PageHeader({
) : (
<>
<DashboardBreadcrumbs className="mb-2 sm:mb-4" />
<div className="flex items-start justify-between gap-4">
{/* UPDATED: flex-col on mobile to prevent squishing, row on sm+ */}
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="animate-fade-in-up space-y-1">
<h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
{description && (
@@ -78,7 +80,7 @@ export function PageHeader({
)}
</div>
{children && (
<div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3">
<div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3 w-full sm:w-auto">
{children}
</div>
)}

22
src/components/layout/sidebar.tsx
View File

@@ -160,21 +160,27 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className={cn("w-full justify-start p-0 hover:bg-transparent", collapsed && "justify-center")}>
<div className={cn("flex items-center gap-3", collapsed ? "justify-center" : "w-full")}>
{/* FIXED: Changed div to span to prevent hydration error */}
<span className={cn("flex items-center gap-3", collapsed ? "justify-center" : "w-full")}>
<Avatar className="h-9 w-9 border border-border">
<AvatarImage src={getGravatarUrl(session.user.email)} alt={session.user.name ?? "User"} />
<AvatarFallback>{session.user.name?.[0] ?? "U"}</AvatarFallback>
</Avatar>
{!collapsed && (
<div className="flex-1 min-w-0 text-left">
<p className="text-sm font-medium truncate">{session.user.name}</p>
<p className="text-xs text-muted-foreground truncate">{session.user.email}</p>
</div>
<span className="flex-1 min-w-0 text-left">
<span className="block text-sm font-medium truncate">{session.user.name}</span>
<span className="block text-xs text-muted-foreground truncate">{session.user.email}</span>
</span>
)}
</div>
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" align="end" className="w-56" sideOffset={10}>
<DropdownMenuContent
side="right"
align="end"
className="w-56 bg-background/80 backdrop-blur-xl border-border/50"
sideOffset={10}
>
<DropdownMenuLabel>
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{session.user.name}</p>
@@ -212,7 +218,7 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
<aside
className={cn(
"fixed top-4 bottom-4 left-4 z-30 hidden md:flex flex-col",
"bg-card border border-border shadow-xl rounded-xl transition-all duration-300 ease-in-out",
"bg-background/80 backdrop-blur-xl border-border/50 border shadow-xl rounded-3xl transition-all duration-300 ease-in-out",
isCollapsed ? "w-16" : "w-64"
)}
>

10
src/components/ui/badge.tsx
View File

@@ -4,17 +4,17 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "~/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
"inline-flex w-fit items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
"bg-secondary text-secondary-foreground shadow-sm border border-secondary/50 hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
"bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground border border-border", // Outline needs border
},
},
defaultVariants: {

10
src/components/ui/button.tsx
View File

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "~/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 button-hover",
{
variants: {
variant: {
@@ -22,9 +22,9 @@ const buttonVariants = cva(
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
sm: "h-8 rounded-lg px-3 text-xs",
lg: "h-10 rounded-xl px-8",
icon: "h-9 w-9 rounded-full",
},
},
defaultVariants: {
@@ -36,7 +36,7 @@ const buttonVariants = cva(
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}

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

@@ -1,26 +1,15 @@
"use client";
"use client"
import * as React from "react";
import * as React from "react"
import {
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
} from "lucide-react";
import {
type DayButton,
DayPicker,
getDefaultClassNames,
} from "react-day-picker";
} from "lucide-react"
import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
import { cn } from "~/lib/utils";
import { Button, buttonVariants } from "~/components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "~/components/ui/select";
import { cn } from "~/lib/utils"
import { Button, buttonVariants } from "~/components/ui/button"
function Calendar({
className,
@@ -28,35 +17,13 @@ function Calendar({
showOutsideDays = true,
captionLayout = "label",
buttonVariant = "ghost",
formatters: _formatters,
formatters,
components,
month,
onMonthChange,
...props
}: React.ComponentProps<typeof DayPicker> & {
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
}) {
const defaultClassNames = getDefaultClassNames();
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const currentYear = month?.getFullYear() ?? new Date().getFullYear();
const currentMonth = month?.getMonth() ?? new Date().getMonth();
const years = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
const defaultClassNames = getDefaultClassNames()
return (
<DayPicker
@@ -65,82 +32,97 @@ function Calendar({
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className,
className
)}
captionLayout={captionLayout}
month={month}
onMonthChange={onMonthChange}
formatters={{
formatMonthDropdown: (date) =>
date.toLocaleString("default", { month: "short" }),
...formatters,
}}
classNames={{
root: cn("w-fit", defaultClassNames.root),
months: cn(
"flex gap-4 flex-col md:flex-row relative",
defaultClassNames.months,
defaultClassNames.months
),
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
nav: cn(
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
defaultClassNames.nav,
defaultClassNames.nav
),
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
defaultClassNames.button_previous,
defaultClassNames.button_previous
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
defaultClassNames.button_next,
defaultClassNames.button_next
),
month_caption: cn(
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
defaultClassNames.month_caption,
defaultClassNames.month_caption
),
dropdowns: cn(
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
defaultClassNames.dropdowns,
defaultClassNames.dropdowns
),
dropdown_root: cn(
"relative has-focus:border-ring border border-input shadow-sm has-focus:ring-ring/50 has-focus:ring-2 h-8",
defaultClassNames.dropdown_root,
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
defaultClassNames.dropdown_root
),
dropdown: cn(
"absolute bg-transparent inset-0 w-full h-full opacity-0 cursor-pointer",
defaultClassNames.dropdown,
"absolute bg-popover inset-0 opacity-0",
defaultClassNames.dropdown
),
caption_label: cn(
"select-none font-medium text-sm hidden",
defaultClassNames.caption_label,
"select-none font-medium",
captionLayout === "label"
? "text-sm"
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
defaultClassNames.caption_label
),
table: "w-full border-collapse",
weekdays: cn("flex", defaultClassNames.weekdays),
weekday: cn(
"text-muted-foreground flex-1 font-normal text-[0.8rem] select-none",
defaultClassNames.weekday,
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
defaultClassNames.weekday
),
week: cn("flex w-full mt-2", defaultClassNames.week),
week_number_header: cn(
"select-none w-(--cell-size)",
defaultClassNames.week_number_header,
defaultClassNames.week_number_header
),
week_number: cn(
"text-[0.8rem] select-none text-muted-foreground",
defaultClassNames.week_number,
defaultClassNames.week_number
),
day: cn(
"relative w-full h-full p-0 text-center group/day aspect-square select-none",
defaultClassNames.day,
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
props.showWeekNumber
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
: "[&:first-child[data-selected=true]_button]:rounded-l-md",
defaultClassNames.day
),
range_start: cn(
"rounded-l-md bg-accent",
defaultClassNames.range_start
),
range_middle: cn("rounded-none", defaultClassNames.range_middle),
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
today: cn(
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
defaultClassNames.today
),
range_start: cn("", defaultClassNames.range_start),
range_middle: cn("", defaultClassNames.range_middle),
range_end: cn("", defaultClassNames.range_end),
today: cn("font-semibold", defaultClassNames.today),
outside: cn(
"text-muted-foreground aria-selected:text-muted-foreground",
defaultClassNames.outside,
defaultClassNames.outside
),
disabled: cn(
"text-muted-foreground opacity-50",
defaultClassNames.disabled,
defaultClassNames.disabled
),
hidden: cn("invisible", defaultClassNames.hidden),
...classNames,
@@ -154,13 +136,13 @@ function Calendar({
className={cn(className)}
{...props}
/>
);
)
},
Chevron: ({ className, orientation, ...props }) => {
if (orientation === "left") {
return (
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
);
)
}
if (orientation === "right") {
@@ -169,67 +151,14 @@ function Calendar({
className={cn("size-4", className)}
{...props}
/>
);
)
}
return (
<ChevronDownIcon className={cn("size-4", className)} {...props} />
);
)
},
DayButton: CalendarDayButton,
MonthCaption: ({ calendarMonth: _calendarMonth }) => {
if (captionLayout !== "dropdown") {
return <></>;
}
return (
<div className="calendar-custom-header flex items-center justify-center gap-2 py-2">
<Select
value={currentMonth.toString()}
onValueChange={(value) => {
const newDate = new Date(currentYear, parseInt(value), 1);
onMonthChange?.(newDate);
}}
>
<SelectTrigger
size="sm"
className="w-auto px-2 text-sm font-semibold"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{months.map((monthName, index) => (
<SelectItem key={index} value={index.toString()}>
{monthName}
</SelectItem>
))}
</SelectContent>
</Select>
<Select
value={currentYear.toString()}
onValueChange={(value) => {
const newDate = new Date(parseInt(value), currentMonth, 1);
onMonthChange?.(newDate);
}}
>
<SelectTrigger
size="sm"
className="w-auto px-2 text-sm font-semibold"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{years.map((year) => (
<SelectItem key={year} value={year.toString()}>
{year}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
},
WeekNumber: ({ children, ...props }) => {
return (
<td {...props}>
@@ -237,13 +166,13 @@ function Calendar({
{children}
</div>
</td>
);
)
},
...components,
}}
{...props}
/>
);
)
}
function CalendarDayButton({
@@ -252,12 +181,12 @@ function CalendarDayButton({
modifiers,
...props
}: React.ComponentProps<typeof DayButton>) {
// const _defaultClassNames = getDefaultClassNames();
const defaultClassNames = getDefaultClassNames()
const ref = React.useRef<HTMLButtonElement>(null);
const ref = React.useRef<HTMLButtonElement>(null)
React.useEffect(() => {
if (modifiers.focused) ref.current?.focus();
}, [modifiers.focused]);
if (modifiers.focused) ref.current?.focus()
}, [modifiers.focused])
return (
<Button
@@ -275,14 +204,13 @@ function CalendarDayButton({
data-range-end={modifiers.range_end}
data-range-middle={modifiers.range_middle}
className={cn(
"hover:bg-accent hover:text-foreground-foreground flex aspect-square size-auto h-8 w-full min-w-8 items-center justify-center border-0 text-sm leading-none font-normal shadow-none",
modifiers.selected && "bg-primary text-primary-foreground",
modifiers.today && !modifiers.selected && "bg-accent font-semibold",
className,
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
defaultClassNames.day,
className
)}
{...props}
/>
);
)
}
export { Calendar, CalendarDayButton };
export { Calendar, CalendarDayButton }

2
src/components/ui/card.tsx
View File

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground border-border/40 flex flex-col rounded-lg border shadow-lg",
"bg-background/80 backdrop-blur-xl border-border/50 text-card-foreground flex flex-col rounded-3xl border shadow-sm overflow-hidden",
className,
)}
{...props}

37
src/components/ui/image-with-skeleton.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { useState } from "react";
import Image, { type ImageProps } from "next/image";
import { cn } from "~/lib/utils";
import { Skeleton } from "~/components/ui/skeleton";
interface ImageWithSkeletonProps extends ImageProps {
containerClassName?: string;
}
export function ImageWithSkeleton({
className,
containerClassName,
alt,
...props
}: ImageWithSkeletonProps) {
const [isLoading, setIsLoading] = useState(true);
return (
<div className={cn("relative overflow-hidden", containerClassName)}>
{isLoading && (
<Skeleton className="absolute inset-0 h-full w-full animate-pulse" />
)}
<Image
className={cn(
"duration-700 ease-in-out",
isLoading
? "scale-110 blur-2xl grayscale"
: "scale-100 blur-0 grayscale-0",
className
)}
onLoad={() => setIsLoading(false)}
alt={alt}
{...props}
/>
</div>
);
}

4
src/components/ui/sonner.tsx
View File

@@ -1,10 +1,14 @@
"use client";
import { Toaster as Sonner, type ToasterProps } from "sonner";
import { useTheme } from "~/components/providers/theme-provider";
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme();
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
position="bottom-right"
closeButton