Улучшено отображение блока заказчика

src/pages/WellCase/HistoryTable.jsx

@@ -10,6 +10,8 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 import { WellFinalDocumentsService } from '@api'
 import { formatDate } from '@utils'
 
+import '@styles/well_case.less'
+
 export const HistoryTable = memo(({ category }) => {
     const [isLoading, setIsLoading] = useState(false)
     const [files, setFiles] = useState([])
@@ -39,7 +41,7 @@ export const HistoryTable = memo(({ category }) => {
     return (
         <LoaderPortal show={isLoading}>
             {files.length > 0 ? (
-                <Timeline reverse style={{ marginLeft: 50, marginTop: 20 }}>
+                <Timeline className={'history-timeline'} reverse>
                     {files.map(({ date, user, file }) => (
                         <Timeline.Item key={date}>
                             {formatDate(date)}

src/pages/WellCase/index.jsx

@@ -1,23 +1,23 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { Button } from 'antd'
+import { Alert, Button, Typography } from 'antd'
 
 import { useWell } from '@asb/context'
 import { UserView } from '@components/views'
+import UploadForm from '@components/UploadForm'
 import DownloadLink from '@components/DownloadLink'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { makeColumn, makeDateColumn, makeTextColumn, Table } from '@components/Table'
 import { WellFinalDocumentsService } from '@api'
-import { MimeTypes, wrapPrivateComponent } from '@utils'
+import { wrapPrivateComponent } from '@utils'
 
 import WellCaseEditor from './WellCaseEditor'
 import { HistoryTable } from './HistoryTable'
-import UploadForm from '@asb/components/UploadForm'
+
+import '@styles/well_case.less'
 
 const expandable = {
-    expandedRowRender: (category) => (
-        <HistoryTable category={category} />
-    )
+    expandedRowRender: (category) => <HistoryTable category={category} />,
 }
 
 const WellCase = memo(() => {
@@ -46,12 +46,8 @@ const WellCase = memo(() => {
         makeTextColumn('Категория', 'nameCategory'),
         makeColumn('Файл', 'file', {
             render: (file, category) => (
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-                    {file ? (
-                        <DownloadLink file={file} />
-                    ) : (
-                        <span style={{ marginLeft: 15 }}>Файл не загружен</span>
-                    )}
+                <div className={'file-cell'}>
+                    {file ? <DownloadLink file={file} /> : <span style={{ marginLeft: 15 }}>Файл не загружен</span>}
 
                     {category.permissionToUpload && (
                         <UploadForm
@@ -66,9 +62,7 @@ const WellCase = memo(() => {
         }),
         makeDateColumn('Дата загрузки', 'uploadDate'),
         makeColumn('Ответственные', 'publishers', {
-            render: (publishers) => publishers?.map((user) => (
-                <UserView user={user} />
-            )),
+            render: (publishers) => publishers?.map((user) => <UserView user={user} style={{ marginLeft: 10 }} />),
         }),
     ], [well, updateTable])
 
@@ -80,21 +74,21 @@ const WellCase = memo(() => {
     useEffect(updateTable, [updateTable])
 
     return (
-        <>
+        <div className={'well-case-page'}>
             <LoaderPortal show={isLoading}>
                 {canEdit && (
-                    <Button onClick={() => setShowEdit(true)}>Редактировать</Button>
-                )}
-                <Table
-                    bordered
-                    size={'small'}
-                    dataSource={categories}
-                    columns={columns}
-                    expandable={expandable}
+                    <Alert
+                        type={'info'}
+                        className={'customer-block'}
+                        showIcon
+                        message={'Вы назначены заказчиком на скважину, вам доступно редактирование ответственных.'}
+                        action={<Button onClick={() => setShowEdit(true)}>Редактировать</Button>}
                     />
+                )}
+                <Table bordered size={'small'} dataSource={categories} columns={columns} expandable={expandable} />
             </LoaderPortal>
             <WellCaseEditor categories={categories} show={showEdit} onClose={onEditClose} />
-        </>
+        </div>
     )
 })
 

src/styles/well_case.less

@@ -1,4 +1,27 @@
-.well-case-editor {
+.well-case-page {
+    padding-top: 10px;
+
+    & .file-cell {
+        display: flex;
+        align-items: center;
+        justify-content: space-between; 
+    }
+    
+    & .history-timeline {
+        margin-left: 50px;
+        margin-top: 20px;
+
+        & .ant-timeline-item-last {
+            padding-bottom: 0;
+        }
+    }
+
+    & .customer-block {
+        margin-bottom: 10px;
+    }
+}
+
+& .well-case-editor {
     gap: 10px;
     width: 100%;
     max-height: 70vh;