From 428911d49b3ef05b69772c47ec69c76ec8408946 Mon Sep 17 00:00:00 2001
From: Oleksandr Bohuslavskyi <o.bohuslavskyi@dxc.com>
Date: Thu, 24 Oct 2024 14:58:08 -0500
Subject: [PATCH] DSS-894:Missing Icons on Home Page Tiles. DSS-941:Change the
 action "Completed Takedown" to "Takedown Reported"

---
 .../app/common/services/dashboard.service.ts  | 28 ++++++------
 .../dashboard/dashboard.component.html        | 23 ++++++----
 .../dashboard/dashboard.component.scss        | 44 +++++++++++++++++++
 .../dashboard/dashboard.component.ts          |  2 +-
 .../aggregated-listings-table.component.html  |  2 +-
 .../listing-details.component.html            |  9 ++--
 frontend/src/assets/images/dashboard/cog.svg  |  3 ++
 .../images/dashboard/exclamation-circle.svg   |  3 ++
 .../src/assets/images/dashboard/export.svg    |  3 ++
 frontend/src/assets/images/dashboard/eye.svg  |  3 ++
 .../src/assets/images/dashboard/file-x.svg    |  3 ++
 .../src/assets/images/dashboard/history.svg   |  3 ++
 .../src/assets/images/dashboard/upload.svg    |  3 ++
 .../src/assets/images/dashboard/user-cog.svg  |  3 ++
 14 files changed, 102 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/assets/images/dashboard/cog.svg
 create mode 100644 frontend/src/assets/images/dashboard/exclamation-circle.svg
 create mode 100644 frontend/src/assets/images/dashboard/export.svg
 create mode 100644 frontend/src/assets/images/dashboard/eye.svg
 create mode 100644 frontend/src/assets/images/dashboard/file-x.svg
 create mode 100644 frontend/src/assets/images/dashboard/history.svg
 create mode 100644 frontend/src/assets/images/dashboard/upload.svg
 create mode 100644 frontend/src/assets/images/dashboard/user-cog.svg

diff --git a/frontend/src/app/common/services/dashboard.service.ts b/frontend/src/app/common/services/dashboard.service.ts
index 00dd3ba3..8fd08c5d 100644
--- a/frontend/src/app/common/services/dashboard.service.ts
+++ b/frontend/src/app/common/services/dashboard.service.ts
@@ -49,7 +49,7 @@ export class DashboardService {
       {
         title: 'Aggregated Listing Data',
         accessPermission: listing_read,
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Aggregated Listing Data',
         description: 'View aggregated platform listing data for your community',
         route: 'aggregated-listings',
@@ -60,7 +60,7 @@ export class DashboardService {
       {
         title: 'Listing Data',
         accessPermission: listing_read,
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Listing Data',
         description: 'View platform listing data for your community',
         route: 'listings',
@@ -71,7 +71,7 @@ export class DashboardService {
       {
         title: 'Download Listing Data',
         accessPermission: listing_read,
-        buttonIcon: '',
+        buttonIcon: 'export',
         buttonText: 'Download Listing Data',
         description: 'Download listing data for your community',
         route: 'export-listings',
@@ -82,7 +82,7 @@ export class DashboardService {
       {
         title: 'Upload Platform Data',
         accessPermission: listing_file_upload,
-        buttonIcon: '',
+        buttonIcon: 'upload',
         buttonText: 'Upload data',
         description: 'Upload platform data to the system ',
         route: 'upload-listing-data',
@@ -94,7 +94,7 @@ export class DashboardService {
         title: 'Platform Upload History',
         accessPermission: upload_history_read,
         description: 'View all platform upload history here',
-        buttonIcon: '',
+        buttonIcon: 'history',
         buttonText: 'Platform Upload History',
         route: '/upload-listing-history',
         boxId: 'platformUploadHistory_box',
@@ -104,7 +104,7 @@ export class DashboardService {
       {
         title: 'Upload Business Licence Data',
         accessPermission: licence_file_upload,
-        buttonIcon: '',
+        buttonIcon: 'history',
         buttonText: 'Upload Business Licence Data',
         description: 'Upload your local government’s business licence data',
         route: '/upload-business-licence-data',
@@ -115,7 +115,7 @@ export class DashboardService {
       {
         title: 'User Management',
         accessPermission: user_write,
-        buttonIcon: '',
+        buttonIcon: 'user-cog',
         buttonText: 'User Management',
         description: 'Process new requests for system access',
         route: '/user-management',
@@ -126,7 +126,7 @@ export class DashboardService {
       {
         title: 'Manage Roles and Permissions',
         accessPermission: role_read,
-        buttonIcon: '',
+        buttonIcon: 'user-cog',
         buttonText: 'Manage Roles And Permissions',
         description: 'Add or edit roles and permissions',
         route: '/roles',
@@ -137,7 +137,7 @@ export class DashboardService {
       {
         title: 'Manage Platforms',
         accessPermission: platform_write,
-        buttonIcon: '',
+        buttonIcon: 'cog',
         buttonText: 'Manage Platforms',
         description: 'Manage platform information',
         route: '/platform-management',
@@ -148,7 +148,7 @@ export class DashboardService {
       {
         title: 'Guidance for Local Government',
         accessPermission: '',
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Local Government Guide',
         description: 'View the policy guidance for sending Notices, Takedown Requests and Escalations',
         route: 'https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/data-guidelines-localgovernment',
@@ -161,7 +161,7 @@ export class DashboardService {
       {
         title: 'Guideline for Platforms',
         accessPermission: '',
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View Platform Guide',
         description: 'Understand requirements for STR platforms under the STRAA',
         route: 'https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/data-guidelines-platforms',
@@ -174,7 +174,7 @@ export class DashboardService {
       {
         title: 'User Guide',
         accessPermission: '',
-        buttonIcon: '',
+        buttonIcon: 'eye',
         buttonText: 'View User Guide',
         description: 'See detailed information about how the STR Data Portal works',
         route: 'https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/strdataportal-support',
@@ -186,7 +186,7 @@ export class DashboardService {
       },
       {
         accessPermission: takedown_action,
-        buttonIcon: '',
+        buttonIcon: 'exclamation-circle',
         buttonText: 'Send Notice',
         description: 'Notify an STR host and platform that a listing is not compliant with a business licence requirement. A notice must be sent prior to sending a Takedown Request',
         route: '/compliance-notice',
@@ -197,7 +197,7 @@ export class DashboardService {
       },
       {
         accessPermission: takedown_action,
-        buttonIcon: '',
+        buttonIcon: 'file-x',
         buttonText: 'Send Takedown Letter',
         description: 'Send a request to an STR platform to remove a non-compliant listing. A Takedown Request can be sent within a period of 5 to 90 days after a Notice of Non-Compliance is delivered.',
         route: '/takedown-request',
diff --git a/frontend/src/app/features/components/dashboard/dashboard.component.html b/frontend/src/app/features/components/dashboard/dashboard.component.html
index d374c432..6ce249c1 100644
--- a/frontend/src/app/features/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/features/components/dashboard/dashboard.component.html
@@ -6,8 +6,10 @@ <h2>Home</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}
+            </button>
         </div>
     </div>
 </div>
@@ -19,8 +21,9 @@ <h2 *ngIf="cardSectionsToDisplay.admin.length">Administration Tools</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}</button>
         </div>
     </div>
 </div>
@@ -32,8 +35,10 @@ <h2 *ngIf="cardSectionsToDisplay.forms.length">Forms</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}
+            </button>
         </div>
     </div>
 </div>
@@ -45,8 +50,10 @@ <h2 *ngIf="cardSectionsToDisplay.info.length">Information and Support</h2>
             <div *ngIf="card.isComingSoon" class="card-warning">(COMING SOON)</div>
         </div>
         <div class="card-actions">
-            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId"
-                (click)="navigateTo(card.route)">{{card.buttonText}}</button>
+            <button pButton [disabled]="card.isButtonDisabled" [id]="card.buttonId" (click)="navigateTo(card.route)">
+                <span class="icon {{card.buttonIcon}}" *ngIf="card.buttonIcon"></span>
+                {{card.buttonText}}
+            </button>
         </div>
     </div>
 </div>
diff --git a/frontend/src/app/features/components/dashboard/dashboard.component.scss b/frontend/src/app/features/components/dashboard/dashboard.component.scss
index 04975f62..7c7730e6 100644
--- a/frontend/src/app/features/components/dashboard/dashboard.component.scss
+++ b/frontend/src/app/features/components/dashboard/dashboard.component.scss
@@ -58,6 +58,50 @@
 
             .card-actions {
                 height: 48px;
+
+                span {
+
+                    &.icon {
+                        margin-right: 8px;
+                        width: 20px;
+                        height: 20px;
+                        background-position: center center;
+                        background-repeat: no-repeat;
+                        background-size: contain;
+
+                        &.cog {
+                            background-image: url(../../../../assets/images/dashboard/cog.svg);
+                        }
+
+                        &.exclamation-circle {
+                            background-image: url(../../../../assets/images/dashboard/exclamation-circle.svg);
+                        }
+
+                        &.export {
+                            background-image: url(../../../../assets/images/dashboard/cog.svg);
+                        }
+
+                        &.eye {
+                            background-image: url(../../../../assets/images/dashboard/eye.svg);
+                        }
+
+                        &.file-x {
+                            background-image: url(../../../../assets/images/dashboard/file-x.svg);
+                        }
+
+                        &.history {
+                            background-image: url(../../../../assets/images/dashboard/history.svg);
+                        }
+
+                        &.upload {
+                            background-image: url(../../../../assets/images/dashboard/upload.svg);
+                        }
+
+                        &.user-cog {
+                            background-image: url(../../../../assets/images/dashboard/user-cog.svg);
+                        }
+                    }
+                }
             }
         }
     }
diff --git a/frontend/src/app/features/components/dashboard/dashboard.component.ts b/frontend/src/app/features/components/dashboard/dashboard.component.ts
index e86eb3fb..7b9f4bda 100644
--- a/frontend/src/app/features/components/dashboard/dashboard.component.ts
+++ b/frontend/src/app/features/components/dashboard/dashboard.component.ts
@@ -26,7 +26,7 @@ import { GlobalLoaderService } from '../../../common/services/global-loader.serv
   styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent implements OnInit {
-  userType = '' || 'BCGov' || 'Platform' || 'LG' || 'Admin';
+  userType!: '' | 'BCGov' | 'Platform' | 'LG' | 'Admin';
   currentUser!: User;
   showListingHistory = false;
 
diff --git a/frontend/src/app/features/components/listings-table/aggregated-listings-table/aggregated-listings-table.component.html b/frontend/src/app/features/components/listings-table/aggregated-listings-table/aggregated-listings-table.component.html
index 25f15ae6..78ac8f3d 100644
--- a/frontend/src/app/features/components/listings-table/aggregated-listings-table/aggregated-listings-table.component.html
+++ b/frontend/src/app/features/components/listings-table/aggregated-listings-table/aggregated-listings-table.component.html
@@ -165,7 +165,7 @@ <h2 class="title">Aggregated Listings</h2>
                                 pTooltip="Reassigned">
                             </div>
                             <div *ngIf="listing.isTakenDown" class="status-flag status-takedown-complete"
-                                pTooltip="Takedown Complete">
+                                pTooltip="Takedown Reported">
                             </div>
                         </div>
                     </td>
diff --git a/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html b/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html
index de4936e0..e5d7e6b3 100644
--- a/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html
+++ b/frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html
@@ -22,12 +22,9 @@ <h2>Detailed Listing Information for</h2>
     </div>
     <div class="column">
         <button *ngIf="!isCEU" pButton (click)="sendNoticeOfNonCompliance()" class="p-button-outlined do-not-print-it">
-            <span class="nonc-icon"></span> Send Notice Of
-            Non-Compliance </button>
+            <span class="nonc-icon"></span> Send Notice Of Non-Compliance </button>
         <button *ngIf="!isCEU" pButton (click)="sendTakedownRequest()" class="p-button-outlined do-not-print-it"><span
-                class="tdr-icon"></span> Send
-            Takedown
-            Request</button>
+                class="tdr-icon"></span> Send Takedown Request</button>
     </div>
 </div>
 <div class="content" *ngIf="listing">
@@ -79,7 +76,7 @@ <h2>Detailed Listing Information for</h2>
                     </span>
                     <span class="status-item" *ngIf="listing.isTakenDown">
                         <span>
-                            Takedown Complete
+                            Takedown Reported
                         </span>
                         <span class="status-flag status-takedown-complete">
                         </span>
diff --git a/frontend/src/assets/images/dashboard/cog.svg b/frontend/src/assets/images/dashboard/cog.svg
new file mode 100644
index 00000000..89bc9760
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/cog.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3726 6.50781C19.4976 6.84766 19.3921 7.22656 19.1226 7.46875L17.4312 9.00781C17.4741 9.33203 17.4976 9.66406 17.4976 10C17.4976 10.3359 17.4741 10.668 17.4312 10.9922L19.1226 12.5312C19.3921 12.7734 19.4976 13.1523 19.3726 13.4922C19.2007 13.957 18.9937 14.4023 18.7554 14.832L18.5718 15.1484C18.314 15.5781 18.0249 15.9844 17.7085 16.3672C17.478 16.6484 17.0952 16.7422 16.7515 16.6328L14.5757 15.9414C14.0523 16.3438 13.4741 16.6797 12.8569 16.9336L12.3687 19.1641C12.2905 19.5195 12.0171 19.8008 11.6577 19.8594C11.1187 19.9492 10.564 19.9961 9.99757 19.9961C9.43116 19.9961 8.87647 19.9492 8.33741 19.8594C7.97804 19.8008 7.7046 19.5195 7.62647 19.1641L7.13819 16.9336C6.52101 16.6797 5.94288 16.3438 5.41944 15.9414L3.24757 16.6367C2.90382 16.7461 2.52101 16.6484 2.29054 16.3711C1.97413 15.9883 1.68507 15.582 1.42726 15.1523L1.24366 14.8359C1.00538 14.4062 0.79835 13.9609 0.626475 13.4961C0.501475 13.1562 0.606944 12.7773 0.876475 12.5352L2.56788 10.9961C2.52491 10.668 2.50147 10.3359 2.50147 10C2.50147 9.66406 2.52491 9.33203 2.56788 9.00781L0.876475 7.46875C0.606944 7.22656 0.501475 6.84766 0.626475 6.50781C0.79835 6.04297 1.00538 5.59766 1.24366 5.16797L1.42726 4.85156C1.68507 4.42188 1.97413 4.01562 2.29054 3.63281C2.52101 3.35156 2.90382 3.25781 3.24757 3.36719L5.42335 4.05859C5.94679 3.65625 6.52491 3.32031 7.1421 3.06641L7.63038 0.835938C7.70851 0.480469 7.98194 0.199219 8.34132 0.140625C8.88038 0.046875 9.43507 0 10.0015 0C10.5679 0 11.1226 0.046875 11.6616 0.136719C12.021 0.195312 12.2944 0.476562 12.3726 0.832031L12.8609 3.0625C13.478 3.31641 14.0562 3.65234 14.5796 4.05469L16.7554 3.36328C17.0991 3.25391 17.4819 3.35156 17.7124 3.62891C18.0288 4.01172 18.3179 4.41797 18.5757 4.84766L18.7593 5.16406C18.9976 5.59375 19.2046 6.03906 19.3765 6.50391L19.3726 6.50781ZM10.0015 13.125C10.8303 13.125 11.6251 12.7958 12.2112 12.2097C12.7972 11.6237 13.1265 10.8288 13.1265 10C13.1265 9.1712 12.7972 8.37634 12.2112 7.79029C11.6251 7.20424 10.8303 6.875 10.0015 6.875C9.17267 6.875 8.37782 7.20424 7.79177 7.79029C7.20571 8.37634 6.87647 9.1712 6.87647 10C6.87647 10.8288 7.20571 11.6237 7.79177 12.2097C8.37782 12.7958 9.17267 13.125 10.0015 13.125Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/dashboard/exclamation-circle.svg b/frontend/src/assets/images/dashboard/exclamation-circle.svg
new file mode 100644
index 00000000..aa92ca85
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/exclamation-circle.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0C7.34784 0 4.8043 1.05357 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C4.8043 18.9464 7.34784 20 10 20ZM10 5C10.5195 5 10.9375 5.41797 10.9375 5.9375V10.3125C10.9375 10.832 10.5195 11.25 10 11.25C9.48047 11.25 9.0625 10.832 9.0625 10.3125V5.9375C9.0625 5.41797 9.48047 5 10 5ZM8.75 13.75C8.75 13.4185 8.8817 13.1005 9.11612 12.8661C9.35054 12.6317 9.66848 12.5 10 12.5C10.3315 12.5 10.6495 12.6317 10.8839 12.8661C11.1183 13.1005 11.25 13.4185 11.25 13.75C11.25 14.0815 11.1183 14.3995 10.8839 14.6339C10.6495 14.8683 10.3315 15 10 15C9.66848 15 9.35054 14.8683 9.11612 14.6339C8.8817 14.3995 8.75 14.0815 8.75 13.75Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/dashboard/export.svg b/frontend/src/assets/images/dashboard/export.svg
new file mode 100644
index 00000000..57da64fa
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/export.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2.5C0 1.12109 0.996528 0 2.22222 0H7.77778V5C7.77778 5.69141 8.27431 6.25 8.88889 6.25H13.3333V11.25H7.5C7.03819 11.25 6.66667 11.668 6.66667 12.1875C6.66667 12.707 7.03819 13.125 7.5 13.125H13.3333V17.5C13.3333 18.8789 12.3368 20 11.1111 20H2.22222C0.996528 20 0 18.8789 0 17.5V2.5ZM13.3333 13.125V11.25H17.1563L15.8021 9.72656C15.4757 9.35938 15.4757 8.76562 15.8021 8.40234C16.1285 8.03906 16.6562 8.03516 16.9792 8.40234L19.7569 11.5273C20.0833 11.8945 20.0833 12.4883 19.7569 12.8516L16.9792 15.9766C16.6528 16.3438 16.125 16.3438 15.8021 15.9766C15.4792 15.6094 15.4757 15.0156 15.8021 14.6523L17.1563 13.1289H13.3333V13.125ZM13.3333 5H8.88889V0L13.3333 5Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/dashboard/eye.svg b/frontend/src/assets/images/dashboard/eye.svg
new file mode 100644
index 00000000..f3827ab4
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/eye.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99913 2.125C7.73524 2.125 5.87413 3.28125 4.44705 4.76953C3.11024 6.16797 2.18663 7.82812 1.71441 9C2.18663 10.1719 3.11024 11.832 4.44358 13.2305C5.87413 14.7187 7.73524 15.875 9.99913 15.875C12.263 15.875 14.1241 14.7187 15.5512 13.2305C16.888 11.832 17.8116 10.1719 18.2839 9C17.8116 7.82812 16.888 6.16797 15.5547 4.76953C14.1241 3.28125 12.263 2.125 9.99913 2.125ZM3.31163 3.39844C4.94705 1.6875 7.19358 0.25 9.99913 0.25C12.8047 0.25 15.0512 1.6875 16.6866 3.39844C18.3116 5.09766 19.3984 7.125 19.9158 8.51953C20.0304 8.82812 20.0304 9.17187 19.9158 9.48047C19.3984 10.875 18.3116 12.9062 16.6866 14.6016C15.0512 16.3125 12.8047 17.75 9.99913 17.75C7.19358 17.75 4.94705 16.3125 3.31163 14.6016C1.68663 12.9062 0.599826 10.875 0.0859375 9.48047C-0.0286458 9.17187 -0.0286458 8.82812 0.0859375 8.51953C0.599826 7.125 1.68663 5.09375 3.31163 3.39844ZM9.99913 12.125C11.5339 12.125 12.7769 10.7266 12.7769 9C12.7769 7.27344 11.5339 5.875 9.99913 5.875C9.97483 5.875 9.95399 5.875 9.92969 5.875C9.97483 6.07422 9.99913 6.28516 9.99913 6.5C9.99913 7.87891 9.0026 9 7.77691 9C7.58594 9 7.39844 8.97266 7.22135 8.92188C7.22135 8.94922 7.22135 8.97266 7.22135 9C7.22135 10.7266 8.46441 12.125 9.99913 12.125ZM9.99913 4C11.1779 4 12.3083 4.52678 13.1418 5.46447C13.9753 6.40215 14.4436 7.67392 14.4436 9C14.4436 10.3261 13.9753 11.5979 13.1418 12.5355C12.3083 13.4732 11.1779 14 9.99913 14C8.82039 14 7.68993 13.4732 6.85644 12.5355C6.02294 11.5979 5.55469 10.3261 5.55469 9C5.55469 7.67392 6.02294 6.40215 6.85644 5.46447C7.68993 4.52678 8.82039 4 9.99913 4Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/dashboard/file-x.svg b/frontend/src/assets/images/dashboard/file-x.svg
new file mode 100644
index 00000000..74be6d22
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/file-x.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2.5C0 1.12109 0.996528 0 2.22222 0H7.77778V5C7.77778 5.69141 8.27431 6.25 8.88889 6.25H13.3333V7.75781C10.7674 8.57422 8.88889 11.2266 8.88889 14.375C8.88889 16.6836 9.89931 18.7227 11.4479 19.9727C11.3368 19.9922 11.2257 20 11.1111 20H2.22222C0.996528 20 0 18.8789 0 17.5V2.5ZM13.3333 5H8.88889V0L13.3333 5ZM15 8.75C16.3261 8.75 17.5979 9.34263 18.5355 10.3975C19.4732 11.4524 20 12.8832 20 14.375C20 15.8668 19.4732 17.2976 18.5355 18.3525C17.5979 19.4074 16.3261 20 15 20C13.6739 20 12.4021 19.4074 11.4645 18.3525C10.5268 17.2976 10 15.8668 10 14.375C10 12.8832 10.5268 11.4524 11.4645 10.3975C12.4021 9.34263 13.6739 8.75 15 8.75ZM17.059 12.9414C17.2743 12.6992 17.2743 12.3008 17.059 12.0586C16.8438 11.8164 16.4896 11.8164 16.2743 12.0586L15 13.4922L13.7257 12.0586C13.5104 11.8164 13.1563 11.8164 12.941 12.0586C12.7257 12.3008 12.7257 12.6992 12.941 12.9414L14.2153 14.375L12.941 15.8086C12.7257 16.0508 12.7257 16.4492 12.941 16.6914C13.1563 16.9336 13.5104 16.9336 13.7257 16.6914L15 15.2578L16.2743 16.6914C16.4896 16.9336 16.8438 16.9336 17.059 16.6914C17.2743 16.4492 17.2743 16.0508 17.059 15.8086L15.7847 14.375L17.059 12.9414Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/dashboard/history.svg b/frontend/src/assets/images/dashboard/history.svg
new file mode 100644
index 00000000..c1e7d552
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/history.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.92969 2.92969L1.60156 1.60156C1.01172 1.01172 0 1.42969 0 2.26172V6.5625C0 7.08203 0.417969 7.5 0.9375 7.5H5.23828C6.07422 7.5 6.49219 6.48828 5.90234 5.89844L4.69922 4.69531C6.05469 3.33984 7.92969 2.5 10 2.5C14.1406 2.5 17.5 5.85938 17.5 10C17.5 14.1406 14.1406 17.5 10 17.5C8.40625 17.5 6.92969 17.0039 5.71484 16.1562C5.14844 15.7617 4.37109 15.8984 3.97266 16.4648C3.57422 17.0312 3.71484 17.8086 4.28125 18.207C5.90625 19.3359 7.87891 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0C7.23828 0 4.73828 1.12109 2.92969 2.92969ZM10 5C9.48047 5 9.0625 5.41797 9.0625 5.9375V10C9.0625 10.25 9.16016 10.4883 9.33594 10.6641L12.1484 13.4766C12.5156 13.8438 13.1094 13.8438 13.4727 13.4766C13.8359 13.1094 13.8398 12.5156 13.4727 12.1523L10.9336 9.61328V5.9375C10.9336 5.41797 10.5156 5 9.99609 5H10Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/dashboard/upload.svg b/frontend/src/assets/images/dashboard/upload.svg
new file mode 100644
index 00000000..3ba5aad5
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/upload.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 4.26855V13.749C11.25 14.4404 10.6914 14.999 10 14.999C9.30859 14.999 8.75 14.4404 8.75 13.749V4.26855L5.88281 7.13574C5.39453 7.62402 4.60156 7.62402 4.11328 7.13574C3.625 6.64746 3.625 5.85449 4.11328 5.36621L9.11328 0.366211C9.60156 -0.12207 10.3945 -0.12207 10.8828 0.366211L15.8828 5.36621C16.3711 5.85449 16.3711 6.64746 15.8828 7.13574C15.3945 7.62402 14.6016 7.62402 14.1133 7.13574L11.25 4.26855ZM2.5 13.749H7.5C7.5 15.1279 8.62109 16.249 10 16.249C11.3789 16.249 12.5 15.1279 12.5 13.749H17.5C18.8789 13.749 20 14.8701 20 16.249V17.499C20 18.8779 18.8789 19.999 17.5 19.999H2.5C1.12109 19.999 0 18.8779 0 17.499V16.249C0 14.8701 1.12109 13.749 2.5 13.749ZM16.875 17.8115C17.1236 17.8115 17.3621 17.7128 17.5379 17.5369C17.7137 17.3611 17.8125 17.1227 17.8125 16.874C17.8125 16.6254 17.7137 16.3869 17.5379 16.2111C17.3621 16.0353 17.1236 15.9365 16.875 15.9365C16.6264 15.9365 16.3879 16.0353 16.2121 16.2111C16.0363 16.3869 15.9375 16.6254 15.9375 16.874C15.9375 17.1227 16.0363 17.3611 16.2121 17.5369C16.3879 17.7128 16.6264 17.8115 16.875 17.8115Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/dashboard/user-cog.svg b/frontend/src/assets/images/dashboard/user-cog.svg
new file mode 100644
index 00000000..dc74ffa6
--- /dev/null
+++ b/frontend/src/assets/images/dashboard/user-cog.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.18013 2C8.2683 2 9.31189 2.42151 10.0813 3.1718C10.8508 3.92209 11.2831 4.93971 11.2831 6.00078C11.2831 7.06185 10.8508 8.07946 10.0813 8.82975C9.31189 9.58005 8.2683 10.0016 7.18013 10.0016C6.09197 10.0016 5.04837 9.58005 4.27892 8.82975C3.50947 8.07946 3.0772 7.06185 3.0772 6.00078C3.0772 4.93971 3.50947 3.92209 4.27892 3.1718C5.04837 2.42151 6.09197 2 7.18013 2ZM5.71526 11.5018H8.64501C9.02324 11.5018 9.39507 11.5394 9.75087 11.605C9.68356 12.1832 9.98807 12.7177 10.4497 13.0053C9.91755 13.3366 9.59381 13.993 9.80857 14.6712C9.93679 15.0744 10.1099 15.4682 10.3343 15.8464C10.5586 16.2246 10.8215 16.5685 11.1164 16.8779C11.6196 17.4061 12.3857 17.453 12.9499 17.1498V17.1779C12.9499 17.4655 13.0364 17.7562 13.2031 18H0.952008C0.42632 18.0031 0 17.5874 0 17.0748C0 13.9961 2.55792 11.5018 5.71526 11.5018ZM13.9756 8.82008C13.9756 8.60128 14.1199 8.40437 14.3378 8.35748C14.6744 8.28247 15.027 8.24184 15.386 8.24184C15.745 8.24184 16.0976 8.28247 16.4342 8.35748C16.6521 8.40437 16.7964 8.60128 16.7964 8.82008V9.37331C16.7964 9.6171 16.9502 9.8359 17.1682 9.9578C17.3862 10.0797 17.6522 10.0984 17.867 9.97655L18.3093 9.72963C18.5049 9.62023 18.7485 9.64524 18.9023 9.80464C19.1459 10.0578 19.3607 10.3422 19.5466 10.6548C19.7325 10.9674 19.8768 11.2924 19.9794 11.6237C20.0467 11.8332 19.9441 12.052 19.7486 12.1613L19.287 12.4208C19.0786 12.5364 18.9664 12.7615 18.9664 12.9959C18.9664 13.2303 19.0786 13.4554 19.287 13.571L19.7486 13.8304C19.9441 13.9398 20.0435 14.1586 19.9794 14.368C19.8736 14.6993 19.7293 15.0244 19.5466 15.337C19.3639 15.6495 19.1459 15.934 18.9023 16.1871C18.7485 16.3465 18.5017 16.3715 18.3093 16.2621L17.867 16.0152C17.6522 15.8933 17.383 15.9121 17.1682 16.034C16.9502 16.1559 16.7964 16.3747 16.7964 16.6185V17.1717C16.7964 17.3905 16.6521 17.5874 16.4342 17.6343C16.0976 17.7093 15.745 17.7499 15.386 17.7499C15.027 17.7499 14.6744 17.7093 14.3378 17.6343C14.1199 17.5874 13.9756 17.3905 13.9756 17.1717V16.6216C13.9756 16.3747 13.8185 16.1559 13.6006 16.0309C13.3826 15.909 13.1134 15.8902 12.8954 16.0121L12.4627 16.2559C12.2671 16.3653 12.0235 16.3403 11.8697 16.1809C11.626 15.9277 11.4113 15.6433 11.2254 15.3307C11.0395 15.0182 10.8952 14.6931 10.7926 14.3618C10.7253 14.1524 10.8279 13.9336 11.0234 13.8242L11.4722 13.571C11.6805 13.4522 11.7959 13.2241 11.7959 12.9896C11.7959 12.7552 11.6837 12.527 11.4722 12.4083L11.0234 12.1551C10.8279 12.0457 10.7285 11.8269 10.7926 11.6175C10.8984 11.2862 11.0395 10.9611 11.2254 10.6486C11.4113 10.336 11.626 10.0516 11.8697 9.79839C12.0235 9.63898 12.2671 9.61398 12.4627 9.72338L12.8986 9.96717C13.1166 10.0891 13.3858 10.0703 13.6038 9.94842C13.825 9.82652 13.9788 9.6046 13.9788 9.35768V8.82008H13.9756ZM16.9278 12.9928C16.9373 12.7898 16.9045 12.587 16.8314 12.3967C16.7583 12.2064 16.6463 12.0326 16.5024 11.8857C16.3584 11.7387 16.1854 11.6218 15.9938 11.5419C15.8022 11.462 15.596 11.4208 15.3876 11.4208C15.1792 11.4208 14.973 11.462 14.7814 11.5419C14.5898 11.6218 14.4168 11.7387 14.2728 11.8857C14.1288 12.0326 14.0169 12.2064 13.9438 12.3967C13.8707 12.587 13.8379 12.7898 13.8474 12.9928C13.8379 13.1958 13.8707 13.3985 13.9438 13.5888C14.0169 13.7791 14.1288 13.9529 14.2728 14.0999C14.4168 14.2468 14.5898 14.3637 14.7814 14.4436C14.973 14.5235 15.1792 14.5647 15.3876 14.5647C15.596 14.5647 15.8022 14.5235 15.9938 14.4436C16.1854 14.3637 16.3584 14.2468 16.5024 14.0999C16.6463 13.9529 16.7583 13.7791 16.8314 13.5888C16.9045 13.3985 16.9373 13.1958 16.9278 12.9928Z" fill="white"/>
+</svg>