@imj_media/tareas 0.0.7

package/src/components/kanban-general/filters.ts

@@ -0,0 +1,58 @@
+export const filtersToShow = [
+    { 
+        label: "Tipo de dependencia", 
+        type: "select", 
+        id: "dependency",
+        options: [{
+                id:"con",
+                name: "Con dependencia"
+            },{
+                id:"sin",
+                name: "Sin dependencia"
+            }
+        ] 
+    },
+    { 
+        label: "Por proyecto",  
+        type: "select", 
+        id: "project.id", 
+        options: [] 
+    },
+    { 
+        label: "Por responsable", 
+        type: "select", 
+        id: "owner.config", 
+        options: [
+            {id:"yo", name:"Mis tareas"}, 
+            {id:"yo_y_mis_equipos", name:"Tareas mías y de mis equipos"}, 
+            {id:"mis_equipos", name:"Tareas de mis equipos"}
+        ] 
+    },
+    { 
+        label: "Por ejecutivo", 
+        type: "select", 
+        id: "salesman.name", 
+        options: [] 
+    },
+    { 
+        label: "Por dificultad", 
+        type: "select", 
+        id: "difficulty", 
+        options: [{
+            id:0,
+            name: "Muy facil"
+        },{
+            id:1,
+            name: "Facil"
+        },{
+            id:2,
+            name: "Media"
+        },{
+            id:3,
+            name: "Dificil"
+        },{
+            id:4,
+            name: "Muy dificil"
+        }] 
+    }
+]

package/src/components/kanban-general/index.ts

@@ -0,0 +1,3 @@
+export {default as ToDoBoard} from './ToDoBoard';
+export {default as WorkingBoard} from './WorkingBoard';
+export {default as DoneBoard} from './DoneBoard';

package/src/components/layout/FilterButton.tsx

@@ -0,0 +1,50 @@
+import { Icons } from "@imj_media/tasks-modules"
+import { COLORS } from "../../constants/colors"
+import ReactDOM from "react-dom";
+import useElementPosition from "../../hooks/useElementPosition";
+import { useEffect, useRef, useState } from "react";
+
+const FilterButton = ({children, filterChildren}:{children:React.ReactNode, filterChildren:React.MutableRefObject<HTMLDivElement>}) => {
+    const {position, setElementPosition} = useElementPosition();
+    const ref = useRef<HTMLElement>(null);
+
+    const FiltersModal = ({children}:{children:React.ReactNode})=>{
+        const [left, setLeft] = useState<number>();
+
+        useEffect(()=>{
+            if(filterChildren.current){ 
+                setLeft((position?.x ?? 0 ) - (filterChildren.current?.getBoundingClientRect()?.width ?? 0));
+            }
+        },[filterChildren?.current, position?.x])
+
+        return position && ReactDOM.createPortal(
+            <div className={`absolute w-fit h-fit ${!left ? "hidden" :"block"}`} style={{top: `${position?.y}px`, left: `${left}px`}}>
+                {children}
+            </div>,
+            document.body
+        )
+    }
+
+    return (
+        <>
+            <label 
+                ref={ref as React.LegacyRef<HTMLLabelElement>}
+                htmlFor="filter-button" 
+                className="flex cursor-pointer items-center gap-m p-s text-texts-enfasis fill-texts-enfasis bg-bg rounded-lg px-l h-[30px] shadow-button-primary hover:shadow-button-primary-hover "
+            >
+                <Icons icon="filter" size="xs" strokeWidth={5} color={COLORS.primary.regular}/>
+                Filtrar
+            </label>
+            {/* this button is used to trigger the filter modal */}
+            <button className="hidden" id="filter-button" onClick={()=>{
+                setElementPosition(ref as React.MutableRefObject<HTMLElement>)
+            }}/>
+
+            <FiltersModal>
+                {children}
+            </FiltersModal>
+        </>
+    )
+}
+
+export default FilterButton

package/src/components/layout/FilterContent.tsx

@@ -0,0 +1,70 @@
+import { useFiltersLayoutContext, IFieldFilter } from '../../context/filtersLayout.context';
+import { debounce } from '../../utils/inputs.functions';
+
+const FilterContent = () => {
+    const {
+        fields, 
+        updateFilters, 
+        cleanFilters,
+        applyFilters,
+        initialFilters
+    } = useFiltersLayoutContext();
+
+    return (
+        <div className='flex flex-col gap-l min-w-[250px]'>
+            <div className='flex justify-between items-center'>
+                <p className='text-texts text-m'>Filtros</p>
+                <button className='text-xs font-semibold flex cursor-pointer items-center gap-m p-s text-texts-enfasis fill-texts-enfasis bg-bg rounded-lg px-l h-fit shadow-button-primary hover:shadow-button-primary-hover ' onClick={cleanFilters}>Limpiar</button>
+            </div>
+            <div className='flex flex-col gap-m'>
+                {fields?.map((field: IFieldFilter, index: number) => {
+                    return (
+                        <div key={index}>
+                            <p className='text-sm'>{field.label}</p>
+                            {field?.type === "select" ? (
+                                <select 
+                                    onChange={(e)=>
+                                        updateFilters({
+                                            name: e?.target?.name,
+                                            value: e?.target?.value
+                                        })
+                                    }
+                                    value={initialFilters?.[field?.id]}
+                                    className='w-full h-[30px] shadow-input rounded-lg p-s' 
+                                    name={field.id} 
+                                    id={field.id} 
+                                >
+                                    <option key={index} value={""}>Selecciona una opción</option>
+                                    {field?.options?.map((option: {id: string | number, name: string}, index: number)=>(
+                                        <option 
+                                            key={index} 
+                                            value={option.id}
+                                        >
+                                            {option.name}
+                                        </option>
+                                    ))}
+                                </select>
+                            ): (
+                                <input 
+                                    className='w-full h-[30px] shadow-input rounded-lg p-s' 
+                                    type={field.type}
+                                    value={initialFilters?.[field?.id]}
+                                    name={field.label.toLowerCase().replace(/ /g, "_")}
+                                    onChange={debounce((e:React.ChangeEvent<HTMLInputElement>)=>updateFilters({
+                                        name: e?.target?.name,
+                                        value: e?.target?.value
+                                    }), 1000)}
+                                />
+                            )}
+                            
+                            
+                        </div>
+                    )
+                })}
+            </div>
+            <button className='btn-primary rounded-md py-s' onClick={applyFilters}>Filtrar</button>
+    </div>
+  )
+}
+
+export default FilterContent

package/src/components/layout/IndexComponents.tsx

@@ -0,0 +1,32 @@
+import { InfoCampaniaProvider } from "../../context/kanbanCampania.context";
+import { IComponents, IIndexComponents, IViews } from "../../types/layout.types";
+import KanbanCampania from "../kanban-campania/KanbanCampania";
+import KanbanGeneral from "../kanban-general/KanbanGeneral";
+import ListaCampania from "../lista-campania/ListaCampania";
+
+const IndexComponents = ({path, tab}: IIndexComponents) => {
+    const components: IComponents = {
+        "kanban-general": { "kanban": <KanbanGeneral/> },
+        "lista-campanias": {
+            "lista": <div>lista-campanias</div>,
+            "gantt": <div>gantt-campanias</div>
+        },
+        "kanban-campania": {
+            "kanban": <KanbanCampania />,
+            "lista": <ListaCampania />,
+            "gantt": <div>kanban-campania-gantt</div>
+        }
+    }
+
+    if(path === "kanban-campania"){
+        return (
+            <InfoCampaniaProvider project={1839}>
+                { (components[path] as IViews)[tab as keyof IViews] as React.ReactNode}
+            </InfoCampaniaProvider>
+        )
+    }
+    
+    return  (components[path] as IViews)[tab as keyof IViews] as React.ReactNode
+}
+
+export default IndexComponents

package/src/components/lista-campania/ChildTask.tsx

@@ -0,0 +1,22 @@
+import { ITasksCampaign } from "../../../infraestructure/interfaces/tasks-campania"
+
+interface ChildTaskProps extends ITasksCampaign {
+
+}
+
+const ChildTask = ({
+    id,
+    task,
+    priority,
+    startDate,
+    endDate,
+    status
+}: ChildTaskProps) => {
+  return (
+    <div className="ml-[30px] mb-3 border-b border-gray-200 pb-3">
+      {task}
+    </div>
+  )
+}
+
+export default ChildTask

package/src/components/lista-campania/Date.tsx

@@ -0,0 +1,30 @@
+import { Icons } from "@imj_media/tasks-modules"
+import { formatDate } from "../../utils/formats"
+import { COLORS } from "../../constants/colors"
+
+interface DateViewProps {
+    startDate: Date,
+    endDate: Date
+}
+
+const DateView = ({
+    startDate,
+    endDate
+}: DateViewProps) => {
+
+    return (
+        <>
+            <div className="gap-s bg-gray-100 rounded-md h-[30px] w-fit flex justify-center items-center px-xxxl">
+                <Icons icon="calendar" size="xs" strokeWidth={4} color={COLORS.texts.subtext}/>
+                <p className="text-sm"> {formatDate(startDate)}</p>
+            </div>
+            <Icons icon="arrow_right" size="xs" strokeWidth={4} color={COLORS.texts.DEFAULT}/>
+            <div className="gap-s bg-gray-100 rounded-md h-[30px] w-fit flex justify-center items-center px-xxxl">
+                <Icons icon="calendar" size="xs" strokeWidth={4} color={COLORS.texts.subtext}/>
+                <p className="text-sm"> {formatDate(endDate)}</p>
+            </div> 
+        </>
+    )
+}
+
+export default DateView

package/src/components/lista-campania/ListaCampania.tsx

@@ -0,0 +1,21 @@
+import { useInfoCampania } from "../../context/kanbanCampania.context";
+import ParentTask from "./ParentTask";
+
+const ListaCampania = () => {
+    const {tasksProject} = useInfoCampania();
+    let parentTasks = [...tasksProject?.data?.filter((task: any) => task.tasks.length > 0)];
+    
+    return (
+        <div className="flex flex-col gap-m">
+            {parentTasks.map((task: any) => {
+                return (
+                    <div className="flex flex-col gap-m border-b border-gray-200 pb-m">
+                        <ParentTask id={task.id} />
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
+export default ListaCampania

package/src/components/lista-campania/ParentTask.tsx

@@ -0,0 +1,57 @@
+import { Icons, Tooltip } from "@imj_media/tasks-modules";
+import { COLORS } from "../../constants/colors";
+import PriorityButton from "../tasks/PriorityButton";
+import { useInfoCampania } from "../../context/kanbanCampania.context";
+import DateView from "./Date";
+import ChildTask from "./ChildTask";
+
+const ParentTask = ({ id }: { id: number }) => {
+    const { tasksProject } = useInfoCampania();
+    const task = tasksProject?.data?.find((task: any) => task.id === id);
+
+    return (
+        <div className="flex flex-col gap-m ">
+            <div className="flex items-center gap-m flex-wrap hover:bg-gray-100">
+                <button className="-rotate-90">
+                    <Icons icon="angle_down_outline" color={COLORS.texts.subtext}/>
+                </button>
+                <div className="flex items-center justify-center min-w-[20px] min-h-[20px] w-fit h-[20px] mx-1 bg-primary-medium rounded-full">
+                    <p className="text-sm text-primary">
+                        {task?.tasks?.length === 0 ? 1 : task?.tasks?.length}
+                    </p>
+                </div>
+                <Tooltip 
+                    dispatch={
+                        <p className="text-sm text-texts-subtext max-w-[400px] truncate">{task?.task}</p>
+                    }
+                >
+                    <p className="text-sm text-texts-subtext p-2 max-w-[400px]">{task?.task}</p>
+                </Tooltip>
+                <div className="gap-s bg-gray-100 rounded-md h-[30px] w-[30px] flex justify-center items-center">
+                    <Icons icon="align_center" size="xs" strokeWidth={4} color={COLORS.texts.subtext}/>
+                </div>
+                <div className="gap-s bg-success-medium border border-success-pastel rounded-md h-[30px] w-[30px] flex justify-center items-center">
+                    <PriorityButton id={id} priority={task?.priority}/>
+                </div>
+                <div className="gap-s bg-danger-light border border-danger-regular rounded-md h-[30px] w-[30px] flex justify-center items-center">
+                    <Icons icon="at" size="xs" strokeWidth={4} color={COLORS.danger.regular}/>
+                </div>
+                <DateView startDate={task?.startDate} endDate={task?.endDate}/>
+                <div className="gap-s bg-gray-100 rounded-md h-[30px] flex justify-center items-center w-[30px]">
+                    <Icons icon="trash" size="xs" strokeWidth={5} color={COLORS.texts.subtext}/>
+                </div>
+            </div>
+            <div className="ml-[30px]">
+                {task?.tasks?.length > 0 ? (
+                    task?.tasks?.map((childTask: any) => (
+                        <ParentTask id={childTask?.id} />
+                    ))
+                ) : (
+                    <ChildTask {...task}/>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default ParentTask

package/src/components/molecules/AllComments.tsx

@@ -0,0 +1,78 @@
+import { CommentsProps } from '../../types';
+import Comment from '../atoms/Comment';
+import { getInitials, URL_API } from '../../utils/utils';
+import { useForm } from 'react-hook-form';
+import { useApis } from '../../context/useApis.context';
+import { useState, useEffect } from 'react';
+
+// @ts-ignore
+import { Avatar, AvatarFallback, AvatarImage, Input } from '@imj_media/imj-ui';
+
+export default function AllComments({ currentUser, data, taskId, onNewComment }: CommentsProps) {
+	const { tasks_api } = useApis();
+	const { register, handleSubmit, reset } = useForm();
+	const [comments, setComments] = useState<any[]>([]);
+
+	useEffect(() => {
+		if (data?.comentarios) {
+			const sortedComments = [...data.comentarios].sort(
+				(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+			);
+			setComments(sortedComments);
+		}
+	}, [data]);
+
+	const onSubmit = async (comment: any) => {
+		try {
+			const newComment = {
+				autor: {
+					id: currentUser?.id,
+					email: currentUser?.email,
+					nombre: currentUser?.nombre,
+					imagen: currentUser?.imagen,
+				},
+				comentario: comment.comment,
+				createdAt: new Date().toISOString(),
+			};
+
+			await tasks_api.post(`/api/comentarios`, {
+				data: {
+					autor: currentUser?.id,
+					comentario: comment.comment,
+					tarea: taskId,
+				},
+			});
+
+			onNewComment(true);
+			setComments((prevComments) => [newComment, ...prevComments]);
+			reset();
+		} catch (error) {
+			console.error('Error al agregar comentario:', error);
+		}
+	};
+
+	return (
+		<div className="flex flex-col h-full gap-4">
+			<form onSubmit={handleSubmit(onSubmit)} className="flex flex-row items-center gap-3">
+				<Avatar className="w-8 h-8">
+					<AvatarImage
+						src={`${URL_API}${currentUser?.imagen.formats.thumbnail?.url}`}
+						alt="@shadcn"
+					/>
+					<AvatarFallback className="border border-x-primary-pastel">
+						{getInitials(currentUser?.nombre)}
+					</AvatarFallback>
+				</Avatar>
+				<Input
+					{...register('comment', { required: true })}
+					autoComplete="off"
+					placeholder="Escribe un comentario"
+					className="w-full bg-white border border-neutral-200"
+				/>
+			</form>
+			{comments.map((comment, index) => (
+				<Comment key={index} comment={comment} />
+			))}
+		</div>
+	);
+}

package/src/components/molecules/ButtonAssignUsers.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from 'react';
+import Avatar from '../atoms/Avatar';
+import { Icons, Tooltip } from '@imj_media/tasks-modules';
+import TooltipUser from '../atoms/TooltipUser';
+import { IUsers } from '../../../infraestructure/interfaces/users';
+import useElementPosition from '../../hooks/useElementPosition';
+import ReactDOM from 'react-dom';
+import InputSearch from '../atoms/InputSearch';
+import useTeams from '../../hooks/useTeams';
+import { ITeam } from '../../../infraestructure/interfaces/teams';
+import useAllUsers from '../../hooks/useAllUsers';
+import { AddOBPUrl } from '../../utils/formats';
+
+const ButtonAssignUsers = ({
+	users,
+	onClick,
+}: {
+	users: IUsers[] | [];
+	onClick: (option: any) => void;
+}) => {
+	let buttonId = `button-assign-users-${Math.random().toString(36).substring(2, 15)}`;
+	const { setElementPosition, position, clearPosition } = useElementPosition();
+	const ref = useRef<HTMLParagraphElement>(null);
+
+	/**
+	 * Get avatar more than three
+	 * @returns a div with the number of users more than three
+	 */
+	const getAvatarMoreThanThree = () => {
+		//TODO: Implement the logic to show the users in the hover
+		return (
+			users.length > 3 && (
+				<Tooltip
+					dispatch={
+						<div className="w-[28px] h-[28px] rounded-full btn-primary flex items-center justify-center border-2 border-white ml-[-8px]">
+							<p className="text-xs font-bold text-white ">{`+${
+								users.length - 3
+							}`}</p>
+						</div>
+					}
+				>
+					<div className="bg-containers w-fit h-fit p-2 rounded-lg border-containers">
+						{users?.slice(3).map((user, index) => (
+							<div key={index} className="flex items-center gap-2 ">
+								<Avatar key={index} imageUrl={user.image ?? ''} alt={user.name} />
+								<p className="text-xs font-bold content-text">{user.name}</p>
+							</div>
+						))}
+					</div>
+				</Tooltip>
+			)
+		);
+	};
+
+	/**
+	 * Map users
+	 * @returns a div with the users
+	 */
+	const mapUsers = () =>
+		users?.length > 0 &&
+		users.slice(0, 3).map((user, index) => (
+			<div className={`${index === 0 ? '' : 'ml-[-8px]'}`}>
+				<TooltipUser
+					trigger={<Avatar key={index} imageUrl={user.image} alt={user.name} />}
+					user={user}
+					showUser={!position?.x ? true : false}
+				/>
+			</div>
+		));
+
+	/**
+	 * Label to active the button
+	 * @returns a label with the children
+	 */
+	const LabelToActiveTheButton = ({ children }: { children: React.ReactNode }) => (
+		<label ref={ref as any} htmlFor={buttonId} className="cursor-pointer flex items-center">
+			{children}
+		</label>
+	);
+
+	/**
+	 * If the users length is 0, return a label with the icon
+	 */
+	if (users.length === 0) {
+		return (
+			<LabelToActiveTheButton>
+				<Icons icon="user" size="xs" strokeWidth={3} />
+			</LabelToActiveTheButton>
+		);
+	}
+
+	const UsersModal = () => {
+		const [left, setLeft] = useState<number>();
+		const [selected, setSelected] = useState<'responsible' | 'team'>('team');
+		const { teams } = useTeams();
+		const { users: allUsers } = useAllUsers();
+
+		useEffect(() => {
+			if (ref.current) {
+				setLeft((position?.x ?? 0) - (ref.current?.getBoundingClientRect()?.width ?? 0));
+			}
+		}, [ref?.current, position?.x]);
+
+		const Tabs = () => {
+			const tabs = [
+				{ id: 'team', label: 'Equipo' },
+				{ id: 'responsible', label: 'Responsable' },
+			];
+			return (
+				<div className="w-full flex justify-center gap-l text-texts-placeholder font-bold">
+					{tabs.map((tab, index) => (
+						<button
+							className={`w-full text-sm border-texts-placeholder text-center ${
+								selected === tab.id ? 'text-primary-pastel' : ''
+							} ${index === tabs.length - 1 ? 'border-r-0' : ' border-r-2'}`}
+							onClick={() => setSelected(tab.id as 'responsible' | 'team')}
+						>
+							{tab.label}
+						</button>
+					))}
+				</div>
+			);
+		};
+
+		return (
+			position?.x &&
+			ReactDOM.createPortal(
+				<div
+					className={`absolute w-[300px] h-fit ${!left ? 'hidden' : 'block'}`}
+					style={{ top: `${position?.y}px`, left: `${left}px` }}
+				>
+					<div className="flex flex-col gap-m bg-bg-card border-cards rounded-lg p-2 max-h-[200px] overflow-y-hidden">
+						<Tabs />
+						<InputSearch
+							options={
+								selected === 'team'
+									? teams.data.map((team: ITeam) => ({
+											id: team.id,
+											name: team.name,
+											image: '',
+									  }))
+									: allUsers.data?.map(AddOBPUrl)
+							}
+							onselect={(option: any) => {
+								clearPosition();
+								if (onClick) onClick(option);
+							}}
+						/>
+					</div>
+				</div>,
+				document.body
+			)
+		);
+	};
+	return (
+		<>
+			<LabelToActiveTheButton>
+				{mapUsers()}
+				{getAvatarMoreThanThree()}
+			</LabelToActiveTheButton>
+
+			{/* Hidden button to active the modal */}
+			<button
+				className="hidden"
+				id={buttonId}
+				onClick={() => setElementPosition(ref as React.MutableRefObject<HTMLElement>)}
+			/>
+
+			{/* {getModalOfUsers()} */}
+			<UsersModal />
+		</>
+	);
+};
+
+export default ButtonAssignUsers;

package/src/components/molecules/DependentTasks.tsx

@@ -0,0 +1,64 @@
+import { format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { Avatar } from '../atoms';
+// @ts-ignore
+import { Label } from '@imj_media/imj-ui';
+
+export default function DependentTasks({ data }: any) {
+	const statusMap: any = {
+		0: {
+			color: 'bg-gray-400',
+			label: 'Sin estado',
+		},
+		1: {
+			color: 'bg-primary-regular',
+			label: 'En curso',
+		},
+		2: {
+			color: 'bg-success-regular',
+			label: 'Finalizada',
+		},
+		3: {
+			color: 'bg-success-regular',
+			label: 'Finalizada',
+		},
+	};
+
+	const dateFormated = (date: any) => {
+		if (!date) return '';
+		return format(new Date(date), 'd MMM', { locale: es });
+	};
+	return (
+		<div>
+			<div className="flex flex-row items-center gap-4">
+				<Label className="text-lg font-medium text-neutral-900">Tareas dependientes</Label>
+				<span className="text-sm font-normal text-neutral-600 bg-[#E1EBF9] w-6 h-6 rounded-full flex items-center justify-center text-primary">
+					{data?.length}
+				</span>
+			</div>
+			<div className="flex flex-col gap-2 border border-neutral-200 rounded-lg mt-3">
+				{data?.map((task: any) => (
+					<div
+						key={task.id}
+						className="flex flex-row w-full items-center justify-between gap-s border-b border-neutral-200 py-1 px-2"
+					>
+						<div className="flex items-center gap-2">
+							<Avatar imageUrl={task.responsable?.image?.formats?.thumbnail?.url} />
+							<p className="text-sm font-normal w-[400px] text-nowrap text-ellipsis overflow-hidden">
+								{task?.texto_corto}
+							</p>
+						</div>
+						<div className="flex items-center gap-1">
+							<p className="text-sm font-normal">{dateFormated(task?.createdAt)}</p>
+							<div
+								className={`w-4 h-4 bg-gray-400 block rounded-full ${
+									statusMap[task?.estatus as any]?.color ?? 'bg-gray-400'
+								}`}
+							/>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}