build analytics dashboard page at /devcard/analytics

[parthpatidar03]

Description

closes #28
Developed a comprehensive analytics dashboard for card owners to monitor their digital footprint and interaction metrics. This closes the gap between the backend tracking system and user-facing features.

Technical Changes

• Server-Side Rendering (SSR): Leveraged SvelteKit's +page.server.ts to fetch high-priority data before page hydration.
  • Utilized Promise.all for parallel fetching of overview and views endpoints to minimize TTFB (Time to First Byte).
• Dashboard UI Architecture:
  • KPI Layer: Created a 4-column grid of stat cards displaying totalViews, viewsToday, uniqueViewers, and totalFollows.
  • Activity Engine: Implemented an activity list component that renders recent cardView events, displaying viewer avatars and interaction timestamps.
  • Log Table: Built a responsive data table for granular tracking of traffic sources (QR, link, etc.) and viewer IP logging.
• State Handling: Implemented robust error boundaries to handle unauthorized access (401) or backend downtime, providing clear "Return Home" CTAs.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[ShantKhatri]

Hi @parthpatidar03 , Thanks for the PR, could you please just add the analytics page small 10-15 sec video or any kind small demo to interact with the components there. PR is good to merge.

[parthpatidar03]

ok sure

[parthpatidar03]

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 12 comments.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

apps/web/src/routes/devcard/analytics/+page.svelte:137

• Issue #28 acceptance criteria are still not met by this PR: there is no daily-views chart, no ranked platform-clicks list, no "Download CSV" button wired to the export endpoint, and no auth-guard redirect to / for unauthenticated users. The previous review thread asked for these to be addressed, but the current diff does not add them. Please either implement the remaining criteria or update the PR description (and issue scope) to reflect the partial implementation before merging.

	{:else if overview}
		<!-- KPI Overview -->
		<section class="stats-grid">
			<div class="stat-card">
				<span class="stat-label">Total Views</span>
				<div class="stat-value">{overview.totalViews}</div>
				<div class="stat-footer">Lifetime views</div>
			</div>
			<div class="stat-card accent">
				<span class="stat-label">Views Today</span>
				<div class="stat-value">{overview.viewsToday}</div>
				<div class="stat-footer">Last 24 hours</div>
			</div>
			<div class="stat-card">
				<span class="stat-label">Unique Viewers</span>
				<div class="stat-value">{overview.uniqueViewers}</div>
				<div class="stat-footer">By IP & Account</div>
			</div>
			<div class="stat-card">
				<span class="stat-label">Total Follows</span>
				<div class="stat-value">{overview.totalFollows}</div>
				<div class="stat-footer">Success via engine</div>
			</div>
		</section>

		<div class="dashboard-grid">
			<!-- Recent Views -->
			<section class="content-block">
				<h3>Recent Activity</h3>
				<div class="activity-list">
					{#each overview.recentViews as view}
						<div class="activity-item">
							<div class="activity-avatar">
								{#if view.viewer?.avatarUrl}
									<img src={view.viewer.avatarUrl} alt="" />
								{:else}
									<div class="avatar-placeholder">{view.viewer?.displayName?.charAt(0) || '?'}</div>
								{/if}
							</div>
							<div class="activity-info">
								<span class="viewer-name">{view.viewer?.displayName || 'Anonymous User'}</span>
								<span class="view-source">viewed via {view.source}</span>
							</div>
							<div class="activity-time">{formatDate(view.createdAt)}</div>
						</div>
					{/each}
					{#if overview.recentViews.length === 0}
						<p class="empty-text">No recent activity found.</p>
					{/if}
				</div>
			</section>

			<!-- Detailed Views Table -->
			<section class="content-block table-block">
				<div class="block-header">
					<h3>Detailed View Logs</h3>
					<span class="badge">{views?.meta?.total || 0} Total</span>
				</div>
				<div class="table-container">
					<table>
						<thead>
							<tr>
								<th>Viewer</th>
								<th>Card</th>
								<th>Source</th>
								<th>IP Address</th>
								<th>Date</th>
							</tr>
						</thead>
						<tbody>
							{#each views?.data || [] as view}
								<tr>
									<td>
										<div class="user-cell">
											<span class="name">{view.viewer?.displayName || 'Guest'}</span>
											{#if view.viewer?.username}
												<span class="username">@{view.viewer.username}</span>
											{/if}
										</div>
									</td>
									<td>{view.card?.title || 'Profile'}</td>
									<td><span class="source-tag">{view.source}</span></td>
									<td><code>{view.viewerIp || '—'}</code></td>
									<td>{formatDate(view.createdAt)}</td>
								</tr>
							{/each}
						</tbody>
					</table>
					{#if !views?.data?.length}
						<div class="empty-table">No detailed logs available yet.</div>
					{/if}
				</div>
			</section>
		</div>
	{/if}