feat: enhance DetailShift and ListShift components with improved validation and UI updates

This commit is contained in:
2025-10-22 14:24:52 +07:00
parent 85afb9d332
commit 988dcda0e2
4 changed files with 268 additions and 607 deletions

View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Switch } from 'antd';
import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Switch, Row, Col } from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { validateRun } from '../../../../Utils/validate';
import { createStatus, updateStatus } from '../../../../api/master-status';
@@ -46,7 +46,6 @@ const DetailStatus = (props) => {
{ field: 'status_number', label: 'Status Number', required: true },
{ field: 'status_name', label: 'Status Name', required: true },
{ field: 'status_color', label: 'Status Color', required: true },
{ field: 'status_description', label: 'Description', required: true },
];
if (
@@ -145,29 +144,35 @@ const DetailStatus = (props) => {
<Text style={{ marginLeft: 8 }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
</div>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Status Number</Text>
<Text style={{ color: 'red' }}> *</Text>
<InputNumber
name="status_number"
value={formData.status_number}
placeholder="Masukan nomor status"
readOnly={props.readOnly}
style={{ width: '100%' }}
onChange={handleInputNumberChange}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Status Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="status_name"
value={formData.status_name}
placeholder="Masukan nama status"
readOnly={props.readOnly}
onChange={handleInputChange}
/>
</div>
<Row gutter={16}>
<Col span={12}>
<div style={{ marginBottom: 12 }}>
<Text strong>Status Number</Text>
<Text style={{ color: 'red' }}> *</Text>
<InputNumber
name="status_number"
value={formData.status_number}
placeholder="Masukan nomor status"
readOnly={props.readOnly}
style={{ width: '100%' }}
onChange={handleInputNumberChange}
/>
</div>
</Col>
<Col span={12}>
<div style={{ marginBottom: 12 }}>
<Text strong>Status Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="status_name"
value={formData.status_name}
placeholder="Masukan nama status"
readOnly={props.readOnly}
onChange={handleInputChange}
/>
</div>
</Col>
</Row>
<div style={{ marginBottom: 12 }}>
<Text strong>Status Color</Text>
<Text style={{ color: 'red' }}> *</Text>
@@ -181,7 +186,6 @@ const DetailStatus = (props) => {
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Description</Text>
<Text style={{ color: 'red' }}> *</Text>
<TextArea
name="status_description"
value={formData.status_description}