Restructure api fetching file and styles

package.json

@@ -14,7 +14,6 @@
   },
   "scripts": {
     "start": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources 'packages/esm-*-app/'",
-    "start:commonslib": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources 'packages/esm-commons-lib/'",
     "start:core": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-ohri-core-app",
     "start:covid": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-covid-app",
     "start:hct": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-hiv-care-treatment-app",

packages/esm-commons-lib/src/components/reports/home.component.scss

@@ -1,143 +1,165 @@
 .centeredTextContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 50px;
-    text-align: center;
-  }
-
-  .container {
-    padding: 2rem;
-  }
-
-  .homeContainer {
-    padding: 1rem;
-  }
-
-  .dropdownItem {
-    display: flex;
-    align-items: center;
-  }
-
-  .layer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 300px;
-  }
-
-  .tile {
-    padding: 2rem;
-    text-align: center;
-  }
-
-  .content {
-    font-size: 1.25rem;
-    color: #5a5a5a;
-  }
-
-  .explainer {
-    color: #777;
-  }
-
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .formContainer {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .datePickerContainer {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-
-  .datePickerContainer > * {
-    flex: 1;
-    min-width: 150px;
-  }
-
-  .fetchButtonContainer {
-    margin-left: 16px;
-    display: flex;
-    align-items: center;
-  }
-
-  .datePickerInput {
-    min-width: 120px;
-  }
-
-  .button {
-    max-height: 40px;
-    line-height: 40px;
-    font-size: 14px;
-    padding: 0 16px;
-    margin-top: 1rem;
-    max-width: 120px;
-    align-items: center;
-  }
-
-  .dataTableContainer {
-    margin-top: 2rem;
-    padding: 1rem;
-    border: solid 1px #e0e0e0;
-    max-height: calc(100vh - 200px);
-    overflow: auto;
-    height: 100vh;
-  }
-
-  .dataTableFullContainer {
-    margin-top: 2rem;
-    padding: 1rem;
-    max-height: calc(100vh - 200px);
-    overflow: auto;
-  }
-
-
-  .tableContainer {
-    margin-top: 1rem;
-  }
-
-  .toolbarWrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .toolbarContent {
-    display: flex;
-    gap: 1rem;
-  }
-
-  .searchbox {
-    flex-grow: 1;
-  }
-
-  .tileContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 200px;
-  }
-
-  .tileContent {
-    text-align: center;
-  }
-
-  .content {
-    font-size: 1.25rem;
-    color: #5a5a5a;
-  }
-
-  .pagination {
-    margin-top: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  text-align: center;
+}
+
+.container {
+  padding: 2rem;
+}
+
+.homeContainer {
+  padding: 1rem;
+  width: 85vw
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+}
+
+.layer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.tile {
+  padding: 2rem;
+  text-align: center;
+}
+
+.content {
+  font-size: 1.25rem;
+  color: #5a5a5a;
+}
+
+.explainer {
+  color: #777;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.formContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.datePickerContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.datePickerContainer > * {
+  flex: 1;
+  min-width: 150px;
+}
+
+.fetchButtonContainer {
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.datePickerInput {
+  min-width: 120px;
+}
+
+.button {
+  max-height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  padding: 0 16px;
+  margin-top: 1rem;
+  max-width: 120px;
+  align-items: center;
+}
+
+.dataTableContainer {
+  margin-top: 2rem;
+  padding: 1rem;
+  border: solid 1px #e0e0e0;
+  max-height: calc(100vh - 200px);
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.dataTableFullContainer {
+  margin-top: 2rem;
+  padding: 1rem;
+  max-height: calc(100vh - 200px);
+  overflow: auto; 
+}
+
+.dataTable {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.tableHeader {
+  white-space: normal; 
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100px;
+  text-align: center; 
+}
+
+.tableCell {
+  white-space: normal; 
+  word-wrap: break-word; 
+  overflow-wrap: break-word; 
+}
+
+.tableContainer {
+  margin-top: 1rem;
+}
+
+.toolbarWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbarContent {
+  display: flex;
+  gap: 1rem;
+}
+
+.searchbox {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.tileContent {
+  text-align: center;
+}
+
+.content {
+  font-size: 1.25rem;
+  color: #5a5a5a;
+}
+
+.pagination {
+  margin-top: 1rem;
+}