Skip to content

Commit

Permalink
PUSH
Browse files Browse the repository at this point in the history 
-> New dashboard UI
-> Search bar works
-> WorkSpace MythicalUI Theme :))
-> Removed junk code
-> Fixed the mobile ui
-> Split the dashboard components for addons to work 😂
-> Poppins font ui :)
-> Fix overscroll behavior on mac
-> Fix the problem where the scrolling stays from another route!
  • Loading branch information
@NaysKutzu
NaysKutzu committed Jan 2, 2025
1 parent f7c5498 commit 3bbf078
Show file tree
Hide file tree
Showing 27 changed files with 1,274 additions and 1,080 deletions.
7 changes: 6 additions & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
{
"cSpell.words": [
"Adminannouncements",
"lucide",
"modyfi",
"mythicalclient",
"mythicaldash",
"Predis",
"qrcode",
"recommand",
"Regen",
"shortdescription",
"SOURCECODE",
"supportbuddy",
"Swal",
"sweetalert"
"sweetalert",
"vueuse"
],
"json.maxItemsComputed": 10000,
"editor.largeFileOptimizations": false,
Expand Down
15 changes: 13 additions & 2 deletions frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
<template>
<router-view></router-view>
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'App',
name: 'App',
setup() {
const router = useRouter();
router.beforeEach((to, from, next) => {
window.scrollTo(0, 0);
next();
});
},
});
</script>
12 changes: 12 additions & 0 deletions frontend/src/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@layer base {
html {
font-family: 'Poppins', sans-serif;
}
}

html, body {
overscroll-behavior-y: none;
}

/**
Tell the browser that this is a dark theme.
**/
Expand Down
136 changes: 86 additions & 50 deletions frontend/src/components/admin/LayoutDashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,28 @@
<template>
<div class="min-h-screen bg-gray-900 text-gray-100 font-sans">
<!-- Mobile Menu Button -->
<button @click="isSidebarOpen = !isSidebarOpen"
class="lg:hidden fixed top-4 left-4 z-50 p-2 bg-gray-800/50 rounded-full backdrop-blur-sm">
<button
@click="isSidebarOpen = !isSidebarOpen"
class="lg:hidden fixed top-4 left-4 z-50 p-2 bg-gray-800/50 rounded-full backdrop-blur-sm"
>
<Menu v-if="!isSidebarOpen" class="w-6 h-6 text-pink-400" />
<X v-else class="w-6 h-6 text-pink-400" />
</button>

<!-- Sidebar -->
<aside :class="[
'fixed inset-y-0 left-0 z-40 w-64 transition-transform duration-300 ease-in-out transform',
isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
'lg:translate-x-0 bg-gray-800/50 backdrop-blur-md',
]">
<aside
:class="[
'fixed inset-y-0 left-0 z-40 w-64 transition-transform duration-300 ease-in-out transform',
isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
'lg:translate-x-0 bg-gray-800/50 backdrop-blur-md',
]"
>
<div class="p-6">
<h1
class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent">
<span class="block text-lg">{{ Settings.getSetting("debug_name")}}</span>
<span class="block text-sm text-gray-400">{{ Settings.getSetting("debug_version") }}</span>
class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent"
>
<span class="block text-lg">{{ Settings.getSetting('debug_name') }}</span>
<span class="block text-sm text-gray-400">{{ Settings.getSetting('debug_version') }}</span>
</h1>
</div>
<nav class="p-6">
Expand All @@ -28,40 +33,55 @@
<li v-for="item in menuGroup.items" :key="item.name">
<!-- Menu item with submenu -->
<template v-if="item.subMenu">
<div @click="toggleSubmenu(item)"
class="flex items-center px-4 py-2 rounded-lg transition-all duration-200 hover:bg-gray-700/50 cursor-pointer">
<div
@click="toggleSubmenu(item)"
class="flex items-center px-4 py-2 rounded-lg transition-all duration-200 hover:bg-gray-700/50 cursor-pointer"
>
<component :is="item.icon" class="w-5 h-5 mr-3 text-pink-400" />
<span>{{ item.name }}</span>
<ChevronDown class="w-4 h-4 ml-auto transition-transform duration-200"
:class="{ 'rotate-180': item.isOpen }" />
<span v-if="'count' in item"
class="ml-2 text-xs bg-violet-500 text-white px-2 py-1 rounded-full">
<ChevronDown
class="w-4 h-4 ml-auto transition-transform duration-200"
:class="{ 'rotate-180': item.isOpen }"
/>
<span
v-if="'count' in item"
class="ml-2 text-xs bg-violet-500 text-white px-2 py-1 rounded-full"
>
{{ item.count }}
</span>
</div>
<ul v-if="item.isOpen" class="mt-2 ml-4 space-y-2">
<li v-for="subItem in item.subMenu" :key="subItem.name">
<RouterLink :to="subItem.path || ''"
<RouterLink
:to="subItem.path || ''"
class="flex items-center px-4 py-2 rounded-lg transition-all duration-200 hover:bg-gray-700/50"
:class="{ 'bg-gray-700/50': route.path === subItem.path }">
:class="{ 'bg-gray-700/50': route.path === subItem.path }"
>
<component :is="subItem.icon" class="w-5 h-5 mr-3 text-pink-400" />
<span>{{ subItem.name }}</span>
<span v-if="'count' in subItem"
class="ml-auto text-xs bg-violet-500 text-white px-2 py-1 rounded-full">
<span
v-if="'count' in subItem"
class="ml-auto text-xs bg-violet-500 text-white px-2 py-1 rounded-full"
>
{{ subItem.count }}
</span>
</RouterLink>
</li>
</ul>
</template>
<!-- Regular menu item -->
<RouterLink v-else :to="item.path || ''"
<RouterLink
v-else
:to="item.path || ''"
class="flex items-center px-4 py-2 rounded-lg transition-all duration-200 hover:bg-gray-700/50"
:class="{ 'bg-gray-700/50': item.active }">
:class="{ 'bg-gray-700/50': item.active }"
>
<component :is="item.icon" class="w-5 h-5 mr-3 text-pink-400" />
<span>{{ item.name }}</span>
<span v-if="'count' in item"
class="ml-auto text-xs bg-violet-500 text-white px-2 py-1 rounded-full">
<span
v-if="'count' in item"
class="ml-auto text-xs bg-violet-500 text-white px-2 py-1 rounded-full"
>
{{ item.count }}
</span>
</RouterLink>
Expand All @@ -71,38 +91,55 @@
</nav>
</aside>



<div class="lg:ml-64 min-h-screen flex flex-col">
<!-- Top Navigation -->
<header class="bg-gray-800/50 backdrop-blur-md p-4 flex items-center justify-between">
<div class="relative w-full max-w-xl">
<input v-model="searchQuery" type="search" placeholder="Search..."
<input
v-model="searchQuery"
type="search"
placeholder="Search..."
class="w-full bg-gray-700/50 text-gray-100 placeholder-gray-400 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-pink-500"
@focus="isSearchFocused = true" @blur="handleSearchBlur" />
@focus="isSearchFocused = true"
@blur="handleSearchBlur"
/>
<Search class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />

<!-- Search Results Dropdown -->
<div v-if="isSearchFocused && filteredResults.length > 0"
class="absolute z-10 w-full mt-2 bg-gray-800/90 backdrop-blur-md rounded-lg shadow-xl max-h-60 overflow-y-auto">
<a v-for="result in filteredResults" :key="result.id" :href="result.path"
<div
v-if="isSearchFocused && filteredResults.length > 0"
class="absolute z-10 w-full mt-2 bg-gray-800/90 backdrop-blur-md rounded-lg shadow-xl max-h-60 overflow-y-auto"
>
<a
v-for="result in filteredResults"
:key="result.id"
:href="result.path"
class="block px-4 py-2 hover:bg-gray-700/50 transition-colors duration-200"
@mousedown.prevent="handleResultClick(result)">
@mousedown.prevent="handleResultClick(result)"
>
{{ result.name }}
</a>
</div>
</div>

<div class="relative ml-4">
<button @click="isProfileOpen = !isProfileOpen"
class="flex items-center space-x-2 focus:outline-none">
<button
@click="isProfileOpen = !isProfileOpen"
class="flex items-center space-x-2 focus:outline-none"
>
<img :src="Session.getInfo('avatar')" alt="User Avatar" class="w-8 h-8 rounded-full" />
<ChevronDown class="w-4 h-4 text-gray-400" :class="{ 'rotate-180': isProfileOpen }" />
</button>
<div v-if="isProfileOpen"
class="absolute right-0 mt-2 w-48 bg-gray-800/90 backdrop-blur-md rounded-lg shadow-xl py-1 animate-fadeIn">
<RouterLink v-for="item in profileMenu" :key="item.name" :to="item.path"
class="block px-4 py-2 hover:bg-gray-700/50 transition-colors duration-200">
<div
v-if="isProfileOpen"
class="absolute right-0 mt-2 w-48 bg-gray-800/90 backdrop-blur-md rounded-lg shadow-xl py-1 animate-fadeIn"
>
<RouterLink
v-for="item in profileMenu"
:key="item.name"
:to="item.path"
class="block px-4 py-2 hover:bg-gray-700/50 transition-colors duration-200"
>
{{ item.name }}
</RouterLink>
</div>
Expand All @@ -121,8 +158,12 @@
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-2 md:mb-0">© 2023 MythicalClient. All rights reserved.</p>
<div class="flex space-x-4">
<a v-for="link in footerLinks" :key="link.name" :href="link.path"
class="text-gray-400 hover:text-pink-400 text-sm transition-colors duration-200">
<a
v-for="link in footerLinks"
:key="link.name"
:href="link.path"
class="text-gray-400 hover:text-pink-400 text-sm transition-colors duration-200"
>
{{ link.name }}
</a>
</div>
Expand Down Expand Up @@ -160,15 +201,13 @@ if (!Session.isSessionValid()) {
router.push('/auth/login');
}


try {
Session.startSession();
} catch (error) {
console.error('Session failed:', error);
}


if (Session.getInfo('role') == "1" && Session.getInfo('role') == "2") {
if (Session.getInfo('role') == '1' && Session.getInfo('role') == '2') {
router.push('/dashboard');
}

Expand Down Expand Up @@ -207,8 +246,6 @@ Dashboard.get().then((data) => {
const route = useRoute();
const adminBaseUri = '/mc-admin';



interface MenuItem {
name: string;
path?: string;
Expand Down Expand Up @@ -254,7 +291,7 @@ const menuGroups = ref<{ title: string; items: MenuItem[] }[]>([
name: 'Create Invoice',
path: `${adminBaseUri}/invoices/create`,
icon: PlusCircle,
}
},
],
active: route.path === `${adminBaseUri}/invoices`,
count: computed(() => dashBoard.value.count.invoices_count || 0),
Expand All @@ -265,8 +302,8 @@ const menuGroups = ref<{ title: string; items: MenuItem[] }[]>([
icon: InfoIcon,
active: route.path === `${adminBaseUri}/tickets`,
count: computed(() => dashBoard.value.count.tickets_count || 0),
}
]
},
],
},
{
title: 'Advanced',
Expand All @@ -288,8 +325,7 @@ const menuGroups = ref<{ title: string; items: MenuItem[] }[]>([
path: `${adminBaseUri}/mounts`,
icon: HardDrive,
active: route.path === `${adminBaseUri}/mounts`,
}

},
],
},
]);
Expand Down
Loading

0 comments on commit 3bbf078

Please sign in to comment.