lavoce #27
@@ -640,22 +640,53 @@ const AddBrandDevice = () => {
|
|||||||
}}>
|
}}>
|
||||||
<Card
|
<Card
|
||||||
title={
|
title={
|
||||||
<span style={{
|
<div style={{
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#262626',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: '8px'
|
justifyContent: 'space-between',
|
||||||
|
width: '100%'
|
||||||
}}>
|
}}>
|
||||||
<span style={{
|
<span style={{
|
||||||
width: '4px',
|
fontSize: '16px',
|
||||||
height: '20px',
|
fontWeight: '600',
|
||||||
backgroundColor: '#23A55A',
|
color: '#262626',
|
||||||
borderRadius: '2px'
|
display: 'flex',
|
||||||
}}></span>
|
alignItems: 'center',
|
||||||
Error Code Form
|
gap: '8px'
|
||||||
</span>
|
}}>
|
||||||
|
<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={{
|
style={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@@ -681,24 +712,6 @@ const AddBrandDevice = () => {
|
|||||||
transition: 'all 0.3s ease',
|
transition: 'all 0.3s ease',
|
||||||
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
|
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={errorCodeForm}
|
errorCodeForm={errorCodeForm}
|
||||||
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
||||||
@@ -838,34 +851,6 @@ const AddBrandDevice = () => {
|
|||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -1026,7 +1011,7 @@ const AddBrandDevice = () => {
|
|||||||
borderColor: '#23A55A',
|
borderColor: '#23A55A',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Lanjut
|
Error Code
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{currentStep === 1 && (
|
{currentStep === 1 && (
|
||||||
@@ -1039,7 +1024,7 @@ const AddBrandDevice = () => {
|
|||||||
borderColor: '#23A55A',
|
borderColor: '#23A55A',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Selesai
|
Done
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -724,22 +724,53 @@ const EditBrandDevice = () => {
|
|||||||
}}>
|
}}>
|
||||||
<Card
|
<Card
|
||||||
title={
|
title={
|
||||||
<span style={{
|
<div style={{
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#262626',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: '8px'
|
justifyContent: 'space-between',
|
||||||
|
width: '100%'
|
||||||
}}>
|
}}>
|
||||||
<span style={{
|
<span style={{
|
||||||
width: '4px',
|
fontSize: '16px',
|
||||||
height: '20px',
|
fontWeight: '600',
|
||||||
backgroundColor: '#23A55A',
|
color: '#262626',
|
||||||
borderRadius: '2px'
|
display: 'flex',
|
||||||
}}></span>
|
alignItems: 'center',
|
||||||
Error Code Form
|
gap: '8px'
|
||||||
</span>
|
}}>
|
||||||
|
<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={{
|
style={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@@ -765,24 +796,6 @@ const EditBrandDevice = () => {
|
|||||||
transition: 'all 0.3s ease',
|
transition: 'all 0.3s ease',
|
||||||
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
|
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={errorCodeForm}
|
errorCodeForm={errorCodeForm}
|
||||||
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
||||||
@@ -925,34 +938,6 @@ const EditBrandDevice = () => {
|
|||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -1016,7 +1001,7 @@ const EditBrandDevice = () => {
|
|||||||
borderColor: '#23A55A',
|
borderColor: '#23A55A',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Selesai
|
Done
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -201,56 +201,19 @@ const ErrorCodeForm = ({
|
|||||||
error_code_color: '#000000'
|
error_code_color: '#000000'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Form.Item
|
{/* Header bar with color picker, icon upload, and status toggle */}
|
||||||
label="Status"
|
<div style={{
|
||||||
name="status"
|
display: 'flex',
|
||||||
valuePropName="checked"
|
justifyContent: 'space-between',
|
||||||
>
|
alignItems: 'flex-start',
|
||||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
marginBottom: '16px',
|
||||||
<Form.Item name="status" valuePropName="checked" noStyle>
|
gap: '16px'
|
||||||
<Switch
|
}}>
|
||||||
disabled={isErrorCodeFormReadOnly}
|
{/* Color picker on left */}
|
||||||
/>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||||
</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' }}>
|
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="error_code_color"
|
name="error_code_color"
|
||||||
noStyle
|
noStyle
|
||||||
style={{ flex: '0 0 auto' }}
|
|
||||||
getValueFromEvent={(e) => e.target.value}
|
getValueFromEvent={(e) => e.target.value}
|
||||||
getValueProps={(value) => ({ value: value || '#000000' })}
|
getValueProps={(value) => ({ value: value || '#000000' })}
|
||||||
>
|
>
|
||||||
@@ -267,11 +230,55 @@ const ErrorCodeForm = ({
|
|||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
||||||
<Form.Item noStyle style={{ flex: '1 1 auto' }}>
|
{/* Icon upload beside color picker */}
|
||||||
|
<div style={{ flex: 1, maxWidth: '300px' }}>
|
||||||
{renderIconUpload()}
|
{renderIconUpload()}
|
||||||
</Form.Item>
|
</div>
|
||||||
</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.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
|
|||||||
Reference in New Issue
Block a user