fix: résolution des conflits avec dev
Déploiement AEGIS Portal / build-and-deploy (push) Failing after 19s
Déploiement AEGIS Portal / build-and-deploy (push) Failing after 19s
This commit is contained in:
LathanDevers
@@ -0,0 +1 @@
|
|||||||
|
VITE_PB_URL=
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
name: Déploiement AEGIS Portal
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- dev
|
||||||
|
- test
|
||||||
|
- acc
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-and-deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
env:
|
||||||
|
GIT_SSL_NO_VERIFY: "true"
|
||||||
|
NODE_TLS_REJECT_UNAUTHORIZED: "0"
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Patch DNS local pour Gitea Runner
|
||||||
|
run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
|
||||||
|
|
||||||
|
- name: Configuration de Git pour SSL
|
||||||
|
run: git config --global http.sslVerify false
|
||||||
|
|
||||||
|
- name: Récupération du code
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Configuration de Node.js
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: 22
|
||||||
|
|
||||||
|
- name: Configuration de Node.js
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: 22
|
||||||
|
|
||||||
|
- name: Activation de pnpm
|
||||||
|
run: corepack enable pnpm
|
||||||
|
|
||||||
|
- name: Installation des dépendances
|
||||||
|
run: pnpm install --frozen-lockfile
|
||||||
|
|
||||||
|
- name: Compilation de la Build
|
||||||
|
env:
|
||||||
|
VITE_APP_ENV: ${{ github.ref_name }}
|
||||||
|
VITE_PB_URL: ${{ secrets.PB_URL }}
|
||||||
|
run: pnpm run build
|
||||||
|
|
||||||
|
- name: Installation de lftp
|
||||||
|
run: sudo apt-get update && sudo apt-get install -y lftp
|
||||||
|
|
||||||
|
- name: Routage et Déploiement FTP
|
||||||
|
env: # 1. On charge tous les secrets de manière sécurisée
|
||||||
|
SERVER: ${{ secrets.FTP_SERVER }}
|
||||||
|
DEV_U: ${{ secrets.DEV_FTP_USER }}
|
||||||
|
DEV_P: ${{ secrets.DEV_FTP_PASSWORD }}
|
||||||
|
TEST_U: ${{ secrets.TEST_FTP_USER }}
|
||||||
|
TEST_P: ${{ secrets.TEST_FTP_PASSWORD }}
|
||||||
|
ACC_U: ${{ secrets.ACC_FTP_USER }}
|
||||||
|
ACC_P: ${{ secrets.ACC_FTP_PASSWORD }}
|
||||||
|
PROD_U: ${{ secrets.PROD_FTP_USER }}
|
||||||
|
PROD_P: ${{ secrets.PROD_FTP_PASSWORD }}
|
||||||
|
BRANCH: ${{ github.ref_name }}
|
||||||
|
run: |
|
||||||
|
# 2. On attribue les bons identifiants selon la branche
|
||||||
|
if [ "$BRANCH" == "master" ]; then
|
||||||
|
TARGET_USER=$PROD_U; TARGET_PASS=$PROD_P;
|
||||||
|
elif [ "$BRANCH" == "acc" ]; then
|
||||||
|
TARGET_USER=$ACC_U; TARGET_PASS=$ACC_P;
|
||||||
|
elif [ "$BRANCH" == "test" ]; then
|
||||||
|
TARGET_USER=$TEST_U; TARGET_PASS=$TEST_P;
|
||||||
|
else
|
||||||
|
TARGET_USER=$DEV_U; TARGET_PASS=$DEV_P;
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "Déploiement de la branche [$BRANCH]"
|
||||||
|
|
||||||
|
# 3. Exécution du script FTP
|
||||||
|
cat << EOF > script.lftp
|
||||||
|
set ftp:passive-mode true
|
||||||
|
set ftp:ssl-allow no
|
||||||
|
set ssl:verify-certificate no
|
||||||
|
set net:timeout 5
|
||||||
|
set net:max-retries 2
|
||||||
|
set dns:fatal-timeout 2
|
||||||
|
open -u "${TARGET_USER}","${TARGET_PASS}" "${SERVER}"
|
||||||
|
cd home/${TARGET_USER}
|
||||||
|
mirror -R --delete --verbose dist/ ./
|
||||||
|
quit
|
||||||
|
EOF
|
||||||
|
|
||||||
|
lftp -f script.lftp
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
name: Deploy Aegis Portal
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches:
|
|
||||||
- master # Branche principale confirmée
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build-and-deploy:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
# 1. On désactive la vérification SSL pour tout le conteneur du job (Node.js et Git)
|
|
||||||
env:
|
|
||||||
GIT_SSL_NO_VERIFY: "true"
|
|
||||||
NODE_TLS_REJECT_UNAUTHORIZED: "0"
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Patch DNS local pour Gitea Runner
|
|
||||||
run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
|
|
||||||
|
|
||||||
# 2. On force l'exécutable Git interne à ignorer la vérification de l'autorité locale
|
|
||||||
- name: Configuration de Git pour SSL
|
|
||||||
run: git config --global http.sslVerify false
|
|
||||||
|
|
||||||
- name: Récupération du code
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Configuration de Node.js
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: 22
|
|
||||||
|
|
||||||
- name: Installation des dépendances (React/Vite)
|
|
||||||
run: npm ci
|
|
||||||
|
|
||||||
- name: Compilation de la Build (Aegis)
|
|
||||||
run: npm run build
|
|
||||||
|
|
||||||
- name: Installation de lftp
|
|
||||||
run: sudo apt-get update && sudo apt-get install -y lftp
|
|
||||||
|
|
||||||
- name: Déploiement FTP (10.10.40.12)
|
|
||||||
env:
|
|
||||||
FTP_USER: ${{ secrets.FTP_USER }} # Le compte FTP enfermé dans aegis.gise.be
|
|
||||||
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
|
|
||||||
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
|
||||||
run: |
|
|
||||||
cat << EOF > script.lftp
|
|
||||||
set ftp:passive-mode true
|
|
||||||
set ftp:ssl-allow no
|
|
||||||
set ssl:verify-certificate no
|
|
||||||
set net:timeout 5
|
|
||||||
set net:max-retries 2
|
|
||||||
set dns:fatal-timeout 2
|
|
||||||
open -u "${FTP_USER}","${FTP_PASSWORD}" "${FTP_SERVER}"
|
|
||||||
cd home/${FTP_USER}
|
|
||||||
mirror -R --delete --verbose dist/ ./
|
|
||||||
quit
|
|
||||||
EOF
|
|
||||||
|
|
||||||
lftp -f script.lftp
|
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
name: Sécurité - Architecture Git-Flow
|
||||||
|
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- dev
|
||||||
|
- test
|
||||||
|
- acc
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
validate-flow:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Vérification du flux de promotion
|
||||||
|
run: |
|
||||||
|
TARGET_BRANCH="${{ github.base_ref }}"
|
||||||
|
SOURCE_BRANCH="${{ github.head_ref }}"
|
||||||
|
|
||||||
|
echo "Tentative de promotion : $SOURCE_BRANCH ➔ $TARGET_BRANCH"
|
||||||
|
|
||||||
|
# Règle 1 : Vers TEST (Doit venir de DEV)
|
||||||
|
if [ "$TARGET_BRANCH" == "test" ] && [ "$SOURCE_BRANCH" != "dev" ]; then
|
||||||
|
echo "ERREUR : L'environnement TEST ne peut recevoir que du code de DEV."
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Règle 2 : Vers ACC (Doit venir de TEST)
|
||||||
|
if [ "$TARGET_BRANCH" == "acc" ] && [ "$SOURCE_BRANCH" != "test" ]; then
|
||||||
|
echo "ERREUR : L'environnement d'ACCEPTATION ne peut recevoir que du code de TEST."
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Règle 3 : Vers PROD (Doit venir de ACC)
|
||||||
|
if [ "$TARGET_BRANCH" == "master" ] && [ "$SOURCE_BRANCH" != "acc" ]; then
|
||||||
|
echo "ERREUR : La PRODUCTION ne peut recevoir que du code validé en ACCEPTATION (acc)."
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "Flux réglementaire respecté ! Promotion autorisée."
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
name: Contrôle Qualité & Sécurité (QA)
|
||||||
|
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- dev
|
||||||
|
- test
|
||||||
|
- acc
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
quality-gate:
|
||||||
|
name: qa-s-check
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
env:
|
||||||
|
GIT_SSL_NO_VERIFY: "true"
|
||||||
|
NODE_TLS_REJECT_UNAUTHORIZED: "0"
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Patch DNS local pour Gitea Runner
|
||||||
|
run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
|
||||||
|
|
||||||
|
- name: Configuration de Git pour SSL
|
||||||
|
run: git config --global http.sslVerify false
|
||||||
|
|
||||||
|
- name: Récupération du code source
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Configuration de Node.js (v22)
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: 22
|
||||||
|
|
||||||
|
- name: Activation de pnpm
|
||||||
|
run: corepack enable pnpm
|
||||||
|
|
||||||
|
- name: Installation des dépendances
|
||||||
|
run: pnpm install --frozen-lockfile
|
||||||
|
|
||||||
|
# Étape 1 : ESLint (Syntaxe et conventions)
|
||||||
|
- name: Analyse Linter (ESLint)
|
||||||
|
run: pnpm run lint
|
||||||
|
|
||||||
|
# Étape 2 : Verification stricte des types TypeScript (sans émettre de fichiers)
|
||||||
|
- name: Verification des Types TypeScript
|
||||||
|
run: pnpm exec tsc --noEmit
|
||||||
|
|
||||||
|
# Étape 3 : Exécution des tests unitaires
|
||||||
|
- name: Tests Unitaires (Vitest)
|
||||||
|
run: pnpm run test -- --run
|
||||||
|
|
||||||
|
# Étape 4 : Audit des vulnérabilités npm (Niveau High/Critical)
|
||||||
|
- name: Audit de Sécurité des Dépendances
|
||||||
|
run: pnpm audit --audit-level=high
|
||||||
|
|
||||||
|
# Étape 5 : Validation de la compilation ViteJS
|
||||||
|
- name: Validation du Build de Production
|
||||||
|
run: pnpm run build
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
|
||||||
|
describe('AEGIS Initial Test', () => {
|
||||||
|
it('devrait valider que 1 + 1 font 2', () => {
|
||||||
|
expect(1 + 1).toBe(2);
|
||||||
|
});
|
||||||
|
});
|
||||||
+20
-14
@@ -7,31 +7,37 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc -b && vite build",
|
"build": "tsc -b && vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"test": "vitest"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tailwindcss/vite": "^4.3.3",
|
"@tailwindcss/vite": "^4.3.3",
|
||||||
"@zitadel/react-auth": "^1.2.1",
|
"@zitadel/react-auth": "^1.2.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^1.28.0",
|
||||||
"oidc-client-ts": "^3.5.0",
|
"oidc-client-ts": "^3.5.0",
|
||||||
"otpauth": "^9.5.1",
|
"otpauth": "^9.5.1",
|
||||||
"pocketbase": "^0.27.0",
|
"pocketbase": "^0.27.1",
|
||||||
"qrcode.react": "^4.2.0",
|
"qrcode.react": "^4.2.0",
|
||||||
"react": "^19.2.7",
|
"react": "^19.2.8",
|
||||||
"react-dom": "^19.2.7",
|
"react-dom": "^19.2.8",
|
||||||
|
"react-router-dom": "^7.18.2",
|
||||||
|
"tailwind-merge": "^3.6.0",
|
||||||
"tailwindcss": "^4.3.3"
|
"tailwindcss": "^4.3.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@eslint/js": "^10.0.1",
|
||||||
"@types/node": "^24.13.2",
|
"@types/node": "^24.13.3",
|
||||||
"@types/react": "^19.2.17",
|
"@types/react": "^19.2.18",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.4",
|
||||||
"@vitejs/plugin-react": "^6.0.3",
|
"@vitejs/plugin-react": "^6.0.5",
|
||||||
"eslint": "^10.6.0",
|
"eslint": "^10.8.0",
|
||||||
"eslint-plugin-react-hooks": "^7.1.1",
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
"eslint-plugin-react-refresh": "^0.5.3",
|
"eslint-plugin-react-refresh": "^0.5.3",
|
||||||
"globals": "^17.7.0",
|
"globals": "^17.9.0",
|
||||||
"typescript": "~6.0.2",
|
"typescript": "~6.0.3",
|
||||||
"typescript-eslint": "^8.62.0",
|
"typescript-eslint": "^8.65.0",
|
||||||
"vite": "^8.1.1"
|
"vite": "^8.2.0",
|
||||||
|
"vitest": "^4.1.10"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Generated
+2435
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
|||||||
|
overrides:
|
||||||
|
react-router: "^6.30.4"
|
||||||
|
react-router-dom: "^6.30.4"
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useCreateTicket } from '@/hooks/useCreateTicket';
|
||||||
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Select } from '@/components/ui/Select';
|
||||||
|
import { Textarea } from '@/components/ui/Textarea';
|
||||||
|
import type { TicketCategory } from '@/types/Category';
|
||||||
|
import type { ButtonVariantStyle } from '@/styles/VariantStyle';
|
||||||
|
|
||||||
|
interface NewTicketWidgetProps {
|
||||||
|
onCancel: () => void;
|
||||||
|
onSuccess: (ticketId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSuccess }) => {
|
||||||
|
const { createTicket, isSubmitting, error } = useCreateTicket();
|
||||||
|
|
||||||
|
// États locaux isolés dans le widget
|
||||||
|
const [category, setCategory] = useState<TicketCategory>('Incident Critique');
|
||||||
|
const [ci, setCi] = useState('general');
|
||||||
|
const [subject, setSubject] = useState('');
|
||||||
|
const [affectedAsset, setAffectedAsset] = useState('');
|
||||||
|
const [incidentTime, setIncidentTime] = useState('');
|
||||||
|
const [description, setDescription] = useState('');
|
||||||
|
const [buttonVariant, setButtonVariant]=useState<ButtonVariantStyle>('primary');
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Le hook gère la logique de création
|
||||||
|
const newTicketId = await createTicket({
|
||||||
|
category, ci, subject, affectedAsset, incidentTime, description
|
||||||
|
});
|
||||||
|
|
||||||
|
// On délègue la navigation (ou l'action post-création) au composant parent
|
||||||
|
if (newTicketId) {
|
||||||
|
onSuccess(newTicketId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<h1 className="text-xl font-bold text-slate-900 tracking-tight">Ouvrir un nouveau ticket</h1>
|
||||||
|
<p className="text-sm text-slate-500 mt-0.5">Qualification de votre requête ITSM</p>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="p-6 sm:p-8">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-8">
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* SECTION 1 : QUALIFICATION */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
|
||||||
|
1. Qualification de la demande
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<Select
|
||||||
|
label="Type de demande"
|
||||||
|
value={category}
|
||||||
|
onChange={(e) => {setCategory(e.target.value as TicketCategory); setButtonVariant(e.target.value==="Incident Critique"?"danger":"primary")}}
|
||||||
|
options={[
|
||||||
|
{ value: 'Incident Critique', label: 'Incident Critique (Panne, Dégradation)' },
|
||||||
|
{ value: 'Évolution', label: 'Évolution (Ajout de ressources, Modification)' },
|
||||||
|
{ value: 'Administratif', label: 'Administratif (Facturation, Contrat)' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
label="Infrastructure concernée (CI)"
|
||||||
|
value={ci}
|
||||||
|
onChange={(e) => setCi(e.target.value)}
|
||||||
|
options={[
|
||||||
|
{ value: 'general', label: 'Général / Non spécifique' },
|
||||||
|
{ value: 'px1', label: 'Serveur Proxmox Principal (Hyperviseur)' },
|
||||||
|
{ value: 'fw1', label: 'Pare-feu Périphérique (WAN)' },
|
||||||
|
{ value: 'db1', label: 'Base de données MariaDB' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SECTION 2 : DÉTAILS */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
|
||||||
|
2. Détails techniques
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<Input
|
||||||
|
label="Sujet de l'intervention"
|
||||||
|
required
|
||||||
|
value={subject}
|
||||||
|
onChange={(e) => setSubject(e.target.value)}
|
||||||
|
placeholder="Ex: Perte de paquets sur le lien WAN principal"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="Équipement ou Produit concerné (Optionnel)"
|
||||||
|
value={affectedAsset}
|
||||||
|
onChange={(e) => setAffectedAsset(e.target.value)}
|
||||||
|
placeholder="Ex: Ordinateur Direction, Imprimante X, etc."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{category === 'Incident Critique' && (
|
||||||
|
<div className="animate-in fade-in slide-in-from-top-2 duration-300 max-w-sm">
|
||||||
|
<Input
|
||||||
|
type="datetime-local"
|
||||||
|
label="Heure exacte du début de l'incident"
|
||||||
|
required
|
||||||
|
value={incidentTime}
|
||||||
|
onChange={(e) => setIncidentTime(e.target.value)}
|
||||||
|
className="bg-red-50/30 border-red-300 focus:border-red-500 focus:ring-red-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Textarea
|
||||||
|
label="Description détaillée"
|
||||||
|
required
|
||||||
|
rows={6}
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
placeholder="Décrivez précisément votre besoin ou les symptômes observés..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ACTIONS */}
|
||||||
|
<div className="pt-6 flex justify-end gap-3 border-t border-slate-100">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={onCancel} // Utilisation de la prop
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
isLoading={isSubmitting}
|
||||||
|
variant={buttonVariant}
|
||||||
|
>
|
||||||
|
Soumettre le ticket
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NewTicketWidget;
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import type { TicketMessage } from '@/types/Message';
|
||||||
|
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { EmptyState } from '@/components/ui/EmptyState';
|
||||||
|
import { MessageBubble } from '@/components/ui/MessageBubble';
|
||||||
|
|
||||||
|
interface TicketChatWidgetProps {
|
||||||
|
messages: TicketMessage[];
|
||||||
|
currentUserId?: string;
|
||||||
|
isSending: boolean;
|
||||||
|
onSendMessage: (content: string) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({
|
||||||
|
messages,
|
||||||
|
currentUserId,
|
||||||
|
isSending,
|
||||||
|
onSendMessage
|
||||||
|
}) => {
|
||||||
|
const [newMessage, setNewMessage] = useState('');
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!newMessage.trim()) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await onSendMessage(newMessage);
|
||||||
|
setNewMessage(''); // Vide l'input uniquement si l'envoi réussit
|
||||||
|
} catch {
|
||||||
|
alert("Erreur lors de l'envoi.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="h-125">
|
||||||
|
<CardHeader>
|
||||||
|
<h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés</h2>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
{/* Zone des messages */}
|
||||||
|
<CardContent className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||||
|
{messages.length === 0 ? (
|
||||||
|
<EmptyState message="Aucun message pour l'instant. Démarrez la conversation ci-dessous." />
|
||||||
|
) : (
|
||||||
|
messages.map((msg) => (
|
||||||
|
<MessageBubble key={msg.id} message={msg} currentUserId={currentUserId} />
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
{/* Zone de saisie avec notre composant UI */}
|
||||||
|
<form onSubmit={handleSubmit} className="p-4 flex items-start space-x-3">
|
||||||
|
<div className="flex-1">
|
||||||
|
<Input
|
||||||
|
value={newMessage}
|
||||||
|
onChange={(e) => setNewMessage(e.target.value)}
|
||||||
|
placeholder="Écrivez votre message..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
isLoading={isSending}
|
||||||
|
disabled={isSending || !newMessage.trim()}
|
||||||
|
className="px-6"
|
||||||
|
>
|
||||||
|
Envoyer
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
import type { Document } from '@/types/Document';
|
||||||
|
|
||||||
|
export const useDocuments = () => {
|
||||||
|
const [documents, setDocuments] = useState<Document[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchDocuments = useCallback(async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const records = await pb.collection('aegis_documents_vault').getFullList<Document>({
|
||||||
|
sort: '-created', // Du plus récent au plus ancien
|
||||||
|
});
|
||||||
|
setDocuments(records);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur lors de la récupération des documents :", err);
|
||||||
|
setError("Impossible de charger les documents.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
|
fetchDocuments();
|
||||||
|
}, [fetchDocuments]);
|
||||||
|
|
||||||
|
return { documents, isLoading, error, refetch: fetchDocuments };
|
||||||
|
};
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { pb } from '@services/pocketbase';
|
||||||
|
import type { InfrastructureNode } from '@/types/InfrastructureNode';
|
||||||
|
|
||||||
|
export const useInfrastructureNodes = () => {
|
||||||
|
const [nodes, setNodes] = useState<InfrastructureNode[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchNodes = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const records = await pb.collection('aegis_infrastructure_nodes').getFullList<InfrastructureNode>({
|
||||||
|
sort: 'created',
|
||||||
|
});
|
||||||
|
setNodes(records);
|
||||||
|
} catch {
|
||||||
|
setError("Impossible de charger l'infrastructure.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchNodes();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return { nodes, isLoading, error };
|
||||||
|
};
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
import * as OTPAuth from 'otpauth';
|
||||||
|
|
||||||
|
interface MfaConfig {
|
||||||
|
userId: string;
|
||||||
|
totpSecret: string;
|
||||||
|
qrUrl: string;
|
||||||
|
isFirstSetup: boolean;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useLoginFlow = (onLoginSuccess: () => void) => {
|
||||||
|
const [step, setStep] = useState<1 | 2>(1);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [mfaConfig, setMfaConfig] = useState<MfaConfig | null>(null);
|
||||||
|
|
||||||
|
// --- SSO ZITADEL ---
|
||||||
|
const loginWithZitadel = async () => {
|
||||||
|
setError('');
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
|
||||||
|
if (authData) onLoginSuccess();
|
||||||
|
} catch {
|
||||||
|
setError("Échec de la connexion via GISE Identity.");
|
||||||
|
pb.authStore.clear();
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- LOCAL LOGIN (Étape 1) ---
|
||||||
|
const loginWithLocal = async (email: string, pass: string) => {
|
||||||
|
setError('');
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const authData = await pb.collection('aegis_users').authWithPassword(email, pass);
|
||||||
|
|
||||||
|
if (authData.record.mfa_enabled) {
|
||||||
|
let secret = authData.record.totp_secret;
|
||||||
|
let qrUrl = '';
|
||||||
|
let isFirstSetup = false;
|
||||||
|
|
||||||
|
// Génération d'un nouveau secret si première fois
|
||||||
|
if (!secret) {
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
issuer: 'AEGIS by GISE',
|
||||||
|
label: email,
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
secret: new OTPAuth.Secret({ size: 20 })
|
||||||
|
});
|
||||||
|
secret = totp.secret.base32;
|
||||||
|
qrUrl = totp.toString();
|
||||||
|
isFirstSetup = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
setMfaConfig({ userId: authData.record.id, totpSecret: secret, qrUrl, isFirstSetup, email });
|
||||||
|
setStep(2);
|
||||||
|
} else {
|
||||||
|
onLoginSuccess();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setError("Identifiants incorrects ou accès révoqué.");
|
||||||
|
pb.authStore.clear();
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- VALIDATION MFA (Étape 2) ---
|
||||||
|
const verifyMfa = async (mfaCode: string) => {
|
||||||
|
if (!mfaConfig) return;
|
||||||
|
setError('');
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
issuer: 'AEGIS by GISE',
|
||||||
|
label: mfaConfig.email,
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
secret: OTPAuth.Secret.fromBase32(mfaConfig.totpSecret)
|
||||||
|
});
|
||||||
|
|
||||||
|
const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;
|
||||||
|
|
||||||
|
if (isValid) {
|
||||||
|
if (mfaConfig.isFirstSetup) {
|
||||||
|
await pb.collection('aegis_users').update(mfaConfig.userId, { totp_secret: mfaConfig.totpSecret });
|
||||||
|
}
|
||||||
|
onLoginSuccess();
|
||||||
|
} else {
|
||||||
|
setError("Code de sécurité invalide ou expiré.");
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setError("Erreur critique lors de la vérification.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelMfa = () => {
|
||||||
|
pb.authStore.clear();
|
||||||
|
setStep(1);
|
||||||
|
setMfaConfig(null);
|
||||||
|
setError('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return { step, isLoading, error, mfaConfig, loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa };
|
||||||
|
};
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
import type { Ticket } from '@/types/Ticket';
|
||||||
|
import type { TicketMessage } from '@/types/Message';
|
||||||
|
|
||||||
|
export const useTicketDetail = (ticketId?: string) => {
|
||||||
|
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||||
|
const [messages, setMessages] = useState<TicketMessage[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isSending, setIsSending] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const currentUser = pb.authStore.record; // ou .model selon votre version PocketBase
|
||||||
|
|
||||||
|
const fetchTicketData = useCallback(async () => {
|
||||||
|
if (!ticketId) return;
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 1. Récupération du ticket
|
||||||
|
const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
|
||||||
|
setTicket(ticketData);
|
||||||
|
|
||||||
|
// 2. Récupération des messages associés
|
||||||
|
const messageRecords = await pb.collection('aegis_ticket_messages').getFullList<TicketMessage>({
|
||||||
|
filter: `ticket = "${ticketId}"`,
|
||||||
|
expand: 'author',
|
||||||
|
sort: 'created',
|
||||||
|
});
|
||||||
|
setMessages(messageRecords);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur lors du chargement de la discussion :", err);
|
||||||
|
setError("Ticket introuvable ou accès non autorisé.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, [ticketId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
|
fetchTicketData();
|
||||||
|
}, [fetchTicketData]);
|
||||||
|
|
||||||
|
const sendMessage = async (content: string) => {
|
||||||
|
if (!content.trim() || !currentUser || !ticketId) return;
|
||||||
|
|
||||||
|
setIsSending(true);
|
||||||
|
try {
|
||||||
|
await pb.collection('aegis_ticket_messages').create({
|
||||||
|
ticket: ticketId,
|
||||||
|
author: currentUser.id,
|
||||||
|
content: content.trim(),
|
||||||
|
});
|
||||||
|
await fetchTicketData(); // On recharge les messages après l'envoi
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error("Impossible de charger le ticket", { cause: error });
|
||||||
|
} finally {
|
||||||
|
setIsSending(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { ticket, messages, isLoading, error, isSending, sendMessage, currentUser };
|
||||||
|
};
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
import type { Ticket } from '@/types/Ticket';
|
||||||
|
|
||||||
|
export const useTickets = () => {
|
||||||
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchTickets = useCallback(async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const records = await pb.collection('aegis_tickets').getFullList<Ticket>({
|
||||||
|
sort: '-created', // Du plus récent au plus ancien
|
||||||
|
});
|
||||||
|
setTickets(records);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur lors de la récupération des tickets :", err);
|
||||||
|
setError("Impossible de charger l'historique de vos requêtes.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
|
fetchTickets();
|
||||||
|
}, [fetchTickets]);
|
||||||
|
|
||||||
|
return { tickets, isLoading, error, refetch: fetchTickets };
|
||||||
|
};
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
// Fichier : src/pages/InfrastructureEvolution.tsx
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
|
||||||
|
|
||||||
|
import { BackButton } from '@/components/ui/BackButton';
|
||||||
|
import { EmptyState } from '@/components/ui/EmptyState';
|
||||||
|
|
||||||
|
// Nos nouveaux composants
|
||||||
|
import { EvolutionOptionCard } from '@/components/widgets/EvolutionOptionCard';
|
||||||
|
import { EvolutionFilterBar } from '@/components/widgets/EvolutionFilterBar';
|
||||||
|
|
||||||
|
import { EVOLUTION_OPTIONS, type EvolutionOption } from '@/data/evolutionOptions';
|
||||||
|
import SupportFooterWidget from '@/components/widgets/SupportFooterWidget';
|
||||||
|
|
||||||
|
export const InfrastructureEvolution: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { submitRequest, isSubmitting, submitSuccess, error } = useEvolutionRequest();
|
||||||
|
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||||||
|
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||||
|
const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Redirection automatique
|
||||||
|
useEffect(() => {
|
||||||
|
if (submitSuccess) {
|
||||||
|
const timer = setTimeout(() => navigate('/dashboard'), 3000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [submitSuccess, navigate]);
|
||||||
|
|
||||||
|
// Logique de filtrage
|
||||||
|
const filteredOptions = EVOLUTION_OPTIONS.filter((opt) => {
|
||||||
|
const matchesCategory = selectedCategory === 'all' || opt.category === selectedCategory;
|
||||||
|
const matchesSearch = opt.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
opt.description.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
return matchesCategory && matchesSearch;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSelectOption = (option: EvolutionOption) => {
|
||||||
|
setSelectedOptionId(option.id);
|
||||||
|
submitRequest(option.subject, option.payloadDescription);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-5xl mx-auto py-8 px-4 sm:px-6">
|
||||||
|
|
||||||
|
{/* EN-TÊTE DE LA PAGE */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<BackButton to="/dashboard" label="Retour au tableau de bord" />
|
||||||
|
<span className="text-xs font-mono font-bold tracking-widest text-slate-400 uppercase">
|
||||||
|
AEGIS • Catalogue Projets
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">
|
||||||
|
Évolution & Extension de l'Infrastructure
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-600 mt-2 text-base">
|
||||||
|
Sélectionnez une initiative stratégique. Votre demande ouvrira immédiatement un ticket projet sécurisé auprès de votre référent technique GISE.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ÉTAT DE SUCCÈS */}
|
||||||
|
{submitSuccess ? (
|
||||||
|
<div className="bg-white rounded-xl border border-emerald-200 shadow-sm p-12 text-center max-w-xl mx-auto my-12 animate-in fade-in zoom-in-95 duration-200">
|
||||||
|
<div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 mb-2">Demande d'évolution enregistrée</h2>
|
||||||
|
<p className="text-slate-600 text-sm mb-6 leading-relaxed">
|
||||||
|
Votre ticket projet a été chiffré et transmis à notre équipe d'ingénierie. Un expert GISE analyse vos prérequis et reprendra contact avec vous sous 24h ouvrées.
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-400 font-mono">Redirection automatique vers le Trust Center...</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* BARRE DE RECHERCHE ET FILTRES */}
|
||||||
|
<EvolutionFilterBar
|
||||||
|
selectedCategory={selectedCategory}
|
||||||
|
onSelectCategory={setSelectedCategory}
|
||||||
|
searchQuery={searchQuery}
|
||||||
|
onSearchChange={setSearchQuery}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* AFFICHAGE DES ERREURS */}
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm font-medium">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* GRILLE DES OPTIONS */}
|
||||||
|
{filteredOptions.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
|
||||||
|
<EmptyState message="Aucune initiative ne correspond à votre recherche." />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||||
|
{filteredOptions.map((option) => (
|
||||||
|
<EvolutionOptionCard
|
||||||
|
key={option.id}
|
||||||
|
option={option}
|
||||||
|
isSubmitting={isSubmitting && selectedOptionId === option.id}
|
||||||
|
isDisabled={isSubmitting} // On bloque toutes les cartes pendant un envoi
|
||||||
|
onSelect={handleSelectOption}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* PIED DE PAGE D'ASSISTANCE */}
|
||||||
|
<SupportFooterWidget />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InfrastructureEvolution;
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export type ButtonVariantStyle = "primary" | "danger" | "secondary" | "success" | "outline" | "ghost";
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export type TicketCategory = "Incident Critique" | "Évolution" | "Administratif";
|
||||||
Reference in New Issue
Block a user