feat: improve invoice calendar item display and date picker icon button styling

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=="],

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",

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="font-medium line-clamp-2 text-wrap break-words">{item.description || "No description"}</div>
-                                                    <div className="text-muted-foreground">{item.hours}h</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">
+                        <SheetTitle className="flex items-center gap-3 text-2xl flex-wrap">
-                            <div className="bg-primary/10 p-2.5 rounded-full">
+                            <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 key={item.id} className="border-border bg-card overflow-hidden rounded-lg border group hover:border-primary/50 transition-colors">
-                                            <div className="flex-1 space-y-3">
+                                            <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 */}
+                                                {/* Hours and Rate in a row */}
-                                                <div className="flex flex-wrap items-center gap-3">
+                                                <div className="grid grid-cols-2 gap-3">
-                                                    {/* Hours */}
+                                                    <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="auto"
+                                                            width="full"
-                                                        className="h-9 flex-1 min-w-[100px] font-mono"
-                                                        suffix="h"
                                                         />
-
+                                                    </div>
-                                                    {/* Rate */}
+                                                    <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="auto"
+                                                            width="full"
-                                                        className="h-9 flex-1 min-w-[100px] font-mono"
                                                         />
-
+                                                    </div>
-                                                    {/* Amount */}
+                                                </div>
-                                                    <div className="ml-auto">
-                                                        <span className="text-primary font-semibold">
-                                                            ${(item.hours * item.rate).toFixed(2)}
-                                                        </span>
                                             </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>
                                     ))}

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,

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,23 +55,9 @@ interface LineItemRowProps {
   isLast: boolean;
 }
 
-interface SortableLineItemProps {
+const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
-  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,
@@ -99,47 +67,18 @@ function SortableLineItem({
       onMoveDown,
       isFirst,
       isLast,
-}: SortableLineItemProps) {
+    },
-  const {
+    ref,
-    attributes,
+  ) => {
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
     return (
-    <motion.div
+      <div
-      ref={setNodeRef}
+        ref={ref}
-      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">
+        <div className="flex items-center gap-3">
-        {/* Drag Handle and Arrow Controls */}
+          {/* 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>
           <div className="flex flex-col gap-0.5">
             <Button
               type="button"
@@ -164,7 +103,6 @@ function SortableLineItem({
               <ChevronDown className="h-3 w-3" />
             </Button>
           </div>
-        </div>
 
           {/* Main Content */}
           <div className="flex-1 space-y-3">
@@ -235,9 +173,11 @@ function SortableLineItem({
             </div>
           </div>
         </div>
-    </motion.div>
+      </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,48 +312,26 @@ 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 */}
+              {/* Desktop/Tablet Card */}
-                  <SortableLineItem
+              <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}
@@ -427,6 +342,7 @@ export function InvoiceLineItems({
                   isFirst={index === 0}
                   isLast={index === items.length - 1}
                 />
+              </motion.div>
 
               {/* Mobile Card */}
               <MobileLineItem
@@ -444,8 +360,6 @@ export function InvoiceLineItems({
           ))}
         </div>
       </AnimatePresence>
-        </SortableContext>
-      </DndContext>
 
       {/* Add Item Button */}
       <div className="px-3 pt-3">

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",
+          "relative w-full h-full p-0 text-center group/day aspect-square select-none",
-          props.showWeekNumber
+          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(

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}