fix: shortened datetimes and set background color for navbar

src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { MRT_ColumnDef } from "mantine-react-table";
 import { DealSchema } from "@/lib/client";
+import { utcDateTimeToLocalString } from "@/utils/datetime";
 
 const useDealsTableColumns = () => {
     return useMemo<MRT_ColumnDef<DealSchema>[]>(
@@ -19,7 +20,7 @@ const useDealsTableColumns = () => {
                 header: "Дата создания",
                 accessorKey: "createdAt",
                 Cell: ({ row }) =>
-                    new Date(row.original.createdAt).toLocaleString("ru-RU"),
+                    utcDateTimeToLocalString(row.original.createdAt),
                 enableSorting: true,
                 sortingFn: (rowA, rowB) =>
                     new Date(rowB.original.createdAt).getTime() -

src/components/layout/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import { IconCircleDotted, IconLayoutKanban } from "@tabler/icons-react";
-import { Flex } from "@mantine/core";
+import { Box, Flex } from "@mantine/core";
 import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
 import Logo from "@/components/ui/Logo/Logo";
@@ -20,26 +20,28 @@ const linksData = [
 
 const Navbar = () => {
     return (
-        <PageBlock
-            style={{
-                marginBlock: "var(--mantine-spacing-md)",
-                marginLeft: "var(--mantine-spacing-md)",
-            }}
-            fullHeight>
-            <Flex
-                direction={"column"}
-                h={"100%"}>
-                <Logo title={"Fulfillment & Delivery"} />
+        <Box style={{ backgroundColor: "var(--color-light-gray-blue)" }}>
+            <PageBlock
+                style={{
+                    marginBlock: "var(--mantine-spacing-md)",
+                    marginLeft: "var(--mantine-spacing-md)",
+                }}
+                fullHeight>
                 <Flex
-                    mx={"xs"}
                     direction={"column"}
-                    justify={"space-between"}
                     h={"100%"}>
-                    <NavbarLinks linksData={linksData} />
-                    <ColorSchemeToggle />
+                    <Logo title={"Fulfillment & Delivery"} />
+                    <Flex
+                        mx={"xs"}
+                        direction={"column"}
+                        justify={"space-between"}
+                        h={"100%"}>
+                        <NavbarLinks linksData={linksData} />
+                        <ColorSchemeToggle />
+                    </Flex>
                 </Flex>
-            </Flex>
-        </PageBlock>
+            </PageBlock>
+        </Box>
     );
 };
 

src/utils/datetime.ts

@@ -11,6 +11,10 @@ export const localDateTimeToString = (datetime: string | Date) => {
     return date.toLocaleString("ru").substring(0, 17);
 };
 
-export const utcDateTimeToLocalString = (datetime: string | Date) => {
-    return localDateTimeToString(utcDateToLocal(datetime));
+export const utcDateTimeToLocalString = (
+    datetime: string | Date,
+    withSeconds: boolean = false
+) => {
+    const res = localDateTimeToString(utcDateToLocal(datetime));
+    return withSeconds ? res : res.substring(0, 17);
 };