adserver-dashboard 1.0.0

package/client/src/pages/custom-pois.tsx

@@ -0,0 +1,425 @@
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import { AgGridTable } from '@moving-walls/design-system';
+import type { ColDef } from '@moving-walls/design-system';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@moving-walls/design-system";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import {
+  MapPin,
+  Plus,
+  Search,
+  MoreHorizontal,
+  Upload,
+  Download,
+  Trash2,
+  Pencil,
+  Eye,
+  FileSpreadsheet,
+} from "lucide-react";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+interface CustomPOI {
+  id: string;
+  name: string;
+  category: string;
+  latitude: number;
+  longitude: number;
+  address: string;
+  city: string;
+  country: string;
+  radius: number;
+  status: "active" | "inactive";
+  createdAt: string;
+  createdBy: string;
+}
+
+const mockPOIs: CustomPOI[] = [
+  {
+    id: "poi-1",
+    name: "Central Mall",
+    category: "Shopping",
+    latitude: 3.1390,
+    longitude: 101.6869,
+    address: "123 Central Street",
+    city: "Kuala Lumpur",
+    country: "Malaysia",
+    radius: 500,
+    status: "active" as const,
+    createdAt: "2025-01-15",
+    createdBy: "John Doe",
+  },
+  {
+    id: "poi-2",
+    name: "Tech Park Office",
+    category: "Office",
+    latitude: 1.2897,
+    longitude: 103.8501,
+    address: "456 Innovation Drive",
+    city: "Singapore",
+    country: "Singapore",
+    radius: 300,
+    status: "active" as const,
+    createdAt: "2025-01-10",
+    createdBy: "Jane Smith",
+  },
+  {
+    id: "poi-3",
+    name: "Stadium Complex",
+    category: "Sports",
+    latitude: 13.7563,
+    longitude: 100.5018,
+    address: "789 Sports Avenue",
+    city: "Bangkok",
+    country: "Thailand",
+    radius: 1000,
+    status: "inactive" as const,
+    createdAt: "2025-01-05",
+    createdBy: "Mike Johnson",
+  },
+];
+
+const poiCategories = [
+  "Shopping",
+  "Office",
+  "Sports",
+  "Entertainment",
+  "Restaurant",
+  "Hotel",
+  "Hospital",
+  "Education",
+  "Transit",
+  "Retail",
+  "Custom",
+];
+
+export default function CustomPOIsPage() {
+  usePageTitle("Custom POIs");
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [categoryFilter, setCategoryFilter] = useState("all");
+  const [pois] = useState<CustomPOI[]>(mockPOIs);
+  const [showUploadDialog, setShowUploadDialog] = useState(false);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+
+  const filteredPOIs = pois.filter((poi) => {
+    const matchesSearch =
+      poi.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      poi.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      poi.city.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory =
+      categoryFilter === "all" ||
+      poi.category.toLowerCase() === categoryFilter;
+    return matchesSearch && matchesCategory;
+  });
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-mw-neutral-50 dark:bg-mw-neutral-900 overflow-hidden">
+      <div className="flex-shrink-0 px-6 py-4 border-b border-mw-neutral-200 bg-white dark:bg-mw-neutral-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-xl font-semibold text-mw-neutral-900 dark:text-white">Custom POIs</h1>
+            <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">Manage your custom Points of Interest for geotargeting</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => setShowUploadDialog(true)}>
+              <Upload className="h-4 w-4 mr-2" />
+              Upload POIs
+            </Button>
+            <Button onClick={() => setShowCreateDialog(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create POI
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto px-6 py-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPin className="h-5 w-5" />
+              POI Library
+            </CardTitle>
+            <CardDescription>
+              Your custom Points of Interest that can be used for geotargeting campaigns
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-4 mb-6">
+              <div className="relative flex-1 max-w-md">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="Search POIs by name, category, or city..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+              <Select
+                value={categoryFilter}
+                onChange={(e) => setCategoryFilter(e.target.value)}
+                options={[
+                  { value: "all", label: "All Categories" },
+                  ...poiCategories.map((category) => ({
+                    value: category.toLowerCase(),
+                    label: category,
+                  })),
+                ]}
+                placeholder="Filter by category"
+              >
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Filter by category" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Categories</SelectItem>
+                  {poiCategories.map((category) => (
+                    <SelectItem key={category} value={category.toLowerCase()}>
+                      {category}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div style={{ height: '500px' }}>
+              <AgGridTable
+                rowData={filteredPOIs}
+                columnDefs={[
+                  {
+                    colId: 'name',
+                    headerName: 'Name',
+                    field: 'name',
+                    cellRenderer: (params: { value: string }) => (
+                      <div className="flex items-center gap-2">
+                        <MapPin className="h-4 w-4 text-muted-foreground" />
+                        <span className="font-medium">{params.value}</span>
+                      </div>
+                    ),
+                  },
+                  {
+                    colId: 'category',
+                    headerName: 'Category',
+                    field: 'category',
+                    cellRenderer: (params: { value: string }) => (
+                      <Badge variant="secondary">{params.value}</Badge>
+                    ),
+                  },
+                  {
+                    colId: 'location',
+                    headerName: 'Location',
+                    field: 'city',
+                    cellRenderer: (params: { data: CustomPOI }) => (
+                      <div className="text-sm">
+                        <div>{params.data.city}</div>
+                        <div className="text-muted-foreground text-xs">{params.data.country}</div>
+                      </div>
+                    ),
+                  },
+                  {
+                    colId: 'radius',
+                    headerName: 'Radius',
+                    field: 'radius',
+                    cellRenderer: (params: { value: number }) => (
+                      <span>{params.value}m</span>
+                    ),
+                  },
+                  {
+                    colId: 'status',
+                    headerName: 'Status',
+                    field: 'status',
+                    cellRenderer: (params: { value: string }) => (
+                      <Badge variant={params.value === "active" ? "default" : "secondary"}>
+                        {params.value}
+                      </Badge>
+                    ),
+                  },
+                  {
+                    colId: 'created',
+                    headerName: 'Created',
+                    field: 'createdAt',
+                    cellRenderer: (params: { data: CustomPOI }) => (
+                      <div className="text-sm">
+                        <div>{params.data.createdAt}</div>
+                        <div className="text-muted-foreground text-xs">{params.data.createdBy}</div>
+                      </div>
+                    ),
+                  },
+                  {
+                    colId: 'actions',
+                    headerName: '',
+                    width: 60,
+                    sortable: false,
+                    resizable: false,
+                    cellRenderer: () => (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="sm" className="w-8 h-8 p-0">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>
+                            <Eye className="h-4 w-4 mr-2" />
+                            View on Map
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <Pencil className="h-4 w-4 mr-2" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuItem className="text-destructive">
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    ),
+                  },
+                ] as ColDef<CustomPOI>[]}
+                getRowId={(row) => row.id}
+                emptyMessage="No POIs found matching your search."
+                pagination={false}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Dialog open={showUploadDialog} onOpenChange={setShowUploadDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Upload Custom POIs</DialogTitle>
+            <DialogDescription>
+              Upload a CSV file with your custom Points of Interest. Download the template to see the required format.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <Button variant="outline" className="w-full">
+              <Download className="h-4 w-4 mr-2" />
+              Download Template
+            </Button>
+            <div className="border-2 border-dashed rounded-lg p-6 text-center">
+              <Upload className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
+              <p className="text-sm text-muted-foreground mb-2">
+                Drag and drop your CSV file here, or click to browse
+              </p>
+              <Input type="file" accept=".csv,.xlsx" className="hidden" id="poi-upload" />
+              <label htmlFor="poi-upload" className="cursor-pointer">
+                <Button variant="outline" size="sm">
+                  Choose File
+                </Button>
+              </label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowUploadDialog(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setShowUploadDialog(false)}>
+              Upload
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Custom POI</DialogTitle>
+            <DialogDescription>
+              Add a new Point of Interest to your library
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="poi-name">POI Name</Label>
+                <Input id="poi-name" placeholder="Enter POI name" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="poi-category">Category</Label>
+                <Select
+                  options={poiCategories.map((category) => ({
+                    value: category.toLowerCase(),
+                    label: category,
+                  }))}
+                  placeholder="Select category"
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select category" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {poiCategories.map((category) => (
+                      <SelectItem key={category} value={category.toLowerCase()}>
+                        {category}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="poi-lat">Latitude</Label>
+                <Input id="poi-lat" type="number" step="any" placeholder="e.g., 3.1390" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="poi-lng">Longitude</Label>
+                <Input id="poi-lng" type="number" step="any" placeholder="e.g., 101.6869" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="poi-address">Address</Label>
+              <Input id="poi-address" placeholder="Enter address" />
+            </div>
+            <div className="grid gap-4 sm:grid-cols-3">
+              <div className="space-y-2">
+                <Label htmlFor="poi-city">City</Label>
+                <Input id="poi-city" placeholder="City" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="poi-country">Country</Label>
+                <Input id="poi-country" placeholder="Country" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="poi-radius">Radius (m)</Label>
+                <Input id="poi-radius" type="number" defaultValue={500} />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowCreateDialog(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setShowCreateDialog(false)}>
+              Create POI
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}