creating admin ui

.env

@@ -1,3 +1,3 @@
-DB_DSN = mysql:host=localhost;port=3306;dbname=fixmedb
+DB_DSN = "mysql:host=localhost;dbname=fixmedb"
 DB_USER = root
-DB_PASSWORD =
+DB_PASSWORD = Nimal@123

controllers/AdminController.php

@@ -2,14 +2,47 @@
 
 namespace app\controllers;
 
+use app\core\Application;
 use app\core\Controller;
+use app\core\Request;
+use app\models\Customer;
+use app\models\Technician;
 
 class AdminController extends Controller
 {
     public function dashboard()
     {
-        // Render the admin dashboard view
         $this->setLayout('auth');
-        return $this->render('admin/admin-dashboard');
+        return $this->render('/admin/dashboard');
     }
+    public function manageUsers()
+    {
+        $this->setLayout('auth');
+        return $this->render('/admin/users');
+    }
+    public function settings()
+    {
+        $this->setLayout('auth');
+        return $this->render('/admin/settings');
+    }
+    public function viewReports()
+    {
+        $this->setLayout('auth');
+        return $this->render('/admin/reports');
+    }
+    public function manageServices()
+    {
+        $this->setLayout('auth');
+        return $this->render('/admin/services');
+    }
+    public function adminLogin()
+    {
+        $this->setLayout('auth');
+        return $this->render('/admin/admin-login.php');
+    }
+
+
+
+
 }
+

public/css/admin/admin-dashboard.css

@@ -214,7 +214,8 @@ body {
 
 /* ======================= Cards ====================== */
 .cardBox {
-    top: 150px;
+
+    top: 20px;
     position: relative;
     width: 100%;
     padding: 20px;
@@ -226,7 +227,7 @@ body {
 .cardBox .card {
     position: relative;
     background: var(--white);
-    padding: 30px;
+    padding: 50px;
     border-radius: 20px;
     display: flex;
     justify-content: space-between;
@@ -297,3 +298,175 @@ body {
         left: initial;
     }
 }
+
+/* line Chart */
+.MainChart {
+    display: flex;
+    grid-template-columns: 2fr 1fr;
+    grid-gap: 20px;
+    width: 100%;
+    padding: 20px;
+    padding-top: 0;
+  }
+  .MainChart .Chart {
+    background: #fff;
+    box-shadow: var(--box_shadow);
+    padding: 20px;
+    border-radius: 10px;
+    width: 100%;
+  }
+  .MainChart .Chart h1 {
+    color: #222;
+    text-align: center;
+    margin-bottom: 5px;
+    font-size: 20px;
+  }
+
+
+
+  /* users */
+  .details {
+    position: relative;
+    width: 100%;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-gap: 30px;
+    /* margin-top: 10px; */
+}
+
+.details .recentOrders {
+    position: relative;
+    display: grid;
+    min-height: 500px;
+    background: var(--white);
+    padding: 20px;
+    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
+    border-radius: 20px;
+}
+
+.details .cardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.cardHeader h2 {
+    font-weight: 600;
+    color: var(--blue);
+}
+.cardHeader .btn {
+    position: relative;
+    padding: 5px 10px;
+    background: var(--blue);
+    text-decoration: none;
+    color: var(--white);
+    border-radius: 6px;
+}
+
+.details table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+}
+.details table thead td {
+    font-weight: 600;
+}
+.details .recentOrders table tr {
+    color: var(--black1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.details .recentOrders table tr:last-child {
+    border-bottom: none;
+}
+.details .recentOrders table tbody tr:hover {
+    background: var(--blue);
+    color: var(--white);
+}
+.details .recentOrders table tr td {
+    padding: 10px;
+}
+.details .recentOrders table tr td:last-child {
+    text-align: end;
+}
+.details .recentOrders table tr td:nth-child(2) {
+    text-align: end;
+}
+.details .recentOrders table tr td:nth-child(3) {
+    text-align: center;
+}
+.status.delivered {
+    padding: 2px 4px;
+    background: #8de02c;
+    color: var(--white);
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+}
+.status.pending {
+    padding: 2px 4px;
+    background: #e9b10a;
+    color: var(--white);
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+}
+.status.return {
+    padding: 2px 4px;
+    background: #f00;
+    color: var(--white);
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+}
+.status.inProgress {
+    padding: 2px 4px;
+    background: #1795ce;
+    color: var(--white);
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.recentCustomers {
+    position: relative;
+    display: grid;
+    min-height: 500px;
+    padding: 20px;
+    background: var(--white);
+    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
+    border-radius: 20px;
+}
+.recentCustomers .imgBx {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border-radius: 50px;
+    overflow: hidden;
+}
+.recentCustomers .imgBx img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.recentCustomers table tr td {
+    padding: 12px 10px;
+}
+.recentCustomers table tr td h4 {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.2rem;
+}
+.recentCustomers table tr td h4 span {
+    font-size: 14px;
+    color: var(--black2);
+}
+.recentCustomers table tr:hover {
+    background: var(--blue);
+    color: var(--white);
+}
+.recentCustomers table tr:hover td h4 span {
+    color: var(--white);
+}