eclass · Jonathangarrido · Jun 3, 2026
diff --git a/src/atoms/Icons/MapIndicator.tsx b/src/atoms/Icons/MapIndicator.tsx
@@ -0,0 +1,15 @@
+import { Base, BaseProps } from './Base'
+
+export function MapIndicator(props: BaseProps): JSX.Element {
+  return (
+    <Base {...props} w="12px" viewBox="0 0 14 16" title="mapIndicator">
+      <path
+        fillRule="nonzero"
+        fill="currentColor"
+        d="M7 0C3.1 0 0 3.1 0 7c0 1.9.7 3.7 2.1 5 .1.1 4.1 3.7 4.2 3.8.4.3 1 .3 1.3 0 .1-.1 4.2-3.7 4.2-3.8 1.4-1.3 2.1-3.1 2.1-5 .1-3.9-3-7-6.9-7zm0 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+      />
+    </Base>
+  )
+}
+
+MapIndicator.displayName = 'MapIndicator'
diff --git a/src/atoms/Icons/index.tsx b/src/atoms/Icons/index.tsx
@@ -1,28 +1,29 @@
 export * from './AcademicRecord'
 export * from './AlertInfo'
+export * from './Alerts'
 export * from './ArrowRight'
 export * from './Calendar'
 export * from './Certificate'
 export * from './CircularCheck'
 export * from './CircularInformation'
+export * from './Close'
+export * from './DiagonalArrow'
 export * from './Download'
 export * from './GoAhead'
 export * from './GoBack'
-export * from './Multimedia'
 export * from './Loader'
+export * from './MapIndicator'
+export * from './Multimedia'
+export * from './Password'
+export * from './Pen'
+export * from './PlusSign'
 export * from './Profile'
 export * from './Remote'
 export * from './Schedule'
+export * from './TextBubble'
 export * from './Time'
-export * from './TinyAlertInfo'
 export * from './TinyAlertError'
-export * from './TinyAlertWarning'
+export * from './TinyAlertInfo'
 export * from './TinyAlertSuccess'
-export * from './Password'
-export * from './Pen'
-export * from './PlusSign'
+export * from './TinyAlertWarning'
 export * from './TrashCan'
-export * from './TextBubble'
-export * from './Alerts'
-export * from './Close'
-export * from './DiagonalArrow'
diff --git a/src/documentation/pages/Organisms/CalendarDropdown.tsx b/src/documentation/pages/Organisms/CalendarDropdown.tsx
@@ -1,6 +1,7 @@
+import { Box } from '@chakra-ui/react'
+
 import { Code, MyHeading, MyText, MyTitle } from '@/documentation/components'
 import { CalendarDropdown } from '@/organisms'
-import { Box } from '@chakra-ui/react'
 import { vars } from '@theme'
 
 export const CalendarDropdownPage = (): JSX.Element => {
@@ -206,34 +207,34 @@ const events = [
       time: '0:01 hrs.',
     },
   },
-  {
-    id: 4534,
-    student_id: 17158893,
-    course_id: 40711,
-    class_id: 1,
-    status: 'SCHEDULED',
-    start: '2025-05-29T04:01:00.000Z',
-    end: '2025-05-29T05:01:00.000Z',
-    duration_in_minutes: 60,
-    type: 'evaluation-release',
-    id_resource: 1947886,
-    associated_resource: {
-      id: 1,
-      name: 'Se habilita para responder "MCH y MCV"',
-      description: 'MCH o MCV',
-    },
-    url: null,
-    course: {
-      id: 40711,
-      name: '[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesoss',
-    },
-    translatedTitle: 'Se habilita para responder "MCH y MCV"',
-    formatedDate: {
-      day: 'jueves',
-      date: '29 may',
-      time: '0:01 hrs.',
-    },
-  },
+  // {
+  //   id: 4534,
+  //   student_id: 17158893,
+  //   course_id: 40711,
+  //   class_id: 1,
+  //   status: 'SCHEDULED',
+  //   start: '2025-05-29T04:01:00.000Z',
+  //   end: '2025-05-29T05:01:00.000Z',
+  //   duration_in_minutes: 60,
+  //   type: 'evaluation-release',
+  //   id_resource: 1947886,
+  //   associated_resource: {
+  //     id: 1,
+  //     name: 'Se habilita para responder "MCH y MCV"',
+  //     description: 'MCH o MCV',
+  //   },
+  //   url: null,
+  //   course: {
+  //     id: 40711,
+  //     name: '[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesoss',
+  //   },
+  //   translatedTitle: 'Se habilita para responder "MCH y MCV"',
+  //   formatedDate: {
+  //     day: 'jueves',
+  //     date: '29 may',
+  //     time: '0:01 hrs.',
+  //   },
+  // },
   {
     id: 62947,
     student_id: 17158893,
@@ -318,6 +319,35 @@ const events = [
       time: '23:59 hrs.',
     },
   },
+  {
+    id: 808522222,
+    student_id: 17269014,
+    course_id: 22568,
+    class_id: 1,
+    status: 'SCHEDULED',
+    start: '2027-01-01T02:59:00.000Z',
+    end: '2027-01-01T03:59:00.000Z',
+    duration_in_minutes: 60,
+    type: 'in-person-presencial',
+    location_sede: 'Sede Santiago, sala 204',
+    id_resource: 848781,
+    associated_resource: {
+      id: 1,
+      name: 'CalendarEventDeadlineAnswer "Pregunta tipo archivo toma 2"',
+      description: 'Clase con Pruebas de Prueba',
+    },
+    url: null,
+    course: {
+      id: 22568,
+      name: 'Pruebas contenido v8',
+    },
+    translatedTitle: 'Fin del plazo para responder "Pregunta tipo archivo toma 2"',
+    formatedDate: {
+      day: 'jueves',
+      date: '31 dic',
+      time: '23:59 hrs.',
+    },
+  },
   {
     id: 80868,
     student_id: 17269014,

diff --git a/src/documentation/pages/Organisms/EventsList.tsx b/src/documentation/pages/Organisms/EventsList.tsx
@@ -1,7 +1,8 @@
+import { Box } from '@chakra-ui/react'
+
 import { Code, MyHeading, MyText, MyTitle } from '@/documentation/components'
 import { EventsList } from '@/organisms'
 import { vars } from '@/theme'
-import { Box } from '@chakra-ui/react'
 
 export const EventsListPage = (): JSX.Element => {
   return (
@@ -82,6 +83,20 @@ export const EventsListPage = (): JSX.Element => {
           courseName="[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesos"
           duration={40}
         />
+        <EventsList
+          color="#00857A"
+          key="2"
+          name='Clase presencial "Caso aplicado"'
+          day="viernes"
+          date="30 jun"
+          time="19:00 hrs."
+          text="Curso"
+          type="in-person-presencial"
+          showCourse
+          courseName="[Pruebas TI] - Herramientas para la Gestión Estratégica de Procesos"
+          duration={40}
+          locationSede="Sede Santiago, sala 204"
+        />
       </Box>
 
       <MyTitle>3. Eventos en vista curso</MyTitle>
@@ -128,6 +143,7 @@ interface IEventList {
   time: string // Hora
   name: string // Nombre del evento
   hasNotification?: boolean // Indica si el evento tiene notificación
+  locationSede?: string // Sede para eventos de tipo in-person-presencial
   onClick?: () => void // Permite usar el item como elemento clickeable
   showCourse?: boolean // Indica si se muestra el curso
   showUnit?: boolean // Indica si se muestra la unidad

diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx
@@ -1,6 +1,7 @@
+import { Box, MenuGroup } from '@chakra-ui/react'
+
 import { BtnLink } from '@/molecules'
 import { EventsList } from '@/organisms/Calendar'
-import { Box, MenuGroup } from '@chakra-ui/react'
 import { vars } from '@theme'
 import { Event } from '../../types'
 
@@ -29,6 +30,42 @@ export const EventsGroup = ({
 }: IEventsGroupProps): JSX.Element => {
   if (!events || (events && events.length === 0)) return <></>
 
+  const eventItems: JSX.Element[] = events.map((event) => (
+    // Una vez que el evento se comporte como link, se debe cambiar Box a MenuItem y aplicar el efecto de focus
+    <Box
+      bg={vars('colors-neutral-white') ?? '#FFFFFF'}
+      border="none"
+      cursor={onClickEvent ? 'pointer' : 'default'}
+      padding="0"
+      key={event.id}
+      _hover={{
+        boxShadow: 'none !important',
+        cursor: onClickEvent ? 'pointer !important' : 'default !important',
+        bg: 'none !important',
+      }}
+      _focus={{
+        background: 'none !important',
+        boxShadow: 'none !important',
+      }}
+    >
+      <EventsList
+        name={event.translatedTitle}
+        courseName={event.course.name}
+        day={event.formatedDate.day}
+        date={event.formatedDate.date}
+        duration={event.duration_in_minutes}
+        time={event.formatedDate.time}
+        color={event.course_id && colors?.[event.course_id] ? colors[event.course_id] : '#82504A'}
+        text={text}
+        type={event.type}
+        locationSede={event.location_sede}
+        hasNotification={event.isNew}
+        onClick={onClickEvent ? () => onClickEvent(event) : undefined}
+        showCourse
+      />
+    </Box>
+  ))
+
   return (
     <>
       <Box
@@ -43,49 +80,7 @@ export const EventsGroup = ({
           },
         }}
       >
-        <MenuGroup title={title}>
-          {events.map((event: Event) => {
-            return (
-              // Una vez que el evento se comporte como link, se debe cambiar Box a MenuItem y aplicar el efecto de focus
-              <Box
-                bg={vars('colors-neutral-white') ?? '#FFFFFF'}
-                border="none"
-                cursor={onClickEvent ? 'pointer' : 'default'}
-                padding="0"
-                key={event.id}
-                _hover={{
-                  boxShadow: 'none !important',
-                  cursor: onClickEvent ? 'pointer !important' : 'default !important',
-                  bg: 'none !important',
-                }}
-                _focus={{
-                  background: 'none !important',
-                  boxShadow: 'none !important',
-                }}
-              >
-                <EventsList
-                  key={event.id}
-                  name={event.translatedTitle}
-                  courseName={event.course.name}
-                  day={event.formatedDate.day}
-                  date={event.formatedDate.date}
-                  duration={event.duration_in_minutes}
-                  time={event.formatedDate.time}
-                  color={
-                    event.course_id && colors?.[event.course_id]
-                      ? colors[event.course_id]
-                      : '#82504A'
-                  }
-                  text={text}
-                  type={event.type}
-                  hasNotification={event.isNew}
-                  onClick={onClickEvent ? () => onClickEvent(event) : undefined}
-                  showCourse
-                />
-              </Box>
-            )
-          })}
-        </MenuGroup>
+        <MenuGroup title={title}>{eventItems}</MenuGroup>
       </Box>
       {hasMoreNext && (
         <Box display="flex" alignItems="center" padding="16px 0 0 16px">

diff --git a/src/organisms/Calendar/Dropdown/types.d.ts b/src/organisms/Calendar/Dropdown/types.d.ts
@@ -24,6 +24,7 @@ export interface Event {
   formatedDate: FormattedDate
   id: number
   isNew?: boolean
+  location_sede?: string
   translatedTitle: string
   type: string
 }

diff --git a/src/organisms/Calendar/EventsList/EventsList.test.tsx b/src/organisms/Calendar/EventsList/EventsList.test.tsx
@@ -52,6 +52,29 @@ describe('EventsList', () => {
     expect(container).toHaveTextContent(/40\s*min/)
   })
 
+  it('renders location for in-person-presencial events when locationSede is provided', () => {
+    const { container } = renderComponent(undefined, {
+      duration: 40,
+      locationSede: 'Sede Santiago, sala 204',
+      type: 'in-person-presencial',
+    })
+
+    expect(screen.getByText('Sede Santiago, sala 204')).toBeInTheDocument()
+    expect(screen.queryByText('Link clase online')).not.toBeInTheDocument()
+    expect(container).toHaveTextContent(/40\s*min/)
+  })
+
+  it('does not render an empty location label for in-person-presencial events without locationSede', () => {
+    const { container } = renderComponent(undefined, {
+      duration: 40,
+      type: 'in-person-presencial',
+    })
+
+    expect(screen.queryByText('Link clase online')).not.toBeInTheDocument()
+    expect(screen.queryByTitle('icon-mapIndicator')).not.toBeInTheDocument()
+    expect(container).toHaveTextContent(/40\s*min/)
+  })
+
   it('does not render duration when minutes are zero', () => {
     renderComponent(undefined, { duration: 0 })