csc create admin page

my-workspace/projects/sae-lib/alert-box/alert-box.scss

@@ -7,7 +7,6 @@
   margin-top: shadows.$spacing-1;
   margin-bottom: shadows.$spacing-1;
   text-align: left;
-  margin-left: -100px;
 
   i {
     margin-right: 10px;

sae-csc/src/app/pages/admin/admin.html

@@ -1 +1,97 @@
-<p>admin works!</p>
+<div class="csc-admin-page">
+  <div class="left-panel">
+
+    <div class="user">
+      <div class="avatar"></div>
+      <div class="name">
+        <strong>Admin :</strong>
+        <span class="admin-name">
+
+        Gyeongyeon KIM
+        </span>
+      </div>
+    </div>
+  </div>
+  <div class="main-panel">
+    <h1 class="title">
+      Admin panel - user access management.
+    </h1>
+    <div class="tabs">
+      <div class="tab-item">
+        <span class="label">
+        Pending requests
+        </span>
+      </div>
+      <div class="tab-item">
+
+        <span class="label">
+        User Management
+        </span>
+      </div>
+      <div class="tab-item">
+        <span class="label">
+        Statistics
+        </span>
+      </div>
+    </div>
+    <div class="tab-content">
+      @if (currentTab == 'pending') {
+        <h2 class="title">
+          Pending Access Requests
+        </h2>
+        <div class="notifications">
+          <sae-alert-box [message]="'1 pending request'" [style]="'info'"></sae-alert-box>
+        </div>
+
+        <div class="access-request-container">
+          <article>
+            <header>
+
+              Aurélie POMMIER ( <a href="mailto:aurelie.pommier@safrangroup.com">aurelie.pommier@safrangroup.com</a> ) -
+              Requested on <span class="date">2025-07-29</span>
+            </header>
+            <main>
+
+              <div class="email">
+                <strong class="label">
+                  Email:
+                </strong>
+                <span class="value">
+                  aurelie.pommier@safrangroup.com
+                </span>
+              </div>
+
+              <fieldset class="admin-notes">
+
+                <h3 class="title is-3">Admin notes</h3>
+                <textarea name="admin_notes" id="admin_notes" cols="30" rows="5" resize="true"></textarea>
+
+                <div class="actions">
+                  <button class="approve">
+                    Approve
+                  </button>
+                  <button class="approve">
+                    Reject
+                  </button>
+                </div>
+              </fieldset>
+            </main>
+          </article>
+        </div>
+      }
+    </div>
+
+    <div class="bottom-nav">
+      <hr>
+
+      <button class="button refresh-button">
+        Refresh data
+      </button>
+      <sae-feedback-button></sae-feedback-button>
+      <nav>
+        <a href="/admin">Admin Panel</a>
+      </nav>
+    </div>
+  </div>
+
+</div>

sae-csc/src/app/pages/admin/admin.scss

@@ -0,0 +1,17 @@
+.csc-admin-page {
+  padding: 16px;
+  padding-top: 150px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  .left-panel {
+    background: #d4dcdf;
+    width: 20vw;
+  }
+
+  .main-panel {
+    padding-left: 100px;
+  }
+}

sae-csc/src/app/pages/admin/admin.ts

@@ -1,11 +1,17 @@
 import {Component} from '@angular/core';
+import {AlertBox} from 'sae-lib/alert-box/alert-box';
+import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
 
 @Component({
   selector: 'app-admin',
-  imports: [],
+  imports: [
+    AlertBox,
+    FeedbackButton
+  ],
   templateUrl: './admin.html',
   styleUrl: './admin.scss'
 })
 export class Admin {
 
+  currentTab: 'pending' | 'users' | 'statistics' = 'pending'
 }

sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html

@@ -25,14 +25,9 @@
         </a>
       </div>
       <div class="navbar-end">
-
+        <a class="navbar-item is-active" routerLink="admin" routerLinkActive="is-active">
-        <!--        <a class="navbar-item">-->
-        <!--          Home-->
-        <!--        </a>-->
-        <a class="navbar-item is-active">
           <i class="ri-admin-line"></i>
           Admin
-
         </a>
         <a class="navbar-item">
           <i class="ri-compass-3-line"></i>