ptechcore_ui 0.0.0

package/src/components/common/FDrawer.types.ts

@@ -0,0 +1,191 @@
+import React, { ReactNode } from 'react';
+
+export interface FDrawerHeader {
+    key: string;
+    name: string;
+    type?: string;
+    filterable?: boolean;
+    formule?: (item: any) => string;
+    search_name?: string;
+}
+
+export interface FilterOption {
+    value: string;
+    label: string;
+}
+
+export interface Filter {
+    label: string;
+    type: string;
+    key: string;
+    filter_options?: FilterOption[];
+}
+
+export interface BtnListItem {
+    type: string;
+    label?: string;
+    to?: string;
+    target?: string;
+    dropdown?: any[];
+    onclick?: () => void;
+    icon?: any[];
+    icon_type?: string;
+}
+
+export interface ActionItem {
+    label: string;
+    onclick?: (row: any) => void;
+    to?: (row: any) => string;
+    condition?: (row: any) => boolean;
+    permission?: string;
+}
+
+export interface ReponseDetail {
+    total_pages: number | null;
+    previous: string | null;
+    next: string | null;
+    current_page: number | null;
+    paginate?: {
+        next: string;
+    };
+}
+
+export interface ViewAction {
+    label: string;
+    onclick?: () => void;
+}
+
+export interface SummaryRow {
+    label: string;
+    contents: Array<(param: any) => string | number>;
+}
+
+export interface Summary {
+    colonnes: string[];
+    rows: SummaryRow[];
+}
+
+export interface FDrawerProps {
+    id?: string;
+    selected?: any[];
+    maxText?: number;
+    type?: string;
+    noFilter?: boolean;
+    noSearch?: boolean;
+    canExport?: boolean;
+    table_type?: string;
+    toggle?: string;
+    headers?: FDrawerHeader[];
+    totalHeaders?: FDrawerHeader[];
+    totalMainHeaders?: FDrawerHeader[];
+    btnsList?: BtnListItem[];
+    infinite_scroll?: boolean;
+    title?: string | ReactNode;
+    title_?: string;
+    orderByDefault?: string;
+    api?: string;
+    additional_params?: string;
+    btn_add?: boolean;
+    inWorkspace?: boolean;
+    wTotalCard?: boolean;
+    wMenu?: boolean;
+    noTitle?: boolean;
+    sideTitle?: ReactNode;
+    wReturn?: string;
+    noPagination?: boolean;
+    summary?: Summary;
+    children?: ReactNode;
+    arch?: {
+        trigger: string;
+        elements: string;
+    };
+    secondElements?: Array<{
+        title: string;
+        content: (data: any) => string | number;
+        custom?: boolean;
+        style?: React.CSSProperties;
+    }>;
+    triggerActions?: ActionItem[];
+    actions?: ActionItem[];
+    hasAttach?: boolean;
+    globalCode?: string;
+    reloadAttachment?: () => void;
+    hasImportExcel?: boolean;
+    api_import?: string;
+    hasExportExcel?: boolean;
+    hasComHis?: boolean;
+    lead?: any;
+    update_func?: () => void;
+    hasExport?: boolean;
+    save?: () => void;
+    view?: boolean;
+    view_actions?: ViewAction[];
+    height?: string;
+}
+
+export interface FooterSummaryProps {
+    colonnes: string[];
+    rows: SummaryRow[];
+    param: any[];
+}
+
+export interface DropdownActionsMenuProps {
+    actions?: ActionItem[];
+    row: any;
+    setLineSelected: (line: string) => void;
+    center: any;
+}
+
+export interface TableCollapseSimpleProps {
+    dataFilters: any[];
+    arch: {
+        trigger: string;
+        elements: string;
+    };
+    loading: boolean;
+    loading2?: boolean;
+    actions?: ActionItem[];
+    secondElements?: Array<{
+        title: string;
+        content: (data: any) => string | number;
+        custom?: boolean;
+        style?: React.CSSProperties;
+    }>;
+    triggerActions?: ActionItem[];
+    maxText: number;
+    data: any[];
+    headers: FDrawerHeader[];
+    totalHeaders?: FDrawerHeader[];
+    totalMainHeaders?: FDrawerHeader[];
+    filters: Record<string, any>;
+    setFilters: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    setComment: React.Dispatch<React.SetStateAction<any>>;
+    setSecondInfoComment: React.Dispatch<React.SetStateAction<string>>;
+    setShowModalComment: React.Dispatch<React.SetStateAction<boolean>>;
+    showContent: Record<string, boolean>;
+    setShowContent: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    lineSelected: string;
+    setLineSelected: React.Dispatch<React.SetStateAction<string>>;
+    isSorting: string | undefined;
+    setIsSorting: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+export interface FTableProps extends Omit<FDrawerProps, 'type'> {
+    setSelected?: (items: any[]) => void;
+}
+
+export interface DynamicTableProps {
+    side_of_icon?: 'gauche' | 'droite';
+    arr?: Array<{
+        label: string;
+        name: string;
+        type: string;
+        list?: Array<{
+            id: string | number;
+            value: string;
+            label: string;
+        }>;
+    }>;
+    row?: any[];
+    new_row?: any;
+}

package/src/components/common/Inputs.tsx

@@ -0,0 +1,409 @@
+import React, { useRef, useState, useEffect, ChangeEvent, KeyboardEvent } from 'react';
+import { Link } from 'react-router-dom';
+
+
+
+
+
+// Types
+export interface InputFieldProps {
+    type?: string;
+    inline?: boolean;
+    label?: string;
+    title?: string;
+    formError?: string;
+    name: string;
+    value: string | number;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    validationRules?: Record<string, any>;
+    onBlur?: (value: string | number) => void;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    className?: string;
+}
+
+
+
+type InputProps = {
+  label?: string;
+  name: string;
+  type?: string;
+  value: string | number;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+};
+
+export const InputField: React.FC<InputProps> = ({
+  label,
+  name,
+  type = "text",
+  value,
+  placeholder,
+  required = false,
+  disabled = false,
+  error,
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      {label && (
+        <label htmlFor={name} className="block text-gray-700 text-sm font-medium mb-2">
+                
+          {label} {required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+
+      <input
+        id={name}
+        name={name}
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={onBlur}
+        className={`w-full px-3 py-2 border border-[#D9D9D9]  focus:ring-2 focus:ring-[#6A8A82]/20
+          ${error ? "border-red-500" : "border-gray-300"}
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : ""}
+        `}
+      />
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+    </div>
+  );
+};
+
+
+
+// On reprend InputProps, mais on force `type="text"`
+type TextInputProps = Omit<InputProps, "type">;
+
+export const TextInput: React.FC<TextInputProps> = (props) => {
+  return <InputField {...props} type="text" />;
+};
+
+export const NumberInput:React.FC<TextInputProps> = (props) => {
+    return <InputField type="number" {...props} />;
+};
+
+export const DateInput: React.FC<TextInputProps> = (props) => {
+    return <InputField type="date" {...props} />;
+};
+
+
+
+
+type Option = {
+  label: string;
+  value: string | number;
+};
+
+type SelectInputProps = {
+  label?: string;
+  name: string;
+  value: string | number;
+  options: Option[];
+  defaultValue?: string | number;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+};
+
+export const SelectInput: React.FC<SelectInputProps> = ({
+  label,
+  name,
+  value,
+  options,
+  defaultValue = "",
+  required = false,
+  disabled = false,
+  error,
+  className = "",
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <div className={`${className} flex flex-col gap-1 w-full`}>
+      {label && (
+        <label
+          htmlFor={name}
+          className="block text-gray-700 text-sm font-medium mb-2"
+        >
+          {label} {required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+
+      <select
+        id={name}
+        name={name}
+        value={value ?? ""}
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={onBlur}
+        className={`w-full px-4 py-2 border rounded-lg text-sm
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : ""}
+        `}
+      >
+        {defaultValue !== undefined && (
+          <option value="">{typeof defaultValue === "string" ? defaultValue : "Sélectionnez une option"}</option>
+        )}
+        {options.map(({ label, value: optionValue }) => (
+          <option key={optionValue} value={optionValue}>
+            {label}
+          </option>
+        ))}
+      </select>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+    </div>
+  );
+};
+
+
+
+
+type FileInputProps = {
+  label?: string;
+  name: string;
+  file?: string | File; // peut être un chemin string ou un objet File
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+// ⚡ Adresse de base pour accéder aux fichiers
+const addressIpformMedia = "http://localhost:8000/media/"; 
+
+export const FileInput: React.FC<FileInputProps> = ({
+  label,
+  name,
+  file,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  error,
+  onChange,
+}) => {
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      {label && (
+        <label
+          htmlFor={name}
+          className="block text-gray-700 text-sm font-medium mb-2"
+        >
+          {label} {required && <span className="text-red-500">*</span>}
+          {file && typeof file === "string" && (
+            <div>
+              <Link
+                to={addressIpformMedia + file}
+                target="_blank"
+                className="ml-2 text-blue-600 underline text-sm"
+              >
+                {file.split("/").pop()}
+              </Link>
+            </div>
+          )}
+        </label>
+      )}
+
+      <input
+        id={name}
+        type="file"
+        name={name}
+        onChange={onChange}
+        readOnly={readOnly}
+        disabled={disabled}
+        required={required}
+        className={`w-full px-4 py-2 border rounded-lg text-sm
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : ""}
+        `}
+      />
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+    </div>
+  );
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export const ImageInput = (props) => {
+    const default_blur = () => { }
+
+    const fileInputRef = useRef(null);
+    const [selectedFilesV1, setSelectedFilesV1] = props.file;
+    const [file_url, setFileUrl] = useState(props.file_url ?? null);
+
+
+    const handleFileChange = (e, setfoo) => {
+        const newFiles = e.target.files;
+        setSelectedFilesV1(newFiles[0])
+    };
+    return (
+        <div className={`visu-div radius-05 col-md flex-col flex-center m-1 ${selectedFilesV1 !== null ? "bg-gray-bold" : "bg-gray-light-very"}`} style={{ height: props.height ?? 'inherit', maxHeight: props.height ?? 'inherit' }}>
+            {selectedFilesV1 !== null ? (
+                <label className='col flex-col flex-center w-100' role='button' >
+                    <div className="over-hidden visu-filled">
+                        <img src={URL.createObjectURL(selectedFilesV1)} alt='photo' className='mb-1' onClick={() => fileInputRef.current.click()} />
+                        <FaMinusCircle role='button' onClick={() => setSelectedFilesV1(null)} className='icon rem-1' />
+                    </div>
+                </label>
+            ) : ((file_url !== null) ? (
+                <label className='col flex-col flex-center w-100' role='button' >
+                    <div className="over-hidden visu-filled flex-center">
+                        <img src={file_url} alt='photo' className='mb-1' onClick={() => fileInputRef.current.click()} />
+                        <FaMinusCircle role='button' onClick={() => setFileUrl(null)} className='icon rem-1' />
+                    </div>
+                </label>
+            ) : (
+                <>
+                    <label className='col flex-col w-100' role='button' onClick={() => fileInputRef.current.click()}>
+                        <div className="col text-15rem flex-col flex-center">
+                            <MdOutlineAddAPhoto className='mb-3 icon rem-25' />
+                            Drop image here
+                        </div>
+                    </label>
+
+                </>
+            ))}
+            <input
+                type="file"
+                name=""
+                className='d-none'
+                ref={fileInputRef}
+                onChange={(e) => handleFileChange(e, setSelectedFilesV1)}
+            />
+        </div>
+    )
+}
+
+
+

package/src/components/common/Modals.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface ModalProps {
+    title: string;
+    description?: string;
+    width?: string;
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ title, description, width, open, onClose, children }) => {
+    if (!open) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className={`bg-white  rounded-lg py-4 px-6 mx-4 w-[${width ? width : '60%'}]`}>
+                <div className="flex  justify-between items-start mb-6">
+                    <div>
+                        <h3 className="text-xl font-semibold text-tuatara flex items-center space-x-2">
+                            <span>{title}</span>
+                        </h3>
+                        {description && (
+                            <p className="text-sm text-gray-600 mt-1">{description}</p>
+                        )}
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="text-gray-400 hover:text-gray-600 text-xl"
+                        aria-label="Close modal"
+                    >
+                        ✕
+                    </button>
+                </div>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default Modal;

package/src/components/demo/ToastDemo.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useToast } from '../../hooks/useToast';
+
+const ToastDemo: React.FC = () => {
+  const { success, error, warning, info } = useToast();
+
+  const showSuccess = () => {
+    success('Opération réussie ! Tout s\'est bien passé.');
+  };
+
+  const showError = () => {
+    error('Une erreur est survenue ! Veuillez réessayer.');
+  };
+
+  const showWarning = () => {
+    warning('Attention ! Cette action nécessite votre confirmation.');
+  };
+
+  const showInfo = () => {
+    info('Information : Nouvelle mise à jour disponible.');
+  };
+
+  const showCustomToast = () => {
+    success('Toast personnalisé avec durée de 10 secondes', 10000);
+  };
+
+  return (
+    <div className="p-8 max-w-md mx-auto bg-white rounded-lg shadow-lg">
+      <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">
+        Démonstration Toast
+      </h2>
+      
+      <div className="space-y-4">
+        <button
+          onClick={showSuccess}
+          className="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition-colors"
+        >
+          Toast Succès
+        </button>
+        
+        <button
+          onClick={showError}
+          className="w-full bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-600 transition-colors"
+        >
+          Toast Erreur
+        </button>
+        
+        <button
+          onClick={showWarning}
+          className="w-full bg-yellow-500 text-white py-2 px-4 rounded-lg hover:bg-yellow-600 transition-colors"
+        >
+          Toast Avertissement
+        </button>
+        
+        <button
+          onClick={showInfo}
+          className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors"
+        >
+          Toast Information
+        </button>
+        
+        <button
+          onClick={showCustomToast}
+          className="w-full bg-purple-500 text-white py-2 px-4 rounded-lg hover:bg-purple-600 transition-colors"
+        >
+          Toast Personnalisé (10s)
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ToastDemo;