Admin category display UI: WIP

aashish-t-magar · Dec 19, 2023 · 1f7b7dd · 1f7b7dd
1 parent 265719d
commit 1f7b7dd
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 3 deletions.
diff --git a/app/Http/Controllers/CategoryAndSubCategoryController.php b/app/Http/Controllers/CategoryAndSubCategoryController.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\CategoryAndSubCategory;
+use Illuminate\Http\Request;
+
+class CategoryAndSubCategoryController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        return view('backend.adminCategory');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(CategoryAndSubCategory $categoryAndSubCategory)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(CategoryAndSubCategory $categoryAndSubCategory)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, CategoryAndSubCategory $categoryAndSubCategory)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(CategoryAndSubCategory $categoryAndSubCategory)
+    {
+        //
+    }
+}
diff --git a/app/Models/CategoryAndSubCategory.php b/app/Models/CategoryAndSubCategory.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class CategoryAndSubCategory extends Model
+{
+    use HasFactory;
+}
diff --git a/database/migrations/2023_12_19_083610_create_category_and_sub_categories_table.php b/database/migrations/2023_12_19_083610_create_category_and_sub_categories_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('category_and_sub_categories', function (Blueprint $table) {
+            $table->id();
+            $table->string('category_name');
+            $table->integer('parent_id')->nullable();
+            $table->timestamps();
+        });
+
+        Schema::table('category_and_sub_categories', function (Blueprint $table) {
+            $table->foreign('parent_id')->references('id')->on('category_and_sub_categories');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('category_and_sub_categories');
+    }
+};
diff --git a/resources/css/admin-dashboard-category.css b/resources/css/admin-dashboard-category.css
@@ -0,0 +1,47 @@
+.add-button-container{
+    padding: 10px;
+}
+
+.add-button-container>a>button{
+    padding: 10px;
+    width: 20%;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: rgb(61,81,181);
+    color: linear-gradient(313deg, rgba(61,81,181,1) 0%, rgba(77,103,255,1) 52%, rgba(92,137,180,1) 100%);
+    border: 1px solid rgb(61,81,181);;
+}
+
+.add-button-container>a>button:hover{
+    background: rgb(61,81,181);
+    background: linear-gradient(313deg, rgba(61,81,181,1) 0%, rgba(77,103,255,1) 52%, rgba(92,137,180,1) 100%);
+    color: white;
+}
+
+.display-data-container{
+    padding: 10px;
+}
+
+.display-data-container>span{
+    font-size: 24px;
+}
+
+.table-container{
+    padding: 10px;
+}
+
+.table-container>table, th, td{
+    border: 1px solid;
+    border-collapse: collapse;
+    text-align: center;
+    padding: 10px;
+    font-size: 18px;
+}
+
+.table-container>table{
+    width: 100%;
+    font-size: 18px;
+    margin: 0 auto;
+}
+
diff --git a/resources/css/admin-dashboard.css b/resources/css/admin-dashboard.css
@@ -25,6 +25,7 @@
 .content-container{
     width: 100%;
     height: 100vh;
+    padding: 10px;
 }
 
 .statistics{

diff --git a/resources/views/backend/adminCategory.blade.php b/resources/views/backend/adminCategory.blade.php
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/fontawesome.min.css" />  
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" />
+    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+    @vite(['resources/css/admin-dashboard.css', 'resources/css/side-nav.css', 'resources/css/admin-dashboard-category.css'])
+    <title>Dashboard - Category</title>
+</head>
+<body>
+    <section>
+        <div class="side-nav">
+            @include('commonComponents.side-nav')
+        </div>
+        <div class="side-container">
+            @include('commonComponents.bread-crumb')
+            <div class="content-container">
+                <div class="add-button-container">
+                    <a href=""><button>Add Category</button></a>
+                </div>
+                <div class="display-data-container">
+                    <span>Categories</span>
+
+                    <div class="table-container">
+                        <table>
+                            <tr>
+                                <th>SN</th>
+                                <th>Name</th>
+                                <th colspan="2">Utilities</th>
+                            </tr>
+
+                            <tr>
+                                <td>1</td>
+                                <td>Fruit</td>
+                                <td><button>Edit</button></td>
+                                <td><button>Delete</button></td>
+                            </tr>
+
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/resources/views/commonComponents/side-nav.blade.php b/resources/views/commonComponents/side-nav.blade.php
@@ -6,8 +6,8 @@
     <div class="activities">
         <div class="navigation">
             <ul>
-                <a href=""><li><i class="fa-solid fa-layer-group"></i></i> Dashboard</li></a>
-                <a href=""><li><i class="fa-solid fa-layer-group"></i></i> Category</li></a>
+                <a href={{ route('admin.dashboard') }}><li><i class="fa-solid fa-layer-group"></i></i> Dashboard</li></a>
+                <a href={{ route('category.and.subcategory') }}><li><i class="fa-solid fa-layer-group"></i></i> Category</li></a>
                 <a href=""><li><i class="fa-solid fa-layer-group"></i></i> Sub-category</li></a>
                 <a href=""><li><i class="fa-solid fa-layer-group"></i></i> Users</li></a>
                 <a href=""><li><i class="fa-solid fa-layer-group"></i></i> Admins</li></a>

diff --git a/routes/web.php b/routes/web.php
@@ -1,8 +1,10 @@
 <?php
 
 use App\Http\Controllers\AdminDataDetailsController;
+use App\Http\Controllers\CategoryAndSubCategoryController;
 use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\PasswordResetController;
+use App\Models\CategoryAndSubCategory;
 use Illuminate\Support\Facades\Route;
 use SebastianBergmann\CodeCoverage\Report\Html\Dashboard;
 
@@ -31,7 +33,8 @@
 
 
                 //admin dashboard
-Route::get('/dashboard', [DashboardController::class, 'index'])->middleware('auth');
+Route::get('/dashboard', [DashboardController::class, 'index'])->middleware('auth')->name('admin.dashboard');
+Route::get('/admin-category', [CategoryAndSubCategoryController::class, 'index'])->middleware('auth')->name('category.and.subcategory');
 
 
                 //Forgot Password Routess