diff --git a/apps/edr-freight-api/src/modules/warehouses/warehouse-fee.service.ts b/apps/edr-freight-api/src/modules/warehouses/warehouse-fee.service.ts
index 947a99f58..14a3375c7 100644
--- a/apps/edr-freight-api/src/modules/warehouses/warehouse-fee.service.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/warehouse-fee.service.ts
@@ -387,7 +387,9 @@ export class WarehouseFeeService {
     // PER_TON (tonnes) and PER_ITEM (piece count) both read the cargo total,
     // which is stored in the cargo's own unit of measure.
     const cargoQuantity = Math.max(0, Number(item.cargoQuantity) || 0);
-    const quantity = basis === 'PER_CONTAINER' ? containerCount : cargoQuantity;
+    // Double handling applies to IMPORT only — no charge for export/domestic.
+    const isImport = (item.tradeDirection ?? '').toUpperCase() === 'IMPORT';
+    const quantity = !isImport ? 0 : basis === 'PER_CONTAINER' ? containerCount : cargoQuantity;
     const sourceAmount = Math.round(rate * quantity * 100) / 100;
     const amount = ruleCurrency ? await this.convertAmount(sourceAmount, ruleCurrency, targetCurrency) : 0;
     const convertedRate = ruleCurrency ? await this.convertAmount(rate, ruleCurrency, targetCurrency) : 0;
@@ -455,6 +457,32 @@ export class WarehouseFeeService {
     );
     if (!leg) throw new NotFoundException(`Last-mile record ${lastMileId} not found`);
 
+    // Truck detention applies to IMPORT only — no charge for export/domestic.
+    if ((leg.tradeDirection ?? '').toUpperCase() !== 'IMPORT') {
+      const cur = this.normalizeCurrency(billingCurrency);
+      return {
+        ruleType: 'TRUCK_DETENTION_FEE',
+        basis: null,
+        ruleId: null,
+        ruleName: null,
+        freeDays: 0,
+        ratePerDay: 0,
+        currency: cur,
+        ruleCurrency: null,
+        billingCurrency: cur,
+        startDate: leg.arrivedAt ? new Date(leg.arrivedAt).toISOString() : null,
+        endDate: (leg.deliveredAt ? new Date(leg.deliveredAt) : new Date()).toISOString(),
+        endIsOpen: !leg.deliveredAt,
+        elapsedDays: 0,
+        chargeableDays: 0,
+        containerCount: 0,
+        billableUnits: 0,
+        amount: 0,
+        tiers: [],
+        groups: [],
+      };
+    }
+
     // Group the leg's vehicles by type so each truck type is billed by its own
     // matching rule (rates differ by truck type). Falls back to one untyped group.
     const groupRows: Array<{ vehicleType: string | null; truckCount: number | string }> =
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/LoadToTrainPanel.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/LoadToTrainPanel.tsx
index 9e017d5fc..e16a29122 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/LoadToTrainPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/LoadToTrainPanel.tsx
@@ -1,22 +1,26 @@
 import {
   Alert,
   Badge,
+  Box,
   Button,
   Checkbox,
   Group,
   Loader,
-  Select,
+  Paper,
   Stack,
   Table,
-  Tabs,
   Text,
 } from '@mantine/core';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { TrainFront } from 'lucide-react';
+import { ChevronDown, ChevronRight, TrainFront } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
 import { useToast } from '@/hooks/use-toast';
-import { warehouseService, type TrainLoadableItem } from '@/services/warehouse.service';
+import {
+  warehouseService,
+  type LoadableTrain,
+  type TrainLoadableItem,
+} from '@/services/warehouse.service';
 import { extractErrorMessage } from './options';
 
 const STAGE_COLOR: Record<string, string> = {
@@ -29,224 +33,275 @@ const STAGE_COLOR: Record<string, string> = {
 
 const weight = (w: number | null) => (w == null ? '—' : `${Number(w).toLocaleString()} kg`);
 
+interface BookingGroup {
+  bookingId: string | null;
+  bookingReference: string | null;
+  customerName: string | null;
+  items: TrainLoadableItem[];
+}
+
+function groupByBooking(items: TrainLoadableItem[]): BookingGroup[] {
+  const map = new Map<string, BookingGroup>();
+  for (const i of items) {
+    const key = i.bookingId ?? i.bookingReference ?? 'unknown';
+    let g = map.get(key);
+    if (!g) {
+      g = { bookingId: i.bookingId, bookingReference: i.bookingReference, customerName: i.customerName, items: [] };
+      map.set(key, g);
+    }
+    g.items.push(i);
+  }
+  return [...map.values()];
+}
+
 /**
- * Load to Train — pick an allocated EXPORT train, see the arrived containers/cargoes
- * assigned to it (stage tabs), multiselect the ready ones and load them onto their
- * already-allocated wagons. Loading follows train + wagon allocation: only items
- * that are READY_FOR_LOADING and have an allocated wagon are selectable.
+ * Load to Train — a datatable of allocated EXPORT trains. Expand a train to see
+ * the bookings allocated to it; expand a booking to see its containers/cargoes
+ * and load the ready ones onto their wagons. Only READY_FOR_LOADING items with an
+ * allocated wagon are selectable.
  */
 export function LoadToTrainPanel() {
-  const { toast } = useToast();
-  const queryClient = useQueryClient();
-  const [scheduleId, setScheduleId] = useState<string | null>(null);
-  const [tab, setTab] = useState('received');
-  const [selected, setSelected] = useState<string[]>([]);
-
-  const trainsKey = ['loadable-trains'];
-  const { data: trains = [], isLoading: trainsLoading } = useQuery({
-    queryKey: trainsKey,
+  const { data: trains = [], isLoading } = useQuery({
+    queryKey: ['loadable-trains'],
     queryFn: () => warehouseService.getLoadableTrains(),
   });
-
-  const itemsKey = ['train-loadable-items', scheduleId];
-  const { data: items = [], isLoading } = useQuery({
-    queryKey: itemsKey,
-    queryFn: () => warehouseService.getTrainLoadableItems(scheduleId as string),
-    enabled: Boolean(scheduleId),
-  });
-
-  const received = useMemo(() => items.filter((i) => i.status !== 'LOADED'), [items]);
-  const loaded = useMemo(() => items.filter((i) => i.status === 'LOADED'), [items]);
-  const visible = tab === 'loaded' ? loaded : received;
-
-  const trainOptions = trains.map((t) => ({
-    value: t.scheduleId,
-    label:
-      `${t.trainNumber ?? t.scheduleId.slice(0, 8)}` +
-      (t.origin || t.destination ? ` · ${t.origin ?? '?'}→${t.destination ?? '?'}` : '') +
-      ` · ${t.readyCount} ready / ${t.loadedCount} loaded`,
-  }));
-
-  const selectableVisible = visible.filter((i) => i.loadable);
-  const allSelected =
-    selectableVisible.length > 0 && selectableVisible.every((i) => selected.includes(i.id));
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
   const toggle = (id: string) =>
+    setExpanded((s) => {
+      const next = new Set(s);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
+  if (isLoading) {
+    return (
+      <Group justify="center" py="lg">
+        <Loader />
+      </Group>
+    );
+  }
+  if (trains.length === 0) {
+    return (
+      <Alert color="gray" variant="light">
+        No allocated EXPORT trains awaiting loading. Trains appear here after train and wagon allocation.
+      </Alert>
+    );
+  }
+
+  return (
+    <Table.ScrollContainer minWidth={720}>
+      <Table verticalSpacing="sm">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th w={40} />
+            <Table.Th>Train</Table.Th>
+            <Table.Th>Route</Table.Th>
+            <Table.Th ta="center">Ready</Table.Th>
+            <Table.Th ta="center">Loaded</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {trains.map((t) => (
+            <TrainRow
+              key={t.scheduleId}
+              train={t}
+              expanded={expanded.has(t.scheduleId)}
+              onToggle={() => toggle(t.scheduleId)}
+            />
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
+
+function TrainRow({ train, expanded, onToggle }: { train: LoadableTrain; expanded: boolean; onToggle: () => void }) {
+  const { data: items = [], isLoading } = useQuery({
+    queryKey: ['train-loadable-items', train.scheduleId],
+    queryFn: () => warehouseService.getTrainLoadableItems(train.scheduleId),
+    enabled: expanded,
+  });
+  const bookings = useMemo(() => groupByBooking(items), [items]);
+  const route =
+    train.origin || train.destination ? `${train.origin ?? '?'} → ${train.destination ?? '?'}` : '—';
+
+  return (
+    <>
+      <Table.Tr style={{ cursor: 'pointer' }} onClick={onToggle}>
+        <Table.Td>{expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}</Table.Td>
+        <Table.Td>
+          <Group gap="xs" wrap="nowrap">
+            <TrainFront size={16} />
+            <Text fw={600}>{train.trainNumber ?? train.scheduleId.slice(0, 8)}</Text>
+          </Group>
+        </Table.Td>
+        <Table.Td>{route}</Table.Td>
+        <Table.Td ta="center">
+          <Badge color="blue" variant="light">
+            {train.readyCount}
+          </Badge>
+        </Table.Td>
+        <Table.Td ta="center">
+          <Badge color="green" variant="light">
+            {train.loadedCount}
+          </Badge>
+        </Table.Td>
+      </Table.Tr>
+      {expanded && (
+        <Table.Tr>
+          <Table.Td colSpan={5} p={0}>
+            <Box p="sm" bg="var(--mantine-color-gray-0)">
+              {isLoading ? (
+                <Group justify="center" py="md">
+                  <Loader size="sm" />
+                </Group>
+              ) : bookings.length === 0 ? (
+                <Alert color="gray" variant="light">
+                  No arrived containers/cargoes allocated to this train yet.
+                </Alert>
+              ) : (
+                <Stack gap="xs">
+                  {bookings.map((b) => (
+                    <BookingBlock key={b.bookingId ?? b.bookingReference} scheduleId={train.scheduleId} booking={b} />
+                  ))}
+                </Stack>
+              )}
+            </Box>
+          </Table.Td>
+        </Table.Tr>
+      )}
+    </>
+  );
+}
+
+function BookingBlock({ scheduleId, booking }: { scheduleId: string; booking: BookingGroup }) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const loadedCount = booking.items.filter((i) => i.status === 'LOADED').length;
+  const selectable = booking.items.filter((i) => i.loadable);
+  const allSelected = selectable.length > 0 && selectable.every((i) => selected.includes(i.id));
+  const toggleItem = (id: string) =>
     setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
   const toggleAll = () =>
     setSelected((s) =>
-      allSelected
-        ? s.filter((id) => !selectableVisible.some((i) => i.id === id))
-        : Array.from(new Set([...s, ...selectableVisible.map((i) => i.id)])),
+      allSelected ? s.filter((id) => !selectable.some((i) => i.id === id)) : selectable.map((i) => i.id),
     );
 
   const loadMutation = useMutation({
-    mutationFn: () => warehouseService.loadItemsOntoTrain(scheduleId as string, selected),
+    mutationFn: () => warehouseService.loadItemsOntoTrain(scheduleId, selected),
     onSuccess: (r) => {
-      queryClient.invalidateQueries({ queryKey: itemsKey });
-      queryClient.invalidateQueries({ queryKey: trainsKey });
+      queryClient.invalidateQueries({ queryKey: ['train-loadable-items', scheduleId] });
+      queryClient.invalidateQueries({ queryKey: ['loadable-trains'] });
       setSelected([]);
-      toast({
-        title: 'Loaded onto train',
-        description: `Loaded ${r.loadedCount} item(s); skipped ${r.skippedCount}.`,
-      });
+      toast({ title: 'Loaded onto train', description: `Loaded ${r.loadedCount}; skipped ${r.skippedCount}.` });
     },
     onError: (e) =>
       toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(e) }),
   });
 
-  const renderRow = (i: TrainLoadableItem) => (
-    <Table.Tr key={i.id}>
-      <Table.Td>
-        <Checkbox
-          checked={selected.includes(i.id)}
-          onChange={() => toggle(i.id)}
-          disabled={!i.loadable}
-        />
-      </Table.Td>
-      <Table.Td>
-        <Text fw={600}>{i.containerNumber ?? i.cargoType ?? '—'}</Text>
-      </Table.Td>
-      <Table.Td>{i.cargoType ?? '—'}</Table.Td>
-      <Table.Td>{weight(i.weight)}</Table.Td>
-      <Table.Td>
-        <Badge color={STAGE_COLOR[i.status] ?? 'gray'} variant="light">
-          {i.status.replace(/_/g, ' ')}
-        </Badge>
-      </Table.Td>
-      <Table.Td>
-        {i.wagonNumber ? (
-          <Badge variant="outline" color="indigo">
-            {i.wagonNumber}
-          </Badge>
-        ) : (
-          <Text size="xs" c="red">
-            Not allocated
-          </Text>
-        )}
-      </Table.Td>
-      <Table.Td>{i.bookingReference ?? '—'}</Table.Td>
-      <Table.Td>{i.customerName ?? '—'}</Table.Td>
-      <Table.Td>
-        {i.inspectionStatus ? (
-          <Badge size="xs" variant="light" color={i.inspectionStatus === 'PASSED' ? 'green' : 'orange'}>
-            {i.inspectionStatus}
-          </Badge>
-        ) : (
-          '—'
-        )}
-      </Table.Td>
-    </Table.Tr>
-  );
-
   return (
-    <Stack gap="md">
-      <Group align="flex-end" justify="space-between">
-        <Select
-          label="Train"
-          description="Allocated EXPORT trains awaiting loading"
-          placeholder={trainsLoading ? 'Loading trains…' : trainOptions.length ? 'Select a train' : 'No trains to load'}
-          data={trainOptions}
-          value={scheduleId}
-          onChange={(v) => {
-            setScheduleId(v);
-            setSelected([]);
-            setTab('received');
-          }}
-          disabled={trainOptions.length === 0}
-          leftSection={<TrainFront size={16} />}
-          w={460}
-          searchable
-        />
+    <Paper withBorder radius="sm" p="xs">
+      <Group justify="space-between" style={{ cursor: 'pointer' }} onClick={() => setOpen((o) => !o)} wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          {open ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
+          <Text fw={600}>{booking.bookingReference ?? booking.bookingId?.slice(0, 8) ?? '—'}</Text>
+          <Text size="sm" c="dimmed">
+            {booking.customerName ?? '—'}
+          </Text>
+        </Group>
+        <Group gap="xs" wrap="nowrap">
+          <Badge variant="light" color="blue">
+            {booking.items.length} item(s)
+          </Badge>
+          {loadedCount > 0 && (
+            <Badge variant="light" color="green">
+              {loadedCount} loaded
+            </Badge>
+          )}
+        </Group>
       </Group>
 
-      {!scheduleId ? (
-        <Alert color="gray" variant="light">
-          Pick a train to see the arrived containers/cargoes allocated to it. Items appear here only
-          after train and wagon allocation.
-        </Alert>
-      ) : (
-        <>
-          <Tabs value={tab} onChange={(v) => setTab(v ?? 'received')}>
-            <Tabs.List>
-              <Tabs.Tab
-                value="received"
-                rightSection={
-                  <Badge size="xs" variant="light" color="blue">
-                    {received.length}
+      {open && (
+       <>
+        <Table striped highlightOnHover verticalSpacing="xs" mt="xs">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th w={36}>
+                <Checkbox
+                  checked={allSelected}
+                  indeterminate={!allSelected && selected.length > 0}
+                  onChange={toggleAll}
+                  disabled={selectable.length === 0}
+                />
+              </Table.Th>
+              <Table.Th>Container / Cargo</Table.Th>
+              <Table.Th>Goods</Table.Th>
+              <Table.Th>Weight</Table.Th>
+              <Table.Th>Stage</Table.Th>
+              <Table.Th>Wagon</Table.Th>
+              <Table.Th>Inspection</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {booking.items.map((i) => (
+              <Table.Tr key={i.id}>
+                <Table.Td>
+                  <Checkbox checked={selected.includes(i.id)} onChange={() => toggleItem(i.id)} disabled={!i.loadable} />
+                </Table.Td>
+                <Table.Td>
+                  <Text fw={600}>{i.containerNumber ?? i.cargoType ?? '—'}</Text>
+                </Table.Td>
+                <Table.Td>{i.cargoType ?? '—'}</Table.Td>
+                <Table.Td>{weight(i.weight)}</Table.Td>
+                <Table.Td>
+                  <Badge color={STAGE_COLOR[i.status] ?? 'gray'} variant="light">
+                    {i.status.replace(/_/g, ' ')}
                   </Badge>
-                }
-              >
-                Received
-              </Tabs.Tab>
-              <Tabs.Tab
-                value="loaded"
-                rightSection={
-                  <Badge size="xs" variant="light" color="green">
-                    {loaded.length}
-                  </Badge>
-                }
-              >
-                Loaded
-              </Tabs.Tab>
-            </Tabs.List>
-          </Tabs>
-
-          {isLoading ? (
-            <Group justify="center" py="lg">
-              <Loader />
-            </Group>
-          ) : visible.length === 0 ? (
-            <Alert color="gray" variant="light">
-              {tab === 'loaded' ? 'Nothing loaded onto this train yet.' : 'No arrived items ready for this train.'}
-            </Alert>
-          ) : (
-            <Table.ScrollContainer minWidth={900}>
-              <Table striped highlightOnHover verticalSpacing="xs">
-                <Table.Thead>
-                  <Table.Tr>
-                    <Table.Th>
-                      {tab === 'received' && (
-                        <Checkbox
-                          checked={allSelected}
-                          indeterminate={!allSelected && selected.length > 0}
-                          onChange={toggleAll}
-                          disabled={selectableVisible.length === 0}
-                        />
-                      )}
-                    </Table.Th>
-                    <Table.Th>Container / Cargo</Table.Th>
-                    <Table.Th>Goods</Table.Th>
-                    <Table.Th>Weight</Table.Th>
-                    <Table.Th>Stage</Table.Th>
-                    <Table.Th>Wagon</Table.Th>
-                    <Table.Th>Booking</Table.Th>
-                    <Table.Th>Customer</Table.Th>
-                    <Table.Th>Inspection</Table.Th>
-                  </Table.Tr>
-                </Table.Thead>
-                <Table.Tbody>{visible.map(renderRow)}</Table.Tbody>
-              </Table>
-            </Table.ScrollContainer>
-          )}
-
-          {tab === 'received' && (
-            <Group justify="space-between" align="center">
-              <Text size="sm" c="dimmed">
-                {selected.length} selected · only READY_FOR_LOADING items with an allocated wagon can be loaded
-              </Text>
-              <Button
-                color="edr-green"
-                leftSection={<TrainFront size={16} />}
-                disabled={selected.length === 0}
-                loading={loadMutation.isPending}
-                onClick={() => loadMutation.mutate()}
-              >
-                Load {selected.length || ''} onto train
-              </Button>
-            </Group>
-          )}
-        </>
+                </Table.Td>
+                <Table.Td>
+                  {i.wagonNumber ? (
+                    <Badge variant="outline" color="indigo">
+                      {i.wagonNumber}
+                    </Badge>
+                  ) : (
+                    <Text size="xs" c="red">
+                      Not allocated
+                    </Text>
+                  )}
+                </Table.Td>
+                <Table.Td>
+                  {i.inspectionStatus ? (
+                    <Badge size="xs" variant="light" color={i.inspectionStatus === 'PASSED' ? 'green' : 'orange'}>
+                      {i.inspectionStatus}
+                    </Badge>
+                  ) : (
+                    '—'
+                  )}
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+        <Group justify="space-between" align="center" mt="xs">
+          <Text size="xs" c="dimmed">
+            {selected.length} selected · only READY_FOR_LOADING items with a wagon can be loaded
+          </Text>
+          <Button
+            size="compact-sm"
+            color="edr-green"
+            leftSection={<TrainFront size={14} />}
+            disabled={selected.length === 0}
+            loading={loadMutation.isPending}
+            onClick={() => loadMutation.mutate()}
+          >
+            Load {selected.length || ''} onto train
+          </Button>
+        </Group>
+       </>
       )}
-    </Stack>
+    </Paper>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
index 983745705..d57210e1e 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
@@ -1282,6 +1282,17 @@ const LastMilePage = () => {
             Boolean(releaseRow?.releaseOrderReference) && !releaseRow?.releaseDate && !pastTransit;
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
+              {pastTransit && (
+                <Button
+                  size="compact-xs"
+                  variant="light"
+                  color="orange"
+                  leftSection={<Receipt size={13} />}
+                  onClick={() => setDetentionRecord(row.original)}
+                >
+                  Detention
+                </Button>
+              )}
               <Menu
                 position="bottom-end"
                 width={200}
diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
index 49e79252e..41a97110f 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
@@ -391,6 +391,8 @@ function FeeRules() {
   // Truck detention: per truck per day after an HOURS-based grace (default 3h),
   // with day tiers. Uses "free hours" instead of "free days".
   const isTruckDetention = form.ruleType === 'TRUCK_DETENTION_FEE';
+  // Double handling + truck detention apply to IMPORT only — trade direction is locked.
+  const isImportOnly = isDoubleHandling || isTruckDetention;
 
   const resetForm = () =>
     setForm({
@@ -464,7 +466,7 @@ function FeeRules() {
       name: form.name.trim(),
       ruleType: form.ruleType,
       freightType: clean(form.freightType) ?? null,
-      tradeDirection: clean(form.tradeDirection) ?? null,
+      tradeDirection: isImportOnly ? 'IMPORT' : clean(form.tradeDirection) ?? null,
       cargoTypeCode: isBulkRule ? (clean(form.cargoTypeCode) ?? null) : null,
       containerType: isContainerRule ? (clean(form.containerType) ?? null) : null,
       // Double handling: flat basis × rate. Truck detention: HOURS-based grace.
@@ -636,10 +638,12 @@ function FeeRules() {
             />
             <Select
               label="Trade direction"
+              description={isImportOnly ? 'Import only for this fee type' : undefined}
               data={TRADE}
-              value={form.tradeDirection || null}
+              value={isImportOnly ? 'IMPORT' : form.tradeDirection || null}
               onChange={(value) => setForm((f) => ({ ...f, tradeDirection: selectValue(value) }))}
-              clearable
+              disabled={isImportOnly}
+              clearable={!isImportOnly}
             />
             {isTruckDetention && (
               <Select