From a5adb84a6218e565479457983b17fa0d8256f0bf Mon Sep 17 00:00:00 2001 From: DahoudG Date: Fri, 31 Oct 2025 13:24:12 +0000 Subject: [PATCH] Fix: Correction des types TypeScript et validation du build production MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Corrections apportées: 1. **Utilisation correcte des services exportés** - Remplacement de apiService.X par les services nommés (chantierService, clientService, etc.) - Alignement avec l'architecture d'export du fichier services/api.ts 2. **Correction des types d'interface** - Utilisation des types officiels depuis @/types/btp - Chantier: suppression des propriétés custom, utilisation du type standard - Client: ajout des imports Chantier et Facture - Materiel: adaptation aux propriétés réelles (numeroSerie au lieu de reference) - PlanningEvent: remplacement de TacheChantier par PlanningEvent 3. **Correction des propriétés obsolètes** - Chantier: dateFin → dateFinPrevue, budget → montantPrevu, responsable → typeChantier - Client: typeClient → entreprise, suppression de chantiers/factures inexistants - Materiel: reference → numeroSerie, prixAchat → valeurAchat - PlanningEvent: nom → titre, suppression de progression 4. **Correction des enums** - StatutFacture: EN_ATTENTE → ENVOYEE/BROUILLON/PARTIELLEMENT_PAYEE - PrioritePlanningEvent: MOYENNE → CRITIQUE/HAUTE/NORMALE/BASSE 5. **Fix async/await pour cookies()** - Ajout de await pour cookies() dans les routes API (Next.js 15 requirement) - app/api/auth/logout/route.ts - app/api/auth/token/route.ts - app/api/auth/userinfo/route.ts 6. **Fix useSearchParams() Suspense** - Enveloppement de useSearchParams() dans un Suspense boundary - Création d'un composant LoginContent séparé - Ajout d'un fallback avec spinner Résultat: ✅ Build production réussi: 126 pages générées ✅ Compilation TypeScript sans erreurs ✅ Linting validé ✅ Middleware 34.4 kB ✅ First Load JS shared: 651 kB 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .env.production | 56 +- Dockerfile | 136 +-- app/(main)/chantiers/[id]/budget/page.tsx | 4 +- app/(main)/chantiers/[id]/page.tsx | 47 +- app/(main)/chantiers/[id]/planning/page.tsx | 69 +- app/(main)/chantiers/retard/page.tsx | 958 ++++++++++---------- app/(main)/clients/[id]/page.tsx | 123 +-- app/(main)/materiels/[id]/page.tsx | 95 +- app/api/auth/logout/route.ts | 2 +- app/api/auth/token/route.ts | 2 +- app/api/auth/userinfo/route.ts | 2 +- app/auth/login/page.tsx | 16 +- env.example | 32 +- next.config.js | 248 ++--- tsconfig.json | 82 +- 15 files changed, 841 insertions(+), 1031 deletions(-) diff --git a/.env.production b/.env.production index 0ccf621..17562e9 100644 --- a/.env.production +++ b/.env.production @@ -1,28 +1,28 @@ -# Production environment configuration for BTP Xpress Frontend -# This file is used during the Docker build process for production deployments - -# API Backend - Points to the backend via Ingress at api.lions.dev/btpxpress -NEXT_PUBLIC_API_URL=https://api.lions.dev/btpxpress - -# Keycloak Configuration -NEXT_PUBLIC_KEYCLOAK_URL=https://security.lions.dev -NEXT_PUBLIC_KEYCLOAK_REALM=btpxpress -NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=btpxpress-frontend - -# Application -NEXT_PUBLIC_APP_NAME=BTP Xpress -NEXT_PUBLIC_APP_VERSION=1.0.0 -NEXT_PUBLIC_APP_DESCRIPTION=Plateforme de gestion BTP -NEXT_PUBLIC_APP_ENV=production - -# Theme -NEXT_PUBLIC_DEFAULT_THEME=blue -NEXT_PUBLIC_DEFAULT_THEME_MODE=light - -# Security -NEXT_PUBLIC_SESSION_TIMEOUT=1800 -NEXT_PUBLIC_SECURITY_STRICT_MODE=true -NEXT_PUBLIC_ENABLE_CLIENT_VALIDATION=true - -# Debug - disabled in production -NEXT_PUBLIC_DEBUG=false +# Production environment configuration for BTP Xpress Frontend +# This file is used during the Docker build process for production deployments + +# API Backend - Points to the backend via Ingress at api.lions.dev/btpxpress +NEXT_PUBLIC_API_URL=https://api.lions.dev/btpxpress + +# Keycloak Configuration +NEXT_PUBLIC_KEYCLOAK_URL=https://security.lions.dev +NEXT_PUBLIC_KEYCLOAK_REALM=btpxpress +NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=btpxpress-frontend + +# Application +NEXT_PUBLIC_APP_NAME=BTP Xpress +NEXT_PUBLIC_APP_VERSION=1.0.0 +NEXT_PUBLIC_APP_DESCRIPTION=Plateforme de gestion BTP +NEXT_PUBLIC_APP_ENV=production + +# Theme +NEXT_PUBLIC_DEFAULT_THEME=blue +NEXT_PUBLIC_DEFAULT_THEME_MODE=light + +# Security +NEXT_PUBLIC_SESSION_TIMEOUT=1800 +NEXT_PUBLIC_SECURITY_STRICT_MODE=true +NEXT_PUBLIC_ENABLE_CLIENT_VALIDATION=true + +# Debug - disabled in production +NEXT_PUBLIC_DEBUG=false diff --git a/Dockerfile b/Dockerfile index 8a4d24a..ed391c5 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,68 +1,68 @@ -#### -# This Dockerfile is used to build a production-ready Next.js application -#### - -## Stage 1: Dependencies -FROM node:20-alpine AS deps -WORKDIR /app - -# Install dependencies based on the preferred package manager -COPY package.json package-lock.json* ./ -RUN npm ci --only=production - -## Stage 2: Build -FROM node:20-alpine AS builder -WORKDIR /app - -COPY package.json package-lock.json* ./ -RUN npm ci - -COPY . . - -# Build arguments for NEXT_PUBLIC variables (can be overridden at build time) -ARG NEXT_PUBLIC_API_URL=https://api.lions.dev/btpxpress -ARG NEXT_PUBLIC_KEYCLOAK_URL=https://security.lions.dev -ARG NEXT_PUBLIC_KEYCLOAK_REALM=btpxpress -ARG NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=btpxpress-frontend -ARG NEXT_PUBLIC_APP_ENV=production - -# Convert ARG to ENV for Next.js build process -ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL} -ENV NEXT_PUBLIC_KEYCLOAK_URL=${NEXT_PUBLIC_KEYCLOAK_URL} -ENV NEXT_PUBLIC_KEYCLOAK_REALM=${NEXT_PUBLIC_KEYCLOAK_REALM} -ENV NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=${NEXT_PUBLIC_KEYCLOAK_CLIENT_ID} -ENV NEXT_PUBLIC_APP_ENV=${NEXT_PUBLIC_APP_ENV} - -# Build Next.js application -ENV NODE_ENV=production -ENV NEXT_TELEMETRY_DISABLED=1 -RUN npm run build - -## Stage 3: Production image -FROM node:20-alpine AS runner -WORKDIR /app - -ENV NODE_ENV=production -ENV NEXT_TELEMETRY_DISABLED=1 - -RUN addgroup --system --gid 1001 nodejs -RUN adduser --system --uid 1001 nextjs - -# Copy necessary files -COPY --from=builder /app/public ./public -COPY --from=builder /app/.next/standalone ./ -COPY --from=builder /app/.next/static ./.next/static - -USER nextjs - -EXPOSE 3000 - -ENV PORT=3000 -ENV HOSTNAME="0.0.0.0" - -# Health check -HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \ - CMD node -e "require('http').get('http://localhost:3000/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})" - -CMD ["node", "server.js"] - +#### +# This Dockerfile is used to build a production-ready Next.js application +#### + +## Stage 1: Dependencies +FROM node:20-alpine AS deps +WORKDIR /app + +# Install dependencies based on the preferred package manager +COPY package.json package-lock.json* ./ +RUN npm ci --only=production + +## Stage 2: Build +FROM node:20-alpine AS builder +WORKDIR /app + +COPY package.json package-lock.json* ./ +RUN npm ci + +COPY . . + +# Build arguments for NEXT_PUBLIC variables (can be overridden at build time) +ARG NEXT_PUBLIC_API_URL=https://api.lions.dev/btpxpress +ARG NEXT_PUBLIC_KEYCLOAK_URL=https://security.lions.dev +ARG NEXT_PUBLIC_KEYCLOAK_REALM=btpxpress +ARG NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=btpxpress-frontend +ARG NEXT_PUBLIC_APP_ENV=production + +# Convert ARG to ENV for Next.js build process +ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL} +ENV NEXT_PUBLIC_KEYCLOAK_URL=${NEXT_PUBLIC_KEYCLOAK_URL} +ENV NEXT_PUBLIC_KEYCLOAK_REALM=${NEXT_PUBLIC_KEYCLOAK_REALM} +ENV NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=${NEXT_PUBLIC_KEYCLOAK_CLIENT_ID} +ENV NEXT_PUBLIC_APP_ENV=${NEXT_PUBLIC_APP_ENV} + +# Build Next.js application +ENV NODE_ENV=production +ENV NEXT_TELEMETRY_DISABLED=1 +RUN npm run build + +## Stage 3: Production image +FROM node:20-alpine AS runner +WORKDIR /app + +ENV NODE_ENV=production +ENV NEXT_TELEMETRY_DISABLED=1 + +RUN addgroup --system --gid 1001 nodejs +RUN adduser --system --uid 1001 nextjs + +# Copy necessary files +COPY --from=builder /app/public ./public +COPY --from=builder /app/.next/standalone ./ +COPY --from=builder /app/.next/static ./.next/static + +USER nextjs + +EXPOSE 3000 + +ENV PORT=3000 +ENV HOSTNAME="0.0.0.0" + +# Health check +HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \ + CMD node -e "require('http').get('http://localhost:3000/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})" + +CMD ["node", "server.js"] + diff --git a/app/(main)/chantiers/[id]/budget/page.tsx b/app/(main)/chantiers/[id]/budget/page.tsx index cb47353..f5732f6 100644 --- a/app/(main)/chantiers/[id]/budget/page.tsx +++ b/app/(main)/chantiers/[id]/budget/page.tsx @@ -9,7 +9,7 @@ import { Column } from 'primereact/column'; import { ProgressBar } from 'primereact/progressbar'; import { Chart } from 'primereact/chart'; import { Tag } from 'primereact/tag'; -import { apiService } from '@/services/api'; +import { budgetService } from '@/services/api'; interface BudgetChantier { id: number; @@ -46,7 +46,7 @@ export default function ChantierBudgetPage() { const loadBudget = async () => { try { setLoading(true); - const data = await apiService.budgets.getByChantier(Number(id)); + const data = await budgetService.getByChantier(id); setBudget(data); } catch (error) { console.error('Erreur lors du chargement du budget:', error); diff --git a/app/(main)/chantiers/[id]/page.tsx b/app/(main)/chantiers/[id]/page.tsx index ab803db..4964025 100644 --- a/app/(main)/chantiers/[id]/page.tsx +++ b/app/(main)/chantiers/[id]/page.tsx @@ -9,33 +9,8 @@ import { Tag } from 'primereact/tag'; import { ProgressBar } from 'primereact/progressbar'; import { Divider } from 'primereact/divider'; import { Skeleton } from 'primereact/skeleton'; -import { apiService } from '@/services/api'; - -interface Chantier { - id: number; - nom: string; - description: string; - adresse: string; - ville: string; - codePostal: string; - dateDebut: string; - dateFin: string; - dateLivraison: string; - statut: string; - budget: number; - client: { - id: number; - nom: string; - email: string; - telephone: string; - }; - responsable: { - id: number; - nom: string; - prenom: string; - }; - progression: number; -} +import { chantierService } from '@/services/api'; +import type { Chantier } from '@/types/btp'; export default function ChantierDetailsPage() { const params = useParams(); @@ -55,7 +30,7 @@ export default function ChantierDetailsPage() { const loadChantier = async () => { try { setLoading(true); - const data = await apiService.chantiers.getById(Number(id)); + const data = await chantierService.getById(id); setChantier(data); } catch (error) { console.error('Erreur lors du chargement du chantier:', error); @@ -191,8 +166,8 @@ export default function ChantierDetailsPage() {
- - Responsable: {chantier.responsable?.prenom} {chantier.responsable?.nom} + + Type: {chantier.typeChantier || 'N/A'}
@@ -200,7 +175,7 @@ export default function ChantierDetailsPage() {
Progression - +
@@ -210,12 +185,12 @@ export default function ChantierDetailsPage() {
Fin prévue -
{formatDate(chantier.dateFin)}
+
{formatDate(chantier.dateFinPrevue || '')}
Budget -
{formatMontant(chantier.budget)}
+
{formatMontant(chantier.montantPrevu || 0)}
@@ -234,7 +209,7 @@ export default function ChantierDetailsPage() {
Durée
- {Math.ceil((new Date(chantier.dateFin).getTime() - new Date(chantier.dateDebut).getTime()) / (1000 * 60 * 60 * 24))} jours + {chantier.dateFinPrevue ? Math.ceil((new Date(chantier.dateFinPrevue).getTime() - new Date(chantier.dateDebut).getTime()) / (1000 * 60 * 60 * 24)) : 0} jours
@@ -243,7 +218,7 @@ export default function ChantierDetailsPage() {
Avancement
-
{chantier.progression || 0}%
+
N/A
 @@ -251,7 +226,7 @@ export default function ChantierDetailsPage() {
Budget
-
{formatMontant(chantier.budget)}
+
{formatMontant(chantier.montantPrevu || 0)}
 diff --git a/app/(main)/chantiers/[id]/planning/page.tsx b/app/(main)/chantiers/[id]/planning/page.tsx index 7273d7f..c4c89bf 100644 --- a/app/(main)/chantiers/[id]/planning/page.tsx +++ b/app/(main)/chantiers/[id]/planning/page.tsx @@ -11,31 +11,15 @@ import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; import { Chart } from 'primereact/chart'; import { TabView, TabPanel } from 'primereact/tabview'; -import { apiService } from '@/services/api'; - -interface TacheChantier { - id: number; - nom: string; - description: string; - dateDebut: string; - dateFin: string; - statut: string; - responsable: { - nom: string; - prenom: string; - }; - equipe: { - nom: string; - }; - progression: number; -} +import { planningService } from '@/services/api'; +import type { PlanningEvent } from '@/types/btp'; export default function ChantierPlanningPage() { const params = useParams(); const router = useRouter(); const id = params.id as string; - const [taches, setTaches] = useState([]); + const [taches, setTaches] = useState([]); const [loading, setLoading] = useState(true); const [selectedDate, setSelectedDate] = useState(new Date()); const [viewMode, setViewMode] = useState<'timeline' | 'gantt'>('timeline'); @@ -49,7 +33,8 @@ export default function ChantierPlanningPage() { const loadPlanning = async () => { try { setLoading(true); - const data = await apiService.planning.getByChantier(Number(id)); + // Récupérer les événements de planning pour ce chantier + const data = await planningService.getEvents({ chantierId: id }); setTaches(data || []); } catch (error) { console.error('Erreur lors du chargement du planning:', error); @@ -90,7 +75,7 @@ export default function ChantierPlanningPage() { return labels[statut] || statut; }; - const statutBodyTemplate = (rowData: TacheChantier) => { + const statutBodyTemplate = (rowData: PlanningEvent) => { return ( { + const dateBodyTemplate = (rowData: PlanningEvent) => { return (
Début: {formatDate(rowData.dateDebut)}
@@ -108,31 +93,16 @@ export default function ChantierPlanningPage() { ); }; - const responsableBodyTemplate = (rowData: TacheChantier) => { - return `${rowData.responsable?.prenom} ${rowData.responsable?.nom}`; - }; - - const equipeBodyTemplate = (rowData: TacheChantier) => { + const equipeBodyTemplate = (rowData: PlanningEvent) => { return rowData.equipe?.nom || 'Non assignée'; }; - const progressionBodyTemplate = (rowData: TacheChantier) => { - return ( -
-
-
-
-
-
- {rowData.progression}% -
- ); + const prioriteBodyTemplate = (rowData: PlanningEvent) => { + const severity = rowData.priorite === 'CRITIQUE' ? 'danger' : rowData.priorite === 'HAUTE' ? 'warning' : rowData.priorite === 'NORMALE' ? 'info' : 'success'; + return ; }; - const actionsBodyTemplate = (rowData: TacheChantier) => { + const actionsBodyTemplate = (rowData: PlanningEvent) => { return (
- ); - }; - - const rightToolbarTemplate = () => { - return ( -
+ ); + }; + + const rightToolbarTemplate = () => { + return ( +