From 180f14dfb0266e819c0a7838c31ff320494b7a6c Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Sun, 14 Dec 2025 22:02:04 -0500
Subject: [PATCH] feat: improve invoice calendar item display and date picker
 icon button styling

---
 bun.lock                                      |   3 +
 package.json                                  |   1 +
 .../forms/invoice-calendar-view.tsx           |  87 +++--
 src/components/forms/invoice-form.tsx         |   2 +-
 src/components/forms/invoice-line-items.tsx   | 356 +++++++-----------
 src/components/ui/calendar.tsx                |   7 +-
 src/components/ui/date-picker.tsx             |   6 +-
 7 files changed, 195 insertions(+), 267 deletions(-)

diff --git a/bun.lock b/bun.lock
index e366b9e..a3dec39 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "name": "beenvoice",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -145,6 +146,8 @@
 
     "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
 
+    "@dnd-kit/modifiers": ["@dnd-kit/modifiers@9.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw=="],
+
     "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
 
     "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
diff --git a/package.json b/package.json
index e9694c2..83d6ce7 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.15",
diff --git a/src/components/forms/invoice-calendar-view.tsx b/src/components/forms/invoice-calendar-view.tsx
index 94e7697..b819248 100644
--- a/src/components/forms/invoice-calendar-view.tsx
+++ b/src/components/forms/invoice-calendar-view.tsx
@@ -255,8 +255,8 @@ export function InvoiceCalendarView({
                                         {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 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>
                                             ))
                                         ) : (
@@ -285,11 +285,11 @@ export function InvoiceCalendarView({
             >
                 <SheetContent side="right" className="w-[400px] sm:w-[540px] flex flex-col gap-0 p-0 sm:max-w-[540px]">
                     <SheetHeader className="p-6 border-b">
-                        <SheetTitle className="flex items-center gap-3 text-2xl">
-                            <div className="bg-primary/10 p-2.5 rounded-full">
+                        <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>
-                            {date ? format(date, "EEEE, MMMM do") : "Details"}
+                            <span className="break-words text-left">{date ? format(date, "EEEE, MMMM do") : "Details"}</span>
                         </SheetTitle>
                     </SheetHeader>
 
@@ -312,50 +312,48 @@ export function InvoiceCalendarView({
                             ) : (
                                 <div className="space-y-4">
                                     {selectedDateItems.map(({ item, index }) => (
-                                        <div key={item.id} className="bg-card border rounded-xl p-4 transition-all shadow-sm group hover:border-primary/20">
-                                            <div className="flex-1 space-y-3">
+                                        <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>
+                                                <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="w-full text-sm font-medium"
+                                                        className="pl-3 text-sm"
                                                     />
                                                 </div>
 
-                                                {/* Controls Row */}
-                                                <div className="flex flex-wrap items-center gap-3">
-                                                    {/* Hours */}
-                                                    <NumberInput
-                                                        value={item.hours}
-                                                        onChange={v => onUpdateItem(index, "hours", v)}
-                                                        step={0.25}
-                                                        min={0}
-                                                        width="auto"
-                                                        className="h-9 flex-1 min-w-[100px] font-mono"
-                                                        suffix="h"
-                                                    />
-
-                                                    {/* Rate */}
-                                                    <NumberInput
-                                                        value={item.rate}
-                                                        onChange={v => onUpdateItem(index, "rate", v)}
-                                                        prefix="$"
-                                                        min={0}
-                                                        step={1}
-                                                        width="auto"
-                                                        className="h-9 flex-1 min-w-[100px] font-mono"
-                                                    />
-
-                                                    {/* Amount */}
-                                                    <div className="ml-auto">
-                                                        <span className="text-primary font-semibold">
-                                                            ${(item.hours * item.rate).toFixed(2)}
-                                                        </span>
+                                                {/* 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>
 
-                                                    {/* Actions */}
+                                            {/* 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"
@@ -366,6 +364,17 @@ export function InvoiceCalendarView({
                                                         <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>
                                     ))}
diff --git a/src/components/forms/invoice-form.tsx b/src/components/forms/invoice-form.tsx
index 2906667..2f68a3b 100644
--- a/src/components/forms/invoice-form.tsx
+++ b/src/components/forms/invoice-form.tsx
@@ -134,7 +134,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
   }, [formData.items, formData.taxRate]);
 
   // Handlers (addItem, updateItem etc. - same as before)
-  const addItem = (date?: Date | unknown) => {
+  const addItem = (date?: unknown) => {
     const validDate = date instanceof Date ? date : new Date();
     setFormData((prev) => ({
       ...prev,
diff --git a/src/components/forms/invoice-line-items.tsx b/src/components/forms/invoice-line-items.tsx
index 28862e9..f77b6ce 100644
--- a/src/components/forms/invoice-line-items.tsx
+++ b/src/components/forms/invoice-line-items.tsx
@@ -1,26 +1,8 @@
 "use client";
 
-import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import {
   ChevronDown,
   ChevronUp,
-  GripVertical,
   Plus,
   Trash2,
 } from "lucide-react";
@@ -73,73 +55,30 @@ interface LineItemRowProps {
   isLast: boolean;
 }
 
-interface SortableLineItemProps {
-  item: InvoiceItem;
-  index: number;
-  canRemove: boolean;
-  onRemove: (index: number) => void;
-  onUpdate: (
-    index: number,
-    field: string,
-    value: string | number | Date,
-  ) => void;
-  onMoveUp: (index: number) => void;
-  onMoveDown: (index: number) => void;
-  isFirst: boolean;
-  isLast: boolean;
-}
-
-function SortableLineItem({
-  item,
-  index,
-  canRemove,
-  onRemove,
-  onUpdate,
-  onMoveUp,
-  onMoveDown,
-  isFirst,
-  isLast,
-}: SortableLineItemProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
-  return (
-    <motion.div
-      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-card border hidden rounded-xl p-4 md:block transition-all shadow-sm group hover:border-primary/20",
-        isDragging && "opacity-50 shadow-md rotate-1 scale-[1.01] z-50 ring-2 ring-primary/20",
-      )}
-    >
-      <div className="flex items-start gap-3">
-        {/* Drag Handle and Arrow Controls */}
-        <div className="mt-1 flex flex-col items-center gap-1">
-          <div
-            className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded-md transition-colors mt-2"
-            {...attributes}
-            {...listeners}
-          >
-            <GripVertical className="text-muted-foreground/50 hover:text-foreground h-4 w-4 transition-colors" />
-          </div>
+const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
+  (
+    {
+      item,
+      index,
+      canRemove,
+      onRemove,
+      onUpdate,
+      onMoveUp,
+      onMoveDown,
+      isFirst,
+      isLast,
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-card border hidden rounded-xl p-4 md:block transition-all shadow-sm group hover:border-primary/20",
+        )}
+      >
+        <div className="flex items-center gap-3">
+          {/* Arrow Controls */}
           <div className="flex flex-col gap-0.5">
             <Button
               type="button"
@@ -164,80 +103,81 @@ function SortableLineItem({
               <ChevronDown className="h-3 w-3" />
             </Button>
           </div>
-        </div>
 
-        {/* Main Content */}
-        <div className="flex-1 space-y-3">
-          {/* Description */}
-          <div>
-            <Input
-              value={item.description}
-              onChange={(e) => onUpdate(index, "description", e.target.value)}
-              placeholder="Describe the work performed..."
-              className="w-full text-sm font-medium"
-            />
-          </div>
-
-          {/* Controls Row */}
-          <div className="flex flex-wrap items-center gap-3">
-            {/* Date */}
-            <DatePicker
-              date={item.date}
-              onDateChange={(date) =>
-                onUpdate(index, "date", date ?? new Date())
-              }
-              size="sm"
-              className="w-full sm:w-[180px]"
-              inputClassName="h-9"
-            />
-
-            {/* Hours */}
-            <NumberInput
-              value={item.hours}
-              onChange={(value) => onUpdate(index, "hours", value)}
-              min={0}
-              step={0.25}
-              width="auto"
-              className="h-9 flex-1 min-w-[100px] font-mono"
-              suffix="h"
-            />
-
-            {/* Rate */}
-            <NumberInput
-              value={item.rate}
-              onChange={(value) => onUpdate(index, "rate", value)}
-              min={0}
-              step={1}
-              prefix="$"
-              width="auto"
-              className="h-9 flex-1 min-w-[100px] font-mono"
-            />
-
-            {/* Amount */}
-            <div className="ml-auto">
-              <span className="text-primary font-semibold">
-                ${(item.hours * item.rate).toFixed(2)}
-              </span>
+          {/* Main Content */}
+          <div className="flex-1 space-y-3">
+            {/* Description */}
+            <div>
+              <Input
+                value={item.description}
+                onChange={(e) => onUpdate(index, "description", e.target.value)}
+                placeholder="Describe the work performed..."
+                className="w-full text-sm font-medium"
+              />
             </div>
 
-            {/* Actions */}
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={() => onRemove(index)}
-              className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
-              disabled={!canRemove}
-              aria-label="Remove item"
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
+            {/* Controls Row */}
+            <div className="flex flex-wrap items-center gap-3">
+              {/* Date */}
+              <DatePicker
+                date={item.date}
+                onDateChange={(date) =>
+                  onUpdate(index, "date", date ?? new Date())
+                }
+                size="sm"
+                className="w-full sm:w-[180px]"
+                inputClassName="h-9"
+              />
+
+              {/* Hours */}
+              <NumberInput
+                value={item.hours}
+                onChange={(value) => onUpdate(index, "hours", value)}
+                min={0}
+                step={0.25}
+                width="auto"
+                className="h-9 flex-1 min-w-[100px] font-mono"
+                suffix="h"
+              />
+
+              {/* Rate */}
+              <NumberInput
+                value={item.rate}
+                onChange={(value) => onUpdate(index, "rate", value)}
+                min={0}
+                step={1}
+                prefix="$"
+                width="auto"
+                className="h-9 flex-1 min-w-[100px] font-mono"
+              />
+
+              {/* Amount */}
+              <div className="ml-auto">
+                <span className="text-primary font-semibold">
+                  ${(item.hours * item.rate).toFixed(2)}
+                </span>
+              </div>
+
+              {/* Actions */}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => onRemove(index)}
+                className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
+                disabled={!canRemove}
+                aria-label="Remove item"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
           </div>
         </div>
       </div>
-    </motion.div>
-  );
-}
+    );
+  },
+);
+LineItemCard.displayName = "LineItemCard";
 
 function MobileLineItem({
   item,
@@ -253,10 +193,6 @@ 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 }}
@@ -308,6 +244,7 @@ function MobileLineItem({
               step={1}
               prefix="$"
               width="full"
+              className="font-mono"
             />
           </div>
         </div>
@@ -375,77 +312,54 @@ export function InvoiceLineItems({
   onUpdateItem,
   onMoveUp,
   onMoveDown,
-  onReorderItems,
   className,
 }: InvoiceLineItemsProps) {
   const canRemoveItems = items.length > 1;
 
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-
-    if (active.id !== over?.id) {
-      const oldIndex = items.findIndex((item) => item.id === active.id);
-      const newIndex = items.findIndex((item) => item.id === over?.id);
-
-      const newItems = arrayMove(items, oldIndex, newIndex);
-      onReorderItems(newItems);
-    }
-  }
-
   return (
     <div className={cn("space-y-2", className)}>
-      {/* Desktop Cards with Drag and Drop */}
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={handleDragEnd}
-      >
-        <SortableContext
-          items={items.map((item) => item.id)}
-          strategy={verticalListSortingStrategy}
-        >
-          <AnimatePresence>
-            <div className="space-y-2">
-              {items.map((item, index) => (
-                <React.Fragment key={item.id}>
-                  {/* Desktop/Tablet Card with Drag and Drop */}
-                  <SortableLineItem
-                    item={item}
-                    index={index}
-                    canRemove={canRemoveItems}
-                    onRemove={onRemoveItem}
-                    onUpdate={onUpdateItem}
-                    onMoveUp={onMoveUp}
-                    onMoveDown={onMoveDown}
-                    isFirst={index === 0}
-                    isLast={index === items.length - 1}
-                  />
+      <AnimatePresence>
+        <div className="space-y-2">
+          {items.map((item, index) => (
+            <React.Fragment key={item.id}>
+              {/* Desktop/Tablet Card */}
+              <motion.div
+                layout
+                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" }}
+              >
+                <LineItemCard
+                  item={item}
+                  index={index}
+                  canRemove={canRemoveItems}
+                  onRemove={onRemoveItem}
+                  onUpdate={onUpdateItem}
+                  onMoveUp={onMoveUp}
+                  onMoveDown={onMoveDown}
+                  isFirst={index === 0}
+                  isLast={index === items.length - 1}
+                />
+              </motion.div>
 
-                  {/* Mobile Card */}
-                  <MobileLineItem
-                    item={item}
-                    index={index}
-                    canRemove={canRemoveItems}
-                    onRemove={onRemoveItem}
-                    onUpdate={onUpdateItem}
-                    onMoveUp={onMoveUp}
-                    onMoveDown={onMoveDown}
-                    isFirst={index === 0}
-                    isLast={index === items.length - 1}
-                  />
-                </React.Fragment>
-              ))}
-            </div>
-          </AnimatePresence>
-        </SortableContext>
-      </DndContext>
+              {/* Mobile Card */}
+              <MobileLineItem
+                item={item}
+                index={index}
+                canRemove={canRemoveItems}
+                onRemove={onRemoveItem}
+                onUpdate={onUpdateItem}
+                onMoveUp={onMoveUp}
+                onMoveDown={onMoveDown}
+                isFirst={index === 0}
+                isLast={index === items.length - 1}
+              />
+            </React.Fragment>
+          ))}
+        </div>
+      </AnimatePresence>
 
       {/* Add Item Button */}
       <div className="px-3 pt-3">
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index aa3a165..f093987 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -100,10 +100,11 @@ function Calendar({
           defaultClassNames.week_number
         ),
         day: cn(
-          "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
+          "relative w-full h-full p-0 text-center group/day aspect-square select-none",
+          props.mode !== "single" && "[&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.mode !== "single" && (props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md"),
           defaultClassNames.day
         ),
         range_start: cn(
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
index b38f39d..76ea2f9 100644
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -98,13 +98,13 @@ export function DatePicker({
           <Button
             variant="ghost"
             disabled={disabled}
-            className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            className="absolute top-1/2 right-2 size-6 p-0 -translate-y-1/2 text-primary/80 hover:text-primary transition-colors z-20"
           >
-            <CalendarIcon className="size-3.5" />
+            <CalendarIcon className="size-4" />
             <span className="sr-only">Select date</span>
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+        <PopoverContent className="w-auto overflow-hidden p-0 rounded-xl" align="end">
           <Calendar
             mode="single"
             selected={date}