28-add-ui-for-crud-operations-on-event-sub-entities-discounts-sessions-tiers

package.json

@@ -14,6 +14,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@google-analytics/data": "^5.2.0",
     "@hookform/resolvers": "^5.2.1",
+    "@icons-pack/react-simple-icons": "^13.8.0",
     "@next/third-parties": "^15.5.2",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",

src/app/(home-app)/events/[event_id]/_components/Sessions.tsx

@@ -1,49 +1,13 @@
 'use client';
 
-import {PaginatedResponse} from '@/types/paginatedResponse';
 import React, {useEffect, useState} from 'react';
 import {SessionInfoBasicDTO} from "@/types/event";
-import {getEventSessions, getEventSessionsInRange} from '@/lib/actions/public/eventActions';
+import {getEventSessionsInRange} from '@/lib/actions/public/eventActions';
 import {CalendarIcon} from "lucide-react";
 import {Button} from "@/components/ui/button";
 import {SessionItem} from "@/app/(home-app)/events/[event_id]/_components/SessionItem";
 import {DatePicker} from "@/components/ui/datepicker";
 
-const Sessions = ({eventId}: { eventId: string }) => {
-    const [page, setPage] = useState(0);
-    const [sessionsData, setSessionsData] = useState<PaginatedResponse<SessionInfoBasicDTO> | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-
-    useEffect(() => {
-        const fetchSessions = async () => {
-            setIsLoading(true);
-            const data = await getEventSessions({eventId, page});
-            setSessionsData(data);
-            setIsLoading(false);
-        };
-        fetchSessions();
-    }, [eventId, page]);
-
-    if (isLoading) return <div>Loading sessions...</div>;
-    if (!sessionsData || sessionsData.empty) return <div>No sessions found.</div>;
-
-    return (
-        <div className="max-w-7xl mx-auto space-y-4">
-            <h2 className="text-2xl font-bold text-foreground flex items-center gap-2">
-                <CalendarIcon className="w-6 h-6"/> Sessions
-            </h2>
-            <div className="space-y-2">
-                {sessionsData.content.map(session => <SessionItem key={session.id} session={session}/>)}
-            </div>
-            <div className="flex justify-between items-center">
-                <Button onClick={() => setPage(p => p - 1)} disabled={sessionsData.first}>Previous</Button>
-                <span>Page {sessionsData.number + 1} of {sessionsData.totalPages}</span>
-                <Button onClick={() => setPage(p => p + 1)} disabled={sessionsData.last}>Next</Button>
-            </div>
-        </div>
-    );
-};
-
 const SessionsNoPagination = ({eventId}: { eventId: string }) => {
     // Default dates: one week ago to three months ahead
     const now = new Date();
@@ -118,4 +82,4 @@ const SessionsNoPagination = ({eventId}: { eventId: string }) => {
     );
 };
 
-export default SessionsNoPagination;
+export default SessionsNoPagination;

src/app/(home-app)/events/[event_id]/layout.tsx

@@ -1,35 +1,35 @@
-import React, {Suspense} from 'react';
-import {EventHero, ReviewEventHeroSkeleton} from "@/app/(home-app)/events/[event_id]/_components/EventHero";
-import {Separator} from "@/components/ui/separator";
-import {getEventSummery, getEventTotalViews} from "@/lib/actions/public/server/eventActions";
-import {EventTracker} from "@/app/(home-app)/events/[event_id]/_components/EventTracker";
-import {EventOverview} from "@/app/manage/_components/review/EventOverview";
+import React, { Suspense } from 'react';
+import { EventHero, ReviewEventHeroSkeleton } from "@/app/(home-app)/events/[event_id]/_components/EventHero";
+import { Separator } from "@/components/ui/separator";
+import { getEventSummery, getEventTotalViews } from "@/lib/actions/public/server/eventActions";
+import { EventOverview } from "@/app/manage/_components/review/EventOverview";
+import { EventTracker } from './_components/EventTracker';
 
 
-export default async function Layout({params, children}: {
+export default async function Layout({ params, children }: {
     params: Promise<{ event_id: string }>
     children: React.ReactNode;
 }) {
-    const {event_id} = await params;
+    const { event_id } = await params;
     const eventSummery = await getEventSummery(event_id);
     const viewsData = await getEventTotalViews(event_id);
 
     return (
         <div>
             <div className="min-h-screen p-4 sm:p-6 md:p-8">
                 <div className="max-w-7xl mx-auto space-y-8">
-                    <EventTracker event={{
-                        title: eventSummery.title,
-                        id: eventSummery.id,
-                        organization_id: eventSummery.organization?.id || '',
-                    }}/>
-                    <Suspense fallback={<ReviewEventHeroSkeleton/>}>
+                    <Suspense fallback={<ReviewEventHeroSkeleton />}>
+                        <EventTracker event={{
+                            title: eventSummery.title,
+                            id: eventSummery.id,
+                            organization_id: eventSummery.organization?.id || '',
+                        }} />
                         <EventHero event={eventSummery}
-                                   viewCount={viewsData.success ? viewsData.viewCount : undefined}/>
-                        <Separator className={'border-3 my-2'}/>
-                        <EventOverview overview={eventSummery.overview}/>
+                            viewCount={viewsData.success ? viewsData.viewCount : undefined} />
+                        <Separator className={'border-3 my-2'} />
+                        <EventOverview overview={eventSummery.overview} />
                     </Suspense>
-                    <Separator className={'border-3 my-2'}/>
+                    <Separator className={'border-3 my-2'} />
                     {children}
                 </div>
             </div>