🎯 Choisissez votre parcours

👤 Vous êtes utilisateur

👨‍💻 Vous êtes développeur

# 1. Cloner le repository
git clone <repo-url>
cd performa

# 2. Installer les dépendances (pnpm requis)
pnpm install

# 3. Configurer l'environnement
cp .env.example .env.local
# Éditer .env.local :
# VITE_API_BASE_URL=https://api.perfomia.digitexia.org/api

# 4. Démarrer le serveur
pnpm dev

# 5. Ouvrir dans le navigateur
open http://localhost:5173

👨‍💼 Vous êtes administrateur

📦 Scripts disponibles

🔐 Se connecter

Utilisez votre email et mot de passe fournis par votre administrateur sur https://perfomia.digitexia.org. Ou via un lien d'invitation reçu par email.

🔑 Système RBAC

✅ Checklist de première utilisation

• Lire ce guide (2 min)
• Choisir votre guide selon votre rôle ci-dessus
• Si développeur : pnpm install puis pnpm dev
• Si utilisateur : explorer la plateforme et consulter le User Guide
• En cas de problème : section Troubleshooting du Developer Guide

📌 Présentation

Performa est une plateforme web moderne de gestion d'entreprise construite avec Vue 3, TypeScript, Vite, et Vuetify 3. Elle offre une solution complète pour la gestion de projets, tâches, équipes, courriers et évaluations au sein d'une organisation.

🗂️ Structure des dossiers

src/
├── pages/           # 30+ pages principales
├── components/      # Composants réutilisables (8 groupes)
├── stores/          # Pinia stores (12 stores)
├── services/        # Logique métier (15 services)
├── types/           # Définitions TypeScript
├── router/          # Configuration des routes
├── api/             # Configuration Axios + interceptors
├── layouts/         # FullLayout, BlankLayout
├── plugins/         # Vuetify, etc.
├── composables/     # Logique réutilisable Vue 3
├── theme/           # Thèmes Light/Dark
├── scss/            # Styles globaux SCSS
└── assets/          # Images et ressources statiques

📄 Pages (30+)

Authentification

• LoginPage.vue — Connexion utilisateur
• RegisterLinkPage.vue — Inscription via lien d'invitation
• RegisterCompanyPage.vue — Enregistrement d'une nouvelle entreprise

Projets & Tâches

• ProjectsPage.vue, ProjectDetailsPage.vue
• TasksPage.vue, TaskDetailsPage.vue

Équipes & Utilisateurs

• TeamPage.vue, MyTeamPage.vue, PeoplePage.vue
• DepartmentsPage.vue, UsersPage.vue, ServicesPage.vue

Courriers

• CourrierListPage.vue, CourrierDetailPage.vue
• IncomingMailPage.vue, OutgoingMailPage.vue, CourrierTrackingPage.vue

Évaluations (5 pages)

• EvaluationsPage.vue + EvaluationStartPage, EvaluationInterviewPage, EvaluationCompletedPage, EvaluationReadOnlyPage, EvaluationReviewPage

Administration

• CompaniesPage.vue (super_admin), InvitationsPage.vue, ActivityLogsPage.vue, ActivationCodesPage.vue

🔌 Stores Pinia (12)

🔐 Sécurité & Authentification

Token Bearer

• Token stocké dans localStorage avec la clé auth_token
• Utilisateur stocké dans localStorage avec la clé auth_user
• Automatiquement injecté : Authorization: Bearer <token>

Intercepteurs Axios

// Request Interceptor → ajoute le Bearer token
// Response Interceptor → gère les erreurs 401
http.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('auth_token')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

🗺️ Routage

Toutes les routes sont lazy-loaded (code splitting automatique). Les routes protégées utilisent des métadonnées :

{
  path: '/companies',
  component: () => import('@/pages/CompaniesPage.vue'),
  meta: { roles: ['super_admin'] } // Route gardée
}

🎨 Thème & Styles

• Vuetify 3 — Composants Material Design, thèmes Light/Dark
• Tailwind CSS — Utilitaires, couleur "brand" (cyan/bleu)
• SCSS — Variables, overrides, styles globaux

🏗️ Architecture en 5 couches

🎯 Patterns Utilisés

1. Composition API Pattern

<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const increment = () => count.value++
const doubled = computed(() => count.value * 2)
</script>

2. Composables Pattern

// src/composables/useRbac.ts
export const useRbac = () => {
  const authStore = useAuthStore()
  const roles = computed(() => authStore.user?.roles)

  return {
    roles,
    hasRole: (role: string) => roles.value?.includes(role),
    isSuperAdmin: computed(() => roles.value?.includes('super_admin'))
  }
}

3. Store Pattern (Pinia)

export const useProjectStore = defineStore('projectStore', () => {
  // State
  const projects = ref<Project[]>([])
  const isLoading = ref(false)
  const error = ref<string | null>(null)

  // Getters
  const projectCount = computed(() => projects.value.length)

  // Actions
  const fetchProjects = async () => {
    isLoading.value = true
    try {
      projects.value = await projectService.getProjects()
    } catch (err) {
      error.value = getApiErrorMessage(err)
    } finally {
      isLoading.value = false
    }
  }

  return { projects, isLoading, error, projectCount, fetchProjects }
})

🔐 Système de Permissions RBAC

🚨 Gestion des Erreurs (4 niveaux)

⚡ Performance & Optimisations

• Code Splitting — Toutes les routes sont lazy-loaded
• Tree Shaking — Imports nommés, dépendances inutilisées supprimées au build
• Computed Properties — Calculs mémoïsés, jamais de fonctions dans les templates
• Lazy Loading Images — Attribut loading="lazy"
• State Normalization — Données normalisées par ID
• Perfect Scrollbar — Virtualisation pour les longues listes

🔄 Flux d'authentification

USER → LOGIN PAGE
  → authService.login()
  → API POST /auth/login
  ← { token, user }
  → authStore.setSession(token, user)
  → localStorage update
  → router.push('/dashboard')
  → AUTHENTICATED APP

🔌 Extensibilité — Ajouter une feature

1. Créer le type TypeScript dans src/types/
2. Créer le service dans src/services/
3. Créer le store Pinia dans src/stores/
4. Créer les composants dans src/components/
5. Créer la page dans src/pages/
6. Ajouter la route dans src/router/index.ts

🛠️ Configuration de l'environnement

Prérequis

• Node.js 18+ ou Bun
• pnpm 8+
• Git
• VS Code (recommandé)

Extensions VS Code recommandées

• Vue.volar — Support Vue 3 (obligatoire)
• esbenp.prettier-vscode — Formatage Prettier
• bradlc.vscode-tailwindcss — Support Tailwind
• Vue.eslint-extension — Intégration ESLint

Variable d'environnement

# .env.local
VITE_API_BASE_URL=https://api.perfomia.digitexia.org/api

# Pour développement local
VITE_API_BASE_URL=http://localhost:3000/api

📁 Structure pour une nouvelle feature

POUR UNE NOUVELLE FEATURE (ex: "Rapports")

src/
├── pages/ReportsPage.vue          # Page principale
├── components/reports/
│   ├── ReportList.vue             # Liste
│   ├── ReportForm.vue             # Formulaire
│   └── ReportDetail.vue           # Détail
├── stores/reportStore.ts          # État global
├── services/reportService.ts      # API calls
├── types/report.ts                # Interfaces TS
└── composables/useReportForm.ts   # Logique réutilisable

🎨 Conventions de nommage

🎯 Exemple complet — Composant Vue 3

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore'
import type { User } from '@/types/auth'

// Props
interface Props {
  userId: string
  readOnly?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  readOnly: false
})

// Emits
const emit = defineEmits<{
  'user-saved': [user: User]
  'user-deleted': [userId: string]
}>()

const userStore = useUserStore()
const user = computed(() => userStore.getUserById(props.userId))

onMounted(async () => {
  await userStore.fetchUsers()
})
</script>

💡 Exemple CRUD complet

// FETCH
const fetchProjects = async () => {
  isLoading.value = true
  try {
    projects.value = await projectService.getProjects()
  } catch (err) {
    error.value = getApiErrorMessage(err)
  } finally {
    isLoading.value = false
  }
}

// CREATE
const createProject = async (payload: CreateProjectPayload) => {
  try {
    const data = await projectService.createProject(payload)
    projects.value.push(data)
    toastStore.showSuccess('Projet créé!')
  } catch (err) {
    throw new Error(getApiErrorMessage(err))
  }
}

// UPDATE
const updateProject = async (id: string, data: Partial<Project>) => {
  const idx = projects.value.findIndex(p => p.id === id)
  if (idx >= 0) projects.value[idx] = { ...projects.value[idx], ...data }
}

// DELETE
const deleteProject = async (id: string) => {
  await projectService.deleteProject(id)
  projects.value = projects.value.filter(p => p.id !== id)
}

🔄 Workflow de développement

# 1. Créer une branche
git checkout -b feature/users-management

# 2. Développer (types → service → store → composants → page → routes)

# 3. Vérifier les types
pnpm typecheck

# 4. Linter
pnpm lint

# 5. Commit
git commit -m "feat: add users management feature"

# 6. Push & PR
git push origin feature/users-management

🐛 Problèmes courants & Solutions

✅ Checklist de développement

• Types TypeScript créés et cohérents
• Service API avec gestion d'erreur
• Store Pinia avec actions/getters
• Composants réutilisables
• Routes ajoutées avec permissions (meta.roles)
• Aucune erreur TypeScript : pnpm typecheck
• Code bien formaté : pnpm lint
• Testé manuellement, pas de console errors

📐 Convention

👤 Authentification

Exemple Login

curl -X POST https://api.perfomia.digitexia.org/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"user@example.com","password":"password123"}'

# Response
{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": "123", "email": "user@example.com",
    "firstName": "John", "roles": ["employee"]
  }
}

👥 Utilisateurs

📊 Projets

✅ Tâches

👨‍💼 Équipes

📧 Courriers

📋 Évaluations

🏢 Entreprises super_admin

📌 Paramètres

📊 Types de réponse

Succès

{
  "data": { ... },
  "message": "Success",
  "status": 200
}

Erreur

{
  "error": "Unauthorized",
  "message": "Token invalide ou expiré",
  "statusCode": 401
}

⚠️ Codes HTTP

📄 Pagination

GET /projects?page=1&limit=20
GET /tasks?status=pending&page=2
GET /users?search=john&sort=name&order=asc

🏛️ Hiérarchie Admin

🔑 Matrice de Permissions

🖥️ Accéder à la gestion des utilisateurs

Navigation : Menu Principal → Paramètres → Gestion des Utilisateurs
URL directe : http://localhost:5173/admin/users

💻 Composant 1 — AdminUsersPage.vue

<!-- src/pages/AdminUsersPage.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { useRbac } from '@/composables/useRbac'
import AdminUserList from '@/components/admin/AdminUserList.vue'
import AdminUserForm from '@/components/admin/AdminUserForm.vue'

const userStore = useUserStore()
const { isAdminScope } = useRbac()
const showForm = ref(false)
const selectedUserId = ref<string | null>(null)

onMounted(async () => {
  if (isAdminScope.value) await userStore.fetchUsers()
})

const handleCreate = () => {
  selectedUserId.value = null
  showForm.value = true
}

const handleEdit = (userId: string) => {
  selectedUserId.value = userId
  showForm.value = true
}

const handleDelete = async (userId: string) => {
  if (confirm('Supprimer cet utilisateur?')) {
    await userStore.deleteUser(userId)
  }
}
</script>

💻 Composant 2 — AdminUserList.vue

<template>
  <v-data-table
    :headers="headers"
    :items="users"
    :loading="isLoading"
  >
    <template #item.actions="{ item }">
      <v-btn @click="$emit('edit', item.id)">Éditer</v-btn>
      <v-btn @click="$emit('delete', item.id)" color="error">
        Supprimer
      </v-btn>
    </template>
  </v-data-table>
</template>

<script setup lang="ts">
import type { User } from '@/types/auth'
defineProps<{ users: User[]; isLoading: boolean }>()
defineEmits<{
  edit: [id: string]
  delete: [id: string]
}>()

const headers = [
  { title: 'Email', key: 'email' },
  { title: 'Nom', key: 'lastName' },
  { title: 'Rôle', key: 'roles' },
  { title: 'Statut', key: 'isActive' },
  { title: 'Actions', key: 'actions' }
]
</script>

🛣️ Route protégée

{
  path: '/admin/users',
  name: 'AdminUsers',
  component: () => import('@/pages/AdminUsersPage.vue'),
  meta: {
    requiresAuth: true,
    roles: ['admin', 'super_admin']
  }
}

🔒 Vérifications backend requises

• Vérifier que l'admin ne peut gérer que les utilisateurs de son entreprise
• Empêcher l'auto-suppression d'un compte
• Valider que les rôles assignés respectent la hiérarchie
• Logger toutes les opérations d'admin dans les activity logs

📖 Introduction

Performa est votre plateforme complète de gestion d'entreprise. Elle vous permet de gérer projets, tâches, équipes, courriers et évaluations depuis un seul endroit.

🚀 Premiers Pas

Se connecter via email & mot de passe

1. Allez sur https://perfomia.digitexia.org
2. Cliquez sur "Se Connecter"
3. Entrez votre email et mot de passe
4. Cliquez sur "Connexion"

Via lien d'invitation

1. Cliquez sur le lien dans votre email d'invitation
2. Remplissez votre profil (nom, prénom, mot de passe)
3. Cliquez sur "Confirmer"
4. Vous êtes connecté!

Changer votre mot de passe

Allez dans Paramètres → Sécurité → Changer le mot de passe.

🎨 Interface Principale

📊 Tableau de Bord

Le tableau de bord affiche une vue personnalisée selon votre rôle :

• Widgets de statistiques — Résumé de vos projets et tâches en cours
• Graphiques — Progression et performances
• Activité récente — Dernières actions de l'équipe
• Tâches prioritaires — Ce qui nécessite votre attention

📊 Gestion de Projets

Créer un projet

1. Menu → Projets → Bouton "+ Nouveau Projet"
2. Remplir : nom, description, dates, équipe, priorité
3. Cliquer sur "Créer"

Statuts de projet

✅ Gestion de Tâches

Créer une tâche

1. Menu → Tâches → "+ Nouvelle Tâche"
2. Remplir : titre, description, assignation, deadline, priorité
3. Cliquer sur "Créer"

Vue Kanban

• Glisser-déposer les tâches entre colonnes
• Colonnes : À Faire → En Cours → Révision → Terminé

👥 Gestion d'Équipes

• Voir les membres de votre équipe et leurs disponibilités
• Rechercher un collègue par nom ou rôle
• Voir l'organigramme des départements
• Contacter directement depuis leur profil

📧 Gestion de Courriers

Courriers Entrants

1. Menu → Courriers → Entrants
2. Bouton "+ Enregistrer un courrier entrant"
3. Remplir l'expéditeur, la date, l'objet et le contenu
4. Assigner à un responsable de traitement

Suivi

Chaque courrier a un numéro de référence unique pour le suivi via Courriers → Suivi.

📋 Évaluations

• Démarrer une évaluation : Menu → Évaluations → Nouvelle évaluation
• Entretien : Formulaire structuré, questions par critère
• Révision : Consulter et commenter les résultats
• Approbation : Valider ou demander des corrections

🔔 Notifications

⚙️ Paramètres & Profil

• Profil : Nom, prénom, photo, informations de contact
• Sécurité : Changer le mot de passe, sessions actives
• Préférences : Langue, thème (clair/sombre), notifications

💡 Conseils & Astuces

❓ FAQ

Je n'arrive pas à me connecter

Vérifiez votre email/mot de passe. Si vous avez oublié votre mot de passe, contactez votre administrateur pour une réinitialisation.

Je ne vois pas certaines fonctionnalités

Votre accès dépend de votre rôle. Certaines pages (administration, paramètres entreprise) sont réservées aux admins et managers.

Comment exporter des données ?

Dans chaque liste (projets, tâches, courriers), un bouton d'export CSV ou PDF est disponible en haut à droite du tableau.

Comment contacter le support ?

• 📧 Utilisateurs : support@performa.com
• 👨‍💻 Développeurs : dev@performa.com
• 👨‍💼 Admins : admin@performa.com