repair: layout error code form brand-device
This commit is contained in:
@@ -640,22 +640,53 @@ const AddBrandDevice = () => {
|
||||
}}>
|
||||
<Card
|
||||
title={
|
||||
<span style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
color: '#262626',
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
justifyContent: 'space-between',
|
||||
width: '100%'
|
||||
}}>
|
||||
<span style={{
|
||||
width: '4px',
|
||||
height: '20px',
|
||||
backgroundColor: '#23A55A',
|
||||
borderRadius: '2px'
|
||||
}}></span>
|
||||
Error Code Form
|
||||
</span>
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
color: '#262626',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<span style={{
|
||||
width: '4px',
|
||||
height: '20px',
|
||||
backgroundColor: '#23A55A',
|
||||
borderRadius: '2px'
|
||||
}}></span>
|
||||
Error Code Form
|
||||
</span>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleSaveErrorCode}
|
||||
loading={confirmLoading}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
borderRadius: '8px',
|
||||
height: '40px',
|
||||
padding: '0 24px',
|
||||
fontWeight: '500',
|
||||
boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
|
||||
}}
|
||||
>
|
||||
{editingErrorCodeKey ? 'Update Error Code' : 'Save Error Code'}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
style={{
|
||||
width: '100%',
|
||||
@@ -681,24 +712,6 @@ const AddBrandDevice = () => {
|
||||
transition: 'all 0.3s ease',
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginBottom: '12px',
|
||||
paddingBottom: '8px',
|
||||
borderBottom: '1px solid #f5f5f5'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '3px',
|
||||
height: '16px',
|
||||
backgroundColor: '#23A55A',
|
||||
borderRadius: '2px'
|
||||
}}></div>
|
||||
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
|
||||
Error Code Details
|
||||
</h4>
|
||||
</div>
|
||||
<ErrorCodeForm
|
||||
errorCodeForm={errorCodeForm}
|
||||
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
||||
@@ -838,34 +851,6 @@ const AddBrandDevice = () => {
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
||||
<div style={{ marginLeft: editingErrorCodeKey ? '0' : 'auto' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleSaveErrorCode}
|
||||
loading={confirmLoading}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
borderRadius: '8px',
|
||||
height: '40px',
|
||||
padding: '0 24px',
|
||||
fontWeight: '500',
|
||||
boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
|
||||
}}
|
||||
>
|
||||
{editingErrorCodeKey ? 'Update Error Code' : 'Simpan Error Code'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -1026,7 +1011,7 @@ const AddBrandDevice = () => {
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Lanjut
|
||||
Error Code
|
||||
</Button>
|
||||
)}
|
||||
{currentStep === 1 && (
|
||||
@@ -1039,7 +1024,7 @@ const AddBrandDevice = () => {
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Selesai
|
||||
Done
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -724,22 +724,53 @@ const EditBrandDevice = () => {
|
||||
}}>
|
||||
<Card
|
||||
title={
|
||||
<span style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
color: '#262626',
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
justifyContent: 'space-between',
|
||||
width: '100%'
|
||||
}}>
|
||||
<span style={{
|
||||
width: '4px',
|
||||
height: '20px',
|
||||
backgroundColor: '#23A55A',
|
||||
borderRadius: '2px'
|
||||
}}></span>
|
||||
Error Code Form
|
||||
</span>
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
color: '#262626',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<span style={{
|
||||
width: '4px',
|
||||
height: '20px',
|
||||
backgroundColor: '#23A55A',
|
||||
borderRadius: '2px'
|
||||
}}></span>
|
||||
Error Code Form
|
||||
</span>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleSaveErrorCode}
|
||||
loading={confirmLoading}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
borderRadius: '8px',
|
||||
height: '40px',
|
||||
padding: '0 24px',
|
||||
fontWeight: '500',
|
||||
boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
|
||||
}}
|
||||
>
|
||||
{editingErrorCodeKey ? 'Update Error Code' : 'Save Error Code'}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
style={{
|
||||
width: '100%',
|
||||
@@ -765,24 +796,6 @@ const EditBrandDevice = () => {
|
||||
transition: 'all 0.3s ease',
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginBottom: '12px',
|
||||
paddingBottom: '8px',
|
||||
borderBottom: '1px solid #f5f5f5'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '3px',
|
||||
height: '16px',
|
||||
backgroundColor: '#23A55A',
|
||||
borderRadius: '2px'
|
||||
}}></div>
|
||||
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
|
||||
Error Code Details
|
||||
</h4>
|
||||
</div>
|
||||
<ErrorCodeForm
|
||||
errorCodeForm={errorCodeForm}
|
||||
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
||||
@@ -925,34 +938,6 @@ const EditBrandDevice = () => {
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
||||
<div style={{ marginLeft: editingErrorCodeKey ? '0' : 'auto' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleSaveErrorCode}
|
||||
loading={confirmLoading}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
borderRadius: '8px',
|
||||
height: '40px',
|
||||
padding: '0 24px',
|
||||
fontWeight: '500',
|
||||
boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
|
||||
}}
|
||||
>
|
||||
{editingErrorCodeKey ? 'Update Error Code' : 'Simpan Error Code'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -1016,7 +1001,7 @@ const EditBrandDevice = () => {
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Selesai
|
||||
Done
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -201,56 +201,19 @@ const ErrorCodeForm = ({
|
||||
error_code_color: '#000000'
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
label="Status"
|
||||
name="status"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Form.Item name="status" valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>
|
||||
{statusWatch ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Error Code"
|
||||
name="error_code"
|
||||
rules={[{ required: true, message: 'Error code wajib diisi!' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="Enter error code"
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Error Name"
|
||||
name="error_code_name"
|
||||
rules={[{ required: !isErrorCodeFormReadOnly, message: 'Error name wajib diisi!' }]}
|
||||
>
|
||||
<Input placeholder="Enter error name" disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Description" name="error_code_description">
|
||||
<Input.TextArea
|
||||
placeholder="Enter error description"
|
||||
rows={3}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Color & Icon">
|
||||
<div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
|
||||
{/* Header bar with color picker, icon upload, and status toggle */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: '16px',
|
||||
gap: '16px'
|
||||
}}>
|
||||
{/* Color picker on left */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<Form.Item
|
||||
name="error_code_color"
|
||||
noStyle
|
||||
style={{ flex: '0 0 auto' }}
|
||||
getValueFromEvent={(e) => e.target.value}
|
||||
getValueProps={(value) => ({ value: value || '#000000' })}
|
||||
>
|
||||
@@ -267,11 +230,55 @@ const ErrorCodeForm = ({
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item noStyle style={{ flex: '1 1 auto' }}>
|
||||
{/* Icon upload beside color picker */}
|
||||
<div style={{ flex: 1, maxWidth: '300px' }}>
|
||||
{renderIconUpload()}
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status toggle on right */}
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Form.Item name="status" valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>
|
||||
{statusWatch ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Code and Error Name in one row with 1/3 and 2/3 ratio */}
|
||||
<div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
|
||||
<Form.Item
|
||||
label="Error Code"
|
||||
name="error_code"
|
||||
rules={[{ required: true, message: 'Error code wajib diisi!' }]}
|
||||
style={{ flex: 1, marginBottom: 0, maxWidth: '33.33%' }}
|
||||
>
|
||||
<Input
|
||||
placeholder="Enter error code"
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Error Name"
|
||||
name="error_code_name"
|
||||
rules={[{ required: !isErrorCodeFormReadOnly, message: 'Error name wajib diisi!' }]}
|
||||
style={{ flex: 2, marginBottom: 0, maxWidth: '66.67%' }}
|
||||
>
|
||||
<Input placeholder="Enter error name" disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<Form.Item label="Description" name="error_code_description">
|
||||
<Input.TextArea
|
||||
placeholder="Enter error description"
|
||||
rows={3}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</ConfigProvider>
|
||||
|
||||
Reference in New Issue
Block a user