Compare commits

..

No commits in common. "a5e51a0305503f2ee0563b11795123f808400890" and "aafef7be311e0179098516a087a39c55d24a20ad" have entirely different histories.

8 changed files with 152 additions and 331 deletions

View File

@ -14,8 +14,8 @@ export default defineConfig({
}, },
proxy: { proxy: {
'/api/': { '/api/': {
target: 'http://yt:8003', // target: 'http://yt:8003',
// target: 'http://10.39.13.80:8003', target: 'http://10.39.13.80:8003',
// target: 'http://we6f9c65.natappfree.cc', // target: 'http://we6f9c65.natappfree.cc',
// target: 'https://loanos-test.nchl.net/', // target: 'https://loanos-test.nchl.net/',
changeOrigin: true, changeOrigin: true,

37
src/gen/ApiTypes.d.ts vendored
View File

@ -39,6 +39,7 @@ declare namespace ApiTypes {
"asset_buildings_id": number; // 所属楼栋id,[ref:asset_buildings] "asset_buildings_id": number; // 所属楼栋id,[ref:asset_buildings]
"asset_units_id": number; // 所属单元id,[ref:asset_units] "asset_units_id": number; // 所属单元id,[ref:asset_units]
"name": string; // 房屋名称 "name": string; // 房屋名称
"full_name": string; // 房屋全称
"floor"?: number; // 楼层 "floor"?: number; // 楼层
"built_area"?: number; // 建筑面积 "built_area"?: number; // 建筑面积
"inside_area"?: number; // 套内面积 "inside_area"?: number; // 套内面积
@ -303,42 +304,6 @@ declare namespace ApiTypes {
"keywords"?: string; // 关键词 "keywords"?: string; // 关键词
}; };
} }
namespace CompanyReceiptAccounts {
type List = {
"name"?: string; // 模糊搜索:名称
};
type Store = {
"companies_id": number; // 所属机构id,[ref:companies]
"company_name": string; // 企业名称
"company_bank": string; // 企业开户行
"company_account": string; // 企业账户
"pay_channel": string; // 收款渠道,[enum:CompanyReceiptAccountsPayChannelEnum]
"merchant_id"?: string; // 第三方支付的商户ID
"is_default"?: number; // 是否默认收款账号
};
type Update = {
"id": number; // id
"companies_id": number; // 所属机构id,[ref:companies]
"company_name": string; // 企业名称
"company_bank": string; // 企业开户行
"company_account": string; // 企业账户
"pay_channel": string; // 收款渠道,[enum:CompanyReceiptAccountsPayChannelEnum]
"merchant_id"?: string; // 第三方支付的商户ID
"is_default"?: number; // 是否默认收款账号
};
type Show = {
"id": number; // id
};
type SoftDelete = {
"id": number; // id
};
type Restore = {
"id": number; // id
};
type Delete = {
"id": number; // id
};
}
namespace Organizations { namespace Organizations {
type List = { type List = {
"name"?: string; // 模糊搜索:名称 "name"?: string; // 模糊搜索:名称

View File

@ -156,29 +156,6 @@ export const Apis = {
return request('admin/company/companies/select', { data }); return request('admin/company/companies/select', { data });
}, },
}, },
CompanyReceiptAccounts: {
List(data?: ApiTypes.Company.CompanyReceiptAccounts.List): Promise<MyResponseType> {
return request('admin/company/company_receipt_accounts/list', { data });
},
Store(data: ApiTypes.Company.CompanyReceiptAccounts.Store): Promise<MyResponseType> {
return request('admin/company/company_receipt_accounts/store', { data });
},
Update(data: ApiTypes.Company.CompanyReceiptAccounts.Update): Promise<MyResponseType> {
return request('admin/company/company_receipt_accounts/update', { data });
},
Show(data: ApiTypes.Company.CompanyReceiptAccounts.Show): Promise<MyResponseType> {
return request('admin/company/company_receipt_accounts/show', { data });
},
SoftDelete(data: ApiTypes.Company.CompanyReceiptAccounts.SoftDelete): Promise<MyResponseType> {
return request('admin/company/company_receipt_accounts/soft_delete', { data });
},
Restore(data: ApiTypes.Company.CompanyReceiptAccounts.Restore): Promise<MyResponseType> {
return request('admin/company/company_receipt_accounts/restore', { data });
},
Delete(data: ApiTypes.Company.CompanyReceiptAccounts.Delete): Promise<MyResponseType> {
return request('admin/company/company_receipt_accounts/delete', { data });
},
},
Organizations: { Organizations: {
List(data?: ApiTypes.Company.Organizations.List): Promise<MyResponseType> { List(data?: ApiTypes.Company.Organizations.List): Promise<MyResponseType> {
return request('admin/company/organizations/list', { data }); return request('admin/company/organizations/list', { data });

View File

@ -1,131 +1,191 @@
// AssetHousesOrientationEnum // AssetHousesOrientationEnum
export const AssetHousesOrientationEnum = { export const AssetHousesOrientationEnum = {
'East': {"text":"东","color":"#007bff","value":"East"}, East: { text: '东', color: '#007bff', value: 'East' },
'South': {"text":"南","color":"#28a745","value":"South"}, South: { text: '南', color: '#28a745', value: 'South' },
'West': {"text":"西","color":"#ffc107","value":"West"}, West: { text: '西', color: '#ffc107', value: 'West' },
'North': {"text":"北","color":"#dc3545","value":"North"}, North: { text: '北', color: '#dc3545', value: 'North' },
'Southeast': {"text":"东南","color":"#20c997","value":"Southeast"}, Southeast: { text: '东南', color: '#20c997', value: 'Southeast' },
'Northeast': {"text":"东北","color":"#6f42c1","value":"Northeast"}, Northeast: { text: '东北', color: '#6f42c1', value: 'Northeast' },
'Southwest': {"text":"西南","color":"#fd7e14","value":"Southwest"}, Southwest: { text: '西南', color: '#fd7e14', value: 'Southwest' },
'Northwest': {"text":"西北","color":"#17a2b8","value":"Northwest"}, Northwest: { text: '西北', color: '#17a2b8', value: 'Northwest' },
'EastWest': {"text":"东西","color":"#6610f2","value":"EastWest"}, EastWest: { text: '东西', color: '#6610f2', value: 'EastWest' },
'SouthNorth': {"text":"南北","color":"#e83e8c","value":"SouthNorth"}, SouthNorth: { text: '南北', color: '#e83e8c', value: 'SouthNorth' },
}; };
// AssetHousesOwnershipTypeEnum // AssetHousesOwnershipTypeEnum
export const AssetHousesOwnershipTypeEnum = { export const AssetHousesOwnershipTypeEnum = {
'CommodityHousing': {"text":"商品房","color":"#007bff","value":"CommodityHousing"}, CommodityHousing: {
'FundedHousing': {"text":"集资房","color":"#28a745","value":"FundedHousing"}, text: '商品房',
'MilitaryHousing': {"text":"军产房","color":"#17a2b8","value":"MilitaryHousing"}, color: '#007bff',
'AffordableHousing': {"text":"保障房","color":"#ffc107","value":"AffordableHousing"}, value: 'CommodityHousing',
'RuralHousing': {"text":"农民房","color":"#6f42c1","value":"RuralHousing"}, },
'CommercialOffice': {"text":"商业写字楼","color":"#fd7e14","value":"CommercialOffice"}, FundedHousing: { text: '集资房', color: '#28a745', value: 'FundedHousing' },
'CommercialComplex': {"text":"商业综合体","color":"#dc3545","value":"CommercialComplex"}, MilitaryHousing: {
'ResettlementHousing': {"text":"回迁房","color":"#20c997","value":"ResettlementHousing"}, text: '军产房',
color: '#17a2b8',
value: 'MilitaryHousing',
},
AffordableHousing: {
text: '保障房',
color: '#ffc107',
value: 'AffordableHousing',
},
RuralHousing: { text: '农民房', color: '#6f42c1', value: 'RuralHousing' },
CommercialOffice: {
text: '商业写字楼',
color: '#fd7e14',
value: 'CommercialOffice',
},
CommercialComplex: {
text: '商业综合体',
color: '#dc3545',
value: 'CommercialComplex',
},
ResettlementHousing: {
text: '回迁房',
color: '#20c997',
value: 'ResettlementHousing',
},
}; };
// AssetHousesStatusEnum // AssetHousesStatusEnum
export const AssetHousesStatusEnum = { export const AssetHousesStatusEnum = {
'Unsold': {"text":"未售","color":"#6c757d","value":"Unsold"}, Unsold: { text: '未售', color: '#6c757d', value: 'Unsold' },
'SoldNotDelivered': {"text":"已售未交房","color":"#ffc107","value":"SoldNotDelivered"}, SoldNotDelivered: {
'SelfOccupied': {"text":"自住","color":"#28a745","value":"SelfOccupied"}, text: '已售未交房',
'Rented': {"text":"出租","color":"#007bff","value":"Rented"}, color: '#ffc107',
'Vacant': {"text":"空置","color":"#dc3545","value":"Vacant"}, value: 'SoldNotDelivered',
},
SelfOccupied: { text: '自住', color: '#28a745', value: 'SelfOccupied' },
Rented: { text: '出租', color: '#007bff', value: 'Rented' },
Vacant: { text: '空置', color: '#dc3545', value: 'Vacant' },
}; };
// AssetHousesUsageEnum // AssetHousesUsageEnum
export const AssetHousesUsageEnum = { export const AssetHousesUsageEnum = {
'Residence': {"text":"住宅","color":"#007bff","value":"Residence"}, Residence: { text: '住宅', color: '#007bff', value: 'Residence' },
'Apartment': {"text":"公寓","color":"#28a745","value":"Apartment"}, Apartment: { text: '公寓', color: '#28a745', value: 'Apartment' },
'Villa': {"text":"别墅","color":"#17a2b8","value":"Villa"}, Villa: { text: '别墅', color: '#17a2b8', value: 'Villa' },
'Shop': {"text":"商铺","color":"#ffc107","value":"Shop"}, Shop: { text: '商铺', color: '#ffc107', value: 'Shop' },
'ParkingSpace': {"text":"车位","color":"#6c757d","value":"ParkingSpace"}, ParkingSpace: { text: '车位', color: '#6c757d', value: 'ParkingSpace' },
'Office': {"text":"写字楼","color":"#6610f2","value":"Office"}, Office: { text: '写字楼', color: '#6610f2', value: 'Office' },
'Clubhouse': {"text":"会所","color":"#fd7e14","value":"Clubhouse"}, Clubhouse: { text: '会所', color: '#fd7e14', value: 'Clubhouse' },
'PropertyRoom': {"text":"物业用房","color":"#dc3545","value":"PropertyRoom"}, PropertyRoom: { text: '物业用房', color: '#dc3545', value: 'PropertyRoom' },
}; };
// AssetProjectsChargeEnum // AssetProjectsChargeEnum
export const AssetProjectsChargeEnum = { export const AssetProjectsChargeEnum = {
'Contract': {"text":"包干制","color":"#007bff","value":"Contract"}, Contract: { text: '包干制', color: '#007bff', value: 'Contract' },
'Commission': {"text":"酬金制","color":"#28a745","value":"Commission"}, Commission: { text: '酬金制', color: '#28a745', value: 'Commission' },
}; };
// AssetProjectsEntrustTypeEnum // AssetProjectsEntrustTypeEnum
export const AssetProjectsEntrustTypeEnum = { export const AssetProjectsEntrustTypeEnum = {
'DeveloperJointEntrust': {"text":"开发商全委","color":"#007bff","value":"DeveloperJointEntrust"}, DeveloperJointEntrust: {
'OwnersFullEntrust': {"text":"业委会全委","color":"#28a745","value":"OwnersFullEntrust"}, text: '开发商全委',
'GovernmentFullEntrust': {"text":"政府类全委","color":"#ffc107","value":"GovernmentFullEntrust"}, color: '#007bff',
value: 'DeveloperJointEntrust',
},
OwnersFullEntrust: {
text: '业委会全委',
color: '#28a745',
value: 'OwnersFullEntrust',
},
GovernmentFullEntrust: {
text: '政府类全委',
color: '#ffc107',
value: 'GovernmentFullEntrust',
},
}; };
// AssetProjectsPropertyTypeEnum // AssetProjectsPropertyTypeEnum
export const AssetProjectsPropertyTypeEnum = { export const AssetProjectsPropertyTypeEnum = {
'Residence': {"text":"住宅","color":"#ff0000","value":"Residence"}, Residence: { text: '住宅', color: '#ff0000', value: 'Residence' },
'Commercial': {"text":"商业","color":"#ff6600","value":"Commercial"}, Commercial: { text: '商业', color: '#ff6600', value: 'Commercial' },
'Office': {"text":"办公","color":"#ffcc00","value":"Office"}, Office: { text: '办公', color: '#ffcc00', value: 'Office' },
'IndustrialPark': {"text":"产业园","color":"#00cc66","value":"IndustrialPark"}, IndustrialPark: { text: '产业园', color: '#00cc66', value: 'IndustrialPark' },
'Complex': {"text":"综合体","color":"#0099ff","value":"Complex"}, Complex: { text: '综合体', color: '#0099ff', value: 'Complex' },
'Municipal': {"text":"市政设施","color":"#6633cc","value":"Municipal"}, Municipal: { text: '市政设施', color: '#6633cc', value: 'Municipal' },
'Venue': {"text":"场馆","color":"#9966ff","value":"Venue"}, Venue: { text: '场馆', color: '#9966ff', value: 'Venue' },
'Education': {"text":"教育","color":"#339999","value":"Education"}, Education: { text: '教育', color: '#339999', value: 'Education' },
'Medical': {"text":"医疗","color":"#cc3366","value":"Medical"}, Medical: { text: '医疗', color: '#cc3366', value: 'Medical' },
}; };
// AssetProjectsStatusEnum // AssetProjectsStatusEnum
export const AssetProjectsStatusEnum = { export const AssetProjectsStatusEnum = {
'SignedNotDelivered': {"text":"签约未交付","color":"#6c757d","value":"SignedNotDelivered"}, SignedNotDelivered: {
'RollingDevelopment': {"text":"滚动开发","color":"#007bff","value":"RollingDevelopment"}, text: '签约未交付',
'ManagedAndClosed': {"text":"在管封园","color":"#ffc107","value":"ManagedAndClosed"}, color: '#6c757d',
'Exited': {"text":"退出","color":"#dc3545","value":"Exited"}, value: 'SignedNotDelivered',
},
RollingDevelopment: {
text: '滚动开发',
color: '#007bff',
value: 'RollingDevelopment',
},
ManagedAndClosed: {
text: '在管封园',
color: '#ffc107',
value: 'ManagedAndClosed',
},
Exited: { text: '退出', color: '#dc3545', value: 'Exited' },
}; };
// AssetUnitsBuildingStructureEnum // AssetUnitsBuildingStructureEnum
export const AssetUnitsBuildingStructureEnum = { export const AssetUnitsBuildingStructureEnum = {
'SteelConcrete': {"text":"钢混","color":"#007bff","value":"SteelConcrete"}, SteelConcrete: { text: '钢混', color: '#007bff', value: 'SteelConcrete' },
'SteelStructure': {"text":"钢结构","color":"#28a745","value":"SteelStructure"}, SteelStructure: { text: '钢结构', color: '#28a745', value: 'SteelStructure' },
'BrickConcrete': {"text":"砖混","color":"#ffc107","value":"BrickConcrete"}, BrickConcrete: { text: '砖混', color: '#ffc107', value: 'BrickConcrete' },
'BrickWood': {"text":"砖木","color":"#dc3545","value":"BrickWood"}, BrickWood: { text: '砖木', color: '#dc3545', value: 'BrickWood' },
}; };
// AssetUnitsBuildingTypeEnum // AssetUnitsBuildingTypeEnum
export const AssetUnitsBuildingTypeEnum = { export const AssetUnitsBuildingTypeEnum = {
'SlabAndTower': {"text":"板塔结合","color":"#007bff","value":"SlabAndTower"}, SlabAndTower: { text: '板塔结合', color: '#007bff', value: 'SlabAndTower' },
'Slab': {"text":"板楼","color":"#28a745","value":"Slab"}, Slab: { text: '板楼', color: '#28a745', value: 'Slab' },
'Tower': {"text":"塔楼","color":"#ffc107","value":"Tower"}, Tower: { text: '塔楼', color: '#ffc107', value: 'Tower' },
}; };
// CompaniesMerchantTypeEnum // CompaniesMerchantTypeEnum
export const CompaniesMerchantTypeEnum = { export const CompaniesMerchantTypeEnum = {
'PropertyManagement': {"text":"物业公司","color":"#007bff","value":"PropertyManagement"}, PropertyManagement: {
'ServiceProvider': {"text":"服务商","color":"#28a745","value":"ServiceProvider"}, text: '物业公司',
color: '#007bff',
value: 'PropertyManagement',
},
ServiceProvider: {
text: '服务商',
color: '#28a745',
value: 'ServiceProvider',
},
}; };
// CompanyReceiptAccountsPayChannelEnum // CompanyReceiptAccountsPayChannelEnum
export const CompanyReceiptAccountsPayChannelEnum = { export const CompanyReceiptAccountsPayChannelEnum = {
'WeChat': {"text":"微信","color":"#07c160","value":"WeChat"}, Value: { text: 'Label', color: '#ff0000', value: 'Value' },
'Alipay': {"text":"支付宝","color":"#1677ff","value":"Alipay"},
'BankTransfer': {"text":"银行转账","color":"#6c757d","value":"BankTransfer"},
'TongLian': {"text":"通联支付","color":"#ff9f0a","value":"TongLian"},
}; };
// OrganizationsTypeEnum // OrganizationsTypeEnum
export const OrganizationsTypeEnum = { export const OrganizationsTypeEnum = {
'Group': {"text":"集团","color":"#007bff","value":"Group"}, Group: { text: '集团', color: '#007bff', value: 'Group' },
'Company': {"text":"公司","color":"#28a745","value":"Company"}, Company: { text: '公司', color: '#28a745', value: 'Company' },
'ManagementOffice': {"text":"管理处","color":"#ffc107","value":"ManagementOffice"}, ManagementOffice: {
'Department': {"text":"部门","color":"#dc3545","value":"Department"}, text: '管理处',
color: '#ffc107',
value: 'ManagementOffice',
},
Department: { text: '部门', color: '#dc3545', value: 'Department' },
}; };
// SysModuleEnum // SysModuleEnum
export const SysModuleEnum = { export const SysModuleEnum = {
'Admin': {"text":"管理员","color":"#cf1322","value":"Admin"}, Admin: { text: '管理员', color: '#cf1322', value: 'Admin' },
'Customer': {"text":"客户","color":"#d4b106","value":"Customer"}, Customer: { text: '客户', color: '#d4b106', value: 'Customer' },
}; };
// SysPermissionsTypeEnum // SysPermissionsTypeEnum
export const SysPermissionsTypeEnum = { export const SysPermissionsTypeEnum = {
'Directory': {"text":"目录","color":"#6d7e14","value":"Directory"}, Directory: { text: '目录', color: '#6d7e14', value: 'Directory' },
'Page': {"text":"页面","color":"#4d9a13","value":"Page"}, Page: { text: '页面', color: '#4d9a13', value: 'Page' },
'Button': {"text":"按钮","color":"#97224f","value":"Button"}, Button: { text: '按钮', color: '#97224f', value: 'Button' },
}; };

View File

@ -1,38 +0,0 @@
import { MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Tabs } from 'antd';
import { useEffect, useState } from 'react';
import Organizations from './components/Organizations';
export default function Show({ title = '机构详情' }) {
const { id } = useParams<{ id: string }>();
const [data, setShow] = useState<any>({});
const loadShow = () => {
let paramsId: any = { id: id ?? 0 };
Apis.Company.Companies.Show(paramsId).then((res) => {
setShow(res?.data);
});
};
useEffect(() => {
loadShow();
}, [id]);
let items = [
{
label: '组织',
key: '1',
closable: false,
children: <Organizations item={data} />,
},
];
return (
<MyPageContainer title={title}>
<ProCard>
<Tabs type="card" items={data?.id ? items : []} />
</ProCard>
</MyPageContainer>
);
}

View File

@ -1,38 +0,0 @@
import { MyBetaModalFormProps, MyColumns, MyProTableProps } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProTable } from '@ant-design/pro-components';
import OrganizationsCreate from '../modals/OrganizationsCreate';
export default function Organizations(props: MyBetaModalFormProps) {
return (
<>
<ProTable
{...MyProTableProps.props}
search={false}
request={async (params, sort) =>
MyProTableProps.request(
{ ...params, companies_id: props?.item?.id },
sort,
Apis.Company.Organizations.List,
)
}
toolBarRender={(action) => [
<OrganizationsCreate
key="Create"
reload={action?.reload}
title="组织"
/>,
]}
options={false}
columns={[
MyColumns.ID(),
{
title: '楼栋',
width: '250px',
dataIndex: 'name',
},
]}
/>
</>
);
}

View File

@ -7,12 +7,11 @@ import {
import { Apis } from '@/gen/Apis'; import { Apis } from '@/gen/Apis';
import { CompaniesMerchantTypeEnum } from '@/gen/Enums'; import { CompaniesMerchantTypeEnum } from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components'; import { ProTable } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space } from 'antd'; import { Space } from 'antd';
import Create from './modals/Create'; import Create from './modals/Create';
import Update from './modals/Update';
export default function Index({ title = '机构管理' }) { export default function Index({ title = '机构管理' }) {
const navigate = useNavigate();
return ( return (
<MyPageContainer title={title}> <MyPageContainer title={title}>
<ProTable <ProTable
@ -60,13 +59,7 @@ export default function Index({ title = '机构管理' }) {
MyColumns.Option({ MyColumns.Option({
render: (_, item: any, index, action) => ( render: (_, item: any, index, action) => (
<Space key={index}> <Space key={index}>
{/* <Update item={item} reload={action?.reload} title={title} /> */} <Update item={item} reload={action?.reload} title={title} />
<MyButtons.View
title="详情"
onClick={() => {
navigate(`/company/companies/${item.id}`);
}}
/>
<MyButtons.Delete <MyButtons.Delete
onConfirm={() => onConfirm={() =>
Apis.Common.Admins.Delete({ id: item.id }).then(() => Apis.Common.Admins.Delete({ id: item.id }).then(() =>

View File

@ -1,98 +0,0 @@
import {
MyBetaModalFormProps,
MyButtons,
MyFormItems,
MyModalFormProps,
rulesHelper,
} from '@/common';
import { Address } from '@/components/Address';
import { Apis } from '@/gen/Apis';
import { CompaniesMerchantTypeEnum } from '@/gen/Enums';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { message } from 'antd';
export default function Create(props: MyBetaModalFormProps) {
return (
<BetaSchemaForm<ApiTypes.Company.Companies.Store>
{...MyModalFormProps.props}
title={`添加${props.title}`}
wrapperCol={{ span: 24 }}
width="800px"
trigger={<MyButtons.Create title={`添加${props.title}`} />}
onFinish={async (values) =>
Apis.Company.Companies.Store(values)
.then(() => {
props.reload?.();
message.success(props.title + '成功');
return true;
})
.catch(() => false)
}
columns={[
{
key: 'name',
title: '机构名称',
colProps: { span: 8 },
formItemProps: { ...rulesHelper.text },
},
{
key: 'short_name',
title: '机构简称',
colProps: { span: 8 },
},
{
key: 'business_license_number',
title: '营业执照号',
colProps: { span: 8 },
formItemProps: { ...rulesHelper.text },
},
{
key: 'contact_name',
title: '联系人姓名',
colProps: { span: 8 },
formItemProps: { ...rulesHelper.text },
},
{
key: 'contact_phone',
title: '联系人手机',
colProps: { span: 8 },
valueType: 'number',
fieldProps: {
maxLength: 11,
},
formItemProps: { ...rulesHelper.number },
},
{
key: 'contact_email',
title: '联系人邮箱',
colProps: { span: 8 },
},
{
key: 'contact_address',
title: '联系人地址',
colProps: { span: 24 },
},
MyFormItems.EnumRadio({
key: 'merchant_type',
title: '商户类型',
colProps: { span: 24 },
valueEnum: CompaniesMerchantTypeEnum,
required: true,
}),
Address.Cascader({
key: 'casacader',
title: '选择地址',
colProps: { span: 24 },
keys: ['province', 'city', 'area', 'street'],
required: true,
}),
{
key: 'address',
title: '详细地址',
colProps: { span: 24 },
},
]}
/>
);
}