@@ -647,7 +649,7 @@ export default function Home() {
- Show Up, Stand Out
+ {howItWorksSteps[3].title}
{howItWorksSteps[3].description}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4ec2bd2..57c0b24 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,8 @@ import { ToastContainer } from "react-toastify";
import { Manrope, Playfair_Display } from "next/font/google";
import "./global.css";
import { AuthProvider } from "@/context/authContext";
-import { ThemeProvider } from "@/context/ThemeContext";
+import CookieBanner from "@/components/CookieBanner";
+import OfflineBanner from "@/components/OfflineBanner";
const bodyFont = Manrope({
subsets: ["latin"],
@@ -19,6 +20,7 @@ const displayFont = Playfair_Display({
export const metadata = {
title: "VeriTix",
description: "Blockchain-powered ticketing on Stellar",
+ manifest: "/manifest.json",
};
export default function RootLayout({
@@ -27,13 +29,17 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
-
-
-
- {children}
-
-
+
+
+
+
+
+
+
+
+ {children}
+
+
diff --git a/src/components/CookieBanner.tsx b/src/components/CookieBanner.tsx
new file mode 100644
index 0000000..8065a97
--- /dev/null
+++ b/src/components/CookieBanner.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+
+const STORAGE_KEY = "veritix_cookie_consent";
+
+type Prefs = { analytics: boolean; marketing: boolean };
+type Consent = { functional: true } & Prefs;
+
+export default function CookieBanner() {
+ const [visible, setVisible] = useState(false);
+ const [expanded, setExpanded] = useState(false);
+ const [prefs, setPrefs] = useState
({ analytics: false, marketing: false });
+
+ useEffect(() => {
+ if (!localStorage.getItem(STORAGE_KEY)) setVisible(true);
+ }, []);
+
+ function save(consent: Consent) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
+ setVisible(false);
+ }
+
+ if (!visible) return null;
+
+ return (
+
+ );
+}
diff --git a/src/components/OfflineBanner.tsx b/src/components/OfflineBanner.tsx
new file mode 100644
index 0000000..7ca634d
--- /dev/null
+++ b/src/components/OfflineBanner.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { WifiOff } from "lucide-react";
+
+export default function OfflineBanner() {
+ const [offline, setOffline] = useState(false);
+
+ useEffect(() => {
+ setOffline(!navigator.onLine);
+ const on = () => setOffline(false);
+ const off = () => setOffline(true);
+ window.addEventListener("online", on);
+ window.addEventListener("offline", off);
+ return () => {
+ window.removeEventListener("online", on);
+ window.removeEventListener("offline", off);
+ };
+ }, []);
+
+ if (!offline) return null;
+
+ return (
+
+
+ You are offline — some features may be unavailable.
+
+ );
+}
diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx
index 3e386f6..029c39e 100644
--- a/src/context/authContext.tsx
+++ b/src/context/authContext.tsx
@@ -1,5 +1,6 @@
-'use client';
-import React, { createContext, useContext, useState, useEffect } from 'react';
+"use client";
+
+import { createContext, useEffect, useState } from 'react';
interface AuthUser { id: string; email: string; name?: string; role?: string; }
interface AuthContextValue { user: AuthUser | null; loading: boolean; login: (token: string, user: AuthUser) => void; logout: () => void; }
@@ -23,14 +24,9 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
bootstrap();
}, []);
- const login = (token: string, userData: AuthUser) => { localStorage.setItem('auth_token', token); setUser(userData); };
- const logout = () => { localStorage.removeItem('auth_token'); sessionStorage.removeItem('auth_token'); setUser(null); };
-
- return {children};
-};
-
-export const useAuth = () => {
- const ctx = useContext(AuthContext);
- if (!ctx) throw new Error('useAuth must be used within AuthProvider');
- return ctx;
+ return (
+
+ {children}
+
+ );
};
diff --git a/src/hooks/README.md b/src/hooks/README.md
new file mode 100644
index 0000000..3ec266c
--- /dev/null
+++ b/src/hooks/README.md
@@ -0,0 +1,22 @@
+# Hooks
+
+Custom React hooks for VeriTix.
+
+## Caching Strategy (SWR)
+
+API hooks use [SWR](https://swr.vercel.app/) for data fetching and caching. Global defaults are set in `src/app/(protected)/layout.tsx` via `SWRConfig`:
+
+| Option | Value | Reason |
+|---|---|---|
+| `dedupingInterval` | `60_000` ms | Prevents duplicate requests within 60 s |
+| `revalidateOnFocus` | `false` | Avoids refetch on every tab switch |
+
+### Hooks
+
+| Hook | Endpoint | Notes |
+|---|---|---|
+| `useOrganizerAnalytics` | `/api/organizers/:id/analytics` | SWR with per-hook deduping |
+
+### Adding a new hook
+
+Use `useSWR` and pass `{ dedupingInterval: 60_000, revalidateOnFocus: false }` unless the data needs to be fresher.
diff --git a/src/hooks/useOrganizerAnalytics.ts b/src/hooks/useOrganizerAnalytics.ts
index 75bdc14..a81dac9 100644
--- a/src/hooks/useOrganizerAnalytics.ts
+++ b/src/hooks/useOrganizerAnalytics.ts
@@ -1,70 +1,20 @@
-import { useState, useEffect } from "react";
+import useSWR from "swr";
-export interface DemographicItem {
- label: string;
- count: number;
- percentage: number;
-}
-
-export interface Demographics {
- region: DemographicItem[];
- deviceType: DemographicItem[];
- referralSource: DemographicItem[];
-export interface TicketTypeBreakdown {
- type: string;
- count: number;
- revenue: number;
-}
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
-export interface Demographics {
- region: { label: string; count: number; percentage: number }[];
- deviceType: { label: string; count: number; percentage: number }[];
- referralSource: { label: string; count: number; percentage: number }[];
-}
-
-export interface OrganizerAnalytics {
- revenue: { day: string; revenue: number }[];
- performance: { day: string; value: number }[];
- totalEarned: number;
- payoutsQueued: number;
- nextSettlementDays: number;
- checkInsLive: boolean;
- doorsOpenInMinutes: number;
+export type OrganizerAnalytics = {
totalEvents: number;
- events?: { name: string; coverImage?: string }[];
- ticketBreakdown?: { type: string; count: number; revenue: number }[];
- demographics?: Demographics;
-}
-
-function getToken() {
- if (typeof window === "undefined") return "";
- return localStorage.getItem("auth_token") ?? sessionStorage.getItem("auth_token") ?? "";
-}
-
-export function useOrganizerAnalytics(params?: { from?: string; to?: string }) {
- const [data, setData] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
-
- useEffect(() => {
- setLoading(true);
- setError(null);
- const token = getToken();
- const query = new URLSearchParams();
- if (params?.from) query.set("from", params.from);
- if (params?.to) query.set("to", params.to);
- const qs = query.toString() ? `?${query.toString()}` : "";
- fetch(`/api/organizer/analytics${qs}`, {
- headers: { Authorization: `Bearer ${token}` },
- })
- .then((res) => {
- if (!res.ok) throw new Error("Failed to fetch analytics");
- return res.json();
- })
- .then(setData)
- .catch((e: Error) => setError(e.message))
- .finally(() => setLoading(false));
- }, [params?.from, params?.to]);
-
- return { data, loading, error };
+ totalTicketsSold: number;
+ totalRevenue: number;
+ recentActivity: { date: string; action: string }[];
+};
+
+export function useOrganizerAnalytics(organizerId: string) {
+ const { data, error, isLoading } = useSWR(
+ organizerId ? `/api/organizers/${organizerId}/analytics` : null,
+ fetcher,
+ { dedupingInterval: 60_000, revalidateOnFocus: false }
+ );
+
+ return { data, error, isLoading };
}