Статус программы бурения отображается внутри блока

src/pages/DrillingProgram/index.jsx

@@ -1,5 +1,5 @@
 import { Button, Layout } from 'antd'
-import { FileWordOutlined } from '@ant-design/icons'
+import { CloseOutlined, FileWordOutlined, LoadingOutlined } from '@ant-design/icons'
 import { memo, useCallback, useEffect, useState } from 'react'
 
 import { Flex } from '@components/Grid'
@@ -15,6 +15,13 @@ import CategoryHistory from './CategoryHistory'
 
 import '@styles/drilling_program.less'
 
+const stateString = {
+  0: 'Не настроена',
+  1: 'Согласовывается',
+  2: 'Формируется',
+  [-1]: 'Неизвестно',
+}
+
 export const DrillingProgram = memo(({ idWell }) => {
   const [selectedCategory, setSelectedCategory] = useState()
   const [historyVisible, setHistoryVisible] = useState(false)
@@ -60,12 +67,27 @@ export const DrillingProgram = memo(({ idWell }) => {
     <LoaderPortal show={showLoader}>
       <Layout>
         {data && (
-          <div style={{ border: '1px solid #BEBEBE' }}>
-            <div style={{ padding: '5px 10px', backgroundColor: '#F3F3F3', borderBottom: '1px solid #BEBEBE' }}>Программа бурения</div>
+          <div className={'drilling_program'}>
+            <div className={'program_header'}>
+              <h3>Программа бурения</h3>
+            </div>
             <Flex style={{ justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'white' }}>
-              <Button type={'link'} icon={<FileWordOutlined />} style={{ marginLeft: '10px' }}>{data.name}</Button>
-              <div style={{ margin: '10px' }}>Размер: {data.size}</div>
-              <div style={{ margin: '10px' }}>Загружен: {formatDate(data.uploadDate)}</div>
+              {data?.idState === 3 ? (
+                <>
+                  <Button type={'link'} icon={<FileWordOutlined />} style={{ marginLeft: '10px' }}>{data.program.name}</Button>
+                  <div style={{ margin: '10px' }}>Размер: {data.program.size}</div>
+                  <div style={{ margin: '10px' }}>Загружен: {formatDate(data.program.uploadDate)}</div>
+                </>
+              ) : (
+                <h3 style={{ margin: '10px'}}>
+                  {data?.idState <= 0 ? (
+                    <CloseOutlined style={{ margin: '10px' }} />
+                  ) : (
+                    <LoadingOutlined style={{ margin: '10px' }} />
+                  )}
+                  {stateString[data?.idState ?? -1]}
+                </h3>
+              )}
             </Flex>
           </div>
         )}