Drivers table values formatting

src/pages/DriverForm.tsx

@@ -1,13 +1,13 @@
 import 'dayjs/locale/ru'
 import { useState, useEffect } from "react"
 import { Button, TextInput, Table, ActionIcon, Modal, Checkbox, Tabs, Flex } from "@mantine/core"
-import { DateValue } from "@mantine/dates"
 import { useForm } from "@mantine/form"
 import { IconEdit, IconLinkPlus, IconPlus, IconTrash } from "@tabler/icons-react"
 import { fetchDictionary, createDictionaryItem, updateDictionaryItem, deleteDictionaryItem } from "../api/api"
 import MaskedDateInput from '../components/MaskedDateInput'
 import { IDriver, IDriverLicense } from '../interfaces/Driver'
-import { dateToYYYYMMDD } from '../utils/date'
+import { dateToDDMMYYYY, dateToYYYYMMDD } from '../utils/date'
+import { stringToSnils } from '../utils/format'
 
 const DriverLicense = ({ license, handleDeleteLicense }: { license: IDriverLicense, handleDeleteLicense: any }) => {
   return (
@@ -30,10 +30,10 @@ const Driver = ({ driver, handleEditDriver, handleDeleteDriver }: { driver: any,
 
   return (
     <>
-      <Table.Tr onClick={() => setOpened(!opened)}>
+      <Table.Tr style={{cursor: 'pointer'}} onClick={() => setOpened(!opened)}>
         <Table.Td>{driver.fullname}</Table.Td>
-        <Table.Td>{driver.snils}</Table.Td>
-        <Table.Td>{driver.birthday}</Table.Td>
+        <Table.Td>{stringToSnils(driver.snils)}</Table.Td>
+        <Table.Td>{dateToDDMMYYYY(driver.birthday)}</Table.Td>
         <Table.Td>{driver.iin}</Table.Td>
         <Table.Td>
           <ActionIcon color="blue" onClick={() => handleEditDriver(driver)} style={{ marginRight: "10px" }}>

src/utils/date.ts

@@ -34,4 +34,13 @@ export function parseDDMMYYYY(input: string): Date | null {
 
     const date = dayjs(`${year}-${month}-${day}`, "YYYY-M-D", true)
     return date.isValid() ? date.toDate() : null
+}
+
+export function dateToDDMMYYYY(dateString: string) {
+    try {
+        const [year, month, day] = dateString.split('-')
+        return `${day}.${month}.${year}`
+    } catch (error) {
+        return null
+    }
 }

src/utils/format.ts

@@ -0,0 +1,7 @@
+export function stringToSnils (snils: string) {
+    const firstBlock = snils.slice(0, 3)
+    const secondBlock = snils.slice(3, 6)
+    const thirdBlock = snils.slice(6, 9)
+    const checkSum = snils.slice(9, 11)
+    return `${firstBlock}-${secondBlock}-${thirdBlock} ${checkSum}`
+}