Info Chip #43 (#86)

* Added basic embedded map in newly created components folder under EmbeddedMap.tsx. this is using the google maps API, using a personal API key that I would love to change.

* Implemented basic embed map

* created react map

* Created changed to

* Fixed Embedded Map to include the react integration library ( vis.gl/react-google-map). Created example map of Syndey with map pointers to different locations.

* Created Party Demo test page

* First mockup of party list props, and page created to be displayed in party demo

* Added popup text box and color to map

* Removed package and package lock in root directory, updated .env.template

* Created functioning dropdown for party list

* Modified styling to be accurate with the Lo-Fi wireframe

* Changed API keys and added basic sidebar functionality

* Working global sidebar

* Created generic implementation of info chips

* Finished implementation of generic info chip details, added specific chip details for students and locations, and created webpage to display all of these elements. Also cleaned PartyDemo to remove new ticket's contents.

* Minor changes to PartyList before merge with main

* fixed type erros

* Resolved corrections suggested in PR review

* Changes to sidebar functionality and chip information

* Reverted to old non-shadCN sidebar implementation

* chore: update package.json

* chore: reverted whitespace changes to prevent merge conflicts

---------

Co-authored-by: Nicolas Asanov <[email protected]>
Co-authored-by: Nick A <[email protected]>

Author: MasonMines2006

frontend/package-lock.json

@@ -9,7 +9,6 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@vis.gl/react-google-maps": "^1.6.1",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -21,6 +20,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@tanstack/react-query": "^5.90.7",
     "@tanstack/react-table": "^8.21.3",
+    "@vis.gl/react-google-maps": "^1.6.1",
     "axios": "^1.12.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -33,6 +33,8 @@
     "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
     "react-hook-form": "^7.65.0",
+    "react-icons": "^5.5.0",
+    "shadcn": "^3.5.0",
     "tailwind-merge": "^3.3.1",
     "validator": "^13.15.23",
     "zod": "^4.1.12"

frontend/package.json

@@ -0,0 +1,90 @@
+"use client";
+
+import { GenericInfoChip } from "@/components/GenericInfoChip";
+import LocationInfoChipDetails from "@/components/LocationInfoChipDetails";
+import { useSidebar } from "@/components/SidebarContext";
+import StudentInfoChipDetails from "@/components/StudentInfoChipDetails";
+import { Location } from "@/types/api/location";
+import { Student } from "@/types/api/student";
+
+const Page = () => {
+  const { openSidebar } = useSidebar();
+  const { student: defaultStudent, location: defaultLocation } =
+    getTestChipData();
+
+  return (
+    <div className="font-sans min-h-screen flex flex-col items-center justify-center p-8 sm:p-20 max-w-2xl mx-auto">
+      <h1 className="text-3xl font-bold mb-4">Info Chip Demo Page</h1>
+
+      <h2 className="text-2xl font-bold mb-4">Test Sidebar</h2>
+      <button
+        className="bg-gray-200 px-3 py-1 rounded mb-6"
+        onClick={() =>
+          openSidebar(
+            "test-sidebar",
+            "Example",
+            "Example Description",
+            <div>Hello from Sidebar!</div>
+          )
+        }
+      >
+        Open Sidebar
+      </button>
+
+      <h2 className="text-2xl font-bold mb-4">Student Info Chip</h2>
+      <GenericInfoChip
+        chipKey="student-1"
+        shortName={`${defaultStudent.firstName} ${defaultStudent.lastName}`}
+        title="Student Information"
+        description="Detailed information about the selected student"
+        sidebarContent={<StudentInfoChipDetails data={defaultStudent} />}
+      />
+
+      <h2 className="text-2xl font-bold mt-6 mb-4">Location Info Chip</h2>
+      <GenericInfoChip
+        chipKey="location-1"
+        title="Location Information"
+        description="Detailed information about the selected location"
+        shortName={defaultLocation.formattedAddress}
+        sidebarContent={<LocationInfoChipDetails data={defaultLocation} />}
+      />
+    </div>
+  );
+};
+
+export function getTestChipData() {
+  const student: Student = {
+    id: 1,
+    firstName: "Mr",
+    lastName: "Beast",
+    contactPreference: "text",
+    email: "[email protected]",
+    pid: "123456789",
+    lastRegistered: new Date("2023-08-15"),
+    phoneNumber: "555-1234",
+  };
+
+  const location: Location = {
+    id: 1,
+    warningCount: 2,
+    citationCount: 1,
+    hasActiveHold: true,
+    holdExpirationDate: new Date("2025-12-31"),
+    googlePlaceId: "abcd1234",
+    formattedAddress: "123 Main St, Chapel Hill, NC",
+    latitude: 35.9132,
+    longitude: -79.0558,
+    streetNumber: "123",
+    streetName: "Main St",
+    unit: "Apt 4",
+    city: "Chapel Hill",
+    county: "Orange",
+    state: "NC",
+    country: "USA",
+    zipCode: "27514",
+  };
+
+  return { student, location };
+}
+
+export default Page;

frontend/src/app/InfoChipDemo/page.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import GenericSidebar from "@/components/GenericSidebar";
+import { SidebarProvider } from "@/components/SidebarContext";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { SessionProvider } from "next-auth/react";
 
@@ -8,7 +10,12 @@ const queryClient = new QueryClient();
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <SessionProvider>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <SidebarProvider>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+        <GenericSidebar />
+      </SidebarProvider>
     </SessionProvider>
   );
 }

frontend/src/app/providers.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ReactNode } from "react";
+
+interface GenericChipDetailsProps<T> {
+  data: T;
+  title: string;
+  description: string;
+  renderView: (value: T) => ReactNode;
+}
+
+export function GenericChipDetails<T>({
+  data,
+  title,
+  description,
+  renderView,
+}: GenericChipDetailsProps<T>) {
+  return (
+    <div className="space-y-3">
+      <h1 className="text-lg font-bold">{title}</h1>
+      <h2 className="text-lg">{description}</h2>
+      {renderView(data)}
+    </div>
+  );
+}

frontend/src/components/GenericChipDetails.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useSidebar } from "@/components/SidebarContext";
+import { Badge } from "@/components/ui/badge";
+import { ReactNode } from "react";
+
+interface GenericInfoChipProps {
+  chipKey: string;
+  shortName: string;
+  title: string;
+  description: string;
+  sidebarContent: ReactNode;
+}
+
+export function GenericInfoChip({
+  chipKey,
+  shortName,
+  title,
+  description,
+  sidebarContent,
+}: GenericInfoChipProps) {
+  const { openSidebar, selectedKey, closeSidebar } = useSidebar();
+  const isSelected = selectedKey === chipKey;
+
+  const handleOpen = () => {
+    if (isSelected) {
+      closeSidebar();
+      return;
+    } else {
+      openSidebar(chipKey, title, description, sidebarContent);
+    }
+  };
+
+  return (
+    <Badge
+      onClick={handleOpen}
+      className={`cursor-pointer px-3 py-1 ${
+        isSelected ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
+      }`}
+    >
+      {shortName}
+    </Badge>
+  );
+}

frontend/src/components/GenericInfoChip.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { useSidebar } from "@/components/SidebarContext";
+
+function GenericSidebar() {
+  const { isOpen, closeSidebar, content } = useSidebar();
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed top-0 right-0 w-96 h-full bg-white shadow-lg p-4 overflow-auto z-50">
+      <button
+        className="mb-4 px-3 py-1 bg-gray-200 rounded"
+        onClick={closeSidebar}
+      >
+        Close
+      </button>
+      {content}
+    </div>
+  );
+}
+
+export default GenericSidebar;

frontend/src/components/GenericSidebar.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Location } from "@/types/api/location";
+import { GenericChipDetails } from "./GenericChipDetails";
+
+interface LocationInfoChipDetailsProps {
+  data: Location;
+}
+
+function LocationInfoChipDetails({ data }: LocationInfoChipDetailsProps) {
+  return (
+    <GenericChipDetails<Location>
+      data={data}
+      title={"Info about the Location"}
+      description={"View information on the Location you just clicked on"}
+      renderView={(d) => (
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm font-medium">Address</label>
+            <p className="p-2 border rounded">{d.formattedAddress}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Warning Count</label>
+            <p className="p-2 border rounded">{d.warningCount}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Citation Count</label>
+            <p className="p-2 border rounded">{d.citationCount}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Active Hold</label>
+            <p className="p-2 border rounded">
+              {d.hasActiveHold
+                ? "Active: Expires " + d.holdExpirationDate?.toDateString()
+                : "No"}
+            </p>
+          </div>
+        </div>
+      )}
+    />
+  );
+}
+
+export default LocationInfoChipDetails;

frontend/src/components/LocationInfoChipDetails.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Party } from "@/types/api/party";
+import { GenericChipDetails } from "./GenericChipDetails";
+
+interface PartyInfoChipDetailsProps {
+  data: Party;
+}
+
+export function PartyInfoChipDetails({ data }: PartyInfoChipDetailsProps) {
+  return (
+    <GenericChipDetails<Party>
+      data={data}
+      title={"Info about the Party"}
+      description={"View information on the Party you just clicked on"}
+      renderView={(d) => (
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm font-medium">Address</label>
+            <p className="p-2 border rounded">{d.location.formattedAddress}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Date</label>
+            <p className="p-2 border rounded">{d.datetime.toDateString()}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium">First name</label>
+            <p className="p-2 border rounded">{d.contactOne.firstName}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Last Name</label>
+            <p className="p-2 border rounded">{d.contactOne.lastName}</p>
+          </div>
+        </div>
+      )}
+    />
+  );
+}
+
+export default PartyInfoChipDetails;

frontend/src/components/PartyInfoChipDetails.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { createContext, ReactNode, useContext, useState } from "react";
+
+type SidebarContextType = {
+  isOpen: boolean;
+  title: string | null;
+  description: string | null;
+  content: ReactNode | null;
+  selectedKey: string | null;
+  openSidebar: (
+    key: string,
+    title: string,
+    description: string,
+    content: ReactNode
+  ) => void;
+  closeSidebar: () => void;
+};
+interface SidebarProviderProps {
+  children: ReactNode;
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export function SidebarProvider({ children }: SidebarProviderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [title, setTitle] = useState<string | null>(null);
+  const [description, setDescription] = useState<string | null>(null);
+  const [content, setContent] = useState<ReactNode | null>(null);
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+
+  const openSidebar = (
+    key: string,
+    title: string,
+    description: string,
+    content: ReactNode
+  ) => {
+    setContent(content);
+    setTitle(title);
+    setDescription(description);
+    setSelectedKey(key);
+    setIsOpen(true);
+  };
+
+  const closeSidebar = () => {
+    setIsOpen(false);
+    setContent(null);
+    setSelectedKey(null);
+    setTitle(null);
+    setDescription(null);
+  };
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        isOpen,
+        title,
+        description,
+        content,
+        selectedKey,
+        openSidebar,
+        closeSidebar,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context)
+    throw new Error("useSidebar must be used within SidebarProvider");
+  return context;
+};