432 lines
22 KiB
TypeScript
432 lines
22 KiB
TypeScript
"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>
|
|
);
|
|
}
|