Skip to content

Feat/modifications #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jpbuizon merged 13 commits into from
Mar 25, 2026
Merged

Feat/modifications #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
16548ec
fix: error with building
jpbuizon Mar 25, 2026
2218436
feat: optimize pin fetch and add loading for pins
jpbuizon Mar 25, 2026
a1e5641
feat: modifications
jpbuizon Mar 25, 2026
b6a65c8
feat: supabase migration
jpbuizon Mar 25, 2026
872e3b5
Merge remote-tracking branch 'origin/main' into feat/modifications
jpbuizon Mar 25, 2026
e8e40c7
feat: only one type for now
jpbuizon Mar 25, 2026
7ec78cf
feat: modifications frontend
jpbuizon Mar 25, 2026
9d41119
Merge remote-tracking branch 'origin/main' into feat/modifications
jpbuizon Mar 25, 2026
2231af8
feat: user dashboard connections and endpoints
jpbuizon Mar 25, 2026
9a38c3a
feat: approving and rejecting pins and admin data
jpbuizon Mar 25, 2026
5354715
feat: recent pins
jpbuizon Mar 25, 2026
77ba31d
feat: some styling
jpbuizon Mar 25, 2026
4bbfef3
feat: deleting pins on admin
jpbuizon Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,418 changes: 866 additions & 552 deletions apps/web/app/admin/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

1,000 changes: 589 additions & 411 deletions apps/web/app/dashboard/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

194 changes: 109 additions & 85 deletions apps/web/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,30 @@ import { TargetLine } from "@/components/TargetLine";
import { Polyline } from "@/components/Polyline";
import { Polygon } from "@/components/Polygon";
import { Sidebar } from "@/components/Sidebar";
import { JEEPNEY_ROUTES, CAMPUS_ZONES, ZONE_CATEGORIES } from "@/data/map-layers";
import {
JEEPNEY_ROUTES,
CAMPUS_ZONES,
ZONE_CATEGORIES,
} from "@/data/map-layers";
import { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { useTheme } from "@/lib/ThemeContext";
import { trpc } from "@/lib/trpc";
import { useSearchParams } from "next/navigation";
import { useSession } from "@/lib/auth-client";
import { skipToken } from "@tanstack/react-query";

export default function Home() {
const session = useSession();
const params = useSearchParams();

const { data: pins } = trpc.pin.getAll.useQuery(undefined, {
refetchOnWindowFocus: false,
});

const { data: currentUser } = trpc.user.getCurrent.useQuery(
session ? undefined : skipToken,
);

const {
mode,
selectedPinId,
Expand All @@ -42,33 +56,37 @@ export default function Home() {

const [activeRoutes, setActiveRoutes] = useState<string[]>([]);

const handleToggleRoute = (routeId: string) => {
setActiveRoutes((prev) =>
prev.includes(routeId)
? prev.filter(id => id !== routeId)
: [...prev, routeId]
);
};
const handleToggleRoute = (routeId: string) => {
setActiveRoutes((prev) =>
prev.includes(routeId)
? prev.filter((id) => id !== routeId)
: [...prev, routeId],
);
};

const [activeZoneCategories, setActiveZoneCategories] = useState<string[]>([]);
const [activeZoneCategories, setActiveZoneCategories] = useState<string[]>(
[],
);

const handleToggleZoneCategory = (categoryId: string) => {
setActiveZoneCategories((prev) =>
prev.includes(categoryId) ? prev.filter(id => id !== categoryId) : [...prev, categoryId]
);
};
const handleToggleZoneCategory = (categoryId: string) => {
setActiveZoneCategories((prev) =>
prev.includes(categoryId)
? prev.filter((id) => id !== categoryId)
: [...prev, categoryId],
);
};

const [cameraProps, setCameraProps] = useState({
center: { lat: 14.6549, lng: 121.0645 },
zoom: 19,
});
center: { lat: 14.6549, lng: 121.0645 },
zoom: 19,
});

const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
setCameraProps({
center: ev.detail.center,
zoom: ev.detail.zoom,
});
}, []);
const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
setCameraProps({
center: ev.detail.center,
zoom: ev.detail.zoom,
});
}, []);

const mockUserLocation = { lat: 14.6549, lng: 121.0645 };
const mockHeading = 45;
Expand All @@ -90,8 +108,8 @@ export default function Home() {
}, [pins]);

const activePinObj = useMemo(() => {
return pinsParsed.find((p) => p.id === selectedPinId);
}, [pinsParsed, selectedPinId]);
return pinsParsed.find((p) => p.id === selectedPinId);
}, [pinsParsed, selectedPinId]);

useEffect(() => {
if (!isAddingPin) return;
Expand All @@ -106,6 +124,13 @@ export default function Home() {
return () => window.removeEventListener("mousemove", handleMouseMove);
}, [isAddingPin]);

useEffect(() => {
if (params.has("pin")) {
const preselectedPin = params.get("pin") as string;
selectPin(preselectedPin);
}
}, [params, selectPin]);

return (
<APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY || ""}>
<main
Expand All @@ -118,8 +143,8 @@ export default function Home() {
{/* MAP LAYER */}
<GoogleMap
center={cameraProps.center}
zoom={cameraProps.zoom}
onCameraChanged={handleCameraChange}
zoom={cameraProps.zoom}
onCameraChanged={handleCameraChange}
minZoom={17}
mapId={process.env.NEXT_PUBLIC_MAP_ID || "71238adec955b8c6d66f595a"}
colorScheme={theme === "dark" ? ColorScheme.DARK : ColorScheme.LIGHT}
Expand Down Expand Up @@ -160,11 +185,11 @@ export default function Home() {
?.toLowerCase()
.includes(searchQuery.toLowerCase());

const isVisible = !!(
matchesCategory &&
matchesSearch &&
pinData.status !== "DELETED"
);
const isVisible =
!!(matchesCategory && matchesSearch) &&
(currentUser?.userRole === "admin"
? pinData.status !== "DELETED"
: pinData.status === "ACTIVE");

return (
<AdvancedMarker
Expand All @@ -183,64 +208,66 @@ export default function Home() {
);
})}

<AdvancedMarker position={mockUserLocation} zIndex={50}>
<MapCursor heading={mockHeading} />
</AdvancedMarker>
{activePinObj && (
<TargetLine
start={mockUserLocation}
end={{ lat: activePinObj.latitude, lng: activePinObj.longitude }}
color="#00E5FF"
/>
)}
<AdvancedMarker position={mockUserLocation} zIndex={50}>
<MapCursor heading={mockHeading} />
</AdvancedMarker>

{activePinObj && (
<TargetLine
start={mockUserLocation}
end={{ lat: activePinObj.latitude, lng: activePinObj.longitude }}
color="#00E5FF"
/>
)}

{CAMPUS_ZONES.map((zone) => {
if (!activeZoneCategories.includes(zone.categoryId)) return null;

const categoryDef = ZONE_CATEGORIES.find(c => c.id === zone.categoryId);
const zoneColor = categoryDef ? categoryDef.color : "#FFFFFF";

return (
<Polygon
key={zone.id}
paths={zone.paths}
fillColor={zoneColor}
strokeColor={zoneColor}
isPulsating={true}
/>
);
})}
if (!activeZoneCategories.includes(zone.categoryId)) return null;

const categoryDef = ZONE_CATEGORIES.find(
(c) => c.id === zone.categoryId,
);
const zoneColor = categoryDef ? categoryDef.color : "#FFFFFF";

return (
<Polygon
key={zone.id}
paths={zone.paths}
fillColor={zoneColor}
strokeColor={zoneColor}
isPulsating={true}
/>
);
})}

{JEEPNEY_ROUTES.map((route) => {
if (!activeRoutes.includes(route.id)) return null;

return (
<Polyline
key={route.id}
path={route.path}
color={route.color}
weight={10}
animateDirection="forward"
/>
);
})}
if (!activeRoutes.includes(route.id)) return null;

return (
<Polyline
key={route.id}
path={route.path}
color={route.color}
weight={10}
animateDirection="forward"
/>
);
})}
</GoogleMap>

{/* TOP BAR */}
<TopBar
onMenuClick={toggleMenu}
activeFilter={activeFilter}
onFilterChange={setActiveFilter}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
activeRoutes={activeRoutes}
onToggleRoute={handleToggleRoute}
activeZoneCategories={activeZoneCategories}
onToggleZoneCategory={handleToggleZoneCategory}
userLocation={mockUserLocation}
onMenuClick={toggleMenu}
activeFilter={activeFilter}
onFilterChange={setActiveFilter}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
activeRoutes={activeRoutes}
onToggleRoute={handleToggleRoute}
activeZoneCategories={activeZoneCategories}
onToggleZoneCategory={handleToggleZoneCategory}
userLocation={mockUserLocation}
hideControls={!!selectedPinId}
/>
/>

{/* TARGETING CROSSHAIR (Only visible when armed) */}
{isAddingPin && (
Expand Down Expand Up @@ -293,10 +320,7 @@ export default function Home() {
}}
/>

<Sidebar
isOpen={mode === "MENU"}
onClose={toggleMenu}
/>
<Sidebar isOpen={mode === "MENU"} onClose={toggleMenu} />

{pendingPinCoords && (
<AddPinModal
Expand Down
77 changes: 41 additions & 36 deletions apps/web/components/AddPinModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,40 +130,41 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
</div>

<div className="input-group">
<span>PIN TYPES (select all that apply)</span>
<div className="type-selector">
{tagsData?.map((t) => {
const isActive = tags.includes(t.id);
const tagColor = getPinColor(t.title);

return (
<button
key={t.id}
type="button"
className="type-btn"
onClick={() => {
if (isActive) {
formMethods.setValue(
"tags",
tags.filter((tag) => tag !== t.id),
);
} else {
formMethods.setValue("tags", [...tags, t.id]);
}
}}
style={isActive ? {
backgroundColor: `color-mix(in srgb, ${tagColor} 25%, transparent)`,
borderColor: tagColor,
color: tagColor,
boxShadow: `inset 0 0 10px color-mix(in srgb, ${tagColor} 40%, transparent)`
} : {}}
>
{t.title.toUpperCase()}
</button>
);
})}
</div>
</div>
<span>PIN TYPE</span>
<div className="type-selector">
{tagsData?.map((t) => {
const isActive = tags.includes(t.id);
const tagColor = getPinColor(t.title);

return (
<button
key={t.id}
type="button"
className="type-btn"
onClick={() => {
if (isActive) {
formMethods.setValue("tags", []);
} else {
formMethods.setValue("tags", [t.id]);
}
}}
style={
isActive
? {
backgroundColor: `color-mix(in srgb, ${tagColor} 25%, transparent)`,
borderColor: tagColor,
color: tagColor,
boxShadow: `inset 0 0 10px color-mix(in srgb, ${tagColor} 40%, transparent)`,
}
: {}
}
>
{t.title.toUpperCase()}
</button>
);
})}
</div>
</div>

<input
type="file"
Expand All @@ -173,7 +174,11 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
/>

<div className="action-row">
<button type="button" className="tactical-button" onClick={handleCancel}>
<button
type="button"
className="tactical-button"
onClick={handleCancel}
>
CANCEL
</button>
<button type="submit" className="tactical-button-primary save-btn">
Expand Down Expand Up @@ -306,4 +311,4 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
`}</style>
</div>
);
}
}
Loading
Loading