L’organisation du projet est conçue pour garantir une structure modulaire et claire, facilitant le développement collaboratif et l’extension des fonctionnalités. En séparant les responsabilités par dossiers, le projet suit une architecture permettant de centraliser les ressources, les composants réutilisables, les vues principales, et les services API.

Cette organisation vise à rendre le code plus lisible et maintenable, en offrant un espace dédié pour chaque fonctionnalité et type de ressource. Elle permet également une meilleure gestion de l’état global avec Pinia, ainsi qu’une communication efficace avec le backend via Axios. En suivant cette structure, les développeurs peuvent rapidement naviguer dans le projet et contribuer de manière cohérente.

src
├── assets
│   ├── keenicons
│   ├── sass
│   └── ts
├── components
│   ├── activity-timeline-items
│   ├── calendar
│   ├── cards
│   ├── customers
│   ├── dashboard-default-widgets
│   ├── devs
│   ├── dropdown
│   ├── files
│   ├── highlighters
│   ├── kt-datatable
│   ├── menu
│   ├── messenger-parts
│   ├── modals
│   ├── page-layouts
│   ├── subscriptions
│   ├── widgets
│   └── wizards
├── core
│   ├── data
│   ├── helpers
│   ├── plugins
│   ├── services
│   └── shared
├── layouts
│   └── default-layout
├── router
├── stores
├── types
├── utils
└── views
    └── crafted
        ├── account
        ├── authentication
        ├── dropdown
        ├── modals
        ├── profile
        ├── settings
        └── widgets

Explication des Dossiers

• assets : Contient les ressources statiques utilisées par l’application, comme les icônes et les fichiers de style.
  • keenicons : Sous-dossier pour les icônes avec plusieurs variantes (duotone, outline, solid).
  • sass : Regroupe les fichiers Sass pour les styles globaux et les composants individuels, structurés en sous-dossiers pour une meilleure organisation.
  • ts : Contient des modules TypeScript, comme des utilitaires et des composants pour des fonctionnalités spécifiques.

• components : Regroupe les composants Vue réutilisables de l’application.
  • activity-timeline-items, calendar, cards, etc. : Sous-dossiers contenant des composants Vue pour des éléments spécifiques de l’interface utilisateur.
  • modals : Contient des composants modaux, organisés en catégories telles que forms, general, et wizards.
  • widgets : Contient des widgets spécialisés, chacun dans son propre sous-dossier pour les graphiques, les listes, etc.

• core : Gère les éléments essentiels au bon fonctionnement de l’application.
  • data : Stocke les données statiques et fichiers TypeScript contenant des informations globales, comme les contacts et les événements.
  • helpers : Contient des fonctions utilitaires, comme la gestion des icônes et des modaux.
  • plugins : Regroupe des fichiers de configuration pour les plugins intégrés à l’application (par exemple, i18n pour la traduction, ApexCharts pour les graphiques).
  • services : Contient les services API pour la gestion des utilisateurs, des catégories, et de l’authentification (comme JwtService, ApiService).
  • shared : Fournit des éléments partagés comme des formats d’API et des loaders.

• layouts : Définit la mise en page globale de l’application.
  • default-layout : Contient les composants et la configuration associés à la mise en page par défaut.

• router : Gère la navigation de l’application.

• stores : Gère l’état global de l’application avec Pinia.
  • Contient différents stores pour des fonctionnalités comme l’authentification (auth.ts), la configuration de l’application (config.ts), et la gestion des utilisateurs et catégories (profile.ts, category.ts).

• types : Contient des fichiers de définition TypeScript pour les types personnalisés utilisés dans l’application.

• views : Contient les vues principales (ou pages) de l’application, organisées dans des sous-dossiers thématiques. Les tables utilisées pour afficher les données se trouvent dans ce dossier, notamment dans crafted, où les pages sont catégorisées par sections fonctionnelles.
  • crafted:
    • account : Gère les pages liées aux comptes.
    • authentication : Vues pour la gestion de l’authentification (connexion, inscription).
    • dropdown : Composants et vues spécifiques aux menus déroulants.
    • crafted
    • modals : Pages qui intègrent des modals (fenêtres modales).
    • profile : Pages de gestion du profil utilisateur.
    • settings : Pages pour la configuration des paramètres.
    • widgets : Contient diverses tables et widgets pour afficher les données de manière organisée.