Update date picker, mobile styling

src/components/data/editable-invoice-items.tsx

@@ -21,14 +21,11 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
-import { Trash2, GripVertical, CalendarIcon } from "lucide-react";
-import { format } from "date-fns";
-import { Calendar } from "~/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/ui/popover";
+import { Label } from "~/components/ui/label";
+import { DatePicker } from "~/components/ui/date-picker";
+import { NumberInput } from "~/components/ui/number-input";
+import { Textarea } from "~/components/ui/textarea";
+import { Trash2, GripVertical, ChevronUp, ChevronDown } from "lucide-react";
 
 interface InvoiceItem {
   id: string;
@@ -50,6 +47,10 @@ function SortableItem({
   index,
   onItemChange,
   onRemove,
+  onMoveUp,
+  onMoveDown,
+  canMoveUp,
+  canMoveDown,
 }: {
   item: InvoiceItem;
   index: number;
@@ -59,6 +60,10 @@ function SortableItem({
     value: string | number | Date,
   ) => void;
   onRemove: (index: number) => void;
+  onMoveUp: (index: number) => void;
+  onMoveDown: (index: number) => void;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
 }) {
   const {
     attributes,
@@ -82,101 +87,193 @@ function SortableItem({
     <div
       ref={setNodeRef}
       style={style}
-      className={`grid grid-cols-12 items-center gap-2 rounded-lg border border-gray-200 p-4 transition-colors hover:border-emerald-300 dark:border-gray-700 dark:hover:border-emerald-500 ${
+      className={`card-secondary rounded-lg transition-colors ${
         isDragging ? "opacity-50 shadow-lg" : ""
       }`}
     >
-      {/* Drag Handle */}
-      <div className="col-span-1 flex h-10 items-center justify-center">
-        <button
-          type="button"
-          {...attributes}
-          {...listeners}
-          className="cursor-grab rounded p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 active:cursor-grabbing dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-400"
-        >
-          <GripVertical className="h-4 w-4" />
-        </button>
-      </div>
+      {/* Desktop Layout - Hidden on Mobile */}
+      <div className="hidden items-center gap-3 p-4 md:grid md:grid-cols-12">
+        {/* Drag Handle */}
+        <div className="col-span-1 flex items-center justify-center">
+          <button
+            type="button"
+            {...attributes}
+            {...listeners}
+            className="text-muted-foreground hover:bg-muted hover:text-foreground cursor-grab rounded p-2 transition-colors active:cursor-grabbing"
+          >
+            <GripVertical className="h-4 w-4" />
+          </button>
+        </div>
 
-      {/* Date */}
-      <div className="col-span-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              className="h-10 w-full justify-between border-gray-200 text-sm font-normal focus:border-emerald-500 focus:ring-emerald-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-            >
-              {item.date ? format(item.date, "MMM dd") : "Date"}
-              <CalendarIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
-            <Calendar
-              mode="single"
-              selected={item.date}
-              captionLayout="dropdown"
-              onSelect={(selectedDate: Date | undefined) => {
-                handleItemChange("date", selectedDate ?? new Date());
-              }}
-            />
-          </PopoverContent>
-        </Popover>
-      </div>
+        {/* Date */}
+        <div className="col-span-2">
+          <DatePicker
+            date={item.date}
+            onDateChange={(date) =>
+              handleItemChange("date", date ?? new Date())
+            }
+            size="sm"
+            className="w-full"
+          />
+        </div>
 
-      {/* Description */}
-      <div className="col-span-4">
-        <Input
-          value={item.description}
-          onChange={(e) => handleItemChange("description", e.target.value)}
-          placeholder="Work description"
-          className="h-10 border-gray-200 focus:border-emerald-500 focus:ring-emerald-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-        />
-      </div>
+        {/* Description */}
+        <div className="col-span-4">
+          <Input
+            value={item.description}
+            onChange={(e) => handleItemChange("description", e.target.value)}
+            placeholder="Work description"
+            className="h-9"
+          />
+        </div>
 
-      {/* Hours */}
-      <div className="col-span-1">
-        <Input
-          type="number"
-          step="0.25"
-          min="0"
-          value={item.hours}
-          onChange={(e) => handleItemChange("hours", e.target.value)}
-          placeholder="0"
-          className="h-10 border-gray-200 focus:border-emerald-500 focus:ring-emerald-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-        />
-      </div>
+        {/* Hours */}
+        <div className="col-span-1">
+          <NumberInput
+            value={item.hours}
+            onChange={(value) => handleItemChange("hours", value)}
+            min={0}
+            step={0.25}
+            placeholder="0"
+            width="full"
+          />
+        </div>
 
-      {/* Rate */}
-      <div className="col-span-2">
-        <Input
-          type="number"
-          step="0.01"
-          min="0"
-          value={item.rate}
-          onChange={(e) => handleItemChange("rate", e.target.value)}
-          placeholder="0.00"
-          className="h-10 border-gray-200 focus:border-emerald-500 focus:ring-emerald-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-        />
-      </div>
+        {/* Rate */}
+        <div className="col-span-2">
+          <NumberInput
+            value={item.rate}
+            onChange={(value) => handleItemChange("rate", value)}
+            min={0}
+            step={0.01}
+            placeholder="0.00"
+            prefix="$"
+            width="full"
+          />
+        </div>
 
-      {/* Amount */}
-      <div className="col-span-1">
-        <div className="flex h-10 items-center rounded-md border border-gray-200 bg-gray-50 px-3 font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
-          ${item.amount.toFixed(2)}
+        {/* Amount */}
+        <div className="col-span-1">
+          <div className="bg-muted/30 flex h-9 items-center rounded-md border px-3 font-medium text-emerald-600">
+            ${item.amount.toFixed(2)}
+          </div>
+        </div>
+
+        {/* Remove Button */}
+        <div className="col-span-1">
+          <Button
+            type="button"
+            onClick={() => onRemove(index)}
+            variant="ghost"
+            size="sm"
+            className="h-9 w-9 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
-      {/* Remove Button */}
-      <div className="col-span-1">
-        <Button
-          type="button"
-          onClick={() => onRemove(index)}
-          variant="outline"
-          size="sm"
-          className="h-10 w-10 border-red-200 p-0 text-red-700 hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-900/20"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
+      {/* Mobile Layout - Visible on Mobile Only */}
+      <div className="space-y-4 p-4 md:hidden">
+        {/* Header with Item Number and Controls */}
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground text-xs font-medium">
+            Item {index + 1}
+          </span>
+          <div className="flex items-center gap-1">
+            <Button
+              type="button"
+              onClick={() => onMoveUp(index)}
+              disabled={!canMoveUp}
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0"
+            >
+              <ChevronUp className="h-3 w-3" />
+            </Button>
+            <Button
+              type="button"
+              onClick={() => onMoveDown(index)}
+              disabled={!canMoveDown}
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0"
+            >
+              <ChevronDown className="h-3 w-3" />
+            </Button>
+            <Button
+              type="button"
+              onClick={() => onRemove(index)}
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+            >
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Description */}
+        <div className="space-y-1">
+          <Label className="text-xs font-medium">Description</Label>
+          <Textarea
+            value={item.description}
+            onChange={(e) => handleItemChange("description", e.target.value)}
+            placeholder="Description of work..."
+            className="min-h-[48px] resize-none text-sm"
+            rows={1}
+          />
+        </div>
+
+        {/* Date */}
+        <div className="space-y-1">
+          <Label className="text-xs font-medium">Date</Label>
+          <DatePicker
+            date={item.date}
+            onDateChange={(date) =>
+              handleItemChange("date", date ?? new Date())
+            }
+            size="sm"
+            className="w-full"
+          />
+        </div>
+
+        {/* Hours and Rate */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="space-y-1">
+            <Label className="text-xs font-medium">Hours</Label>
+            <NumberInput
+              value={item.hours}
+              onChange={(value) => handleItemChange("hours", value)}
+              min={0}
+              step={0.25}
+              placeholder="0"
+              width="full"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs font-medium">Rate</Label>
+            <NumberInput
+              value={item.rate}
+              onChange={(value) => handleItemChange("rate", value)}
+              min={0}
+              step={0.01}
+              placeholder="0.00"
+              prefix="$"
+              width="full"
+            />
+          </div>
+        </div>
+
+        {/* Amount */}
+        <div className="bg-muted/20 rounded-md border p-3">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground text-sm">Total Amount:</span>
+            <span className="font-mono text-lg font-bold text-emerald-600">
+              ${item.amount.toFixed(2)}
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -244,6 +341,20 @@ export function EditableInvoiceItems({
     onItemsChange(newItems);
   };
 
+  const handleMoveUp = (index: number) => {
+    if (index > 0) {
+      const newItems = arrayMove(items, index, index - 1);
+      onItemsChange(newItems);
+    }
+  };
+
+  const handleMoveDown = (index: number) => {
+    if (index < items.length - 1) {
+      const newItems = arrayMove(items, index, index + 1);
+      onItemsChange(newItems);
+    }
+  };
+
   // Show skeleton loading on server-side
   if (!isClient) {
     return (
@@ -251,28 +362,42 @@ export function EditableInvoiceItems({
         {items.map((item, _index) => (
           <div
             key={item.id}
-            className="grid animate-pulse grid-cols-12 items-center gap-2 rounded-lg border border-gray-200 p-4"
+            className="card-secondary animate-pulse rounded-lg p-4"
           >
-            <div className="col-span-1 flex h-10 items-center justify-center">
-              <div className="h-4 w-4 rounded bg-gray-300"></div>
+            {/* Desktop Skeleton */}
+            <div className="hidden grid-cols-12 gap-3 md:grid">
+              <div className="col-span-1">
+                <div className="bg-muted h-4 w-4 rounded"></div>
+              </div>
+              <div className="col-span-2">
+                <div className="bg-muted h-9 rounded"></div>
+              </div>
+              <div className="col-span-4">
+                <div className="bg-muted h-9 rounded"></div>
+              </div>
+              <div className="col-span-1">
+                <div className="bg-muted h-9 rounded"></div>
+              </div>
+              <div className="col-span-2">
+                <div className="bg-muted h-9 rounded"></div>
+              </div>
+              <div className="col-span-1">
+                <div className="bg-muted h-9 rounded"></div>
+              </div>
+              <div className="col-span-1">
+                <div className="bg-muted h-9 w-9 rounded"></div>
+              </div>
             </div>
-            <div className="col-span-2">
-              <div className="h-10 rounded bg-gray-300"></div>
-            </div>
-            <div className="col-span-4">
-              <div className="h-10 rounded bg-gray-300"></div>
-            </div>
-            <div className="col-span-1">
-              <div className="h-10 rounded bg-gray-300"></div>
-            </div>
-            <div className="col-span-2">
-              <div className="h-10 rounded bg-gray-300"></div>
-            </div>
-            <div className="col-span-1">
-              <div className="h-10 rounded bg-gray-300"></div>
-            </div>
-            <div className="col-span-1">
-              <div className="h-10 w-10 rounded bg-gray-300"></div>
+            {/* Mobile Skeleton */}
+            <div className="space-y-3 md:hidden">
+              <div className="bg-muted h-4 w-20 rounded"></div>
+              <div className="bg-muted h-16 rounded"></div>
+              <div className="bg-muted h-9 rounded"></div>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="bg-muted h-9 rounded"></div>
+                <div className="bg-muted h-9 rounded"></div>
+              </div>
+              <div className="bg-muted h-12 rounded"></div>
             </div>
           </div>
         ))}
@@ -281,27 +406,44 @@ export function EditableInvoiceItems({
   }
 
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={handleDragEnd}
-    >
-      <SortableContext
-        items={items.map((item) => item.id)}
-        strategy={verticalListSortingStrategy}
+    <>
+      {/* Desktop Header Labels - Hidden on Mobile */}
+      <div className="text-muted-foreground hidden items-center gap-3 px-4 pb-2 text-xs font-medium md:grid md:grid-cols-12">
+        <div className="col-span-1"></div>
+        <div className="col-span-2">Date</div>
+        <div className="col-span-4">Description</div>
+        <div className="col-span-1">Hours</div>
+        <div className="col-span-2">Rate</div>
+        <div className="col-span-1">Amount</div>
+        <div className="col-span-1"></div>
+      </div>
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
       >
-        <div className="space-y-3">
-          {items.map((item, index) => (
-            <SortableItem
-              key={item.id}
-              item={item}
-              index={index}
-              onItemChange={handleItemChange}
-              onRemove={onRemoveItem}
-            />
-          ))}
-        </div>
-      </SortableContext>
-    </DndContext>
+        <SortableContext
+          items={items.map((item) => item.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="space-y-3">
+            {items.map((item, index) => (
+              <SortableItem
+                key={item.id}
+                item={item}
+                index={index}
+                onItemChange={handleItemChange}
+                onRemove={onRemoveItem}
+                onMoveUp={handleMoveUp}
+                onMoveDown={handleMoveDown}
+                canMoveUp={index > 0}
+                canMoveDown={index < items.length - 1}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+    </>
   );
 }