Feat/phases 7 8 9 tags bulk billing

apps/api/src/services/collections.service.ts

@@ -231,12 +231,14 @@ export async function reorderCollections(userId: string, items: ReorderCollectio
     }
   }
 
-  for (const item of items) {
-    await db
-      .update(collections)
-      .set({ sortOrder: item.sortOrder, updatedAt: new Date() })
-      .where(eq(collections.id, item.id))
-  }
+  await db.transaction(async (tx) => {
+    for (const item of items) {
+      await tx
+        .update(collections)
+        .set({ sortOrder: item.sortOrder, updatedAt: new Date() })
+        .where(eq(collections.id, item.id))
+    }
+  })
 }
 
 export async function shareCollection(id: number, userId: string) {

apps/dashboard/src/components/color-picker.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react"
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+
+const PRESET_COLORS = [
+  "#6366f1",
+  "#ef4444",
+  "#22c55e",
+  "#3b82f6",
+  "#f97316",
+  "#a855f7",
+  "#ec4899",
+  "#14b8a6",
+  "#eab308",
+  "#06b6d4",
+  "#f43f5e",
+  "#f59e0b",
+]
+
+interface ColorPickerProps {
+  value: string
+  onChange: (color: string) => void
+}
+
+export default function ColorPicker({ value, onChange }: ColorPickerProps) {
+  const [customHex, setCustomHex] = useState("")
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap gap-2">
+        {PRESET_COLORS.map((color) => (
+          <button
+            key={color}
+            type="button"
+            onClick={() => onChange(color)}
+            className={cn(
+              "h-7 w-7 rounded-full border-2 transition-all hover:scale-110",
+              value === color
+                ? "border-foreground scale-110 ring-2 ring-foreground/20"
+                : "border-transparent"
+            )}
+            style={{ backgroundColor: color }}
+            aria-label={`Color ${color}`}
+          />
+        ))}
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-xs text-muted-foreground">Custom:</span>
+        <Input
+          type="text"
+          value={customHex}
+          onChange={(e) => {
+            setCustomHex(e.target.value)
+            if (/^#[0-9a-fA-F]{6}$/.test(e.target.value)) {
+              onChange(e.target.value)
+            }
+          }}
+          placeholder="#6366f1"
+          className="h-7 w-24 font-mono text-xs"
+        />
+        {value && (
+          <div
+            className="h-6 w-6 rounded-full border border-border"
+            style={{ backgroundColor: value }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

apps/dashboard/src/components/ui/progress.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils"
+
+interface ProgressProps {
+  value: number
+  max?: number
+  className?: string
+  indicatorClassName?: string
+}
+
+export default function Progress({ value, max = 100, className, indicatorClassName }: ProgressProps) {
+  const pct = Math.min(Math.max((value / max) * 100, 0), 100)
+
+  return (
+    <div
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      className={cn("h-2 w-full overflow-hidden rounded-full bg-muted", className)}
+    >
+      <div
+        className={cn("h-full rounded-full transition-all duration-300", indicatorClassName)}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  )
+}