feat: enhance GlDjiboutiClearanceListPage with tab navigation and improved filtering

- Added tab navigation for All, Import, Export, and On hold shipments.
- Implemented a new LivePill component to show real-time updates.
- Refactored shipment filtering logic to accommodate new tab functionality.
- Improved UI elements including buttons and text inputs for better user experience.
- Updated styles for table cells to allow text wrapping for long company names.
- Adjusted theme to use Space Grotesk font for headings.

apps/edr-freight-web/backoffice/src/components/contracts/GlUpcomingWindowsSection.tsx

@@ -122,7 +122,10 @@ function phaseCountdown(w: WindowRow): {
 }
 
 /** Badge label + Mantine color per UI state — same state the countdown uses. */
-const KIND_BADGE: Record<BookingWindowUiKind, { label: string; color: string }> = {
+const KIND_BADGE: Record<
+  BookingWindowUiKind,
+  { label: string; color: string }
+> = {
   OPEN: { label: "Open now", color: "edr-green" },
   FULL: { label: "Train full", color: "red" },
   PRE_WINDOW: { label: "Opens soon", color: "yellow" },
@@ -301,8 +304,12 @@ export function GlUpcomingWindowsSection({
     // Order by the train's dispatch (departure) date, nearest first. Open-now
     // breaks ties on the same departure.
     return rows.sort((a, b) => {
-      const da = a.departureDate ? new Date(a.departureDate).getTime() : Infinity;
-      const db = b.departureDate ? new Date(b.departureDate).getTime() : Infinity;
+      const da = a.departureDate
+        ? new Date(a.departureDate).getTime()
+        : Infinity;
+      const db = b.departureDate
+        ? new Date(b.departureDate).getTime()
+        : Infinity;
       if (da !== db) return da - db;
       return Number(b.isOpenNow) - Number(a.isOpenNow);
     });
@@ -319,14 +326,16 @@ export function GlUpcomingWindowsSection({
 
   return (
     <Card withBorder shadow="sm" radius="lg" p="lg">
-      <Group justify="space-between" align="flex-start" mb="md" wrap="nowrap">
-        <Group gap={8} wrap="nowrap">
-          <CalendarClock size={18} />
+      <Group justify="space-between" align="center" mb="md" wrap="nowrap">
+        <Group gap={10} wrap="nowrap">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-[9px] bg-edr-soft text-edr-primary-dark">
+            <CalendarClock size={16} />
+          </div>
           <Box>
-            <Text fw={700} fz={16}>
+            <Text ff="heading" fw={600} fz={15} lh={1.2}>
               Booking windows
             </Text>
-            <Text fz={13} c="dimmed">
+            <Text fz={12} c="edr-muted">
               {contractId
                 ? "Booking windows on this contract's routes (EAT)"
                 : "Import and export booking windows across all lanes (EAT)"}
@@ -386,7 +395,11 @@ export function GlUpcomingWindowsSection({
           ))}
         </SimpleGrid>
       ) : (
-        <SimpleGrid key={safePage} cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+        <SimpleGrid
+          key={safePage}
+          cols={{ base: 1, sm: 2, lg: 3 }}
+          spacing="md"
+        >
           {visible.map((w) => (
             <WindowCard key={`${w.scheduleId}-${w.bookingCycleNo}`} w={w} />
           ))}