vitalitymailg/shorturl-analytics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
William Tso
2025-03-31 19:51:02 +08:00
parent b425f5b987
commit 8eb859ddde
2 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/(app)/dashboard/page.tsx
View File

@@ -143,7 +143,7 @@ export default function DashboardPage() {
return ( return (
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Analytics Dashboard</h1> <h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
<DateRangePicker <DateRangePicker
value={dateRange} value={dateRange}
onChange={setDateRange} onChange={setDateRange}
@@ -151,9 +151,9 @@ export default function DashboardPage() {
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Events</h3> <h3 className="text-sm font-medium text-gray-500">Total Events</h3>
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-100"> <p className="text-2xl font-semibold text-gray-900">
{loading ? ( {loading ? (
<span className="text-gray-400">Loading...</span> <span className="text-gray-400">Loading...</span>
) : ( ) : (
@@ -161,9 +161,9 @@ export default function DashboardPage() {
)} )}
</p> </p>
</div> </div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Unique Visitors</h3> <h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-100"> <p className="text-2xl font-semibold text-gray-900">
{loading ? ( {loading ? (
<span className="text-gray-400">Loading...</span> <span className="text-gray-400">Loading...</span>
) : ( ) : (
@@ -171,9 +171,9 @@ export default function DashboardPage() {
)} )}
</p> </p>
</div> </div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Conversions</h3> <h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-100"> <p className="text-2xl font-semibold text-gray-900">
{loading ? ( {loading ? (
<span className="text-gray-400">Loading...</span> <span className="text-gray-400">Loading...</span>
) : ( ) : (
@@ -181,9 +181,9 @@ export default function DashboardPage() {
)} )}
</p> </p>
</div> </div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Avg. Time Spent</h3> <h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-100"> <p className="text-2xl font-semibold text-gray-900">
{loading ? ( {loading ? (
<span className="text-gray-400">Loading...</span> <span className="text-gray-400">Loading...</span>
) : ( ) : (
@@ -193,8 +193,8 @@ export default function DashboardPage() {
</div> </div>
</div> </div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8"> <div className="bg-white rounded-lg shadow p-6 mb-8">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Event Trends</h2> <h2 className="text-lg font-semibold text-gray-900 mb-4">Event Trends</h2>
<div className="h-96"> <div className="h-96">
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-full"> <div className="flex items-center justify-center h-full">
@@ -207,7 +207,7 @@ export default function DashboardPage() {
</div> </div>
<div className="mb-8"> <div className="mb-8">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Device Analytics</h2> <h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-48"> <div className="flex items-center justify-center h-48">
<span className="text-gray-400">Loading...</span> <span className="text-gray-400">Loading...</span>
@@ -217,8 +217,8 @@ export default function DashboardPage() {
)} )}
</div> </div>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Geographic Distribution</h2> <h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-48"> <div className="flex items-center justify-center h-48">
<span className="text-gray-400">Loading...</span> <span className="text-gray-400">Loading...</span>

14
app/(app)/layout.tsx
View File

@@ -17,37 +17,37 @@ export default function AppLayout({
}) { }) {
return ( return (
<div className={inter.className}> <div className={inter.className}>
<div className="min-h-screen bg-gray-50 dark:bg-gray-900"> <div className="min-h-screen bg-gray-50">
<nav className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <nav className="bg-white border-b border-gray-200">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<div className="flex items-center"> <div className="flex items-center">
<Link href="/" className="text-xl font-bold text-gray-900 dark:text-gray-100"> <Link href="/" className="text-xl font-bold text-gray-900">
ShortURL Analytics ShortURL Analytics
</Link> </Link>
<div className="hidden md:block ml-10"> <div className="hidden md:block ml-10">
<div className="flex items-baseline space-x-4"> <div className="flex items-baseline space-x-4">
<Link <Link
href="/dashboard" href="/dashboard"
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium" className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
> >
Dashboard Dashboard
</Link> </Link>
<Link <Link
href="/events" href="/events"
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium" className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
> >
Events Events
</Link> </Link>
<Link <Link
href="/analytics/geo" href="/analytics/geo"
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium" className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
> >
Geographic Geographic
</Link> </Link>
<Link <Link
href="/analytics/devices" href="/analytics/devices"
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium" className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
> >
Devices Devices
</Link> </Link>