From c5145eea70dad924db3a9608196345d30c6b4d1c Mon Sep 17 00:00:00 2001
From: Anchit Nayak <113703908+Anchit-Nayak@users.noreply.github.com>
Date: Thu, 17 Oct 2024 22:40:28 +0530
Subject: [PATCH] fix: responsiveness of create new invoice form

---
 .../src/modules/ErpPanelModule/ItemRow.jsx    | 78 ++++++++++-----
 .../InvoiceModule/Forms/InvoiceForm.jsx       | 98 +++++++------------
 2 files changed, 86 insertions(+), 90 deletions(-)

diff --git a/frontend/src/modules/ErpPanelModule/ItemRow.jsx b/frontend/src/modules/ErpPanelModule/ItemRow.jsx
index 5ac84c536..e2f3a8f42 100644
--- a/frontend/src/modules/ErpPanelModule/ItemRow.jsx
+++ b/frontend/src/modules/ErpPanelModule/ItemRow.jsx
@@ -4,8 +4,10 @@ import { Form, Input, InputNumber, Row, Col } from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';
 import { useMoney, useDate } from '@/settings';
 import calculate from '@/utils/calculate';
+import useLanguage from '@/locale/useLanguage';
 
 export default function ItemRow({ field, remove, current = null }) {
+  const translate = useLanguage();
   const [totalState, setTotal] = useState(undefined);
   const [price, setPrice] = useState(0);
   const [quantity, setQuantity] = useState(0);
@@ -53,16 +55,17 @@ export default function ItemRow({ field, remove, current = null }) {
 
   return (
     <Row gutter={[12, 12]} style={{ position: 'relative' }}>
-      <Col className="gutter-row" span={5}>
+      <Col className="gutter-row" xs={24} sm={12} md={5}>
         <Form.Item
           name={[field.name, 'itemName']}
+          label={translate('Item Name')} // Add label here
           rules={[
             {
               required: true,
               message: 'Missing itemName name',
             },
             {
-              pattern: /^(?!\s*$)[\s\S]+$/, // Regular expression to allow spaces, alphanumeric, and special characters, but not just spaces
+              pattern: /^(?!\s*$)[\s\S]+$/,
               message: 'Item Name must contain alphanumeric or special characters',
             },
           ]}
@@ -70,18 +73,32 @@ export default function ItemRow({ field, remove, current = null }) {
           <Input placeholder="Item Name" />
         </Form.Item>
       </Col>
-      <Col className="gutter-row" span={7}>
-        <Form.Item name={[field.name, 'description']}>
-          <Input placeholder="description Name" />
+
+      <Col className="gutter-row" xs={24} sm={12} md={7}>
+        <Form.Item
+          name={[field.name, 'description']}
+          label={translate('Description')} // Add label here
+        >
+          <Input placeholder="Description" />
         </Form.Item>
       </Col>
-      <Col className="gutter-row" span={3}>
-        <Form.Item name={[field.name, 'quantity']} rules={[{ required: true }]}>
+
+      <Col className="gutter-row" xs={12} sm={6} md={3}>
+        <Form.Item
+          name={[field.name, 'quantity']}
+          label={translate('Quantity')} // Add label here
+          rules={[{ required: true }]}
+        >
           <InputNumber style={{ width: '100%' }} min={0} onChange={updateQt} />
         </Form.Item>
       </Col>
-      <Col className="gutter-row" span={4}>
-        <Form.Item name={[field.name, 'price']} rules={[{ required: true }]}>
+
+      <Col className="gutter-row" xs={12} sm={6} md={4}>
+        <Form.Item
+          name={[field.name, 'price']}
+          label={translate('Price')} // Add label here
+          rules={[{ required: true }]}
+        >
           <InputNumber
             className="moneyInput"
             onChange={updatePrice}
@@ -92,28 +109,35 @@ export default function ItemRow({ field, remove, current = null }) {
           />
         </Form.Item>
       </Col>
-      <Col className="gutter-row" span={5}>
-        <Form.Item name={[field.name, 'total']}>
-          <Form.Item>
-            <InputNumber
-              readOnly
-              className="moneyInput"
-              value={totalState}
-              min={0}
-              controls={false}
-              addonAfter={money.currency_position === 'after' ? money.currency_symbol : undefined}
-              addonBefore={money.currency_position === 'before' ? money.currency_symbol : undefined}
-              formatter={(value) =>
-                money.amountFormatter({ amount: value, currency_code: money.currency_code })
-              }
-            />
-          </Form.Item>
+
+      <Col className="gutter-row" xs={24} sm={12} md={5}>
+        <Form.Item
+          name={[field.name, 'total']}
+          label={translate('Total')} // Add label here
+        >
+          <InputNumber
+            readOnly
+            className="moneyInput"
+            value={totalState}
+            min={0}
+            controls={false}
+            addonAfter={money.currency_position === 'after' ? money.currency_symbol : undefined}
+            addonBefore={money.currency_position === 'before' ? money.currency_symbol : undefined}
+            formatter={(value) =>
+              money.amountFormatter({ amount: value, currency_code: money.currency_code })
+            }
+          />
         </Form.Item>
       </Col>
 
-      <div style={{ position: 'absolute', right: '-20px', top: ' 5px' }}>
-        <DeleteOutlined onClick={() => remove(field.name)} />
+      <div style={{ position: 'absolute', right: '-10px', top: '3px' }}>
+        <DeleteOutlined onClick={() => remove(field.name)} 
+        style={{
+            fontSize: '18px',
+            cursor: 'pointer',
+        }}/>
       </div>
     </Row>
+
   );
 }
diff --git a/frontend/src/modules/InvoiceModule/Forms/InvoiceForm.jsx b/frontend/src/modules/InvoiceModule/Forms/InvoiceForm.jsx
index 33043bb7e..67418d6c5 100644
--- a/frontend/src/modules/InvoiceModule/Forms/InvoiceForm.jsx
+++ b/frontend/src/modules/InvoiceModule/Forms/InvoiceForm.jsx
@@ -63,18 +63,18 @@ function LoadInvoiceForm({ subTotal = 0, current = null }) {
     addField.current.click();
   }, []);
 
+  const sm = 576;
+  const md = 768;
+  const lg = 992;
+
   return (
     <>
       <Row gutter={[12, 0]}>
-        <Col className="gutter-row" span={8}>
+        <Col className="gutter-row" xs={24} sm={12} md={8}>
           <Form.Item
             name="client"
             label={translate('Client')}
-            rules={[
-              {
-                required: true,
-              },
-            ]}
+            rules={[{ required: true }]}
           >
             <AutoCompleteAsync
               entity={'client'}
@@ -86,45 +86,32 @@ function LoadInvoiceForm({ subTotal = 0, current = null }) {
             />
           </Form.Item>
         </Col>
-        <Col className="gutter-row" span={3}>
+        <Col className="gutter-row" xs={24} sm={12} md={3}>
           <Form.Item
             label={translate('number')}
             name="number"
             initialValue={lastNumber}
-            rules={[
-              {
-                required: true,
-              },
-            ]}
+            rules={[{ required: true }]}
           >
             <InputNumber min={1} style={{ width: '100%' }} />
           </Form.Item>
         </Col>
-        <Col className="gutter-row" span={3}>
+        <Col className="gutter-row" xs={24} sm={12} md={3}>
           <Form.Item
             label={translate('year')}
             name="year"
             initialValue={currentYear}
-            rules={[
-              {
-                required: true,
-              },
-            ]}
+            rules={[{ required: true }]}
           >
             <InputNumber style={{ width: '100%' }} />
           </Form.Item>
         </Col>
-
-        <Col className="gutter-row" span={5}>
+        <Col className="gutter-row" xs={24} sm={12} md={5}>
           <Form.Item
             label={translate('status')}
             name="status"
-            rules={[
-              {
-                required: false,
-              },
-            ]}
             initialValue={'draft'}
+            rules={[{ required: false }]}
           >
             <Select
               options={[
@@ -132,64 +119,53 @@ function LoadInvoiceForm({ subTotal = 0, current = null }) {
                 { value: 'pending', label: translate('Pending') },
                 { value: 'sent', label: translate('Sent') },
               ]}
-            ></Select>
+            />
           </Form.Item>
         </Col>
-
-        <Col className="gutter-row" span={8}>
+        <Col className="gutter-row" xs={24} sm={12} md={8}>
           <Form.Item
             name="date"
             label={translate('Date')}
-            rules={[
-              {
-                required: true,
-                type: 'object',
-              },
-            ]}
+            rules={[{ required: true, type: 'object' }]}
             initialValue={dayjs()}
           >
             <DatePicker style={{ width: '100%' }} format={dateFormat} />
           </Form.Item>
         </Col>
-        <Col className="gutter-row" span={6}>
+        <Col className="gutter-row" xs={24} sm={12} md={6}>
           <Form.Item
             name="expiredDate"
             label={translate('Expire Date')}
-            rules={[
-              {
-                required: true,
-                type: 'object',
-              },
-            ]}
+            rules={[{ required: true, type: 'object' }]}
             initialValue={dayjs().add(30, 'days')}
           >
             <DatePicker style={{ width: '100%' }} format={dateFormat} />
           </Form.Item>
         </Col>
-        <Col className="gutter-row" span={10}>
+        <Col className="gutter-row" xs={24}>
           <Form.Item label={translate('Note')} name="notes">
             <Input />
           </Form.Item>
         </Col>
       </Row>
       <Divider dashed />
-      <Row gutter={[12, 12]} style={{ position: 'relative' }}>
-        <Col className="gutter-row" span={5}>
+      {/* <Row gutter={[12, 12]} style={{ position: 'relative' }}>
+        <Col className="gutter-row" xs={24} sm={5}>
           <p>{translate('Item')}</p>
         </Col>
-        <Col className="gutter-row" span={7}>
+        <Col className="gutter-row" xs={24} sm={7}>
           <p>{translate('Description')}</p>
         </Col>
-        <Col className="gutter-row" span={3}>
-          <p>{translate('Quantity')}</p>{' '}
+        <Col className="gutter-row" xs={24} sm={3}>
+          <p>{translate('Quantity')}</p>
         </Col>
-        <Col className="gutter-row" span={4}>
+        <Col className="gutter-row" xs={24} sm={4}>
           <p>{translate('Price')}</p>
         </Col>
-        <Col className="gutter-row" span={5}>
+        <Col className="gutter-row" xs={24} sm={5}>
           <p>{translate('Total')}</p>
         </Col>
-      </Row>
+      </Row> */}
       <Form.List name="items">
         {(fields, { add, remove }) => (
           <>
@@ -211,16 +187,16 @@ function LoadInvoiceForm({ subTotal = 0, current = null }) {
         )}
       </Form.List>
       <Divider dashed />
-      <div style={{ position: 'relative', width: ' 100%', float: 'right' }}>
+      <div style={{ position: 'relative', width: '100%', float: 'right' }}>
         <Row gutter={[12, -5]}>
-          <Col className="gutter-row" span={5}>
+          <Col className="gutter-row" xs={24} sm={5}>
             <Form.Item>
               <Button type="primary" htmlType="submit" icon={<PlusOutlined />} block>
                 {translate('Save')}
               </Button>
             </Form.Item>
           </Col>
-          <Col className="gutter-row" span={4} offset={10}>
+          <Col className="gutter-row" xs={24} sm={4} offset={sm ? 10 : 0}>
             <p
               style={{
                 paddingLeft: '12px',
@@ -232,19 +208,15 @@ function LoadInvoiceForm({ subTotal = 0, current = null }) {
               {translate('Sub Total')} :
             </p>
           </Col>
-          <Col className="gutter-row" span={5}>
+          <Col className="gutter-row" xs={24} sm={5}>
             <MoneyInputFormItem readOnly value={subTotal} />
           </Col>
         </Row>
         <Row gutter={[12, -5]}>
-          <Col className="gutter-row" span={4} offset={15}>
+          <Col className="gutter-row" xs={24} sm={4} offset={sm ? 15 : 0}>
             <Form.Item
               name="taxRate"
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
+              rules={[{ required: true }]}
             >
               <SelectAsync
                 value={taxRate}
@@ -259,12 +231,12 @@ function LoadInvoiceForm({ subTotal = 0, current = null }) {
               />
             </Form.Item>
           </Col>
-          <Col className="gutter-row" span={5}>
+          <Col className="gutter-row" xs={24} sm={5}>
             <MoneyInputFormItem readOnly value={taxTotal} />
           </Col>
         </Row>
         <Row gutter={[12, -5]}>
-          <Col className="gutter-row" span={4} offset={15}>
+          <Col className="gutter-row" xs={24} sm={4} offset={sm ? 15 : 0}>
             <p
               style={{
                 paddingLeft: '12px',
@@ -276,7 +248,7 @@ function LoadInvoiceForm({ subTotal = 0, current = null }) {
               {translate('Total')} :
             </p>
           </Col>
-          <Col className="gutter-row" span={5}>
+          <Col className="gutter-row" xs={24} sm={5}>
             <MoneyInputFormItem readOnly value={total} />
           </Col>
         </Row>