Nodarx/dashboard
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
root
2025-12-21 09:58:23 -05:00
committed by Sebastian Krupinski
commit 9db14ce44b
20 changed files with 2710 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
.gitignore vendored Normal file
View File

@@ -0,0 +1,29 @@
# Frontend development
node_modules/
*.local
.env.local
.env.*.local
.cache/
.vite/
.temp/
.tmp/
# Frontend build
/static/
# Backend development
/lib/vendor/
coverage/
phpunit.xml.cache
.phpunit.result.cache
.php-cs-fixer.cache
.phpstan.cache
.phpactor/
# Editors
.DS_Store
.vscode/
.idea/
# Logs
*.log

9
composer.json Normal file
View File

@@ -0,0 +1,9 @@
{
"name": "ktxm/dashboard",
"type": "project",
"autoload": {
"psr-4": {
"KTXM\\Dashboard\\": "lib/"
}
}
}

65
lib/Module.php Normal file
View File

@@ -0,0 +1,65 @@
<?php
namespace KTXM\Dashboard;
use KTXF\Module\ModuleBrowserInterface;
use KTXF\Module\ModuleInstanceAbstract;
/**
* Dashboard Module
*/
class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
{
public function __construct()
{ }
public function handle(): string
{
return 'dashboard';
}
public function label(): string
{
return 'Dashboard';
}
public function author(): string
{
return 'Ktrix';
}
public function description(): string
{
return 'User dashboard module for Ktrix - provides widgets, user management, and system overview';
}
public function version(): string
{
return '1.0.0';
}
public function permissions(): array
{
return [
'dashboard' => [
'label' => 'Access Dashboard',
'description' => 'View and access the dashboard module',
'group' => 'Dashboard'
],
];
}
public function registerBI(): array {
return [
'handle' => $this->handle(),
'namespace' => 'Dashboard',
'version' => $this->version(),
'label' => $this->label(),
'author' => $this->author(),
'description' => $this->description(),
'boot' => 'static/module.mjs',
];
}
}

1800
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

35
package.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "dashboard",
"description": "Ktrix Dashboard Module",
"version": "0.0.1",
"private": true,
"license": "AGPL-3.0-or-later",
"author": "Sebastian Krupinski",
"type": "module",
"scripts": {
"build": "vite build --mode production --config vite.config.ts",
"dev": "vite build --mode development --config vite.config.ts",
"watch": "vite build --mode development --watch --config vite.config.ts",
"typecheck": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"@mdi/js": "^7.4.47",
"echarts": "^6.0.0",
"pinia": "^2.3.0",
"vue": "^3.5.13",
"vue-echarts": "^8.0.0",
"vue-router": "^4.5.0",
"vuetify": "^3.7.6"
},
"devDependencies": {
"@types/node": "^22.10.2",
"@vitejs/plugin-vue": "^5.2.1",
"@vue/tsconfig": "^0.7.0",
"sass": "^1.77.1",
"typescript": "^5.7.2",
"vite": "^6.0.6",
"vite-plugin-vuetify": "2.0.4",
"vue-tsc": "^2.2.10"
}
}

90
src/components/ChartBar.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import type { ComposeOption } from 'echarts/core'
import type { BarSeriesOption } from 'echarts/charts'
import type { GridComponentOption, TooltipComponentOption, TitleComponentOption } from 'echarts/components'
type ECOption = ComposeOption<
BarSeriesOption | GridComponentOption | TooltipComponentOption | TitleComponentOption
>
const chartRef = ref<HTMLElement>()
const isReady = ref(false)
const option: ECOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
},
],
series: [
{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220],
},
{
name: 'pageB',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [80, 52, 200, 334, 390, 330, 220],
},
{
name: 'pageC',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 52, 200, 334, 390, 330, 220],
},
],
}
onMounted(async () => {
await nextTick()
// Simple delay to let DOM settle, then render
setTimeout(() => {
console.log('ChartBar: rendering chart')
isReady.value = true
}, 500)
})
</script>
<template>
<div ref="chartRef" class="chart-container">
<v-chart
v-if="isReady"
:option="option"
:style="{ width: '100%', height: '100%' }"
autoresize
/>
</div>
</template>

123
src/components/ChartLine.vue Normal file
View File

@@ -0,0 +1,123 @@
<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import type { ComposeOption } from 'echarts/core'
import type { LineSeriesOption } from 'echarts/charts'
import type { GridComponentOption, TooltipComponentOption, VisualMapComponentOption } from 'echarts/components'
type ECOption = ComposeOption<
LineSeriesOption | GridComponentOption | TooltipComponentOption | VisualMapComponentOption
>
const chartRef = ref<HTMLElement>()
const isReady = ref(false)
const data = [
['2022-06-05', 116],
['2022-06-06', 129],
['2022-06-07', 135],
['2022-06-08', 86],
['2022-06-09', 73],
['2022-06-10', 85],
['2022-06-11', 73],
['2022-06-12', 68],
['2022-06-13', 92],
['2022-06-14', 130],
['2022-06-15', 245],
['2022-06-16', 139],
['2022-06-17', 115],
['2022-06-18', 111],
['2022-06-19', 309],
['2022-06-20', 206],
['2022-06-21', 137],
['2022-06-22', 128],
['2022-06-23', 85],
['2022-06-24', 94],
['2022-06-25', 71],
['2022-06-26', 106],
['2022-06-27', 84],
['2022-06-28', 93],
['2022-06-29', 85],
['2022-06-30', 73],
['2022-07-01', 83],
['2022-07-02', 125],
['2022-07-03', 107],
['2022-07-04', 82],
['2022-07-05', 44],
['2022-07-06', 72],
['2022-07-07', 106],
['2022-07-08', 107],
['2022-07-09', 66],
['2022-07-10', 91],
['2022-07-11', 92],
['2022-07-12', 113],
['2022-07-13', 107],
['2022-07-14', 131],
['2022-07-15', 111],
['2022-07-16', 64],
['2022-07-17', 69],
['2022-07-18', 88],
['2022-07-19', 77],
['2022-07-20', 83],
['2022-07-21', 111],
['2022-07-22', 57],
['2022-07-23', 55],
['2022-07-24', 60],
]
const option: ECOption = {
backgroundColor: 'transparent',
dataset: { source: data },
visualMap: {
show: false,
type: 'continuous',
min: 0,
max: 400,
},
tooltip: {
trigger: 'axis',
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
},
xAxis: {
type: 'time',
},
yAxis: {
type: 'value',
},
series: [
{
name: 'value',
type: 'line',
showSymbol: false,
lineStyle: {
width: 4,
},
},
],
}
onMounted(async () => {
await nextTick()
// Simple delay to let DOM settle, then render
setTimeout(() => {
console.log('ChartLine: rendering chart')
isReady.value = true
}, 500)
})
</script>
<template>
<div ref="chartRef" class="chart-container">
<v-chart
v-if="isReady"
:option="option"
:style="{ width: '100%', height: '100%' }"
autoresize
/>
</div>
</template>

63
src/components/ChartPie.vue Normal file
View File

@@ -0,0 +1,63 @@
<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import type { ComposeOption } from 'echarts/core'
import type { PieSeriesOption } from 'echarts/charts'
import type { LegendComponentOption, TitleComponentOption } from 'echarts/components'
type ECOption = ComposeOption<
PieSeriesOption | LegendComponentOption | TitleComponentOption
>
const chartRef = ref<HTMLElement>()
const isReady = ref(false)
const option: ECOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
},
legend: {
left: 'center',
bottom: '10',
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
},
series: [
{
name: 'WEEKLY WRITE ARTICLES',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '38%'],
data: [
{ value: 320, name: 'Industries' },
{ value: 240, name: 'Technology' },
{ value: 149, name: 'Forex' },
{ value: 100, name: 'Gold' },
{ value: 59, name: 'Forecasts' },
],
animationEasing: 'cubicInOut',
},
],
}
onMounted(async () => {
await nextTick()
// Simple delay to let DOM settle, then render
setTimeout(() => {
console.log('ChartPie: rendering chart')
isReady.value = true
}, 500)
})
</script>
<template>
<div ref="chartRef" class="chart-container">
<v-chart
v-if="isReady"
:option="option"
:style="{ width: '100%', height: '100%' }"
autoresize
/>
</div>
</template>

93
src/components/ChartRadar.vue Normal file
View File

@@ -0,0 +1,93 @@
<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import type { ComposeOption } from 'echarts/core'
import type { RadarSeriesOption } from 'echarts/charts'
import type { LegendComponentOption, TitleComponentOption } from 'echarts/components'
type ECOption = ComposeOption<
RadarSeriesOption | LegendComponentOption | TitleComponentOption
>
const chartRef = ref<HTMLElement>()
const isReady = ref(false)
const option: ECOption = {
backgroundColor: 'transparent',
radar: {
radius: '66%',
center: ['50%', '42%'],
splitNumber: 8,
splitArea: {
areaStyle: {
color: 'rgba(127,95,132,.3)',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: 'Sales' },
{ name: 'Administration' },
{ name: 'Technology' },
{ name: 'Customer Support' },
{ name: 'Development' },
{ name: 'Marketing' },
],
},
legend: {
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{
value: [5000, 7000, 12000, 11000, 15000, 14000],
name: 'Allocated Budget',
},
{
value: [4000, 9000, 15000, 15000, 13000, 11000],
name: 'Expected Spending',
},
{
value: [5500, 5000, 12000, 15000, 8000, 6000],
name: 'Actual Spending',
},
],
},
],
}
onMounted(async () => {
await nextTick()
// Simple delay to let DOM settle, then render
setTimeout(() => {
console.log('ChartRadar: rendering chart')
isReady.value = true
}, 500)
})
</script>
<template>
<div ref="chartRef" class="chart-container">
<v-chart
v-if="isReady"
:option="option"
:style="{ width: '100%', height: '100%' }"
autoresize
/>
</div>
</template>

82
src/components/StatsCard.vue Normal file
View File

@@ -0,0 +1,82 @@
<script setup lang="ts">
withDefaults(
defineProps<{
icon: string
iconClass?: string
color: string
title: string
value: number | null
unit?: string
formatter?: (v: number) => string
}>(),
{
iconClass: '',
value: null,
unit: '',
formatter: (v: number) => v.toString(),
},
)
</script>
<template>
<v-card class="stats-card" v-bind="$attrs">
<v-icon class="stats-icon" :color="color" :class="iconClass" :icon="icon" />
<div class="card-title ml-auto text-right">
<span
class="card-title--name font-weight-bold text--darken-2"
:class="`${color}--text`"
v-text="title"
/>
<h3
class="font-weight-regular text--primary d-inline-block ml-2"
style="font-size: 18px"
>
{{ value != null ? formatter(value) : '' }}
<small v-if="unit">{{ unit }}</small>
</h3>
<v-divider />
</div>
<div
class="v-alert__border v-alert__border--top v-alert__border--has-color"
:class="color"
/>
<div
v-if="$slots.footer"
class="grey--text text-right stats-footer text-caption"
>
<slot name="footer" />
</div>
</v-card>
</template>
<style lang="scss" scoped>
.stats-card {
padding: 5px;
padding-top: 10px;
.card-title {
width: fit-content;
.card-title--name {
display: inline-block;
backdrop-filter: blur(3px);
}
}
.caption {
font-size: 12px;
letter-spacing: 0;
}
.stats-icon {
position: absolute;
opacity: 0.3;
:deep(svg) {
height: 35px;
}
}
.stats-footer {
:deep(span) {
display: inline-block;
font-size: 12px !important;
letter-spacing: 0 !important;
}
}
}
</style>

15
src/integrations.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { ModuleIntegrations } from "@KTXC/types/moduleTypes";
const integrations: ModuleIntegrations = {
app_menu: [
{
id: 'home',
label: 'Dashboard',
path: '/',
icon: 'mdi-view-dashboard-outline',
priority: 1,
},
],
};
export default integrations;

56
src/main.ts Normal file
View File

@@ -0,0 +1,56 @@
import routes from '@/routes'
import integrations from '@/integrations'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'
import type { App as Vue } from 'vue'
import {
LineChart,
BarChart,
PieChart,
RadarChart,
EffectScatterChart,
ScatterChart,
} from 'echarts/charts'
import {
LegendComponent,
TooltipComponent,
GridComponent,
TitleComponent,
VisualMapComponent,
DataZoomComponent,
ToolboxComponent,
MarkPointComponent,
DatasetComponent,
} from 'echarts/components'
// CSS filename is injected by the vite plugin at build time
export const css = ['__CSS_FILENAME_PLACEHOLDER__']
export { routes, integrations }
export default {
install(app: Vue) {
use([
LineChart,
BarChart,
PieChart,
RadarChart,
EffectScatterChart,
ScatterChart,
CanvasRenderer,
LegendComponent,
TooltipComponent,
GridComponent,
TitleComponent,
VisualMapComponent,
DataZoomComponent,
ToolboxComponent,
MarkPointComponent,
DatasetComponent,
])
app.component('VChart', VChart)
}
}

9
src/routes.ts Normal file
View File

@@ -0,0 +1,9 @@
const routes = [
{
name: 'home',
path: '/',
component: () => import('@/views/Main.vue'),
},
];
export default routes;

1
src/style.css Normal file
View File

@@ -0,0 +1 @@
/* dashboard module styles */

131
src/views/Main.vue Normal file
View File

@@ -0,0 +1,131 @@
<script setup lang="ts">
import { ref } from 'vue'
import ChartRadar from '@/components/ChartRadar.vue'
import ChartLine from '@/components/ChartLine.vue'
import ChartBar from '@/components/ChartBar.vue'
import ChartPie from '@/components/ChartPie.vue'
import StatsCard from '@/components/StatsCard.vue'
// Import MDI icons
import { mdiWeb, mdiRss, mdiSend, mdiBell, mdiGithub, mdiCurrencyCny } from '@mdi/js'
const stats = ref([
{
icon: mdiWeb,
title: 'Bandwidth',
value: 230,
unit: 'GB',
color: 'primary',
caption: 'Up: 100, Down: 130',
},
{
icon: mdiRss,
title: 'Submissions',
value: 108,
color: 'primary',
caption: 'Too young, too naive',
},
{
icon: mdiSend,
title: 'Requests',
value: 1238,
color: 'warning',
caption: 'Limit: 1320',
},
{
icon: mdiBell,
title: 'Messages',
value: 9042,
color: 'primary',
caption: 'Warnings: 300, erros: 47',
},
{
icon: mdiGithub,
title: 'Github Stars',
value: NaN,
color: 'grey',
caption: 'API has no response',
},
{
icon: mdiCurrencyCny,
title: 'Total Fee',
value: 2300,
unit: '￥',
color: 'error',
caption: 'Upper Limit: 2000 ￥',
},
])
</script>
<template>
<v-container fluid>
<v-row>
<v-col
v-for="stat in stats"
:key="stat.title"
cols="12"
sm="6"
md="4"
lg="2"
>
<StatsCard
:title="stat.title"
:unit="stat.unit"
:color="stat.color"
:icon="stat.icon"
:value="stat.value"
>
<template #footer>
{{ stat.caption }}
</template>
</StatsCard>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6" lg="12">
<v-card class="pa-2 chart-card">
<ChartLine />
</v-card>
</v-col>
<v-col cols="12" md="6" lg="4">
<v-card class="pa-2 chart-card">
<ChartRadar />
</v-card>
</v-col>
<v-col cols="12" md="6" lg="4">
<v-card class="pa-2 chart-card">
<ChartPie />
</v-card>
</v-col>
<v-col cols="12" md="6" lg="4">
<v-card class="pa-2 chart-card">
<ChartBar />
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<style scoped lang="scss">
.chart-card {
height: 350px;
display: flex;
flex-direction: column;
:deep(.chart-container) {
flex: 1;
width: 100%;
min-height: 300px;
position: relative;
}
:deep(.v-chart) {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
}
</style>

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

19
tsconfig.app.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"paths": {
"@/*": ["./src/*"],
"@KTXC/*": ["../../core/src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

7
tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

25
tsconfig.node.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

57
vite.config.ts Normal file
View File

@@ -0,0 +1,57 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
{
name: 'inject-css-filename',
enforce: 'post',
generateBundle(_options, bundle) {
const cssFile = Object.keys(bundle).find(name => name.endsWith('.css'))
if (!cssFile) return
for (const fileName of Object.keys(bundle)) {
const chunk = bundle[fileName]
if (chunk.type === 'chunk' && chunk.code.includes('__CSS_FILENAME_PLACEHOLDER__')) {
chunk.code = chunk.code.replace(/__CSS_FILENAME_PLACEHOLDER__/g, `static/${cssFile}`)
console.log(`Injected CSS filename "static/${cssFile}" into ${fileName}`)
}
}
}
}
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@KTXC': path.resolve(__dirname, '../../core/src')
},
},
define: {
'process.env': {},
'process': undefined,
},
build: {
outDir: 'static',
emptyOutDir: true,
sourcemap: true,
lib: {
entry: path.resolve(__dirname, 'src/main.ts'),
formats: ['es'],
fileName: () => 'module.mjs',
},
rollupOptions: {
external: ['vue', 'vue-router', 'pinia'],
output: {
assetFileNames: (assetInfo) => {
if (assetInfo.name?.endsWith('.css')) {
return 'dashboard-[hash].css'
}
return '[name]-[hash][extname]'
}
}
},
},
})