ptechcore_ui 0.0.0

package/src/components/layout/PrivateLayout.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import Header from './Header';
+import Sidebar from './Sidebar';
+
+interface PrivateLayoutProps {
+  children: React.ReactNode;
+}
+
+const RewiseLayout: React.FC<PrivateLayoutProps> = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      {/* Header */}
+      <Header 
+        onMenuClick={() => setSidebarOpen(!sidebarOpen)}
+        sidebarOpen={sidebarOpen}
+      />
+      
+      <div className="flex">
+        {/* Sidebar */}
+        <Sidebar 
+          isOpen={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+        />
+        
+        {/* Main Content */}
+        <main 
+          className={`
+            flex-1 transition-all duration-300 ease-in-out
+            ${sidebarOpen ? 'lg:ml-64' : 'lg:ml-16'}
+            pt-16
+          `}
+        >
+          <div className="p-6">
+            {children}
+          </div>
+        </main>
+      </div>
+      
+      {/* Overlay for mobile */}
+      {sidebarOpen && (
+        <div 
+          className="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default RewiseLayout;

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  Home,
+  BarChart3,
+  Users,
+  Calendar,
+  FileText,
+  Settings,
+  HelpCircle,
+  ChevronLeft,
+  ChevronRight,
+  Building2
+} from 'lucide-react';
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface MenuItem {
+  id: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  path: string;
+  badge?: number;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const menuItems: MenuItem[] = [
+    {
+      id: 'dashboard',
+      label: 'Tableau de bord',
+      icon: Home,
+      path: '/dashboard'
+    },
+    {
+      id: 'analytics',
+      label: 'Analyses',
+      icon: BarChart3,
+      path: '/analytics'
+    },
+    {
+      id: 'team',
+      label: 'Équipe',
+      icon: Users,
+      path: '/team',
+      badge: 3
+    },
+    {
+      id: 'organizations',
+      label: 'Organisations',
+      icon: Building2,
+      path: '/organizations'
+    },
+    {
+      id: 'calendar',
+      label: 'Calendrier',
+      icon: Calendar,
+      path: '/calendar'
+    },
+    {
+      id: 'reports',
+      label: 'Rapports',
+      icon: FileText,
+      path: '/reports'
+    }
+  ];
+
+  const bottomMenuItems: MenuItem[] = [
+    {
+      id: 'settings',
+      label: 'Paramètres',
+      icon: Settings,
+      path: '/settings'
+    },
+    {
+      id: 'help',
+      label: 'Aide',
+      icon: HelpCircle,
+      path: '/help'
+    }
+  ];
+
+  const handleMenuClick = (path: string) => {
+    navigate(path);
+    // Close sidebar on mobile after navigation
+    if (window.innerWidth < 1024) {
+      onClose();
+    }
+  };
+
+  const isActiveRoute = (path: string) => {
+    return location.pathname === path || location.pathname.startsWith(path + '/');
+  };
+
+  const MenuItemComponent = ({ item }: { item: MenuItem }) => {
+    const Icon = item.icon;
+    const isActive = isActiveRoute(item.path);
+
+    return (
+      <button
+        onClick={() => handleMenuClick(item.path)}
+        className={`
+          w-full flex items-center space-x-3 px-3 py-3 rounded-lg transition-all duration-200
+          ${isActive 
+            ? 'bg-[#8290A9] text-white shadow-md' 
+            : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800'
+          }
+          ${!isOpen ? 'justify-center' : ''}
+        `}
+        title={!isOpen ? item.label : undefined}
+      >
+        <Icon className={`w-5 h-5 ${isActive ? 'text-white' : ''}`} />
+        {isOpen && (
+          <>
+            <span className="font-medium">{item.label}</span>
+            {item.badge && (
+              <span className="ml-auto bg-red-500 text-white text-xs rounded-full px-2 py-1 min-w-[20px] h-5 flex items-center justify-center">
+                {item.badge}
+              </span>
+            )}
+          </>
+        )}
+      </button>
+    );
+  };
+
+  return (
+    <>
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed left-0 top-16 h-[calc(100vh-4rem)] bg-white border-r border-gray-200 z-30
+          transition-all duration-300 ease-in-out
+          ${isOpen ? 'w-64' : 'w-16'}
+          ${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+        `}
+      >
+        <div className="flex flex-col h-full">
+          {/* Main Navigation */}
+          <nav className="flex-1 px-3 py-4">
+            <div className="space-y-2">
+              {menuItems.map((item) => (
+                <MenuItemComponent key={item.id} item={item} />
+              ))}
+            </div>
+          </nav>
+
+          {/* Bottom Navigation */}
+          <nav className="px-3 py-4 border-t border-gray-200">
+            <div className="space-y-2">
+              {bottomMenuItems.map((item) => (
+                <MenuItemComponent key={item.id} item={item} />
+              ))}
+            </div>
+          </nav>
+
+          {/* Collapse/Expand Button (Desktop only) */}
+          <div className="hidden lg:block px-3 py-2 border-t border-gray-200">
+            <button
+              onClick={onClose}
+              className="w-full flex items-center justify-center py-2 text-gray-500 hover:text-gray-700 transition-colors"
+              title={isOpen ? 'Réduire la sidebar' : 'Étendre la sidebar'}
+            >
+              {isOpen ? (
+                <ChevronLeft className="w-4 h-4" />
+              ) : (
+                <ChevronRight className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;

package/src/components/ui/Toast.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import { Toast as ToastType, useToast } from '../../contexts/ToastContext';
+import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-react';
+
+interface ToastItemProps {
+  toast: ToastType;
+}
+
+const ToastItem: React.FC<ToastItemProps> = ({ toast }) => {
+  const { removeToast } = useToast();
+  const [isVisible, setIsVisible] = useState(false);
+  const [isLeaving, setIsLeaving] = useState(false);
+
+  useEffect(() => {
+    // Trigger entrance animation
+    const timer = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleClose = () => {
+    setIsLeaving(true);
+    setTimeout(() => {
+      removeToast(toast.id);
+    }, 300);
+  };
+
+  const getIcon = () => {
+    switch (toast.type) {
+      case 'success':
+        return <CheckCircle className="w-5 h-5 text-green-600" />;
+      case 'error':
+        return <XCircle className="w-5 h-5 text-red-600" />;
+      case 'warning':
+        return <AlertTriangle className="w-5 h-5 text-yellow-600" />;
+      case 'info':
+        return <Info className="w-5 h-5 text-blue-600" />;
+    }
+  };
+
+  const getBackgroundColor = () => {
+    switch (toast.type) {
+      case 'success':
+        return 'bg-green-50 border-green-200';
+      case 'error':
+        return 'bg-red-50 border-red-200';
+      case 'warning':
+        return 'bg-yellow-50 border-yellow-200';
+      case 'info':
+        return 'bg-blue-50 border-blue-200';
+    }
+  };
+
+  return (
+    <div
+      className={`
+        transform transition-all duration-300 ease-in-out
+        ${isVisible && !isLeaving ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
+        ${getBackgroundColor()}
+        max-w-sm w-full border rounded-lg p-4 shadow-lg
+        flex items-start space-x-3
+      `}
+    >
+      <div className="flex-shrink-0">
+        {getIcon()}
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-gray-900 font-medium">
+          {toast.message}
+        </p>
+      </div>
+      <button
+        onClick={handleClose}
+        className="flex-shrink-0 ml-4 text-gray-400 hover:text-gray-600 transition-colors"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+};
+
+const ToastContainer: React.FC = () => {
+  const { toasts } = useToast();
+
+  return (
+    <div className="fixed top-4 right-4 z-50 space-y-3">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} />
+      ))}
+    </div>
+  );
+};
+
+export default ToastContainer;

package/src/contexts/SessionContext.tsx

@@ -0,0 +1,77 @@
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { AuthServices } from '../services/AuthServices';
+import { User } from '../models/User';
+
+
+
+
+interface SessionContextType {
+  isAuthenticated: boolean;
+  token: string | null;
+  loggedUser: User | null;
+  login: (token: string) => void;
+  logout: () => void;
+}
+
+const SessionContext = createContext<SessionContextType | undefined>(undefined);
+
+export const useSession = () => {
+  const context = useContext(SessionContext);
+  if (!context) {
+    throw new Error('useSession must be used within a SessionProvider');
+  }
+  return context;
+};
+
+export const SessionProvider = ({ children }: { children: ReactNode }) => {
+  const [token, setToken] = useState<string | null>(localStorage.getItem('token'));
+  const [loggedUser, setLoggedUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem('token');
+    if (storedToken) {
+      setToken(storedToken);
+    }
+  }, []);
+
+  const login = (newToken: string) => {
+    localStorage.setItem('token', newToken);
+    setToken(newToken);
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    setToken(null);
+  };
+
+  useEffect(() => {
+    if (token) {
+      AuthServices.getUserInformations(token)
+        .then((res) => {
+          const result = res as { success: boolean; message?: string; data?: any };
+          if (result.success === true) {
+            setLoggedUser(result.data.user);
+          } else {
+            setLoggedUser(null);
+          }
+        })
+        .catch(() => setLoggedUser(null));
+    } else {
+      setLoggedUser(null);
+    }
+  }, [token]);
+
+
+
+  return (
+    <SessionContext.Provider value={{
+      isAuthenticated: !!token,
+      loggedUser,
+      token,
+      login,
+      logout,
+    }}>
+      {children}
+    </SessionContext.Provider>
+  );
+};

package/src/contexts/ThemeContext.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { themes, defaultTheme, getThemeCSSVariables, Theme, ThemeType, ThemeContextValue } from '../styles/theme';
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  // Récupérer le thème sauvegardé ou utiliser le thème par défaut
+  const [themeType, setThemeType] = useState<ThemeType>(() => {
+    const saved = localStorage.getItem('wisebook-theme') as ThemeType;
+    return saved && saved in themes ? saved : 'minimalist';
+  });
+
+  const [theme, setThemeState] = useState<Theme>(themes[themeType] || defaultTheme);
+
+  // Appliquer les variables CSS du thème
+  useEffect(() => {
+    const root = document.documentElement;
+    const cssVars = getThemeCSSVariables(theme);
+    
+    Object.entries(cssVars).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+
+    // Appliquer les styles globaux
+    root.style.backgroundColor = theme.colors.background;
+    root.style.color = theme.colors.text.primary;
+    
+    // Sauvegarder le choix
+    localStorage.setItem('wisebook-theme', themeType);
+  }, [theme, themeType]);
+
+  const setTheme = (type: ThemeType) => {
+    if (type in themes) {
+      setThemeType(type);
+      setThemeState(themes[type]);
+    }
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, themeType, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

package/src/contexts/ToastContext.tsx

@@ -0,0 +1,94 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+}
+
+interface ToastContextType {
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, 'id'>) => void;
+  removeToast: (id: string) => void;
+  success: (message: string, duration?: number) => void;
+  error: (message: string, duration?: number) => void;
+  warning: (message: string, duration?: number) => void;
+  info: (message: string, duration?: number) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const useToast = (): ToastContextType => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
+interface ToastProviderProps {
+  children: ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const generateId = (): string => {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+  };
+
+  const addToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = generateId();
+    const newToast: Toast = {
+      id,
+      duration: 5000,
+      ...toast,
+    };
+
+    setToasts(prev => [...prev, newToast]);
+
+    // Auto remove toast after duration
+    if (newToast.duration && newToast.duration > 0) {
+      setTimeout(() => {
+        removeToast(id);
+      }, newToast.duration);
+    }
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+  }, []);
+
+  const success = useCallback((message: string, duration?: number) => {
+    addToast({ message, type: 'success', duration });
+  }, [addToast]);
+
+  const error = useCallback((message: string, duration?: number) => {
+    addToast({ message, type: 'error', duration });
+  }, [addToast]);
+
+  const warning = useCallback((message: string, duration?: number) => {
+    addToast({ message, type: 'warning', duration });
+  }, [addToast]);
+
+  const info = useCallback((message: string, duration?: number) => {
+    addToast({ message, type: 'info', duration });
+  }, [addToast]);
+
+  const value: ToastContextType = {
+    toasts,
+    addToast,
+    removeToast,
+    success,
+    error,
+    warning,
+    info,
+  };
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+    </ToastContext.Provider>
+  );
+};

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/models/Organization.ts

@@ -0,0 +1,47 @@
+import { Subscription } from "./Plan";
+
+export interface Organization {
+  id: number;
+  legal_name: string;
+  trading_name?: string;
+  phone?: string;
+  email?: string;
+  address?: string;
+  owner: number;
+  active_subscription?: Subscription | null;
+  modules?: any[];
+  created_at: string;
+  updated_at: string;
+  is_deleted: boolean;
+}
+
+export interface Entity {
+  id: number;
+  organization: number;
+  legal_name: string;
+  trading_name?: string;
+  phone?: string;
+  email?: string;
+  logo?: string;
+  legal_representative_name?: string;
+  legal_representative_phone?: string;
+  legal_representative_email?: string;
+  country?: string;
+  city?: string;
+  address?: string;
+  rib?: string;
+  iban?: string;
+  bank_name?: string;
+  bank_address?: string;
+  tax_account?: string;
+  rccm?: string;
+  currency?: string;
+  centers_taxes?: string;
+  point_of_sale?: string;
+  establishment?: string;
+  fne_url?: string;
+  fne_auth_key?: string;
+  regime_taxes?: string;
+  balance_sticker_fne?: number;
+
+}

package/src/models/Plan.ts

@@ -0,0 +1,42 @@
+export interface Module {
+  id: number;
+  code: string;
+  name: string;
+  description?: string;
+  price: number;
+  is_active: boolean;
+  price_monthly: number;
+  price_yearly: number;
+  created_at: string;
+  updated_at: string;
+  is_deleted: boolean;
+}
+
+export interface Plan {
+  id: number;
+  name: string;
+  description?: string;
+  price_monthly: number;
+  price_yearly: number;
+  max_users: number;
+  max_entities: number;
+  modules_included: Module[] | number[];
+  is_private: boolean;
+  private_for?: number | null;
+  created_at: string;
+  updated_at: string;
+  is_deleted: boolean;
+}
+
+
+export interface Subscription {
+  id: number;
+  organization: number;
+  plan: Plan;
+  start_date: string;
+  end_date: string;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  extra_modules?: Module[] | number[];
+}

package/src/models/User.ts

@@ -0,0 +1,23 @@
+
+
+export interface User {
+  id: number;
+  last_login: string | null;
+  is_superuser: boolean;
+  username: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  is_staff: boolean;
+  is_active: boolean;
+  date_joined: string;
+  is_deleted: boolean;
+  deleted_at: string | null;
+  phonenumber: string | null;
+  groups: any[];
+  user_permissions: any[];
+  centers_access?: Array<{
+        id: number;
+        permissions?: number[];
+    }>;
+}