feat: dashboard v2, esm, upgrades (#211)
* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
436e81ecc9
commit
81a7e5d62e
130
apps/start/src/components/skeleton-dashboard.tsx
Normal file
130
apps/start/src/components/skeleton-dashboard.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
export function SkeletonDashboard() {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gradient-to-br from-def-100 to-def-200 overflow-hidden">
|
||||
<div className="inset-0 fixed backdrop-blur-xs bg-background/10 z-10" />
|
||||
{/* Sidebar Skeleton */}
|
||||
<div className="fixed left-0 top-0 w-72 h-full bg-background/80 border-r border-def-300/50 backdrop-blur-sm">
|
||||
{/* Logo area */}
|
||||
<div className="h-16 border-b border-def-300/50 flex items-center px-4">
|
||||
<div className="w-8 h-8 bg-def-300/60 rounded-lg" />
|
||||
<div className="ml-3 w-24 h-4 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
|
||||
{/* Navigation items */}
|
||||
<div className="p-4 space-y-3">
|
||||
{[
|
||||
'Dashboard',
|
||||
'Analytics',
|
||||
'Reports',
|
||||
'Settings',
|
||||
'Users',
|
||||
'Projects',
|
||||
].map((item, i) => (
|
||||
<div
|
||||
key={`nav-${item.toLowerCase()}`}
|
||||
className="flex items-center space-x-3 p-2 rounded-lg"
|
||||
>
|
||||
<div className="w-5 h-5 bg-def-300/60 rounded" />
|
||||
<div className="w-20 h-3 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Project section */}
|
||||
<div className="px-4 py-2">
|
||||
<div className="w-16 h-3 bg-def-300/60 rounded mb-3" />
|
||||
{['Project Alpha', 'Project Beta', 'Project Gamma'].map(
|
||||
(project, i) => (
|
||||
<div
|
||||
key={`project-${project.toLowerCase().replace(' ', '-')}`}
|
||||
className="flex items-center space-x-3 p-2 rounded-lg mb-2"
|
||||
>
|
||||
<div className="w-4 h-4 bg-def-300/60 rounded" />
|
||||
<div className="w-24 h-3 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content area skeleton */}
|
||||
<div className="ml-72 p-8">
|
||||
{/* Header area */}
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="w-48 h-6 bg-def-300/60 rounded" />
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-20 h-8 bg-def-300/60 rounded" />
|
||||
<div className="w-20 h-8 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dashboard grid */}
|
||||
<div className="grid grid-cols-3 gap-6 mb-8">
|
||||
{[
|
||||
'Total Users',
|
||||
'Active Sessions',
|
||||
'Page Views',
|
||||
'Bounce Rate',
|
||||
'Conversion',
|
||||
'Revenue',
|
||||
].map((metric, i) => (
|
||||
<div
|
||||
key={`metric-${metric.toLowerCase().replace(' ', '-')}`}
|
||||
className="bg-card/60 rounded-xl p-6 border border-def-300/50"
|
||||
>
|
||||
<div className="w-16 h-4 bg-def-300/60 rounded mb-3" />
|
||||
<div className="w-24 h-8 bg-def-300/60 rounded mb-2" />
|
||||
<div className="w-32 h-3 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Chart area */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="bg-card/60 rounded-xl p-6 border border-def-300/50 h-64">
|
||||
<div className="w-20 h-4 bg-def-300/60 rounded mb-4" />
|
||||
<div className="space-y-3">
|
||||
{['Desktop', 'Mobile', 'Tablet', 'Other'].map((device, i) => (
|
||||
<div
|
||||
key={`chart-${device.toLowerCase()}`}
|
||||
className="flex items-center space-x-3"
|
||||
>
|
||||
<div className="w-3 h-3 bg-def-300/60 rounded-full" />
|
||||
<div className="flex-1 h-2 bg-def-300/60 rounded" />
|
||||
<div className="w-8 h-3 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card/60 rounded-xl p-6 border border-def-300/50 h-64">
|
||||
<div className="w-20 h-4 bg-def-300/60 rounded mb-4" />
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
'John Doe',
|
||||
'Jane Smith',
|
||||
'Bob Johnson',
|
||||
'Alice Brown',
|
||||
'Charlie Wilson',
|
||||
].map((user, i) => (
|
||||
<div
|
||||
key={`user-${user.toLowerCase().replace(' ', '-')}`}
|
||||
className="flex items-center space-x-3"
|
||||
>
|
||||
<div className="w-8 h-8 bg-def-300/60 rounded-full" />
|
||||
<div className="flex-1">
|
||||
<div className="w-24 h-3 bg-def-300/60 rounded mb-1" />
|
||||
<div className="w-16 h-2 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
<div className="w-12 h-3 bg-def-300/60 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user