feat: Financial statements enhancement.

client/src/containers/FinancialStatements/FinancialStatementDateRange.js

@@ -1,96 +1,98 @@
-import React, {useState, useCallback, useMemo} from 'react';
-import {Row, Col} from 'react-grid-system';
-import {momentFormatter} from 'utils';
-import {DateInput} from '@blueprintjs/datetime';
+import React, { useState, useCallback, useMemo } from 'react';
+import { Row, Col } from 'react-grid-system';
+import { momentFormatter } from 'utils';
+import { DateInput } from '@blueprintjs/datetime';
 import { useIntl } from 'react-intl';
-import {
-  HTMLSelect,
-  FormGroup, 
-  Intent,
-  Position,
-} from '@blueprintjs/core';
+import { HTMLSelect, FormGroup, Intent, Position } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import { FieldHint } from 'components';
-import {
-  parseDateRangeQuery
-} from 'utils';
+import { parseDateRangeQuery } from 'utils';
 
-export default function FinancialStatementDateRange({
-  formik,
-}) {
+export default function FinancialStatementDateRange({ formik }) {
   const intl = useIntl();
   const [reportDateRange, setReportDateRange] = useState('this_year');
 
-  const dateRangeOptions = useMemo(() => [
-    {value: 'today', label: 'Today', },
-    {value: 'this_week', label: 'This Week'},
-    {value: 'this_month', label: 'This Month'},
-    {value: 'this_quarter', label: 'This Quarter'},
-    {value: 'this_year', label: 'This Year'},
-    {value: 'custom', label: 'Custom Range'},
-  ], []);
+  const dateRangeOptions = useMemo(
+    () => [
+      { value: 'today', label: 'Today' },
+      { value: 'this_week', label: 'This Week' },
+      { value: 'this_month', label: 'This Month' },
+      { value: 'this_quarter', label: 'This Quarter' },
+      { value: 'this_year', label: 'This Year' },
+      { value: 'custom', label: 'Custom Range' },
+    ],
+    [],
+  );
 
-  const handleDateChange = useCallback((name) => (date) => {
-    setReportDateRange('custom');
-    formik.setFieldValue(name, date);
-  }, [setReportDateRange, formik]);
+  const handleDateChange = useCallback(
+    (name) => (date) => {
+      setReportDateRange('custom');
+      formik.setFieldValue(name, date);
+    },
+    [setReportDateRange, formik],
+  );
 
   // Handles date range field change.
-  const handleDateRangeChange = useCallback((e) => {
-    const value = e.target.value;
-    if (value !== 'custom') {
-      const dateRange = parseDateRangeQuery(value);
-      if (dateRange) {
-        formik.setFieldValue('from_date', dateRange.from_date);
-        formik.setFieldValue('to_date', dateRange.to_date);
+  const handleDateRangeChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      if (value !== 'custom') {
+        const dateRange = parseDateRangeQuery(value);
+        if (dateRange) {
+          formik.setFieldValue('from_date', dateRange.from_date);
+          formik.setFieldValue('to_date', dateRange.to_date);
+        }
       }
-    }
-    setReportDateRange(value);
-  }, [formik]);
+      setReportDateRange(value);
+    },
+    [formik],
+  );
 
-  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
   return (
-    <Row>
-      <Col sm={3}>
+    <>
+      <Col width={260}>
         <FormGroup
-          label={intl.formatMessage({'id': 'report_date_range'})}
+          label={intl.formatMessage({ id: 'report_date_range' })}
           labelInfo={infoIcon}
           minimal={true}
-          fill={true}>
-
+          fill={true}
+        >
           <HTMLSelect
             fill={true}
             options={dateRangeOptions}
             value={reportDateRange}
-            onChange={handleDateRangeChange} />
+            onChange={handleDateRangeChange}
+          />
         </FormGroup>
       </Col>
 
-      <Col sm={3}>
+      <Col width={260}>
         <FormGroup
-          label={intl.formatMessage({'id': 'from_date'})}
+          label={intl.formatMessage({ id: 'from_date' })}
           labelInfo={infoIcon}
           fill={true}
-          intent={formik.errors.from_date && Intent.DANGER}>
-
+          intent={formik.errors.from_date && Intent.DANGER}
+        >
           <DateInput
             {...momentFormatter('YYYY/MM/DD')}
             value={formik.values.from_date}
             onChange={handleDateChange('from_date')}
             popoverProps={{ position: Position.BOTTOM }}
             minimal={true}
-            fill={true} />
+            fill={true}
+          />
         </FormGroup>
       </Col>
 
-      <Col sm={3}>
+      <Col width={260}>
         <FormGroup
-          label={intl.formatMessage({'id': 'to_date'})}
-          labelInfo={<FieldHint />}          
+          label={intl.formatMessage({ id: 'to_date' })}
+          labelInfo={<FieldHint />}
           fill={true}
-          intent={formik.errors.to_date && Intent.DANGER}>
-
+          intent={formik.errors.to_date && Intent.DANGER}
+        >
           <DateInput
             {...momentFormatter('YYYY/MM/DD')}
             value={formik.values.to_date}
@@ -98,9 +100,10 @@ export default function FinancialStatementDateRange({
             popoverProps={{ position: Position.BOTTOM }}
             fill={true}
             minimal={true}
-            intent={formik.errors.to_date && Intent.DANGER} />
+            intent={formik.errors.to_date && Intent.DANGER}
+          />
         </FormGroup>
       </Col>
-    </Row>
+    </>
   );
-}
+}