update ui

QuocAnh189 · Nov 8, 2024 · 4aa1cf5 · 4aa1cf5
1 parent f8b3608
commit 4aa1cf5
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 96 deletions.
diff --git a/src/components/Comments.tsx b/src/components/Comments.tsx
@@ -28,6 +28,9 @@ import dayjs from 'dayjs'
 //assets
 import userDefault from '@assets/images/common/user_default.png'
 
+//data
+import reviews_data from '@db/reviews'
+
 interface Props {
   eventId: string
   ownerId: string
@@ -44,7 +47,7 @@ const ItemReviews = (props: Props) => {
   const [metadata, setMetadata] = useState<IMetadataReviewResponse>()
   const [reviews, setReviews] = useState<IReview[]>([])
 
-  const pagination = usePagination(metadata?.totalCount!, initParamsReview.size)
+  const pagination = usePagination(metadata?.totalCount! || reviews_data.length, initParamsReview.size)
 
   const { data } = useGetReviewsByEventIdQuery({ ...initParamsReview, eventId, page: pagination.currentPage || 1 })
   const [deleteReview, { isLoading: loadingDeleteReview }] = useDeleteReviewMutation()
@@ -69,7 +72,7 @@ const ItemReviews = (props: Props) => {
 
   return (
     <div className='space-y-2'>
-      {reviews.map((review, index) => (
+      {reviews_data.slice(0, 3).map((review: IReview, index: number) => (
         <div key={`index${index}`} className='space-y-4'>
           <div className='flex items-center justify-between gap-2'>
             <div className='flex items-center gap-2'>

diff --git a/src/components/events/EventAnalysisItem.tsx b/src/components/events/EventAnalysisItem.tsx
@@ -3,13 +3,16 @@ import { useNavigate } from 'react-router-dom'
 
 //components
 import Spring from '@components/Spring'
+
+//interfaces
+import { IEvent } from '@interfaces/contents'
 interface Props {
-  seller: any
+  event: IEvent
   index: number
 }
 
 const EventAnalysisItem = (props: Props) => {
-  const { seller, index } = props
+  const { event, index } = props
   const navigate = useNavigate()
 
   const handleViewDetail = () => navigate(`123`)
@@ -25,12 +28,8 @@ const EventAnalysisItem = (props: Props) => {
         onClick={handleViewDetail}
       >
         <div className='w-[140px] h-[120px] flex flex-col items-center justify-center gap-2'>
-          <img
-            className='h-full w-auto object-contain'
-            src='https://res.cloudinary.com/dadvtny30/image/upload/v1712409123/eventhub/event/w3xvrrue35iu1gncudsa.jpg'
-            alt={seller.name}
-          />
-          <p className='font-bold text-xl text-header'>JobFair UIT</p>
+          <img className='h-full w-auto object-contain' src={event.coverImage} alt={event.name} />
+          <p className='font-bold text-xl text-header text-justify'>{event.name}</p>
         </div>
       </div>
     </Spring>

diff --git a/src/components/events/EventCardSearchHome.tsx b/src/components/events/EventCardSearchHome.tsx
@@ -17,7 +17,9 @@ const EventCardSearchHome = (props: Props) => {
   const navigate = useNavigate()
 
   const handleViewEvent = () => {
-    navigate(`/organization/event/${event.id}`)
+    navigate(`/organization/event/${event.id}`, {
+      state: { event }
+    })
   }
 
   return (

diff --git a/src/components/stats-highlight-table/index.tsx b/src/components/stats-highlight-table/index.tsx
@@ -11,8 +11,8 @@ import { commaFormatter, numFormatter } from '@utils/helpers'
 import { withTranslation } from 'react-i18next'
 
 const placeholder = [
-  { year: 2022, customers: 3234, trend: 10, revenue: 124000 },
-  { year: 2023, customers: 12345, trend: 35, revenue: 32000 }
+  { year: 2023, customers: 3234, trend: 10, revenue: 124000 },
+  { year: 2024, customers: 12345, trend: 35, revenue: 32000 }
 ]
 
 interface Props {

diff --git a/src/db/calendar.ts b/src/db/calendar.ts
@@ -0,0 +1,78 @@
+const calendar = [
+  {
+    id: '1',
+    title: 'Music With UIT',
+    coverImage:
+      'https://images.pexels.com/photos/2747449/pexels-photo-2747449.jpeg?cs=srgb&dl=pexels-wolfgang-1002140-2747449.jpg&fm=jpg',
+    date: '2024-11-08',
+    status: 'UPCOMING'
+  },
+  {
+    id: '2',
+    title: 'Music With UEH',
+    coverImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ52LuXfuyFjceKAdGai9o6PTeoQr5yiQxUtA&s',
+    date: '2024-11-09',
+    status: 'UPCOMING'
+  },
+  {
+    id: '3',
+    title: 'Music In Live',
+    coverImage: 'https://prankl-consulting.com/wp-content/uploads/2023/06/AdobeStock_119471366-1-1088x726.jpeg',
+    date: '2024-11-10',
+    status: 'UPCOMING'
+  },
+  {
+    id: '4',
+    title: 'Sport In UIT',
+    coverImage: 'https://img.freepik.com/free-vector/sport-text-banner-poster-design_1308-132612.jpg?semt=ais_hybrid',
+    date: '2024-11-11',
+    status: 'UPCOMING'
+  },
+  {
+    id: '5',
+    title: 'Sport In UEH',
+    coverImage: 'https://www.electricireland.com/images/folder/homepage-spotlights/benefits-0.jpg?sfvrsn=bc86ba0d_2',
+    date: '2024-11-12',
+    status: 'UPCOMING'
+  },
+  {
+    id: '6',
+    title: 'Sport In Live',
+    coverImage: 'https://www.uit.edu.vn/sites/vi/files/uploads/images/thumbs/202011/khpm2.jpg',
+    date: '2024-11-13',
+    status: 'UPCOMING'
+  },
+  {
+    id: '7',
+    title: 'Workshop with UIT',
+    coverImage:
+      'https://thesentry.com.vn/wp-content/uploads/2024/01/workshop-la-gi-7-buoc-to-chuc-workshop-hieu-qua-1.jpg',
+    date: '2024-11-14',
+    status: 'UPCOMING'
+  },
+  {
+    id: '8',
+    title: 'Workshop with UEH',
+    coverImage:
+      'https://res.cloudinary.com/dadvtny30/image/upload/v1713505724/eventhub/category/dze7rcjxmhbiyuxp0nms.png',
+    date: '2024-11-15',
+    status: 'UPCOMING'
+  },
+  {
+    id: '9',
+    title: 'Workshop Technology',
+    coverImage: 'https://vietnamteachingjobs.com/wp-content/uploads/2023/03/loi-ich-cua-work-shop-la-gi-1-750x375.jpg',
+    date: '2024-11-16',
+    status: 'UPCOMING'
+  },
+  {
+    id: '10',
+    title: 'Food With UIT',
+    coverImage:
+      'https://res.cloudinary.com/dadvtny30/image/upload/v1713505731/eventhub/category/xngndezflobwdhyds2dl.png',
+    date: '2024-11-17',
+    status: 'UPCOMING'
+  }
+]
+
+export default calendar
diff --git a/src/db/event.ts b/src/db/event.ts
@@ -19,7 +19,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -31,6 +31,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -58,7 +60,7 @@ const events = [
     numberOfSoldTickets: 20,
     averageRating: 4.5,
     status: EEventStatus.UPCOMING,
-    reasons: ['This is reasons 1', 'This is reasons 2, This is reasons 3'],
+    reasons: ['This is reasons 1', 'This is reasons 2', 'This is reasons 3'],
     createdAt: new Date(),
     updatedAt: new Date()
   },
@@ -80,7 +82,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -92,6 +94,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -141,7 +145,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -153,6 +157,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -202,7 +208,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -214,6 +220,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -263,7 +271,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -275,6 +283,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -324,7 +334,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -336,6 +346,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -386,7 +398,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -398,6 +410,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -447,7 +461,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -459,6 +473,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -508,7 +524,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -520,6 +536,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,
@@ -570,7 +588,7 @@ const events = [
     creator: {
       id: '1',
       name: 'Anh Quoc',
-      avatar: 'https://example.com/avatar.jpg',
+      avatar: 'https://res.cloudinary.com/dadvtny30/image/upload/v1710062870/portfolio/frj9fscqteb90eumokqj.jpg',
       email: '[email protected]'
     },
     subImages: [
@@ -582,6 +600,8 @@ const events = [
     description:
       'This is description for Event, This is description for Event, This is description for Event, This is description for Event,This is description for Event, This is description for Event',
     location: 'UIT Ho Chi Minh city',
+    locationPath:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.231240416691!2d106.80047917509012!3d10.870008889284525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317527587e9ad5bf%3A0xafa66f9c8be3c91!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBDw7RuZyBuZ2jhu4cgVGjDtG5nIHRpbiAtIMSQSFFHIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1715500492989!5m2!1svi!2s',
     startTime: new Date(),
     endTime: new Date(),
     eventCycleType: EEventStyle.RECURRING,

diff --git a/src/interfaces/contents/event.interface.ts b/src/interfaces/contents/event.interface.ts
@@ -14,6 +14,7 @@ export interface IEvent {
   name: string
   description: string
   location: string
+  locationPath: string
   priceRange: IPriceRange
   startTime: any
   endTime: any

diff --git a/src/pages/calendar/Calendar.tsx b/src/pages/calendar/Calendar.tsx
@@ -24,6 +24,9 @@ import { EEventStatus } from '@constants/enum.constant'
 //utils
 import dayjs from 'dayjs'
 
+//data
+import calendar_event from '@db/calendar'
+
 const Calendar = ({ t }: any) => {
   const navigate = useNavigate()
   const { data: events } = useGetEventsQuery({ takeAll: false, type: EEventStatus.UPCOMING, size: 6 })
@@ -69,8 +72,8 @@ const Calendar = ({ t }: any) => {
               dayMaxEvents={true}
               eventClick={handleEventClick}
               eventContent={renderEventContent}
-              // initialEvents={eventCalendar}
-              events={eventCalendar}
+              // initialEvents={calendar_event}
+              events={calendar_event || eventCalendar}
             />
           </Box>
         </Box>
@@ -108,8 +111,9 @@ function renderEventContent(eventInfo: any) {
         break
     }
   }
+
   return (
-    <div className={`flex items-center gap-2 bg-${statusEvent(eventInfo.event._def.extendedProps.status)}`}>
+    <div className={`flex items-center gap-2 bg-[${statusEvent(eventInfo.event._def.extendedProps.status)}]`}>
       <img src={eventInfo.event._def.extendedProps.coverImage} className='w-10 h-10 rounded-md' />
       <p className='text-header truncate'>{eventInfo.event.title}</p>
     </div>