3317553658
Dashboard page:
- Fetch top clients from /api/dashboard/by-client
- Show loading state while fetching
- Display empty state when no client data
- Show real client_id, job count, and success rate
Scrapers page:
- Fetch versions from /api/admin/scrapers
- Wire promote/deprecate buttons to real API calls
- Wire add version form to POST /api/admin/scrapers
- Wire traffic allocation to PUT /api/admin/scrapers/{id}/traffic
- Add loading and error states
Dockerfile:
- Add COPY commands for new directories (api/, core/, scrapers/, etc.)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
608 lines
22 KiB
TypeScript
608 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState, useMemo, useEffect } from 'react';
|
|
import { useJobs } from '@/contexts/JobsContext';
|
|
import { JobStatus } from '@/components/ScraperTest';
|
|
|
|
// API base URL
|
|
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
|
|
|
// Client stats type from API
|
|
interface ClientStats {
|
|
client_id: string;
|
|
source: string | null;
|
|
total_jobs: number;
|
|
completed: number;
|
|
failed: number;
|
|
success_rate: number;
|
|
total_reviews: number;
|
|
}
|
|
|
|
function formatDuration(seconds: number): string {
|
|
if (seconds < 60) return `${seconds.toFixed(1)}s`;
|
|
const mins = Math.floor(seconds / 60);
|
|
const secs = Math.round(seconds % 60);
|
|
return `${mins}m ${secs}s`;
|
|
}
|
|
|
|
function extractBusinessName(job: JobStatus): string {
|
|
if (job.business_name) return job.business_name;
|
|
try {
|
|
const urlObj = new URL(job.url);
|
|
const query = urlObj.searchParams.get('query');
|
|
return query ? decodeURIComponent(query) : 'Unknown Business';
|
|
} catch {
|
|
return 'Unknown Business';
|
|
}
|
|
}
|
|
|
|
function formatDate(date: Date): string {
|
|
return date.toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
function getErrorType(errorMessage: string | null): string {
|
|
if (!errorMessage) return 'Unknown Error';
|
|
const msg = errorMessage.toLowerCase();
|
|
if (msg.includes('timeout')) return 'Timeout';
|
|
if (msg.includes('network') || msg.includes('connection')) return 'Network Error';
|
|
if (msg.includes('captcha') || msg.includes('bot')) return 'Bot Detection';
|
|
if (msg.includes('element') || msg.includes('selector')) return 'Element Not Found';
|
|
if (msg.includes('memory')) return 'Memory Error';
|
|
return 'Scrape Error';
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { jobs, isLoading } = useJobs();
|
|
const [currentDate] = useState(new Date());
|
|
const [clients, setClients] = useState<ClientStats[]>([]);
|
|
const [clientsLoading, setClientsLoading] = useState(true);
|
|
|
|
// Fetch client stats from API
|
|
useEffect(() => {
|
|
async function fetchClients() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/dashboard/by-client?limit=5`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setClients(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch client stats:', error);
|
|
} finally {
|
|
setClientsLoading(false);
|
|
}
|
|
}
|
|
fetchClients();
|
|
}, []);
|
|
|
|
// Calculate stats from jobs data
|
|
const stats = useMemo(() => {
|
|
const now = new Date();
|
|
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
|
|
|
// Jobs from last 24 hours
|
|
const recentJobs = jobs.filter(
|
|
(j) => new Date(j.created_at) >= oneDayAgo
|
|
);
|
|
|
|
// Currently running jobs
|
|
const activeJobs = jobs.filter((j) => j.status === 'running');
|
|
|
|
// Completed jobs from last 24h
|
|
const completedRecent = recentJobs.filter(
|
|
(j) => j.status === 'completed'
|
|
);
|
|
|
|
// Failed jobs from last 24h
|
|
const failedRecent = recentJobs.filter(
|
|
(j) => j.status === 'failed'
|
|
);
|
|
|
|
// Calculate success rate
|
|
const totalWithOutcome = completedRecent.length + failedRecent.length;
|
|
const successRate =
|
|
totalWithOutcome > 0
|
|
? (completedRecent.length / totalWithOutcome) * 100
|
|
: 0;
|
|
|
|
// Calculate average duration for completed jobs
|
|
const completedWithTime = jobs.filter(
|
|
(j) => j.status === 'completed' && j.scrape_time !== null
|
|
);
|
|
const avgDuration =
|
|
completedWithTime.length > 0
|
|
? completedWithTime.reduce((sum, j) => sum + (j.scrape_time || 0), 0) /
|
|
completedWithTime.length
|
|
: 0;
|
|
|
|
// Previous 24h for trend comparison
|
|
const twoDaysAgo = new Date(now.getTime() - 48 * 60 * 60 * 1000);
|
|
const previousDayJobs = jobs.filter(
|
|
(j) =>
|
|
new Date(j.created_at) >= twoDaysAgo &&
|
|
new Date(j.created_at) < oneDayAgo
|
|
);
|
|
|
|
const jobsTrend = recentJobs.length - previousDayJobs.length;
|
|
|
|
return {
|
|
totalJobs24h: recentJobs.length,
|
|
jobsTrend,
|
|
successRate: successRate.toFixed(1),
|
|
activeJobs: activeJobs.length,
|
|
avgDuration,
|
|
};
|
|
}, [jobs]);
|
|
|
|
// Jobs by status counts
|
|
const statusCounts = useMemo(() => {
|
|
return {
|
|
pending: jobs.filter((j) => j.status === 'pending').length,
|
|
running: jobs.filter((j) => j.status === 'running').length,
|
|
completed: jobs.filter((j) => j.status === 'completed').length,
|
|
failed: jobs.filter((j) => j.status === 'failed').length,
|
|
partial: jobs.filter((j) => j.status === 'partial').length,
|
|
};
|
|
}, [jobs]);
|
|
|
|
// Recent failed jobs
|
|
const recentFailedJobs = useMemo(() => {
|
|
return jobs
|
|
.filter((j) => j.status === 'failed' || j.status === 'partial')
|
|
.sort(
|
|
(a, b) =>
|
|
new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
|
|
)
|
|
.slice(0, 5);
|
|
}, [jobs]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="h-full flex items-center justify-center">
|
|
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">ReviewIQ Dashboard</h1>
|
|
<p className="text-sm text-gray-600 mt-1">{formatDate(currentDate)}</p>
|
|
</div>
|
|
|
|
{/* System Health Cards */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
{/* Total Jobs (24h) */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-5">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-gray-500">
|
|
Total Jobs (24h)
|
|
</span>
|
|
<div className="p-2 bg-blue-100 rounded-lg">
|
|
<svg
|
|
className="w-5 h-5 text-blue-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-end gap-2">
|
|
<span className="text-3xl font-bold text-gray-900">
|
|
{stats.totalJobs24h}
|
|
</span>
|
|
{stats.jobsTrend !== 0 && (
|
|
<span
|
|
className={`flex items-center text-sm font-medium mb-1 ${
|
|
stats.jobsTrend > 0 ? 'text-green-600' : 'text-red-600'
|
|
}`}
|
|
>
|
|
{stats.jobsTrend > 0 ? (
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 14l-7 7m0 0l-7-7m7 7V3"
|
|
/>
|
|
</svg>
|
|
)}
|
|
{Math.abs(stats.jobsTrend)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Success Rate (24h) */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-5">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-gray-500">
|
|
Success Rate (24h)
|
|
</span>
|
|
<div className="p-2 bg-green-100 rounded-lg">
|
|
<svg
|
|
className="w-5 h-5 text-green-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-end gap-2">
|
|
<span className="text-3xl font-bold text-gray-900">
|
|
{stats.successRate}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Jobs */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-5">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-gray-500">
|
|
Active Jobs
|
|
</span>
|
|
<div className="p-2 bg-yellow-100 rounded-lg">
|
|
<svg
|
|
className="w-5 h-5 text-yellow-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-end gap-2">
|
|
<span className="text-3xl font-bold text-gray-900">
|
|
{stats.activeJobs}
|
|
</span>
|
|
{stats.activeJobs > 0 && (
|
|
<span className="flex items-center text-sm font-medium text-yellow-600 mb-1">
|
|
<div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse mr-1" />
|
|
Running
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Avg Duration */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-5">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-gray-500">
|
|
Avg Duration
|
|
</span>
|
|
<div className="p-2 bg-purple-100 rounded-lg">
|
|
<svg
|
|
className="w-5 h-5 text-purple-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-end gap-2">
|
|
<span className="text-3xl font-bold text-gray-900">
|
|
{stats.avgDuration > 0 ? formatDuration(stats.avgDuration) : '--'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Jobs by Status */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-5 mb-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Jobs by Status
|
|
</h2>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Link
|
|
href="/jobs?status=pending"
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
|
>
|
|
<span className="w-3 h-3 rounded-full bg-gray-400" />
|
|
<span className="font-medium text-gray-700">Pending</span>
|
|
<span className="px-2 py-0.5 bg-gray-200 rounded-full text-sm font-bold text-gray-600">
|
|
{statusCounts.pending}
|
|
</span>
|
|
</Link>
|
|
<Link
|
|
href="/jobs?status=running"
|
|
className="flex items-center gap-2 px-4 py-2 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
|
|
>
|
|
<span className="w-3 h-3 rounded-full bg-blue-500 animate-pulse" />
|
|
<span className="font-medium text-blue-700">Running</span>
|
|
<span className="px-2 py-0.5 bg-blue-200 rounded-full text-sm font-bold text-blue-700">
|
|
{statusCounts.running}
|
|
</span>
|
|
</Link>
|
|
<Link
|
|
href="/jobs?status=completed"
|
|
className="flex items-center gap-2 px-4 py-2 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
|
|
>
|
|
<span className="w-3 h-3 rounded-full bg-green-500" />
|
|
<span className="font-medium text-green-700">Completed</span>
|
|
<span className="px-2 py-0.5 bg-green-200 rounded-full text-sm font-bold text-green-700">
|
|
{statusCounts.completed}
|
|
</span>
|
|
</Link>
|
|
<Link
|
|
href="/jobs?status=partial"
|
|
className="flex items-center gap-2 px-4 py-2 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
|
|
>
|
|
<span className="w-3 h-3 rounded-full bg-orange-500" />
|
|
<span className="font-medium text-orange-700">Partial</span>
|
|
<span className="px-2 py-0.5 bg-orange-200 rounded-full text-sm font-bold text-orange-700">
|
|
{statusCounts.partial}
|
|
</span>
|
|
</Link>
|
|
<Link
|
|
href="/jobs?status=failed"
|
|
className="flex items-center gap-2 px-4 py-2 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
|
|
>
|
|
<span className="w-3 h-3 rounded-full bg-red-500" />
|
|
<span className="font-medium text-red-700">Failed</span>
|
|
<span className="px-2 py-0.5 bg-red-200 rounded-full text-sm font-bold text-red-700">
|
|
{statusCounts.failed}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Two Column Layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Recent Problems */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-5">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|
Recent Problems
|
|
</h2>
|
|
<Link
|
|
href="/jobs?status=failed"
|
|
className="text-sm text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
View all
|
|
</Link>
|
|
</div>
|
|
{recentFailedJobs.length === 0 ? (
|
|
<div className="py-8 text-center text-gray-500">
|
|
<svg
|
|
className="w-12 h-12 mx-auto mb-3 opacity-30"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.5}
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<p className="font-medium">No recent failures</p>
|
|
<p className="text-sm mt-1">All systems running smoothly</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{recentFailedJobs.map((job) => (
|
|
<Link
|
|
key={job.job_id}
|
|
href={`/jobs/${job.job_id}`}
|
|
className="block p-3 bg-red-50 border border-red-100 rounded-lg hover:border-red-300 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between mb-1">
|
|
<span
|
|
className={`px-2 py-0.5 rounded text-xs font-semibold ${
|
|
job.status === 'failed'
|
|
? 'bg-red-200 text-red-800'
|
|
: 'bg-orange-200 text-orange-800'
|
|
}`}
|
|
>
|
|
{getErrorType(job.error_message)}
|
|
</span>
|
|
<span className="text-xs text-gray-500">
|
|
{new Date(job.created_at).toLocaleTimeString()}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm font-medium text-gray-800 truncate">
|
|
{extractBusinessName(job)}
|
|
</p>
|
|
<p className="text-xs text-gray-500 truncate mt-1">
|
|
{job.url}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Top Clients */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-5">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Top Clients</h2>
|
|
<Link
|
|
href="/dashboard/clients"
|
|
className="text-sm text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
View all
|
|
</Link>
|
|
</div>
|
|
{clientsLoading ? (
|
|
<div className="py-8 flex justify-center">
|
|
<div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
) : clients.length === 0 ? (
|
|
<div className="py-8 text-center text-gray-500">
|
|
<svg
|
|
className="w-12 h-12 mx-auto mb-3 opacity-30"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.5}
|
|
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
|
/>
|
|
</svg>
|
|
<p className="font-medium">No client data yet</p>
|
|
<p className="text-sm mt-1">Run jobs with requester metadata to see stats</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{clients.map((client, index) => (
|
|
<div
|
|
key={client.client_id}
|
|
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-xs font-bold">
|
|
{index + 1}
|
|
</span>
|
|
<div>
|
|
<p className="font-medium text-gray-800">
|
|
{client.client_id}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
{client.total_jobs} jobs
|
|
{client.source && ` · ${client.source}`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p
|
|
className={`font-semibold ${
|
|
client.success_rate >= 90
|
|
? 'text-green-600'
|
|
: client.success_rate >= 80
|
|
? 'text-yellow-600'
|
|
: 'text-red-600'
|
|
}`}
|
|
>
|
|
{client.success_rate.toFixed(1)}%
|
|
</p>
|
|
<p className="text-xs text-gray-500">success</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<Link
|
|
href="/new"
|
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 4v16m8-8H4"
|
|
/>
|
|
</svg>
|
|
New Scrape
|
|
</Link>
|
|
<Link
|
|
href="/jobs"
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
|
/>
|
|
</svg>
|
|
View All Jobs
|
|
</Link>
|
|
<Link
|
|
href="/analytics"
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<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>
|
|
Analytics
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|