Vues

Kasar propose 4 types de vues pour afficher et interagir avec les données. Chaque objet peut activer un ou plusieurs types de vues.

Vue Table

La vue classique en grille, idéale pour les données tabulaires.

Fonctionnalités

• Tri — Cliquez sur les en-têtes de colonnes pour trier
• Redimensionnement — Glissez les séparateurs de colonnes pour ajuster la largeur
• Visibilité des colonnes — Activez/désactivez les colonnes via le menu engrenage
• Colonne sticky — La première colonne reste fixe au scroll horizontal
• Sélection — Cases à cocher pour sélection multiple (Shift+Click pour sélection par plage)
• Scroll infini — Chargement progressif des données au défilement
• Groupement — En-têtes de groupe lorsqu'un champ de groupement est actif
• Tooltips — Survolez le contenu tronqué pour voir le texte complet

Tailles de lignes

Cas d'usage

Contacts, entreprises, opportunités — tout objet nécessitant tri, filtrage et visualisation dense.

Vue Kanban

Vue en tableau de bord avec des cartes déplaçables organisées en colonnes.

Fonctionnalités

• Drag & Drop — Déplacez les cartes entre colonnes (propulsé par @dnd-kit)
• Virtualisation — Chargement par page (20 cartes par lot) pour la performance
• Champs de groupement — Compatible avec SELECT, PIPELINE, RELATION et MORPH_RELATION
• Visibilité des colonnes — Masquez/affichez les colonnes individuellement
• Validation pipeline — Modal de validation des champs requis lors d'un changement d'étape
• Animation — Transition fluide de 150ms avec placeholder visuel

Configuration

Chaque vue Kanban sauvegardée contient :

{
  groupByField: string,           // Champ de groupement
  selectedParentFilter: string,   // ID pipeline (si champ PIPELINE)
  visibleColumns: string[],       // Colonnes visibles
  visibleProperties: string[]     // Propriétés affichées sur les cartes
}

Types de groupement

Cas d'usage

Opportunités (pipeline de vente), tâches par statut, candidats par étape de recrutement.

Vue Liste

Vue en cartes avec métadonnées minimales, orientée visuel.

Fonctionnalités

• Modes d'affichage — list (cartes horizontales) ou grid (tuiles en 2-4 colonnes responsive)
• Badges — Affichage de tags (ex: "Public", "Équipe", "Système")
• Favoris — Icône étoile pour les éléments favoris
• Menu d'actions — Actions par élément (modifier, dupliquer, supprimer)
• Métadonnées — Ligne d'information additionnelle (dates, etc.)

Cas d'usage

Tableaux de bord, galeries visuelles, portfolios.

Vue Sheet

Interface tableur avec édition inline et groupement visuel.

Fonctionnalités

• Édition inline — Cliquez sur un champ pour le modifier directement (via UniversalFormField)
• Groupement visuel — En-têtes de groupe avec code couleur
• Case à cocher — Toggle is_completed pour les tâches
• Indicateur spécial — Badge coloré pour priorité/statut
• Mises à jour optimistes — L'UI se met à jour immédiatement, rollback en cas d'erreur

Logique de groupement

Cas d'usage

Tâches, notes, checklists — objets nécessitant des modifications rapides inline.

Vues sauvegardées (UserView)

Les vues sauvegardées permettent de conserver des configurations de filtres et d'affichage.

Structure

{
  id: string,
  name: string,
  display_type: 'table' | 'kanban' | 'list' | 'sheet',
  filters: FilterGroup | null,
  view_config: KanbanViewConfig | TableViewConfig | null,
  list_type: 'dynamic' | 'static' | 'mixed',
  manual_items: string[],        // Pour les vues statiques
  is_system: boolean,
  is_private: boolean
}

Types de vues

Vues système par défaut

Créées automatiquement pour chaque organisation :

• Pipeline de vente — opportunités, kanban, groupé par pipeline
• Mes opportunités — opportunités, table, filtrées par propriétaire
• Mes contacts — contacts, table, filtrés par propriétaire
• Mes entreprises — entreprises, table, filtrées par propriétaire

Système de filtres

Structure

Les filtres utilisent une structure récursive AND/OR :

{
  type: 'AND' | 'OR',
  conditions: [
    { field: 'status', operator: 'equals', value: 'active' },
    {
      type: 'OR',
      conditions: [
        { field: 'city', operator: 'equals', value: 'Paris' },
        { field: 'city', operator: 'equals', value: 'Lyon' }
      ]
    }
  ]
}

Opérateurs disponibles

Hiérarchie des filtres

1. Filtres de vue (readonlyBaseFilter) — Définis dans la vue sauvegardée, non modifiables
2. Filtres utilisateur (activeFilter) — Filtres temporaires ajoutés par l'utilisateur
3. Combinaison — Les deux sont fusionnés en AND pour les requêtes

Configuration par objet

Chaque objet définit ses vues disponibles dans objectConfigs.ts :

// Contacts : table et kanban
contacts: {
  views: ['table', 'kanban'],
  defaultView: 'table',
  enableFilters: true,
  enableSelection: true
}

// Tâches : sheet uniquement avec groupement
tasks: {
  views: ['sheet'],
  defaultView: 'sheet',
  grouping: {
    enabled: true,
    defaultGroupBy: 'due_date',
    customLogic: 'date-range'
  },
  inlineEdit: true
}

// Dashboards : liste uniquement
dashboards: {
  views: ['list'],
  defaultView: 'list',
  enableSelection: false
}

Persistance