reuse component

src/container/Reports/ReportHistorical.js

 import React, { Component } from 'react'
 import { Paper, } from '@material-ui/core';
 import AlertSnackbar from '../../library/AlertSnackbar'
-import Header from '../../library/Header';
 import SectionHeader from '../../library/SectionHeader';
 import AutocompleteField from '../../library/AutocompleteField';
 import CustomButton from '../../library/CustomButton';
@@ -11,6 +10,7 @@ import DDLMonth from '../../library/Dropdown/DDLMonth';
 import DDLCompany from '../../library/Dropdown/DDLCompany';
 import ContentContainer from '../../library/ContentContainer';
 import Constant from '../../library/Constant';
+import { downloadFileBlob } from '../../library/Utils';
 
 class ReportHistorical extends Component {
   constructor(props) {
@@ -115,14 +115,7 @@ class ReportHistorical extends Component {
         const blob = res.data
 
         if (blob && blob.size > 0) {
-          const url = window.URL.createObjectURL(blob)
-          const a = document.createElement('a')
-          a.href = url
-          a.download = 'Historical.xlsx'
-          document.body.appendChild(a)
-          a.click()
-          a.remove()
-          window.URL.revokeObjectURL(url)
+          downloadFileBlob('Historical.xlsx', blob)
         }
 
         this.showAlert('Download Berhasil', 'success');
@@ -139,10 +132,7 @@ class ReportHistorical extends Component {
     const contentStyle = { display: 'flex', marginTop: 10, gap: '20px' };
 
     return (
-      <ContentContainer isLoading={isLoading}>
-        <Header
-          title="Report Historical"
-        />
+      <ContentContainer isLoading={isLoading} title="Report Historical">
         <div style={{ padding: 20 }}>
           <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
             <SectionHeader
@@ -155,6 +145,7 @@ class ReportHistorical extends Component {
                   value={data?.report_id}
                   onChange={(event, newValue) => this.handleChangeDropdown(newValue, 'report_id')}
                   label="Report Type"
+                  isLoading={isLoading}
                 />
                 <AutocompleteField
                   options={listPeriodType}

src/library/AlertSnackbar.js

@@ -59,7 +59,7 @@ class AlertSnackbar extends Component {
       children,
       
       // Props untuk Snackbar
-      autoHideDuration = 1500,
+      autoHideDuration = 2000,
       anchorOrigin = { vertical: 'bottom', horizontal: 'center' },
       
       // Props untuk Alert

src/library/AutocompleteField.js

@@ -3,6 +3,7 @@ import { TextField, Checkbox } from '@material-ui/core';
 import { Autocomplete } from '@material-ui/lab';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
@@ -25,6 +26,7 @@ const AutocompleteField = ({
     noOptionsText = "No options available",
     multiple = false,
     showCheckbox = false,
+    isLoading = false,
     ...props
 }) => {
     const defaultRenderInput = (params) => (
@@ -38,6 +40,17 @@ const AutocompleteField = ({
             error={error}
             helperText={helperText}
             fullWidth
+            InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                    <>
+                        {isLoading ? (
+                            <CircularProgress color="inherit" size={20} />
+                        ) : null}
+                        {params.InputProps.endAdornment}
+                    </>
+                ),
+            }}
         />
     );
 
@@ -89,6 +102,7 @@ const AutocompleteField = ({
                 return option.id === value.id;
             }}
             renderOption={showCheckbox && multiple ? renderOptionWithCheckbox : undefined}
+            loadingText="Loading..."
             {...props}
         />
     );

src/library/ContentContainer.js

 import React, { Component } from 'react';
 import OverlayLoader from './OverlayLoader';
+import Header from './Header';
 
 class ContentContainer extends Component {
   render() {
@@ -11,6 +12,7 @@ class ContentContainer extends Component {
       padding = 0,
       style = {},
       loaderProps = {},
+      title = '',
       ...restProps
     } = this.props;
 
@@ -27,6 +29,9 @@ class ContentContainer extends Component {
         {isLoading && (
           <OverlayLoader isLoading={isLoading} {...loaderProps} />
         )}
+        <Header
+          title={title}
+        />
         {children}
       </div>
     );

src/library/Dropdown/DDLCompany.js

@@ -11,6 +11,7 @@ class DDLCompany extends Component {
                 ? (props.value || [])
                 : (props.value || null),
             companies: [],
+            isLoading: false,
         };
     }
 
@@ -30,8 +31,13 @@ class DDLCompany extends Component {
         }
     }
 
+    setLoading = (isLoading) => {
+        this.setState({ isLoading });
+    }
+
     getCompanyActive = async () => {
         try {
+            this.setLoading(true);
             const response = await api.create().getPerusahaanActive();
             const data = response?.data?.data || [];
 
@@ -44,6 +50,8 @@ class DDLCompany extends Component {
         } catch (err) {
             console.error('Failed to load companies', err);
             this.setState({ companies: [] });
+        } finally {
+            this.setLoading(false);
         }
     };
 
@@ -117,7 +125,7 @@ class DDLCompany extends Component {
             multiple,
         } = this.props;
 
-        const { selectedValue, companies } = this.state;
+        const { selectedValue, companies, isLoading } = this.state;
 
         return (
             <AutocompleteField
@@ -134,7 +142,7 @@ class DDLCompany extends Component {
                 margin={margin}
                 multiple={multiple}
                 showCheckbox={multiple}
-                noOptionsText="No companies available"
+                isLoading={isLoading}
             />
         );
     }

src/library/Dropdown/DDLYear.js

@@ -180,7 +180,6 @@ class DDLYear extends Component {
                 helperText={helperText}
                 style={style}
                 margin={margin}
-                noOptionsText="No years available"
             />
         );
     }

src/library/Utils.js

 export function titleCase(text) {
 	var value = String(text).replace(/\./g, ' ')
 		.replace(/\s/g, ' ')
-		.replace(/^(.)/, function($1) { return $1.toUpperCase(); })
+		.replace(/^(.)/, function ($1) { return $1.toUpperCase(); })
 	// .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
 
 	return value
@@ -13,6 +13,17 @@ export function roundMath(number, decimalPlaces) {
 }
 
 export function fixNumber(num, decimalCount = 2) {
-	const output = Math.round((num + Number.EPSILON) * (Math.pow(10,decimalCount))) / (Math.pow(10,decimalCount))
+	const output = Math.round((num + Number.EPSILON) * (Math.pow(10, decimalCount))) / (Math.pow(10, decimalCount))
 	return output
 }
+
+export function downloadFileBlob(fileName, blobData) {
+	const url = window.URL.createObjectURL(blobData)
+	const a = document.createElement('a')
+	a.href = url
+	a.download = fileName
+	document.body.appendChild(a)
+	a.click()
+	a.remove()
+	window.URL.revokeObjectURL(url)
+}
\ No newline at end of file