init ana page with apis

app/components/charts/ChartPlaceholder.tsx

@@ -0,0 +1,46 @@
+interface ChartPlaceholderProps {
+  text: string;
+  height?: string;
+  colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'teal' | 'orange' | 'pink' | 'yellow';
+}
+
+export default function ChartPlaceholder({ 
+  text, 
+  height = "h-64",
+  colorScheme = 'blue'
+}: ChartPlaceholderProps) {
+  const borderColor = {
+    blue: 'border-accent-blue',
+    green: 'border-accent-green',
+    red: 'border-accent-red',
+    purple: 'border-accent-purple',
+    teal: 'border-accent-teal',
+    orange: 'border-accent-orange',
+    pink: 'border-accent-pink',
+    yellow: 'border-accent-yellow',
+  }[colorScheme];
+  
+  const textColor = {
+    blue: 'text-accent-blue',
+    green: 'text-accent-green',
+    red: 'text-accent-red',
+    purple: 'text-accent-purple',
+    teal: 'text-accent-teal',
+    orange: 'text-accent-orange',
+    pink: 'text-accent-pink',
+    yellow: 'text-accent-yellow',
+  }[colorScheme];
+  
+  return (
+    <div className={`${height} flex items-center justify-center bg-card-bg bg-opacity-50 rounded-md border-2 border-dashed ${borderColor}`}>
+      <div className="text-center">
+        <div className="mx-auto w-12 h-12 mb-3 rounded-full bg-background flex items-center justify-center">
+          <svg className={`w-6 h-6 ${textColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
+        </div>
+        <p className={`${textColor} text-sm font-medium`}>{text}</p>
+      </div>
+    </div>
+  );
+} 

app/components/dashboard/LinkDetailsCard.tsx

@@ -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>
+  );
+} 

app/components/dashboard/StatsCard.tsx

@@ -0,0 +1,72 @@
+interface StatsCardProps {
+  title: string;
+  value: string | number;
+  change: number;
+  unit?: string;
+  colorScheme?: 'blue' | 'green' | 'red' | 'purple';
+}
+
+export default function StatsCard({ 
+  title, 
+  value, 
+  change, 
+  unit = '',
+  colorScheme = 'blue'
+}: StatsCardProps) {
+  const isPositive = change >= 0;
+  const hasPercentUnit = unit === '%';
+  
+  // Color mappings based on the colorScheme
+  const gradientBg = {
+    blue: 'bg-gradient-blue',
+    green: 'bg-gradient-green',
+    red: 'bg-gradient-red',
+    purple: 'bg-gradient-purple',
+  }[colorScheme];
+  
+  const accentColor = {
+    blue: 'text-accent-blue',
+    green: 'text-accent-green',
+    red: 'text-accent-red',
+    purple: 'text-accent-purple',
+  }[colorScheme];
+  
+  return (
+    <div className="bg-card-bg border border-card-border rounded-lg overflow-hidden">
+      {/* Colorful top bar */}
+      <div className={`h-1 ${gradientBg}`}></div>
+      
+      <div className="p-5">
+        <h2 className="text-text-secondary text-sm font-medium mb-2">{title}</h2>
+        
+        <div className="flex flex-col">
+          <div className="flex items-baseline">
+            <p className={`text-3xl font-bold ${accentColor}`}>
+              {value}
+              {hasPercentUnit && <span className={accentColor}>%</span>}
+            </p>
+            
+            <div className={`ml-3 px-2 py-0.5 rounded-md text-sm font-medium flex items-center ${
+              isPositive ? 'text-accent-green' : 'text-accent-red'
+            }`}>
+              <span className={`inline-block w-2 h-2 rounded-full mr-1 ${
+                isPositive ? 'bg-accent-green' : 'bg-accent-red'
+              }`}></span>
+              {isPositive ? '+' : ''}{change}%
+            </div>
+          </div>
+          
+          {/* Visual indicator for percentages */}
+          {hasPercentUnit && (
+            <div className="mt-3 w-full bg-progress-bg h-2 rounded-full overflow-hidden">
+              <div 
+                className={`${gradientBg} h-full rounded-full`}
+                style={{ width: `${Math.min(Number(value), 100)}%` }}
+              ></div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+} 

app/components/layout/Navbar.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import Link from 'next/link';
+import ThemeToggle from "../ui/ThemeToggle";
+
+export default function Navbar() {
+  return (
+    <header className="w-full py-4 border-b border-card-border bg-background">
+      <div className="container flex items-center justify-between px-4 mx-auto">
+        <div className="flex items-center space-x-4">
+          <Link href="/" className="flex items-center space-x-2">
+            <svg
+              className="w-6 h-6 text-accent-blue"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+            </svg>
+            <span className="text-xl font-bold text-foreground">ShortURL</span>
+          </Link>
+          <nav className="hidden space-x-4 md:flex">
+            <Link
+              href="/links"
+              className="text-sm text-foreground hover:text-accent-blue transition-colors"
+            >
+              Links
+            </Link>
+            <Link
+              href="/analytics"
+              className="text-sm text-foreground hover:text-accent-blue transition-colors"
+            >
+              Analytics
+            </Link>
+          </nav>
+        </div>
+        <div className="flex items-center space-x-3">
+          <ThemeToggle />
+          <button className="p-2 text-sm text-foreground rounded-md gradient-border">
+            Upgrade
+          </button>
+          <button className="p-2 text-sm text-foreground hover:text-accent-blue">
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <circle cx="12" cy="10" r="3"></circle>
+              <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+} 

app/components/ui/Card.tsx

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+
+interface CardProps {
+  title: string;
+  children: ReactNode;
+  className?: string;
+  colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'teal' | 'orange' | 'pink' | 'yellow' | 'none';
+  glowEffect?: boolean;
+}
+
+export default function Card({ 
+  title, 
+  children, 
+  className = '',
+  colorScheme = 'none',
+  glowEffect = false
+}: CardProps) {
+  // Only add color-specific classes if a colorScheme is specified
+  const headerColor = colorScheme !== 'none' ? {
+    blue: 'text-accent-blue',
+    green: 'text-accent-green',
+    red: 'text-accent-red',
+    purple: 'text-accent-purple',
+    teal: 'text-accent-teal',
+    orange: 'text-accent-orange',
+    pink: 'text-accent-pink',
+    yellow: 'text-accent-yellow',
+  }[colorScheme] : 'text-foreground';
+  
+  const glowClass = glowEffect && colorScheme !== 'none' ? {
+    blue: 'shadow-[0_0_15px_rgba(59,130,246,0.15)]',
+    green: 'shadow-[0_0_15px_rgba(16,185,129,0.15)]',
+    red: 'shadow-[0_0_15px_rgba(244,63,94,0.15)]',
+    purple: 'shadow-[0_0_15px_rgba(139,92,246,0.15)]',
+    teal: 'shadow-[0_0_15px_rgba(20,184,166,0.15)]',
+    orange: 'shadow-[0_0_15px_rgba(249,115,22,0.15)]',
+    pink: 'shadow-[0_0_15px_rgba(236,72,153,0.15)]',
+    yellow: 'shadow-[0_0_15px_rgba(245,158,11,0.15)]',
+  }[colorScheme] : '';
+  
+  // Define the indicator dot color
+  const indicatorColor = colorScheme !== 'none' ? `bg-accent-${colorScheme}` : 'bg-gray-500';
+  
+  return (
+    <div className={`bg-card-bg border border-card-border rounded-lg ${glowClass} ${className}`}>
+      <div className="flex items-center border-b border-card-border p-5 pb-4">
+        <h2 className={`text-lg font-medium ${headerColor}`}>{title}</h2>
+        {colorScheme !== 'none' && (
+          <div className={`ml-2 h-1.5 w-1.5 rounded-full ${indicatorColor}`}></div>
+        )}
+      </div>
+      <div className="p-5 pt-4">
+        {children}
+      </div>
+    </div>
+  );
+} 

app/components/ui/CreateLinkModal.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useState } from 'react';
+
+interface LinkData {
+  name: string;
+  originalUrl: string;
+  customSlug: string;
+  expiresAt: string;
+  tags: string[];
+}
+
+interface CreateLinkModalProps {
+  onClose: () => void;
+  onSubmit: (linkData: LinkData) => void;
+}
+
+export default function CreateLinkModal({ onClose, onSubmit }: CreateLinkModalProps) {
+  const [formData, setFormData] = useState({
+    name: '',
+    originalUrl: '',
+    customSlug: '',
+    expiresAt: '',
+    tags: [] as string[],
+    tagInput: ''
+  });
+  
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  
+  const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && formData.tagInput.trim()) {
+      e.preventDefault();
+      addTag();
+    }
+  };
+  
+  const addTag = () => {
+    if (formData.tagInput.trim() && !formData.tags.includes(formData.tagInput.trim())) {
+      setFormData(prev => ({
+        ...prev,
+        tags: [...prev.tags, prev.tagInput.trim()],
+        tagInput: ''
+      }));
+    }
+  };
+  
+  const removeTag = (tagToRemove: string) => {
+    setFormData(prev => ({
+      ...prev,
+      tags: prev.tags.filter(tag => tag !== tagToRemove)
+    }));
+  };
+  
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { tagInput, ...submitData } = formData;
+    onSubmit(submitData as LinkData);
+  };
+  
+  return (
+    <div className="fixed inset-0 z-10 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-xl 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 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="M12 4.5v15m7.5-7.5h-15" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-medium leading-6 text-foreground">
+                Create New Link
+              </h3>
+            </div>
+
+            <button 
+              type="button" 
+              onClick={onClose}
+              className="text-text-secondary rounded-md hover:text-foreground 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>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="p-6 space-y-6 overflow-y-auto max-h-[70vh]">
+            {/* Link Name */}
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-foreground">
+                Link Name <span className="text-accent-red">*</span>
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                placeholder="e.g. Product Launch Campaign"
+                className="block w-full px-3 py-2 mt-1 text-foreground bg-card-bg border border-card-border rounded-md shadow-sm focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                required
+              />
+            </div>
+            
+            {/* Original URL */}
+            <div>
+              <label htmlFor="originalUrl" className="block text-sm font-medium text-foreground">
+                Original URL <span className="text-accent-red">*</span>
+              </label>
+              <input
+                type="url"
+                id="originalUrl"
+                name="originalUrl"
+                value={formData.originalUrl}
+                onChange={handleChange}
+                placeholder="https://example.com/your-long-url"
+                className="block w-full px-3 py-2 mt-1 text-foreground bg-card-bg border border-card-border rounded-md shadow-sm focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                required
+              />
+            </div>
+            
+            {/* Custom Slug */}
+            <div>
+              <label htmlFor="customSlug" className="block text-sm font-medium text-foreground">
+                Custom Slug <span className="text-text-secondary">(Optional)</span>
+              </label>
+              <div className="flex mt-1 rounded-md shadow-sm">
+                <span className="inline-flex items-center px-3 py-2 text-sm text-text-secondary border border-r-0 border-card-border rounded-l-md bg-card-bg/60">
+                  short.io/
+                </span>
+                <input
+                  type="text"
+                  id="customSlug"
+                  name="customSlug"
+                  value={formData.customSlug}
+                  onChange={handleChange}
+                  placeholder="custom-slug"
+                  className="flex-1 block w-full min-w-0 px-3 py-2 text-foreground bg-card-bg border border-card-border rounded-none rounded-r-md focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                />
+              </div>
+              <p className="mt-1 text-xs text-text-secondary">
+                Leave blank to generate a random slug
+              </p>
+            </div>
+            
+            {/* Expiration Date */}
+            <div>
+              <label htmlFor="expiresAt" className="block text-sm font-medium text-foreground">
+                Expiration Date <span className="text-text-secondary">(Optional)</span>
+              </label>
+              <input
+                type="date"
+                id="expiresAt"
+                name="expiresAt"
+                value={formData.expiresAt}
+                onChange={handleChange}
+                className="block w-full px-3 py-2 mt-1 text-foreground bg-card-bg border border-card-border rounded-md shadow-sm focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+              />
+              <p className="mt-1 text-xs text-text-secondary">
+                Leave blank for a non-expiring link
+              </p>
+            </div>
+            
+            {/* Tags */}
+            <div>
+              <label htmlFor="tagInput" className="block text-sm font-medium text-foreground">
+                Tags <span className="text-text-secondary">(Optional)</span>
+              </label>
+              <div className="flex mt-1 rounded-md shadow-sm">
+                <input
+                  type="text"
+                  id="tagInput"
+                  name="tagInput"
+                  value={formData.tagInput}
+                  onChange={handleChange}
+                  onKeyDown={handleTagKeyDown}
+                  placeholder="Add tag and press Enter"
+                  className="flex-1 block w-full min-w-0 px-3 py-2 text-foreground bg-card-bg border border-card-border rounded-l-md focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                />
+                <button
+                  type="button"
+                  onClick={addTag}
+                  className="inline-flex items-center px-3 py-2 text-sm font-medium text-white border border-transparent rounded-r-md shadow-sm bg-accent-blue hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
+                >
+                  Add
+                </button>
+              </div>
+              
+              {formData.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {formData.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}
+                      <button
+                        type="button"
+                        onClick={() => removeTag(tag)}
+                        className="flex-shrink-0 ml-1 text-accent-blue rounded-full hover:text-blue-400 focus:outline-none"
+                      >
+                        <span className="sr-only">Remove tag {tag}</span>
+                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                        </svg>
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </form>
+          
+          {/* Footer */}
+          <div className="px-4 py-3 bg-card-bg flex justify-end space-x-3 border-t border-card-border">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-foreground bg-card-bg/70 border border-card-border rounded-md shadow-sm hover:bg-card-bg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSubmit}
+              className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-accent-blue border border-transparent rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
+            >
+              Create Link
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 

app/components/ui/ThemeToggle.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+
+export default function ThemeToggle() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  // Initialize theme on component mount
+  useEffect(() => {
+    const isDarkMode = localStorage.getItem('darkMode') === 'true';
+    setDarkMode(isDarkMode);
+    
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  // Update theme when darkMode state changes
+  const toggleTheme = () => {
+    const newDarkMode = !darkMode;
+    setDarkMode(newDarkMode);
+    localStorage.setItem('darkMode', newDarkMode.toString());
+    
+    if (newDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-md bg-card-bg border border-card-border hover:bg-card-bg/80 transition-colors"
+      aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {darkMode ? (
+        <svg
+          className="w-5 h-5 text-accent-yellow"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ) : (
+        <svg
+          className="w-5 h-5 text-foreground"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      )}
+    </button>
+  );
+}