From 73d256a4813dd788a0c924844ff17f2ec9128973 Mon Sep 17 00:00:00 2001
From: Bye <bye@byecorps.com>
Date: Fri, 5 Jul 2024 12:04:46 +0100
Subject: [PATCH] Dashboard

---
 styles/base.css      | 23 +++++++++++++++++++++++
 styles/colours.css   |  1 +
 styles/dashboard.css | 17 +++++++++++++++++
 views/dashboard.php  | 14 ++++++++++++++
 4 files changed, 55 insertions(+)

diff --git a/styles/base.css b/styles/base.css
index a8ca346..c1e27df 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -100,6 +100,29 @@ body > .errorbox {
     font-weight: 400;
 }
 
+.id-card {
+    display: inline-flex;
+    gap: 1rem;
+}
+
+.id-card > img {
+    height: 128px;
+}
+
+.id-card > .info {
+    margin: auto 0;
+}
+
+.id-card .display_name {
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+.id-card .id {
+    font-size: 1.2rem;
+    font-family: 'Grotesk Mono', monospace;
+}
+
 .center {
     text-align: center;
 }
diff --git a/styles/colours.css b/styles/colours.css
index a24dac8..9509045 100644
--- a/styles/colours.css
+++ b/styles/colours.css
@@ -12,6 +12,7 @@
     --mindaro: #f4fdaf;
 
     --gray-0: #f8f9fa;
+    --gray-1: #f1f3f5;
     --grey-5: #adb5bd;
     --gray-9: #212529;
 
diff --git a/styles/dashboard.css b/styles/dashboard.css
index 8fc2fc7..c9dd6b1 100644
--- a/styles/dashboard.css
+++ b/styles/dashboard.css
@@ -19,3 +19,20 @@ ul > li > a {
 ul > li:hover {
     background: var(--hover-bg);
 }
+
+.grid {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 1fr 2fr;
+}
+
+.id-card {
+    align-self: center;
+    background: var(--hover-bg);
+    padding: 1rem;
+    border-radius: 1.5rem;
+}
+
+.id-card > img {
+    border-radius: 0.5rem;
+}
diff --git a/views/dashboard.php b/views/dashboard.php
index 0e61b42..a378945 100644
--- a/views/dashboard.php
+++ b/views/dashboard.php
@@ -10,6 +10,14 @@
         <main>
             <h1><?= get_string('page.dashboard') ?></h1>
             <div class="grid">
+                <div class="id-card">
+                    <img src="https://cdn.id.byecorps.com/profile/281G3NV" alt="" />
+                    <div class="info">
+                        <div class="display_name"><?= get_user_display_name($_SESSION['id']) ?></div>
+                        <div class="id"><?= format_bcid($_SESSION['id']) ?></div>
+                        <div class="join-date"><?= get_string('idcard.joined', ['date' => $user['created_date']]) ?></div>
+                    </div>
+                </div>
                 <ul>
                     <li>
                         <a href="/profile" class="item">
@@ -23,6 +31,12 @@
                             <div class="label"><?= get_string('page.settings') ?></div>
                         </a>
                     </li>
+                    <li>
+                        <a href="/settings/apps" class="item">
+                            <div class="icon"><span class="fa-fw fa-solid fa-lock"></span></div>
+                            <div class="label"><?= get_string('page.manageAppAccess') ?></div>
+                        </a>
+                    </li>
                     <li>
                         <a href="/auth/signout" class="item">
                             <div class="icon"><span class="fa-fw fa-solid fa-right-to-bracket"></span></div>