// Configuration des widgets
interface DashboardWidget {
  id: string;
  type: 'chart' | 'metric' | 'list';
  position: { x: number; y: number };
  size: { w: number; h: number };
  config: Record<string, unknown>;
}

// Hook de gestion des widgets
const useDashboardWidgets = () => {
  const [widgets, setWidgets] = useState<DashboardWidget[]>([]);

  const updateLayout = (newLayout: DashboardWidget[]) => {
    setWidgets(newLayout);
    saveDashboardLayout(newLayout);
  };

  return { widgets, updateLayout };
};

// Composant de graphique
const SalesChart: React.FC<ChartProps> = ({ data, period }) => {
  const chartConfig = {
    type: 'line',
    data: {
      labels: data.map(d => d.date),
      datasets: [{
        label: 'Ventes',
        data: data.map(d => d.amount),
      }],
    },
    options: {
      responsive: true,
      interaction: {
        mode: 'index',
        intersect: false,
      },
    },
  };

  return <Chart {...chartConfig} />;
};

// Gestionnaire de notifications
const NotificationCenter = () => {
  const { data: notifications } = useQuery(['notifications'], 
    fetchNotifications
  );

  return (
    <div className="notifications-panel">
      {notifications?.map(notification => (
        <NotificationItem
          key={notification.id}
          {...notification}
        />
      ))}
    </div>
  );
};

// Menu d'actions rapides
const QuickActions = () => {
  const actions = [
    {
      label: 'Nouvelle Commande',
      icon: <OrderIcon />,
      action: () => router.push('/orders/new'),
    },
    {
      label: 'Ajouter Client',
      icon: <CustomerIcon />,
      action: () => router.push('/customers/new'),
    },
    // ... autres actions
  ];

  return (
    <div className="quick-actions">
      {actions.map(action => (
        <ActionButton
          key={action.label}
          {...action}
        />
      ))}
    </div>
  );
};

// Configuration des thèmes
const themes = {
  light: {
    background: 'white',
    text: 'black',
    primary: 'blue',
  },
  dark: {
    background: '#1a1a1a',
    text: 'white',
    primary: '#3b82f6',
  },
};

// Hook de thème
const useTheme = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(current => current === 'light' ? 'dark' : 'light');
  };

  return { theme, toggleTheme };
};

// Configuration du layout
interface LayoutConfig {
  sidebar: {
    width: number;
    collapsed: boolean;
  };
  topbar: {
    height: number;
    fixed: boolean;
  };
}

// Gestionnaire de layout
const DashboardLayout: React.FC = ({ children }) => {
  const [config, setConfig] = useState<LayoutConfig>({
    sidebar: { width: 240, collapsed: false },
    topbar: { height: 64, fixed: true },
  });

  return (
    <div className="dashboard-layout">
      <Sidebar {...config.sidebar} />
      <div className="main-content">
        <Topbar {...config.topbar} />
        {children}
      </div>
    </div>
  );
};

// Configuration des sources
interface DataSource {
  type: 'external' | 'local';
  refreshInterval: number;
  transform?: (data: any) => any;
}

// Hook de données
const useDashboardData = (source: DataSource) => {
  const { data, error } = useSWR(
    source.type,
    fetchData,
    { refreshInterval: source.refreshInterval }
  );

  const transformedData = useMemo(() => {
    if (!data) return null;
    return source.transform ? source.transform(data) : data;
  }, [data, source.transform]);

  return { data: transformedData, error };
};