feat: implement core platform features including business directory, admin dashboard, authentication, and API infrastructure
Some checks failed
Build and Push App / build (push) Failing after 16m2s
Some checks failed
Build and Push App / build (push) Failing after 16m2s
This commit is contained in:
@@ -3,61 +3,100 @@ import React from 'react';
|
||||
import { Eye, Star } from 'lucide-react';
|
||||
import { Business } from '../../types';
|
||||
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
BarChart,
|
||||
Bar
|
||||
} from 'recharts';
|
||||
|
||||
const MousePointerClick = ({className}: {className?:string}) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
||||
<path d="M14 4.1 12 6" /><path d="m5.1 8-2.9-.8" /><path d="m6 12-1.9 2" /><path d="M7.2 2.2 8 5.1" /><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DashboardOverview = ({ business, stats }: { business: Business, stats: { totalViews: number, contactClicks: number } | null }) => (
|
||||
interface DayStat {
|
||||
date: string;
|
||||
views: number;
|
||||
clicks: number;
|
||||
}
|
||||
|
||||
const CustomTooltip = ({ active, payload, label, color }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-white p-3 shadow-xl border border-gray-100 rounded-lg">
|
||||
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">{label}</p>
|
||||
<p className="text-lg font-bold" style={{ color }}>
|
||||
{payload[0].value} {payload[0].name === 'views' ? 'Vues' : 'Clics'}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const DashboardOverview = ({ business, stats }: {
|
||||
business: Business,
|
||||
stats: {
|
||||
totalViews: number,
|
||||
contactClicks: number,
|
||||
dailyStats: DayStat[]
|
||||
} | null
|
||||
}) => (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-bold font-serif text-gray-900">Tableau de bord</h2>
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-3">
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="bg-white overflow-hidden shadow-sm border border-gray-100 rounded-xl">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 bg-brand-100 rounded-md p-3">
|
||||
<div className="flex-shrink-0 bg-brand-50 rounded-lg p-3">
|
||||
<Eye className="h-6 w-6 text-brand-600" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Vues de la fiche</dt>
|
||||
<dd>
|
||||
<div className="text-lg font-medium text-gray-900">{stats ? stats.totalViews : business.viewCount}</div>
|
||||
<dd className="flex items-baseline">
|
||||
<div className="text-2xl font-bold text-gray-900">{stats ? stats.totalViews : business.viewCount}</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="bg-white overflow-hidden shadow-sm border border-gray-100 rounded-xl">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 bg-blue-100 rounded-md p-3">
|
||||
<div className="flex-shrink-0 bg-blue-50 rounded-lg p-3">
|
||||
<MousePointerClick className="h-6 w-6 text-blue-600" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Clics Contact</dt>
|
||||
<dd>
|
||||
<div className="text-lg font-medium text-gray-900">{stats ? stats.contactClicks : '...'}</div>
|
||||
<dd className="flex items-baseline">
|
||||
<div className="text-2xl font-bold text-gray-900">{stats ? stats.contactClicks : '...'}</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="bg-white overflow-hidden shadow-sm border border-gray-100 rounded-xl">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 bg-yellow-100 rounded-md p-3">
|
||||
<div className="flex-shrink-0 bg-yellow-50 rounded-lg p-3">
|
||||
<Star className="h-6 w-6 text-yellow-600" />
|
||||
</div>
|
||||
<div className="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Note moyenne</dt>
|
||||
<dd>
|
||||
<div className="text-lg font-medium text-gray-900">{business.rating}/5</div>
|
||||
<dd className="flex items-baseline">
|
||||
<div className="text-2xl font-bold text-gray-900">{business.rating}/5</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
@@ -66,11 +105,90 @@ const DashboardOverview = ({ business, stats }: { business: Business, stats: { t
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow rounded-lg p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">Performances 30 derniers jours</h3>
|
||||
<div className="h-64 bg-gray-50 rounded border border-dashed border-gray-200 flex items-center justify-center text-gray-400">
|
||||
Graphique des visites (À venir en Phase 2)
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-white shadow-sm border border-gray-100 rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-bold text-gray-900">Historique des Visites</h3>
|
||||
<div className="px-2 py-1 bg-brand-50 text-brand-700 text-[10px] font-bold uppercase rounded leading-none">30 derniers jours</div>
|
||||
</div>
|
||||
<div className="h-72 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={stats?.dailyStats || []}>
|
||||
<defs>
|
||||
<linearGradient id="colorViews" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#d97706" stopOpacity={0.3}/>
|
||||
<stop offset="95%" stopColor="#d97706" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f3f4f6" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{fill: '#9ca3af', fontSize: 10}}
|
||||
interval={6}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{fill: '#9ca3af', fontSize: 10}}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip color="#d97706" />} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="views"
|
||||
name="views"
|
||||
stroke="#d97706"
|
||||
strokeWidth={3}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorViews)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-sm border border-gray-100 rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-bold text-gray-900">Interactions Contact</h3>
|
||||
<div className="px-2 py-1 bg-blue-50 text-blue-700 text-[10px] font-bold uppercase rounded leading-none">30 derniers jours</div>
|
||||
</div>
|
||||
<div className="h-72 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={stats?.dailyStats || []}>
|
||||
<defs>
|
||||
<linearGradient id="colorClicks" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#2563eb" stopOpacity={0.3}/>
|
||||
<stop offset="95%" stopColor="#2563eb" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f3f4f6" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{fill: '#9ca3af', fontSize: 10}}
|
||||
interval={6}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{fill: '#9ca3af', fontSize: 10}}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip color="#2563eb" />} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="clicks"
|
||||
name="clicks"
|
||||
stroke="#2563eb"
|
||||
strokeWidth={3}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorClicks)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user