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

src/components/ui/date-picker.tsx

@@ -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",
@@ -58,8 +60,8 @@ export function DatePicker({
   const inputWidthClass = className?.includes("w-full")
     ? "w-full"
     : className?.includes("w-32") ||
-        className?.includes("w-28") ||
-        className?.includes("w-36")
+      className?.includes("w-28") ||
+      className?.includes("w-36")
       ? className
       : "w-full md:w-32 md:min-w-32";
 
@@ -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);

src/components/ui/number-input.tsx

@@ -36,8 +36,13 @@ export function NumberInput({
     value ? value.toFixed(2) : "0.00",
   );
 
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
   React.useEffect(() => {
-    setDisplayValue(value ? value.toFixed(2) : "0.00");
+    // 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"