Skip to content

Commit e9559fe

Browse files
hotlonghotlong
committed
Revamp dashboard UI and update build configs
Redesigned the dashboard to focus on applications, added an AppCard component, and updated sidebar navigation and user info display. Removed project overview and settings sections. Adjusted nest-cli.json to remove views outDir and set rootDir in tsconfig.json for improved build structure.
1 parent a2245ae commit e9559fe

File tree

5 files changed

+95
-75
lines changed

5 files changed

+95
-75
lines changed

‎packages/server/nest-cli.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
"assets": [
88
{
99
"include": "views/**/*",
10-
"outDir": "dist/src/views",
1110
"watchAssets": true
1211
}
1312
]

‎packages/server/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
"version": "0.2.0",
44
"private": true,
55
"scripts": {
6-
"build": "tsc -b",
6+
"build": "nest build",
7+
"dev": "nest start --watch",
78
"start": "nest start",
8-
"start:dev": "nest start --watch",
9+
"start:debug": "nest start --debug --watch",
10+
"start:prod": "node dist/main",
911
"test": "echo \"No tests specified\" && exit 0"
1012
},
1113
"dependencies": {

‎packages/server/src/main.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,22 @@ import { NestFactory } from '@nestjs/core';
22
import { AppModule } from './app.module';
33
import { NestExpressApplication } from '@nestjs/platform-express';
44
import { Liquid } from 'liquidjs';
5-
import { join } from 'path';
5+
import { join, resolve } from 'path';
6+
import { existsSync } from 'fs';
67

78
async function bootstrap() {
89
const app = await NestFactory.create<NestExpressApplication>(AppModule);
910

10-
const viewsPath = join(__dirname, 'views');
11-
console.log('Views path:', viewsPath);
11+
// Try to find views directory in likely locations
12+
let viewsPath = join(__dirname, 'views');
13+
if (!existsSync(viewsPath)) {
14+
const upOne = join(__dirname, '..', 'views');
15+
if (existsSync(upOne)) {
16+
viewsPath = upOne;
17+
}
18+
}
19+
20+
console.log('Views path resolved to:', viewsPath);
1221

1322
const engine = new Liquid({
1423
root: viewsPath,

‎packages/server/src/views/dashboard.liquid‎

Lines changed: 75 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,28 @@
1717
);
1818
}
1919

20+
function AppCard({ name, description, icon, version, link }) {
21+
return (
22+
<Card className="flex flex-col h-full hover:shadow-md transition-all-custom cursor-pointer group">
23+
<div className="flex justify-between items-start mb-4">
24+
<div className="w-12 h-12 rounded-xl bg-gray-50 border border-gray-100 flex items-center justify-center text-2xl shadow-sm group-hover:scale-105 transition-transform duration-300">
25+
{icon}
26+
</div>
27+
{version && <span className="px-2 py-1 bg-gray-100 text-gray-500 text-[10px] font-bold uppercase tracking-wider rounded-md">{version}</span>}
28+
</div>
29+
<h3 className="text-lg font-bold text-gray-900 mb-1">{name}</h3>
30+
<p className="text-sm text-gray-500 line-clamp-2 mb-4 flex-1">{description}</p>
31+
<div className="pt-4 border-t border-gray-100 flex items-center text-blue-600 text-sm font-medium group-hover:translate-x-1 transition-transform">
32+
Launch App <span className="ml-1">→</span>
33+
</div>
34+
</Card>
35+
);
36+
}
37+
2038
function DashboardApp() {
2139
const [user, setUser] = useState(null);
2240
const [loading, setLoading] = useState(true);
23-
const [activeTab, setActiveTab] = useState('overview');
24-
const [projectName, setProjectName] = useState('Acme Project');
41+
const [activeTab, setActiveTab] = useState('apps');
2542

2643
useEffect(() => {
2744
authClient.getSession().then(session => {
@@ -53,25 +70,28 @@
5370
<div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center shadow-md shadow-black/20">
5471
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
5572
</div>
56-
<span className="text-lg font-bold tracking-tight text-gray-900">ObjectQL</span>
73+
<div>
74+
<div className="text-[15px] font-bold tracking-tight text-gray-900 leading-none">ObjectQL</div>
75+
<div className="text-[11px] text-gray-500 font-medium mt-0.5">Admin Server</div>
76+
</div>
5777
</div>
5878

5979
<nav className="space-y-1">
6080
<SidebarItem
61-
icon={Icons.Layout}
62-
label="Overview"
63-
active={activeTab === 'overview'}
64-
onClick={() => setActiveTab('overview')}
81+
icon={() => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>}
82+
label="Applications"
83+
active={activeTab === 'apps'}
84+
onClick={() => setActiveTab('apps')}
6585
/>
6686
<SidebarItem
67-
icon={Icons.User}
68-
label="Team Members"
69-
active={activeTab === 'team'}
70-
onClick={() => setActiveTab('team')}
87+
icon={() => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>}
88+
label="Data Explorer"
89+
active={activeTab === 'data'}
90+
onClick={() => setActiveTab('data')}
7191
/>
7292
<SidebarItem
73-
icon={Icons.Settings}
74-
label="Settings"
93+
icon={() => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.47a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>}
94+
label="Server Settings"
7595
active={activeTab === 'settings'}
7696
onClick={() => setActiveTab('settings')}
7797
/>
@@ -80,12 +100,12 @@
80100

81101
<div className="px-5">
82102
<div className="p-3 bg-white border border-gray-200/60 rounded-xl shadow-sm flex items-center gap-3">
83-
<div className="w-9 h-9 rounded-full bg-gradient-to-tr from-blue-500 to-purple-500 text-white flex items-center justify-center text-sm font-bold shadow-inner">
103+
<div className="w-9 h-9 rounded-full bg-stone-800 text-white flex items-center justify-center text-sm font-bold shadow-inner">
84104
{user.name?.[0]?.toUpperCase() || 'U'}
85105
</div>
86106
<div className="flex-1 min-w-0">
87107
<p className="text-sm font-semibold text-gray-900 truncate">{user.name}</p>
88-
<p className="text-xs text-gray-500 truncate">{user.email}</p>
108+
<p className="text-xs text-gray-500 truncate">Administrator</p>
89109
</div>
90110
<button onClick={() => authClient.signOut()} className="text-gray-400 hover:text-red-500 transition-colors p-1" title="Sign Out">
91111
<Icons.LogOut className="w-4 h-4" />
@@ -96,60 +116,52 @@
96116

97117
{/* Main Content */}
98118
<main className="flex-1 overflow-auto p-4 sm:p-8">
99-
<div className="max-w-5xl mx-auto space-y-6 animate-[fadeIn_0.4s_ease-out]">
119+
<div className="max-w-6xl mx-auto space-y-6 animate-[fadeIn_0.4s_ease-out]">
100120

101-
<header className="flex justify-between items-end mb-8">
102-
<div>
103-
<h2 className="text-3xl font-bold text-gray-900 tracking-tight">Overview</h2>
104-
<p className="text-gray-500 mt-1">Manage your project and resources.</p>
105-
</div>
106-
<div className="flex gap-3">
107-
<Button variant="secondary">Documentation</Button>
108-
<Button>New Project</Button>
109-
</div>
110-
</header>
111-
112-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
113-
{/* Key Metrics */}
114-
<Card className="md:col-span-2 relative overflow-hidden group">
115-
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full blur-2xl -mr-10 -mt-10 transition-all group-hover:bg-blue-100/80"></div>
116-
<h3 className="font-semibold text-gray-500 text-xs uppercase tracking-wider mb-1">Project Status</h3>
117-
<div className="text-3xl font-bold text-gray-900 mb-4">{projectName}</div>
118-
<div className="flex gap-2">
119-
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
120-
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Pro Plan</span>
121+
{activeTab === 'apps' && (
122+
<>
123+
<header className="flex justify-between items-end mb-4">
124+
<div>
125+
<h2 className="text-3xl font-bold text-gray-900 tracking-tight">Applications</h2>
126+
<p className="text-gray-500 mt-1">Manage installed packages and modules.</p>
127+
</div>
128+
<Button variant="secondary" className="gap-2">
129+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
130+
Install Package
131+
</Button>
132+
</header>
133+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
134+
<AppCard
135+
name="Project Management"
136+
description="Comprehensive project tracking, task assignment, and agile workflows."
137+
icon="🚀"
138+
version="v1.0.0"
139+
/>
140+
<AppCard
141+
name="User Directory"
142+
description="Centralized user management, roles, permissions, and organization structure."
143+
icon="👥"
144+
version="Core"
145+
/>
146+
<AppCard
147+
name="API Gateway"
148+
description="Configure routes, middleware, and monitor API traffic and health."
149+
icon="⚡️"
150+
version="Core"
151+
/>
121152
</div>
122-
</Card>
153+
</>
154+
)}
123155

124-
<Card className="flex flex-col justify-between">
125-
<div>
126-
<h3 className="font-semibold text-gray-500 text-xs uppercase tracking-wider mb-2">Team Size</h3>
127-
<div className="text-3xl font-bold text-gray-900">12</div>
128-
</div>
129-
<div className="flex -space-x-2 mt-4">
130-
{[1,2,3,4].map(i => (
131-
<div key={i} className="w-8 h-8 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-xs font-medium text-gray-600">M{i}</div>
132-
))}
156+
{activeTab === 'data' && (
157+
<Card title="Data Explorer" description="Browse database objects and schemas directly.">
158+
<div className="p-12 text-center text-gray-400">
159+
<svg className="w-16 h-16 mx-auto mb-4 opacity-20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
160+
<p>Select an object to inspect data.</p>
133161
</div>
134162
</Card>
135-
</div>
163+
)}
136164

137-
{/* Recent Activity / Content */}
138-
<div className="grid grid-cols-1 gap-6">
139-
<Card title="Project Settings" description="Update your project configuration.">
140-
<div className="grid gap-6 max-w-lg mt-2">
141-
<Input
142-
label="Project Name"
143-
value={projectName}
144-
onChange={(e) => setProjectName(e.target.value)}
145-
/>
146-
147-
<div className="pt-2">
148-
<Button onClick={() => alert('Saved!')}>Save Changes</Button>
149-
</div>
150-
</div>
151-
</Card>
152-
</div>
153165
</div>
154166
</main>
155167
</div>

‎packages/server/tsconfig.json‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
11
{
2-
"extends": "../../tsconfig.base.json",
32
"compilerOptions": {
43
"module": "commonjs",
54
"declaration": true,
65
"removeComments": true,
76
"emitDecoratorMetadata": true,
87
"experimentalDecorators": true,
98
"allowSyntheticDefaultImports": true,
10-
"target": "ES2021",
9+
"target": "ES2023",
1110
"sourceMap": true,
1211
"outDir": "./dist",
1312
"baseUrl": "./",
1413
"incremental": true,
1514
"skipLibCheck": true,
16-
"strictNullChecks": false,
15+
"strictNullChecks": true,
16+
"forceConsistentCasingInFileNames": true,
1717
"noImplicitAny": false,
1818
"strictBindCallApply": false,
19-
"forceConsistentCasingInFileNames": false,
2019
"noFallthroughCasesInSwitch": false
2120
},
22-
"include": ["src/**/*"],
2321
"references": [
2422
{ "path": "../core" },
2523
{ "path": "../api" },
2624
{ "path": "../driver-mongo" },
2725
{ "path": "../driver-knex" },
2826
{ "path": "../../examples/project-management" }
2927
]
30-
}
28+
}

0 commit comments

Comments
 (0)