Skip to content

Commit

Permalink
feat: admin page and layout #23
Browse files Browse the repository at this point in the history
  • Loading branch information
Chrinsieboy authored Jan 17, 2024
2 parents 0568af0 + 10c8956 commit 83a7179
Show file tree
Hide file tree
Showing 12 changed files with 408 additions and 7 deletions.
14 changes: 14 additions & 0 deletions src/app/Http/Controllers/AdminController.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class AdminController extends Controller
{
public function index()
{
return Inertia::render('admin/index');
}
}
115 changes: 114 additions & 1 deletion src/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@
"dependencies": {
"@inertiajs/vue3": "^1.0.14",
"@vitejs/plugin-vue": "^4.5.0",
"apexcharts": "^3.45.1",
"pinia": "^2.1.7",
"vue": "^3.3.8",
"vue-toastification": "^2.0.0-rc.5"
"vue-toastification": "^2.0.0-rc.5",
"vue3-apexcharts": "^1.4.4"
}
}
2 changes: 2 additions & 0 deletions src/resources/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { createInertiaApp } from '@inertiajs/vue3'
import ToastPlugin from "vue-toastification";
import "vue-toastification/dist/index.css";
import '@scss/global.scss';
import VueApexCharts from "vue3-apexcharts";

createInertiaApp({
resolve: name => {
Expand All @@ -16,6 +17,7 @@ createInertiaApp({
.use(plugin)
.use(createPinia())
.use(ToastPlugin)
.use(VueApexCharts)
.mount(el)
},
})
14 changes: 14 additions & 0 deletions src/resources/vue/components/icon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,20 @@ export default {
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21_835)"><path d="M17.5 2.1875C18.4707 2.1875 19.3663 2.7002 19.8584 3.54102L34.6241 28.6973C35.1231 29.5449 35.1231 30.5908 34.6377 31.4385C34.1524 32.2861 33.2432 32.8125 32.2657 32.8125H2.73442C1.75688 32.8125 0.847697 32.2861 0.362345 31.4385C-0.123007 30.5908 -0.116171 29.5381 0.376017 28.6973L15.1416 3.54102C15.6338 2.7002 16.5293 2.1875 17.5 2.1875ZM17.5 10.9375C16.5909 10.9375 15.8594 11.6689 15.8594 12.5781V20.2344C15.8594 21.1436 16.5909 21.875 17.5 21.875C18.4092 21.875 19.1407 21.1436 19.1407 20.2344V12.5781C19.1407 11.6689 18.4092 10.9375 17.5 10.9375ZM19.6875 26.25C19.6875 25.6698 19.4571 25.1134 19.0468 24.7032C18.6366 24.293 18.0802 24.0625 17.5 24.0625C16.9199 24.0625 16.3635 24.293 15.9532 24.7032C15.543 25.1134 15.3125 25.6698 15.3125 26.25C15.3125 26.8302 15.543 27.3866 15.9532 27.7968C16.3635 28.207 16.9199 28.4375 17.5 28.4375C18.0802 28.4375 18.6366 28.207 19.0468 27.7968C19.4571 27.3866 19.6875 26.8302 19.6875 26.25Z" fill="#E57E1F"/></g><defs><clipPath id="clip0_21_835"><rect width="35" height="35" fill="${this.color || 'black'}"/></clipPath></defs></svg>`;
case 'scan-icon':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z" fill="${this.color || 'black'}"></path></svg>`;
case 'full-house':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z" fill="${this.color || 'black'}"></path></svg>`;
case 'full-archive':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 10H21V20.0044C21 20.5543 20.5551 21 20.0066 21H3.9934C3.44476 21 3 20.5552 3 20.0044V10ZM9 12V14H15V12H9ZM2 3.99981C2 3.44763 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44372 22 3.99981V8H2V3.99981Z" fill="${this.color || 'black'}"></path></svg>`;
case 'list':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z" fill="${this.color || 'black'}"></path></svg>`;
case 'full-people':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 10C14.2091 10 16 8.20914 16 6 16 3.79086 14.2091 2 12 2 9.79086 2 8 3.79086 8 6 8 8.20914 9.79086 10 12 10ZM5.5 13C6.88071 13 8 11.8807 8 10.5 8 9.11929 6.88071 8 5.5 8 4.11929 8 3 9.11929 3 10.5 3 11.8807 4.11929 13 5.5 13ZM21 10.5C21 11.8807 19.8807 13 18.5 13 17.1193 13 16 11.8807 16 10.5 16 9.11929 17.1193 8 18.5 8 19.8807 8 21 9.11929 21 10.5ZM12 11C14.7614 11 17 13.2386 17 16V22H7V16C7 13.2386 9.23858 11 12 11ZM5 15.9999C5 15.307 5.10067 14.6376 5.28818 14.0056L5.11864 14.0204C3.36503 14.2104 2 15.6958 2 17.4999V21.9999H5V15.9999ZM22 21.9999V17.4999C22 15.6378 20.5459 14.1153 18.7118 14.0056 18.8993 14.6376 19 15.307 19 15.9999V21.9999H22Z" fill="${this.color || 'black'}"></path></svg>`;
case 'full-euro':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0049 22.0027C6.48204 22.0027 2.00488 17.5256 2.00488 12.0027C2.00488 6.4799 6.48204 2.00275 12.0049 2.00275C17.5277 2.00275 22.0049 6.4799 22.0049 12.0027C22.0049 17.5256 17.5277 22.0027 12.0049 22.0027ZM10.0549 11.0027C10.2865 9.86163 11.2954 9.00275 12.5049 9.00275C13.1201 9.00275 13.6834 9.22496 14.1189 9.59351L15.8198 8.45951C14.9973 7.56402 13.8166 7.00275 12.5049 7.00275C10.1886 7.00275 8.28107 8.75277 8.03235 11.0027H7.00488V13.0027H8.03235C8.28107 15.2527 10.1886 17.0027 12.5049 17.0027C13.8166 17.0027 14.9973 16.4415 15.8198 15.546L14.1188 14.412C13.6833 14.7806 13.1201 15.0027 12.5049 15.0027C11.2954 15.0027 10.2865 14.1439 10.0549 13.0027H15.0049V11.0027H10.0549Z" fill="${this.color || 'black'}"></path></svg>`;
case 'admin':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 14V16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM21 17H22V22H14V17H15V16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16V17ZM19 17V16C19 15.4477 18.5523 15 18 15C17.4477 15 17 15.4477 17 16V17H19Z" fill="${this.color || 'black'}"></path></svg>`;
case 'full-person':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 14V22H4C4 17.5817 7.58172 14 12 14ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM14.5946 18.8115C14.5327 18.5511 14.5 18.2794 14.5 18C14.5 17.7207 14.5327 17.449 14.5945 17.1886L13.6029 16.6161L14.6029 14.884L15.5952 15.4569C15.9883 15.0851 16.4676 14.8034 17 14.6449V13.5H19V14.6449C19.5324 14.8034 20.0116 15.0851 20.4047 15.4569L21.3971 14.8839L22.3972 16.616L21.4055 17.1885C21.4673 17.449 21.5 17.7207 21.5 18C21.5 18.2793 21.4673 18.551 21.4055 18.8114L22.3972 19.3839L21.3972 21.116L20.4048 20.543C20.0117 20.9149 19.5325 21.1966 19.0001 21.355V22.5H17.0001V21.3551C16.4677 21.1967 15.9884 20.915 15.5953 20.5431L14.603 21.1161L13.6029 19.384L14.5946 18.8115ZM18 17C17.4477 17 17 17.4477 17 18C17 18.5523 17.4477 19 18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17Z" fill="${this.color || 'black'}"></path></svg>`;
default:
return "";
}
Expand Down
4 changes: 2 additions & 2 deletions src/resources/vue/components/terminal-scan.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<Box :direction="direction">
<div class="content">
<div class="terminal-content">
<Icon v-if="text" icon="scan-icon" size="52px" />
<span v-if="text" class="text">{{ text }}</span>
</div>
Expand Down Expand Up @@ -60,7 +60,7 @@
</script>
<style lang="scss">
.content {
.terminal-content {
display: flex;
align-items: center;
flex-direction: row;
Expand Down
72 changes: 72 additions & 0 deletions src/resources/vue/layouts/admin-layout.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<template>
<div class="d-flex flex-column flex-shrink-0 p-3" style="width: 15rem; height: 100%; background-color: #262d42">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-light text-decoration-none">
<Icon icon="admin" size="24" color="white" />
<span class="fs-4 p-1">| Biblio Admin</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active d-flex" aria-current="page" style="background-color: #003bb2;">
<Icon icon="full-house" size="16" color="white" />&nbsp;Home </a>
</li>
<li>
<a href="#" class="nav-link link-light d-flex">
<Icon icon="full-archive" size="16" color="white" /> &nbsp;Items </a>
</li>
<li>
<a href="#" class="nav-link link-light d-flex">
<Icon icon="list" size="16" color="white" /> &nbsp;Reserveringen </a>
</li>
<li>
<a href="#" class="nav-link link-light d-flex">
<Icon icon="full-people" size="16" color="white" /> &nbsp;Klanten </a>
</li>
<li>
<a href="#" class="nav-link link-light d-flex">
<Icon icon="full-euro" size="16" color="white" /> &nbsp;Facturen </a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-light text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
<Icon icon="full-person" size="24" color="white" />
<strong class="p-1">{{ userData.name }}</strong>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</template>

<script>
import "https://code.jquery.com/jquery-3.7.1.js"
import "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
import Icon from "@components/icon.vue";
export default {
name: "AdminLayout",
components: {
Icon,
},
props: {
userData: {
type: Object,
required: true,
default: () => ({
name: "John Doe",
}),
},
},
};
</script>

<style lang="scss" scoped>
@import url("https://bootswatch.com/5/lumen/bootstrap.css");
</style>
Loading

0 comments on commit 83a7179

Please sign in to comment.