Added "Add new item" dialog

X-Lovable-Edit-ID: edt-f6f350c0-54fd-4ac0-9a9a-cf57eb18db35 Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-19 16:03:38 +00:00
parent cb5fe74a5f c6567de101
commit fd02cc3d78
3 changed files with 258 additions and 10 deletions
@@ -7,7 +7,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Checkbox } from "@/components/ui/checkbox";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/lib/auth";
-import { Plus, Trash2, Loader2, FilePlus } from "lucide-react";
+import { Plus, Trash2, Loader2, FilePlus, PlusCircle } from "lucide-react";
 import { formatCurrency, formatDate } from "@/lib/format";
 import { roundToSixth } from "@/lib/timer";
 import { toast } from "sonner";
@@ -18,6 +18,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select";
+import { NewFeeItemDialog } from "@/components/fees/new-fee-item-dialog";

 interface FeeItem {
  id: string;
@@ -53,6 +54,7 @@ export function CaseTimeTab({ caseRecord, onInvoice }: CaseTimeTabProps) {

  const [fees, setFees] = useState<FeeItem[]>([]);
  const [selectedFeeId, setSelectedFeeId] = useState<string>("");
+  const [showNewFee, setShowNewFee] = useState(false);

  const load = async () => {
    const { data, error } = await supabase
@@ -164,9 +166,20 @@ export function CaseTimeTab({ caseRecord, onInvoice }: CaseTimeTabProps) {
      {showForm && (
        <Card className="border-border/60">
          <CardContent className="p-4">
-            {fees.length > 0 && (
-              <div className="mb-3 space-y-1.5">
+            <div className="mb-3 space-y-1.5">
+              <div className="flex items-center justify-between">
                <Label className="text-xs">Fee schedule (optional)</Label>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 text-xs"
+                  onClick={() => setShowNewFee(true)}
+                >
+                  <PlusCircle className="h-3.5 w-3.5 mr-1" /> Add new item
+                </Button>
+              </div>
+              {fees.length > 0 && (
                <Select
                  value={selectedFeeId}
                  onValueChange={(v) => {
@@ -193,8 +206,8 @@ export function CaseTimeTab({ caseRecord, onInvoice }: CaseTimeTabProps) {
                    ))}
                  </SelectContent>
                </Select>
-              </div>
-            )}
+              )}
+            </div>
            <form onSubmit={submit} className="grid grid-cols-1 md:grid-cols-5 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">Date</Label>
@@ -273,6 +286,28 @@ export function CaseTimeTab({ caseRecord, onInvoice }: CaseTimeTabProps) {
          </table>
        </CardContent>
      </Card>
+
+      <NewFeeItemDialog
+        open={showNewFee}
+        onOpenChange={setShowNewFee}
+        defaultDescription={form.description}
+        defaultAmount={parseFloat(form.hourly_rate || "0") || undefined}
+        defaultBillable={form.billable}
+        onCreated={(item) => {
+          // Insert into local list and select it
+          setFees((prev) =>
+            [...prev, { id: item.id, name: item.name, description: item.description, amount: Number(item.amount), billable: item.billable }]
+              .sort((a, b) => a.name.localeCompare(b.name)),
+          );
+          setSelectedFeeId(item.id);
+          setForm((f) => ({
+            ...f,
+            hourly_rate: String(item.amount),
+            billable: item.billable,
+            description: item.description || item.name,
+          }));
+        }}
+      />
    </div>
  );
 }
@@ -0,0 +1,176 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { supabase } from "@/integrations/supabase/client";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+export interface NewFeeItem {
+  id: string;
+  name: string;
+  description: string | null;
+  amount: number;
+  pricing_type: "hourly" | "flat";
+  billable: boolean;
+}
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  defaultName?: string;
+  defaultDescription?: string;
+  defaultAmount?: number;
+  defaultPricingType?: "hourly" | "flat";
+  defaultBillable?: boolean;
+  onCreated?: (item: NewFeeItem) => void;
+}
+
+export function NewFeeItemDialog({
+  open,
+  onOpenChange,
+  defaultName = "",
+  defaultDescription = "",
+  defaultAmount,
+  defaultPricingType = "hourly",
+  defaultBillable = true,
+  onCreated,
+}: Props) {
+  const [name, setName] = useState(defaultName);
+  const [description, setDescription] = useState(defaultDescription);
+  const [amount, setAmount] = useState<string>(
+    defaultAmount != null ? String(defaultAmount) : "",
+  );
+  const [pricingType, setPricingType] = useState<"hourly" | "flat">(defaultPricingType);
+  const [billable, setBillable] = useState(defaultBillable);
+  const [saving, setSaving] = useState(false);
+
+  // Reset state whenever the dialog opens with new defaults
+  const handleOpenChange = (next: boolean) => {
+    if (next) {
+      setName(defaultName);
+      setDescription(defaultDescription);
+      setAmount(defaultAmount != null ? String(defaultAmount) : "");
+      setPricingType(defaultPricingType);
+      setBillable(defaultBillable);
+    }
+    onOpenChange(next);
+  };
+
+  const save = async () => {
+    if (!name.trim()) return toast.error("Name required");
+    const amt = parseFloat(amount || "0");
+    if (Number.isNaN(amt) || amt < 0) return toast.error("Amount must be 0 or more");
+    setSaving(true);
+    const { data, error } = await supabase
+      .from("fee_schedule_items")
+      .insert({
+        category: "time",
+        name: name.trim(),
+        description: description.trim() || null,
+        amount: amt,
+        pricing_type: pricingType,
+        billable,
+        active: true,
+      })
+      .select("id, name, description, amount, pricing_type, billable")
+      .single();
+    setSaving(false);
+    if (error) {
+      toast.error(error.message);
+      return;
+    }
+    toast.success("Fee item saved");
+    onCreated?.(data as NewFeeItem);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add new item</DialogTitle>
+          <DialogDescription>
+            Save this work item to your fee schedule for reuse on future entries.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label className="text-xs">Name</Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} autoFocus />
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">Description (optional)</Label>
+            <Textarea
+              rows={2}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              maxLength={1000}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs">Pricing</Label>
+              <Select
+                value={pricingType}
+                onValueChange={(v) => setPricingType(v as "hourly" | "flat")}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="hourly">Hourly rate</SelectItem>
+                  <SelectItem value="flat">Flat fee</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">
+                {pricingType === "flat" ? "Flat amount ($)" : "Rate ($/hr)"}
+              </Label>
+              <Input
+                type="number"
+                step="0.01"
+                min="0"
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+              />
+            </div>
+          </div>
+          <label className="flex items-center gap-2 text-sm">
+            <Checkbox checked={billable} onCheckedChange={(c) => setBillable(!!c)} />
+            Billable
+          </label>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+            Cancel
+          </Button>
+          <Button onClick={save} disabled={saving}>
+            {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            Save item
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -19,8 +19,9 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select";
-import { Pause, Play, Square, Timer as TimerIcon, Loader2, X } from "lucide-react";
+import { Pause, Play, Square, Timer as TimerIcon, Loader2, X, PlusCircle } from "lucide-react";
 import { toast } from "sonner";
+import { NewFeeItemDialog } from "@/components/fees/new-fee-item-dialog";

 interface ClientOption {
  id: string;
@@ -54,6 +55,7 @@ export function HeaderTimer() {
  const [billable, setBillable] = useState(true);
  const [feeItems, setFeeItems] = useState<FeeItem[]>([]);
  const [feeItemId, setFeeItemId] = useState<string>("");
+  const [showNewFee, setShowNewFee] = useState(false);

  // Load clients + cases the user can access (RLS handles filtering)
  useEffect(() => {
@@ -161,6 +163,7 @@ export function HeaderTimer() {
      : "bg-muted-foreground/40";

  return (
+    <>
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
@@ -243,9 +246,20 @@ export function HeaderTimer() {
            </Select>
          </div>

-          {feeItems.length > 0 && (
-            <div className="space-y-1.5">
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
              <Label className="text-xs">Fee item (optional)</Label>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-6 text-xs px-2"
+                onClick={() => setShowNewFee(true)}
+              >
+                <PlusCircle className="h-3.5 w-3.5 mr-1" /> Add new item
+              </Button>
+            </div>
+            {feeItems.length > 0 ? (
              <Select
                value={feeItemId || "__none"}
                onValueChange={(v) => handleSelectFee(v === "__none" ? "" : v)}
@@ -266,8 +280,12 @@ export function HeaderTimer() {
                  ))}
                </SelectContent>
              </Select>
-            </div>
-          )}
+            ) : (
+              <p className="text-[11px] text-muted-foreground">
+                No saved items yet. Click "Add new item" to save one for reuse.
+              </p>
+            )}
+          </div>

          <div className="space-y-1.5">
            <Label className="text-xs">Description</Label>
@@ -331,6 +349,25 @@ export function HeaderTimer() {
        </div>
      </PopoverContent>
    </Popover>
+    <NewFeeItemDialog
+      open={showNewFee}
+      onOpenChange={setShowNewFee}
+      defaultDescription={timer.description}
+      defaultAmount={effectiveRate || undefined}
+      defaultPricingType={isFlatFee ? "flat" : "hourly"}
+      defaultBillable={billable}
+      onCreated={(item) => {
+        setFeeItems((prev) =>
+          [...prev, { id: item.id, name: item.name, description: item.description, amount: Number(item.amount), pricing_type: item.pricing_type }]
+            .sort((a, b) => a.name.localeCompare(b.name)),
+        );
+        setFeeItemId(item.id);
+        if (!timer.description.trim()) {
+          setDescription(item.description?.trim() || item.name);
+        }
+      }}
+    />
+    </>
  );
 }