All files / apps/web/src/backoffice/pages Synthetisers.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useNavigate } from 'react-router-dom';
import { Brain, Table, Plus } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { workflowAPI } from '../../services/api';
import { useOrganizationStore } from '../../store/organizationStore';
import EntitySidebar from '../../components/EntitySidebar';
import BackofficeEntityPage from '../components/BackofficeEntityPage';
 
export default function Workflows() {
  const navigate = useNavigate();
  const { currentOrganization } = useOrganizationStore();
  const organizationId = currentOrganization?.id;
 
  const { data: workflows, isLoading } = useQuery({
    queryKey: ['workflows', organizationId],
    queryFn: async () => {
      const response = await workflowAPI.list();
      return response.data.data || [];
    }
  });
 
  const sidebar = (
    <EntitySidebar
      items={workflows || []}
      getItemHref={(wf) => `/${organizationId}/backoffice/workflows/${wf._id || wf.id}`}
      searchPlaceholder="Rechercher un workflow..."
      emptyMessage="Aucun workflow disponible"
      title="Workflows"
      icon={Brain}
      iconClass="text-purple-600"
      backofficeTo={`/${organizationId}/backoffice/workflows/new`}
      backofficeManageLabel="Créer un workflow"
      backofficeCreateLabel="Créer un workflow"
      createOnly
      loading={isLoading}
      filterFn={(wf) => `${wf.name} ${wf.description || ''}`}
      renderItem={(wf, isSelected) => (
        <>
          <div className="flex items-center">
            {wf.mode === 'fact' ? (
              <Brain className={`w-4 h-4 mr-2 flex-shrink-0 ${isSelected ? 'text-purple-600' : 'text-gray-400'}`} />
            ) : (
              <Table className={`w-4 h-4 mr-2 flex-shrink-0 ${isSelected ? 'text-indigo-600' : 'text-gray-400'}`} />
            )}
            <span className={`text-sm font-medium truncate flex-1 ${isSelected ? 'text-gray-900' : 'text-gray-700'}`}>
              {wf.name}
            </span>
            <span className="text-xs text-gray-400">{wf.mode === 'fact' ? 'Faits' : 'Données'}</span>
          </div>
          {wf.description && (
            <div className="text-xs text-gray-500 truncate mt-0.5">{wf.description}</div>
          )}
        </>
      )}
    />
  );
 
  return (
    <BackofficeEntityPage selectedId={null} sidebar={sidebar}>
      <div className="flex-1 min-h-0 overflow-y-auto p-3 sm:p-6">
        <div className="h-full flex items-center justify-center">
          <div className="text-center">
            <Brain className="w-16 h-16 mx-auto mb-4 text-gray-300" />
            <p className="text-gray-500">Sélectionnez un workflow dans la liste pour le gérer</p>
            <button
              onClick={() => navigate(`/${organizationId}/backoffice/workflows/new`)}
              className="mt-6 inline-flex items-center px-5 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
            >
              <Plus className="w-5 h-5 mr-2" />
              Créer un workflow
            </button>
          </div>
        </div>
      </div>
    </BackofficeEntityPage>
  );
}