ui improvemnt

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

@@ -0,0 +1,49 @@
+import { FileText, MessageSquare } from "lucide-react";
+import { Group, Stack, Text, Badge, ThemeIcon } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+import { formatDateTime, type BookingReviewNoteView } from "./booking-detail.styles";
+
+export interface BookingReviewNotesCardProps {
+  notes: BookingReviewNoteView[];
+}
+
+/** Chronological list of reviewer / compliance notes. */
+export function BookingReviewNotesCard({ notes }: BookingReviewNotesCardProps) {
+  if (notes.length === 0) {
+    return (
+      <SectionCard icon={MessageSquare} title="Review Notes">
+        <Text size="sm" c="dimmed">
+          No review notes have been added yet.
+        </Text>
+      </SectionCard>
+    );
+  }
+
+  return (
+    <SectionCard icon={MessageSquare} title="Review Notes">
+      <Stack gap="md">
+        {notes.map((note) => (
+          <Group key={note.id} align="flex-start" gap="md" wrap="nowrap">
+            <ThemeIcon size={34} radius="xl" variant="light" color="green">
+              <FileText size={16} />
+            </ThemeIcon>
+            <Stack gap={2} style={{ flex: 1 }}>
+              <Group justify="space-between">
+                <Badge color="green" variant="light" size="sm" radius="sm">
+                  {note.type}
+                </Badge>
+                <Text size="xs" c="dimmed">
+                  {formatDateTime(note.createdAt)}
+                </Text>
+              </Group>
+              <Text size="sm" style={{ lineHeight: 1.5 }}>
+                {note.note}
+              </Text>
+            </Stack>
+          </Group>
+        ))}
+      </Stack>
+    </SectionCard>
+  );
+}