init ana page with apis
This commit is contained in:
432
app/components/dashboard/LinkDetailsCard.tsx
Normal file
432
app/components/dashboard/LinkDetailsCard.tsx
Normal file
@@ -0,0 +1,432 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface LinkDetails {
|
||||
id: string;
|
||||
name: string;
|
||||
shortUrl: string;
|
||||
originalUrl: string;
|
||||
creator: string;
|
||||
createdAt: string;
|
||||
visits: number;
|
||||
visitChange: number;
|
||||
uniqueVisitors: number;
|
||||
uniqueVisitorsChange: number;
|
||||
avgTime: string;
|
||||
avgTimeChange: number;
|
||||
conversionRate: number;
|
||||
conversionChange: number;
|
||||
status: 'active' | 'inactive' | 'expired';
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
interface LinkDetailsCardProps {
|
||||
linkId: string | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function LinkDetailsCard({ linkId, onClose }: LinkDetailsCardProps) {
|
||||
const [linkDetails, setLinkDetails] = useState<LinkDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'referrers' | 'devices' | 'locations'>('overview');
|
||||
|
||||
useEffect(() => {
|
||||
if (linkId) {
|
||||
// Simulate API call to fetch link details
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
// In a real app, this would be an API call like:
|
||||
// const response = await fetch(`/api/links/${linkId}`);
|
||||
// const data = await response.json();
|
||||
|
||||
// For demo, using mock data
|
||||
setTimeout(() => {
|
||||
setLinkDetails({
|
||||
id: linkId,
|
||||
name: "Product Launch Campaign",
|
||||
shortUrl: "short.io/prlaunch",
|
||||
originalUrl: "https://example.com/products/new-product-launch-summer-2023",
|
||||
creator: "Sarah Johnson",
|
||||
createdAt: "2023-05-15",
|
||||
visits: 3240,
|
||||
visitChange: 12.5,
|
||||
uniqueVisitors: 2180,
|
||||
uniqueVisitorsChange: 8.3,
|
||||
avgTime: "2m 45s",
|
||||
avgTimeChange: -5.2,
|
||||
conversionRate: 4.8,
|
||||
conversionChange: 1.2,
|
||||
status: 'active',
|
||||
tags: ["marketing", "product", "summer"]
|
||||
});
|
||||
setLoading(false);
|
||||
}, 800);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}
|
||||
}, [linkId]);
|
||||
|
||||
if (!linkId) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto bg-background/80 backdrop-blur-sm">
|
||||
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="inline-block w-full max-w-4xl overflow-hidden text-left align-middle transition-all transform bg-card-bg rounded-xl shadow-xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-card-border">
|
||||
<div className="flex items-center">
|
||||
{loading ? (
|
||||
<div className="w-52 h-7 bg-progress-bg animate-pulse rounded"></div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-accent-blue/20 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M10.172 13.828a4 4 0 005.656 0l4-4a4 4 0 10-5.656-5.656l-1.102 1.101" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-foreground">
|
||||
{linkDetails?.name}
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="text-text-secondary hover:text-foreground rounded-md focus:outline-none"
|
||||
>
|
||||
<span className="sr-only">Close</span>
|
||||
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-8 flex flex-col space-y-4 items-center justify-center">
|
||||
<div className="w-12 h-12 border-t-2 border-b-2 border-accent-blue rounded-full animate-spin"></div>
|
||||
<p className="text-text-secondary">Loading link details...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Link Info */}
|
||||
<div className="p-6 border-b border-card-border grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="col-span-2">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div>
|
||||
<span className="text-xs font-medium text-text-secondary uppercase">Short URL</span>
|
||||
<div className="flex items-center mt-1">
|
||||
<a
|
||||
href={linkDetails ? `https://${linkDetails.shortUrl}` : '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent-blue hover:underline font-medium break-all"
|
||||
>
|
||||
{linkDetails?.shortUrl}
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-2 text-text-secondary hover:text-foreground"
|
||||
onClick={() => linkDetails && navigator.clipboard.writeText(`https://${linkDetails.shortUrl}`)}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<span className="text-xs font-medium text-text-secondary uppercase">Original URL</span>
|
||||
<div className="mt-1">
|
||||
<a
|
||||
href={linkDetails?.originalUrl || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-foreground hover:underline break-all"
|
||||
>
|
||||
{linkDetails?.originalUrl}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div>
|
||||
<span className="text-xs font-medium text-text-secondary uppercase">Created By</span>
|
||||
<p className="mt-1 text-foreground">{linkDetails?.creator}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-medium text-text-secondary uppercase">Created At</span>
|
||||
<p className="mt-1 text-foreground">{linkDetails?.createdAt}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-medium text-text-secondary uppercase">Status</span>
|
||||
<div className="mt-1">
|
||||
{linkDetails && (
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
||||
${linkDetails.status === 'active' ? 'bg-green-500/10 text-accent-green' :
|
||||
linkDetails.status === 'inactive' ? 'bg-gray-500/10 text-text-secondary' :
|
||||
'bg-red-500/10 text-accent-red'
|
||||
}`}
|
||||
>
|
||||
{linkDetails.status.charAt(0).toUpperCase() + linkDetails.status.slice(1)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{linkDetails?.tags && linkDetails.tags.length > 0 && (
|
||||
<div>
|
||||
<span className="text-xs font-medium text-text-secondary uppercase">Tags</span>
|
||||
<div className="mt-1 flex flex-wrap gap-2">
|
||||
{linkDetails.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-500/10 rounded-full text-accent-blue"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metrics Overview */}
|
||||
{linkDetails && (
|
||||
<div className="p-6 border-b border-card-border">
|
||||
<h4 className="text-lg font-medium text-foreground mb-4">Performance Metrics</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* Total Visits */}
|
||||
<div className="bg-card-bg p-4 rounded-lg border border-card-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h5 className="text-sm font-medium text-text-secondary">Total Visits</h5>
|
||||
<span
|
||||
className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
|
||||
${linkDetails.visitChange >= 0
|
||||
? 'bg-green-500/10 text-accent-green'
|
||||
: 'bg-red-500/10 text-accent-red'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className={`w-3 h-3 mr-1 ${linkDetails.visitChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{Math.abs(linkDetails.visitChange)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-2xl font-bold text-foreground">{linkDetails.visits.toLocaleString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Unique Visitors */}
|
||||
<div className="bg-card-bg p-4 rounded-lg border border-card-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h5 className="text-sm font-medium text-text-secondary">Unique Visitors</h5>
|
||||
<span
|
||||
className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
|
||||
${linkDetails.uniqueVisitorsChange >= 0
|
||||
? 'bg-green-500/10 text-accent-green'
|
||||
: 'bg-red-500/10 text-accent-red'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className={`w-3 h-3 mr-1 ${linkDetails.uniqueVisitorsChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{Math.abs(linkDetails.uniqueVisitorsChange)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-2xl font-bold text-foreground">{linkDetails.uniqueVisitors.toLocaleString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Average Time */}
|
||||
<div className="bg-card-bg p-4 rounded-lg border border-card-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h5 className="text-sm font-medium text-text-secondary">Average Time</h5>
|
||||
<span
|
||||
className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
|
||||
${linkDetails.avgTimeChange >= 0
|
||||
? 'bg-green-500/10 text-accent-green'
|
||||
: 'bg-red-500/10 text-accent-red'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className={`w-3 h-3 mr-1 ${linkDetails.avgTimeChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{Math.abs(linkDetails.avgTimeChange)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-2xl font-bold text-foreground">{linkDetails.avgTime}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conversion Rate */}
|
||||
<div className="bg-card-bg p-4 rounded-lg border border-card-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h5 className="text-sm font-medium text-text-secondary">Conversion Rate</h5>
|
||||
<span
|
||||
className={`inline-flex items-center text-xs font-medium rounded-full px-2 py-0.5
|
||||
${linkDetails.conversionChange >= 0
|
||||
? 'bg-green-500/10 text-accent-green'
|
||||
: 'bg-red-500/10 text-accent-red'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className={`w-3 h-3 mr-1 ${linkDetails.conversionChange >= 0 ? 'text-accent-green' : 'text-accent-red transform rotate-180'}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{Math.abs(linkDetails.conversionChange)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-2xl font-bold text-foreground">{linkDetails.conversionRate}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs Navigation */}
|
||||
<div className="border-b border-card-border">
|
||||
<nav className="flex -mb-px">
|
||||
<button
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`py-4 px-6 font-medium text-sm border-b-2 ${
|
||||
activeTab === 'overview'
|
||||
? 'border-accent-blue text-accent-blue'
|
||||
: 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
|
||||
}`}
|
||||
>
|
||||
Overview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('referrers')}
|
||||
className={`py-4 px-6 font-medium text-sm border-b-2 ${
|
||||
activeTab === 'referrers'
|
||||
? 'border-accent-blue text-accent-blue'
|
||||
: 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
|
||||
}`}
|
||||
>
|
||||
Referrers
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('devices')}
|
||||
className={`py-4 px-6 font-medium text-sm border-b-2 ${
|
||||
activeTab === 'devices'
|
||||
? 'border-accent-blue text-accent-blue'
|
||||
: 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
|
||||
}`}
|
||||
>
|
||||
Devices
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('locations')}
|
||||
className={`py-4 px-6 font-medium text-sm border-b-2 ${
|
||||
activeTab === 'locations'
|
||||
? 'border-accent-blue text-accent-blue'
|
||||
: 'border-transparent text-text-secondary hover:text-foreground hover:border-card-border'
|
||||
}`}
|
||||
>
|
||||
Locations
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="p-6">
|
||||
{activeTab === 'overview' && (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-foreground">No chart data available</h3>
|
||||
<p className="mt-1 text-sm text-text-secondary">
|
||||
Charts and detailed analytics would appear here.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'referrers' && (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-foreground">No referrer data available</h3>
|
||||
<p className="mt-1 text-sm text-text-secondary">
|
||||
Information about traffic sources would appear here.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'devices' && (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-foreground">No device data available</h3>
|
||||
<p className="mt-1 text-sm text-text-secondary">
|
||||
Breakdown of devices used to access the link would appear here.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'locations' && (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-foreground">No location data available</h3>
|
||||
<p className="mt-1 text-sm text-text-secondary">
|
||||
Geographic distribution of visitors would appear here.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-4 py-3 bg-card-bg flex justify-end border-t border-card-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-text-secondary bg-card-bg border border-card-border rounded-md shadow-sm hover:bg-card-bg/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user