@imj_media/tareas 0.0.7

package/src/stories/AppTasks.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AppTasks from '../pages/App';
+const meta: Meta<typeof AppTasks> = {
+	title: 'AppTasks',
+	component: AppTasks,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+        path: "kanban-campania",
+        user:{
+            id: 320,
+            // This access token is for testing purposes only
+            
+            accessToken: 
+            // access Token dev
+            "35e8e0205c85c548d1a0a5a8500b459162c9b13a02db5cb1522acbde9578fe6013256f1e86e375d18ab68600790cdbe4e5e81d5a96daa0ef54f99c646acd13a62c562dd9eeff8cefd188af54b4b3950d2319d5579342e9ce25ded6a6e399adf2b6dcf8e8e1efee8d11bcbdbeb9674707952162a17693009126ac36c2e66c968c"
+
+            // access Token prod
+            // "a0c8c98cab6f7055d2c7b98e9a27f359dc027c0a3f01011cd11e3792321c9dcfff88b89c76e4e90a8dc74f52028a1c974112daa4e2bf5531489fea182bf54d310d745e0eaaeb1a1769341f851d256c6b92c74853ab308dfb67c52be7d9de94a4846be17b9b66ff37e6cf5243874718756daa86fef56b8afc31374eae35d329d7"
+        },
+        env: "dev"
+    },
+
+    name:"AppTasks",
+	render: (args) => {
+        return (
+            <div className='h-[80vh] w-[90vw] overflow-y-hidden'>
+                <AppTasks {...args} />
+            </div>
+        )},   
+};

package/src/stories/Table.stories.tsx

@@ -0,0 +1,160 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TableList from '../components/templates/TableList/components/TableList';
+
+// Definir el tipo para los datos
+type DataType = {
+	nameCampania: string;
+	FirstDate: string;
+	EndDate: string;
+	Status: number;
+	Responsable: { name: string };
+};
+
+// Define el meta con el tipo genérico
+const meta: Meta<typeof TableList<DataType>> = {
+	title: 'AppTasks/Components/Table',
+	component: TableList,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof TableList<DataType>>;
+
+export default meta;
+
+// Define el tipo Story
+type Story = StoryObj<typeof meta>;
+
+// Define la historia Default
+export const Table: Story = {
+	args: {
+		data: [
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 30,
+				Responsable: { name: 'Maria Ayala' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 100,
+				Responsable: { name: 'Juan Pérez' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 70,
+				Responsable: { name: 'Juan Camaney' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 0,
+				Responsable: { name: 'Juan Pérez' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 50,
+				Responsable: { name: 'Maria Ayala' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 85,
+				Responsable: { name: 'Juan Pérez' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 70,
+				Responsable: { name: 'Maria Ayala' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 85,
+				Responsable: { name: 'Juan Pérez' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 70,
+				Responsable: { name: 'Maria Ayala' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 85,
+				Responsable: { name: 'Juan Pérez' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 70,
+				Responsable: { name: 'Maria Ayala' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 85,
+				Responsable: { name: 'Juan Pérez' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 70,
+				Responsable: { name: 'Maria Ayala' },
+			},
+			{
+				nameCampania: 'AR-0226-TEST-TEST_TODOS_RENE-OCT-2024',
+				FirstDate: '2024-11-20T12:00:00Z',
+				EndDate: '2024-11-20T12:00:00Z',
+				Status: 85,
+				Responsable: { name: 'Juan Pérez' },
+			},
+		],
+		columns: [
+			{
+				header: 'Campaña',
+				accessor: 'nameCampania',
+				type: 'text', // Especificar el tipo de dato
+			},
+			{
+				header: 'Fecha de inicio',
+				accessor: 'FirstDate',
+				type: 'date', // Especificar que se trata de una fecha
+			},
+			{
+				header: 'Fecha de fin',
+				accessor: 'EndDate',
+				type: 'date', // Especificar que se trata de una fecha
+			},
+			{
+				header: 'Progreso',
+				accessor: 'Status',
+				type: 'progress', // Especificar que es un progreso
+			},
+			{
+				header: 'Responsable',
+				accessor: 'Responsable',
+				type: 'avatar', // Especificar que se trata de un avatar
+			},
+		],
+		showPagination: true,
+		pageSize: 9,
+	},
+};

package/src/types/index.ts

@@ -0,0 +1,107 @@
+type TeamWork = {
+	id: number;
+	nombre: string;
+	miembros: string[];
+};
+
+type TRequirement = {
+	id: number;
+	texto_corto: string;
+};
+
+type ImageType = {
+	formats: {
+		large: {
+			url: string;
+		};
+		medium: {
+			url: string;
+		};
+		small: {
+			url: string;
+		};
+		thumbnail: {
+			url: string;
+		};
+	};
+};
+
+type Responsible = {
+	id: number;
+	email: string;
+	nombre: string;
+	imagen: ImageType;
+};
+
+type CommentItem = {
+	id: number;
+	comentario: string;
+	createdAt: Date | null;
+	updatedAt: Date | null;
+	autor: {
+		id: number;
+		email: string;
+		nombre: string;
+		imagen: ImageType;
+	};
+};
+
+type CommentProps = {
+	comment: CommentItem;
+};
+
+type CommentsProps = {
+	data: any;
+	currentUser: any;
+	taskId: number;
+	onNewComment: (addCommentF: boolean) => void;
+};
+
+type DetailsTaskData = {
+	descripcion: string;
+	estado: string;
+	comentarios: [];
+	campania: string;
+	createdAt: Date | null;
+	updatedAt: Date | null;
+	equipo: TeamWork;
+	nombre_medio: string;
+	ffin: Date | null;
+	finicio: Date | null;
+	f_inicio_estimada: Date | null;
+	f_fin_estimada: Date | null;
+	fterminada: Date | null;
+	responsable: Responsible | null;
+	prioridad: string | null;
+	lista: string | null;
+	texto_corto: string | null;
+	texto_largo: string | null;
+	id_t_requerida: TRequirement;
+	ids_t_dependientes: TRequirement[];
+};
+
+type DetailsTaskProps = {
+	isOpen: boolean;
+	taskId: number;
+	setIsOpen: (isOpen: boolean) => void;
+};
+
+type TabDetailsTaskItem = {
+	id: number;
+	label: string;
+	component: React.ReactNode;
+};
+
+type TabDetailsTaskProps = {
+	items: TabDetailsTaskItem[];
+};
+
+export type {
+	DetailsTaskData,
+	DetailsTaskProps,
+	TabDetailsTaskProps,
+	TabDetailsTaskItem,
+	CommentsProps,
+	CommentItem,
+	CommentProps,
+};

package/src/types/interfaces.ts

@@ -0,0 +1,67 @@
+import { TPaths } from "./layout.types";
+
+interface IAvatar {
+    imageUrl?: string;
+    alt?: string;
+}
+
+interface IPaths {
+    path: TPaths,
+}
+
+interface IUser {
+    id: number;
+    userName: string;
+    image?: string | null;
+}
+
+interface IComment {
+    id: number;
+    comment: string;
+}
+
+interface ITask {
+    id: number;
+    texto_corto: string;
+    texto_largo?: string;
+    finicio?: string;
+    ffin?: string;
+    nivel_dificultad?: number;
+    estatus?: number;
+    orden?: number;
+    comments?: IComment[];
+}
+
+interface ICampaignTask {
+    idruta?: number;
+    idmedio?: number;
+    idindoor?: number;
+    idvalla?: number;
+    id_detallepauta?: number;
+    tipo_tarea?: number;
+    es_pausable?: boolean;
+    repeticiones_realizadas?: number;
+}
+
+interface IProject {
+    nombre: string;
+}
+
+interface IProjectTask {
+    proyecto: IProject;
+}
+
+
+export type { 
+    //* Atoms
+    IAvatar,
+
+    //* Molecules
+    IUser,
+
+    //* Organisms
+    ITask,
+    ICampaignTask,
+    IProjectTask,
+    IProject
+};

package/src/types/layout.types.ts

@@ -0,0 +1,30 @@
+type TPaths = "kanban-general" | "lista-campanias" | "kanban-campania";
+type TTab = "kanban" | "lista" | "gantt";
+
+//#region types para la generación de los componentes
+interface IIndexComponents {
+    path: TPaths,
+    tab: TTab,
+}
+interface IComponents {
+    "kanban-general"?: IViews,
+    "lista-campanias"?: IViews,
+    "kanban-campania"?: IViews,
+}
+interface IViews {
+    kanban?: React.ReactNode;
+    lista?: React.ReactNode;
+    gantt?: React.ReactNode;
+}
+//#endregion
+
+export type { 
+    //paths
+    TTab,
+    TPaths,
+
+    //components
+    IIndexComponents,
+    IComponents,
+    IViews
+}

package/src/utils/filters.functions.ts

@@ -0,0 +1,17 @@
+import { TFilters } from "../context/filtersLayout.context";
+
+export const addEstructureToFilters = (filters: TFilters)=>{
+    let newFilters:any = {};
+
+    Object.entries(filters).forEach(([key, value])=>{
+        if(key.includes(".")){
+            let [field, property] = key.split(".")
+            newFilters[field] = newFilters[field] || {}
+            newFilters[field][property] = value
+        } else {
+            newFilters[key] = value
+        }
+    })
+
+    return newFilters
+}

package/src/utils/formats.ts

@@ -0,0 +1,33 @@
+import { IUsers } from "../../infraestructure/interfaces/users"
+
+export const getMonthName = (month: number) => {
+   const monthName = new Intl.DateTimeFormat(
+    "es-MX",
+    {month: "long"}
+   ).format(month)
+   
+   return monthName
+}
+
+function getDayNameInSpanishFromDate(date: Date) {
+   const daysOfWeek = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'];
+   const dayIndex = new Date(date).getDay();
+   return daysOfWeek[dayIndex];
+}
+
+export const formatDate = (date: Date) => {
+   let day = date.getDate()
+   let month = getMonthName(date.getMonth()).slice(0, 3)
+   let year = date.getFullYear().toString().slice(-2)
+   let dayName = getDayNameInSpanishFromDate(date).slice(0, 3)
+   return `${dayName.charAt(0).toUpperCase() + dayName.slice(1)} ${day} ${month.charAt(0).toUpperCase() + month.slice(1)} ${year}`
+}
+
+
+export const AddOBPUrl = (user: IUsers) => {
+   let url = "https://devobp.imjmedia.com.mx" ?? "https://obp.imjmedia.com.mx"
+   return {
+       ...user,
+       image: user.image ? `${url}${user.image}` : ''
+   }
+}

package/src/utils/inputs.functions.ts

@@ -0,0 +1,25 @@
+//* this function is a debounce function that can be used to debounce a function and delay the execution of the function
+export function debounce(callback: (...args: any[]) => void, delay = 300, options = { leading: false, trailing: true }) {
+    let timer: NodeJS.Timeout;
+    let lastCallTime: number | null = null;
+
+    return function (...args: any[]) {
+        const now = Date.now();
+        const invokeLeading = options.leading && !lastCallTime;
+
+        clearTimeout(timer);
+
+        if (invokeLeading) {
+            callback(...args);
+        }
+
+        lastCallTime = now;
+
+        timer = setTimeout(() => {
+            if (options.trailing && (!options.leading || now - lastCallTime! >= delay)) {
+                callback(...args);
+                lastCallTime = null;
+            }
+        }, delay);
+    };
+}

package/src/utils/tanstack.functions.ts

@@ -0,0 +1,19 @@
+export const fetchNextPage = (key: any) => {
+    if (key?.hasNextPage) {
+      // Get the last page's data from key data
+      const lastPage = key?.data?.pages[key.data.pages.length - 1];
+  
+      // Check if the length of the last page is equal to the expected page size (e.g., 30)
+      if (lastPage?.length === 30) {
+        key?.fetchNextPage(); // Fetch the next page
+      }
+    }
+  };
+
+export const getPaginationEstructure = (page:number)=>({
+  pagination:{
+      page: page,
+      pageSize: 30,
+      withCount: true
+  }
+})

package/src/utils/utils.ts

@@ -0,0 +1,12 @@
+export const URL_API = 'https://devobp.imjmedia.com.mx';
+
+export function getInitials(name: string | undefined): string {
+	if (!name) return '';
+	const words = name.split(' ');
+	const firstTwoInitials = words
+		.map((word) => word[0]?.toUpperCase())
+		.slice(0, 2)
+		.join('');
+
+	return firstTwoInitials;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.js

@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+
+import { COLORS } from './src/constants/colors';
+import { GAPS } from './src/constants/gaps';
+import { PADDINGS } from './src/constants/paddings';
+import { SHADOWS } from './src/constants/shadows';
+
+export default {
+  content: [
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: ["selector", "[data-mode='dark']"],
+  theme: {
+    extend: {
+      colors: COLORS,
+      boxShadow:SHADOWS,
+      gap:GAPS,
+      padding:PADDINGS,
+
+      fontFamily: {
+        // "sans-italic": ["OpenSans-Italic-VariableFont_wdth,wght", "sans-serif"],
+        // "sans-regular": ["OpenSans-VariableFont_wdth,wght", "sans-serif"],
+      }
+    },
+  },
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+  ],
+}
+

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"incremental": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode sds */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,16 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+	build: {
+		lib: {
+			entry: resolve('src', 'index.ts'),
+			name: 'tareas',
+			formats: ['es', 'cjs'],
+			fileName: (format: string) => `tareas.${format === 'cjs' ? 'cjs' : 'es.js'}`,
+		}
+	},
+	plugins: [cssInjectedByJsPlugin() as any, react() as any],
+});