@imj_media/tareas 0.0.7

package/src/hooks/useAllUsers.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query"
+import { useApis } from "../context/useApis.context"
+import { getAllUSersResponse } from "../../core/actions/get_all_users.action"
+
+const useAllUsers = () => {
+    const {tasks_api} = useApis();
+    const users = useQuery({
+        queryKey: ["users"],
+        queryFn: ()=>getAllUSersResponse({tasks_api}),
+        staleTime: 1000 * 60 * 60 * 24,
+    })
+    
+    return {
+        users
+    }
+}
+
+export default useAllUsers

package/src/hooks/useCheckTask.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+
+const useCheckTask = ({id}: {id: number}) => {
+    const [checked, setChecked] = useState(false);
+
+    //TODO: Implementar la funcionalidad de completar tarea
+    const checkTask = ()=> {
+        setChecked(!checked) 
+        console.log("completar tarea", id)
+    }
+    
+    return { checked, checkTask }
+}
+
+export default useCheckTask

package/src/hooks/useComerciales.ts

@@ -0,0 +1,58 @@
+import { useFiltersLayoutContext } from '../context/filtersLayout.context'
+import { useApis } from '../context/useApis.context'
+import { useUser } from '../context/userLog.context'
+import { SalesmanUsersMapper } from '../../infraestructure/mappers/salesmans-obp'
+const useSalesmanUsers = () => {
+    const {tasks_api} = useApis()
+    const {filters} = useFiltersLayoutContext()
+    const {user} = useUser()
+    
+    const getSalesmans = async () => {
+        const response = await tasks_api.get("/api/obtener-comerciales")
+        return response.data.map(SalesmanUsersMapper.toSalesmanUsers)
+    }
+
+    const getProjects = async () => {
+        const response = await  tasks_api.get("/api/listado_tareas",{
+            params: {
+                ...filters,
+                owner:{
+                    user: user.id,
+                    config: filters?.owner?.config ?? "yo_y_mis_equipos"
+                },
+                justProjects: true,
+            }
+        })
+        return response.data.map(SalesmanUsersMapper.toSalesmanUsers)
+    }
+
+    const getSalesmanAndProjects = async () => {
+        const [salesmanUsers, projects] = await Promise.all([
+            tasks_api.get("/api/obtener-comerciales"),
+            tasks_api.get("/api/listado_tareas",{
+                params: {
+                    ...filters,
+                    owner:{
+                        user: user.id,
+                        config: filters?.owner?.config ?? "yo_y_mis_equipos"
+                    },
+                    justProjects: true,
+                }
+            }),
+        ])
+
+        return {
+            salesmanUsers: salesmanUsers.data.map(SalesmanUsersMapper.toSalesmanUsers),
+            projects: projects.data.map(SalesmanUsersMapper.toSalesmanUsers),
+        }
+    }
+
+    return {
+        //methods
+        getSalesmanAndProjects,
+        getProjects,
+        getSalesmans,
+    }
+}
+
+export default useSalesmanUsers

package/src/hooks/useDoneTasks.ts

@@ -0,0 +1,90 @@
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { getTasksResponse } from '../../core/actions/get_tasks_response.action'
+import { getPaginationEstructure } from '../utils/tanstack.functions'
+import { useEffect, useState } from 'react'
+import { useApis } from '../context/useApis.context'
+import { useUser } from '../context/userLog.context'
+import { useFiltersLayoutContext } from '../context/filtersLayout.context'
+
+const useDoneTasks = () => {
+
+    const queryClient = useQueryClient();
+
+    //* Contexts
+    const {user} = useUser()
+    const {tasks_api}= useApis()
+    const {filters} = useFiltersLayoutContext() as any;
+    
+    //* States
+    const [total, setTotal] = useState(0)
+    const [filtersToSend, setFiltersToSend] = useState({
+        owner:{
+            user: user.id,
+            config: filters?.owner?.config ?? "yo_y_mis_equipos"
+        },
+        status: "completadas",
+    });
+
+    //* this is the query to get the done tasks in infinite query
+    const doneTasks = useInfiniteQuery({
+        initialPageParam: 1,
+        queryKey: ["done_tasks", filtersToSend],
+        queryFn: ({pageParam})=> getTasksResponse({
+            filters: {
+                ...filtersToSend,
+                status: "completadas",
+                ...getPaginationEstructure(pageParam)
+            }, 
+            tasks_api,
+            page: pageParam,
+        }),
+        staleTime: 1000 * 60 * 60 * 24, // mantains the data for 24 hours
+        getNextPageParam:(_lastPage, pages)=> {
+            return pages.length + 1
+        },
+    })
+    
+    //* this set the filters to send to the query
+    useEffect(()=>{
+        if(Object.keys(filters).length > 0){
+            setFiltersToSend({
+                ...filters,
+                owner:{
+                    user: user.id,
+                    config: filters?.owner?.config ?? "yo_y_mis_equipos"
+                },
+                status: "completadas",
+            })
+        }
+    },[filters])
+
+    //* this invalidate the query when the filtersToSend changes
+    useEffect(() => {
+        queryClient.invalidateQueries({
+            queryKey: ["done_tasks", filtersToSend]
+        });
+    }, [filtersToSend]);
+
+    //* this is the query to get the count of the done tasks
+    useEffect(()=>{
+        const getCount = async () => {
+            const response = await tasks_api.get("/api/listado_tareas",{ params: {
+                ...filtersToSend,
+                status: "completadas",
+                ...getPaginationEstructure(1),
+                justCount: true,
+                tasks_api
+            } })
+            setTotal(response.data.total)
+        }
+        getCount()
+    },[doneTasks?.data, filtersToSend])
+
+    return { 
+        // Properties
+        doneTasks, 
+        total 
+    }
+}
+
+export default useDoneTasks

package/src/hooks/useElementPosition.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+
+const useElementPosition = () => {
+    const [position, setPosition] = useState<{x:number,y:number}|null>(null);
+
+    const getChildrenSize = (e:React.MutableRefObject<HTMLElement>)=>{
+        return e.current?.getBoundingClientRect()
+    }
+
+    const setElementPosition = (e:React.MutableRefObject<HTMLElement>)=>{
+        let ElementPosition = e.current?.getBoundingClientRect();
+        let xPosition = ElementPosition?.x  + ((ElementPosition?.width ?? 0));
+        let yPosition = ElementPosition?.y + ElementPosition?.height;
+
+        if(!position) setPosition({x: xPosition ?? 0,y:yPosition ?? 0})
+        else setPosition(null);
+    }
+
+    const clearPosition = ()=>{
+        setPosition(null)
+    }
+
+    return {
+        //Properties
+        position, 
+
+        //Methods
+        setElementPosition,
+        getChildrenSize,
+        clearPosition
+    }
+}
+
+export default useElementPosition

package/src/hooks/useFunctionsTasks.ts

@@ -0,0 +1,57 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useApis } from "../context/useApis.context";
+
+const useFunctionsTasks = () => {
+    const {tasks_api} = useApis();
+    const queryClient = useQueryClient();
+    interface IUpdateTask {
+        id:number;
+        user:number;
+        data: TData;
+    }
+    
+    interface TData {
+        [key:string]: string | number | null | boolean | Date | undefined
+    }
+    
+    const updateElement = async ({newData, id}:{newData:TData, id:number})=>{
+        const response = await tasks_api.put(`/api/tareas/${id}`,{
+            data: newData
+        })
+        return response.data
+    }
+    
+    const mutation = useMutation({
+        mutationFn: ({ newData, id }: { newData: TData; id: number }) =>
+            updateElement({ newData, id }),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['toDoTasks'] });
+            queryClient.invalidateQueries({ queryKey: ['inProgressTasks'] });
+            queryClient.invalidateQueries({ queryKey: ['doneTasks'] });
+            console.log('Task updated successfully!');
+        },
+        onError: (error) => {
+            console.error('Failed to update the task.', error);
+        },
+    });
+    
+    const updateTask = async ({id,data, user}:IUpdateTask)=>{
+        let newData: TData = {
+            updated_at: new Date().toISOString(),
+            updated_by: user,
+            ...data
+        }
+    
+        try{
+            await mutation.mutateAsync({newData, id})
+        } catch (error) {
+            console.error("Error updating the element:", error)
+        }
+    }
+    return { 
+        //* Methods
+        updateTask 
+    }
+}
+
+export default useFunctionsTasks

package/src/hooks/useNormalizedData.ts

@@ -0,0 +1,36 @@
+export const normalizeData = (data: any): any => {
+	const isObject = (data: any) => Object.prototype.toString.call(data) === '[object Object]';
+
+	const flatten = (data: any) => {
+		if (!data.attributes) return data;
+
+		return {
+			id: data.id,
+			...data.attributes,
+		};
+	};
+
+	if (Array.isArray(data)) {
+		return data.map((item) => normalizeData(item));
+	}
+
+	if (isObject(data)) {
+		if (Array.isArray(data.data)) {
+			data = [...data.data];
+		} else if (isObject(data.data)) {
+			data = flatten({ ...data.data });
+		} else if (data.data === null) {
+			data = null;
+		} else {
+			data = flatten(data);
+		}
+
+		for (const key in data) {
+			data[key] = normalizeData(data[key]);
+		}
+
+		return data;
+	}
+
+	return data;
+};

package/src/hooks/useTeams.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query'
+import { useApis } from '../context/useApis.context'
+import { normalizeData } from './useNormalizedData';
+import { TeamsMapper } from '../../infraestructure/mappers/teams';
+const useTeams = () => {
+    const {tasks_api} = useApis();
+
+    const teams = useQuery({
+        queryKey: ["teams","all"],
+        queryFn: async ()=>{
+            const response = await tasks_api.get("/api/equipos");
+            return normalizeData(response.data).map(TeamsMapper.toDomain)
+        }
+    })
+
+    return {teams}
+}
+
+export default useTeams

package/src/hooks/useToDoTasks.ts

@@ -0,0 +1,89 @@
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { getTasksResponse } from '../../core/actions/get_tasks_response.action'
+import { getPaginationEstructure } from '../utils/tanstack.functions'
+import { useEffect, useState } from 'react'
+import { useApis } from '../context/useApis.context'
+import { useUser } from '../context/userLog.context'
+import { useFiltersLayoutContext } from '../context/filtersLayout.context'
+
+const useToDoTasks = () => {
+    const queryClient = useQueryClient();
+    const { tasks_api } = useApis();
+    const { user } = useUser();
+    const {filters} = useFiltersLayoutContext() as any;
+    const [ total, setTotal ] = useState(0)
+    const [filtersToSend, setFiltersToSend] = useState({
+        owner:{
+            user: user.id,
+            config: filters?.owner?.config ?? "yo_y_mis_equipos"
+        },
+        status: "por_hacer",
+    });
+
+    //* this is the query to get the to do tasks in infinite query
+    const toDoTasks = useInfiniteQuery({
+        initialPageParam: 1,
+        queryKey: ["to_do_tasks", filtersToSend],
+        queryFn: ({pageParam})=> getTasksResponse({
+            filters: {
+                ...filtersToSend,
+                status: "por_hacer",
+                ...getPaginationEstructure(pageParam)
+            }, 
+            tasks_api,
+            page: pageParam,
+        }),
+        staleTime: 1000 * 60 * 60 * 24, // mantains the data for 24 hours
+        getNextPageParam:(_lastPage, pages)=> {
+            return pages.length + 1
+        },
+    })
+
+    //* this set the filters to send to the query
+    useEffect(()=>{
+        if(Object.keys(filters).length > 0){
+            setFiltersToSend({
+                ...filters,
+                owner:{
+                    user: user.id,
+                    config: filters?.owner?.config ?? "yo_y_mis_equipos"
+                },
+                status: "por_hacer",
+            })
+        }
+    },[filters])
+
+   //* this invalidate the query when the filtersToSend changes
+    useEffect(() => {
+        queryClient.invalidateQueries({
+            queryKey: ["to_do_tasks", filtersToSend]
+        });
+    }, [filtersToSend]);
+
+    //* this is the query to get the count of the to do tasks
+    useEffect(()=>{
+        const getCount = async () => {
+            const response = await tasks_api.get("/api/listado_tareas",{ params: {
+                ...filtersToSend,
+                status: "por_hacer",
+                ...getPaginationEstructure(1),
+                tasks_api,
+                justCount: true,
+            } })
+            setTotal(response.data.total)
+        }
+        getCount()
+    },[filtersToSend, toDoTasks?.data])
+
+
+
+
+
+    return { 
+        //Properties
+        toDoTasks,
+        total
+    }
+}
+
+export default useToDoTasks

package/src/hooks/useWorkingTasks.ts

@@ -0,0 +1,85 @@
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { getTasksResponse } from '../../core/actions/get_tasks_response.action'
+import { getPaginationEstructure } from '../utils/tanstack.functions'
+import { useEffect, useState } from 'react'
+import { useApis } from '../context/useApis.context'
+import { useUser } from '../context/userLog.context'
+import { useFiltersLayoutContext } from '../context/filtersLayout.context'
+
+const useWorkingTasks = () => {
+    const queryClient = useQueryClient();
+    const {tasks_api}= useApis()
+    const {user} = useUser()
+    const {filters} = useFiltersLayoutContext() as any;
+    const [total, setTotal] = useState(0)
+    const [filtersToSend, setFiltersToSend] = useState({
+        owner:{
+            user: user.id,
+            config: filters?.owner?.config ?? "yo_y_mis_equipos"
+        },
+        status: "trabajando",
+    });
+
+    //* this is the query to get the working tasks in infinite query
+    const workingTasks = useInfiniteQuery({
+        initialPageParam: 1,
+        queryKey: ["working_tasks", filtersToSend],
+        queryFn: ({pageParam})=> getTasksResponse({
+            filters: {
+                ...filtersToSend,
+                status: "trabajando",
+                ...getPaginationEstructure(pageParam)
+            }, 
+            tasks_api,
+            page: pageParam,
+        }),
+        staleTime: 1000 * 60 * 60 * 24, // mantains the data for 24 hours
+        getNextPageParam:(_lastPage, pages)=> {
+            return pages.length + 1
+        },
+    })
+
+    //* this set the filters to send to the query
+    useEffect(()=>{
+        if(Object.keys(filters).length > 0){
+            setFiltersToSend({
+                ...filters,
+                owner:{
+                    user: user.id,
+                    config: filters?.owner?.config ?? "yo_y_mis_equipos"
+                },
+                status: "trabajando",
+            })
+        }
+    },[filters])
+
+    //* this invalidate the query when the filtersToSend changes
+    useEffect(() => {
+        queryClient.invalidateQueries({
+            queryKey: ["working_tasks", filtersToSend]
+        });
+    }, [filtersToSend]);
+    
+    //* this is the query to get the count of the working tasks
+    useEffect(()=>{
+        const getCount = async () => {
+            const response = await tasks_api.get("/api/listado_tareas",{ params: {
+                ...filtersToSend,
+                status: "trabajando",
+                ...getPaginationEstructure(1),
+                tasks_api,
+                justCount: true,
+            } })
+            setTotal(response.data.total)
+        }
+        getCount()
+    },[filtersToSend, workingTasks?.data])
+
+    return { 
+        //Properties
+        workingTasks, 
+        total 
+    }
+}
+
+export default useWorkingTasks

package/src/index.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+	--imj-bg: #efefef;
+	--imj-bg-content: #fafafa;
+	--imj-bg-card: #fafafa;
+}
+
+[theme='dark'] {
+	--imj-bg: #252525;
+	--imj-bg-content: #313131;
+	--imj-bg-card: #3d3d3d;
+}
+
+@layer components {
+	/* * Texts difining styles */
+	.title-text {
+		@apply text-base font-medium text-gray-700 text-ellipsis line-clamp-[1];
+	}
+	.subtitle-text {
+		@apply text-xs font-medium text-ellipsis line-clamp-[1] text-gray-500;
+	}
+	.content-text {
+		@apply text-xs font-medium text-ellipsis line-clamp-[1] text-gray-400;
+	}
+
+	/* * Backgrounds difining styles */
+	.bg-containers {
+		background: #f5f5f5 !important;
+	}
+	.bg-cards {
+		background: #fafafa !important;
+	}
+	.bg-active {
+		background: #e1ebf9 !important;
+	}
+
+	/* * Borders difining styles */
+	.border-active {
+		border: 1px solid #28408f !important;
+	}
+	.border-cards {
+		border: 1px solid #e9e9e9 !important;
+	}
+	.border-containers {
+		border-top: 3px solid #929292 !important;
+	}
+
+	.btn-primary {
+		background: #3658c1 !important;
+		@apply text-white hover:shadow-[inset_0_0_0_2px_#28408F];
+	}
+}

package/src/index.ts

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

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './components/';

package/src/pages/App.tsx

@@ -0,0 +1,42 @@
+import '@imj_media/imj-ui/styles.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Layout from '../components/templates/Layout';
+import { UserLogProvider } from '../context/userLog.context';
+import NoUser from './NoUser';
+import NoAccessToken from './NoAccessToken';
+import { UseApisProvider } from '../context/useApis.context';
+
+interface AppTasksProps {
+	path: 'kanban-general' | 'kanban-campania' | 'lista-campanias';
+	user: User;
+	env: Env;
+}
+
+interface User {
+	id: number;
+	accessToken: string;
+}
+
+type Env = 'dev' | 'prod';
+
+const AppTasks = ({ path, user, env }: AppTasksProps) => {
+	const queryClient = new QueryClient();
+
+	if (!user) return <NoUser />;
+	if (!user.accessToken) return <NoAccessToken />;
+
+	let configsContexts = { user, env };
+	return (
+		<UserLogProvider {...configsContexts}>
+			<UseApisProvider {...configsContexts}>
+				<div className="w-full h-full min-h-[100%] relative">
+					<QueryClientProvider client={queryClient}>
+						<Layout path={path} />
+					</QueryClientProvider>
+				</div>
+			</UseApisProvider>
+		</UserLogProvider>
+	);
+};
+
+export default AppTasks;

package/src/pages/NoAccessToken.tsx

@@ -0,0 +1,20 @@
+
+const NoAccessToken = () => {
+  return (
+    <div className="w-full h-full min-h-[100%] relative">
+        <div className="flex justify-center items-center h-full">
+            <div className="text-2xl font-bold flex flex-col items-center">
+                <div className="w-10 h-10 bg-primary-regular rounded-full animate-pulse"/>
+                <p className="text-l text-texts-enfasis">
+                    No encontramos tu acceso
+                </p>
+                <p className="text-sm text-texts-placeholder">
+                    por favor, contacta al administrador
+                </p>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default NoAccessToken

package/src/pages/NoUser.tsx

@@ -0,0 +1,20 @@
+
+const NoUser = () => {
+  return (
+    <div className="w-full h-full min-h-[100%] relative">
+        <div className="flex justify-center items-center h-full">
+            <div className="text-2xl font-bold flex flex-col items-center">
+                <div className="w-10 h-10 bg-primary-regular rounded-full animate-pulse"/>
+                <p className="text-l text-texts-enfasis">
+                    un momento...
+                </p>
+                <p className="text-sm text-texts-placeholder">
+                    estamos buscando tu usuario
+                </p>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default NoUser