Gatheraa · lishmanTech · Mar 30, 2026 · Mar 30, 2026 · Mar 30, 2026
diff --git a/app/frontend/app/dao/[id]/page.tsx b/app/frontend/app/dao/[id]/page.tsx
@@ -12,7 +12,7 @@ import { WrongNetworkAlert } from '@/components/wallet/WrongNetworkAlert';
 
 const ProposalDetailPage: React.FC = () => {
   const params = useParams();
-  const id = params.id as string;
+  const id = typeof params?.id === 'string' ? params.id : '';
   const [proposal, setProposal] = useState<Proposal | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);

diff --git a/app/frontend/app/demo/page.tsx b/app/frontend/app/demo/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import React, { useState } from 'react';
-import MultiSourceDataAggregator from '../components/MultiSourceDataAggregator';
-import SessionTimeoutManager from '../components/SessionTimeoutManager';
+import MultiSourceDataAggregator from '../../components/MultiSourceDataAggregator';
+import SessionTimeoutManager from '../../components/SessionTimeoutManager';
 
 // Demo page for testing both components
 const ComponentDemoPage: React.FC = () => {

diff --git a/app/frontend/app/events/[id]/page.tsx b/app/frontend/app/events/[id]/page.tsx
@@ -21,7 +21,7 @@ type EventDetailPayload = Event & {
 
 export default function EventDetailPage() {
   const params = useParams();
-  const eventId = params.id as string;
+  const eventId = typeof params?.id === 'string' ? params.id : '';
 
   const [event, setEvent] = useState<EventDetailPayload | null>(null);
   const [loading, setLoading] = useState(true);

diff --git a/app/frontend/app/events/page.tsx b/app/frontend/app/events/page.tsx
@@ -160,7 +160,7 @@ export default function EventsPage() {
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {events.map((event) => {
-              const status = getEventStatus(event.startDate, event.endDate);
+              const status = getEventStatus(event.startDate, event.endDate ?? null);
               return (
                 <Link
                   key={event.id}
@@ -201,7 +201,7 @@ export default function EventsPage() {
                     <div className="space-y-2 mb-4">
                       <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                         <Calendar className="w-4 h-4" />
-                        <span>{formatDateRange(event.startDate, event.endDate)}</span>
+                        <span>{formatDateRange(event.startDate, event.endDate ?? null)}</span>
                       </div>
                       {event.registeredCount > 0 && (
                         <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">

diff --git a/app/frontend/app/layout.tsx b/app/frontend/app/layout.tsx
@@ -3,6 +3,8 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { WalletProvider } from "@/components/wallet/WalletProvider";
 import { OfflineProvider } from "@/lib/offline/OfflineContext";
+import { FloatingActionButton } from "@/components/navigation/FloatingActionButton";
+import { RoleProvider } from "@/components/dao/RoleContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -41,9 +43,12 @@ export default function RootLayout({
     <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
       <body className="antialiased">
         <OfflineProvider>
-          <WalletProvider>
-            {children}
-          </WalletProvider>
+          <RoleProvider>
+            <WalletProvider>
+              {children}
+              <FloatingActionButton />
+            </WalletProvider>
+          </RoleProvider>
         </OfflineProvider>
       </body>
     </html>

diff --git a/app/frontend/components/DataTable.tsx b/app/frontend/components/DataTable.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { motion, AnimatePresence } from "framer-motion";
 
 // Example data
 const initialData = [

diff --git a/app/frontend/components/MultiSourceDataAggregator.tsx b/app/frontend/components/MultiSourceDataAggregator.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { AlertCircle, RefreshCw, CheckCircle, XCircle, Loader2 } from 'lucide-react';
 
 // Types for the component

diff --git a/app/frontend/components/ReusableTable.tsx b/app/frontend/components/ReusableTable.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { motion, AnimatePresence } from "framer-motion";
 
 interface TableColumn {
   key: string;

diff --git a/app/frontend/components/SessionTimeoutHandler.tsx b/app/frontend/components/SessionTimeoutHandler.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { AlertCircle, Clock, LogOut, RefreshCcw, ShieldAlert } from 'lucide-react';
 
 interface SessionTimeoutHandlerProps {

diff --git a/app/frontend/components/SessionTimeoutManager.tsx b/app/frontend/components/SessionTimeoutManager.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { AlertTriangle, Clock, LogOut, RefreshCw, X } from 'lucide-react';
 
 // Types for the component

diff --git a/app/frontend/components/auth/RouteGuard.tsx b/app/frontend/components/auth/RouteGuard.tsx
@@ -157,7 +157,7 @@ function GenericSkeleton() {
   );
 }
 
-const SKELETONS: Record<SkeletonVariant, () => JSX.Element> = {
+const SKELETONS: Record<SkeletonVariant, () => React.JSX.Element> = {
   dashboard: DashboardSkeleton,
   event: EventSkeleton,
   profile: ProfileSkeleton,

diff --git a/app/frontend/components/common/PersonalizedVideoSections.tsx b/app/frontend/components/common/PersonalizedVideoSections.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import DynamicVideoGrid from '../video/DynamicVideoGrid';
+import { DynamicVideoGrid } from '../video/DynamicVideoGrid';
 
 // Section config type
 type SectionType = 'trending' | 'forYou' | 'newReleases';

diff --git a/app/frontend/components/common/VideoPlayerCaptions.tsx b/app/frontend/components/common/VideoPlayerCaptions.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+interface VideoPlayerCaptionsProps {
+  videoSrc: string;
+}
+
+export default function VideoPlayerCaptions({ videoSrc }: VideoPlayerCaptionsProps) {
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-3 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
+      Captions are not available for this source yet.
+      <span className="sr-only">{videoSrc}</span>
+    </div>
+  );
+}
diff --git a/app/frontend/components/common/VideoPlayerComments.tsx b/app/frontend/components/common/VideoPlayerComments.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+interface VideoPlayerCommentsProps {
+  videoSrc: string;
+}
+
+export default function VideoPlayerComments({ videoSrc }: VideoPlayerCommentsProps) {
+  return (
+    <div className="mt-3 rounded-lg border border-gray-200 bg-white p-3 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
+      Comments are currently unavailable.
+      <span className="sr-only">{videoSrc}</span>
+    </div>
+  );
+}
diff --git a/app/frontend/components/common/VideoPlayerLazy.tsx b/app/frontend/components/common/VideoPlayerLazy.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense, useState } from 'react';
 import dynamic from 'next/dynamic';
-import VideoPlayerSync from '../video/VideoPlayerSync';
+import { VideoPlayerSync } from '../video/VideoPlayerSync';
 
 // Dynamically import non-critical UI components
 const Captions = dynamic(() => import('./VideoPlayerCaptions'), { ssr: false, loading: () => <div className="player-ui-loading">Loading captions...</div> });

diff --git a/app/frontend/components/common/VideoPlayerStats.tsx b/app/frontend/components/common/VideoPlayerStats.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+interface VideoPlayerStatsProps {
+  videoSrc: string;
+}
+
+export default function VideoPlayerStats({ videoSrc }: VideoPlayerStatsProps) {
+  return (
+    <div className="mt-3 rounded-lg border border-gray-200 bg-white p-3 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
+      Playback stats are loading.
+      <span className="sr-only">{videoSrc}</span>
+    </div>
+  );
+}
diff --git a/app/frontend/components/dao/RoleContext.tsx b/app/frontend/components/dao/RoleContext.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, useContext, useState, useEffect } from 'react';
 
 export type UserRole = 'creator' | 'contributor' | 'admin' | null;

diff --git a/app/frontend/components/dashboard/Chart.tsx b/app/frontend/components/dashboard/Chart.tsx
@@ -222,7 +222,6 @@ export function Chart({
                 name={s.name || s.dataKey}
                 fill={s.color || colors[index % colors.length]}
                 radius={[4, 4, 0, 0]}
-                onClick={(data, index) => handleClick(data, index)}
                 cursor={onDataPointClick ? 'pointer' : 'default'}
                 {...animationProps}
               />
@@ -260,7 +259,6 @@ export function Chart({
                 strokeWidth={s.strokeWidth || 2}
                 dot={{ fill: s.color || colors[index % colors.length], r: 4 }}
                 activeDot={{ r: 6, strokeWidth: 0 }}
-                onClick={(data, index) => handleClick(data, index)}
                 cursor={onDataPointClick ? 'pointer' : 'default'}
                 {...animationProps}
               />
@@ -297,7 +295,6 @@ export function Chart({
                 stroke={s.color || colors[index % colors.length]}
                 fill={s.color || colors[index % colors.length]}
                 fillOpacity={s.fillOpacity || 0.2}
-                onClick={(data, index) => handleClick(data, index)}
                 cursor={onDataPointClick ? 'pointer' : 'default'}
                 {...animationProps}
               />
@@ -318,7 +315,7 @@ export function Chart({
               outerRadius={outerRadius}
               dataKey={chartSeries[0]?.dataKey || 'value'}
               nameKey={xAxisKey}
-              onClick={(data, index) => handleClick(data as unknown as ChartDataPoint, index)}
+              onClick={(data: unknown, index: number) => handleClick(data as ChartDataPoint, index)}
               cursor={onDataPointClick ? 'pointer' : 'default'}
               {...animationProps}
             >
@@ -335,7 +332,7 @@ export function Chart({
         );
 
       default:
-        return null;
+        return <></>;
     }
   };
 

diff --git a/app/frontend/components/events/EventRecommendationCarousel.tsx b/app/frontend/components/events/EventRecommendationCarousel.tsx
@@ -10,8 +10,8 @@ import Link from 'next/link';
 import { Calendar, ChevronLeft, ChevronRight, MapPin, Star, Users } from 'lucide-react';
 import type { Event } from '@/lib/api/events';
 
-function formatDateShort(dateString: string) {
-  const date = new Date(dateString);
+function formatDateShort(dateInput: string | Date) {
+  const date = dateInput instanceof Date ? dateInput : new Date(dateInput);
   return date.toLocaleDateString('en-US', {
     month: 'short',
     day: 'numeric',
@@ -26,7 +26,7 @@ function formatDateRangeShort(start: string, end?: string | null) {
     return formatDateShort(start);
   }
   if (endDate) {
-    return `${formatDateShort(start)} – ${formatDateShort(end)}`;
+    return `${formatDateShort(start)} – ${formatDateShort(endDate)}`;
   }
   return formatDateShort(start);
 }

diff --git a/app/frontend/components/events/ScheduleBuilder.tsx b/app/frontend/components/events/ScheduleBuilder.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useCallback, useMemo } from 'react';
-import { motion, Reorder, AnimatePresence } from 'motion/react';
+import { motion, Reorder, AnimatePresence } from 'framer-motion';
 import { GripVertical, Clock, MapPin, Plus, Trash2, Edit3, Save, RotateCcw } from 'lucide-react';
 
 interface Session {

diff --git a/app/frontend/components/events/VirtualizedEventList.tsx b/app/frontend/components/events/VirtualizedEventList.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Calendar, MapPin, Users, Info, ChevronRight } from 'lucide-react';
 
 interface Event {

diff --git a/app/frontend/components/forms/CreateEventForm.tsx b/app/frontend/components/forms/CreateEventForm.tsx
@@ -22,6 +22,8 @@ const TAG_SUGGESTIONS = [
   'Technology',
 ];
 
+const EVENT_CATEGORIES = ['conference', 'workshop', 'concert', 'hackathon', 'meetup'] as const;
+
 // ─── Schema ───────────────────────────────────────────────────────────────────
 const createEventSchema = z.object({
   title: z
@@ -42,6 +44,10 @@ const createEventSchema = z.object({
   maxAttendees: z
     .string()
     .refine(v => !isNaN(Number(v)) && Number(v) >= 1 && Number.isInteger(Number(v)), 'Must be a whole number ≥ 1'),
+  category: z
+    .string()
+    .refine((value) => EVENT_CATEGORIES.includes(value as (typeof EVENT_CATEGORIES)[number]), {
+      message: 'Please select a category',
   category: z.enum(['conference', 'workshop', 'concert', 'hackathon', 'meetup', ''], {
     errorMap: () => ({ message: 'Please select a category' }),
   }).refine(v => v !== '', { message: 'Please select a category' }),
@@ -174,7 +180,6 @@ export default function CreateEventForm() {
       {/* Title */}
       <FormInput
         label="Event Title"
-        name="title"
         type="text"
         placeholder="e.g. Stellar Dev Hackathon 2025"
         required
@@ -188,7 +193,6 @@ export default function CreateEventForm() {
       {/* Description */}
       <FormInput
         label="Description"
-        name="description"
         as="textarea"
         rows={3}
         placeholder="Tell attendees what this event is about..."
@@ -202,7 +206,6 @@ export default function CreateEventForm() {
       {/* Category */}
       <FormInput
         label="Category"
-        name="category"
         as="select"
         required
         error={errors.category}
@@ -238,7 +241,6 @@ export default function CreateEventForm() {
       <div className="grid grid-cols-2 gap-4">
         <FormInput
           label="Ticket Price (XLM)"
-          name="ticketPrice"
           type="number"
           min="0"
           step="0.01"
@@ -251,7 +253,6 @@ export default function CreateEventForm() {
         />
         <FormInput
           label="Max Attendees"
-          name="maxAttendees"
           type="number"
           min="1"
           step="1"
@@ -267,7 +268,6 @@ export default function CreateEventForm() {
       {/* Contract Address */}
       <FormInput
         label="Contract Address"
-        name="contractAddress"
         type="text"
         placeholder="GABC…"
         icon={<CodeIcon />}
@@ -280,7 +280,6 @@ export default function CreateEventForm() {
       {/* Website URL */}
       <FormInput
         label="Website URL"
-        name="websiteUrl"
         type="url"
         placeholder="https://gatheraa.xyz/event"
         icon={<GlobeIcon />}

diff --git a/app/frontend/components/forms/DynamicFormBuilder.tsx b/app/frontend/components/forms/DynamicFormBuilder.tsx
@@ -32,7 +32,7 @@ export interface ValidationRule {
   value?: string | number;
   message: string;
   regex?: string;
-  customValidator?: (value: any) => boolean | string;
+  customValidator?: (value: any, allValues?: Record<string, any>) => boolean | string;
 }
 
 export interface FieldOption {