feat: add administration page and account role management
- Implemented `AdministrationContent` component for managing account roles. - Created `AdministrationPage` to serve as the main entry point for administration tasks. - Added PDF preview functionality with `PdfPreviewFrame` component for invoice generation. - Introduced `InputColor` component for advanced color selection with various formats. - Established color conversion utilities in `color-converter.ts` for handling color formats. - Defined appearance-related schemas and types in `appearance.ts` for consistent theme management.
This commit is contained in:
@@ -143,6 +143,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
|
||||
// Load business data when editing
|
||||
useEffect(() => {
|
||||
if (business && mode === "edit") {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- Sync loaded business data into the edit form.
|
||||
setFormData({
|
||||
name: business.name,
|
||||
nickname: business.nickname ?? "",
|
||||
|
||||
@@ -119,6 +119,7 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
|
||||
// Load client data when editing
|
||||
useEffect(() => {
|
||||
if (client && mode === "edit") {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- Sync loaded client data into the edit form.
|
||||
setFormData({
|
||||
name: client.name,
|
||||
email: client.email ?? "",
|
||||
|
||||
@@ -56,7 +56,7 @@ function FilePreview({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-between border p-3",
|
||||
"flex items-center justify-between border p-3",
|
||||
getStatusColor(),
|
||||
)}
|
||||
>
|
||||
@@ -152,7 +152,7 @@ export function FileUpload({
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={cn(
|
||||
"cursor-pointer border-2 border-dashed p-8 text-center transition-colors",
|
||||
"cursor-pointer border-2 border-dashed p-8 text-center transition-colors",
|
||||
"hover:border-primary/40 hover:bg-primary/10",
|
||||
isDragActive && "border-primary/40 bg-primary/10",
|
||||
isDragReject && "border-destructive/40 bg-destructive/10",
|
||||
@@ -164,7 +164,7 @@ export function FileUpload({
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div
|
||||
className={cn(
|
||||
" p-3 transition-colors",
|
||||
"p-3 transition-colors",
|
||||
isDragActive ? "bg-primary/10" : "bg-muted",
|
||||
isDragReject && "bg-destructive/10",
|
||||
)}
|
||||
@@ -222,7 +222,7 @@ export function FileUpload({
|
||||
|
||||
{/* Error Summary */}
|
||||
{Object.keys(errors).length > 0 && (
|
||||
<div className="border-destructive/20 bg-destructive/10 border p-3">
|
||||
<div className="border-destructive/20 bg-destructive/10 border p-3">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<AlertCircle className="text-destructive h-4 w-4" />
|
||||
<span className="text-destructive text-sm font-medium">
|
||||
|
||||
@@ -1,398 +1,520 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { format, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, subWeeks, addWeeks, subMonths, addMonths } from "date-fns";
|
||||
import {
|
||||
format,
|
||||
startOfWeek,
|
||||
endOfWeek,
|
||||
eachDayOfInterval,
|
||||
isSameDay,
|
||||
subWeeks,
|
||||
addWeeks,
|
||||
subMonths,
|
||||
addMonths,
|
||||
} from "date-fns";
|
||||
import { Calendar } from "~/components/ui/calendar";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetFooter,
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetFooter,
|
||||
} from "~/components/ui/sheet";
|
||||
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, Calendar as CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
Clock,
|
||||
Calendar as CalendarIcon,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
|
||||
interface InvoiceItem {
|
||||
id: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
hours: number;
|
||||
rate: number;
|
||||
amount: number;
|
||||
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;
|
||||
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: _defaultHourlyRate,
|
||||
items,
|
||||
onUpdateItem,
|
||||
onAddItem,
|
||||
onRemoveItem,
|
||||
className,
|
||||
defaultHourlyRate: _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 [sheetOpen, setSheetOpen] = React.useState(false);
|
||||
// Derived state for selected date items - solves cursor jumping
|
||||
const selectedDateItems = React.useMemo(() => {
|
||||
if (!date) return [];
|
||||
return items
|
||||
.map((item, index) => ({ item, index }))
|
||||
.filter((wrapper) => {
|
||||
const itemDate = new Date(wrapper.item.date);
|
||||
return isSameDay(itemDate, date);
|
||||
});
|
||||
}, [items, date]);
|
||||
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 [sheetOpen, setSheetOpen] = React.useState(false);
|
||||
// Derived state for selected date items - solves cursor jumping
|
||||
const selectedDateItems = React.useMemo(() => {
|
||||
if (!date) return [];
|
||||
return items
|
||||
.map((item, index) => ({ item, index }))
|
||||
.filter((wrapper) => {
|
||||
const itemDate = new Date(wrapper.item.date);
|
||||
return isSameDay(itemDate, date);
|
||||
});
|
||||
}, [items, date]);
|
||||
|
||||
// Helper to get items for any date (for calendar view)
|
||||
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]);
|
||||
// Helper to get items for any date (for calendar view)
|
||||
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);
|
||||
setSheetOpen(true);
|
||||
};
|
||||
const handleSelectDate = (newDate: Date | undefined) => {
|
||||
if (!newDate) return;
|
||||
setDate(newDate);
|
||||
setSheetOpen(true);
|
||||
};
|
||||
|
||||
const handleAddNewItem = () => {
|
||||
if (date) {
|
||||
onAddItem(date);
|
||||
}
|
||||
};
|
||||
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 });
|
||||
// Week View Logic - Uses viewDate
|
||||
const currentWeekStart = startOfWeek(viewDate);
|
||||
const currentWeekEnd = endOfWeek(viewDate);
|
||||
const weekDays = eachDayOfInterval({
|
||||
start: currentWeekStart,
|
||||
end: currentWeekEnd,
|
||||
});
|
||||
|
||||
const handleCloseSheet = (isOpen: boolean) => {
|
||||
setSheetOpen(isOpen);
|
||||
if (!isOpen) {
|
||||
setDate(undefined);
|
||||
}
|
||||
};
|
||||
const handleCloseSheet = (isOpen: boolean) => {
|
||||
setSheetOpen(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-20 sm:h-28 md: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="flex gap-3 overflow-x-auto p-4 pb-6 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 min-h-[260px] flex-shrink-0 w-[120px] sm:flex-1 sm:w-auto border rounded-3xl p-3 text-left transition-all hover:bg-accent/30",
|
||||
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 line-clamp-2 text-wrap break-words">{item.description || "No description"}</div>
|
||||
<div className="text-muted-foreground whitespace-nowrap">{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>
|
||||
|
||||
{/* Sheet for Day Details */}
|
||||
<Sheet
|
||||
open={sheetOpen}
|
||||
onOpenChange={handleCloseSheet}
|
||||
>
|
||||
<SheetContent side="right" className="w-full max-w-full sm:w-[400px] sm:max-w-[540px] flex flex-col gap-0 p-0">
|
||||
<SheetHeader className="p-6 border-b">
|
||||
<SheetTitle className="flex items-center gap-3 text-2xl flex-wrap">
|
||||
<div className="bg-primary/10 p-2.5 rounded-full flex-shrink-0">
|
||||
<CalendarIcon className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<span className="break-words text-left">{date ? format(date, "EEEE, MMMM do") : "Details"}</span>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="space-y-6">
|
||||
{date && selectedDateItems.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center space-y-4 bg-secondary/20 rounded-3xl border border-dashed border-border/60">
|
||||
<div className="bg-background p-4 rounded-full shadow-sm">
|
||||
<Clock className="w-8 h-8 text-muted-foreground/50" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="font-semibold text-lg text-foreground">No hours logged</p>
|
||||
<p className="text-sm text-muted-foreground/80 max-w-[200px]">There are no time entries recorded for this day yet.</p>
|
||||
</div>
|
||||
<Button onClick={handleAddNewItem} className="mt-2" size="lg">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Log Time
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{selectedDateItems.map(({ item, index }) => (
|
||||
<div key={item.id} className="border-border bg-card overflow-hidden rounded-lg border group hover:border-primary/50 transition-colors">
|
||||
<div className="space-y-3 p-4">
|
||||
{/* Description */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-muted-foreground text-xs">Description</Label>
|
||||
<Input
|
||||
value={item.description}
|
||||
onChange={(e) => onUpdateItem(index, "description", e.target.value)}
|
||||
placeholder="Describe the work performed..."
|
||||
className="pl-3 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hours and Rate in a row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-muted-foreground text-xs">Hours</Label>
|
||||
<NumberInput
|
||||
value={item.hours}
|
||||
onChange={v => onUpdateItem(index, "hours", v)}
|
||||
step={0.25}
|
||||
min={0}
|
||||
width="full"
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* 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
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemoveItem(index)}
|
||||
className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</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>
|
||||
))}
|
||||
<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">
|
||||
<Plus className="w-4 h-4" />
|
||||
</div>
|
||||
<span>Add Another Entry</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<SheetFooter className="p-6 border-t bg-muted/10 mt-auto">
|
||||
<Button className="w-full sm:w-full rounded-xl h-12 text-base shadow-md" size="lg" onClick={() => handleCloseSheet(false)}>Done</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
return (
|
||||
<div className={cn("flex h-full w-full flex-col gap-4", className)}>
|
||||
<div className="flex w-full items-center justify-between gap-4 px-4 pt-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="w-36 text-center text-sm font-medium">
|
||||
{`${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="w-36 text-center text-sm font-medium">
|
||||
{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="ml-auto flex items-center space-x-2">
|
||||
{/* View Switcher */}
|
||||
<div className="bg-muted flex rounded-lg p-1 text-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("month")}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-center font-medium transition-all",
|
||||
view === "month"
|
||||
? "bg-background text-foreground shadow"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
Month
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("week")}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-center font-medium transition-all",
|
||||
view === "week"
|
||||
? "bg-background text-foreground shadow"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
Week
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex-1 overflow-hidden">
|
||||
{view === "month" ? (
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
onSelect={handleSelectDate}
|
||||
month={viewDate}
|
||||
onMonthChange={setViewDate}
|
||||
className="w-full rounded-md border-0 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-20 sm:h-28 md: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(
|
||||
"hover:border-border/50 hover:bg-secondary/30 relative flex h-full w-full flex-col items-start justify-between overflow-hidden rounded-xl border border-transparent p-2 text-left transition-all",
|
||||
// Selected State: Filled Box, No Outline
|
||||
modifiers.selected &&
|
||||
"bg-primary text-primary-foreground hover:bg-primary/90 scale-[0.98] transform shadow-md",
|
||||
modifiers.today &&
|
||||
!modifiers.selected &&
|
||||
"bg-accent/40 rounded-xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<span className="z-10 text-sm font-medium">
|
||||
{DayDate.getDate()}
|
||||
</span>
|
||||
{dayItems.length > 0 && (
|
||||
<div className="mt-1 flex h-full w-full flex-col justify-end gap-1 overflow-hidden pb-1">
|
||||
<div className="mt-1 flex w-full flex-col gap-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="flex w-full gap-3 overflow-x-auto p-4 pb-6">
|
||||
{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(
|
||||
"hover:bg-accent/30 flex min-h-[260px] w-[120px] flex-shrink-0 flex-col rounded-3xl border p-3 text-left transition-all sm:w-auto sm:flex-1",
|
||||
isSelected
|
||||
? "ring-primary bg-primary/5 ring-2 ring-offset-2"
|
||||
: "bg-background/40",
|
||||
isToday && !isSelected ? "bg-accent/40" : "",
|
||||
)}
|
||||
>
|
||||
<div className="mb-4 flex w-full flex-col items-center border-b pb-4">
|
||||
<span className="text-muted-foreground text-xs font-bold uppercase">
|
||||
{format(day, "EEE")}
|
||||
</span>
|
||||
<span className="text-2xl font-light">
|
||||
{format(day, "d")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex-1 space-y-2 overflow-hidden">
|
||||
{dayItems.length > 0 ? (
|
||||
dayItems.map(({ item }, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-background rounded-xl border p-2 text-xs shadow-sm"
|
||||
>
|
||||
<div className="line-clamp-2 font-medium text-wrap break-words">
|
||||
{item.description || "No description"}
|
||||
</div>
|
||||
<div className="text-muted-foreground whitespace-nowrap">
|
||||
{item.hours}h
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-muted-foreground/20 flex h-full items-center justify-center">
|
||||
<Plus className="h-8 w-8" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{dayItems.length > 0 && (
|
||||
<div className="mt-auto w-full pt-2 text-center">
|
||||
<span className="text-sm font-semibold">
|
||||
{totalHours}h Total
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sheet for Day Details */}
|
||||
<Sheet open={sheetOpen} onOpenChange={handleCloseSheet}>
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="flex w-full max-w-full flex-col gap-0 p-0 sm:w-[400px] sm:max-w-[540px]"
|
||||
>
|
||||
<SheetHeader className="border-b p-6">
|
||||
<SheetTitle className="flex flex-wrap items-center gap-3 text-2xl">
|
||||
<div className="bg-primary/10 flex-shrink-0 rounded-full p-2.5">
|
||||
<CalendarIcon className="text-primary h-6 w-6" />
|
||||
</div>
|
||||
<span className="text-left break-words">
|
||||
{date ? format(date, "EEEE, MMMM do") : "Details"}
|
||||
</span>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="space-y-6">
|
||||
{date && selectedDateItems.length === 0 ? (
|
||||
<div className="bg-secondary/20 border-border/60 flex flex-col items-center justify-center space-y-4 rounded-3xl border border-dashed py-16 text-center">
|
||||
<div className="bg-background rounded-full p-4 shadow-sm">
|
||||
<Clock className="text-muted-foreground/50 h-8 w-8" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-foreground text-lg font-semibold">
|
||||
No hours logged
|
||||
</p>
|
||||
<p className="text-muted-foreground/80 max-w-[200px] text-sm">
|
||||
There are no time entries recorded for this day yet.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleAddNewItem} className="mt-2" size="lg">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Log Time
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{selectedDateItems.map(({ item, index }) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border-border bg-card group hover:border-primary/50 overflow-hidden rounded-lg border transition-colors"
|
||||
>
|
||||
<div className="space-y-3 p-4">
|
||||
{/* Description */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-muted-foreground text-xs">
|
||||
Description
|
||||
</Label>
|
||||
<Input
|
||||
value={item.description}
|
||||
onChange={(e) =>
|
||||
onUpdateItem(index, "description", e.target.value)
|
||||
}
|
||||
placeholder="Describe the work performed..."
|
||||
className="pl-3 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hours and Rate in a row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-muted-foreground text-xs">
|
||||
Hours
|
||||
</Label>
|
||||
<NumberInput
|
||||
value={item.hours}
|
||||
onChange={(v) => onUpdateItem(index, "hours", v)}
|
||||
step={0.25}
|
||||
min={0}
|
||||
width="full"
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* 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
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemoveItem(index)}
|
||||
className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</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>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleAddNewItem}
|
||||
className="hover:bg-accent/50 hover:border-primary/50 text-muted-foreground hover:text-primary group w-full gap-2 rounded-xl border-dashed py-8 transition-all"
|
||||
>
|
||||
<div className="bg-muted group-hover:bg-primary/10 rounded-md p-1 transition-colors">
|
||||
<Plus className="h-4 w-4" />
|
||||
</div>
|
||||
<span>Add Another Entry</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<SheetFooter className="bg-muted/10 mt-auto border-t p-6">
|
||||
<Button
|
||||
className="h-12 w-full rounded-xl text-base shadow-md sm:w-full"
|
||||
size="lg"
|
||||
onClick={() => handleCloseSheet(false)}
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -93,12 +93,8 @@ function plainTextToHtml(value: string) {
|
||||
.replace(/\n/g, "<br>");
|
||||
}
|
||||
|
||||
export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
|
||||
const router = useRouter();
|
||||
const utils = api.useUtils();
|
||||
|
||||
// State
|
||||
const [formData, setFormData] = useState<InvoiceFormData>({
|
||||
function createDefaultInvoiceFormData(): InvoiceFormData {
|
||||
return {
|
||||
invoiceNumber: `INV-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${Date.now().toString().slice(-6)}`,
|
||||
invoicePrefix: "#",
|
||||
businessId: "",
|
||||
@@ -121,7 +117,17 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
|
||||
amount: 0,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
|
||||
const router = useRouter();
|
||||
const utils = api.useUtils();
|
||||
|
||||
// State
|
||||
const [formData, setFormData] = useState<InvoiceFormData>(
|
||||
createDefaultInvoiceFormData,
|
||||
);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
@@ -153,6 +159,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
|
||||
|
||||
// Init Effects (Same as before)
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- Reset initialization state when the routed invoice changes.
|
||||
setInitialized(false);
|
||||
}, [invoiceId]);
|
||||
useEffect(() => {
|
||||
@@ -167,6 +174,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
|
||||
rate: item.rate,
|
||||
amount: item.amount,
|
||||
})) || [];
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- Sync loaded invoice data into the edit form.
|
||||
setFormData({
|
||||
invoiceNumber: existingInvoice.invoiceNumber,
|
||||
invoicePrefix: existingInvoice.invoicePrefix ?? "#",
|
||||
|
||||
@@ -7,196 +7,212 @@ 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,
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "~/components/ui/select";
|
||||
import {
|
||||
STATUS_OPTIONS,
|
||||
} from "./types";
|
||||
import type {
|
||||
InvoiceFormData,
|
||||
ClientType,
|
||||
BusinessType,
|
||||
} from "./types";
|
||||
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;
|
||||
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,
|
||||
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>
|
||||
return (
|
||||
<div className={cn("flex h-full flex-col gap-6 p-4", className)}>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
|
||||
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>
|
||||
{/* 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="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
|
||||
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="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
|
||||
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="bg-background/50 w-full"
|
||||
/>
|
||||
</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="bg-background/50 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
|
||||
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="flex-1 space-y-1.5">
|
||||
<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 h-24 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user