Enhance group configuration with NocoDB mapping and webhook integration

Update the group schema and UI to include NocoDB column mapping and webhook URL for advanced invoice management and notifications.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: b163d4c0-de5e-4f4e-a9c0-aed4c7049718
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/b163d4c0-de5e-4f4e-a9c0-aed4c7049718/HPoOClM

PRODUCTION-SCHEMA-UPDATE.sql

@@ -0,0 +1,39 @@
+-- =============================================
+-- PRODUCTION SCHEMA UPDATE - Groups NocoDB Configuration
+-- Date: 2025-08-12
+-- Description: Synchronise le schéma production avec les nouveaux champs NocoDB
+-- =============================================
+
+-- Retirer le champ nocodbTableId qui n'est plus nécessaire
+ALTER TABLE groups DROP COLUMN IF EXISTS "nocodb_table_id";
+
+-- Ajouter les nouveaux champs de configuration NocoDB par magasin
+ALTER TABLE groups ADD COLUMN IF NOT EXISTS "nocodb_bl_column_name" VARCHAR;
+ALTER TABLE groups ADD COLUMN IF NOT EXISTS "nocodb_amount_column_name" VARCHAR;
+ALTER TABLE groups ADD COLUMN IF NOT EXISTS "nocodb_supplier_column_name" VARCHAR;
+ALTER TABLE groups ADD COLUMN IF NOT EXISTS "webhook_url" VARCHAR(500);
+
+-- Modifier la colonne color pour avoir une valeur par défaut (si elle n'en a pas déjà une)
+ALTER TABLE groups ALTER COLUMN color SET DEFAULT '#1976D2';
+
+-- Ajout de commentaires pour documentation
+COMMENT ON COLUMN groups.color IS 'Couleur hex du groupe, par défaut #1976D2';
+COMMENT ON COLUMN groups.nocodb_table_name IS 'Nom de la table NocoDB spécifique au magasin';
+COMMENT ON COLUMN groups.invoice_column_name IS 'Nom de la colonne facture dans la table NocoDB du magasin';
+COMMENT ON COLUMN groups.nocodb_bl_column_name IS 'Nom de la colonne BL dans la table NocoDB du magasin';
+COMMENT ON COLUMN groups.nocodb_amount_column_name IS 'Nom de la colonne montant dans la table NocoDB du magasin';
+COMMENT ON COLUMN groups.nocodb_supplier_column_name IS 'Nom de la colonne fournisseur dans la table NocoDB du magasin';
+COMMENT ON COLUMN groups.webhook_url IS 'URL webhook pour notifications spécifiques au magasin';
+
+-- Vérification du schéma final
+SELECT 
+    column_name, 
+    data_type, 
+    is_nullable, 
+    column_default,
+    col_description(pg_class.oid, ordinal_position) as column_comment
+FROM information_schema.columns 
+JOIN pg_class ON pg_class.relname = table_name
+WHERE table_name = 'groups' 
+    AND table_schema = 'public'
+ORDER BY ordinal_position;

client/src/pages/Groups.tsx

@@ -46,9 +46,12 @@ export default function Groups() {
     name: "",
     color: "#1976D2",
     nocodbConfigId: "",
-    nocodbTableId: "",
     nocodbTableName: "",
-    invoiceColumnName: "Ref Facture",
+    invoiceColumnName: "",
+    nocodbBlColumnName: "",
+    nocodbAmountColumnName: "",
+    nocodbSupplierColumnName: "",
+    webhookUrl: "",
   });
 
   const { data: groups = [], isLoading } = useQuery<Group[]>({
@@ -243,9 +246,12 @@ export default function Groups() {
       name: "",
       color: "#1976D2",
       nocodbConfigId: "",
-      nocodbTableId: "",
       nocodbTableName: "",
-      invoiceColumnName: "Ref Facture",
+      invoiceColumnName: "",
+      nocodbBlColumnName: "",
+      nocodbAmountColumnName: "",
+      nocodbSupplierColumnName: "",
+      webhookUrl: "",
     });
     setShowCreateModal(true);
   };
@@ -254,11 +260,14 @@ export default function Groups() {
     setSelectedGroup(group);
     setFormData({
       name: group.name,
-      color: group.color,
+      color: group.color || "#1976D2",
       nocodbConfigId: group.nocodbConfigId?.toString() || "",
-      nocodbTableId: group.nocodbTableId || "",
       nocodbTableName: group.nocodbTableName || "",
-      invoiceColumnName: group.invoiceColumnName || "Ref Facture",
+      invoiceColumnName: group.invoiceColumnName || "",
+      nocodbBlColumnName: group.nocodbBlColumnName || "",
+      nocodbAmountColumnName: group.nocodbAmountColumnName || "",
+      nocodbSupplierColumnName: group.nocodbSupplierColumnName || "",
+      webhookUrl: group.webhookUrl || "",
     });
     setShowEditModal(true);
   };
@@ -562,34 +571,107 @@ export default function Groups() {
               {formData.nocodbConfigId && (
                 <>
                   <div>
-                    <Label htmlFor="nocodbTableId">ID de la table</Label>
-                    <Input
-                      id="nocodbTableId"
-                      value={formData.nocodbTableId}
-                      onChange={(e) => handleChange('nocodbTableId', e.target.value)}
-                      placeholder="m_xxxxxxxxxxxx (ID de la table NocoDB)"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="nocodbTableName">Nom de la table</Label>
+                    <Label htmlFor="nocodbTableName">Nom de la table NocoDB *</Label>
                     <Input
                       id="nocodbTableName"
                       value={formData.nocodbTableName}
                       onChange={(e) => handleChange('nocodbTableName', e.target.value)}
-                      placeholder="Nom de la table (pour affichage)"
+                      placeholder="ex: Factures_Paris_2025"
+                      required
                     />
+                    <p className="text-xs text-gray-500 mt-1">
+                      Nom exact de la table dans votre base NocoDB
+                    </p>
                   </div>
 
-                  <div>
-                    <Label htmlFor="invoiceColumnName">Nom de la colonne des références facture</Label>
-                    <Input
-                      id="invoiceColumnName"
-                      value={formData.invoiceColumnName}
-                      onChange={(e) => handleChange('invoiceColumnName', e.target.value)}
-                      placeholder="Ref Facture"
-                    />
+                  <div className="border-t pt-4">
+                    <h4 className="font-medium text-gray-900 mb-3">Mapping des colonnes</h4>
+                    <p className="text-sm text-gray-600 mb-4">
+                      Configurez les noms exacts des colonnes dans votre table NocoDB
+                    </p>
+                    
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <Label htmlFor="invoiceColumnName">Colonne Facture *</Label>
+                        <Input
+                          id="invoiceColumnName"
+                          value={formData.invoiceColumnName}
+                          onChange={(e) => handleChange('invoiceColumnName', e.target.value)}
+                          placeholder="ex: Ref_Facture"
+                          required
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="nocodbBlColumnName">Colonne BL</Label>
+                        <Input
+                          id="nocodbBlColumnName"
+                          value={formData.nocodbBlColumnName}
+                          onChange={(e) => handleChange('nocodbBlColumnName', e.target.value)}
+                          placeholder="ex: Num_BL"
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="nocodbAmountColumnName">Colonne Montant</Label>
+                        <Input
+                          id="nocodbAmountColumnName"
+                          value={formData.nocodbAmountColumnName}
+                          onChange={(e) => handleChange('nocodbAmountColumnName', e.target.value)}
+                          placeholder="ex: Montant_HT"
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="nocodbSupplierColumnName">Colonne Fournisseur</Label>
+                        <Input
+                          id="nocodbSupplierColumnName"
+                          value={formData.nocodbSupplierColumnName}
+                          onChange={(e) => handleChange('nocodbSupplierColumnName', e.target.value)}
+                          placeholder="ex: Fournisseur"
+                        />
+                      </div>
+                    </div>
                   </div>
+
+                  <div className="border-t pt-4">
+                    <h4 className="font-medium text-gray-900 mb-3">Notifications</h4>
+                    <div>
+                      <Label htmlFor="webhookUrl">URL Webhook (optionnel)</Label>
+                      <Input
+                        id="webhookUrl"
+                        value={formData.webhookUrl}
+                        onChange={(e) => handleChange('webhookUrl', e.target.value)}
+                        placeholder="https://votre-site.com/webhook"
+                        type="url"
+                      />
+                      <p className="text-xs text-gray-500 mt-1">
+                        URL pour recevoir les notifications d'événements
+                      </p>
+                    </div>
+                  </div>
+
+                  {(formData.nocodbTableName && formData.invoiceColumnName) && (
+                    <div className="border-t pt-4">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full"
+                        onClick={() => {
+                          // TODO: Implémenter le test de configuration
+                          toast({
+                            title: "Test de configuration",
+                            description: "Fonctionnalité à implémenter",
+                          });
+                        }}
+                      >
+                        🔍 Tester la configuration NocoDB
+                      </Button>
+                      <p className="text-xs text-gray-500 mt-1 text-center">
+                        Vérifie que la table et les colonnes existent
+                      </p>
+                    </div>
+                  )}
                 </>
               )}
             </div>
@@ -606,9 +688,12 @@ export default function Groups() {
                     name: "",
                     color: "#1976D2",
                     nocodbConfigId: "",
-                    nocodbTableId: "",
                     nocodbTableName: "",
-                    invoiceColumnName: "Ref Facture",
+                    invoiceColumnName: "",
+                    nocodbBlColumnName: "",
+                    nocodbAmountColumnName: "",
+                    nocodbSupplierColumnName: "",
+                    webhookUrl: "",
                   });
                 }}
               >

shared/schema.ts

@@ -47,17 +47,16 @@ export const users = pgTable("users", {
 export const groups = pgTable("groups", {
   id: serial("id").primaryKey(),
   name: varchar("name").notNull(),
-  color: varchar("color").notNull().default("#1976D2"), // hex color code
+  color: varchar("color").default("#1976D2"), // hex color code
   // Configuration NocoDB pour vérification automatique des factures
-  nocodbConfigId: integer("nocodb_config_id"), // Référence vers la configuration NocoDB
-  nocodbTableId: varchar("nocodb_table_id"), // ID de la table dans NocoDB
-  nocodbTableName: varchar("nocodb_table_name"), // Nom de la table dans NocoDB
-  invoiceColumnName: varchar("invoice_column_name"), // Nom de la colonne contenant les références de facture
-  // Nouveaux champs pour l'intégration NocoDB avancée
-  nocodbBlColumnName: varchar("nocodb_bl_column_name"), // Nom de la colonne BL dans NocoDB
-  nocodbAmountColumnName: varchar("nocodb_amount_column_name"), // Nom de la colonne montant dans NocoDB
-  nocodbSupplierColumnName: varchar("nocodb_supplier_column_name"), // Nom de la colonne fournisseur dans NocoDB
-  webhookUrl: varchar("webhook_url", { length: 500 }), // URL de webhook pour notifications
+  nocodbConfigId: integer("nocodb_config_id"), // Référence vers la configuration NocoDB globale
+  nocodbTableName: varchar("nocodb_table_name"), // Nom de la table spécifique au magasin
+  // Mapping des colonnes par magasin dans leur table NocoDB
+  invoiceColumnName: varchar("invoice_column_name"), // Nom de la colonne facture dans leur table
+  nocodbBlColumnName: varchar("nocodb_bl_column_name"), // Nom de la colonne BL dans leur table
+  nocodbAmountColumnName: varchar("nocodb_amount_column_name"), // Nom de la colonne montant dans leur table
+  nocodbSupplierColumnName: varchar("nocodb_supplier_column_name"), // Nom de la colonne fournisseur dans leur table
+  webhookUrl: varchar("webhook_url", { length: 500 }), // URL de webhook pour notifications par magasin
   createdAt: timestamp("created_at").defaultNow(),
   updatedAt: timestamp("updated_at").defaultNow(),
 });