Modifying tile CSS style, adjusting date picker format

.github/workflows/ci.yml

@@ -10,8 +10,8 @@ on:
       - created
 env:
   ESM_NAME: "@ugandaemr/esm-data-entry-statistics-app"
-  JS_NAME: "esm-data-entry-statistics-app.js"
-  
+  JS_NAME: "esm-ugandaemr-data-entry-statistics-app.js"
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -34,11 +34,11 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-            
+
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
-      
+
       - name: Setup local cache server for Turborepo
         uses: felixmosh/turborepo-gh-artifacts@v2
         with:
@@ -81,7 +81,7 @@ jobs:
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
-        
+
       - name: Setup local cache server for Turborepo
         uses: felixmosh/turborepo-gh-artifacts@v2
         with:
@@ -133,17 +133,17 @@ jobs:
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-  
+
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: yarn install --immutable
-        
+
       - name: Setup local cache server for Turborepo
         uses: felixmosh/turborepo-gh-artifacts@v2
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           server-token: ${{ secrets.TURBO_SERVER_TOKEN }}
-            
+
       - run: yarn config set npmAuthToken "${NODE_AUTH_TOKEN}" &&  yarn npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package.json

@@ -46,7 +46,6 @@
     "dependencies": {
         "@carbon/react": "^1.33.1",
         "@openmrs/esm-patient-common-lib": "next",
-        "@openmrs/esm-react-utils": "next",
         "@ugandaemr/esm-ugandaemr-commons-lib": "next",
         "lodash-es": "^4.17.21",
         "react-image-annotate": "^1.8.0"

src/components/data-entry-tile/data-entry-statistics-tile.component.tsx

@@ -45,8 +45,8 @@
 
 type FilterProps = {
   rowIds: Array<string>;
   headers: any;
   cellsById: any;
   inputValue: string;
   getCellId: (row, key) => string;
 };
@@ -82,25 +82,12 @@
     groupBy: groupBy,
   }) as EncounterDataResponse;
 
-  const handleStartDateChange = (e) => {
-    if (hasUpdatedParams) {
-      setFromDate(dayjs(e.target.value).format("YYYY-MM-DD"));
-      setHasUpdatedParams(true);
-      setLoading(false);
-      clearCache();
-    } else {
-      setHasUpdatedParams(false);
-    }
+  const handleStartDateChange = (selectedDate) => {
+    setFromDate(dayjs(selectedDate[0]).format("YYYY-MM-DD"));
   };
 
-  const handleEndDateChange = (e) => {
-    if (hasUpdatedParams) {
-      setToDate(dayjs(e.target.value).format("YYYY-MM-DD"));
-      setHasUpdatedParams(true);
-      setLoading(false);
-    } else {
-      setHasUpdatedParams(false);
-    }
+  const handleEndDateChange = (selectedDate) => {
+    setToDate(dayjs(selectedDate[0]).format("YYYY-MM-DD"));
   };
 
   const items = [
@@ -194,7 +181,7 @@
   useEffect(() => {
     const rows: Array<Record<string, string>> = [];
 
     paginatedEncounterTypesList.map((item: any, index) => {
       return rows.push({ ...item, id: index++ });
     });
     setAllRows(rows);
@@ -236,57 +223,55 @@
   return (
     <>
       <Tile className={styles.tile}>
-        <div className={styles.tileContent}>
+        <div className={styles.tileContainer}>
           <Dropdown
             id="encounteruser"
             titleText={t("encounterUser", "Encounter User")}
+            label="Data Entry Assistant"
             items={items}
-            size="sm"
-            initialSelectedItem={items[0]}
             itemToString={(item) => (item ? item.text : "")}
             onChange={handleEncounterDropdownChange}
             className={styles.customLabel}
           />
+
+          <DatePicker datePickerType="single" onChange={handleStartDateChange}>
+            <DatePickerInput
+              id="date-picker-input-start"
+              placeholder="mm/dd/yyyy"
+              labelText="Start date"
+              size="md"
+            />
+          </DatePicker>
+        </div>
+        <div className={styles.tileContainer}>
           <Dropdown
             id="orderedby"
             titleText={t("orderedBy", "Ordered By")}
             label="Data Entry Assistant"
-            size="sm"
             items={items}
             itemToString={(item) => (item ? item.text : "")}
             onChange={handleProviderDropdownChange}
-            className={styles.customLabel}
           />
-          <DatePicker datePickerType="single">
-            <DatePickerInput
-              id="date-picker-input-start"
-              placeholder="mm/dd/yyyy"
-              labelText="Start date"
-              size="sm"
-              onChange={handleStartDateChange}
-              className={styles.customLabel}
-            />
-          </DatePicker>
-          <DatePicker datePickerType="single">
+          <DatePicker datePickerType="single" onChange={handleEndDateChange}>
             <DatePickerInput
               id="date-picker-input-finish"
               placeholder="mm/dd/yyyy"
               labelText="End date"
-              size="sm"
-              onChange={handleEndDateChange}
+              size="md"
               className={styles.customLabel}
             />
           </DatePicker>
-          <div className={styles.actionButtonContainer}>
-            <Button
-              size="md"
-              kind="primary"
-              onClick={handleUpdateReport}
-              renderIcon={(props) => <Intersect size={16} {...props} />}
-            >
-              <span>View</span>
-            </Button>
-          </div>
+        </div>
+        <div className={styles.tileContainer}>
+          <Button
+            size="sm"
+            kind="primary"
+            onClick={handleUpdateReport}
+            className={styles.actionButton}
+          >
+            <Intersect />
+            <span>View</span>
+          </Button>
         </div>
       </Tile>
       {showTable ? (

src/components/data-entry-tile/data-entry-statistics-tile.scss

@@ -2,41 +2,35 @@
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
 @import "../../root.scss";
-* {
-    box-sizing: border-box;
-}
-
 .tile {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 150px;
-    padding: 2rem 1rem;
+    flex-direction: row;
+    justify-content: space-evenly;
+    height: 200px;
+    width: auto;
+    padding: 10px;
     border-radius: 10px;
     margin: 1rem;
-    .tileContent {
+    padding-top: 25px;
+    .tileContainer {
         display: flex;
-        margin: 0;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
+        margin-bottom: 1rem;
+        margin-right: 3rem;
+        flex-direction: column;
+        justify-content: space-evenly;
+        gap: 30px;
          :global(.cds--label) {
             font-size: 16px;
         }
-        .actionButtonContainer {
-            display: flex;
-            flex-shrink: 0;
-            margin-left: 1rem;
-        }
-         :global(.cds--form-item) {
-            margin-left: 1rem;
-            flex: 0;
-        }
-         :global(.cds--list-box__wrapper) {
-            margin-left: 1rem;
-        }
     }
+    .actionButton {
+        height: 50px;
+    }
+}
+
+:global(.cds--date-picker) {
+    display: flex;
+    gap: 10px;
 }
 
 .container {