feat: Implement mobile-optimized CRM dashboard table cells and headers with status emojis.

Author: MaximSamorukov

src/shared/constants/constants.ts

@@ -21,6 +21,13 @@ export const STATUSES_DICT: Record<Statuces, string> = {
   [Statuces.rejected]: 'Отменен',
 };
 
+export const STATUSES_MOBILE_DICT: Record<Statuces, string> = {
+  [Statuces.submited]: '📝',
+  [Statuces.in_work]: '⚙️',
+  [Statuces.accomplished]: '🟢',
+  [Statuces.rejected]: '❌',
+};
+
 export enum PaymentStatuces {
   paid = 'paid',
   not_paid = 'not_paid',
@@ -31,6 +38,11 @@ export const PAYMENT_STATUCES_DICT: Record<PaymentStatuces, string> = {
   [PaymentStatuces.not_paid]: 'Не оплачен',
 };
 
+export const PAYMENT_STATUCES_MOBILE_DICT: Record<PaymentStatuces, string> = {
+  [PaymentStatuces.paid]: '🟢',
+  [PaymentStatuces.not_paid]: '🔴',
+};
+
 export enum ALLOWED_EXTENSIONS_ENUM {
   STL = 'stl',
   THREE_MF = '3mf',

src/widgets/CRMDashboard/Table/api/utils.ts

@@ -57,6 +57,6 @@ export const getFileName = (url: string) => {
       throw Error();
     }
   } catch (_) {
-    return 'не поддерживаемый формат файла';
+    return '---';
   }
 };

src/widgets/CRMDashboard/Table/model/index.ts

@@ -54,10 +54,9 @@ export const orderTypeColumns = [
     label: 'оплата',
     visible: true,
   },
-
   {
     key: 'created_at',
-    label: 'дата создания',
+    label: 'дата',
     visible: true,
   },
 ];
@@ -90,8 +89,19 @@ export const consultationTypeColumns = [
   },
   {
     key: 'created_at',
-    label: 'дата создания',
+    label: 'дата',
     visible: true,
   },
 ];
 export const hideNotvisible = (i: { visible: boolean }) => i.visible;
+
+export const EMOJI_LABELS = {
+  file_path: '📄',
+  phone: '☎️',
+  email: '✉️',
+  order_status: '📦',
+  payment_status: '💳',
+  created_at: '📅',
+  contact: '💬',
+  name: '👤',
+};

src/widgets/CRMDashboard/Table/ui/Cell/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import cn from 'classnames';
+import s from './style.module.scss';
+import { getFileName } from '../../api/utils';
+import {
+  PAYMENT_STATUCES_DICT,
+  PAYMENT_STATUCES_MOBILE_DICT,
+  STATUSES_DICT,
+  STATUSES_MOBILE_DICT,
+} from '@/shared/constants/constants';
+import { useWindowWidth } from '@/shared/hooks';
+
+type CellProps = {
+  path: string;
+  value: string;
+};
+
+export const Cell: React.FC<CellProps> = ({ path, value }) => {
+  const width = useWindowWidth();
+
+  if (path === 'file_path') {
+    return <div className={s.container}>{getFileName(value)}</div>;
+  }
+
+  if (path === 'order_status') {
+    const isMobile = width < 600;
+    const DICT = isMobile ? STATUSES_MOBILE_DICT : STATUSES_DICT;
+    return (
+      <div className={cn(s.container, s.centered)}>
+        {DICT[value as keyof typeof DICT]}
+      </div>
+    );
+  }
+
+  if (path === 'payment_status') {
+    const isMobile = width < 600;
+    const DICT = isMobile
+      ? PAYMENT_STATUCES_MOBILE_DICT
+      : PAYMENT_STATUCES_DICT;
+    return (
+      <div className={cn(s.container, s.centered)}>
+        {DICT[value as keyof typeof DICT]}
+      </div>
+    );
+  }
+
+  if (path === 'created_at') {
+    const dateString = new Date(value).toLocaleDateString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: '2-digit',
+    });
+    return <div className={cn(s.container, s.centered)}>{dateString}</div>;
+  }
+  const l = (value || '').trim() || '---';
+  return <div className={s.container}>{l}</div>;
+};

src/widgets/CRMDashboard/Table/ui/Cell/style.module.scss

@@ -0,0 +1,17 @@
+.container {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  box-sizing: border-box;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.centered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

src/widgets/CRMDashboard/Table/ui/TableBody/index.tsx

@@ -12,7 +12,7 @@ import { CircularProgress } from '@mui/material';
 import { crmPreviewModalState } from '@/shared/state/crmPreviewModal/state';
 import { PrintOrderEntity } from '@/entities/order';
 import { ConsultationEntity } from '@/entities/consultation';
-import { getFileName } from '../../api/utils';
+import { Cell } from '../Cell';
 import s from './style.module.scss';
 
 export const TableBody = observer(() => {
@@ -37,20 +37,13 @@ export const TableBody = observer(() => {
             key={i.id}
             className={s.containerRow}
           >
-            {orderTypeColumns.filter(hideNotvisible).map((value) => {
-              if (value.key === 'file_path') {
-                return (
-                  <div key={value.key} className={s.cell}>
-                    {getFileName(get(i, value.key, '') || '')}
-                  </div>
-                );
-              }
-              return (
-                <div key={value.key} className={s.cell}>
-                  {get(i, value.key, '-')}
-                </div>
-              );
-            })}
+            {orderTypeColumns.filter(hideNotvisible).map((value) => (
+              <Cell
+                key={value.key}
+                path={value.key}
+                value={get(i, value.key, '---')}
+              />
+            ))}
           </button>
         ))}
         {pending ? (
@@ -73,9 +66,11 @@ export const TableBody = observer(() => {
             className={s.containerRow}
           >
             {consultationTypeColumns.filter(hideNotvisible).map((value) => (
-              <div key={value.key} className={s.cell}>
-                {get(i, value.key, '-')}
-              </div>
+              <Cell
+                key={value.key}
+                path={value.key}
+                value={get(i, value.key, '-')}
+              />
             ))}
           </button>
         ))}

src/widgets/CRMDashboard/Table/ui/TableBody/style.module.scss

@@ -28,11 +28,3 @@
     left: calc(50% - 20px);
   }
 }
-
-.cell {
-  flex: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 13px;
-}

src/widgets/CRMDashboard/Table/ui/TableHeader/index.tsx

@@ -9,10 +9,13 @@ import {
   hideNotvisible,
 } from '../../model';
 import cn from 'classnames';
+import { ColumnLabel } from './ui/ColumnLabel';
+import { useWindowWidth } from '@/shared/hooks';
 
 export const TableHeader = observer(() => {
   const { orderType } = crmFilterState;
-
+  const width = useWindowWidth();
+  const isMobile = width <= 450;
   if (orderType === 'print_order') {
     return (
       <div className={s.container}>
@@ -23,7 +26,7 @@ export const TableHeader = observer(() => {
               [s.columnWithBorder]: index < a.length - 1,
             })}
           >
-            {i.label}
+            <ColumnLabel isMobile={isMobile} type={i.key} label={i.label} />
           </div>
         ))}
       </div>
@@ -39,7 +42,7 @@ export const TableHeader = observer(() => {
               [s.columnWithBorder]: index < a.length - 1,
             })}
           >
-            {i.label}
+            <ColumnLabel isMobile={isMobile} type={i.key} label={i.label} />
           </div>
         ))}
       </div>

src/widgets/CRMDashboard/Table/ui/TableHeader/style.module.scss

@@ -17,6 +17,9 @@
   justify-content: center;
   align-items: center;
   font-size: 13px;
+  overflow: hidden;
+  white-space: nowrap;
+
   &WithBorder {
     &::after {
       position: absolute;

src/widgets/CRMDashboard/Table/ui/TableHeader/ui/ColumnLabel/index.tsx

@@ -0,0 +1,19 @@
+import { EMOJI_LABELS } from '@/widgets/CRMDashboard/Table/model';
+import { get } from 'lodash';
+import React from 'react';
+
+type ColumnLabelProps = {
+  type: string;
+  label: string;
+  isMobile: boolean;
+};
+export const ColumnLabel: React.FC<ColumnLabelProps> = ({
+  type,
+  label,
+  isMobile,
+}) => {
+  if (isMobile) {
+    return <>{get(EMOJI_LABELS, type, label)}</>;
+  }
+  return <>{label}</>;
+};