add items per wagon map to cargo types and sync bulk rate units

- Implemented  in the  to manage the physical item capacity for each wagon type.
- Added a new migration to create the  column in the  table.
- Introduced  method in  to update rate units when cargo type unit of measure changes.
- Updated booking calculations to consider items per wagon for break-bulk cargo.
- Refactored various components to utilize the new items fit logic and ensure consistent date formatting across the application.
- Added tests for the new display timezone functionality to ensure consistent date/time representation across different user settings.

apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-card.tsx

@@ -1,9 +1,7 @@
-import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "@/shared/common/ui/card";
 import { Badge } from "@/shared/common/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/shared/common/ui/avatar";
-import { format } from "date-fns";
 import {
   Clock,
   User,
@@ -101,8 +99,14 @@ export function ActivityCard({ activity }: { activity: ActivityCardProps }) {
   const iconBg = "bg-gray-100 dark:bg-gray-800";
   const whiteBg = "bg-white dark:bg-gray-900";
 
-  const formattedDate = format(new Date(activity.timestamp), "MMM d, yyyy");
-  const formattedTime = format(new Date(activity.timestamp), "HH:mm:ss");
+  const formattedDate = new Date(activity.timestamp).toLocaleDateString(
+    "en-US",
+    { month: "short", day: "numeric", year: "numeric" },
+  );
+  const formattedTime = new Date(activity.timestamp).toLocaleTimeString(
+    "en-GB",
+    { hour12: false },
+  );
 
   return (
     <Card

apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx

@@ -213,7 +213,6 @@ export default function AuditLogPageShared({
   const hoverSoft = "hover:bg-gray-100 dark:hover:bg-gray-800";
   const primaryBtn =
     "bg-gray-900 hover:bg-gray-800 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900";
-  const primaryIcon = "text-gray-900 dark:text-gray-100";
 
   const getSeverityColor = (severity: string) => {
     switch (severity) {
@@ -472,10 +471,14 @@ export default function AuditLogPageShared({
                 textSubtle,
               )}>
               <span className="whitespace-nowrap">
-                {format(new Date(log.timestamp), "MMM d, yyyy")}
+                {new Date(log.timestamp).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })}
               </span>
               <span className="whitespace-nowrap">
-                {format(new Date(log.timestamp), "HH:mm:ss")}
+                {new Date(log.timestamp).toLocaleTimeString("en-GB", { hour12: false })}
               </span>
               <span className="inline-flex items-center gap-2 min-w-0">
                 <span className={cn(textSubtle)}>•</span>
@@ -817,13 +820,17 @@ export default function AuditLogPageShared({
                             <TableCell className="font-medium">
                               <div className="flex flex-col">
                                 <span className={cn("text-sm", textStrong)}>
-                                  {format(
-                                    new Date(log.timestamp),
-                                    "MMM d, yyyy",
+                                  {new Date(log.timestamp).toLocaleDateString(
+                                    "en-US",
+                                    {
+                                      month: "short",
+                                      day: "numeric",
+                                      year: "numeric",
+                                    },
                                   )}
                                 </span>
                                 <span className={cn("text-xs", textSubtle)}>
-                                  {format(new Date(log.timestamp), "HH:mm:ss")}
+                                  {new Date(log.timestamp).toLocaleTimeString("en-GB", { hour12: false })}
                                 </span>
                               </div>
                             </TableCell>