fix: payroll, payment point layout

Author: olewandowski1

src/components/payment-point/PaymentPointFilter.jsx

@@ -11,27 +11,23 @@ import {
   useTranslations,
   PublishedComponent,
   decodeId,
+  GRID_RESPONSIVE_STANDARD,
 } from '@openimis/fe-core';
 import {
-  CONTAINS_LOOKUP,
-  DEFAULT_DEBOUNCE_TIME,
-  EMPTY_STRING,
-  MODULE_NAME,
+  CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING, MODULE_NAME,
 } from '../../constants';
 
 const StyledPaymentPointFilter = styled('div')(({ theme }) => ({
   '& .form': {
-    padding: '0 0 10px 0',
+    padding: theme.spacing(1),
     width: '100%',
   },
   '& .item': {
     padding: theme.spacing(1),
   },
 }));
 
-function PaymentPointFilter({
-  filters, onChangeFilters,
-}) {
+function PaymentPointFilter({ filters, onChangeFilters }) {
   const modulesManager = useModulesManager();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
 
@@ -83,7 +79,7 @@ function PaymentPointFilter({
           module="payroll"
           id="admin.PaymentPointManagerPicker"
           field={(
-            <Grid className="item" size={3}>
+            <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
               <PublishedComponent
                 pubRef="admin.PaymentPointManagerPicker"
                 value={filterValue('ppm_Id')}
@@ -100,7 +96,7 @@ function PaymentPointFilter({
             </Grid>
           )}
         />
-        <Grid size={3} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <TextInput
             module="payroll"
             label="paymentPoint.name"
@@ -114,6 +110,7 @@ function PaymentPointFilter({
           field={(
             <Grid size={12} className="item">
               <FormControlLabel
+                sx={{ ml: 0 }}
                 control={(
                   <Checkbox
                     color="primary"

src/components/payroll/AdvancedFiltersRowValue.jsx

@@ -24,8 +24,14 @@ import {
   BOOL_OPTIONS,
 } from '../../constants';
 
-const StyledAdvancedFiltersRowValue = styled(Grid)(({ theme }) => ({
-  '&.item': theme.paper?.item ?? {},
+const StyledAdvancedFiltersRowValue = styled('div')(({ theme }) => ({
+  '& .form': {
+    padding: theme.spacing(1),
+  },
+  '& .item': {
+    padding: theme.spacing(1),
+    ...(theme.paper?.item ?? {}),
+  },
 }));
 
 function AdvancedFiltersRowValue({
@@ -115,12 +121,13 @@ function AdvancedFiltersRowValue({
   };
 
   return (
-    <StyledAdvancedFiltersRowValue
-      container
-      direction="row"
-      className="item"
-      style={{ backgroundColor: '#DFEDEF' }}
-    >
+    <StyledAdvancedFiltersRowValue>
+      <Grid
+        container
+        direction="row"
+        className="form"
+        style={{ backgroundColor: '#DFEDEF' }}
+      >
       {filters.length > 0 && !readOnly ? (
         <div style={{
           backgroundColor: '#DFEDEF', width: '10px', height: '25px', marginTop: '25px',
@@ -166,6 +173,7 @@ function AdvancedFiltersRowValue({
           {renderInputBasedOnType(currentFilter.type)}
         </Grid>
       ) : (<></>)}
+      </Grid>
     </StyledAdvancedFiltersRowValue>
   );
 }

src/components/payroll/BenefitConsumptionFilter.jsx

@@ -10,13 +10,14 @@ import {
   useTranslations,
   TextInput,
   NumberInput,
+  GRID_RESPONSIVE_STANDARD,
 } from '@openimis/fe-core';
 import { CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING } from '../../constants';
 import BenefitConsumptionStatusPicker from '../../pickers/BenefitConsumptionStatusPicker';
 
 const StyledBenefitConsumptionFilter = styled('div')(({ theme }) => ({
   '& .form': {
-    padding: 0,
+    padding: theme.spacing(1),
   },
   '& .item': {
     padding: theme.spacing(1),
@@ -66,39 +67,39 @@ function BenefitConsumptionFilter({ filters, onChangeFilters }) {
   return (
     <StyledBenefitConsumptionFilter>
       <Grid container className="form">
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <TextInput
             module="payroll"
             label="benefitConsumption.individual.firstName"
             value={filterTextFieldValue('individual_FirstName')}
             onChange={onChangeStringFilter('individual_FirstName', CONTAINS_LOOKUP)}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <TextInput
             module="payroll"
             label="benefitConsumption.individual.lastName"
             value={filterTextFieldValue('individual_LastName')}
             onChange={onChangeStringFilter('individual_LastName', CONTAINS_LOOKUP)}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <TextInput
             module="payroll"
             label="benefitConsumption.photo"
             value={filterTextFieldValue('photo')}
             onChange={onChangeStringFilter('photo', CONTAINS_LOOKUP)}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <TextInput
             module="payroll"
             label="benefitConsumption.code"
             value={filterTextFieldValue('code')}
             onChange={onChangeStringFilter('code', CONTAINS_LOOKUP)}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <PublishedComponent
             pubRef="core.DatePicker"
             module="payroll"
@@ -113,23 +114,23 @@ function BenefitConsumptionFilter({ filters, onChangeFilters }) {
             ])}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <TextInput
             module="payroll"
             label="benefitConsumption.receipt"
             value={filterTextFieldValue('receipt')}
             onChange={onChangeStringFilter('receipt', CONTAINS_LOOKUP)}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <TextInput
             module="payroll"
             label="benefitConsumption.type"
             value={filterTextFieldValue('type')}
             onChange={onChangeStringFilter('type', CONTAINS_LOOKUP)}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <BenefitConsumptionStatusPicker
             module="payroll"
             label={formatMessage('benefitConsumptions.status.label')}
@@ -145,7 +146,7 @@ function BenefitConsumptionFilter({ filters, onChangeFilters }) {
             ])}
           />
         </Grid>
-        <Grid size={2} className="item">
+        <Grid size={GRID_RESPONSIVE_STANDARD} className="item">
           <NumberInput
             module="payroll"
             label={formatMessage('benefitConsumption.amount')}