From d19f555c7cb130b3c13f9c63eb05746c82d4f48a Mon Sep 17 00:00:00 2001
From: Antony Kurniawan <antonynugroho467@gmail.com>
Date: Fri, 19 Dec 2025 12:43:56 +0700
Subject: [PATCH] repair: layout error code form brand-device

---
 .../master/brandDevice/AddBrandDevice.jsx     | 105 ++++++++----------
 .../master/brandDevice/EditBrandDevice.jsx    | 103 ++++++++---------
 .../brandDevice/component/ErrorCodeForm.jsx   | 105 ++++++++++--------
 3 files changed, 145 insertions(+), 168 deletions(-)

diff --git a/src/pages/master/brandDevice/AddBrandDevice.jsx b/src/pages/master/brandDevice/AddBrandDevice.jsx
index a2563af..dfa88e5 100644
--- a/src/pages/master/brandDevice/AddBrandDevice.jsx
+++ b/src/pages/master/brandDevice/AddBrandDevice.jsx
@@ -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>
diff --git a/src/pages/master/brandDevice/EditBrandDevice.jsx b/src/pages/master/brandDevice/EditBrandDevice.jsx
index f4d6fe1..5aa8213 100644
--- a/src/pages/master/brandDevice/EditBrandDevice.jsx
+++ b/src/pages/master/brandDevice/EditBrandDevice.jsx
@@ -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>
diff --git a/src/pages/master/brandDevice/component/ErrorCodeForm.jsx b/src/pages/master/brandDevice/component/ErrorCodeForm.jsx
index 0dbf604..3ce9d6e 100644
--- a/src/pages/master/brandDevice/component/ErrorCodeForm.jsx
+++ b/src/pages/master/brandDevice/component/ErrorCodeForm.jsx
@@ -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>