@imj_media/tareas 0.0.7

package/infraestructure/interfaces/users-obp-response.ts

@@ -0,0 +1,52 @@
+
+export interface IAllUsersOBPResponse {
+    id:       number;
+    nombre:   string;
+    username: string;
+    email:    string;
+    blocked:  boolean;
+    siglas:   null | string;
+    role:     Role;
+    imagen:   Imagen | null;
+}
+
+export interface Imagen {
+    id:      number;
+    name:    string;
+    formats: Formats;
+}
+
+export interface Formats {
+    large?:    Large;
+    small:     Large;
+    medium?:   Large;
+    thumbnail: Large;
+}
+
+export interface Large {
+    ext:    EXT;
+    url:    string;
+    hash:   string;
+    mime:   MIME;
+    name:   string;
+    path:   null;
+    size:   number;
+    width:  number;
+    height: number;
+}
+
+export enum EXT {
+    JPEG = ".jpeg",
+    Jpg = ".jpg",
+    PNG = ".png",
+}
+
+export enum MIME {
+    ImageJPEG = "image/jpeg",
+    ImagePNG = "image/png",
+}
+
+export interface Role {
+    id:   number;
+    name: string;
+}

package/infraestructure/interfaces/users.ts

@@ -0,0 +1,5 @@
+export interface IUsers {
+    id: number;
+    name: string;
+    image?: string;
+}

package/infraestructure/mappers/all-users-obp.ts

@@ -0,0 +1,12 @@
+import { IAllUsersOBPResponse } from "../interfaces/users-obp-response";
+import { IUsers } from "../interfaces/users";
+
+export class AllUsersOBPMapper{
+    static toUsers(user:IAllUsersOBPResponse):IUsers{
+        return {
+            id: user.id,
+            name: user.nombre,
+            image: user.imagen?.formats?.thumbnail?.url
+        }
+    }
+}

package/infraestructure/mappers/campaign-tasks.ts

@@ -0,0 +1,35 @@
+import { ITasksCampaignResponse } from "../interfaces/tasks-campania-response";
+import { ITasksCampaign } from "../interfaces/tasks-campania";
+import { IUsers } from "../interfaces/users";
+
+export class CampaignTasksMapper {
+    static toCampaignTasks(task: ITasksCampaignResponse): ITasksCampaign {
+        let users: IUsers[] =[];
+        if(task?.responsable) users.push({id: task.responsable.id, name: task.responsable.nombre, image: task.responsable?.userOBP?.imagen?.formats?.thumbnail?.url});
+
+        console.log("task", task)
+        //TODO: add map of userTeams
+        if(task?.equipo?.miembros) task.equipo.miembros.forEach(miembro => {
+            if(users?.find(user => user.id === miembro.idUser.id)) return;
+            if(miembro.idUser) users.push({id: miembro.idUser.id, name: miembro.idUser.nombre, image: miembro?.userOBP?.imagen?.formats?.thumbnail?.url});
+        });
+        return {
+            id: task?.id ?? null,
+            task: task?.texto_corto ?? null,
+            status: task?.estatus ?? null,
+            difficulty: task?.nivel_dificultad ?? null,
+            priority: task?.prioridad ?? 0,
+            endDate: new Date(task?.ffin ?? null),
+            startDate: new Date(task?.finicio ?? null),
+            mediumName: task?.nombre_medio?.nombre ?? null,
+            users: users,
+            repeatsToDo: task?.repeticiones ?? null,
+            repeats: task?.repeticiones_realizadas ?? null,
+            comments: task?.comentarios?.length ?? null,
+            willBePaused: task?.es_pausable,
+            statusRequiredTask: task?.id_t_requerida?.estatus ?? null,
+            nameRequiredTask: task?.id_t_requerida?.texto_corto ?? null,
+            tasks: task?.tareas?.map(childTask => ({id: childTask.id, name: childTask.texto_corto, status: childTask.estatus}))  ?? null,
+        }
+    }
+}

package/infraestructure/mappers/kanban-tasks.ts

@@ -0,0 +1,35 @@
+import { TasksKanbanGeneral } from "../interfaces/tasks-kanban-general";
+import { ITasksResponse } from "../interfaces/tasks-reponse";
+import { IUsers } from "../interfaces/users";
+
+
+export class KanbanTasksMapper {
+    static toKanbanTasks(task: ITasksResponse): TasksKanbanGeneral {
+        let users: IUsers[] =[];
+        
+        if(task?.responsable) users.push({id: task.responsable.id, name: task.responsable.nombre, image: task.responsable?.userOBP?.imagen?.formats?.thumbnail?.url});
+
+        //TODO: add map of userTeams
+        if(task?.equipo?.miembros) task.equipo.miembros.forEach(miembro => {
+            if(users?.find(user => user.id === miembro.idUser.id)) return;
+            if(miembro.idUser) users.push({id: miembro.idUser.id, name: miembro.idUser.nombre, image: miembro?.userOBP?.imagen?.formats?.thumbnail?.url});
+        });
+        
+        return {
+            comments:0,
+            nameProject: task?.proyecto?.nombre,
+            idProject: task?.proyecto?.id,
+            willBePaused: task.es_pausable,
+            difficulty: task.nivel_dificultad,
+            endDate: new Date(task.ffin),
+            id: task.id,
+            priority: task.prioridad ?? 0,
+            status: task.estatus,
+            task: task.texto_corto,
+            users: users,
+            responsible: task?.responsable?.id ?? null,
+            statusRequiredTask: task.id_t_requerida?.estatus ?? null,
+            nameRequiredTask: task.id_t_requerida?.texto_corto ?? null,
+        }
+    }
+}

package/infraestructure/mappers/salesmans-obp.ts

@@ -0,0 +1,11 @@
+import { ISalesmanUsers } from "../interfaces/salesmans-obp";
+import { SalesmansOBPResponse } from "../interfaces/salesmans-obp-response";
+
+export class SalesmanUsersMapper {
+    static toSalesmanUsers(salesman: SalesmansOBPResponse): ISalesmanUsers {
+        return {
+            id: salesman.id,
+            name: salesman.nombre,
+        }
+    }
+}

package/infraestructure/mappers/teams.ts

@@ -0,0 +1,12 @@
+import { ITeam } from "../interfaces/teams";
+import { ITeamsResponse } from "../interfaces/teams-response";
+
+export class TeamsMapper {
+    static toDomain(data: ITeamsResponse): ITeam {
+        return {
+            id: data.id,
+            name: data.nombre,
+            color: data.color
+        }
+    }
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+	"name": "@imj_media/tareas",
+	"private": false,
+	"version": "0.0.7",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build-old": "rollup -c",
+		"build": "tsc && vite build",
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "build-storybook"
+	},
+	"dependencies": {
+		"@imj_media/imj-ui": "^1.0.18",
+		"@imj_media/tasks-modules": "^2.0.0",
+		"@tailwindcss/line-clamp": "^0.4.4",
+		"@tanstack/react-query": "^5.62.3",
+		"axios": "^1.7.9",
+		"date-fns": "^4.1.0",
+		"qs": "^6.13.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-hook-form": "^7.54.1"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^3.2.2",
+		"@eslint/js": "^9.15.0",
+		"@storybook/addon-essentials": "^8.4.6",
+		"@storybook/addon-interactions": "^8.4.6",
+		"@storybook/addon-onboarding": "^8.4.6",
+		"@storybook/addon-styling-webpack": "^1.0.1",
+		"@storybook/blocks": "^8.4.6",
+		"@storybook/react": "^8.4.6",
+		"@storybook/react-vite": "^8.4.6",
+		"@storybook/test": "^8.4.6",
+		"@types/node": "^22.10.1",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
+		"@vitejs/plugin-react": "^4.3.4",
+		"@vitejs/plugin-react-swc": "^3.5.0",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.15.0",
+		"eslint-plugin-react-hooks": "^5.0.0",
+		"eslint-plugin-react-refresh": "^0.4.14",
+		"eslint-plugin-storybook": "^0.11.1",
+		"globals": "^15.12.0",
+		"postcss": "^8.4.49",
+		"storybook": "^8.4.6",
+		"tailwindcss": "^3.4.16",
+		"typescript": "~5.6.2",
+		"typescript-eslint": "^8.15.0",
+		"vite": "^6.0.1",
+		"vite-plugin-css-injected-by-js": "^3.5.2"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/@imjmedia"
+	},
+	"gitHead": "72741a44222d9aaa34fdab7511035ceb4c989c6a"
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/atoms/Avatar.tsx

@@ -0,0 +1,14 @@
+import { IAvatar } from "../../types/interfaces";
+
+const Avatar = ({imageUrl = "https://www.uv.unach.mx/assets/img/prueba/directorio/userM.png", alt = "avatar"}: IAvatar) => {
+
+    return (
+        <img 
+            src={imageUrl === "" ? "https://www.uv.unach.mx/assets/img/prueba/directorio/userM.png" : imageUrl} 
+            alt={alt ?? "avatar"} 
+            className="w-[28px] h-[28px] rounded-full bg-containers border-2 border-white"
+        />
+    )
+}
+
+export default Avatar

package/src/components/atoms/Comment.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import { Avatar, AvatarFallback, AvatarImage } from '@imj_media/imj-ui';
+import { formatDistanceToNow, parseISO } from 'date-fns';
+import { es } from 'date-fns/locale';
+
+import { CommentProps } from '../../types';
+
+const URL_IMAGES = 'https://devobp.imjmedia.com.mx';
+
+export default function Comment({ comment }: CommentProps) {
+	function formatDate(dateString: string) {
+		const date = parseISO(dateString); // Convertir la cadena en un objeto Date
+		return formatDistanceToNow(date, { locale: es, addSuffix: true });
+	}
+	return (
+		<div>
+			<div className="flex flex-row gap-2 items-start">
+				<Avatar className="w-8 h-8">
+					<AvatarImage
+						src={`${URL_IMAGES}${comment?.autor?.imagen?.formats?.thumbnail?.url}`}
+						alt="@shadcn"
+					/>
+					<AvatarFallback>CN</AvatarFallback>
+				</Avatar>
+				<p className="text-sm text-neutral-900 font-medium">{comment.autor.nombre}</p>
+				<span className="text-xs text-neutral-600 font-normal mt-[2px]">
+					{formatDate(comment.createdAt)}
+				</span>
+			</div>
+			<p className="text-sm text-neutral-600 font-normal pl-10">{comment.comentario}</p>
+		</div>
+	);
+}

package/src/components/atoms/InputSearch.tsx

@@ -0,0 +1,40 @@
+import { Icons } from "@imj_media/tasks-modules"
+import { useState } from "react"
+import Avatar from "./Avatar"
+
+const InputSearch = ({options, onselect}: {options: any[], onselect: (option: any)=>void}) => {
+    const [search, setSearch] = useState<string | null>(null)
+    const idSearch = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+    const filteredOptions = [...options].filter((option: any)=> option.name.toLowerCase().includes(search?.toLowerCase() ?? ""))
+    return (
+        <div className="h-fit w-full min-w-max">
+            <div className="relative flex items-center">
+                <input
+                    id={idSearch}
+                    value={search ?? ""}  
+                    onChange={(e)=>setSearch(e.target.value)}
+                    type="text" 
+                    className="w-full h-[32px] bg-bg-card border-cards rounded-lg p-2" 
+                    placeholder="Buscar" 
+                />
+                <div className="absolute right-[8px]">
+                    <Icons icon="search" size="xs" strokeWidth={3}/>
+                </div>
+            </div>
+
+            <div className="bg-bg-card border-cards rounded-lg p-2 flex flex-col gap-s overflow-y-auto max-h-[120px] min-w-max">
+                {filteredOptions.map((option: any)=>(
+                    <button onClick={()=>{
+                        onselect(option)
+                    }} className="flex gap-s items-center max-w-[200px] min-w-full hover:bg-primary-light cursor-pointer">
+                        <Avatar imageUrl={option.image} alt={option.name}/>
+                        <p className="text-xs font-bold content-text">{option.name}</p>
+                    </button>
+                ))}
+            </div>
+
+        </div>
+    )
+}
+
+export default InputSearch

package/src/components/atoms/SkeletonCard.tsx

@@ -0,0 +1,17 @@
+const SkeletonCard = () => {
+  return (
+    <div className='bg-gray-200 h-[150px] w-full animate-pulse rounded-md flex flex-col gap-[50px] p-4'>
+        <div className="flex h-[30px] gap-3">
+            <div className="w-[30px] min-w-[30px] h-full bg-gray-300 rounded-full"/>
+            <div className="w-full h-full bg-gray-300"/>
+            <div className="w-[30px] min-w-[30px] h-full bg-gray-300 rounded-full"/>
+        </div>
+        <div className='flex justify-between w-full h-[30px] gap-[50px]'>
+            <div className='w-full h-[30px] bg-gray-300'/>
+            <div className='w-full h-[30px] bg-gray-300'/>
+        </div>
+    </div>
+  )
+}
+
+export default SkeletonCard

package/src/components/atoms/TabButton.tsx

@@ -0,0 +1,16 @@
+
+
+interface ITabButtonProps {
+    label: string;
+    active: boolean;
+    onClick: () => void;
+}
+const TabButton = ({label, active, onClick}: ITabButtonProps) => {
+  return (
+    <button onClick={onClick} className={`${active ? "text-texts-enfasis border-b-2 border-texts-enfasis" : "text-texts-subtext"} text-xs font-semibold `}>
+        {label}
+    </button>
+  )
+}
+
+export default TabButton

package/src/components/atoms/TooltipUser.tsx

@@ -0,0 +1,26 @@
+import { Tooltip } from "@imj_media/tasks-modules"
+import { IUsers } from "../../../infraestructure/interfaces/users";
+import Avatar from "./Avatar"
+
+interface TooltipUserProps {
+    trigger: React.ReactNode;
+    user: Partial<IUsers>;
+    showUser?: boolean;
+}
+const TooltipUser = ({
+    trigger,
+    user,
+    showUser = true
+}: TooltipUserProps) => {
+
+    return (
+        <Tooltip dispatch={trigger}>
+            {showUser && <div className="flex items-center gap-2 bg-containers w-fit h-fit p-2 rounded-lg border-containers">
+                <Avatar imageUrl={user.image ?? ""} alt={user.name} />
+                <p className="text-xs font-bold content-text">{user.name}</p>
+            </div>}
+        </Tooltip>
+    )
+}
+
+export default TooltipUser

package/src/components/atoms/index.ts

@@ -0,0 +1,2 @@
+export {default as Avatar} from "./Avatar";
+export {default as Checkbox} from "../organisms/Checkbox";

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./atoms";
+export * from "./molecules";
+export * from "./organisms";

package/src/components/kanban-campania/DoneBoard.tsx

@@ -0,0 +1,12 @@
+import useDoneTasks from '../../hooks/useDoneTasks';
+import { fetchNextPage } from '../../utils/tanstack.functions';
+import { Board } from '../organisms';
+
+const DoneBoard = () => {
+    const {doneTasks, total} = useDoneTasks();
+
+    const tasks = [...(doneTasks?.data?.pages?.flat() ?? [])]
+    return <Board title='Completadas' tasks={tasks} loadNextPage={()=>fetchNextPage(doneTasks)} isFetching={doneTasks?.isFetching} total={total}/>
+}
+
+export default DoneBoard

package/src/components/kanban-campania/KanbanCampania.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useFiltersLayoutContext } from "../../context/filtersLayout.context";
+import { filtersToShow } from "./filters";
+import { useInfoCampania } from "../../context/kanbanCampania.context";
+import { Board } from "../organisms";
+
+const KanbanCampania = () => {
+    const { defineFields } = useFiltersLayoutContext();
+    const {tasksProject} = useInfoCampania();
+
+    //* fetch fields to show in the filters
+    useEffect(()=>{
+        const fetchFields = async () => {
+            let fields = [...filtersToShow];
+            defineFields(fields)
+        }
+
+        fetchFields()
+    },[])
+    
+    let tasks = tasksProject?.data?.reduce((acc: any, task: any) => {
+        acc[task.status] = acc[task.status] || []
+        acc[task.status].push(task)
+        return acc
+    }, {})
+
+    const Boards = ["Por hacer", "Trabajando", "Completadas"]
+    return (
+        <div className="flex gap-4 w-full h-full min-h-[100%] relative " >
+            {Boards.map((board, index)=>{
+                return (
+                <Board total={tasks?.[index]?.length ?? 0} title={board} tasks={tasks?.[index] ?? []} isFetching={tasksProject?.isFetching} isLoadingData={tasksProject?.isLoading} />
+                )
+            })}
+        </div>
+    )
+}
+
+export default KanbanCampania

package/src/components/kanban-campania/ToDoBoard.tsx

@@ -0,0 +1,12 @@
+import useToDoTasks from '../../hooks/useToDoTasks';
+import { fetchNextPage } from '../../utils/tanstack.functions';
+import { Board } from '../organisms';
+
+const ToDoBoard = () => {
+    const {toDoTasks, total} = useToDoTasks();
+
+    const tasks = [...(toDoTasks?.data?.pages?.flat() ?? [])]
+    return <Board total={total} title='Por hacer' tasks={tasks} loadNextPage={()=>fetchNextPage(toDoTasks)} isFetching={toDoTasks?.isFetching} isLoadingData={toDoTasks?.isLoading}/>
+}
+
+export default ToDoBoard

package/src/components/kanban-campania/WorkingBoard.tsx

@@ -0,0 +1,13 @@
+import useWorkingTasks from "../../hooks/useWorkingTasks";
+import { fetchNextPage } from "../../utils/tanstack.functions";
+import { Board } from "../organisms";
+
+const WorkingBoard = () => {
+
+    const {workingTasks, total} = useWorkingTasks();
+
+    const tasks = [...(workingTasks?.data?.pages?.flat() ?? [])]
+    return <Board total={total} title='Trabajando' tasks={tasks} loadNextPage={()=>fetchNextPage(workingTasks)} isFetching={workingTasks?.isFetching}/>
+}
+
+export default WorkingBoard

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

@@ -0,0 +1,46 @@
+export const filtersToShow = [
+    { 
+        label: "Tipo de dependencia", 
+        type: "select", 
+        id: "dependency", 
+        options: [{
+                id:"con",
+                name: "Con dependencia"
+            },{
+                id:"sin",
+                name: "Sin dependencia"
+            }
+        ] 
+    },
+    { 
+        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 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-campania/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/kanban-general/DoneBoard.tsx

@@ -0,0 +1,12 @@
+import useDoneTasks from '../../hooks/useDoneTasks';
+import { fetchNextPage } from '../../utils/tanstack.functions';
+import { Board } from '../organisms';
+
+const DoneBoard = () => {
+    const {doneTasks, total} = useDoneTasks({});
+
+    const tasks = [...(doneTasks?.data?.pages?.flat() ?? [])]
+    return <Board title='Completadas' tasks={tasks} loadNextPage={()=>fetchNextPage(doneTasks)} isFetching={doneTasks?.isFetching} total={total}/>
+}
+
+export default DoneBoard

package/src/components/kanban-general/KanbanGeneral.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+//* Components
+import { DoneBoard, ToDoBoard, WorkingBoard } from "../kanban-general";
+//* Context
+import { useFiltersLayoutContext } from "../../context/filtersLayout.context";
+//* Hooks
+import useSalesmanUsers from "../../hooks/useComerciales";
+//* Filters
+import { filtersToShow } from "./filters";
+
+const KanbanGeneral = () => {
+    const { defineFields } = useFiltersLayoutContext();
+    const {getSalesmanAndProjects} = useSalesmanUsers()
+
+    //* fetch fields to show in the filters
+    useEffect(()=>{
+        const fetchFields = async () => {
+            let fields = [...filtersToShow];
+            let {salesmanUsers, projects} = await getSalesmanAndProjects();
+
+            defineFields(fields.map(field=>{
+                if(field.id === "project.id"){ field.options = projects }
+                if(field.id === "salesman.name"){  field.options = salesmanUsers  }
+                return field
+            }))
+        }
+
+        fetchFields()
+    },[])
+    
+    return (
+        <div className="flex gap-4 w-full h-full min-h-[100%] relative " >
+            <ToDoBoard/>
+            <WorkingBoard/>
+            <DoneBoard/>
+        </div>
+    )
+}
+
+export default KanbanGeneral

package/src/components/kanban-general/ToDoBoard.tsx

@@ -0,0 +1,12 @@
+import useToDoTasks from '../../hooks/useToDoTasks';
+import { fetchNextPage } from '../../utils/tanstack.functions';
+import { Board } from '../organisms';
+
+const ToDoBoard = () => {
+    const {toDoTasks, total} = useToDoTasks();
+
+    const tasks = [...(toDoTasks?.data?.pages?.flat() ?? [])]
+    return <Board total={total} title='Por hacer' tasks={tasks} loadNextPage={()=>fetchNextPage(toDoTasks)} isFetching={toDoTasks?.isFetching} isLoadingData={toDoTasks?.isLoading}/>
+}
+
+export default ToDoBoard

package/src/components/kanban-general/WorkingBoard.tsx

@@ -0,0 +1,13 @@
+import useWorkingTasks from "../../hooks/useWorkingTasks";
+import { fetchNextPage } from "../../utils/tanstack.functions";
+import { Board } from "../organisms";
+
+const WorkingBoard = () => {
+
+    const {workingTasks, total} = useWorkingTasks({});
+
+    const tasks = [...(workingTasks?.data?.pages?.flat() ?? [])]
+    return <Board total={total} title='Trabajando' tasks={tasks} loadNextPage={()=>fetchNextPage(workingTasks)} isFetching={workingTasks?.isFetching}/>
+}
+
+export default WorkingBoard