@imj_media/tareas 0.0.7

package/src/components/tasks/PriorityButton.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import ReactDOM from "react-dom";
+import { Icons } from "@imj_media/tasks-modules"
+import { COLORS } from "../../constants/colors";
+import useFunctionsTasks from "../../hooks/useFunctionsTasks";
+interface IPriorityButtonProps {
+    priority:number;
+    id:number;
+}
+const PriorityButton = ({priority, id}:IPriorityButtonProps) => {
+    const { updateTask } = useFunctionsTasks()
+    const buttonId = Math.random().toString(36);
+    const [position,setPosition] = useState<{x:number,y:number}|null>(null)
+
+    const getColor = (priority:number)=>{
+        const priorityColors = {
+            0:COLORS.primary.regular,
+            1:COLORS.success.regular,
+            2:COLORS.warning.regular,
+            3:COLORS.danger.regular
+        }[priority]
+
+        return priorityColors
+    }
+
+    const OptionsPortal = ()=>{
+        if(!position) return null;
+
+        const OptionButton = ({priority,text}:{priority:number,text:string})=>{
+            return (
+                <button onClick={()=>{ 
+                    updateTask({id, data: {prioridad:priority}, user: 272})
+                    setPosition(null)
+                }} className="flex gap-m items-center px-l py-s hover:bg-primary-light">
+                    <Icons icon="flag" size="xs" strokeWidth={3} color={getColor(priority)}/>
+                    <p className="text-sm" style={{color:getColor(priority)}}>{text}</p>
+                </button>
+            )
+        }
+
+        return ReactDOM.createPortal(
+            <div onBlur={()=>{ setPosition(null) }} id={`${buttonId}-options`} style={{top: `${position.y + 5}px`, left: `${position.x + 5}px`}} className={`absolute h-fit p-m flex flex-col gap-2 bg-bg-card rounded-xl shadow-lg
+                w-max`}>
+                <OptionButton priority={0} text="Baja"/>
+                <OptionButton priority={1} text="Normal"/>
+                <OptionButton priority={2} text="Media"/>
+                <OptionButton priority={3} text="Alta"/>
+            </div>,
+            document.body
+        )
+    }
+
+    return (    
+        <div className="relative h-[22px]">
+            <label 
+                onBlur={()=>{ setPosition(null) }}
+                htmlFor={buttonId} 
+                className="flex items-center gap-2 cursor-pointer active:opacity-50"
+            >
+                <Icons icon="flag" size="xs" strokeWidth={3} color={getColor(priority)}/>
+            </label>
+
+            {/* Button to open the options */}
+            <button 
+                id={buttonId} 
+                onClick={(e)=>{ 
+                    if(!position) setPosition({x:e.clientX,y:e.clientY})
+                    else setPosition(null);
+                }} 
+                className="hidden" 
+            />
+
+            {/* Portal options */}
+            <OptionsPortal/>
+        </div>
+    )
+}
+
+export default PriorityButton

package/src/components/templates/Layout.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from "react";
+//* components
+import Tabs from "../molecules/Tabs"
+import FilterButton from "../layout/FilterButton";
+import FilterContent from "../layout/FilterContent";
+import IndexComponents from "../layout/IndexComponents";
+//* functions
+import { debounce } from "../../utils/inputs.functions";
+//* context
+import { FiltersLayoutProvider } from "../../context/filtersLayout.context";
+//* types
+import { TPaths, TTab } from "../../types/layout.types";
+
+const Layout = ({path}: { path: TPaths }) => {
+    const ComponentLayout = ()=>{
+        const [activeTab, setActiveTab] = useState<TTab>("kanban");
+        //TODO: add the filter by text
+        const [_filterByText, setFilterByText] = useState<string>("");
+        const filterRefs = useRef<HTMLDivElement>(null);
+    
+        //* set the active tab to kanban
+        useEffect( () => { setActiveTab("kanban") }, [ path ] )
+        
+        //* get the title of the page
+        const getTitle = (path: TPaths) => {
+            return {
+                "kanban-general": "Kanban General",
+                "lista-campanias": "Campanias",
+                "kanban-campania": "Kanban de Campania"
+            }[path];
+        }
+    
+        //* get the menus with tabs
+        const menusWithTabs = [ "lista-campanias", "kanban-campania" ];
+    
+        //* get the tabs of the menu
+        const tabs: {[key:string]: TTab[]} = {
+            "lista-campanias": ["lista", "gantt"],
+            "kanban-campania": ["kanban", "lista", "gantt"]
+        }
+
+        return (
+            <div className="bg-bg-card p-m rounded-lg border border-border-card flex flex-col gap-m w-full h-full min-h-[100%] relative overflow-hidden">
+                <div className="w-full justify-between flex items-end border-b border-border-card pb-m px-l flex-wrap gap-l">
+                    <div className="flex gap-xl">
+                        <div> <h2 className="text-texts font-medium">{getTitle(path as any)}</h2> </div>
+                        {menusWithTabs.includes(path) && 
+                            <Tabs
+                                tabs={tabs[path]}
+                                renderItem={(e: TTab) => { setActiveTab(e) }}
+                            />
+                        }
+                    </div>
+                    <div className="flex items-center gap-s">
+                        <input 
+                            onChange={debounce((e:React.ChangeEvent<HTMLInputElement>)=>setFilterByText(e?.target?.value), 1000)} 
+                            type="text" 
+                            placeholder="Buscar" 
+                            className="w-[200px] h-[30px] border-none bg-bg-card shadow-input border border-border-card rounded-lg px-l " 
+                        />
+                        <FilterButton filterChildren={filterRefs as React.MutableRefObject<HTMLDivElement>}>
+                            <div ref={filterRefs} className="w-max max-w-[400px] h-fit bg-bg-card shadow-lg rounded-lg p-l">
+                                <FilterContent />
+                            </div>
+                        </FilterButton>
+                    </div>
+                </div>
+                <div className="overflow-auto"> 
+                    <IndexComponents path={path} tab={activeTab}/>
+                </div>
+            </div>
+        )
+    }
+
+
+    //* return the component with the layout filters context
+    return (
+        <FiltersLayoutProvider>
+            <ComponentLayout />
+        </FiltersLayoutProvider>
+    )
+}
+
+export default Layout;

package/src/components/templates/TableList/components/TableList.scss

@@ -0,0 +1,270 @@
+//* Primary
+$primary_light: #E7E9F2;
+$primary_dark: #334990;
+$primary_medium: #DAE2EC;
+$primary_regular: #4464C3;
+
+//* ProgressBar
+$orange_regular: #DC8921;
+$blue_regular: #3658C1;
+$green_regular: #039B59;
+
+//* Silver
+$silver_white: #FAFAFA;
+$silver_light: #F5F5F5;
+$silver_dark: #E9E9E9;
+$silver_regular: #EFEFEF;
+
+//* Gray
+$gray_light: #D9D9D9;
+$gray_regular: #D1D1D1;
+$gray_dark: #C4C4C4;
+
+//* Black
+$black_light: #929292;
+$black_medium: #4F4F4F;
+$black_dark: #131313;
+$black_regular: #252525;
+
+$blue_medium: #E1EBF9;
+
+
+.table-container {
+    width: 100%;
+    margin: 0 auto;
+    padding: 1rem;
+    cursor: pointer;
+    border-radius: 2%;
+    background-color: $silver_white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  
+    table {
+      width: 100%;
+      border-spacing: 0;
+      border: none;
+      background-color: $silver_white;
+      
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+    }
+  
+    thead {
+      background-color: $silver_white;
+      cursor: pointer;
+  
+      th {
+        padding: 16px;
+        text-align: left;
+        border-bottom: none; // Cambiado de "1px solid #e9ecef" a "none"
+        color: $gray_dark;
+        font-weight: 600;
+        font-size: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+  
+        &:hover {
+          background-color: #e9ecef;
+        }
+  
+        .sort-icon {
+          margin-left: 8px;
+          opacity: 0.5;
+  
+          &.active {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  
+    tbody {
+      tr {
+        transition: background-color 0.2s ease;
+        cursor: pointer;
+    
+        &:hover {
+          background-color: $primary_medium;
+        }
+      }
+  
+      td {
+        padding: 12px 16px;
+        text-align: left;
+        border-bottom: none; // Cambiado de "1px solid #e9ecef" a "none"
+        color: #212529;
+        font-size: 10px;
+        vertical-align: middle;
+        cursor: pointer;
+  
+        
+        .progress-container {
+          background-color: #e9ecef;
+          border-radius: 4px;
+          height: 8px;
+          overflow: hidden;
+  
+          .progress-bar {
+            height: 100%;
+            transition: width 0.3s ease;
+  
+            &.green { background-color: $green_regular; }
+            &.blue { background-color: $blue_regular; }
+            &.orange { background-color: $orange_regular; }
+          }
+        }
+  
+        .avatar-container {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+  
+          .avatar {
+            width: 28px;
+            height: 28px;
+            border-radius: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: $primary_light;
+            color: dark;
+            font-weight: 600;
+            font-size: 10px!important;
+          }
+        }
+
+        .p-dropdown-sm {
+          font-size: 12px;
+          height: auto;
+          /* Elimina estilos como "position" o "z-index" si los hay */
+      }
+      
+        .dropdown-container {
+          position: relative;
+          display: inline-block;
+          width: 100%;
+
+          .dropdown-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            padding: 6px 12px;
+            font-size: 10px;
+            background-color: transparent;
+            border: 1px solid $gray_light;
+            border-radius: 4px;
+            cursor: pointer;
+
+            &:hover {
+              background-color: $silver_light;
+            }
+          }
+
+          .dropdown-menu {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            z-index: 1000;
+            width: 100%;
+            padding: 4px 0;
+            margin-top: 4px;
+            background-color: $silver_white;
+            border: 1px solid $gray_light;
+            border-radius: 4px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+            .dropdown-item {
+              display: block;
+              width: 100%;
+              padding: 6px 12px;
+              font-size: 10px;
+              color: $black_regular;
+              text-align: left;
+              background-color: transparent;
+              border: none;
+              cursor: pointer;
+
+              &:hover {
+                background-color: $primary_light;
+              }
+            }
+          }
+        }
+      }
+    }
+  
+    .pagination {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      padding: 1rem;
+      width: 100%;
+      height: fit-content;
+      background-color: $silver_white;
+      font-size: small;
+      
+      button {
+        padding: 8px;
+        border: none;
+        background-color: $silver_white;
+        color: #495057;
+        border-radius: 50%; 
+        cursor: pointer;  
+        transition: all 0.2s ease;
+        width: auto;
+        height: auto;
+        align-items: center;
+        align-content: center;
+        text-align: center;
+        font-size: 7px;
+
+        &:disabled {
+          background-color: $silver_light;
+          color: $gray_dark;
+          cursor: not-allowed;
+        }
+
+        &:hover:not(:disabled) {
+          background-color: $blue_medium;
+          border-color: $blue_medium;
+          color: $blue_regular;
+        }
+      }
+  
+      span {
+        font-size: 10px;
+        color: #6c757d;
+      }
+    }
+  
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      accent-color: #0d6efd;
+    }
+
+    .table-row {
+      transition: background-color 0.2s ease;
+
+      .table-row:nth-child(odd) {
+        background-color: #FAFAFA;
+    }
+    
+    .table-row:nth-child(even) {
+        background-color: #F5F5F5;
+    }
+      
+      &:hover {
+        background-color: $blue_medium !important; // Blue medium
+        color: white; // Para mejor contraste
+        cursor: pointer;
+      }
+    }
+  }
+  

package/src/components/templates/TableList/components/TableList.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect, useState } from 'react';
+import { Avatar } from 'primereact/avatar';
+import './TableList.scss';
+import { Paginator } from 'primereact/paginator';
+import { normalizeData } from '../../../../hooks/useNormalizedData';
+import { Dropdown } from 'primereact/dropdown';
+import { useApis } from '../../../../context/useApis.context';
+
+const TableList = () => {
+	const [data, setData] = useState<any[]>([]);
+	const [first, setFirst] = useState(0);
+	const [rows, setRows] = useState(10); // Número inicial de filas por página
+	const [totalRecords, setTotalRecords] = useState(0);
+	const [orderBy, setOrderBy] = useState<string>('nombre'); // Estado para el orden
+	const { tasks_api } = useApis();
+
+	const fetchData = async (page: number, pageSize: number) => {
+		try {
+			const response = await tasks_api.get('/listado_campanias', {
+				params: {
+					'pagination[page]': page,
+					'pagination[pageSize]': pageSize,
+					orderBy: orderBy, // Agregar orderBy a los parámetros
+				},
+			});
+			const normalizedData = normalizeData(response.data);
+			setData(normalizedData);
+			setTotalRecords(response.data.meta.total);
+		} catch (error) {
+			console.error('Error fetching data:', error);
+		}
+	};
+
+	useEffect(() => {
+		const page = Math.floor(first / rows) + 1;
+		fetchData(page, rows);
+	}, [first, rows, orderBy]); // Se ejecutará cuando cambien first, rows o orderBy
+
+	const onPageChange = (event: { first: number; rows: number }) => {
+		setFirst(event.first);
+		setRows(event.rows);
+	};
+
+	const rowsPerPageOptions = [
+		{ label: '5', value: 5 },
+		{ label: '10', value: 10 },
+		{ label: '15', value: 15 },
+		{ label: '20', value: 20 },
+	];
+
+	const onRowsPerPageChange = (e: { value: number }) => {
+		if (e.value !== rows) {
+			setRows(e.value);
+			setFirst(0); // Reinicia la paginación para empezar desde el inicio
+		}
+	};
+
+	const handleOrderByChange = (column: string) => {
+		setOrderBy((prevOrderBy) => (prevOrderBy === column ? `${column}:desc` : column));
+	};
+
+	const getSortIcon = (column: string) => {
+		if (orderBy === column) return '↑↓'; // Ascendente
+		if (orderBy === `${column}:desc`) return '↓↑'; // Descendente
+		return '↑↓'; // Sin ordenar
+	};
+
+	return (
+		<div className={'table-container'}>
+			<table
+				className={'table'}
+				style={{
+					borderCollapse: 'collapse',
+					width: '100%',
+					borderSpacing: '0',
+				}}
+			>
+				<thead>
+					<tr>
+						<th onClick={() => handleOrderByChange('nombre')}>
+							<label style={{ color: '#C4C4C4', fontSize: '10px' }}>
+								{getSortIcon('nombre')}
+							</label>
+							Campaña
+						</th>
+						<th onClick={() => handleOrderByChange('inicia')}>
+							<label style={{ color: '#C4C4C4', fontSize: '10px' }}>
+								{getSortIcon('inicia')}
+							</label>
+							Fecha Inicio
+						</th>
+						<th onClick={() => handleOrderByChange('termina')}>
+							<label style={{ color: '#C4C4C4', fontSize: '10px' }}>
+								{getSortIcon('termina')}
+							</label>
+							Fecha Fin
+						</th>
+						<th>Status</th>
+						<th>Responsable</th>
+					</tr>
+				</thead>
+				<tbody>
+					{data?.map((item, index) => (
+						<tr key={index} className="table-row">
+							<td>{item?.campania?.nombre}</td>
+							<td>{item?.campania?.inicia}</td>
+							<td>{item?.campania?.termina}</td>
+							<td style={{ width: '20%' }}>
+								<div
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										gap: '15px',
+										padding: 'none',
+										fontSize: '12px',
+										width: 'auto',
+									}}
+								>
+									<label
+										style={{
+											width: '20px',
+											minWidth: '50px',
+											textAlign: 'right',
+											color: '#000',
+										}}
+									>
+										{item?.progreso}%
+									</label>
+									<div
+										style={{
+											position: 'relative',
+											height: '10px',
+											flex: 1,
+											backgroundColor: '#C4C4C4',
+											borderRadius: '10px',
+											overflow: 'hidden',
+										}}
+									>
+										<div
+											style={{
+												position: 'absolute',
+												top: 0,
+												left: 0,
+												height: '100%',
+												width: `${item.progreso}%`,
+												backgroundColor:
+													item.progreso === 100
+														? '#039B59'
+														: item.progreso > 50
+														? '#3658C1'
+														: item.progreso > 0
+														? '#DC8921'
+														: '#C4C4C4',
+												borderRadius: '10px',
+												transition: 'width 0.3s ease-in-out',
+											}}
+										/>
+									</div>
+								</div>
+							</td>
+							<td style={{ width: 'auto' }}>
+								<div className="avatar-container">
+									<Avatar
+										className="avatar"
+										label={item?.campania?.responsable?.nombre?.charAt(0)}
+										shape="circle"
+									/>
+									<span style={{ marginLeft: '8px', fontSize: '12px' }}>
+										{item?.campania?.responsable?.nombre}
+									</span>
+								</div>
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+			<div
+				className="pagination"
+				style={{
+					background: '#FAFAFA',
+					marginTop: '1rem',
+					display: 'flex',
+					gap: '0.5rem',
+				}}
+			>
+				<span
+					style={{
+						alignItems: 'center',
+						fontSize: '10px',
+						textAlign: 'left',
+						width: 'auto',
+						height: 'auto',
+						padding: '12px',
+						whiteSpace: 'nowrap',
+					}}
+				>
+					{rows} elementos de {totalRecords}
+				</span>
+
+				<Paginator
+					first={first}
+					rows={rows}
+					totalRecords={totalRecords}
+					rowsPerPageOptions={[5, 10, 20, 50]}
+					onPageChange={onPageChange}
+					className="pagination"
+					template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
+				/>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: '8px',
+						whiteSpace: 'nowrap',
+						padding: '0 1rem',
+					}}
+				>
+					<span style={{ fontSize: '12px' }}>Filas por página:</span>
+					<Dropdown
+						value={rows}
+						options={rowsPerPageOptions}
+						onChange={onRowsPerPageChange}
+						style={{
+							minWidth: '5rem',
+							width: 'auto',
+							height: '2rem',
+							zIndex: '999999',
+							transform: 'translateY(-100%)', // Move dropdown upwards
+						}}
+						className="p-dropdown-sm"
+						optionLabel="label"
+						optionValue="value"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};
+export default TableList;

package/src/components/templates/TableList/components/index.tsx

@@ -0,0 +1 @@
+export { default as TableList } from './TableList';