EZSCALE/website
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 1: Rebuild layout infrastructure with new shared components

Browse Source 
Delete old Vuexy VerticalNav layout system (5 components + 4 SCSS files)
and replace with new modular components: AppSidebar, AppTopNavbar,
CommandPalette, NotificationPanel, ToastStack, SkeletonLoader,
EmptyState, Breadcrumbs. Rebuild all 4 layouts (Admin, Account,
Marketing, Auth) using new components. Add Pinia toast store for
flash message integration. Update navigation with cleaner groupings.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Dev
2026-03-14 16:55:54 -04:00
parent 34e7fb62f3
commit d01ea28a8b
24 changed files with 1185 additions and 1178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
website/resources/ts/@layouts/components/VerticalNav.vue
View File

@@ -1,100 +0,0 @@
<script lang="ts" setup>
import { usePage } from '@inertiajs/vue3'
import { Link } from '@inertiajs/vue3'
import { computed, ref, watch } from 'vue'
import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '@layouts/types'
import VerticalNavLink from './VerticalNavLink.vue'
import VerticalNavGroup from './VerticalNavGroup.vue'
import VerticalNavSectionTitle from './VerticalNavSectionTitle.vue'
import logoWhite from '@images/ezscale_logo_white.png'
import { useTheme } from 'vuetify'
interface Props {
navItems: VerticalNavItems
isOverlayNavActive: boolean
isCollapsed: boolean
}
const props = defineProps<Props>()
const emit = defineEmits<{
'update:isOverlayNavActive': [value: boolean]
'update:isCollapsed': [value: boolean]
}>()
const theme = useTheme()
const isDark = computed(() => theme.global.current.value.dark)
const navRef = ref<HTMLElement | null>(null)
const isHovered = ref<boolean>(false)
const page = usePage()
// Mini mode: collapsed AND not hovered AND not mobile overlay
const isMini = computed<boolean>(() => props.isCollapsed && !isHovered.value && !props.isOverlayNavActive)
// Auto-close overlay on route change
watch(() => page.url, () => {
if (props.isOverlayNavActive) {
emit('update:isOverlayNavActive', false)
}
})
function resolveNavItemComponent(item: NavLink | NavGroup | NavSectionTitle): typeof VerticalNavLink | typeof VerticalNavGroup | typeof VerticalNavSectionTitle {
if ('heading' in item) return VerticalNavSectionTitle
if ('children' in item) return VerticalNavGroup
return VerticalNavLink
}
function toggleCollapse(): void {
emit('update:isCollapsed', !props.isCollapsed)
}
</script>
<template>
<aside
ref="navRef"
class="layout-vertical-nav"
:class="{
'overlay-nav': isOverlayNavActive,
visible: isOverlayNavActive,
hovered: isHovered,
}"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
>
<!-- Nav Header (Logo + Toggle) -->
<div class="nav-header">
<Link href="/dashboard" class="nav-header-logo">
<img
:src="logoWhite"
alt="EZSCALE"
:class="{ 'logo-light': !isDark }"
class="nav-logo-img"
/>
<span v-show="!isMini" class="nav-logo-title">EZSCALE</span>
</Link>
<VBtn
v-show="!isMini"
icon
variant="text"
size="x-small"
class="nav-collapse-btn"
@click="toggleCollapse"
>
<VIcon :icon="isCollapsed ? 'tabler-layout-sidebar-right-expand' : 'tabler-layout-sidebar-left-collapse'" size="20" />
</VBtn>
</div>
<!-- Nav Items -->
<ul class="nav-items">
<Component
:is="resolveNavItemComponent(item)"
v-for="(item, index) in navItems"
:key="index"
:item="item"
:is-mini="isMini"
/>
</ul>
</aside>
</template>

108
website/resources/ts/@layouts/components/VerticalNavGroup.vue
View File

@@ -1,108 +0,0 @@
<script lang="ts" setup>
import { usePage } from '@inertiajs/vue3'
import { computed, ref, watch } from 'vue'
import type { NavGroup, NavLink } from '@layouts/types'
import VerticalNavLink from './VerticalNavLink.vue'
interface Props {
item: NavGroup
isMini?: boolean
}
const props = withDefaults(defineProps<Props>(), {
isMini: false,
})
const page = usePage()
function isChildActive(children: (NavLink | NavGroup)[]): boolean {
return children.some((child) => {
if ('children' in child) {
return isChildActive(child.children)
}
const url = page.url
if (child.to === '/dashboard') {
return url === '/dashboard' || url === '/dashboard/'
}
return url.startsWith(child.to)
})
}
const isGroupActive = computed<boolean>(() => isChildActive(props.item.children))
const isOpen = ref<boolean>(isGroupActive.value)
// Auto-open/close when route changes
watch(() => page.url, () => {
if (isGroupActive.value) {
isOpen.value = true
}
})
// Close when entering mini mode
watch(() => props.isMini, (mini) => {
if (mini) {
isOpen.value = false
}
else if (isGroupActive.value) {
isOpen.value = true
}
})
function toggleGroup(): void {
if (!props.isMini) {
isOpen.value = !isOpen.value
}
}
function resolveComponent(child: NavLink | NavGroup): typeof VerticalNavLink | typeof VerticalNavGroup {
if ('children' in child) {
return VerticalNavGroup
}
return VerticalNavLink
}
</script>
<template>
<li class="nav-group" :class="{ active: isGroupActive, open: isOpen, disabled: item.disable }">
<div class="nav-group-label" @click="toggleGroup">
<VIcon
v-if="item.icon"
:icon="item.icon"
class="nav-item-icon"
size="22"
/>
<VIcon
v-else
icon="tabler-circle"
class="nav-item-icon"
size="12"
/>
<span v-show="!isMini" class="nav-item-title">{{ item.title }}</span>
<span
v-if="item.badgeContent"
v-show="!isMini"
class="nav-item-badge"
:class="item.badgeClass"
>
{{ item.badgeContent }}
</span>
<VIcon
v-show="!isMini"
icon="tabler-chevron-right"
class="nav-group-arrow"
size="18"
/>
</div>
<Transition name="vertical-nav-group">
<ul v-show="isOpen && !isMini" class="nav-group-children">
<Component
:is="resolveComponent(child)"
v-for="(child, index) in item.children"
:key="index"
:item="child"
:is-mini="isMini"
/>
</ul>
</Transition>
</li>
</template>

107
website/resources/ts/@layouts/components/VerticalNavLayout.vue
View File

@@ -1,107 +0,0 @@
<script lang="ts" setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import type { VerticalNavItems } from '@layouts/types'
import VerticalNav from './VerticalNav.vue'
interface Props {
navItems: VerticalNavItems
}
defineProps<Props>()
const isOverlayNavActive = ref<boolean>(false)
const isNavCollapsed = ref<boolean>(false)
// Persist collapsed state in localStorage
onMounted(() => {
const saved = localStorage.getItem('ezscale-nav-collapsed')
if (saved !== null) {
isNavCollapsed.value = saved === 'true'
}
})
watch(isNavCollapsed, (val) => {
localStorage.setItem('ezscale-nav-collapsed', String(val))
})
// Close overlay when window resizes to desktop
const BREAKPOINT = 1280
function handleResize(): void {
if (window.innerWidth >= BREAKPOINT && isOverlayNavActive.value) {
isOverlayNavActive.value = false
}
}
onMounted(() => {
window.addEventListener('resize', handleResize)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', handleResize)
})
function toggleOverlayNav(value: boolean): void {
isOverlayNavActive.value = value
}
</script>
<template>
<div
class="layout-wrapper layout-nav-type-vertical"
:class="{
'layout-vertical-nav-collapsed': isNavCollapsed,
'layout-overlay-nav': false,
}"
>
<!-- Vertical Nav -->
<VerticalNav
:nav-items="navItems"
v-model:is-overlay-nav-active="isOverlayNavActive"
:is-collapsed="isNavCollapsed"
@update:is-collapsed="isNavCollapsed = $event"
/>
<!-- Content Wrapper -->
<div class="layout-content-wrapper">
<!-- Navbar -->
<header class="layout-navbar">
<div class="navbar-content d-flex align-center h-100 px-4">
<!-- Mobile hamburger (shown below 1280px via CSS) -->
<VBtn
icon
variant="text"
size="small"
class="d-lg-none me-2"
@click="toggleOverlayNav(true)"
>
<VIcon icon="tabler-menu-2" size="22" />
</VBtn>
<slot name="navbar" />
</div>
</header>
<!-- Main Content -->
<main class="layout-page-content">
<slot />
</main>
<!-- Footer -->
<footer class="layout-footer">
<slot name="footer">
<span class="text-body-2 text-medium-emphasis">
&copy; {{ new Date().getFullYear() }} EZSCALE. All rights reserved.
</span>
</slot>
</footer>
</div>
<!-- Overlay Backdrop -->
<div
class="layout-overlay"
:class="{ visible: isOverlayNavActive }"
@click="toggleOverlayNav(false)"
/>
</div>
</template>

52
website/resources/ts/@layouts/components/VerticalNavLink.vue
View File

@@ -1,52 +0,0 @@
<script lang="ts" setup>
import { Link, usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
import type { NavLink } from '@layouts/types'
interface Props {
item: NavLink
isMini?: boolean
}
const props = withDefaults(defineProps<Props>(), {
isMini: false,
})
const page = usePage()
const isActive = computed<boolean>(() => {
const url = page.url
// Exact match for dashboard, prefix match for everything else
if (props.item.to === '/dashboard') {
return url === '/dashboard' || url === '/dashboard/'
}
return url.startsWith(props.item.to)
})
</script>
<template>
<li class="nav-link" :class="{ active: isActive, disabled: item.disable }">
<Link :href="item.to" class="nav-link-btn">
<VIcon
v-if="item.icon"
:icon="item.icon"
class="nav-item-icon"
size="22"
/>
<VIcon
v-else
icon="tabler-circle"
class="nav-item-icon"
size="12"
/>
<span v-show="!isMini" class="nav-item-title">{{ item.title }}</span>
<span
v-if="item.badgeContent"
v-show="!isMini"
class="nav-item-badge"
:class="item.badgeClass"
>
{{ item.badgeContent }}
</span>
</Link>
</li>
</template>

21
website/resources/ts/@layouts/components/VerticalNavSectionTitle.vue
View File

@@ -1,21 +0,0 @@
<script lang="ts" setup>
import type { NavSectionTitle } from '@layouts/types'
interface Props {
item: NavSectionTitle
isMini?: boolean
}
withDefaults(defineProps<Props>(), {
isMini: false,
})
</script>
<template>
<li class="nav-section-title">
<div v-show="!isMini" class="nav-section-title-text">
{{ item.heading }}
</div>
<VIcon v-show="isMini" icon="tabler-dots" size="16" class="nav-section-title-icon" />
</li>
</template>

30
website/resources/ts/@layouts/styles/_mixins.scss
View File

@@ -1,30 +0,0 @@
@use "placeholders";
@use "@configured-variables" as variables;
@mixin rtl {
@if variables.$enable-rtl-styles {
[dir="rtl"] & {
@content;
}
}
}
@mixin boxed-content($nest-selector: false) {
& {
@extend %boxed-content-spacing;
@at-root {
@if $nest-selector == false {
.layout-content-width-boxed#{&} {
@extend %boxed-content;
}
}
// stylelint-disable-next-line @stylistic/indentation
@else {
.layout-content-width-boxed & {
@extend %boxed-content;
}
}
}
}
}

9
website/resources/ts/@layouts/styles/_placeholders.scss
View File

@@ -1,9 +0,0 @@
// Stub — placeholders not used in our Inertia setup
%boxed-content {
max-inline-size: 1440px;
margin-inline: auto;
}
%boxed-content-spacing {
padding-inline: 1.5rem;
}

29
website/resources/ts/@layouts/styles/_variables.scss
View File

@@ -1,29 +0,0 @@
// @use "@styles/style.scss";
// 👉 Vertical nav
$layout-vertical-nav-z-index: 12 !default;
$layout-vertical-nav-width: 260px !default;
$layout-vertical-nav-collapsed-width: 80px !default;
$selector-vertical-nav-mini: ".layout-vertical-nav-collapsed .layout-vertical-nav:not(:hover)";
// 👉 Horizontal nav
$layout-horizontal-nav-z-index: 11 !default;
$layout-horizontal-nav-navbar-height: 64px !default;
// 👉 Navbar
$layout-vertical-nav-navbar-height: 64px !default;
$layout-vertical-nav-navbar-is-contained: true !default;
$layout-vertical-nav-layout-navbar-z-index: 11 !default;
$layout-horizontal-nav-layout-navbar-z-index: 11 !default;
// 👉 Main content
$layout-boxed-content-width: 1440px !default;
// 👉Footer
$layout-vertical-nav-footer-height: 56px !default;
// 👉 Layout overlay
$layout-overlay-z-index: 11 !default;
// 👉 RTL
$enable-rtl-styles: true !default;

311
website/resources/ts/@layouts/styles/_vertical-nav.scss
View File

@@ -1,311 +0,0 @@
@use "@configured-variables" as variables;
@use "variables" as layout-variables;
// ━━━ Layout Wrapper ━━━
.layout-wrapper.layout-nav-type-vertical {
display: flex;
min-block-size: 100vh;
flex: 1 1 auto;
}
// ━━━ Vertical Nav (Sidebar) ━━━
.layout-vertical-nav {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: layout-variables.$layout-vertical-nav-z-index;
display: flex;
flex-direction: column;
inline-size: layout-variables.$layout-vertical-nav-width;
background-color: rgb(var(--v-theme-surface));
border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
transition: inline-size 0.25s ease-in-out, transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
// ━━━ Nav Header ━━━
.nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 8px;
min-block-size: layout-variables.$layout-vertical-nav-navbar-height;
}
.nav-header-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
overflow: hidden;
}
.nav-logo-img {
block-size: 28px;
inline-size: auto;
flex-shrink: 0;
}
.nav-logo-title {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.5px;
color: rgb(var(--v-theme-on-surface));
white-space: nowrap;
transition: opacity 0.15s ease;
}
.nav-collapse-btn {
flex-shrink: 0;
}
// ━━━ Nav Items List ━━━
.nav-items {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
overflow-x: hidden;
flex-grow: 1;
padding-block: 4px;
padding-inline: 12px;
}
// ━━━ Nav Link ━━━
.nav-link {
margin-block: 2px;
.nav-link-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
color: rgba(var(--v-theme-on-surface), 0.78);
transition: background-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
overflow: hidden;
}
.nav-item-icon {
flex-shrink: 0;
}
.nav-item-title {
font-size: 0.9375rem;
line-height: 1.4;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-item-badge {
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 4px;
background-color: rgb(var(--v-theme-error));
color: rgb(var(--v-theme-on-error));
line-height: 1;
flex-shrink: 0;
}
&:not(.disabled) .nav-link-btn:hover {
background-color: rgba(var(--v-theme-on-surface), 0.06);
}
&.active .nav-link-btn {
background: linear-gradient(270deg, rgb(var(--v-theme-primary)), rgba(var(--v-theme-primary), 0.7));
color: rgb(var(--v-theme-on-primary));
box-shadow: 0 2px 6px 0 rgba(var(--v-theme-primary), 0.4);
.nav-item-icon {
color: inherit;
}
}
&.disabled .nav-link-btn {
opacity: 0.4;
pointer-events: none;
}
}
// ━━━ Nav Group ━━━
.nav-group {
margin-block: 2px;
.nav-group-label {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
color: rgba(var(--v-theme-on-surface), 0.78);
transition: background-color 0.15s ease;
white-space: nowrap;
overflow: hidden;
user-select: none;
}
.nav-group-label:hover {
background-color: rgba(var(--v-theme-on-surface), 0.06);
}
&.active > .nav-group-label {
color: rgb(var(--v-theme-primary));
}
.nav-group-arrow {
margin-inline-start: auto;
transition: transform 0.25s ease-in-out;
flex-shrink: 0;
}
&.open > .nav-group-label .nav-group-arrow {
transform: rotate(90deg);
}
.nav-group-children {
list-style: none;
padding: 0;
margin: 0;
padding-inline-start: 12px;
}
&.disabled > .nav-group-label {
opacity: 0.4;
pointer-events: none;
}
}
// ━━━ Section Title ━━━
.nav-section-title {
margin-block: 12px 4px;
padding-inline: 12px;
.nav-section-title-text {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(var(--v-theme-on-surface), 0.38);
white-space: nowrap;
overflow: hidden;
}
.nav-section-title-icon {
color: rgba(var(--v-theme-on-surface), 0.38);
margin-inline: auto;
}
&:first-child {
margin-block-start: 0;
}
}
}
// ━━━ Collapsed / Mini Mode ━━━
.layout-vertical-nav-collapsed .layout-vertical-nav:not(:hover) {
inline-size: layout-variables.$layout-vertical-nav-collapsed-width;
}
.layout-vertical-nav-collapsed .layout-vertical-nav:hover {
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.25);
}
// ━━━ Content Wrapper ━━━
.layout-content-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
min-block-size: 100vh;
padding-inline-start: layout-variables.$layout-vertical-nav-width;
transition: padding-inline-start 0.25s ease-in-out;
}
.layout-vertical-nav-collapsed .layout-content-wrapper {
padding-inline-start: layout-variables.$layout-vertical-nav-collapsed-width;
}
// ━━━ Navbar ━━━
.layout-navbar {
position: sticky;
inset-block-start: 0;
z-index: layout-variables.$layout-vertical-nav-layout-navbar-z-index;
background-color: rgb(var(--v-theme-surface));
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
min-block-size: layout-variables.$layout-vertical-nav-navbar-height;
.navbar-content {
block-size: 100%;
}
}
// ━━━ Page Content ━━━
.layout-page-content {
flex-grow: 1;
padding: 24px;
}
// ━━━ Footer ━━━
.layout-footer {
display: flex;
align-items: center;
justify-content: center;
min-block-size: layout-variables.$layout-vertical-nav-footer-height;
padding-inline: 24px;
}
// ━━━ Overlay ━━━
.layout-overlay {
position: fixed;
inset: 0;
z-index: layout-variables.$layout-overlay-z-index;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease-in-out;
&.visible {
opacity: 1;
pointer-events: auto;
}
}
// ━━━ Responsive (Mobile Overlay) ━━━
@media (max-width: 1279.98px) {
.layout-vertical-nav {
position: fixed;
transform: translateX(-100%);
&.visible {
transform: translateX(0);
}
}
.layout-content-wrapper {
padding-inline-start: 0 !important;
}
.layout-vertical-nav-collapsed .layout-content-wrapper {
padding-inline-start: 0 !important;
}
}
// ━━━ Transition for nav group expand/collapse ━━━
.vertical-nav-group-enter-active,
.vertical-nav-group-leave-active {
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.25s ease-in-out;
}
.vertical-nav-group-enter-from,
.vertical-nav-group-leave-to {
max-height: 0;
opacity: 0;
}
.vertical-nav-group-enter-to,
.vertical-nav-group-leave-from {
max-height: 500px;
opacity: 1;
}

150
website/resources/ts/Components/AppSidebar.vue Normal file
View File

@@ -0,0 +1,150 @@
<script lang="ts" setup>
import { Link, usePage } from '@inertiajs/vue3'
import { ref, watch } from 'vue'
import type { NavGroup, NavLink, VerticalNavItems } from '@layouts/types'
import logoWhite from '@images/ezscale_logo_white.png'
interface Props {
navItems: VerticalNavItems
collapsed?: boolean
mobileOpen?: boolean
}
const props = withDefaults(defineProps<Props>(), {
collapsed: false,
mobileOpen: false,
})
const emit = defineEmits<{
'update:collapsed': [value: boolean]
'update:mobileOpen': [value: boolean]
}>()
const page = usePage()
function isActive(to: string): boolean {
const url = page.url
if (to === '/dashboard') return url === '/dashboard' || url === '/dashboard/'
return url.startsWith(to)
}
function isGroupActive(children: (NavLink | NavGroup)[]): boolean {
return children.some(child => {
if ('children' in child) return isGroupActive(child.children)
return isActive(child.to)
})
}
const openGroups = ref<Set<number>>(new Set())
function toggleGroup(index: number): void {
if (openGroups.value.has(index)) {
openGroups.value.delete(index)
} else {
openGroups.value.add(index)
}
}
// Auto-open groups containing active links
watch(() => page.url, () => {
props.navItems.forEach((item, index) => {
if ('children' in item && isGroupActive(item.children)) {
openGroups.value.add(index)
}
})
// Close mobile nav on route change
if (props.mobileOpen) emit('update:mobileOpen', false)
}, { immediate: true })
function toggleCollapse(): void {
emit('update:collapsed', !props.collapsed)
}
</script>
<template>
<aside
class="app-sidebar"
:class="{
'app-sidebar--collapsed': collapsed && !mobileOpen,
'app-sidebar--mobile-open': mobileOpen,
}"
>
<!-- Header -->
<div class="sidebar-header">
<Link href="/dashboard" class="d-flex align-center text-decoration-none">
<img :src="logoWhite" alt="EZSCALE" style="height: 28px; width: auto;" />
<span class="sidebar-logo-text text-white">EZSCALE</span>
</Link>
<VBtn
icon
variant="text"
size="x-small"
color="white"
class="ms-auto sidebar-logo-text"
@click="toggleCollapse"
>
<VIcon :icon="collapsed ? 'tabler-layout-sidebar-right-expand' : 'tabler-layout-sidebar-left-collapse'" size="20" />
</VBtn>
</div>
<!-- Navigation -->
<nav class="sidebar-nav">
<template v-for="(item, index) in navItems" :key="index">
<!-- Section Title -->
<div v-if="'heading' in item" class="nav-section-title">
{{ item.heading }}
</div>
<!-- Nav Group -->
<template v-else-if="'children' in item">
<div
class="nav-item"
:class="{ 'nav-item--active': isGroupActive(item.children) }"
@click="toggleGroup(index)"
>
<VIcon v-if="item.icon" :icon="item.icon" class="nav-item-icon" size="22" />
<span class="nav-item-title">{{ item.title }}</span>
<VIcon
icon="tabler-chevron-right"
size="16"
class="nav-item-title ms-auto"
:style="{ transform: openGroups.has(index) ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s ease' }"
/>
</div>
<div v-show="openGroups.has(index) && !(collapsed && !mobileOpen)" style="padding-left: 12px;">
<template v-for="(child, ci) in item.children" :key="ci">
<Link
v-if="!('children' in child)"
:href="child.to"
class="nav-item"
:class="{ 'nav-item--active': isActive(child.to) }"
>
<VIcon icon="tabler-circle" size="10" class="nav-item-icon" />
<span class="nav-item-title">{{ child.title }}</span>
</Link>
</template>
</div>
</template>
<!-- Nav Link -->
<Link
v-else
:href="item.to"
class="nav-item"
:class="{ 'nav-item--active': isActive(item.to) }"
>
<VIcon v-if="item.icon" :icon="item.icon" class="nav-item-icon" size="22" />
<span class="nav-item-title">{{ item.title }}</span>
<VChip
v-if="item.badgeContent"
size="x-small"
:color="item.badgeClass || 'primary'"
class="nav-item-badge nav-item-title"
>
{{ item.badgeContent }}
</VChip>
</Link>
</template>
</nav>
</aside>
</template>

54
website/resources/ts/Components/AppTopNavbar.vue Normal file
View File

@@ -0,0 +1,54 @@
<script lang="ts" setup>
import ThemeSwitcher from '@/Components/ThemeSwitcher.vue'
interface Props {
showHamburger?: boolean
}
withDefaults(defineProps<Props>(), {
showHamburger: true,
})
const emit = defineEmits<{
toggleSidebar: []
openCommandPalette: []
}>()
</script>
<template>
<header class="app-navbar">
<!-- Mobile hamburger -->
<VBtn
v-if="showHamburger"
icon
variant="text"
size="small"
class="d-lg-none me-2"
@click="emit('toggleSidebar')"
>
<VIcon icon="tabler-menu-2" size="22" />
</VBtn>
<!-- Search trigger -->
<VBtn
variant="text"
size="small"
color="default"
class="text-medium-emphasis"
@click="emit('openCommandPalette')"
>
<VIcon icon="tabler-search" size="18" start />
<span class="d-none d-sm-inline">Search...</span>
<VChip size="x-small" variant="outlined" class="ms-2 d-none d-sm-inline-flex">
⌘K
</VChip>
</VBtn>
<VSpacer />
<!-- Right side slot for layout-specific content -->
<slot />
<ThemeSwitcher />
</header>
</template>

21
website/resources/ts/Components/Breadcrumbs.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
interface BreadcrumbItem {
title: string
href?: string
disabled?: boolean
}
interface Props {
items: BreadcrumbItem[]
}
defineProps<Props>()
</script>
<template>
<VBreadcrumbs :items="items" class="pa-0 mb-6">
<template #divider>
<VIcon icon="tabler-chevron-right" size="14" />
</template>
</VBreadcrumbs>
</template>

137
website/resources/ts/Components/CommandPalette.vue Normal file
View File

@@ -0,0 +1,137 @@
<script lang="ts" setup>
import { router } from '@inertiajs/vue3'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
interface PaletteItem {
title: string
icon: string
href: string
section: string
}
interface Props {
items: PaletteItem[]
}
const props = defineProps<Props>()
const isOpen = ref<boolean>(false)
const searchQuery = ref<string>('')
const selectedIndex = ref<number>(0)
const filteredItems = computed<PaletteItem[]>(() => {
if (!searchQuery.value) return props.items
const q = searchQuery.value.toLowerCase()
return props.items.filter(item =>
item.title.toLowerCase().includes(q) || item.section.toLowerCase().includes(q)
)
})
watch(searchQuery, () => { selectedIndex.value = 0 })
function open(): void {
isOpen.value = true
searchQuery.value = ''
selectedIndex.value = 0
}
function close(): void {
isOpen.value = false
}
function navigate(item: PaletteItem): void {
close()
router.visit(item.href)
}
function handleKeydown(e: KeyboardEvent): void {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault()
isOpen.value ? close() : open()
return
}
if (!isOpen.value) return
if (e.key === 'ArrowDown') {
e.preventDefault()
selectedIndex.value = Math.min(selectedIndex.value + 1, filteredItems.value.length - 1)
} else if (e.key === 'ArrowUp') {
e.preventDefault()
selectedIndex.value = Math.max(selectedIndex.value - 1, 0)
} else if (e.key === 'Enter' && filteredItems.value[selectedIndex.value]) {
e.preventDefault()
navigate(filteredItems.value[selectedIndex.value])
}
}
onMounted(() => document.addEventListener('keydown', handleKeydown))
onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
defineExpose({ open })
</script>
<template>
<VDialog
v-model="isOpen"
max-width="560"
content-class="command-palette-dialog"
transition="dialog-top-transition"
>
<VCard>
<div class="d-flex align-center pa-4 pb-0">
<VIcon icon="tabler-search" size="20" class="me-3 text-medium-emphasis" />
<input
v-model="searchQuery"
placeholder="Search pages..."
class="command-palette-input flex-grow-1"
autofocus
/>
<VChip size="x-small" variant="outlined" @click="close">
ESC
</VChip>
</div>
<VDivider class="mt-4" />
<VList v-if="filteredItems.length > 0" class="pa-2" density="compact" max-height="400" style="overflow-y: auto;">
<VListItem
v-for="(item, i) in filteredItems"
:key="item.href"
:active="i === selectedIndex"
color="primary"
rounded
@click="navigate(item)"
@mouseenter="selectedIndex = i"
>
<template #prepend>
<VIcon :icon="item.icon" size="18" />
</template>
<VListItemTitle class="text-body-2">{{ item.title }}</VListItemTitle>
<template #append>
<VChip size="x-small" variant="text" class="text-caption text-medium-emphasis">
{{ item.section }}
</VChip>
</template>
</VListItem>
</VList>
<div v-else class="pa-8 text-center">
<div class="text-body-2 text-medium-emphasis">No results found</div>
</div>
</VCard>
</VDialog>
</template>
<style lang="scss" scoped>
.command-palette-input {
background: none;
border: none;
outline: none;
font-size: 1rem;
color: inherit;
width: 100%;
&::placeholder {
color: rgba(var(--v-theme-on-surface), 0.4);
}
}
</style>

38
website/resources/ts/Components/EmptyState.vue Normal file
View File

@@ -0,0 +1,38 @@
<script lang="ts" setup>
interface Props {
icon?: string
title: string
description?: string
actionLabel?: string
actionTo?: string
}
withDefaults(defineProps<Props>(), {
icon: 'tabler-inbox',
description: undefined,
actionLabel: undefined,
actionTo: undefined,
})
const emit = defineEmits<{ action: [] }>()
</script>
<template>
<div class="d-flex flex-column align-center justify-center pa-12 text-center">
<VAvatar size="80" color="default" variant="tonal" class="mb-6">
<VIcon :icon="icon" size="40" />
</VAvatar>
<h3 class="text-h6 mb-2">{{ title }}</h3>
<p v-if="description" class="text-body-2 text-medium-emphasis mb-6" style="max-width: 360px;">
{{ description }}
</p>
<VBtn
v-if="actionLabel"
:to="actionTo"
color="primary"
@click="emit('action')"
>
{{ actionLabel }}
</VBtn>
</div>
</template>

141
website/resources/ts/Components/NotificationPanel.vue Normal file
View File

@@ -0,0 +1,141 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
interface NotificationItem {
id: string
type: string
message: string
data: Record<string, unknown>
read: boolean
created_at: string
}
const props = defineProps<{ modelValue: boolean }>()
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
const notifications = ref<NotificationItem[]>([])
const unreadCount = ref<number>(0)
const loading = ref<boolean>(false)
function resolveIcon(type: string): string {
const icons: Record<string, string> = {
payment_succeeded: 'tabler-credit-card',
payment_failed: 'tabler-credit-card-off',
subscription_created: 'tabler-rosette-discount-check',
subscription_cancelled: 'tabler-circle-x',
service_provisioned: 'tabler-server',
invoice_generated: 'tabler-file-invoice',
}
return icons[type] ?? 'tabler-bell'
}
function resolveColor(type: string): string {
const colors: Record<string, string> = {
payment_succeeded: 'success',
payment_failed: 'error',
subscription_created: 'primary',
subscription_cancelled: 'warning',
service_provisioned: 'info',
invoice_generated: 'secondary',
}
return colors[type] ?? 'default'
}
async function fetchNotifications(): Promise<void> {
loading.value = true
try {
const response = await axios.get('/notifications')
notifications.value = response.data.notifications
unreadCount.value = response.data.unread_count
} catch {
// Silently fail
} finally {
loading.value = false
}
}
async function markAsRead(id: string): Promise<void> {
try {
await axios.post(`/notifications/${id}/read`)
const notification = notifications.value.find(n => n.id === id)
if (notification) {
notification.read = true
unreadCount.value = Math.max(0, unreadCount.value - 1)
}
} catch { /* ignore */ }
}
async function markAllAsRead(): Promise<void> {
try {
await axios.post('/notifications/read-all')
notifications.value.forEach(n => { n.read = true })
unreadCount.value = 0
} catch { /* ignore */ }
}
onMounted(() => fetchNotifications())
defineExpose({ unreadCount, fetchNotifications })
</script>
<template>
<VNavigationDrawer
:model-value="modelValue"
temporary
location="end"
width="380"
@update:model-value="emit('update:modelValue', $event)"
>
<div class="d-flex align-center justify-space-between pa-4">
<h3 class="text-h6">Notifications</h3>
<div class="d-flex align-center gap-2">
<VBtn
v-if="unreadCount > 0"
variant="text"
size="small"
color="primary"
@click="markAllAsRead"
>
Mark all read
</VBtn>
<VBtn
icon
variant="text"
size="small"
@click="emit('update:modelValue', false)"
>
<VIcon icon="tabler-x" />
</VBtn>
</div>
</div>
<VDivider />
<VList v-if="notifications.length > 0" lines="two">
<VListItem
v-for="notification in notifications"
:key="notification.id"
:class="{ 'bg-surface-variant': !notification.read }"
@click="markAsRead(notification.id)"
>
<template #prepend>
<VAvatar size="40" :color="resolveColor(notification.type)" variant="tonal">
<VIcon :icon="resolveIcon(notification.type)" size="20" />
</VAvatar>
</template>
<VListItemTitle class="text-body-2 font-weight-medium">
{{ notification.message }}
</VListItemTitle>
<VListItemSubtitle class="text-caption">
{{ notification.created_at }}
</VListItemSubtitle>
</VListItem>
</VList>
<div v-else class="d-flex flex-column align-center justify-center pa-12" style="min-height: 300px;">
<VIcon icon="tabler-bell-off" size="48" color="disabled" class="mb-4" />
<div class="text-body-1 text-medium-emphasis">No notifications</div>
</div>
</VNavigationDrawer>
</template>

39
website/resources/ts/Components/SkeletonLoader.vue Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts" setup>
interface Props {
type?: 'card' | 'table' | 'list' | 'chart' | 'text'
count?: number
}
withDefaults(defineProps<Props>(), {
type: 'card',
count: 1,
})
</script>
<template>
<div>
<template v-if="type === 'card'">
<VRow>
<VCol v-for="i in count" :key="i" cols="12" md="4">
<VSkeletonLoader type="card" />
</VCol>
</VRow>
</template>
<template v-else-if="type === 'table'">
<VSkeletonLoader type="table-heading, table-tbody" />
</template>
<template v-else-if="type === 'list'">
<VSkeletonLoader v-for="i in count" :key="i" type="list-item-avatar-two-line" class="mb-1" />
</template>
<template v-else-if="type === 'chart'">
<VSkeletonLoader type="image" height="300" />
</template>
<template v-else>
<VSkeletonLoader v-for="i in count" :key="i" type="text" class="mb-2" />
</template>
</div>
</template>

76
website/resources/ts/Components/ToastStack.vue Normal file
View File

@@ -0,0 +1,76 @@
<script lang="ts" setup>
import { useToastStore } from '@/stores/toast'
const toastStore = useToastStore()
function resolveColor(type: string): string {
const colors: Record<string, string> = {
success: 'success',
error: 'error',
warning: 'warning',
info: 'info',
}
return colors[type] ?? 'info'
}
function resolveIcon(type: string): string {
const icons: Record<string, string> = {
success: 'tabler-circle-check',
error: 'tabler-alert-circle',
warning: 'tabler-alert-triangle',
info: 'tabler-info-circle',
}
return icons[type] ?? 'tabler-info-circle'
}
</script>
<template>
<Teleport to="body">
<div class="toast-stack">
<TransitionGroup name="toast">
<VAlert
v-for="toast in toastStore.toasts"
:key="toast.id"
:type="toast.type"
:color="resolveColor(toast.type)"
variant="flat"
closable
class="toast-item mb-2"
elevation="8"
@click:close="toastStore.dismiss(toast.id)"
>
<template #prepend>
<VIcon :icon="resolveIcon(toast.type)" />
</template>
{{ toast.message }}
</VAlert>
</TransitionGroup>
</div>
</Teleport>
</template>
<style lang="scss" scoped>
.toast-stack {
position: fixed;
top: 80px;
right: 24px;
z-index: 400;
display: flex;
flex-direction: column;
max-width: 400px;
width: 100%;
pointer-events: none;
> * {
pointer-events: auto;
}
}
.toast-enter-active {
animation: slide-in-right 0.3s ease;
}
.toast-leave-active {
animation: slide-out-right 0.3s ease;
}
</style>

113
website/resources/ts/Layouts/AccountLayout.vue
View File

@@ -1,11 +1,13 @@
<script lang="ts" setup>
import { Link, usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { accountNavItems } from '@/navigation/account'
import FlashMessages from '@/Components/FlashMessages.vue'
import NotificationBell from '@/Components/NotificationBell.vue'
import ThemeSwitcher from '@/Components/ThemeSwitcher.vue'
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
import AppSidebar from '@/Components/AppSidebar.vue'
import AppTopNavbar from '@/Components/AppTopNavbar.vue'
import CommandPalette from '@/Components/CommandPalette.vue'
import NotificationPanel from '@/Components/NotificationPanel.vue'
import ToastStack from '@/Components/ToastStack.vue'
import { useToastStore } from '@/stores/toast'
interface AuthUser {
name: string
@@ -16,6 +18,7 @@ interface PageProps {
auth: { user: AuthUser | null }
domains: { marketing: string; account: string; admin: string }
impersonating: boolean
flash?: { success?: string; error?: string; info?: string }
}
const page = usePage()
@@ -23,15 +26,72 @@ const props = computed(() => page.props as unknown as PageProps)
const user = computed(() => props.value.auth?.user)
const isImpersonating = computed(() => props.value.impersonating)
const adminUrl = computed(() => `https://${props.value.domains?.admin}`)
const sidebarCollapsed = ref<boolean>(false)
const mobileOpen = ref<boolean>(false)
const notificationPanelOpen = ref<boolean>(false)
const notificationPanel = ref<InstanceType<typeof NotificationPanel> | null>(null)
const commandPalette = ref<InstanceType<typeof CommandPalette> | null>(null)
onMounted(() => {
const saved = localStorage.getItem('ezscale-account-nav-collapsed')
if (saved !== null) sidebarCollapsed.value = saved === 'true'
})
watch(sidebarCollapsed, (val) => {
localStorage.setItem('ezscale-account-nav-collapsed', String(val))
})
const toastStore = useToastStore()
watch(() => page.props, () => {
const flash = (page.props as unknown as PageProps).flash
if (flash?.success) toastStore.success(flash.success)
if (flash?.error) toastStore.error(flash.error)
if (flash?.info) toastStore.info(flash.info)
}, { immediate: true })
const paletteItems = computed(() => {
const items: Array<{ title: string; icon: string; href: string; section: string }> = []
for (const item of accountNavItems) {
if ('heading' in item) continue
if ('to' in item) {
items.push({ title: item.title, icon: item.icon || 'tabler-circle', href: item.to, section: 'Navigation' })
}
}
return items
})
</script>
<template>
<VApp>
<VerticalNavLayout :nav-items="accountNavItems">
<template #navbar>
<VSpacer />
<NotificationBell />
<ThemeSwitcher />
<div class="app-layout">
<AppSidebar
:nav-items="accountNavItems"
v-model:collapsed="sidebarCollapsed"
v-model:mobile-open="mobileOpen"
/>
<div
class="app-content-wrapper"
:style="{ marginLeft: sidebarCollapsed ? '72px' : '260px' }"
>
<AppTopNavbar
@toggle-sidebar="mobileOpen = !mobileOpen"
@open-command-palette="commandPalette?.open()"
>
<VBadge
:content="notificationPanel?.unreadCount"
:model-value="(notificationPanel?.unreadCount ?? 0) > 0"
color="error"
overlap
>
<VBtn
icon="tabler-bell"
variant="text"
size="small"
@click="notificationPanelOpen = true"
/>
</VBadge>
<span v-if="user" class="text-body-2 ms-3">
{{ user.name }}
@@ -49,16 +109,16 @@ const adminUrl = computed(() => `https://${props.value.domains?.admin}`)
Log out
</VBtn>
</Link>
</template>
</AppTopNavbar>
<!-- Impersonation Alert (Sticky) -->
<main class="app-page-content">
<!-- Impersonation Alert -->
<VAlert
v-if="isImpersonating"
type="warning"
variant="tonal"
prominent
class="mb-6"
style="position: sticky; top: 0; z-index: 1000;"
>
<VAlertTitle class="d-flex align-center justify-space-between flex-wrap gap-4">
<div class="d-flex align-center gap-2">
@@ -82,8 +142,31 @@ const adminUrl = computed(() => `https://${props.value.domains?.admin}`)
</div>
</VAlert>
<FlashMessages />
<slot />
</VerticalNavLayout>
</main>
<footer class="app-footer">
&copy; {{ new Date().getFullYear() }} EZSCALE. All rights reserved.
</footer>
</div>
<div
class="app-overlay"
:class="{ 'app-overlay--visible': mobileOpen }"
@click="mobileOpen = false"
/>
</div>
<NotificationPanel
ref="notificationPanel"
v-model="notificationPanelOpen"
/>
<CommandPalette
ref="commandPalette"
:items="paletteItems"
/>
<ToastStack />
</VApp>
</template>

116
website/resources/ts/Layouts/AdminLayout.vue
View File

@@ -1,11 +1,13 @@
<script lang="ts" setup>
import { Link, usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { adminNavItems } from '@/navigation/admin'
import FlashMessages from '@/Components/FlashMessages.vue'
import NotificationBell from '@/Components/NotificationBell.vue'
import ThemeSwitcher from '@/Components/ThemeSwitcher.vue'
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
import AppSidebar from '@/Components/AppSidebar.vue'
import AppTopNavbar from '@/Components/AppTopNavbar.vue'
import CommandPalette from '@/Components/CommandPalette.vue'
import NotificationPanel from '@/Components/NotificationPanel.vue'
import ToastStack from '@/Components/ToastStack.vue'
import { useToastStore } from '@/stores/toast'
interface AuthUser {
name: string
@@ -15,24 +17,73 @@ interface AuthUser {
interface PageProps {
auth: { user: AuthUser | null }
domains: { marketing: string; account: string; admin: string }
flash?: { success?: string; error?: string; info?: string }
}
const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const user = computed(() => props.value.auth?.user)
const accountUrl = computed(() => `https://${props.value.domains?.account}`)
const sidebarCollapsed = ref<boolean>(false)
const mobileOpen = ref<boolean>(false)
const notificationPanelOpen = ref<boolean>(false)
const notificationPanel = ref<InstanceType<typeof NotificationPanel> | null>(null)
const commandPalette = ref<InstanceType<typeof CommandPalette> | null>(null)
// Persist sidebar collapse state
onMounted(() => {
const saved = localStorage.getItem('ezscale-nav-collapsed')
if (saved !== null) sidebarCollapsed.value = saved === 'true'
})
watch(sidebarCollapsed, (val) => {
localStorage.setItem('ezscale-nav-collapsed', String(val))
})
// Flash messages to toasts
const toastStore = useToastStore()
watch(() => page.props, () => {
const flash = (page.props as unknown as PageProps).flash
if (flash?.success) toastStore.success(flash.success)
if (flash?.error) toastStore.error(flash.error)
if (flash?.info) toastStore.info(flash.info)
}, { immediate: true })
// Command palette items
const paletteItems = computed(() => {
const items: Array<{ title: string; icon: string; href: string; section: string }> = []
for (const item of adminNavItems) {
if ('heading' in item) continue
if ('to' in item) {
items.push({ title: item.title, icon: item.icon || 'tabler-circle', href: item.to, section: 'Navigation' })
}
}
return items
})
</script>
<template>
<VApp>
<VerticalNavLayout :nav-items="adminNavItems">
<template #navbar>
<div class="app-layout">
<AppSidebar
:nav-items="adminNavItems"
v-model:collapsed="sidebarCollapsed"
v-model:mobile-open="mobileOpen"
/>
<div
class="app-content-wrapper"
:style="{ marginLeft: sidebarCollapsed ? '72px' : '260px' }"
>
<AppTopNavbar
@toggle-sidebar="mobileOpen = !mobileOpen"
@open-command-palette="commandPalette?.open()"
>
<VChip size="small" color="error" variant="flat" class="me-2">
Admin
</VChip>
<VSpacer />
<a
v-if="user"
:href="accountUrl + '/dashboard'"
@@ -44,8 +95,20 @@ const accountUrl = computed(() => `https://${props.value.domains?.account}`)
</VBtn>
</a>
<NotificationBell />
<ThemeSwitcher />
<!-- Notification bell -->
<VBadge
:content="notificationPanel?.unreadCount"
:model-value="(notificationPanel?.unreadCount ?? 0) > 0"
color="error"
overlap
>
<VBtn
icon="tabler-bell"
variant="text"
size="small"
@click="notificationPanelOpen = true"
/>
</VBadge>
<span v-if="user" class="text-body-2 ms-3">
{{ user.name }}
@@ -63,10 +126,35 @@ const accountUrl = computed(() => `https://${props.value.domains?.account}`)
Log out
</VBtn>
</Link>
</template>
</AppTopNavbar>
<FlashMessages />
<main class="app-page-content">
<slot />
</VerticalNavLayout>
</main>
<footer class="app-footer">
&copy; {{ new Date().getFullYear() }} EZSCALE. All rights reserved.
</footer>
</div>
<!-- Mobile overlay -->
<div
class="app-overlay"
:class="{ 'app-overlay--visible': mobileOpen }"
@click="mobileOpen = false"
/>
</div>
<NotificationPanel
ref="notificationPanel"
v-model="notificationPanelOpen"
/>
<CommandPalette
ref="commandPalette"
:items="paletteItems"
/>
<ToastStack />
</VApp>
</template>

104
website/resources/ts/Layouts/AuthLayout.vue
View File

@@ -1,7 +1,6 @@
<script lang="ts" setup>
import { usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
import { useTheme } from 'vuetify'
import logoWhite from '@images/ezscale_logo_white.png'
interface PageProps {
@@ -11,62 +10,50 @@ interface PageProps {
const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const marketingUrl = computed(() => `https://${props.value.domains?.marketing}`)
const theme = useTheme()
const isDark = computed(() => theme.global.current.value.dark)
</script>
<template>
<VApp>
<!-- Logo (absolute top-left, above everything) -->
<!-- Logo -->
<a :href="marketingUrl" class="auth-logo d-flex align-center gap-x-3">
<img
:src="logoWhite"
alt="EZSCALE"
:class="{ 'logo-light': !isDark }"
style="height: 38px; width: auto;"
>
<img :src="logoWhite" alt="EZSCALE" style="height: 38px; width: auto;" />
</a>
<VRow
no-gutters
class="auth-wrapper bg-surface"
>
<!-- Left: Illustration -->
<VCol
md="8"
class="d-none d-md-flex"
>
<div class="position-relative bg-background w-100 me-0">
<div
class="d-flex align-center justify-center w-100 h-100"
style="padding-inline: 6.25rem;"
>
<div class="d-flex flex-column align-center justify-center" style="max-width: 500px;">
<VRow no-gutters class="auth-wrapper" style="min-height: 100vh;">
<!-- Left: Gradient Art -->
<VCol md="7" class="d-none d-md-flex">
<div class="auth-left-panel w-100 d-flex align-center justify-center" style="position: relative; overflow: hidden;">
<!-- Abstract gradient background -->
<div class="auth-gradient-bg" />
<!-- Grid pattern overlay -->
<div class="auth-grid-pattern" />
<!-- Content -->
<div class="d-flex flex-column align-center justify-center position-relative" style="z-index: 1; max-width: 480px; padding: 48px;">
<img
:src="logoWhite"
alt="EZSCALE"
class="auth-illustration mb-8"
:class="{ 'logo-light': !isDark }"
style="max-width: 360px; height: auto;"
class="mb-8"
style="max-width: 200px; height: auto;"
>
<p class="text-body-1 text-center mb-0" style="max-width: 400px;">
<p class="text-body-1 text-center mb-0" style="color: rgba(255,255,255,0.7); max-width: 400px;">
Deploy VPS, Dedicated Servers, Web Hosting, and Game Servers in minutes.
Enterprise-grade infrastructure made simple.
</p>
<div class="d-flex ga-8 mt-8">
<div class="text-center">
<div class="text-h5 font-weight-bold text-primary">99.99%</div>
<div class="text-caption">Uptime</div>
<div class="text-h5 font-weight-bold" style="color: #3b82f6;">99.99%</div>
<div class="text-caption" style="color: rgba(255,255,255,0.5);">Uptime</div>
</div>
<div class="text-center">
<div class="text-h5 font-weight-bold text-primary">50+</div>
<div class="text-caption">Locations</div>
<div class="text-h5 font-weight-bold" style="color: #3b82f6;">50+</div>
<div class="text-caption" style="color: rgba(255,255,255,0.5);">Locations</div>
</div>
<div class="text-center">
<div class="text-h5 font-weight-bold text-primary">24/7</div>
<div class="text-caption">Support</div>
</div>
<div class="text-h5 font-weight-bold" style="color: #3b82f6;">24/7</div>
<div class="text-caption" style="color: rgba(255,255,255,0.5);">Support</div>
</div>
</div>
</div>
@@ -74,16 +61,8 @@ const isDark = computed(() => theme.global.current.value.dark)
</VCol>
<!-- Right: Auth Form -->
<VCol
cols="12"
md="4"
class="auth-card-v2 d-flex align-center justify-center"
>
<VCard
flat
:max-width="500"
class="mt-12 mt-sm-0 pa-6"
>
<VCol cols="12" md="5" class="d-flex align-center justify-center">
<VCard flat :max-width="440" class="pa-6 w-100" style="max-width: 440px;">
<slot />
</VCard>
</VCol>
@@ -91,8 +70,35 @@ const isDark = computed(() => theme.global.current.value.dark)
</VApp>
</template>
<style lang="scss">
.logo-light {
filter: brightness(0) saturate(100%);
<style lang="scss" scoped>
.auth-logo {
position: absolute;
top: 24px;
left: 32px;
z-index: 10;
text-decoration: none;
}
.auth-left-panel {
background: #0f172a;
}
.auth-gradient-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(29, 78, 216, 0.3) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 50%);
}
.auth-grid-pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
</style>

287
website/resources/ts/Layouts/MarketingLayout.vue
View File

@@ -8,7 +8,6 @@ import logoWhite from '@images/ezscale_logo_white.png'
const theme = useTheme()
const isDark = computed(() => theme.global.current.value.dark)
const isScrolled = ref(false)
function handleScroll(): void {
@@ -25,20 +24,14 @@ onUnmounted(() => {
})
const currentPath = computed<string>(() => {
if (typeof window !== 'undefined') {
return window.location.pathname
}
if (typeof window !== 'undefined') return window.location.pathname
return '/'
})
const newsletterForm = useForm({
email: '',
})
const newsletterForm = useForm({ email: '' })
const newsletterSuccess = ref(false)
function subscribeNewsletter(): void {
// For now, just show success state (no backend endpoint yet)
if (newsletterForm.email) {
newsletterSuccess.value = true
setTimeout(() => {
@@ -67,7 +60,6 @@ const footerLinks = {
{ title: 'About', href: '/about' },
{ title: 'Pricing', href: '/pricing' },
{ title: 'Contact', href: '/contact' },
{ title: 'Blog', href: '/blog' },
],
support: [
{ title: 'Help Center', href: 'https://ezscale.support' },
@@ -84,32 +76,36 @@ const footerLinks = {
const socialLinks = [
{ title: 'twitter', icon: 'tabler-brand-twitter-filled', href: '#' },
{ title: 'facebook', icon: 'tabler-brand-facebook-filled', href: '#' },
{ title: 'github', icon: 'tabler-brand-github-filled', href: '#' },
{ title: 'discord', icon: 'tabler-brand-discord-filled', href: '#' },
{ title: 'github', icon: 'tabler-brand-github-filled', href: '#' },
]
const mobileMenuOpen = ref(false)
</script>
<template>
<VApp>
<!-- Navbar -->
<VAppBar
:elevation="isScrolled ? 4 : 0"
:elevation="0"
:class="isScrolled ? 'navbar-scrolled' : 'navbar-transparent'"
class="marketing-navbar"
flat
>
<VContainer class="d-flex align-center">
<a href="/" class="d-inline-flex align-center">
<img
:src="logoWhite"
alt="EZSCALE"
:class="{ 'logo-light': !isDark }"
:class="{ 'logo-light': !isDark && isScrolled }"
style="height: 32px; width: auto;"
>
</a>
<VSpacer />
<div class="d-flex align-center ga-1">
<!-- Desktop nav -->
<div class="d-none d-md-flex align-center ga-1">
<template v-for="item in marketingNavItems" :key="item.title">
<VMenu v-if="item.children" open-on-hover>
<template #activator="{ props: menuProps }">
@@ -118,7 +114,6 @@ const socialLinks = [
<VIcon icon="tabler-chevron-down" end size="small" />
</VBtn>
</template>
<VList>
<VListItem
v-for="child in item.children"
@@ -153,49 +148,80 @@ const socialLinks = [
<div class="d-flex align-center ga-2">
<ThemeSwitcher />
<a :href="accountUrl + '/login'" class="text-decoration-none">
<VBtn variant="text" size="small">
Login
</VBtn>
<a :href="accountUrl + '/login'" class="text-decoration-none d-none d-sm-inline">
<VBtn variant="text" size="small">Login</VBtn>
</a>
<a :href="accountUrl + '/register'" class="text-decoration-none">
<VBtn variant="flat" size="small" color="primary">
Sign Up
</VBtn>
<a :href="accountUrl + '/register'" class="text-decoration-none d-none d-sm-inline">
<VBtn variant="flat" size="small" color="primary">Sign Up</VBtn>
</a>
<!-- Mobile hamburger -->
<VBtn
icon
variant="text"
size="small"
class="d-md-none"
@click="mobileMenuOpen = true"
>
<VIcon icon="tabler-menu-2" />
</VBtn>
</div>
</VContainer>
</VAppBar>
<!-- Mobile slide-in menu -->
<VNavigationDrawer
v-model="mobileMenuOpen"
temporary
location="end"
width="280"
>
<VList>
<template v-for="item in marketingNavItems" :key="item.title">
<template v-if="item.children">
<VListItem
v-for="child in item.children"
:key="child.href"
:href="child.href"
>
<template #prepend>
<VIcon v-if="child.icon" :icon="child.icon" />
</template>
<VListItemTitle>{{ child.title }}</VListItemTitle>
</VListItem>
</template>
<VListItem v-else :href="item.href">
<VListItemTitle>{{ item.title }}</VListItemTitle>
</VListItem>
</template>
<VDivider class="my-2" />
<VListItem :href="accountUrl + '/login'">
<VListItemTitle>Login</VListItemTitle>
</VListItem>
<VListItem :href="accountUrl + '/register'">
<VListItemTitle class="text-primary font-weight-bold">Sign Up</VListItemTitle>
</VListItem>
</VList>
</VNavigationDrawer>
<VMain>
<slot />
</VMain>
<!-- Footer -->
<div class="footer">
<div class="footer-top pt-11">
<!-- Mega Footer -->
<footer class="mega-footer">
<VContainer>
<VRow>
<!-- Logo + Description + Newsletter -->
<VCol cols="12" md="4">
<div
class="mb-4"
:class="$vuetify.display.smAndDown ? 'w-100' : 'w-75'"
>
<div class="mb-4" :class="$vuetify.display.smAndDown ? 'w-100' : 'w-75'">
<div class="d-flex align-center mb-6">
<img
:src="logoWhite"
alt="EZSCALE"
style="height: 32px; width: auto;"
>
<img :src="logoWhite" alt="EZSCALE" style="height: 32px; width: auto;" />
</div>
<div class="text-white-variant mb-6">
<div style="color: rgba(255,255,255,0.5);" class="mb-6 text-body-2">
High-performance VPS, dedicated servers, and hosting solutions with 24/7 support and enterprise-grade infrastructure.
</div>
<VForm class="subscribe-form d-flex align-center" @submit.prevent="subscribeNewsletter">
<VForm class="d-flex" @submit.prevent="subscribeNewsletter">
<VTextField
v-model="newsletterForm.email"
:label="newsletterSuccess ? 'Subscribed!' : 'Subscribe to newsletter'"
@@ -205,11 +231,14 @@ const socialLinks = [
hide-details
type="email"
:color="newsletterSuccess ? 'success' : undefined"
class="flex-grow-1"
style="border-top-right-radius: 0; border-bottom-right-radius: 0;"
/>
<VBtn
type="submit"
class="align-self-end rounded-s-0"
:color="newsletterSuccess ? 'success' : undefined"
class="rounded-s-0"
style="height: 40px;"
:color="newsletterSuccess ? 'success' : 'primary'"
>
{{ newsletterSuccess ? 'Done!' : 'Subscribe' }}
</VBtn>
@@ -217,112 +246,42 @@ const socialLinks = [
</div>
</VCol>
<!-- Products -->
<VCol md="2" sm="4" xs="6">
<div class="footer-links">
<h6 class="footer-title text-h6 mb-6">
Products
</h6>
<ul style="list-style: none; padding: 0;">
<li
v-for="link in footerLinks.products"
:key="link.href"
class="mb-4"
>
<a
:href="link.href"
class="text-white-variant"
>
<div class="footer-title">Products</div>
<a v-for="link in footerLinks.products" :key="link.href" :href="link.href" class="footer-link">
{{ link.title }}
</a>
</li>
</ul>
</div>
</VCol>
<!-- Company -->
<VCol md="2" sm="4" xs="6">
<div class="footer-links">
<h6 class="footer-title text-h6 mb-6">
Company
</h6>
<ul style="list-style: none; padding: 0;">
<li
v-for="link in footerLinks.company"
:key="link.href"
class="mb-4"
>
<a
:href="link.href"
class="text-white-variant"
>
<div class="footer-title">Company</div>
<a v-for="link in footerLinks.company" :key="link.href" :href="link.href" class="footer-link">
{{ link.title }}
</a>
</li>
</ul>
</div>
</VCol>
<!-- Support -->
<VCol md="2" sm="4" xs="6">
<div class="footer-links">
<h6 class="footer-title text-h6 mb-6">
Support
</h6>
<ul style="list-style: none; padding: 0;">
<li
v-for="link in footerLinks.support"
:key="link.href"
class="mb-4"
>
<a
:href="link.href"
class="text-white-variant"
>
<div class="footer-title">Support</div>
<a v-for="link in footerLinks.support" :key="link.href" :href="link.href" class="footer-link">
{{ link.title }}
</a>
</li>
</ul>
</div>
</VCol>
<!-- Legal -->
<VCol md="2" sm="4" xs="6">
<div class="footer-links">
<h6 class="footer-title text-h6 mb-6">
Legal
</h6>
<ul style="list-style: none; padding: 0;">
<li
v-for="link in footerLinks.legal"
:key="link.href"
class="mb-4"
>
<a
:href="link.href"
class="text-white-variant"
>
<div class="footer-title">Legal</div>
<a v-for="link in footerLinks.legal" :key="link.href" :href="link.href" class="footer-link">
{{ link.title }}
</a>
</li>
</ul>
</div>
</VCol>
</VRow>
</VContainer>
</div>
<!-- Footer Line -->
<div class="footer-line w-100">
<VContainer>
<div class="d-flex justify-space-between flex-wrap gap-y-5 align-center">
<div class="text-body-1 text-white-variant text-wrap me-4">
<div class="footer-bottom d-flex justify-space-between flex-wrap gap-y-4 align-center">
<div class="text-body-2" style="color: rgba(255,255,255,0.4);">
&copy; {{ new Date().getFullYear() }}
<span class="font-weight-bold ms-1 text-white">EZSCALE</span>,
<span class="font-weight-bold ms-1" style="color: rgba(255,255,255,0.7);">EZSCALE</span>,
All rights reserved.
</div>
<div class="d-flex gap-x-6">
<div class="d-flex gap-x-4">
<a
v-for="item in socialLinks"
:key="item.title"
@@ -330,17 +289,12 @@ const socialLinks = [
target="_blank"
rel="noopener noreferrer"
>
<VIcon
:icon="item.icon"
size="16"
color="white"
/>
<VIcon :icon="item.icon" size="16" color="white" />
</a>
</div>
</div>
</VContainer>
</div>
</div>
</footer>
</VApp>
</template>
@@ -349,67 +303,14 @@ const socialLinks = [
transition: all 0.3s ease;
}
.navbar-transparent {
background: transparent !important;
}
.navbar-scrolled {
backdrop-filter: blur(10px);
}
.footer-title {
color: rgba(255, 255, 255, 92%);
}
.footer-top {
border-radius: 60px 60px 0 0;
background-color: #2f3349;
background-size: cover;
color: #fff;
}
.footer-links {
a {
text-decoration: none;
&:hover {
color: #fff !important;
}
}
}
.footer-line {
background: #282c3e;
}
.text-white-variant {
color: rgba(255, 255, 255, 70%);
}
</style>
<style lang="scss">
.subscribe-form {
.v-label {
color: rgba(225, 222, 245, 90%) !important;
}
.v-field {
border-end-end-radius: 0;
border-end-start-radius: 10px;
border-start-end-radius: 0;
border-start-start-radius: 10px;
input.v-field__input::placeholder {
color: rgba(225, 222, 245, 40%) !important;
}
input.v-field__input {
color: rgba(255, 255, 255, 78%);
}
}
}
.footer {
@media (min-width: 600px) and (max-width: 960px) {
.v-container {
padding-inline: 2rem !important;
}
}
background: rgba(var(--v-theme-surface), 0.85) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.06);
}
</style>

12
website/resources/ts/navigation/admin.ts
View File

@@ -1,11 +1,13 @@
import type { VerticalNavItems } from '@layouts/types'
export const adminNavItems: VerticalNavItems = [
{ heading: 'Dashboard' },
{ title: 'Analytics', to: '/dashboard', icon: 'tabler-smart-home' },
{ heading: 'Overview' },
{ title: 'Dashboard', to: '/dashboard', icon: 'tabler-smart-home' },
{ heading: 'Management' },
{ heading: 'Customers' },
{ title: 'Customers', to: '/customers', icon: 'tabler-users' },
{ heading: 'Infrastructure' },
{ title: 'Plans', to: '/plans', icon: 'tabler-package' },
{ title: 'Services', to: '/services', icon: 'tabler-server' },
{ title: 'Orders', to: '/orders', icon: 'tabler-shopping-cart' },
@@ -13,11 +15,13 @@ export const adminNavItems: VerticalNavItems = [
{ heading: 'Billing' },
{ title: 'Invoices', to: '/invoices', icon: 'tabler-file-invoice' },
{ title: 'Coupons', to: '/coupons', icon: 'tabler-discount-2' },
{ title: 'Tax Rates', to: '/tax-rates', icon: 'tabler-receipt-tax' },
{ heading: 'Support' },
{ title: 'Tickets', to: '/tickets', icon: 'tabler-message-circle' },
{ heading: 'System' },
{ title: 'Audit Logs', to: '/audit-logs', icon: 'tabler-clipboard-list' },
{ title: 'Settings', to: '/settings', icon: 'tabler-settings' },
{ title: 'Email Templates', to: '/email-templates', icon: 'tabler-mail-cog' },
{ title: 'Audit Logs', to: '/audit-logs', icon: 'tabler-clipboard-list' },
]

2
website/resources/ts/navigation/marketing.ts
View File

@@ -20,10 +20,10 @@ export const marketingNavItems: MarketingNavItem[] = [
{ title: 'Dedicated Servers', href: '/dedicated-servers', description: 'Bare metal power', icon: 'tabler-server-2' },
{ title: 'Web Hosting', href: '/web-hosting', description: 'Managed web hosting', icon: 'tabler-world' },
{ title: 'Game Servers', href: '/game-servers', description: 'Low-latency game hosting', icon: 'tabler-device-gamepad-2' },
{ title: 'Battlefield ACP', href: '/battlefield-acp', description: 'BF server admin panel', icon: 'tabler-military-rank' },
],
},
{ title: 'Pricing', href: '/pricing' },
{ title: 'Developers', href: '/api-docs' },
{ title: 'About', href: '/about' },
{ title: 'Contact', href: '/contact' },
]

36
website/resources/ts/stores/toast.ts Normal file
View File

@@ -0,0 +1,36 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export interface Toast {
id: number
message: string
type: 'success' | 'error' | 'warning' | 'info'
timeout?: number
}
let nextId = 0
export const useToastStore = defineStore('toast', () => {
const toasts = ref<Toast[]>([])
function show(message: string, type: Toast['type'] = 'info', timeout = 5000): void {
const id = nextId++
toasts.value.push({ id, message, type, timeout })
if (timeout > 0) {
setTimeout(() => dismiss(id), timeout)
}
}
function dismiss(id: number): void {
const index = toasts.value.findIndex(t => t.id === id)
if (index > -1) toasts.value.splice(index, 1)
}
function success(message: string): void { show(message, 'success') }
function error(message: string): void { show(message, 'error') }
function warning(message: string): void { show(message, 'warning') }
function info(message: string): void { show(message, 'info') }
return { toasts, show, dismiss, success, error, warning, info }
})