[V0_FILE]typescriptreact:file="app/customer-map/page.tsx" isMerged="true" import CustomerMap from "@/components/CustomerMap" export default function CustomerMapPage() { return (

) } [V0_FILE]markdown:file="README.md" isEdit="true" isMerged="true" # Customer Map Application This application provides a visual representation of customer locations with filtering and heatmap capabilities. ## Supabase Setup To use this application with Supabase: 1. Create a Supabase project at [https://supabase.com](https://supabase.com) 2. Once your project is created, go to the project dashboard 3. Navigate to Settings > API in the sidebar 4. Copy the `Project URL` and `anon` public API key 5. Create a `.env.local` file in the root of your project and add the following: To fully implement this feature, you would need to: 1. Set up a geocoding service. 2. Implement a function to convert addresses to coordinates when adding or updating customer data. 3. Store the resulting coordinates in your database or cache them for better performance. 4. Update the `CustomerMap` component to use these coordinates for markers and the heatmap. [V0_FILE]typescript:file="utils/customMarker.ts" import L from "leaflet" // Create custom marker icon export const customMarker = new L.Icon({ iconUrl: "/images/marker.svg", iconRetinaUrl: "/images/marker.svg", iconSize: [32, 42], // Size of the icon iconAnchor: [16, 42], // Point of the icon which will correspond to marker's location popupAnchor: [0, -42], // Point from which the popup should open relative to the iconAnchor className: "text-primary", // This will allow us to style the icon with Tailwind }) [V0_FILE]xml:file="public/images/marker.svg" [V0_FILE]css:file="app/globals.css" /* Add these styles to your existing globals.css */ .marker-completed { @apply text-green-500; } .marker-upcoming { @apply text-blue-500; } .marker-pending { @apply text-yellow-500; } [V0_FILE]typescriptreact:file="components/CustomerMap.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useMemo } from "react" import { MapPin, Search, Filter, Plus, Edit } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet" import MarkerClusterGroup from "react-leaflet-cluster" import HeatmapLayer from "react-leaflet-heatmap-layer" import "leaflet/dist/leaflet.css" import "react-leaflet-cluster/lib/assets/MarkerCluster.css" import "react-leaflet-cluster/lib/assets/MarkerCluster.Default.css" import L from "leaflet" import { customMarker } from "@/utils/customMarker" // Updated customer data structure interface Customer { id: string first_name: string last_name: string address: string phone_number: string email: string status: string } // Mock customer data const customers: Customer[] = [ { id: "1", first_name: "John", last_name: "Doe", address: "123 Main St, New York, NY 10001", phone_number: "(212) 555-1234", email: "john.doe@example.com", status: "completed", }, { id: "2", first_name: "Jane", last_name: "Smith", address: "456 Elm St, Brooklyn, NY 11201", phone_number: "(718) 555-5678", email: "jane.smith@example.com", status: "upcoming", }, { id: "3", first_name: "Michael", last_name: "Johnson", address: "789 Oak Ave, Queens, NY 11354", phone_number: "(347) 555-9012", email: "michael.johnson@example.com", status: "pending", }, ] interface CustomerMapProps { userSubscription: "basic" | "premium" } export default function CustomerMap({ userSubscription = "basic" }: CustomerMapProps) { const [isMobile, setIsMobile] = useState(false) const [filterStatus, setFilterStatus] = useState("all") const [mobileFilterOpen, setMobileFilterOpen] = useState(false) const [showHeatmap, setShowHeatmap] = useState(false) const canUseHeatmap = userSubscription === "premium" useEffect(() => { const checkMobile = () => setIsMobile(window.innerWidth < 768) checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) const handleFilterChange = (value: string) => { setFilterStatus(value) setMobileFilterOpen(false) } const filteredCustomers = useMemo(() => { return customers.filter((customer) => filterStatus === "all" || customer.status === filterStatus) }, [filterStatus]) const heatmapPoints = useMemo(() => { return filteredCustomers.map((customer, index) => [40.7128 + index * 0.01, -74.006, 1]) }, [filteredCustomers]) return (

{/* Header Section */}

Customer Map

{!canUseHeatmap && Upgrade to Premium for Heatmap}

{isMobile ? ( Filter by Status

) : ( )}

{/* Main Content */}

{/* Map Section */}

{showHeatmap ? ( canUseHeatmap ? ( m[1]} latitudeExtractor={(m) => m[0]} intensityExtractor={(m) => m[2]} /> ) : (

Premium Feature

Upgrade to Premium to access the Heatmap feature.

) ) : ( {filteredCustomers.map((customer, index) => (

{customer.first_name} {customer.last_name}

{customer.address}

Phone: {customer.phone_number}

Email: {customer.email}

Status: {customer.status}

))} )}

{/* Sidebar/Bottom Panel */}

Upcoming Services {/* Placeholder for upcoming services list */}

List of upcoming services goes here

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This