From b87d012e349fb04b3b0d6b54a21fcf3f98de88f9 Mon Sep 17 00:00:00 2001
From: RustamRu <kagapov.rustam@gmail.com>
Date: Wed, 12 Mar 2025 00:41:56 +0300
Subject: [PATCH] feat: Improve OrderDetails component with localized date
 formatting

- Added dayjs localization support using current language
- Separated order title and creation date into distinct elements
- Simplified date display format
- Imported Russian and English dayjs locales
---
 .../order-view/details/order-details.tsx         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/order-view/details/order-details.tsx b/src/components/order-view/details/order-details.tsx
index 9411404..284e9c9 100644
--- a/src/components/order-view/details/order-details.tsx
+++ b/src/components/order-view/details/order-details.tsx
@@ -10,8 +10,10 @@ import {
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
-import localizedFormat from "dayjs/plugin/localizedFormat";
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 dayjs.extend(localizedFormat);
+import 'dayjs/locale/ru';
+import 'dayjs/locale/en';
 
 import { Order } from '../../../models/landing';
 import { formatDatetime } from '../../../lib';
@@ -43,26 +45,28 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
   location,
   startWashTime,
   endWashTime,
-  created
+  created,
 }) => {
-  const { t } = useTranslation('~', {
+  const { t, i18n } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-view.details',
   });
+  dayjs.locale(i18n.language);
   const { t: tCarBody } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-create.car-body-select.options',
   });
 
   return (
     <>
+      <Heading as='h2' size='lg' marginInline='auto'>
+        {t('title', { number: orderNumber })}
+      </Heading>
       <HStack
         width='full'
         flexWrap='wrap'
         justifyContent='space-between'
         gap={2}
       >
-        <Heading as='h2' size='lg'>
-          {t('title', { number: orderNumber })} ({dayjs(created).format('LLLL')})
-        </Heading>
+        <Text>{dayjs(created).format('LLL')}</Text>
         <OrderStatus value={status} />
       </HStack>
       <UnorderedList styleType='none'>