@tsiky/components-r19 1.0.0 → 1.1.0

package/src/components/Confirmationpopup/ConfirmationPopup.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styles from './ConfirmationPopup.module.css';
+
+interface ConfirmationPopupProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  type?: 'warning' | 'info' | 'danger';
+}
+
+export const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = 'Confirmer',
+  cancelText = 'Annuler',
+  type = 'warning',
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.overlay}>
+      <div className={`${styles.popup} ${styles[type]}`}>
+        <div className={styles.header}>
+          <h3>{title}</h3>
+        </div>
+        <div className={styles.body}>
+          <p>{message}</p>
+        </div>
+        <div className={styles.footer}>
+          <button className={styles.cancelButton} onClick={onCancel}>
+            {cancelText}
+          </button>
+          <button className={styles.confirmButton} onClick={onConfirm}>
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Confirmationpopup/index.ts

@@ -0,0 +1,6 @@
+import { ConfirmationPopup } from './ConfirmationPopup';
+import { useConfirmationPopup } from './useConfirmationPopup';
+
+export { ConfirmationPopup, useConfirmationPopup };
+
+export default { ConfirmationPopup, useConfirmationPopup };

package/src/components/Confirmationpopup/useConfirmationPopup.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from 'react';
+
+interface ConfirmationState {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: (() => void) | null;
+}
+
+export const useConfirmationPopup = () => {
+  const [confirmationState, setConfirmationState] = useState<ConfirmationState>({
+    isOpen: false,
+    title: '',
+    message: '',
+    onConfirm: null,
+  });
+
+  const showConfirmation = useCallback((title: string, message: string, onConfirm: () => void) => {
+    setConfirmationState({
+      isOpen: true,
+      title,
+      message,
+      onConfirm,
+    });
+  }, []);
+
+  const hideConfirmation = useCallback(() => {
+    setConfirmationState((prev) => ({
+      ...prev,
+      isOpen: false,
+      onConfirm: null,
+    }));
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    confirmationState.onConfirm?.();
+    hideConfirmation();
+  }, [confirmationState.onConfirm, hideConfirmation]);
+
+  return {
+    isOpen: confirmationState.isOpen,
+    title: confirmationState.title,
+    message: confirmationState.message,
+    showConfirmation,
+    hideConfirmation,
+    handleConfirm,
+  };
+};

package/src/components/DayStatCard/DayStatCard.tsx

@@ -1,69 +1,96 @@
-import React from 'react';
-import type { CSSProperties } from 'react';
-import './DayStatCard.css';
-import { CircularProgress } from '../CircularProgress/CircularProgress';
-import type { CircularProgressProps } from '../CircularProgress/CircularProgress';
-
-export type DayStatCardProps = {
-  background?: string;
-  headerTop: string;
-  headerBottom?: string;
-  headerTopStyle?: CSSProperties;
-  headerBottomStyle?: CSSProperties;
-  progress1: CircularProgressProps;
-  progress2: CircularProgressProps;
-  progress3: CircularProgressProps;
-  style?: CSSProperties;
-  size?: number;
-  className?: string;
-};
-
-export const DayStatCard: React.FC<DayStatCardProps> = ({
-  size = 200,
-  background = '#fff',
-  headerTop,
-  headerBottom,
-  headerTopStyle,
-  headerBottomStyle,
-  progress1,
-  progress2,
-  progress3,
-  style,
-  className = '',
-}) => {
-  const progress1WithDefaults = { size: size * 0.5, ...progress1 };
-  const progress2WithDefaults = { size: size * 0.4, ...progress2 };
-  const progress3WithDefaults = { size: size * 0.4, ...progress3 };
-
-  return (
-    <div style={{ width: size, background, ...style }} className={`stat-card ${className}`}>
-      <div className='stat-card-header'>
-        <div className='stat-card-header-top' style={headerTopStyle}>
-          {headerTop}
-        </div>
-        {headerBottom && (
-          <div className='stat-card-header-bottom' style={headerBottomStyle}>
-            {headerBottom}
-          </div>
-        )}
-      </div>
-
-      <div className='stat-card-body'>
-        {/* Première ligne - Progress Centré */}
-        <div className='progress-row-single'>
-          <CircularProgress {...progress1WithDefaults} />
-        </div>
-
-        {/* Deuxième ligne - Deux Progress côte à côte */}
-        <div className='progress-row-double'>
-          <div className='progress-item'>
-            <CircularProgress {...progress2WithDefaults} />
-          </div>
-          <div className='progress-item'>
-            <CircularProgress {...progress3WithDefaults} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import React from 'react';
+import type { CSSProperties } from 'react';
+import './DayStatCard.css';
+import { CircularProgress } from '../CircularProgress/CircularProgress';
+import type { CircularProgressProps } from '../CircularProgress/CircularProgress';
+import { Move } from 'lucide-react';
+
+export type DayStatCardProps = {
+  background?: string;
+  headerTop: string;
+  headerBottom?: string;
+  headerTopStyle?: CSSProperties;
+  headerBottomStyle?: CSSProperties;
+  progress1: CircularProgressProps;
+  progress2: CircularProgressProps;
+  progress3: CircularProgressProps;
+  style?: CSSProperties;
+  size?: number;
+  className?: string;
+  draggable?: boolean; // nouvelle prop
+};
+
+export const DayStatCard: React.FC<DayStatCardProps> = ({
+  size = 200,
+  background = '#fff',
+  headerTop,
+  headerBottom,
+  headerTopStyle,
+  headerBottomStyle,
+  progress1,
+  progress2,
+  progress3,
+  style,
+  className = '',
+  draggable = false,
+}) => {
+  const progress1WithDefaults = { size: size * 0.5, ...progress1 };
+  const progress2WithDefaults = { size: size * 0.4, ...progress2 };
+  const progress3WithDefaults = { size: size * 0.4, ...progress3 };
+
+  return (
+    <div
+      style={{ width: size, background, position: 'relative', ...style }}
+      className={`stat-card ${className}`}
+    >
+      {/* Header toujours visible */}
+      <div className='stat-card-header'>
+        <div className='stat-card-header-top' style={headerTopStyle}>
+          {headerTop}
+        </div>
+        {headerBottom && (
+          <div className='stat-card-header-bottom' style={headerBottomStyle}>
+            {headerBottom}
+          </div>
+        )}
+      </div>
+
+      {/* Body */}
+      <div className='stat-card-body' style={{ opacity: draggable ? 0 : 1 }}>
+        {/* Première ligne - Progress Centré */}
+        <div className='progress-row-single'>
+          <CircularProgress {...progress1WithDefaults} />
+        </div>
+
+        {/* Deuxième ligne - Deux Progress côte à côte */}
+        <div className='progress-row-double'>
+          <div className='progress-item'>
+            <CircularProgress {...progress2WithDefaults} />
+          </div>
+          <div className='progress-item'>
+            <CircularProgress {...progress3WithDefaults} />
+          </div>
+        </div>
+      </div>
+
+      {/* Overlay Move */}
+      {draggable && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}
+        >
+          <Move size={32} strokeWidth={1.5} style={{ opacity: 0.8 }} />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/DynamicTable/AdvancedFilters.tsx

@@ -1,196 +1,196 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import { X, Filter } from 'lucide-react';
-import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
-import { useFilters } from './hooks/useFilters';
-import FilterRenderer from './filters/FilterRenderer';
-import styles from './TableauDynamique.module.css';
-
-interface AdvancedFiltersProps {
-  filters: FilterConfig[];
-  externalFilters?: AppliedFilter[];
-  onFiltersChange?: (filters: AppliedFilter[]) => void;
-  onApply?: (filters: AppliedFilter[]) => void;
-  isControlled?: boolean;
-  debounceTimeout?: number;
-  resultsCount?: number;
-  expanded?: boolean;
-  onToggle?: (expanded: boolean) => void;
-  panelPlacement?: 'overlay' | 'top';
-  onPanelHeightChange?: (height: number) => void;
-}
-
-const AdvancedFilters: React.FC<AdvancedFiltersProps> = ({
-  filters,
-  externalFilters = [],
-  onFiltersChange,
-  onApply,
-  isControlled = false,
-  debounceTimeout = 300,
-  resultsCount = 0,
-  expanded,
-  onToggle,
-  panelPlacement = 'top',
-  onPanelHeightChange,
-}) => {
-  const [localExpanded, setLocalExpanded] = useState(false);
-  const isExpanded = typeof expanded === 'boolean' ? expanded : localExpanded;
-
-  const { appliedFilters, tempFilters, updateFilter, applyFilters, clearAllFilters } = useFilters({
-    filters,
-    externalFilters,
-    onFiltersChange,
-    onApply,
-    debounceTimeout,
-    isControlled,
-  });
-
-  const panelRef = useRef<HTMLDivElement | null>(null);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (isExpanded && panelRef.current) {
-      const h = panelRef.current.getBoundingClientRect().height;
-      onPanelHeightChange?.(h);
-    } else {
-      onPanelHeightChange?.(0);
-    }
-  }, [isExpanded, filters, tempFilters, onPanelHeightChange]);
-
-  const toggle = () => {
-    if (typeof expanded === 'boolean') {
-      onToggle?.(!expanded);
-    } else {
-      setLocalExpanded((s) => {
-        const next = !s;
-        onToggle?.(next);
-        return next;
-      });
-    }
-  };
-
-  const handleApply = async () => {
-    await applyFilters();
-    onToggle?.(false);
-    if (typeof expanded !== 'boolean') setLocalExpanded(false);
-  };
-
-  useEffect(() => {
-    const onPointerDown = (e: PointerEvent) => {
-      if (!isExpanded) return;
-      if (!wrapperRef.current) return;
-      if (!wrapperRef.current.contains(e.target as Node)) {
-        onToggle?.(false);
-        if (typeof expanded !== 'boolean') setLocalExpanded(false);
-      }
-    };
-
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isExpanded) {
-        onToggle?.(false);
-        if (typeof expanded !== 'boolean') setLocalExpanded(false);
-      }
-    };
-
-    if (isExpanded) {
-      document.addEventListener('pointerdown', onPointerDown);
-      document.addEventListener('keydown', onKey);
-    }
-
-    return () => {
-      document.removeEventListener('pointerdown', onPointerDown);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [isExpanded, expanded, onToggle]);
-
-  return (
-    <div className={styles.advancedFiltersContainer} ref={wrapperRef}>
-      <div className={styles.filtersHeader}>
-        <button
-          className={styles.toggleFiltersButton}
-          onClick={toggle}
-          aria-expanded={isExpanded}
-          aria-controls='advanced-filters-panel'
-        >
-          <Filter size={14} />
-          <span className={styles.buttonTextCompact}>Advanced-Filters</span>
-        </button>
-
-        {appliedFilters.length > 0 && (
-          <button className={styles.clearFiltersButton} onClick={clearAllFilters}>
-            <X size={14} /> <span className={styles.buttonTextCompact}>Effacer</span>
-          </button>
-        )}
-      </div>
-
-      {isExpanded && (
-        <div
-          id='advanced-filters-panel'
-          ref={panelRef}
-          className={`${styles.filtersPanel} ${
-            panelPlacement === 'top'
-              ? `${styles.filtersPanelInline} ${styles.filtersPanelHorizontal}`
-              : ''
-          }`}
-          role='region'
-          aria-label='Panneau de filtres avancés'
-        >
-          <div className={styles.filtersRow}>
-            {filters.map((filter) => (
-              <div key={filter.id} className={`${styles.filterItem} ${styles.filterItemInline}`}>
-                <label className={styles.filterLabel}>
-                  {filter.label}
-                  {filter.required && <span className={styles.required}>*</span>}
-                </label>
-                <FilterRenderer
-                  config={filter}
-                  value={tempFilters[filter.id]}
-                  onChange={(value) => updateFilter(filter.id, value)}
-                  disabled={filter.disabled}
-                />
-              </div>
-            ))}
-          </div>
-
-          <div className={styles.filtersActionsHorizontal}>
-            <div className={styles.activeFiltersWrap}>
-              {appliedFilters.length > 0 && (
-                <div className={styles.activeFilters}>
-                  <span className={styles.activeLabelCompact}>Actifs :</span>
-                  {appliedFilters.map((f) => (
-                    <div key={f.id} className={styles.activeFilterTag}>
-                      {f.label ?? f.id}
-                      <button
-                        onClick={() => updateFilter(f.id, undefined)}
-                        aria-label={`Supprimer ${f.id}`}
-                      >
-                        ×
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            <div className={styles.actionsGroup}>
-              <button
-                className={styles.cancelButton}
-                onClick={() => {
-                  onToggle?.(false);
-                }}
-              >
-                Cancel
-              </button>
-              <button className={styles.applyButton} onClick={handleApply}>
-                Apply
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AdvancedFilters;
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { X, Filter } from 'lucide-react';
+import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
+import { useFilters } from './hooks/useFilters';
+import FilterRenderer from './filters/FilterRenderer';
+import styles from './TableauDynamique.module.css';
+
+interface AdvancedFiltersProps {
+  filters: FilterConfig[];
+  externalFilters?: AppliedFilter[];
+  onFiltersChange?: (filters: AppliedFilter[]) => void;
+  onApply?: (filters: AppliedFilter[]) => void;
+  isControlled?: boolean;
+  debounceTimeout?: number;
+  resultsCount?: number;
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  panelPlacement?: 'overlay' | 'top';
+  onPanelHeightChange?: (height: number) => void;
+}
+
+const AdvancedFilters: React.FC<AdvancedFiltersProps> = ({
+  filters,
+  externalFilters = [],
+  onFiltersChange,
+  onApply,
+  isControlled = false,
+  debounceTimeout = 300,
+  resultsCount = 0,
+  expanded,
+  onToggle,
+  panelPlacement = 'top',
+  onPanelHeightChange,
+}) => {
+  const [localExpanded, setLocalExpanded] = useState(false);
+  const isExpanded = typeof expanded === 'boolean' ? expanded : localExpanded;
+
+  const { appliedFilters, tempFilters, updateFilter, applyFilters, clearAllFilters } = useFilters({
+    filters,
+    externalFilters,
+    onFiltersChange,
+    onApply,
+    debounceTimeout,
+    isControlled,
+  });
+
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (isExpanded && panelRef.current) {
+      const h = panelRef.current.getBoundingClientRect().height;
+      onPanelHeightChange?.(h);
+    } else {
+      onPanelHeightChange?.(0);
+    }
+  }, [isExpanded, filters, tempFilters, onPanelHeightChange]);
+
+  const toggle = () => {
+    if (typeof expanded === 'boolean') {
+      onToggle?.(!expanded);
+    } else {
+      setLocalExpanded((s) => {
+        const next = !s;
+        onToggle?.(next);
+        return next;
+      });
+    }
+  };
+
+  const handleApply = async () => {
+    await applyFilters();
+    onToggle?.(false);
+    if (typeof expanded !== 'boolean') setLocalExpanded(false);
+  };
+
+  useEffect(() => {
+    const onPointerDown = (e: PointerEvent) => {
+      if (!isExpanded) return;
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target as Node)) {
+        onToggle?.(false);
+        if (typeof expanded !== 'boolean') setLocalExpanded(false);
+      }
+    };
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isExpanded) {
+        onToggle?.(false);
+        if (typeof expanded !== 'boolean') setLocalExpanded(false);
+      }
+    };
+
+    if (isExpanded) {
+      document.addEventListener('pointerdown', onPointerDown);
+      document.addEventListener('keydown', onKey);
+    }
+
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [isExpanded, expanded, onToggle]);
+
+  return (
+    <div className={styles.advancedFiltersContainer} ref={wrapperRef}>
+      <div className={styles.filtersHeader}>
+        <button
+          className={styles.toggleFiltersButton}
+          onClick={toggle}
+          aria-expanded={isExpanded}
+          aria-controls='advanced-filters-panel'
+        >
+          <Filter size={14} />
+          <span className={styles.buttonTextCompact}>Advanced-Filters</span>
+        </button>
+
+        {appliedFilters.length > 0 && (
+          <button className={styles.clearFiltersButton} onClick={clearAllFilters}>
+            <X size={14} /> <span className={styles.buttonTextCompact}>Effacer</span>
+          </button>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div
+          id='advanced-filters-panel'
+          ref={panelRef}
+          className={`${styles.filtersPanel} ${
+            panelPlacement === 'top'
+              ? `${styles.filtersPanelInline} ${styles.filtersPanelHorizontal}`
+              : ''
+          }`}
+          role='region'
+          aria-label='Panneau de filtres avancés'
+        >
+          <div className={styles.filtersRow}>
+            {filters.map((filter) => (
+              <div key={filter.id} className={`${styles.filterItem} ${styles.filterItemInline}`}>
+                <label className={styles.filterLabel}>
+                  {filter.label}
+                  {filter.required && <span className={styles.required}>*</span>}
+                </label>
+                <FilterRenderer
+                  config={filter}
+                  value={tempFilters[filter.id]}
+                  onChange={(value) => updateFilter(filter.id, value)}
+                  disabled={filter.disabled}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className={styles.filtersActionsHorizontal}>
+            <div className={styles.activeFiltersWrap}>
+              {appliedFilters.length > 0 && (
+                <div className={styles.activeFilters}>
+                  <span className={styles.activeLabelCompact}>Actifs :</span>
+                  {appliedFilters.map((f) => (
+                    <div key={f.id} className={styles.activeFilterTag}>
+                      {f.label ?? f.id}
+                      <button
+                        onClick={() => updateFilter(f.id, undefined)}
+                        aria-label={`Supprimer ${f.id}`}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className={styles.actionsGroup}>
+              <button
+                className={styles.cancelButton}
+                onClick={() => {
+                  onToggle?.(false);
+                }}
+              >
+                Cancel
+              </button>
+              <button className={styles.applyButton} onClick={handleApply}>
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdvancedFilters;