Fix: Conversion complète vers PrimeReact et corrections build
CONVERSIONS UI (8 pages): ✅ Remplacement de tous les composants Shadcn/UI par PrimeReact - Card, Button, Input, Textarea, Badge → Card, Button, InputText, InputTextarea, Tag - Conversion de toutes les icônes lucide-react en primeicons Pages converties: - app/(main)/aide/page.tsx - app/(main)/aide/documentation/page.tsx - app/(main)/aide/tutoriels/page.tsx - app/(main)/aide/support/page.tsx - app/(main)/messages/page.tsx - app/(main)/messages/nouveau/page.tsx - app/(main)/messages/envoyes/page.tsx - app/(main)/messages/archives/page.tsx CORRECTIONS BUILD: ✅ Résolution des conflits de dépendances FullCalendar - @fullcalendar/core: 6.1.4 → ^6.1.19 - Alignement avec daygrid, timegrid, interaction, react ✅ Correction des erreurs TypeScript - DataTable: Ajout de selectionMode="multiple" - InputText number: Conversion number → string avec .toString() ✅ Correction des services API (3 fichiers) - fournisseurService.ts - notificationService.ts - userService.ts - Remplacement des appels apiService.get() par axios direct - Ajout du préfixe /api/v1/ à tous les endpoints - Configuration d'interceptors pour authentication tokens RÉSULTAT: ✅ Build réussi: 126 pages générées ✅ 0 erreurs de compilation ✅ 0 erreurs TypeScript ✅ Architecture cohérente avec PrimeReact 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
dahoud
@@ -1,225 +1,287 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
BookOpen,
|
||||
Video,
|
||||
MessageCircle,
|
||||
Search,
|
||||
FileText,
|
||||
HelpCircle,
|
||||
Lightbulb,
|
||||
Phone,
|
||||
Mail,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import React, { useState } from "react";
|
||||
import { Card } from "primereact/card";
|
||||
import { Button } from "primereact/button";
|
||||
import { InputText } from "primereact/inputtext";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
/**
|
||||
* Page principale du centre d'aide
|
||||
* Point d'entrée pour accéder à toute l'aide et la documentation
|
||||
*/
|
||||
export default function AidePage() {
|
||||
const router = useRouter();
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const categories = [
|
||||
{
|
||||
title: "Démarrage rapide",
|
||||
description: "Premiers pas avec BTPXpress",
|
||||
icon: Lightbulb,
|
||||
icon: "pi pi-lightbulb",
|
||||
color: "bg-blue-100 text-blue-600",
|
||||
articles: 12,
|
||||
link: "/aide/documentation",
|
||||
},
|
||||
{
|
||||
title: "Gestion des chantiers",
|
||||
description: "Créer et gérer vos chantiers",
|
||||
icon: FileText,
|
||||
icon: "pi pi-file",
|
||||
color: "bg-green-100 text-green-600",
|
||||
articles: 25,
|
||||
link: "/aide/documentation",
|
||||
},
|
||||
{
|
||||
title: "Facturation",
|
||||
description: "Devis, factures et paiements",
|
||||
icon: BookOpen,
|
||||
icon: "pi pi-book",
|
||||
color: "bg-purple-100 text-purple-600",
|
||||
articles: 18,
|
||||
link: "/aide/documentation",
|
||||
},
|
||||
{
|
||||
title: "Équipes et planning",
|
||||
description: "Gérer vos équipes et plannings",
|
||||
icon: Video,
|
||||
color: "bg-orange-100 text-orange-600",
|
||||
icon: "pi pi-users",
|
||||
color: "bg-yellow-100 text-yellow-600",
|
||||
articles: 15,
|
||||
link: "/aide/documentation",
|
||||
},
|
||||
{
|
||||
title: "Matériel",
|
||||
description: "Gestion du matériel et stock",
|
||||
icon: "pi pi-box",
|
||||
color: "bg-red-100 text-red-600",
|
||||
articles: 10,
|
||||
link: "/aide/documentation",
|
||||
},
|
||||
{
|
||||
title: "Rapports",
|
||||
description: "Générer et analyser vos rapports",
|
||||
icon: "pi pi-chart-bar",
|
||||
color: "bg-indigo-100 text-indigo-600",
|
||||
articles: 8,
|
||||
link: "/aide/documentation",
|
||||
},
|
||||
];
|
||||
|
||||
const articlesPopulaires = [
|
||||
"Comment créer un nouveau chantier ?",
|
||||
"Gérer les devis et les factures",
|
||||
"Planifier l'utilisation du matériel",
|
||||
"Ajouter des membres à une équipe",
|
||||
"Générer des rapports d'activité",
|
||||
const resources = [
|
||||
{
|
||||
title: "Documentation complète",
|
||||
description: "Guides détaillés et tutoriels pas à pas",
|
||||
icon: "pi pi-book",
|
||||
color: "bg-blue-600",
|
||||
link: "/aide/documentation",
|
||||
},
|
||||
{
|
||||
title: "Tutoriels vidéo",
|
||||
description: "Apprenez en vidéo avec nos tutoriels",
|
||||
icon: "pi pi-video",
|
||||
color: "bg-red-600",
|
||||
link: "/aide/tutoriels",
|
||||
},
|
||||
{
|
||||
title: "Support technique",
|
||||
description: "Contactez notre équipe d'assistance",
|
||||
icon: "pi pi-headphones",
|
||||
color: "bg-green-600",
|
||||
link: "/aide/support",
|
||||
},
|
||||
];
|
||||
|
||||
const popularArticles = [
|
||||
{
|
||||
title: "Comment créer votre premier chantier ?",
|
||||
views: 1543,
|
||||
category: "Chantiers",
|
||||
},
|
||||
{
|
||||
title: "Gérer les phases et sous-phases",
|
||||
views: 1234,
|
||||
category: "Chantiers",
|
||||
},
|
||||
{
|
||||
title: "Créer un devis rapidement",
|
||||
views: 1156,
|
||||
category: "Facturation",
|
||||
},
|
||||
{
|
||||
title: "Planifier les équipes efficacement",
|
||||
views: 987,
|
||||
category: "Équipes",
|
||||
},
|
||||
{
|
||||
title: "Exporter vos données",
|
||||
views: 876,
|
||||
category: "Rapports",
|
||||
},
|
||||
];
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (searchTerm.trim()) {
|
||||
router.push(`/aide/documentation?search=${encodeURIComponent(searchTerm)}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-6">
|
||||
<div className="space-y-6 p-6">
|
||||
{/* En-tête */}
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-4xl font-bold text-gray-900">
|
||||
Comment pouvons-nous vous aider ?
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-3">
|
||||
<i className="pi pi-question-circle mr-3"></i>
|
||||
Centre d'aide
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Recherchez dans notre base de connaissances ou contactez notre support
|
||||
<p className="text-xl text-gray-600">
|
||||
Comment pouvons-nous vous aider aujourd'hui ?
|
||||
</p>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
<Input
|
||||
</div>
|
||||
|
||||
{/* Barre de recherche */}
|
||||
<Card className="mb-6">
|
||||
<form onSubmit={handleSearch}>
|
||||
<div className="p-inputgroup flex-1">
|
||||
<span className="p-inputgroup-addon">
|
||||
<i className="pi pi-search"></i>
|
||||
</span>
|
||||
<InputText
|
||||
placeholder="Rechercher dans l'aide..."
|
||||
className="pl-12 h-12 text-lg"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full"
|
||||
style={{ fontSize: '1.1rem', padding: '1rem' }}
|
||||
/>
|
||||
<Button
|
||||
label="Rechercher"
|
||||
type="submit"
|
||||
icon="pi pi-search"
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
{/* Accès rapide */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Link href="/aide/documentation">
|
||||
<Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-blue-100 rounded-lg">
|
||||
<BookOpen className="h-6 w-6 text-blue-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg mb-2">Documentation</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Guides complets et documentation technique
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<Link href="/aide/tutoriels">
|
||||
<Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-green-100 rounded-lg">
|
||||
<Video className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg mb-2">Tutoriels</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Vidéos et guides pas-à-pas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<Link href="/aide/support">
|
||||
<Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-purple-100 rounded-lg">
|
||||
<MessageCircle className="h-6 w-6 text-purple-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg mb-2">Support</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Contactez notre équipe d'assistance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Catégories populaires */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
Catégories populaires
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{categories.map((category) => (
|
||||
<Card
|
||||
key={category.title}
|
||||
className="p-6 hover:shadow-lg transition-shadow cursor-pointer"
|
||||
>
|
||||
<div className={`p-3 ${category.color} rounded-lg w-fit mb-4`}>
|
||||
<category.icon className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">{category.title}</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">{category.description}</p>
|
||||
<p className="text-sm text-blue-600 font-medium">
|
||||
{category.articles} articles
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Articles populaires */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
Articles populaires
|
||||
</h2>
|
||||
<Card>
|
||||
<div className="divide-y">
|
||||
{articlesPopulaires.map((article, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 hover:bg-gray-50 cursor-pointer flex items-center justify-between group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<HelpCircle className="h-5 w-5 text-gray-400" />
|
||||
<span className="text-gray-900">{article}</span>
|
||||
{/* Ressources principales */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{resources.map((resource, index) => (
|
||||
<Link key={index} href={resource.link}>
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
|
||||
<div className="flex flex-column align-items-center text-center">
|
||||
<div
|
||||
className={`${resource.color} text-white border-round`}
|
||||
style={{ padding: '1.5rem', marginBottom: '1rem' }}
|
||||
>
|
||||
<i className={`${resource.icon} text-4xl`}></i>
|
||||
</div>
|
||||
<ExternalLink className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<h3 className="text-xl font-bold mb-2">{resource.title}</h3>
|
||||
<p className="text-gray-600">{resource.description}</p>
|
||||
<Button
|
||||
label="Accéder"
|
||||
icon="pi pi-arrow-right"
|
||||
className="mt-3"
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contact direct */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card className="p-6 bg-blue-50 border-blue-200">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-blue-600 rounded-lg">
|
||||
<Phone className="h-6 w-6 text-white" />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Catégories */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
<i className="pi pi-th-large mr-2"></i>
|
||||
Parcourir par catégorie
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{categories.map((category, index) => (
|
||||
<Link key={index} href={category.link}>
|
||||
<div className="p-4 border border-gray-200 rounded hover:shadow-md transition-shadow cursor-pointer">
|
||||
<div className="flex align-items-start gap-3">
|
||||
<div className={`${category.color} border-round p-3`}>
|
||||
<i className={`${category.icon} text-2xl`}></i>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg mb-1">
|
||||
{category.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
{category.description}
|
||||
</p>
|
||||
<span className="text-xs text-gray-500">
|
||||
{category.articles} articles
|
||||
</span>
|
||||
</div>
|
||||
<i className="pi pi-chevron-right text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg mb-2 text-blue-900">
|
||||
Support téléphonique
|
||||
</h3>
|
||||
<p className="text-sm text-blue-700 mb-3">
|
||||
Disponible du lundi au vendredi de 9h à 18h
|
||||
</p>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||
+33 1 23 45 67 89
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 bg-green-50 border-green-200">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-green-600 rounded-lg">
|
||||
<Mail className="h-6 w-6 text-white" />
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Articles populaires */}
|
||||
<Card>
|
||||
<h3 className="text-xl font-semibold mb-4">
|
||||
<i className="pi pi-star mr-2"></i>
|
||||
Articles populaires
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{popularArticles.map((article, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-3 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer transition-colors"
|
||||
>
|
||||
<h4 className="font-medium text-sm mb-1">{article.title}</h4>
|
||||
<div className="flex justify-content-between align-items-center text-xs text-gray-500">
|
||||
<span className="bg-gray-200 px-2 py-1 rounded">
|
||||
{article.category}
|
||||
</span>
|
||||
<span>
|
||||
<i className="pi pi-eye mr-1"></i>
|
||||
{article.views.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg mb-2 text-green-900">
|
||||
Support par email
|
||||
</h3>
|
||||
<p className="text-sm text-green-700 mb-3">
|
||||
Réponse sous 24h ouvrées
|
||||
</Card>
|
||||
|
||||
{/* Contact */}
|
||||
<Card className="bg-gradient-to-br from-blue-50 to-blue-100">
|
||||
<div className="text-center">
|
||||
<div className="bg-blue-600 text-white border-round inline-block p-3 mb-3">
|
||||
<i className="pi pi-phone text-2xl"></i>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">Besoin d'aide ?</h3>
|
||||
<p className="text-sm text-gray-700 mb-3">
|
||||
Notre équipe est disponible pour vous assister
|
||||
</p>
|
||||
<Button className="bg-green-600 hover:bg-green-700">
|
||||
support@btpxpress.fr
|
||||
</Button>
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm">
|
||||
<i className="pi pi-phone mr-2"></i>
|
||||
<span className="font-semibold">+33 1 23 45 67 89</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<i className="pi pi-envelope mr-2"></i>
|
||||
<span className="font-semibold">support@btpxpress.fr</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
label="Contacter le support"
|
||||
icon="pi pi-send"
|
||||
className="mt-3 w-full"
|
||||
onClick={() => router.push('/aide/support')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user