feat: implement staff price adjustment feature for bookings

apps/edr-freight-web/backoffice/src/components/bookings/BookingPricingSummary.tsx

@@ -1,50 +1,171 @@
-import { Banknote, Receipt } from "lucide-react";
-import { Paper, Stack, Group, Text, Divider } from "@mantine/core";
+import { useState } from "react";
+import { Banknote, Pencil, Receipt } from "lucide-react";
+import {
+  Button,
+  Divider,
+  Group,
+  NumberInput,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
 
 import type { BookingDetail } from "@/types/booking";
+import { bookingsService } from "@/services/bookings.service";
 
 import { SectionCard } from "./detail/SectionCard";
 import { detailStyles } from "./detail/booking-detail.styles";
 
 export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
-  const amount = Number(booking.totalAmount);
-  const modifiers = booking.cargoModifiers ?? [];
+  const qc = useQueryClient();
+  const computed = Number(booking.totalAmount);
+  const isAdjusted =
+    booking.adjustedTotalAmount !== null &&
+    booking.adjustedTotalAmount !== undefined;
+  const effective = isAdjusted ? Number(booking.adjustedTotalAmount) : computed;
+
+  const lineItems = booking.pricingBreakdown?.lineItems ?? [];
+
+  const [editing, setEditing] = useState(false);
+  const [amount, setAmount] = useState<number | "">(effective);
+  const [reason, setReason] = useState("");
+
+  const adjustMutation = useMutation({
+    mutationFn: (payload: { amount: number | null; reason?: string }) =>
+      bookingsService.adjustPrice(booking.id, payload.amount, payload.reason),
+    onSuccess: () => {
+      toast.success("Price updated");
+      setEditing(false);
+      qc.invalidateQueries({ queryKey: ["bookings"] });
+    },
+    onError: () => toast.error("Could not update price"),
+  });
+
+  const fmt = (n: number) =>
+    `${booking.paymentCurrency} ${n.toLocaleString(undefined, { minimumFractionDigits: 2 })}`;
 
   return (
     <SectionCard icon={Banknote} title="Pricing & payment">
       <Stack gap="md">
         <Paper radius="md" withBorder p="md" style={detailStyles.highlightCard}>
-          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
-            Total amount
-          </Text>
-          <Text
-            size="xl"
-            fw={700}
-            c="edr-green.9"
-            mt={4}
-            style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
-          >
-            {booking.paymentCurrency}{" "}
-            {amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
-          </Text>
+          <Group justify="space-between" align="flex-start">
+            <div>
+              <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+                {isAdjusted ? "Adjusted total" : "Total amount"}
+              </Text>
+              <Text
+                size="xl"
+                fw={700}
+                c="edr-green.9"
+                mt={4}
+                style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
+              >
+                {fmt(effective)}
+              </Text>
+              {isAdjusted && (
+                <Text size="xs" c="dimmed" mt={2}>
+                  Computed: {fmt(computed)}
+                  {booking.adjustmentReason ? ` · ${booking.adjustmentReason}` : ""}
+                </Text>
+              )}
+            </div>
+            {!editing && (
+              <Button
+                size="compact-xs"
+                variant="light"
+                leftSection={<Pencil size={13} />}
+                onClick={() => {
+                  setAmount(effective);
+                  setEditing(true);
+                }}
+              >
+                Adjust
+              </Button>
+            )}
+          </Group>
+
+          {editing && (
+            <Stack gap="xs" mt="md">
+              <NumberInput
+                label="New total"
+                value={amount}
+                onChange={(v) => setAmount(v === "" ? "" : Number(v))}
+                min={0}
+                radius="md"
+                prefix={`${booking.paymentCurrency} `}
+                thousandSeparator=","
+              />
+              <Textarea
+                label="Reason (optional)"
+                value={reason}
+                onChange={(e) => setReason(e.currentTarget.value)}
+                autosize
+                minRows={2}
+                radius="md"
+              />
+              <Group justify="space-between" mt={4}>
+                {isAdjusted ? (
+                  <Button
+                    size="compact-sm"
+                    variant="subtle"
+                    color="red"
+                    loading={adjustMutation.isPending}
+                    onClick={() =>
+                      adjustMutation.mutate({ amount: null })
+                    }
+                  >
+                    Clear adjustment
+                  </Button>
+                ) : (
+                  <span />
+                )}
+                <Group gap="xs">
+                  <Button
+                    size="compact-sm"
+                    variant="default"
+                    onClick={() => setEditing(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    size="compact-sm"
+                    color="edr-green"
+                    loading={adjustMutation.isPending}
+                    disabled={amount === ""}
+                    onClick={() =>
+                      adjustMutation.mutate({
+                        amount: Number(amount),
+                        reason: reason.trim() || undefined,
+                      })
+                    }
+                  >
+                    Save
+                  </Button>
+                </Group>
+              </Group>
+            </Stack>
+          )}
         </Paper>
 
         <Row label="Payment status" value={booking.paymentStatus} />
         {booking.pnrCode && <Row label="PNR code" value={booking.pnrCode} mono />}
 
-        {modifiers.length > 0 && (
+        {lineItems.length > 0 && (
           <>
             <Divider color="var(--mantine-color-gray-2)" />
             <Group gap={6}>
               <Receipt size={13} color="var(--mantine-color-gray-5)" />
               <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
-                Surcharges applied
+                Price breakdown
               </Text>
             </Group>
             <Stack gap="xs">
-              {modifiers.map((m) => (
+              {lineItems.map((li, i) => (
                 <Group
-                  key={m.id}
+                  key={`${li.code}-${i}`}
                   justify="space-between"
                   px="sm"
                   py={6}
@@ -55,10 +176,10 @@ export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
                   }}
                 >
                   <Text size="sm" c="dimmed">
-                    Modifier
+                    {li.description}
                   </Text>
                   <Text size="sm" fw={600} style={{ fontVariantNumeric: "tabular-nums" }}>
-                    {Number(m.calculatedAmount).toLocaleString()}
+                    {Number(li.amount).toLocaleString()} {li.currency}
                   </Text>
                 </Group>
               ))}