@imj_media/tareas 0.0.7

package/src/components/molecules/Tabs.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import TabButton from "../atoms/TabButton"
+import { TTab } from "../../types/layout.types";
+
+interface ITabsProps {
+    tabs: TTab[];
+    renderItem: (index: TTab) => void;
+    initialTab?: TTab;
+}
+
+const Tabs = ({tabs, renderItem, initialTab}: ITabsProps) => {
+    const [activeTab, setActiveTab] = useState<TTab>(initialTab ?? tabs[0].toLowerCase() as TTab);
+
+    useEffect(()=>{
+        if(initialTab) { setActiveTab(initialTab) }
+    },[initialTab])
+
+    const onToggleTab = (index: TTab) => {
+        setActiveTab(index);
+        renderItem(index);
+    }
+
+    return (
+        <div className="flex">
+            {tabs.map((tab: string, index: number) => (
+                <div className={`${index === 0 ? "border-l" : ""} border-r border-texts-placeholder px-m`}>
+                    <TabButton 
+                        key={index} 
+                        onClick={() => onToggleTab(tab.toLowerCase() as TTab)} 
+                        label={tab} 
+                        active={tab.toLowerCase() === activeTab}
+                    />
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default Tabs

package/src/components/molecules/index.ts

@@ -0,0 +1 @@
+export {default as ButtonAssignUsers} from "./ButtonAssignUsers";

package/src/components/organisms/Board.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef } from "react";
+import { TasksKanbanGeneral } from "../../../infraestructure/interfaces/tasks-kanban-general";
+import { Icons } from "@imj_media/tasks-modules";
+import Task from "./Task";
+import SkeletonCard from "../atoms/SkeletonCard";
+
+
+interface IBoard {
+    title: string;
+    tasks: TasksKanbanGeneral[];
+    loadNextPage?: () => void;
+    isFetching?: boolean;
+    isLoadingData?: boolean;
+    total?: number;
+}
+
+const Board = ({
+    title,
+    tasks,
+    loadNextPage,
+    isFetching,
+    total
+}: IBoard) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    //* this ref is used to prevent the scroll from being triggered multiple times
+    const isLoading = useRef(false);
+
+    //* this useEffect is used to set the min height of the container
+    useEffect(()=>{
+        if(ref?.current && containerRef?.current){
+            containerRef.current.style.minHeight = `${ref?.current?.clientHeight - 50}px`;
+        }
+    },[ref?.current])
+
+    //* Load next page when scroll is at 95% of the container will be load more tasks
+    const onScroll = (event: any) => {
+        if (isLoading.current) return;
+        const {scrollTop, clientHeight, scrollHeight} = event?.target;
+
+        const scrollProgress = (scrollTop / (scrollHeight - clientHeight)) * 100;
+        if (scrollProgress <= 95) return;
+
+        if(scrollProgress >= 95){
+            isLoading.current = true;
+            loadNextPage && loadNextPage();
+            setTimeout(() => {
+                isLoading.current = false;
+            }, 200);
+        }
+    };
+
+    return (
+        <div ref={ref} className={`flex flex-col bg-containers w-fit max-w-[400px] min-w-[400px] h-full min-h-[100%] pb-[200px] relative p-[16px] rounded-lg overflow-hidden border-t-4 border-containers`}>
+            <div className="flex justify-between items-center">
+                <div className="flex items-center gap-[8px]">
+                    {/* //TODO: Add functionality when the release is ready to compress the board
+                        <button className="text-base" title="Estamos trabajando esto para ustedes">
+                            ↓
+                        </button> 
+                    */}
+                    <p className="text-base">{title}</p>
+                </div>
+                <div className="flex items-center gap-[8px]">
+                    {/* //TODO: Add plus button functionality when the release is ready
+                        <button className="text-base">                       
+                            <Icons icon="plus_outline"/>
+                        </button> 
+                    */}
+                    <div className="flex items-center gap-[4px]">
+                        <Icons icon="group_files"/>
+                        <p>{total ?? 0}</p>
+                    </div>
+                </div>
+            </div>
+            <div ref={containerRef} className={`flex flex-col gap-[12px] overflow-y-auto py-4`} onScroll={onScroll} >
+                {tasks?.map(task => <Task key={task.id} {...task} /> )}
+                { isFetching ? 
+                    <SkeletonCard /> 
+                    : <p className="text-center text-gray-500">No hay más tareas por mostrar...</p>
+                }
+            </div>
+        </div>
+    );
+};
+
+export default Board;

package/src/components/organisms/Checkbox.tsx

@@ -0,0 +1,45 @@
+import { Icons, Tooltip } from '@imj_media/tasks-modules';
+import useCheckTask from '../../hooks/useCheckTask';
+import { COLORS } from '../../constants/colors';
+
+interface ICheckboxProps {
+    id: number;
+    nameRequiredTask: string;
+    statusRequiredTask: number;
+    status: number;
+}
+const Checkbox = ({id, nameRequiredTask, statusRequiredTask, status}: ICheckboxProps) => {
+    const { checked, checkTask } = useCheckTask({id});
+    let checkboxId = Math.random().toString();
+
+    return (
+        <>
+            {status === 1 && (
+                statusRequiredTask < 2 &&  nameRequiredTask !== "" ?
+                    <Tooltip dispatch={
+                        <label htmlFor={checkboxId}>
+                            <Icons icon='info_circle' color={COLORS.warning.regular} strokeWidth={4}/>
+                        </label>
+                    }>
+                        <div className='px-m py-s max-w-[200px] bg-warning-light rounded-lg border-l-[5px] border-warning-regular text-warning-dark text-xs'>
+                            <p className='font-bold'>
+                                Requiere completar su tarea requerida:
+                            </p>
+                            <p> { nameRequiredTask } </p>
+                        </div>
+                    </Tooltip> :
+                    <label htmlFor={checkboxId} className={checked?'bg-success-regular rounded-full w-[20px] h-[20px] flex items-center justify-center mx-[2px] transition-all':" transition-colors"}>
+                        <Icons 
+                            icon={checked ? 'check_outline' : 'circle_checked' } 
+                            color={ checked ? "white" : COLORS.texts.placeholder } 
+                            strokeWidth={4} 
+                            size={ checked ? 'xs' : 's' }
+                        />
+                    </label>
+            )}
+            <input id={checkboxId} checked={checked} onChange={checkTask} type="checkbox" className="hidden"/>
+        </>
+    )
+}
+
+export default Checkbox

package/src/components/organisms/DetailsTask.tsx

@@ -0,0 +1,286 @@
+import { useEffect, useState } from 'react';
+import { useApis } from '../../context/useApis.context';
+import { Icons } from '@imj_media/tasks-modules';
+import { format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { DetailsTaskData, DetailsTaskProps, TabDetailsTaskItem } from '../../types';
+
+// @ts-ignore
+import {
+	Button,
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+	Avatar,
+	AvatarImage,
+	AvatarFallback,
+} from '@imj_media/imj-ui';
+
+import TabDetailsTask from './TabDetailsTask';
+import AllComments from '../molecules/AllComments';
+import { useUser } from '../../context/userLog.context';
+import { getInitials } from '../../utils/utils';
+import DependentTasks from '../molecules/DependentTasks';
+
+const URL_IMAGES = 'https://devobp.imjmedia.com.mx';
+
+export default function DetailsTask({ isOpen, setIsOpen, taskId }: DetailsTaskProps) {
+	const [data, setData] = useState<DetailsTaskData | null>(null);
+	const [addComment, setAddComment] = useState<boolean>(false);
+	const [currentUser, setCurrentUser] = useState<any | null>(null);
+
+	const { tasks_api } = useApis();
+	const { user } = useUser();
+
+	useEffect(() => {
+		if ((isOpen && taskId) || addComment) {
+			const getTaskDetails = async () => {
+				const response = await tasks_api.get(`/api/detalleTarea/${taskId}`);
+				setData(response.data);
+			};
+
+			const getActualUser = async () => {
+				const userApi = await tasks_api.get(`/api/users/${user.id}`);
+				const response = await tasks_api.post(`/api/obtenerUsuarioOBP/`, {
+					emailList: [userApi?.data?.email],
+				});
+				setCurrentUser(response?.data?.data[0]);
+			};
+
+			getTaskDetails();
+			getActualUser();
+		}
+	}, [isOpen, taskId, addComment]);
+
+	const priorityMap: any = {
+		0: {
+			label: 'Sin prioridad',
+			color: 'text-primary-regular',
+			iconColor: '#425CAC',
+		},
+		1: {
+			label: 'Baja',
+			color: 'text-success-regular',
+			iconColor: '#43B071',
+		},
+		2: {
+			label: 'Media',
+			color: 'text-warning-regular',
+			iconColor: '#D38A31',
+		},
+		3: {
+			label: 'Alta',
+			color: 'text-danger-regular',
+			iconColor: '#C34335',
+		},
+	};
+
+	const dateFormated = (date: Date | null) => {
+		if (date) {
+			return format(date, 'd MMM yyyy, h:mmaaa', {
+				locale: es,
+			});
+		}
+		return 'Fecha no disponible';
+	};
+
+	const items: TabDetailsTaskItem[] = [
+		{
+			id: 1,
+			label: 'Todo',
+			component: (
+				<AllComments
+					taskId={taskId}
+					currentUser={currentUser}
+					data={data}
+					onNewComment={setAddComment}
+				/>
+			),
+		},
+		{
+			id: 2,
+			label: 'Dependencias',
+			component: <DependentTasks data={data?.ids_t_dependientes} />,
+		},
+	];
+
+	return (
+		<>
+			<>
+				<div
+					className={`fixed inset-0 bg-transparent bg-opacity-50 flex justify-center items-center z-20 ${
+						isOpen ? 'pointer-events-auto block' : 'pointer-events-none hidden'
+					}`}
+					onClick={() => setIsOpen(false)}
+				/>
+				<section
+					className={`fixed top-0 bottom-0 bg-white bg-opacity-50 flex justify-center items-center w-[40rem] h-screen z-50 overflow-hidden transition-all ease-in-out duration-500 shadow-2xl ${
+						isOpen
+							? 'right-0 pointer-events-auto block'
+							: 'right-[-100%] pointer-events-none hidden'
+					}`}
+				>
+					<div className="flex w-full h-full flex-col overflow-y-scroll bg-white border-none shadow-xl px-4 py-6">
+						<div className="w-full flex flex-row justify-between pb-4 gap-10 border-none">
+							<h3 className="text-lg font-semibold text-neutral-900">
+								{data?.texto_corto}
+							</h3>
+							<Button
+								variant="shadow"
+								size="sm"
+								onClick={() => setIsOpen(false)}
+								className="bg-neutral-100 w-10 h-10"
+							>
+								<Icons icon="x_outline" />
+							</Button>
+						</div>
+						<div className="w-full flex flex-row justify-between">
+							<span className="text-neutral-600 text-sm">
+								{data?.campania} / {data?.nombre_medio}
+							</span>
+						</div>
+						<div className="w-full flex flex-col gap-3 mt-4">
+							<h6 className="text-neutral-900 font-semibold text-base">
+								Descripción
+							</h6>
+							<p className="text-neutral-600 font-normal text-sm">
+								{data?.texto_largo ?? 'Sin descripción'}
+							</p>
+							{/* 	<Textarea
+									className="w-full border-none px-0 min-h-[20px] max-h-[200px] font-normal placeholder:font-normal focus:outline-none focus:ring-neutral-100 resize-none"
+									placeholder="Agregar descripción"
+								/> */}
+						</div>
+						<Accordion
+							type="single"
+							collapsible
+							defaultValue="item-1"
+							className="w-full flex flex-col border border-neutral-200 rounded-xl mt-4"
+						>
+							<AccordionItem value="item-1" className="border-none">
+								<AccordionTrigger className="text-neutral-900 font-medium text-sm w-full flex flex-row border-b border-neutral-200 p-4 ">
+									Detalles
+								</AccordionTrigger>
+								<AccordionContent className="border-none">
+									<div className="w-full grid grid-cols-3 gap-4 p-4">
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Responsable
+											</span>
+											{data?.responsable?.nombre ? (
+												<div className="flex flex-row gap-2 items-center">
+													<Avatar className="w-8 h-8">
+														<AvatarImage
+															src={`${URL_IMAGES}${data?.responsable?.imagen?.formats?.thumbnail?.url}`}
+															alt="@shadcn"
+														/>
+														<AvatarFallback>
+															{getInitials(data?.responsable?.nombre)}
+														</AvatarFallback>
+													</Avatar>
+													<span className="text-xs text-neutral-600 font-normal">
+														{data?.responsable?.nombre}
+													</span>
+												</div>
+											) : (
+												<span className="text-xs text-neutral-600 font-normal">
+													Sin responsable
+												</span>
+											)}
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Equipo asignado
+											</span>
+											<div className="flex flex-row gap-2">
+												<span className="text-xs text-neutral-600 font-normal">
+													{data?.equipo?.nombre ?? 'Sin equipo'}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Prioridad
+											</span>
+											<div className="flex flex-row items-center gap-2">
+												<Icons
+													icon="flag"
+													size="xs"
+													strokeWidth={5}
+													color={
+														priorityMap[data?.prioridad as any]
+															?.iconColor
+													}
+												/>
+												<span
+													className={`text-sm text-neutral-600 font-normal ${
+														priorityMap[data?.prioridad as any]?.color
+													}`}
+												>
+													{priorityMap[data?.prioridad as any]?.label ??
+														'Sin prioridad'}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Lista
+											</span>
+											<div className="flex flex-row gap-2">
+												<span className="text-xs text-neutral-600 font-normal">
+													{data?.lista ?? 'Sin lista'}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Fecha estimada de inicio
+											</span>
+											<p className="text-xs text-neutral-600 font-normal">
+												{dateFormated(data?.f_inicio_estimada as Date)}
+											</p>
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Fecha estimada de fin
+											</span>
+											<p className="text-xs text-neutral-600 font-normal">
+												{dateFormated(data?.f_fin_estimada as Date)}
+											</p>
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Fecha de fin
+											</span>
+											<p className="text-xs text-neutral-600 font-normal">
+												{dateFormated(data?.ffin as Date)}
+											</p>
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Creado
+											</span>
+											<p className="text-xs text-neutral-600 font-normal">
+												{dateFormated(data?.createdAt as Date)}
+											</p>
+										</div>
+										<div className="flex flex-col w-auto gap-2">
+											<span className="text-sm text-neutral-900 font-medium">
+												Última modificación
+											</span>
+											<p className="text-xs text-neutral-600 font-normal">
+												{dateFormated(data?.updatedAt as Date)}
+											</p>
+										</div>
+									</div>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+						<TabDetailsTask items={items} />
+					</div>
+				</section>
+			</>
+		</>
+	);
+}

package/src/components/organisms/TabDetailsTask.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+// @ts-ignore
+import { Button } from '@imj_media/imj-ui';
+import { TabDetailsTaskProps } from '../../types';
+
+export default function TabDetailsTask({ items }: TabDetailsTaskProps) {
+	const [selectedTab, setSelectedTab] = useState(1);
+
+	return (
+		<>
+			<div className="flex flex-row mb-2 border-b border-neutral-100 bg-white mt-4">
+				{items.map((item, index) => (
+					<div
+						key={item.id}
+						className={`border-r border-neutral-100 pr-3 py-1 ${
+							index !== 0 ? 'px-3' : ''
+						}`}
+					>
+						<Button
+							key={item.id}
+							variant="ghost"
+							onClick={() => setSelectedTab(item.id)}
+							className={`text-sm font-normal rounded-none py-1 h-8 ${
+								selectedTab === item.id
+									? 'text-primary border-b border-primary'
+									: 'text-neutral-400 border-b-0'
+							}`}
+						>
+							{item.label}
+						</Button>
+					</div>
+				))}
+			</div>
+			<div className="pt-4 flex-1 overflow-y-auto bg-white">
+				{items.find((item) => item.id === selectedTab)?.component}
+			</div>
+		</>
+	);
+}

package/src/components/organisms/Task.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from 'react';
+import Checkbox from './Checkbox';
+import ButtonAssignUsers from '../molecules/ButtonAssignUsers';
+import { Icons, Tooltip } from '@imj_media/tasks-modules';
+import { TasksKanbanGeneral } from '../../../infraestructure/interfaces/tasks-kanban-general';
+import { AddOBPUrl, getMonthName } from '../../utils/formats';
+import { COLORS } from '../../constants/colors';
+import PriorityButton from '../tasks/PriorityButton';
+import useElementPosition from '../../hooks/useElementPosition';
+import ReactDOM from 'react-dom';
+import DetailsTask from './DetailsTask';
+
+const Task = ({
+	id,
+	task,
+	endDate,
+	users,
+	willBePaused,
+	nameProject,
+	idProject,
+	comments,
+	priority,
+	responsible,
+	nameRequiredTask,
+	statusRequiredTask,
+	status,
+}: TasksKanbanGeneral) => {
+	const moreActionsRef = useRef<HTMLButtonElement>(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const { setElementPosition, position } = useElementPosition();
+
+	const MoreOptionsModal = ({ children }: { children: React.ReactNode }) => {
+		const [left, setLeft] = useState<number>();
+
+		useEffect(() => {
+			if (moreActionsRef.current) {
+				setLeft(
+					(position?.x ?? 0) -
+						(moreActionsRef.current?.getBoundingClientRect()?.width ?? 0)
+				);
+			}
+		}, [moreActionsRef?.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
+			)
+		);
+	};
+
+	const HeaderTask = () => (
+		<div className="flex justify-between items-center w-full h-fit relative">
+			<div className="flex items-center gap-[8px] w-[calc(100%-32px)] ">
+				<Checkbox
+					id={id}
+					nameRequiredTask={nameRequiredTask ?? ''}
+					statusRequiredTask={statusRequiredTask ?? 0}
+					status={status}
+				/>
+				<p className="title-text" onClick={() => setIsOpen(true)}>
+					{task}
+				</p>
+			</div>
+			<button
+				ref={moreActionsRef}
+				onClick={() => {
+					setElementPosition(moreActionsRef as React.MutableRefObject<HTMLElement>);
+				}}
+				className="flex items-center justify-center text-sm font-extrabold bg-bg hover:filter-[drop-shadow(0_0_10px_#000000)] rounded-full w-[24px] h-[24px] m-block"
+			>
+				<span className="rotate-90">
+					<Icons icon="elipsis" size="xs" />
+				</span>
+			</button>
+
+			<MoreOptionsModal>
+				<button
+					className="w-max h-fit bg-bg-card rounded-lg p-l shadow-lg flex items-center gap-2 hover:bg-primary-light"
+					onClick={() => {
+						// TODO: Implement the functionality to move the task to working
+					}}
+				>
+					<p className="text-sm font-normal text-texts-placeholder font-regular">
+						Mover a trabajando
+					</p>
+					<Icons
+						icon="arrow_right"
+						size="xs"
+						strokeWidth={4}
+						color={COLORS.primary.regular}
+					/>
+				</button>
+			</MoreOptionsModal>
+		</div>
+	);
+
+	return (
+		<>
+			<div className="bg-bg-card border-cards max-w-[350px] rounded-lg relative h-fit p-[12px_12px] hover:border-active hover:bg-active cursor-pointer ">
+				<HeaderTask />
+				<div className="flex flex-col gap-[4px] py-2">
+					<p className="subtitle-text">{nameProject}</p>
+					{idProject && ( // TODO: Add nameMEDIUM
+						<p className="content-text">{idProject}</p>
+					)}
+				</div>
+				<div className="flex justify-between items-center w-full h-fit relative pt-5 pb-1">
+					<div className="flex items-center relative">
+						<ButtonAssignUsers
+							users={
+								users
+									.filter((user) => {
+										if (responsible) return user.id === responsible;
+										return true;
+									})
+									.map(AddOBPUrl) as any
+							}
+							onClick={() => {
+								// TODO: Implement the modal to assign users
+							}}
+						/>
+						{/* //!TODO: Add pausable */}
+						{willBePaused && (
+							<Tooltip
+								dispatch={
+									<button className="text-sm font-regular text-gray-400 flex items-center gap-2">
+										<Icons icon="pause" size="s" strokeWidth={2} />
+										<span>Pause</span>
+									</button>
+								}
+							>
+								<p className="text-sm font-regular text-white p-5">
+									Al pulsar el botón se solicitará razón del pausado
+								</p>
+							</Tooltip>
+						)}
+					</div>
+
+					<div className="flex items-center gap-2">
+						{/* //!TODO: add functionality to icons */}
+						<Icons icon="at" size="xs" />
+						<PriorityButton priority={priority} id={id} />
+						<Icons
+							icon="calendar"
+							size="xs"
+							strokeWidth={3}
+							color={COLORS.texts.subtext}
+						/>
+						<p className="text-sm font-regular text-texts-subtext">
+							{`${endDate.getDate()} ${getMonthName(endDate.getMonth()).slice(0, 3)}`}
+						</p>
+					</div>
+				</div>
+				{/* TODO: Add comments */}
+				{comments > 0 && (
+					<div className="border-t border-gray-200 mt-4 pt-2">
+						<button className="flex items-center gap-2">
+							<Icons icon="comment" size="xs" strokeWidth={4} />
+							<span className="text-sm font-regular text-gray-400">{comments}</span>
+						</button>
+					</div>
+				)}
+			</div>
+			<DetailsTask taskId={id} isOpen={isOpen} setIsOpen={setIsOpen} />
+		</>
+	);
+};
+
+export default Task;

package/src/components/organisms/index.ts

@@ -0,0 +1,2 @@
+export {default as Board} from "./Board";
+export {default as Task} from "./Task";