diff --git a/src/index.css b/src/index.css
index dc4e084cbbab304a8702ad308e44e1cd5e76b94e..402c0631e61bfb744faa6a5d94a993ae6ea3ba6c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -78,4 +78,60 @@ div.report_item {
div.report_box {
padding-bottom: 1.25rem;
+}
+
+/* Upload CSV page */
+
+div.upload_csv_content {
+ background-color: #212529;
+ border-radius: 10px;
+}
+
+div.btn-container-row {
+ background-color: #fff;
+ border-radius: 10px;
+ padding: 1rem;
+ margin: 0 11rem 0 11rem;
+}
+
+div.btn-container {
+ border: 5px dashed rgba(198, 198, 198, 0.65);
+ padding: 1.5rem;
+}
+
+i.bi-filetype-csv {
+ padding-top: 2rem;
+}
+
+/* Remove display of tick and x icons for file type checking */
+i.csv_check {
+ display: none;
+ /* color: green; */
+}
+
+i.csv_x {
+ display: none;
+ /* color: red; */
+}
+
+/* Submit button switching */
+#csv_upload_btn {
+ display: none;
+ width: 20%;
+}
+
+#csv_disabled_btn {
+ width: 20%;
+}
+
+@media (min-width: 1200px) {
+ .upload_csv_row {
+ min-height: 100%;
+ }
+}
+
+@media (max-width: 1200px) {
+ .upload_csv_row {
+ padding-top: 15%;
+ }
}
\ No newline at end of file
diff --git a/src/reports.html b/src/reports.html
index e54ff2290531654b12d8ba3fae50325a157a61c8..cd50de6a99f873c21ccd7cfc6297ba82ca128023 100644
--- a/src/reports.html
+++ b/src/reports.html
@@ -57,20 +57,20 @@
<h1 class="h3 fw-bold mb-2 text-reset">
Dashboard reports
</h1>
- <h2 class="h6 fw-medium fw-medium text-muted mb-0">
+ <h2 class="h6 fw-medium text-muted mb-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</h2>
</div>
</div>
</div>
<div class="content mt-3" style="width: 90%; padding: 1.75rem 1.75rem 1px; margin: 0 auto;">
- <div class="row">
- <div class="report_box col-12 col-md-6 col-xl-3">
+ <div class="row" style="display: flex; flex-wrap: wrap;">
+ <div class="report_box col-md-6 col-xl-3">
<div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
<div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
<dl class="mb-0">
<dt class="fs-3 fw-bold">64</dt>
- <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Patients admitted</dd>
+ <dd class="fs-sm fw-medium text-muted mb-0">Patients admitted</dd>
</dl>
<div class="report_item rounded bg-dark">
<i class="bi-people" style="font-size:2rem; color: white;"></i>
@@ -78,12 +78,12 @@
</div>
</div>
</div>
- <div class="report_box col-12 col-md-6 col-xl-3">
+ <div class="report_box col-md-6 col-xl-3">
<div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
<div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
<dl class="mb-0">
<dt class="fs-3 fw-bold">32</dt>
- <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Referrals recommended</dd>
+ <dd class="fs-sm fw-medium text-muted mb-0">Referrals recommended</dd>
</dl>
<div class="report_item rounded bg-dark">
<i class="bi-person-exclamation" style="font-size:2rem; color: white;"></i>
@@ -91,12 +91,12 @@
</div>
</div>
</div>
- <div class="report_box col-12 col-md-6 col-xl-3">
+ <div class="report_box col-md-6 col-xl-3">
<div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
<div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
<dl class="mb-0">
<dt class="fs-3 fw-bold">8</dt>
- <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Patients referred</dd>
+ <dd class="fs-sm fw-medium text-muted mb-0">Patients referred</dd>
</dl>
<div class="report_item rounded bg-dark">
<i class="bi-person-check" style="font-size:2rem; color: white;"></i>
@@ -104,12 +104,12 @@
</div>
</div>
</div>
- <div class="report_box col-12 col-md-6 col-xl-3">
+ <div class="report_box col-md-6 col-xl-3">
<div class="rounded d-flex flex-column h-100 mb-0" style="background-color: rgb(212, 212, 212);">
<div class="content flex-grow-1 d-flex justify-content-between align-items-center" style="padding: 1.25rem;">
<dl class="mb-0">
<dt class="fs-3 fw-bold">12.5%</dt>
- <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Of patients referred</dd>
+ <dd class="fs-sm fw-medium text-muted mb-0">Of patients referred</dd>
</dl>
<div class="report_item rounded bg-dark">
<i class="bi-pie-chart" style="font-size:2rem; color: white;"></i>
diff --git a/src/upload_csv.html b/src/upload_csv.html
index 51e127e6b86d1016e5c458755e9453b330e30a3b..ca923be4a2f43e5269ccb651851a4e9ced658771 100644
--- a/src/upload_csv.html
+++ b/src/upload_csv.html
@@ -49,9 +49,36 @@
</nav>
</div>
<div class="col-xl-10 d-flex flex-column">
- <main class="row overflow-auto">
- <div class="col pt-5">
- <!-- Page content goes here -->
+ <main class="upload_csv_row row overflow-auto justify-content-center align-items-center">
+ <div class="upload_csv_content content text-center" style="width: 90%; padding: 1.75rem 1.75rem 1px; margin: 0 auto;">
+ <div class="row">
+ <div class="col">
+ <h1 class="fw-bold">Upload Patient CSV</h1>
+ <p class="fw-medium text-muted">Only valid CSV file formats permitted.</p>
+ </div>
+ <form method="POST" id="csv_upload" action="#">
+ <div class="btn-container-row row">
+ <div class="col" style="padding-left: 0px; padding-right: 0px;">
+ <div class="btn-container">
+ <i class="bi-filetype-csv" style="font-size: 2rem; color: rgb(0, 0, 0);"></i>
+ <i class="csv_check bi-check-circle" style="font-size: 2rem; color: rgb(0, 0, 0);"></i>
+ <i class="csv_x bi-x-circle" style="font-size: 2rem; color: rgb(0, 0, 0);"></i>
+
+ <p id="csv_filename" class="fw-medium text-muted">Only valid CSV's allowed.</p>
+
+ <input type="file" id="csv_file_upload">
+
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <input type="submit" value="Upload" class="btn btn-primary my-3" id="csv_upload_btn">
+ <button type="button" class="btn btn-light my-3" disabled="disabled" id="csv_disabled_btn">Upload</button>
+ </div>
+ </div>
+ </form>
+ </div>
</div>
</main>
</div>