1268 lines
58 KiB
TypeScript
1268 lines
58 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useMemo, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import {
|
|
collection,
|
|
query,
|
|
where,
|
|
onSnapshot,
|
|
doc,
|
|
writeBatch,
|
|
updateDoc,
|
|
deleteDoc,
|
|
} from 'firebase/firestore';
|
|
import { firestore } from '../../lib/firebase-client';
|
|
import { INITIAL_GROUP_RIDES } from './fixtures';
|
|
import { GroupRideSummary } from './types';
|
|
import { CreateRideModal } from './create-ride-modal';
|
|
import { EditRideModal } from './edit-ride-modal';
|
|
import { DeleteConfirmModal } from './delete-confirm-modal';
|
|
import { JoinRideModal } from './join-ride-modal';
|
|
import { LivePackRadar } from './live-pack-radar';
|
|
import { RideDetailsModal } from './ride-details-modal';
|
|
|
|
interface GroupRidesManagementProps {
|
|
currentUser?: { uid?: string; email?: string | null; displayName?: string | null } | null;
|
|
onViewShowcase?: () => void;
|
|
}
|
|
|
|
function mapFirestoreDocToSummary(
|
|
data: any,
|
|
docId: string,
|
|
currentUid?: string
|
|
): GroupRideSummary {
|
|
const isOrganizer = Boolean(currentUid && data.organizerUid === currentUid);
|
|
const isParticipant = Boolean(
|
|
currentUid && Array.isArray(data.accessUids) && data.accessUids.includes(currentUid)
|
|
);
|
|
|
|
let scheduledDate = 'Upcoming';
|
|
let scheduledTime = 'TBD';
|
|
if (data.scheduledStartAt) {
|
|
try {
|
|
const d = new Date(data.scheduledStartAt);
|
|
if (!isNaN(d.getTime())) {
|
|
scheduledDate = d.toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
scheduledTime = d.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
});
|
|
}
|
|
} catch (_) {}
|
|
}
|
|
|
|
let distance = 'Open Route';
|
|
if (typeof data.routeDistanceMeters === 'number' && data.routeDistanceMeters > 0) {
|
|
distance = `${(data.routeDistanceMeters / 1609.34).toFixed(1)} Miles`;
|
|
} else if (data.distance) {
|
|
distance = String(data.distance);
|
|
}
|
|
|
|
const meetingPoint =
|
|
data.meetingPoint?.displayName ||
|
|
data.meetingPoint?.address ||
|
|
'Designated Rally Point';
|
|
const region =
|
|
data.meetingPoint?.address ||
|
|
data.meetingPoint?.displayName ||
|
|
data.region ||
|
|
'Regional Run';
|
|
|
|
let routeSnippet = data.routeTitle;
|
|
if (!routeSnippet && data.destination?.displayName) {
|
|
routeSnippet = `${meetingPoint} > ${data.destination.displayName}`;
|
|
}
|
|
if (!routeSnippet) {
|
|
routeSnippet = data.routeSnippet || 'Custom pack route staged on MotorSignal';
|
|
}
|
|
|
|
const leadHandle =
|
|
data.organizerDisplayName ||
|
|
data.organizerHandle ||
|
|
(isOrganizer ? 'You (Organizer)' : 'Pack Marshal');
|
|
const leadAvatarText = (
|
|
data.organizerDisplayName?.[0] ||
|
|
data.organizerHandle?.[0] ||
|
|
(isOrganizer ? 'Y' : 'P')
|
|
).toUpperCase();
|
|
|
|
const status = data.status || 'scheduled';
|
|
|
|
let userStatus: GroupRideSummary['userStatus'] = 'none';
|
|
if (isOrganizer || isParticipant) {
|
|
userStatus = 'joined';
|
|
}
|
|
|
|
return {
|
|
id: docId,
|
|
title: data.title || 'Untitled Ride',
|
|
description: data.description || '',
|
|
region,
|
|
scheduledDate,
|
|
scheduledTime,
|
|
paceClassification: data.paceClassification || 'Brisk Pace',
|
|
discipline: data.discipline || 'Sport / Canyon',
|
|
formationProfile: data.formationProfile || 'Staggered Dual Column [B]',
|
|
joinPolicy: data.joinPolicy || 'requestToJoin',
|
|
leadHandle,
|
|
leadAvatarText,
|
|
participantCount:
|
|
typeof data.participantCount === 'number' ? data.participantCount : 1,
|
|
participantLimit:
|
|
typeof data.participantLimit === 'number' ? data.participantLimit : 12,
|
|
distance,
|
|
meetingPoint,
|
|
routeSnippet,
|
|
userStatus,
|
|
isOrganizer,
|
|
status,
|
|
rideCode: data.id || docId,
|
|
clubName: data.clubName || undefined,
|
|
};
|
|
}
|
|
|
|
type ManagementTab = 'my-rides' | 'discover' | 'radar';
|
|
type MyRidesFilter = 'all' | 'organized' | 'joined';
|
|
|
|
export function GroupRidesManagement({
|
|
currentUser,
|
|
onViewShowcase,
|
|
}: GroupRidesManagementProps) {
|
|
const [rides, setRides] = useState<GroupRideSummary[]>(INITIAL_GROUP_RIDES);
|
|
const [activeTab, setActiveTab] = useState<ManagementTab>('my-rides');
|
|
const [myRidesFilter, setMyRidesFilter] = useState<MyRidesFilter>('all');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [paceFilter, setPaceFilter] = useState<string>('all');
|
|
|
|
// Modals state
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
|
|
const [editingRide, setEditingRide] = useState<GroupRideSummary | null>(null);
|
|
const [deletingRide, setDeletingRide] = useState<GroupRideSummary | null>(null);
|
|
const [leavingRide, setLeavingRide] = useState<GroupRideSummary | null>(null);
|
|
const [selectedDetailRide, setSelectedDetailRide] = useState<GroupRideSummary | null>(null);
|
|
|
|
// Toast alert
|
|
const [activeAlert, setActiveAlert] = useState<{
|
|
message: string;
|
|
type: 'success' | 'info' | 'error';
|
|
} | null>(null);
|
|
|
|
const showAlert = (message: string, type: 'success' | 'info' | 'error' = 'success') => {
|
|
setActiveAlert({ message, type });
|
|
setTimeout(() => {
|
|
setActiveAlert(null);
|
|
}, 4500);
|
|
};
|
|
|
|
// KPIs
|
|
const myOrganizedRides = useMemo(() => rides.filter((r) => r.isOrganizer), [rides]);
|
|
const myJoinedRides = useMemo(
|
|
() => rides.filter((r) => !r.isOrganizer && (r.userStatus === 'joined' || r.userStatus === 'requested')),
|
|
[rides]
|
|
);
|
|
const myTotalRides = useMemo(
|
|
() => rides.filter((r) => r.isOrganizer || r.userStatus === 'joined'),
|
|
[rides]
|
|
);
|
|
|
|
// My Rides filtered list
|
|
const filteredMyRides = useMemo(() => {
|
|
let list = rides.filter((r) => {
|
|
if (myRidesFilter === 'organized') return r.isOrganizer;
|
|
if (myRidesFilter === 'joined') return !r.isOrganizer && (r.userStatus === 'joined' || r.userStatus === 'requested');
|
|
return r.isOrganizer || r.userStatus === 'joined' || r.userStatus === 'requested';
|
|
});
|
|
|
|
if (searchQuery.trim()) {
|
|
const q = searchQuery.toLowerCase();
|
|
list = list.filter(
|
|
(r) =>
|
|
r.title.toLowerCase().includes(q) ||
|
|
r.region.toLowerCase().includes(q) ||
|
|
r.meetingPoint.toLowerCase().includes(q)
|
|
);
|
|
}
|
|
|
|
return list;
|
|
}, [rides, myRidesFilter, searchQuery]);
|
|
|
|
// Discover Rides filtered list
|
|
const discoverRides = useMemo(() => {
|
|
let list = rides;
|
|
if (paceFilter !== 'all') {
|
|
const pf = paceFilter.toLowerCase();
|
|
list = list.filter((r) => {
|
|
const pace = r.paceClassification.toLowerCase();
|
|
if (pf === 'casual') {
|
|
return pace.includes('casual') || pace.includes('tour') || pace.includes('endurance') || pace.includes('chill');
|
|
}
|
|
return pace.includes(pf);
|
|
});
|
|
}
|
|
if (searchQuery.trim()) {
|
|
const q = searchQuery.toLowerCase();
|
|
list = list.filter(
|
|
(r) =>
|
|
r.title.toLowerCase().includes(q) ||
|
|
r.region.toLowerCase().includes(q) ||
|
|
r.leadHandle.toLowerCase().includes(q) ||
|
|
(r.discipline && r.discipline.toLowerCase().includes(q))
|
|
);
|
|
}
|
|
return list;
|
|
}, [rides, paceFilter, searchQuery]);
|
|
|
|
// Realtime synchronization with Firestore
|
|
useEffect(() => {
|
|
if (!currentUser?.uid || !firestore) {
|
|
return;
|
|
}
|
|
|
|
let isSubscribed = true;
|
|
const ridesMap = new Map<string, GroupRideSummary>();
|
|
|
|
const updateCombinedRides = () => {
|
|
if (!isSubscribed) return;
|
|
const combined = Array.from(ridesMap.values());
|
|
combined.sort((a, b) => {
|
|
if (a.status === 'canceled' && b.status !== 'canceled') return 1;
|
|
if (a.status !== 'canceled' && b.status === 'canceled') return -1;
|
|
return b.id.localeCompare(a.id);
|
|
});
|
|
setRides(combined);
|
|
};
|
|
|
|
let unsubOrganized: (() => void) | null = null;
|
|
let unsubJoined: (() => void) | null = null;
|
|
|
|
try {
|
|
const qOrganized = query(
|
|
collection(firestore, 'group_rides'),
|
|
where('organizerUid', '==', currentUser.uid)
|
|
);
|
|
|
|
unsubOrganized = onSnapshot(
|
|
qOrganized,
|
|
(snapshot) => {
|
|
snapshot.docs.forEach((docSnap) => {
|
|
ridesMap.set(
|
|
docSnap.id,
|
|
mapFirestoreDocToSummary(docSnap.data(), docSnap.id, currentUser.uid)
|
|
);
|
|
});
|
|
snapshot.docChanges().forEach((change) => {
|
|
if (change.type === 'removed') {
|
|
ridesMap.delete(change.doc.id);
|
|
}
|
|
});
|
|
updateCombinedRides();
|
|
},
|
|
(err) => {
|
|
console.warn('[GroupRidesManagement] Organized rides snapshot warning:', err);
|
|
}
|
|
);
|
|
|
|
const qJoined = query(
|
|
collection(firestore, 'group_rides'),
|
|
where('accessUids', 'array-contains', currentUser.uid)
|
|
);
|
|
|
|
unsubJoined = onSnapshot(
|
|
qJoined,
|
|
(snapshot) => {
|
|
snapshot.docs.forEach((docSnap) => {
|
|
ridesMap.set(
|
|
docSnap.id,
|
|
mapFirestoreDocToSummary(docSnap.data(), docSnap.id, currentUser.uid)
|
|
);
|
|
});
|
|
snapshot.docChanges().forEach((change) => {
|
|
if (change.type === 'removed' && ridesMap.get(change.doc.id)?.isOrganizer === false) {
|
|
ridesMap.delete(change.doc.id);
|
|
}
|
|
});
|
|
updateCombinedRides();
|
|
},
|
|
(err) => {
|
|
console.warn('[GroupRidesManagement] Joined rides snapshot warning:', err);
|
|
}
|
|
);
|
|
} catch (e) {
|
|
console.warn('[GroupRidesManagement] Subscription init warning:', e);
|
|
}
|
|
|
|
return () => {
|
|
isSubscribed = false;
|
|
if (unsubOrganized) unsubOrganized();
|
|
if (unsubJoined) unsubJoined();
|
|
};
|
|
}, [currentUser?.uid]);
|
|
|
|
// Handlers for Add, Alter, Remove, Join, Leave
|
|
const handleCreateRide = async (newRide: GroupRideSummary) => {
|
|
const uid = currentUser?.uid;
|
|
const now = new Date();
|
|
const rideId = uid
|
|
? `ride_${now.getTime()}_${uid.substring(0, Math.min(6, uid.length))}`
|
|
: `MS-${Math.floor(1000 + Math.random() * 9000)}`;
|
|
|
|
const rideWithOrganizer: GroupRideSummary = {
|
|
...newRide,
|
|
id: rideId,
|
|
isOrganizer: true,
|
|
status: 'scheduled',
|
|
userStatus: 'joined',
|
|
rideCode: rideId,
|
|
leadHandle: currentUser?.displayName || currentUser?.email?.split('@')[0] || 'MyHandle',
|
|
leadAvatarText: (currentUser?.displayName?.[0] || currentUser?.email?.[0] || 'M').toUpperCase(),
|
|
};
|
|
|
|
// Optimistic local update
|
|
setRides((prev) => [rideWithOrganizer, ...prev]);
|
|
showAlert(`Created new group ride "${newRide.title}"! Ride Code: ${rideId}`, 'success');
|
|
|
|
if (uid && firestore) {
|
|
try {
|
|
const leadDisplayName = currentUser.displayName || currentUser.email?.split('@')[0] || 'Organizer';
|
|
const leadHandle = currentUser.displayName?.toLowerCase().replace(/\s+/g, '_') || currentUser.email?.split('@')[0] || 'rider';
|
|
|
|
let scheduledStartAt = new Date(now.getTime() + 86400000).toISOString();
|
|
let departureAt = new Date(now.getTime() + 86400000 + 1800000).toISOString();
|
|
|
|
if (newRide.scheduledDate) {
|
|
const parsed = new Date(`${newRide.scheduledDate} ${newRide.scheduledTime}`);
|
|
if (!isNaN(parsed.getTime()) && parsed.getTime() > now.getTime() - 86400000) {
|
|
scheduledStartAt = parsed.toISOString();
|
|
departureAt = new Date(parsed.getTime() + 30 * 60000).toISOString();
|
|
}
|
|
}
|
|
|
|
const firestoreRideData = {
|
|
id: rideId,
|
|
organizerUid: uid,
|
|
organizerHandle: leadHandle,
|
|
organizerDisplayName: leadDisplayName,
|
|
title: newRide.title.trim(),
|
|
description: newRide.description?.trim() || '',
|
|
visibility: 'public',
|
|
joinPolicy: newRide.joinPolicy || 'requestToJoin',
|
|
status: 'scheduled',
|
|
scheduledStartAt,
|
|
departureAt,
|
|
participantLimit: Number(newRide.participantLimit) || 12,
|
|
participantCount: 1,
|
|
accessUids: [uid],
|
|
meetingPoint: {
|
|
latitude: 34.5378,
|
|
longitude: -83.9849,
|
|
displayName: newRide.meetingPoint || newRide.region || 'Designated Rally Point',
|
|
address: newRide.region || '',
|
|
locationType: 'meetup',
|
|
notes: '',
|
|
},
|
|
stops: [],
|
|
createdAt: now.toISOString(),
|
|
updatedAt: now.toISOString(),
|
|
paceClassification: newRide.paceClassification || 'Brisk Pace',
|
|
discipline: newRide.discipline || 'Sport / Canyon',
|
|
formationProfile: newRide.formationProfile || 'Staggered Dual Column [B]',
|
|
routeTitle: newRide.routeSnippet || '',
|
|
};
|
|
|
|
const organizerParticipant = {
|
|
userId: uid,
|
|
role: 'organizer',
|
|
status: 'accepted',
|
|
riderHandle: leadHandle,
|
|
riderDisplayName: leadDisplayName,
|
|
createdAt: now.toISOString(),
|
|
updatedAt: now.toISOString(),
|
|
};
|
|
|
|
const batch = writeBatch(firestore);
|
|
batch.set(doc(firestore, 'group_rides', rideId), firestoreRideData);
|
|
batch.set(doc(firestore, 'group_rides', rideId, 'participants', uid), organizerParticipant);
|
|
await batch.commit();
|
|
} catch (err: any) {
|
|
console.error('Failed to persist group ride to Firestore:', err);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSaveEditedRide = async (updatedRide: GroupRideSummary) => {
|
|
// Optimistic local update
|
|
setRides((prev) => prev.map((r) => (r.id === updatedRide.id ? updatedRide : r)));
|
|
showAlert(`Updated parameters for "${updatedRide.title}".`, 'success');
|
|
|
|
if (currentUser?.uid && firestore) {
|
|
try {
|
|
const now = new Date().toISOString();
|
|
await updateDoc(doc(firestore, 'group_rides', updatedRide.id), {
|
|
title: updatedRide.title.trim(),
|
|
description: updatedRide.description?.trim() || '',
|
|
participantLimit: Number(updatedRide.participantLimit) || 12,
|
|
joinPolicy: updatedRide.joinPolicy || 'requestToJoin',
|
|
paceClassification: updatedRide.paceClassification || 'Brisk Pace',
|
|
discipline: updatedRide.discipline || 'Sport / Canyon',
|
|
formationProfile: updatedRide.formationProfile || 'Staggered Dual Column [B]',
|
|
routeTitle: updatedRide.routeSnippet || '',
|
|
updatedAt: now,
|
|
});
|
|
} catch (err: any) {
|
|
console.error('Failed to update group ride in Firestore:', err);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleDeleteRide = async () => {
|
|
if (!deletingRide) return;
|
|
const title = deletingRide.title;
|
|
const rideId = deletingRide.id;
|
|
setDeletingRide(null);
|
|
|
|
// Optimistic local update
|
|
setRides((prev) => prev.filter((r) => r.id !== rideId));
|
|
showAlert(`Deleted group ride "${title}". Pack telemetry cleared.`, 'info');
|
|
|
|
if (currentUser?.uid && firestore) {
|
|
try {
|
|
await deleteDoc(doc(firestore, 'group_rides', rideId));
|
|
} catch (err: any) {
|
|
console.error('Failed to delete group ride in Firestore:', err);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleCancelRide = async (ride: GroupRideSummary) => {
|
|
// Optimistic local update
|
|
setRides((prev) =>
|
|
prev.map((r) => (r.id === ride.id ? { ...r, status: 'canceled' } : r))
|
|
);
|
|
showAlert(`Ride "${ride.title}" status changed to Canceled. Participants notified.`, 'info');
|
|
|
|
if (currentUser?.uid && firestore) {
|
|
try {
|
|
const now = new Date().toISOString();
|
|
await updateDoc(doc(firestore, 'group_rides', ride.id), {
|
|
status: 'canceled',
|
|
canceledAt: now,
|
|
canceledReason: 'Canceled by organizer via MotorSignal Web Console',
|
|
updatedAt: now,
|
|
});
|
|
} catch (err: any) {
|
|
console.error('Failed to cancel group ride in Firestore:', err);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleLeaveRide = () => {
|
|
if (!leavingRide) return;
|
|
const title = leavingRide.title;
|
|
setRides((prev) =>
|
|
prev.map((r) => {
|
|
if (r.id !== leavingRide.id) return r;
|
|
return {
|
|
...r,
|
|
userStatus: 'none',
|
|
participantCount: Math.max(0, r.participantCount - 1),
|
|
};
|
|
})
|
|
);
|
|
setLeavingRide(null);
|
|
showAlert(`Left pack for "${title}". Slot relinquished.`, 'info');
|
|
};
|
|
|
|
const handleRequestSlot = (rideId: string) => {
|
|
setRides((prev) =>
|
|
prev.map((r) => {
|
|
if (r.id !== rideId) return r;
|
|
if (r.participantCount >= r.participantLimit) {
|
|
showAlert(`Added to waitlist for "${r.title}".`, 'info');
|
|
return { ...r, userStatus: 'waitlisted' };
|
|
}
|
|
showAlert(`Joined pack for "${r.title}"! Telemetry stream linked.`, 'success');
|
|
return {
|
|
...r,
|
|
userStatus: 'joined',
|
|
participantCount: r.participantCount + 1,
|
|
};
|
|
})
|
|
);
|
|
};
|
|
|
|
const handleJoinSuccess = (code: string, rideTitle: string) => {
|
|
showAlert(`Synchronized telemetry with "${rideTitle}" (Code: ${code})!`, 'success');
|
|
};
|
|
|
|
const copyRideCode = (code?: string) => {
|
|
if (!code) return;
|
|
navigator.clipboard?.writeText(code);
|
|
showAlert(`Copied ride code "${code}" to clipboard!`, 'success');
|
|
};
|
|
|
|
return (
|
|
<div className="flagship-page text-on-surface bg-surface min-h-screen">
|
|
<div className="flex flex-col w-full">
|
|
{/* Dynamic Atmospheric Glow Background Layers */}
|
|
<div className="relative w-full overflow-hidden">
|
|
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary-container/10 rounded-full blur-[120px] pointer-events-none -z-10"></div>
|
|
<div className="absolute top-64 right-10 w-[500px] h-[500px] bg-secondary-fixed/5 rounded-full blur-[140px] pointer-events-none -z-10"></div>
|
|
|
|
{/* Toast Notification Alert */}
|
|
{activeAlert && (
|
|
<div
|
|
className={`fixed top-20 right-6 z-50 px-5 py-3 rounded-xl shadow-2xl flex items-center gap-3 border backdrop-blur-md transition-all animate-bounce ${
|
|
activeAlert.type === 'success'
|
|
? 'bg-secondary-container/90 text-on-secondary-container border-secondary-fixed/40'
|
|
: activeAlert.type === 'error'
|
|
? 'bg-error-container/90 text-on-error-container border-error/40'
|
|
: 'bg-surface-container-high/90 text-primary border-primary/40'
|
|
}`}
|
|
>
|
|
<span className="material-symbols-outlined text-[20px]">
|
|
{activeAlert.type === 'success' ? 'check_circle' : activeAlert.type === 'error' ? 'error' : 'info'}
|
|
</span>
|
|
<span className="font-code-mono text-sm font-semibold">{activeAlert.message}</span>
|
|
<button
|
|
onClick={() => setActiveAlert(null)}
|
|
className="ml-2 hover:opacity-75"
|
|
title="Dismiss"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px]">close</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Top Command Bar & Showcase Switch */}
|
|
<div className="bg-surface-container-low border-b border-outline-variant/30 py-3 px-4 sm:px-8">
|
|
<div className="max-w-container-max mx-auto flex flex-wrap items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary-fixed opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-secondary-fixed-dim"></span>
|
|
</span>
|
|
<span className="font-mono text-xs font-semibold text-secondary-fixed">
|
|
Rider Console Active
|
|
</span>
|
|
</div>
|
|
<span className="text-outline-variant/40 hidden sm:inline">•</span>
|
|
<span className="text-xs text-on-surface-variant hidden sm:inline font-mono">
|
|
{currentUser?.email ? currentUser.email : 'Rider Account'}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Showcase Mode Link */}
|
|
<div className="flex items-center gap-3">
|
|
{onViewShowcase ? (
|
|
<button
|
|
type="button"
|
|
onClick={onViewShowcase}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface hover:text-primary-container transition cursor-pointer"
|
|
title="View public features showcase"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px] text-primary-container">
|
|
visibility
|
|
</span>
|
|
<span>Feature Showcase</span>
|
|
</button>
|
|
) : (
|
|
<Link
|
|
href="/group-rides/showcase"
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface hover:text-primary-container transition"
|
|
title="View public features showcase"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px] text-primary-container">
|
|
visibility
|
|
</span>
|
|
<span>Feature Showcase</span>
|
|
</Link>
|
|
)}
|
|
<Link
|
|
href="/account"
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface transition"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px] text-secondary">
|
|
person
|
|
</span>
|
|
<span className="hidden sm:inline">Rider Portal</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header & Quick Action Region */}
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop pt-space-xl pb-space-xl">
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pb-space-lg border-b border-outline-variant/20">
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary-container/15 border border-primary-container/30 text-primary-container text-xs font-mono font-semibold mb-2">
|
|
<span className="material-symbols-outlined text-[16px]">groups</span>
|
|
<span>Squad Management & Telemetry Hub</span>
|
|
</div>
|
|
<h1 className="font-headline-xl text-2xl sm:text-3xl lg:text-4xl font-extrabold text-on-surface tracking-tight">
|
|
Group Rides Management
|
|
</h1>
|
|
<p className="font-body-md text-sm sm:text-base text-on-surface-variant max-w-2xl mt-1">
|
|
Schedule new pack formations, modify routes, manage roster slots, and monitor live squadron
|
|
mesh telemetry.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsCreateModalOpen(true)}
|
|
className="px-5 py-3 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-xs sm:text-sm font-bold shadow-lg hover:shadow-[0_0_20px_rgba(0,242,254,0.45)] transition cursor-pointer flex items-center gap-2"
|
|
id="btn-create-ride-mgmt"
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">add_circle</span>
|
|
<span>Create Group Ride</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsJoinModalOpen(true)}
|
|
className="px-4 py-3 rounded-xl bg-surface-container-high hover:bg-surface-container-highest border border-outline-variant/30 text-on-surface font-headline-sm text-xs sm:text-sm font-semibold transition cursor-pointer flex items-center gap-2"
|
|
id="btn-join-code-mgmt"
|
|
>
|
|
<span className="material-symbols-outlined text-primary-fixed-dim text-[18px]">
|
|
qr_code_scanner
|
|
</span>
|
|
<span>Join with Code</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metrics KPI Cards: Active Squads Nearby, Total Miles in Formation, Pack Safety Score, Mesh Node Health */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mt-6">
|
|
<div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
|
|
<span className="font-mono text-xs text-on-surface-variant">Active Squads Nearby</span>
|
|
<div className="text-2xl font-extrabold font-mono text-on-surface mt-1">
|
|
{rides.length} Squads
|
|
</div>
|
|
<span className="text-[11px] font-mono text-secondary-fixed mt-1">
|
|
Within 25 Mile Radius
|
|
</span>
|
|
</div>
|
|
<div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
|
|
<span className="font-mono text-xs text-on-surface-variant">Total Miles in Formation</span>
|
|
<div className="text-2xl font-extrabold font-mono text-primary-container mt-1">
|
|
1,420 mi
|
|
</div>
|
|
<span className="text-[11px] font-mono text-on-surface-variant mt-1">
|
|
Squad Aggregate Logged
|
|
</span>
|
|
</div>
|
|
<div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
|
|
<span className="font-mono text-xs text-on-surface-variant">Pack Safety Score</span>
|
|
<div className="text-2xl font-extrabold font-mono text-secondary-fixed mt-1">
|
|
98.4%
|
|
</div>
|
|
<span className="text-[11px] font-mono text-on-surface-variant mt-1">
|
|
Optimal Paceline Spacing
|
|
</span>
|
|
</div>
|
|
<div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
|
|
<span className="font-mono text-xs text-on-surface-variant">Mesh Node Health</span>
|
|
<div className="text-2xl font-extrabold font-mono text-primary-fixed mt-1">
|
|
6/6 Nodes
|
|
</div>
|
|
<span className="text-[11px] font-mono text-secondary-fixed mt-1">
|
|
12ms Latency • Online
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Main Navigation Tabs */}
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-2xl">
|
|
<div className="flex border-b border-outline-variant/20 gap-2 sm:gap-6 overflow-x-auto">
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('my-rides')}
|
|
className={`pb-3 text-sm font-semibold transition whitespace-nowrap flex items-center gap-2 cursor-pointer border-b-2 ${
|
|
activeTab === 'my-rides'
|
|
? 'border-primary-container text-primary-container font-bold'
|
|
: 'border-transparent text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">sports_motorsports</span>
|
|
<span>My Pack Runs ({myTotalRides.length})</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('discover')}
|
|
className={`pb-3 text-sm font-semibold transition whitespace-nowrap flex items-center gap-2 cursor-pointer border-b-2 ${
|
|
activeTab === 'discover'
|
|
? 'border-primary-container text-primary-container font-bold'
|
|
: 'border-transparent text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">explore</span>
|
|
<span>Explore Community Rides ({rides.length})</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('radar')}
|
|
className={`pb-3 text-sm font-semibold transition whitespace-nowrap flex items-center gap-2 cursor-pointer border-b-2 ${
|
|
activeTab === 'radar'
|
|
? 'border-primary-container text-primary-container font-bold'
|
|
: 'border-transparent text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">radar</span>
|
|
<span>Live Squad Radar Cockpit</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* TAB 1: MY PACK RUNS (VIEW, ALTER, REMOVE, LEAVE) */}
|
|
{activeTab === 'my-rides' && (
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
|
|
{/* Filter Sub-Bar */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
|
|
<div className="flex items-center gap-2 bg-surface-container-low p-1 rounded-xl border border-outline-variant/20">
|
|
<button
|
|
type="button"
|
|
onClick={() => setMyRidesFilter('all')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
myRidesFilter === 'all'
|
|
? 'bg-surface-container-high text-on-surface'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
All My Rides ({myTotalRides.length})
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setMyRidesFilter('organized')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
myRidesFilter === 'organized'
|
|
? 'bg-surface-container-high text-primary-container'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
Organized by Me ({myOrganizedRides.length})
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setMyRidesFilter('joined')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
myRidesFilter === 'joined'
|
|
? 'bg-surface-container-high text-secondary-fixed'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
Joined as Wingman ({myJoinedRides.length})
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search input */}
|
|
<div className="relative max-w-xs w-full">
|
|
<span className="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[18px]">
|
|
search
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="Search my pack runs..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-9 pr-3.5 py-1.5 rounded-xl bg-surface-container border border-outline-variant/30 text-xs text-on-surface focus:outline-none focus:ring-1 focus:ring-primary-container"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rides List */}
|
|
{filteredMyRides.length === 0 ? (
|
|
<div className="text-center py-16 px-4 bg-surface-container-low rounded-2xl border border-outline-variant/20 space-y-4">
|
|
<div className="w-14 h-14 rounded-2xl bg-surface-container-high mx-auto flex items-center justify-center text-primary-container">
|
|
<span className="material-symbols-outlined text-[28px]">sports_motorsports</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-headline-md text-base font-bold text-on-surface">
|
|
No group rides in this view
|
|
</h3>
|
|
<p className="font-body-sm text-xs text-on-surface-variant mt-1 max-w-md mx-auto">
|
|
Schedule a new run to lead as Road Captain, or browse the community directory to join an upcoming pack run.
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-center gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsCreateModalOpen(true)}
|
|
className="px-4 py-2 rounded-xl bg-primary-container text-on-primary-container text-xs font-bold"
|
|
>
|
|
+ Create Group Ride
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('discover')}
|
|
className="px-4 py-2 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface"
|
|
>
|
|
Browse Community Runs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
|
|
{filteredMyRides.map((ride) => {
|
|
const isOrg = Boolean(ride.isOrganizer);
|
|
const isCanceled = ride.status === 'canceled';
|
|
|
|
const statusText = isCanceled ? 'Canceled' : (ride.status || 'Scheduled');
|
|
const isActiveRide = ride.status === 'active' || ride.status === 'underway';
|
|
|
|
return (
|
|
<div
|
|
key={ride.id}
|
|
className={`rounded-2xl border flex flex-col justify-between transition-all shadow-md overflow-hidden ${
|
|
isCanceled
|
|
? 'bg-surface-container-low/60 border-error/30 opacity-75'
|
|
: 'bg-surface-container-low border-outline-variant/30 hover:border-outline-variant/60 hover:shadow-xl'
|
|
}`}
|
|
>
|
|
<div className="p-space-lg">
|
|
{/* Role & Status Header */}
|
|
<div className="flex items-center justify-between gap-2 mb-3">
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
{isOrg ? (
|
|
<span className="px-2 py-0.5 rounded bg-primary-container/20 text-primary-container border border-primary-container/30 text-[10px] font-mono font-bold">
|
|
Road Captain (Organizer)
|
|
</span>
|
|
) : (
|
|
<span className="px-2 py-0.5 rounded bg-secondary-fixed/20 text-secondary-fixed border border-secondary-fixed/30 text-[10px] font-mono font-bold">
|
|
Squad Wingman
|
|
</span>
|
|
)}
|
|
<span
|
|
className={`px-2 py-0.5 rounded text-[10px] font-mono font-bold uppercase border ${
|
|
isCanceled
|
|
? 'bg-error/20 text-error border-error/30'
|
|
: isActiveRide
|
|
? 'bg-secondary-fixed/20 text-secondary-fixed border-secondary-fixed/30 animate-pulse'
|
|
: 'bg-surface-container-high text-on-surface-variant border-outline-variant/30'
|
|
}`}
|
|
>
|
|
{statusText}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Ride Code Button */}
|
|
{ride.rideCode && (
|
|
<button
|
|
type="button"
|
|
onClick={() => copyRideCode(ride.rideCode)}
|
|
className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-container text-[10px] font-mono text-on-surface-variant hover:text-primary-container transition cursor-pointer"
|
|
title="Click to copy ride code"
|
|
>
|
|
<span>{ride.rideCode}</span>
|
|
<span className="material-symbols-outlined text-[12px]">content_copy</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Ride Title & Region */}
|
|
<h3 className="font-headline-md text-lg font-bold text-on-surface mb-1">
|
|
{ride.title}
|
|
</h3>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs font-mono text-on-surface-variant mb-2">
|
|
<span className="px-1.5 py-0.5 rounded bg-surface-container text-primary-container text-[10px] font-semibold border border-outline-variant/30">
|
|
{ride.discipline || 'Sport / Canyon'}
|
|
</span>
|
|
<span className="px-1.5 py-0.5 rounded bg-surface-container text-secondary-fixed text-[10px] font-semibold border border-outline-variant/30">
|
|
{ride.paceClassification}
|
|
</span>
|
|
<span>•</span>
|
|
<span>{ride.distance}</span>
|
|
</div>
|
|
|
|
<p className="font-body-sm text-xs text-on-surface-variant line-clamp-2 mb-3">
|
|
{ride.description}
|
|
</p>
|
|
|
|
{/* Meeting Point, Schedule, Route Snippet */}
|
|
<div className="p-2.5 rounded-xl bg-surface-container/60 border border-outline-variant/20 text-xs font-mono space-y-1 mb-3">
|
|
<div className="flex items-center gap-1.5 text-on-surface">
|
|
<span className="material-symbols-outlined text-[14px] text-primary-container">
|
|
schedule
|
|
</span>
|
|
<span>{ride.scheduledDate} • {ride.scheduledTime}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-on-surface-variant truncate">
|
|
<span className="material-symbols-outlined text-[14px] text-secondary-fixed">
|
|
flag
|
|
</span>
|
|
<span className="truncate">Rally: {ride.meetingPoint}</span>
|
|
</div>
|
|
{ride.routeSnippet && (
|
|
<div className="flex items-center gap-1.5 text-on-surface-variant truncate">
|
|
<span className="material-symbols-outlined text-[14px] text-primary-fixed-dim">
|
|
route
|
|
</span>
|
|
<span className="truncate text-[11px] text-primary-fixed-dim">{ride.routeSnippet}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-1.5 text-on-surface-variant">
|
|
<span className="material-symbols-outlined text-[14px] text-primary-fixed-dim">
|
|
group
|
|
</span>
|
|
<span>
|
|
Pack: {ride.participantCount}/{ride.participantLimit} Riders
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Management Controls Row (VIEW DETAILS, ALTER, REMOVE, CANCEL, LEAVE, RADAR) */}
|
|
<div className="p-space-lg pt-0 border-t border-outline-variant/20 mt-1 flex flex-wrap items-center justify-between gap-2">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedDetailRide(ride)}
|
|
className="px-2.5 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface transition cursor-pointer flex items-center gap-1"
|
|
title="View full ride details"
|
|
>
|
|
<span className="material-symbols-outlined text-[15px]">info</span>
|
|
<span>Details</span>
|
|
</button>
|
|
|
|
{isActiveRide && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('radar')}
|
|
className="px-2.5 py-1.5 rounded-xl bg-secondary-fixed/20 hover:bg-secondary-fixed/30 border border-secondary-fixed/40 text-secondary-fixed text-xs font-semibold transition cursor-pointer flex items-center gap-1"
|
|
title="Open Live Radar feed for this active run"
|
|
>
|
|
<span className="material-symbols-outlined text-[15px]">radar</span>
|
|
<span>Open Live Radar</span>
|
|
</button>
|
|
)}
|
|
|
|
{isOrg && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditingRide(ride)}
|
|
className="px-3 py-1.5 rounded-xl bg-primary-container/15 hover:bg-primary-container/25 text-primary-container border border-primary-container/30 text-xs font-semibold transition cursor-pointer flex items-center gap-1"
|
|
title="Alter ride parameters"
|
|
>
|
|
<span className="material-symbols-outlined text-[15px]">edit</span>
|
|
<span>Alter / Edit</span>
|
|
</button>
|
|
{!isCanceled && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleCancelRide(ride)}
|
|
className="px-2.5 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high text-xs font-semibold text-on-surface-variant hover:text-error transition cursor-pointer"
|
|
title="Cancel ride"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
{isOrg ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setDeletingRide(ride)}
|
|
className="px-2.5 py-1.5 rounded-xl text-xs font-semibold text-error hover:bg-error/10 transition cursor-pointer flex items-center gap-1"
|
|
title="Delete group ride permanently"
|
|
>
|
|
<span className="material-symbols-outlined text-[15px]">delete</span>
|
|
<span>Delete</span>
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setLeavingRide(ride)}
|
|
className="px-3 py-1.5 rounded-xl bg-surface-container hover:bg-error/15 text-error border border-outline-variant/30 hover:border-error/40 text-xs font-semibold transition cursor-pointer flex items-center gap-1"
|
|
title="Leave group ride"
|
|
>
|
|
<span className="material-symbols-outlined text-[15px]">logout</span>
|
|
<span>Leave Pack</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{/* TAB 2: EXPLORE COMMUNITY RUNS (VIEW, SEARCH, REQUEST SLOT) */}
|
|
{activeTab === 'discover' && (
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
|
|
{/* Filter controls */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
|
|
<div className="flex flex-wrap items-center gap-2 bg-surface-container-low p-1 rounded-xl border border-outline-variant/20">
|
|
<button
|
|
type="button"
|
|
onClick={() => setPaceFilter('all')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
paceFilter === 'all'
|
|
? 'bg-surface-container-high text-on-surface font-bold'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
All Runs ({rides.length})
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPaceFilter('Casual')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
paceFilter === 'Casual'
|
|
? 'bg-surface-container-high text-on-surface font-bold'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
Casual
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPaceFilter('Brisk')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
paceFilter === 'Brisk'
|
|
? 'bg-surface-container-high text-on-surface font-bold'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
Brisk
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPaceFilter('Spirited')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
paceFilter === 'Spirited'
|
|
? 'bg-surface-container-high text-on-surface font-bold'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
Spirited
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPaceFilter('Track')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
|
|
paceFilter === 'Track'
|
|
? 'bg-surface-container-high text-on-surface font-bold'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
>
|
|
Track Pace
|
|
</button>
|
|
</div>
|
|
|
|
<div className="relative max-w-sm w-full">
|
|
<span className="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[18px]">
|
|
search
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="Search by title, city, or lead..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-9 pr-3.5 py-1.5 rounded-xl bg-surface-container border border-outline-variant/30 text-xs text-on-surface focus:outline-none focus:ring-1 focus:ring-primary-container"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Directory Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
|
|
{discoverRides.map((ride) => {
|
|
const isJoined = ride.userStatus === 'joined' || ride.isOrganizer;
|
|
const isFull = ride.participantCount >= ride.participantLimit;
|
|
|
|
return (
|
|
<div
|
|
key={ride.id}
|
|
className="bg-surface-container-low rounded-2xl border border-outline-variant/30 overflow-hidden shadow-md hover:shadow-xl transition flex flex-col justify-between"
|
|
>
|
|
<div className="p-space-lg">
|
|
<div className="flex items-center justify-between gap-2 mb-2">
|
|
<span className="font-mono text-[10px] uppercase px-2 py-0.5 rounded bg-surface-container-high text-primary-container border border-outline-variant/30 font-semibold">
|
|
{ride.paceClassification}
|
|
</span>
|
|
<span className="font-mono text-xs text-on-surface-variant">
|
|
{ride.scheduledDate} • {ride.scheduledTime}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="font-headline-md text-base font-bold text-on-surface mb-1">
|
|
{ride.title}
|
|
</h3>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs font-mono text-on-surface-variant mb-2">
|
|
<span className="px-1.5 py-0.5 rounded bg-surface-container text-primary-container text-[10px] font-semibold border border-outline-variant/30">
|
|
{ride.discipline || 'Sport / Canyon'}
|
|
</span>
|
|
<span>•</span>
|
|
<span>{ride.distance}</span>
|
|
</div>
|
|
|
|
<p className="font-body-sm text-xs text-on-surface-variant line-clamp-2 mb-3">
|
|
{ride.description}
|
|
</p>
|
|
|
|
<div className="space-y-1 text-xs font-mono text-on-surface-variant mb-3">
|
|
<div className="flex items-center gap-1.5 truncate">
|
|
<span className="material-symbols-outlined text-[14px] text-secondary-fixed">
|
|
location_on
|
|
</span>
|
|
<span className="truncate">{ride.region}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 truncate">
|
|
<span className="material-symbols-outlined text-[14px] text-primary-container">
|
|
flag
|
|
</span>
|
|
<span className="truncate">Rally: {ride.meetingPoint}</span>
|
|
</div>
|
|
{ride.routeSnippet && (
|
|
<div className="flex items-center gap-1.5 truncate text-[11px] text-primary-fixed-dim">
|
|
<span className="material-symbols-outlined text-[14px]">route</span>
|
|
<span className="truncate">{ride.routeSnippet}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-2 border-t border-outline-variant/20 text-xs font-mono text-on-surface-variant">
|
|
<span>Lead: {ride.leadHandle}</span>
|
|
<span className={isFull ? 'text-error font-bold' : 'text-secondary-fixed'}>
|
|
{ride.participantCount}/{ride.participantLimit} Riders
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-space-lg pt-0 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedDetailRide(ride)}
|
|
className="px-3 py-2 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface transition"
|
|
title="View full ride parameters"
|
|
>
|
|
Details
|
|
</button>
|
|
{isJoined ? (
|
|
<div className="flex-1 py-2 rounded-xl bg-secondary-fixed/20 border border-secondary-fixed/30 text-secondary-fixed text-xs font-bold flex items-center justify-center gap-1.5">
|
|
<span className="material-symbols-outlined text-[16px]">check_circle</span>
|
|
<span>{ride.isOrganizer ? 'Organized by You' : 'Slot Confirmed'}</span>
|
|
</div>
|
|
) : isFull ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRequestSlot(ride.id)}
|
|
className="flex-1 py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface text-xs font-semibold transition"
|
|
>
|
|
Join Waitlist
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRequestSlot(ride.id)}
|
|
className="flex-1 py-2 rounded-xl bg-primary-container hover:bg-primary-fixed text-on-primary-container text-xs font-bold transition flex items-center justify-center gap-1.5 shadow-sm"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px]">how_to_reg</span>
|
|
<span>Request Pack Slot</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* TAB 3: LIVE SQUAD RADAR COCKPIT */}
|
|
{activeTab === 'radar' && (
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
|
|
<div className="mb-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="w-2 h-2 rounded-full bg-secondary-fixed animate-ping" />
|
|
<span className="font-mono text-xs text-primary-container font-semibold">
|
|
Live Squad Telemetry Stream: Connected
|
|
</span>
|
|
</div>
|
|
<h2 className="font-headline-lg text-xl font-bold text-on-surface">
|
|
Live Formation Radar Cockpit
|
|
</h2>
|
|
<p className="font-body-sm text-xs text-on-surface-variant mt-0.5">
|
|
Formation session #CA-84-SW • 6 squad nodes reporting sub-second GNSS multi-band coordinates and lean angles.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="px-3 py-1 rounded-xl bg-surface-container border border-outline-variant/30 text-xs font-mono text-secondary-fixed">
|
|
Mesh Link: 12ms Latency
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<LivePackRadar initialMode="tactical" />
|
|
</section>
|
|
)}
|
|
|
|
{/* Modals */}
|
|
<CreateRideModal
|
|
isOpen={isCreateModalOpen}
|
|
onClose={() => setIsCreateModalOpen(false)}
|
|
onCreateRide={handleCreateRide}
|
|
/>
|
|
|
|
<EditRideModal
|
|
isOpen={Boolean(editingRide)}
|
|
ride={editingRide}
|
|
onClose={() => setEditingRide(null)}
|
|
onSaveRide={handleSaveEditedRide}
|
|
/>
|
|
|
|
<DeleteConfirmModal
|
|
isOpen={Boolean(deletingRide)}
|
|
title="Delete Group Ride"
|
|
message={`Are you sure you want to permanently delete "${deletingRide?.title}"? All telemetry sync channels, participant slots, and ride history will be deleted.`}
|
|
confirmText="Delete Ride"
|
|
cancelText="Keep Ride"
|
|
danger={true}
|
|
onClose={() => setDeletingRide(null)}
|
|
onConfirm={handleDeleteRide}
|
|
/>
|
|
|
|
<DeleteConfirmModal
|
|
isOpen={Boolean(leavingRide)}
|
|
title="Leave Group Ride"
|
|
message={`Are you sure you want to leave the pack for "${leavingRide?.title}"? Your telemetry channel will be disconnected and your slot will be released.`}
|
|
confirmText="Leave Pack"
|
|
cancelText="Stay in Pack"
|
|
danger={false}
|
|
onClose={() => setLeavingRide(null)}
|
|
onConfirm={handleLeaveRide}
|
|
/>
|
|
|
|
<JoinRideModal
|
|
isOpen={isJoinModalOpen}
|
|
onClose={() => setIsJoinModalOpen(false)}
|
|
onJoinSuccess={handleJoinSuccess}
|
|
/>
|
|
|
|
<RideDetailsModal
|
|
isOpen={Boolean(selectedDetailRide)}
|
|
ride={selectedDetailRide}
|
|
onClose={() => setSelectedDetailRide(null)}
|
|
onEdit={(r) => setEditingRide(r)}
|
|
onRequestSlot={handleRequestSlot}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|