feat: initial commit with seeded database and premium ui changes
This commit is contained in:
Dodo
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { SearchIcon, ZapIcon } from "@/components/ui/phosphor-icons";
|
||||
import { BRAND_COLORS } from "@/lib/map-data";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
import { ContinuousTabs } from "@/components/ui/continuous-tabs";
|
||||
|
||||
interface GasStationDirectoryProps {
|
||||
searchQuery: string;
|
||||
setSearchQuery: (query: string) => void;
|
||||
brandFilter: string;
|
||||
setBrandFilter: (brand: string) => void;
|
||||
evOnlyFilter: boolean;
|
||||
setEvOnlyFilter: (evOnly: boolean) => void;
|
||||
filteredStations: UserMarker[];
|
||||
selectedStationId: string;
|
||||
onSelectStation: (station: UserMarker) => void;
|
||||
}
|
||||
|
||||
export function GasStationDirectory({
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
brandFilter,
|
||||
setBrandFilter,
|
||||
evOnlyFilter,
|
||||
setEvOnlyFilter,
|
||||
filteredStations,
|
||||
selectedStationId,
|
||||
onSelectStation,
|
||||
}: GasStationDirectoryProps) {
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 h-full flex flex-col">
|
||||
<CardHeader className="border-b bg-muted/20 px-6 py-4 lg:h-[73px] lg:py-0 flex flex-col justify-center">
|
||||
<CardTitle className="text-base font-semibold">Direktori Stasiun Aktif</CardTitle>
|
||||
<CardDescription>Menyaring {filteredStations.length} target stasiun regional aktif dari database.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 flex-1">
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 mb-4 items-center">
|
||||
<div className="relative flex-grow w-full">
|
||||
<SearchIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Cari berdasarkan nama lokasi..."
|
||||
className="pl-9 bg-background h-10"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<ContinuousTabs
|
||||
tabs={[
|
||||
{ id: "All", label: "Semua" },
|
||||
{ id: "Pertamina", label: "Pertamina" },
|
||||
{ id: "Shell", label: "Shell" },
|
||||
{ id: "BP", label: "BP" },
|
||||
{ id: "Vivo", label: "Vivo" },
|
||||
]}
|
||||
activeId={brandFilter}
|
||||
onChange={setBrandFilter}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Button
|
||||
variant={evOnlyFilter ? "default" : "outline"}
|
||||
onClick={() => setEvOnlyFilter(!evOnlyFilter)}
|
||||
className="h-8 text-xs gap-1.5"
|
||||
>
|
||||
<ZapIcon className="h-3.5 w-3.5 text-amber-500 fill-amber-500" />
|
||||
Pengisi Daya EV Tersedia
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Grid List */}
|
||||
{filteredStations.length === 0 ? (
|
||||
<div className="py-8 text-center text-xs text-muted-foreground">
|
||||
Tidak ada lokasi yang cocok. Tambah lokasi baru melalui peta stasiun.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2 max-h-[360px] overflow-y-auto pr-1">
|
||||
{filteredStations.map((station) => {
|
||||
const isSelected = selectedStationId === station.id;
|
||||
const brandName = station.type === "gas-pump" ? station.meta?.poi_type : null;
|
||||
const brandColor = BRAND_COLORS[brandName as keyof typeof BRAND_COLORS] || { bg: "#6b7280", text: "#ffffff" };
|
||||
|
||||
return (
|
||||
<div
|
||||
key={station.id}
|
||||
onClick={() => onSelectStation(station)}
|
||||
className={`p-4 border rounded-lg cursor-pointer flex flex-col gap-1.5 transition-all ${
|
||||
isSelected
|
||||
? "border-primary bg-primary/5 font-semibold"
|
||||
: "border-border/60 hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<span className="text-xs text-foreground font-bold">{station.name}</span>
|
||||
{station.type === "gas-pump" && brandName ? (
|
||||
<span
|
||||
className="text-[9px] uppercase font-bold px-2 py-0.5 rounded border shrink-0 ml-2"
|
||||
style={{
|
||||
color: brandColor.bg,
|
||||
borderColor: `${brandColor.bg}33`,
|
||||
backgroundColor: `${brandColor.bg}11`
|
||||
}}
|
||||
>
|
||||
{brandName}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[9px] uppercase font-bold px-2 py-0.5 rounded border shrink-0 ml-2 bg-primary/10 text-primary border-primary/20">
|
||||
{station.type === "charging-station" ? "EV Charger" : "Bengkel"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground font-mono tabular-nums">
|
||||
Koordinat: {station.lat.toFixed(5)}, {station.lng.toFixed(5)}
|
||||
</p>
|
||||
|
||||
{station.type === "gas-pump" && station.meta?.gas_types && station.meta.gas_types.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{station.meta.gas_types.map((gt) => (
|
||||
<span
|
||||
key={gt}
|
||||
className="px-1.5 py-0.5 rounded text-[8px] font-medium bg-muted text-muted-foreground border border-border/40"
|
||||
>
|
||||
{gt}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between items-center text-[10px] mt-1 text-muted-foreground border-t pt-2 mt-auto">
|
||||
{station.type === "gas-pump" ? (
|
||||
<span>Operasional: {station.meta?.notes?.replace("Jam: ", "") || "24 Jam"}</span>
|
||||
) : station.type === "charging-station" ? (
|
||||
<span>Tipe: {station.meta?.poi_type} · {station.meta?.notes}</span>
|
||||
) : (
|
||||
<span>Spesialisasi: {station.meta?.poi_type} · {station.meta?.notes}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ArrowLeftIcon } from "@/components/ui/phosphor-icons";
|
||||
import { ContinuousTabs } from "@/components/ui/continuous-tabs";
|
||||
|
||||
interface GasStationHudProps {
|
||||
fuelPriceDisplay: "ron92" | "ron95" | "diesel";
|
||||
setFuelPriceDisplay: (price: "ron92" | "ron95" | "diesel") => void;
|
||||
brandFilter: string;
|
||||
setBrandFilter: (brand: string) => void;
|
||||
onCloseMap: () => void;
|
||||
}
|
||||
|
||||
export function GasStationHud({
|
||||
fuelPriceDisplay,
|
||||
setFuelPriceDisplay,
|
||||
brandFilter,
|
||||
setBrandFilter,
|
||||
onCloseMap,
|
||||
}: GasStationHudProps) {
|
||||
return (
|
||||
<div className="absolute top-4 left-4 z-[999] flex flex-col gap-2">
|
||||
<div className="flex flex-wrap items-center gap-3 bg-background/90 backdrop-blur-md border border-border/40 p-2.5 rounded-lg shadow-lg max-w-[90vw]">
|
||||
<span className="text-[10px] font-bold text-muted-foreground">TAMPILAN:</span>
|
||||
<ContinuousTabs
|
||||
tabs={[
|
||||
{ id: "ron92", label: "RON 92" },
|
||||
{ id: "ron95", label: "RON 95" },
|
||||
{ id: "diesel", label: "Diesel" },
|
||||
]}
|
||||
activeId={fuelPriceDisplay}
|
||||
onChange={(id) => setFuelPriceDisplay(id as any)}
|
||||
size="sm"
|
||||
/>
|
||||
<Separator orientation="vertical" className="h-5" />
|
||||
<ContinuousTabs
|
||||
tabs={[
|
||||
{ id: "All", label: "Semua" },
|
||||
{ id: "Pertamina", label: "Pertamina" },
|
||||
{ id: "Shell", label: "Shell" },
|
||||
{ id: "BP", label: "BP" },
|
||||
]}
|
||||
activeId={brandFilter}
|
||||
onChange={setBrandFilter}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { MapPinIcon, ZapIcon, ClockIcon, NavigationIcon } from "@/components/ui/phosphor-icons";
|
||||
import { BRAND_COLORS } from "@/lib/map-data";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
|
||||
interface GasStationInspectorProps {
|
||||
selectedStation: UserMarker | null;
|
||||
}
|
||||
|
||||
const BRAND_PRICES = {
|
||||
Pertamina: { ron92: 13200, ron95: 14400, diesel: 14900 },
|
||||
Shell: { ron92: 13850, ron95: 14600, diesel: 15100 },
|
||||
BP: { ron92: 13400, ron95: 14500, diesel: 14800 },
|
||||
Vivo: { ron92: 13400, ron95: 14500, diesel: 14800 }
|
||||
};
|
||||
|
||||
export function GasStationInspector({ selectedStation }: GasStationInspectorProps) {
|
||||
if (!selectedStation) {
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-center items-center h-full p-6 text-center text-muted-foreground/60 border-l border-border/40">
|
||||
<MapPinIcon className="h-8 w-8 text-muted-foreground/30 mb-2" />
|
||||
<p className="text-xs">Pilih stasiun dari direktori atau peta untuk melihat detail.</p>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const isGasPump = selectedStation.type === "gas-pump";
|
||||
const isEvCharger = selectedStation.type === "charging-station";
|
||||
const isWrench = selectedStation.type === "wrench";
|
||||
|
||||
const brandName = isGasPump ? selectedStation.meta?.poi_type : null;
|
||||
const brandColor = BRAND_COLORS[brandName as keyof typeof BRAND_COLORS] || { bg: "#6b7280", text: "#ffffff" };
|
||||
|
||||
// Get price index for gas stations
|
||||
const prices = isGasPump
|
||||
? (BRAND_PRICES[brandName as keyof typeof BRAND_PRICES] || BRAND_PRICES.Pertamina)
|
||||
: null;
|
||||
|
||||
// Extract clean values from meta
|
||||
const cleanNotes = selectedStation.meta?.notes ?? "";
|
||||
const cleanPoiType = selectedStation.meta?.poi_type ?? "";
|
||||
|
||||
return (
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full border-l border-border/40">
|
||||
<CardHeader className="border-b bg-muted/20 px-6 py-4 lg:h-[73px] lg:py-0 flex flex-col justify-center">
|
||||
<CardTitle className="text-base font-semibold flex items-center gap-2">
|
||||
<MapPinIcon className="h-4 w-4 text-primary" />
|
||||
Detail Stasiun
|
||||
</CardTitle>
|
||||
<CardDescription>Metrik stasiun langsung & detail dari database.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 flex flex-col gap-5 flex-1 overflow-y-auto">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-foreground leading-tight">{selectedStation.name}</h3>
|
||||
<span
|
||||
className="inline-block mt-2 text-[9px] uppercase font-bold tracking-wider px-2 py-0.5 rounded border"
|
||||
style={isGasPump && brandName ? {
|
||||
color: brandColor.bg,
|
||||
borderColor: `${brandColor.bg}33`,
|
||||
backgroundColor: `${brandColor.bg}11`
|
||||
} : undefined}
|
||||
>
|
||||
{isGasPump ? `Jaringan ${brandName}` : isEvCharger ? "Pengisi Daya EV" : "Bengkel (Repair Shop)"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Gas Pump: Pricing Cards */}
|
||||
{isGasPump && prices && (
|
||||
<div className="flex flex-col gap-2 border rounded-lg p-3 bg-muted/10">
|
||||
<div className="flex justify-between items-center text-xs py-1 border-b">
|
||||
<span className="font-semibold text-foreground">Harga RON 92</span>
|
||||
<span className="font-bold text-foreground">Rp {prices.ron92.toLocaleString()} / L</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs py-1 border-b">
|
||||
<span className="font-semibold text-primary font-semibold">Harga RON 95</span>
|
||||
<span className="font-bold text-primary">Rp {prices.ron95.toLocaleString()} / L</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs py-1">
|
||||
<span className="font-semibold text-foreground">Harga Diesel</span>
|
||||
<span className="font-bold text-foreground">Rp {prices.diesel.toLocaleString()} / L</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gas Pump: Fuel Types */}
|
||||
{isGasPump && selectedStation.meta?.gas_types && selectedStation.meta.gas_types.length > 0 && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-muted-foreground">Tipe Bahan Bakar</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedStation.meta.gas_types.map((gt) => (
|
||||
<span
|
||||
key={gt}
|
||||
className="px-2 py-0.5 rounded text-[10px] font-semibold bg-primary/10 text-primary border border-primary/20"
|
||||
>
|
||||
{gt}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* EV Charger Details */}
|
||||
{isEvCharger && (
|
||||
<div className="flex flex-col gap-3 border rounded-lg p-3 bg-muted/15">
|
||||
<div className="flex justify-between items-center text-xs py-1 border-b">
|
||||
<span className="font-semibold text-muted-foreground">Tipe Charger</span>
|
||||
<span className="font-bold text-foreground">{cleanPoiType}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs py-1">
|
||||
<span className="font-semibold text-muted-foreground">Status Operasional</span>
|
||||
<span className={`font-bold px-2 py-0.5 rounded text-[10px] uppercase ${
|
||||
cleanNotes.includes("Active") ? "bg-emerald-500/10 text-emerald-600 border border-emerald-500/20" :
|
||||
cleanNotes.includes("Maintenance") ? "bg-amber-500/10 text-amber-600 border border-amber-500/20" :
|
||||
"bg-red-500/10 text-red-600 border border-red-500/20"
|
||||
}`}>
|
||||
{cleanNotes.replace("Status: ", "")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Repair Shop Details */}
|
||||
{isWrench && (
|
||||
<div className="flex flex-col gap-3 border rounded-lg p-3 bg-muted/15">
|
||||
<div className="flex justify-between items-center text-xs py-1 border-b">
|
||||
<span className="font-semibold text-muted-foreground">Spesialisasi</span>
|
||||
<span className="font-bold text-foreground">{cleanPoiType}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs py-1">
|
||||
<span className="font-semibold text-muted-foreground">Status / Jam Buka</span>
|
||||
<span className="font-bold text-foreground">{cleanNotes}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* General: Operating Hours HUD style */}
|
||||
{isGasPump && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-muted-foreground">Jam Operasional</span>
|
||||
<div className="flex items-center gap-3 p-3 border rounded-lg bg-background">
|
||||
<ClockIcon className="h-6 w-6 shrink-0 text-emerald-500" />
|
||||
<div>
|
||||
<p className="text-xs font-bold text-foreground">Buka Layanan</p>
|
||||
<p className="text-[10px] text-muted-foreground">{cleanNotes.replace("Jam: ", "") || "24 Jam"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Coordinates & Route Buttons */}
|
||||
<div className="border-t pt-4 text-xs text-muted-foreground flex flex-col gap-2 mt-auto">
|
||||
<p className="flex items-center gap-1 font-mono">
|
||||
<MapPinIcon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||
Lat: {selectedStation.lat.toFixed(5)}, Lng: {selectedStation.lng.toFixed(5)}
|
||||
</p>
|
||||
<Button className="w-full mt-2 h-9 gap-1.5" variant="outline">
|
||||
<NavigationIcon className="h-4 w-4" /> Dapatkan Arah Rute
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { FuelIcon } from "@/components/ui/phosphor-icons";
|
||||
|
||||
export interface FuelPriceData {
|
||||
region: string;
|
||||
pertalite: number | null;
|
||||
pertamax: number | null;
|
||||
pertamaxGreen: number | null;
|
||||
pertamaxTurbo: number | null;
|
||||
pertamaxPertashop: number | null;
|
||||
pertaminaDex: number | null;
|
||||
dexlite: number | null;
|
||||
bioSolarNonSubsidi: number | null;
|
||||
bioSolarSubsidi: number | null;
|
||||
}
|
||||
|
||||
export interface FuelPricesResponse {
|
||||
succeeded: boolean;
|
||||
lastUpdated: string;
|
||||
gasoline: FuelPriceData[];
|
||||
diesel: FuelPriceData[];
|
||||
}
|
||||
|
||||
interface GasStationStatsCardsProps {
|
||||
fuelPrices: FuelPricesResponse | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export function GasStationStatsCards({ fuelPrices, loading }: GasStationStatsCardsProps) {
|
||||
// Find Kalimantan Barat prices
|
||||
const kalbarGas = fuelPrices?.gasoline?.find(
|
||||
(g) => g.region === "Prov. Kalimantan Barat"
|
||||
);
|
||||
const kalbarDiesel = fuelPrices?.diesel?.find(
|
||||
(d) => d.region === "Prov. Kalimantan Barat"
|
||||
);
|
||||
|
||||
const formatPrice = (p: number | null | undefined) => {
|
||||
if (loading) return "Loading...";
|
||||
if (p == null) return "Rp —";
|
||||
return "Rp " + p.toLocaleString("id-ID");
|
||||
};
|
||||
|
||||
const lastUpdatedText = fuelPrices?.lastUpdated || "Update terbaru";
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Card 1: Pertalite */}
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<div className="flex justify-between items-center pb-1">
|
||||
<span className="text-xs font-medium text-muted-foreground">Pertalite (RON 90)</span>
|
||||
<FuelIcon className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-foreground mt-2">
|
||||
{formatPrice(kalbarGas?.pertalite)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t px-6 py-3 flex items-center justify-between text-[10px] text-muted-foreground mt-auto font-sans">
|
||||
<span>Prov. Kalimantan Barat</span>
|
||||
<span className="text-muted-foreground/80">{lastUpdatedText}</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 2: Pertamax */}
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<div className="flex justify-between items-center pb-1">
|
||||
<span className="text-xs font-medium text-muted-foreground">Pertamax (RON 92)</span>
|
||||
<FuelIcon className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-foreground mt-2">
|
||||
{formatPrice(kalbarGas?.pertamax)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t px-6 py-3 flex items-center justify-between text-[10px] text-muted-foreground mt-auto font-sans">
|
||||
<span>Prov. Kalimantan Barat</span>
|
||||
<span className="text-muted-foreground/80">{lastUpdatedText}</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 3: Dexlite */}
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<div className="flex justify-between items-center pb-1">
|
||||
<span className="text-xs font-medium text-muted-foreground">Dexlite (Diesel)</span>
|
||||
<FuelIcon className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-foreground mt-2">
|
||||
{formatPrice(kalbarDiesel?.dexlite)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t px-6 py-3 flex items-center justify-between text-[10px] text-muted-foreground mt-auto font-sans">
|
||||
<span>Prov. Kalimantan Barat</span>
|
||||
<span className="text-muted-foreground/80">{lastUpdatedText}</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 4: Bio Solar (Subsidi) */}
|
||||
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<div className="flex justify-between items-center pb-1">
|
||||
<span className="text-xs font-medium text-muted-foreground">Bio Solar (Subsidi)</span>
|
||||
<FuelIcon className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-foreground mt-2">
|
||||
{formatPrice(kalbarDiesel?.bioSolarSubsidi)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t px-6 py-3 flex items-center justify-between text-[10px] text-muted-foreground mt-auto font-sans">
|
||||
<span>Prov. Kalimantan Barat</span>
|
||||
<span className="text-muted-foreground/80">{lastUpdatedText}</span>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { DashboardCard } from "@/components/dashboard-card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { SearchIcon, FuelIcon } from "@/components/ui/phosphor-icons";
|
||||
import { ContinuousTabs } from "@/components/ui/continuous-tabs";
|
||||
import type { FuelPricesResponse } from "./gas-station-stats-cards";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
interface PertaminaPriceTableProps {
|
||||
fuelPrices: FuelPricesResponse | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export function PertaminaPriceTable({ fuelPrices, loading }: PertaminaPriceTableProps) {
|
||||
const [activeTab, setActiveTab] = useState<string>("gasoline");
|
||||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||
|
||||
const dataList = useMemo(() => {
|
||||
if (!fuelPrices) return [];
|
||||
return activeTab === "gasoline" ? fuelPrices.gasoline : fuelPrices.diesel;
|
||||
}, [fuelPrices, activeTab]);
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
return dataList.filter((row) =>
|
||||
row.region?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}, [dataList, searchQuery]);
|
||||
|
||||
const formatVal = (val: number | null) => {
|
||||
if (val == null) return <span className="text-muted-foreground/45">—</span>;
|
||||
return <span className="font-semibold text-foreground">Rp {val.toLocaleString("id-ID")}</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardCard className="relative gap-0 h-full flex flex-col">
|
||||
<CardHeader className="border-b border-border/60 bg-muted/10 px-6 py-4 flex flex-col sm:flex-row justify-between sm:items-center gap-4">
|
||||
<div>
|
||||
<CardTitle className="text-base font-semibold flex items-center gap-2">
|
||||
<FuelIcon className="h-5 w-5 text-primary" />
|
||||
Daftar Harga BBM Pertamina Seluruh Indonesia
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Data real-time disinkronkan dari Pertamina Patra Niaga ({fuelPrices?.lastUpdated || "Update terbaru"}).
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-center w-full sm:w-auto">
|
||||
<div className="relative w-full sm:w-64">
|
||||
<SearchIcon className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Cari provinsi..."
|
||||
className="pl-9 bg-background h-9 text-xs"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<ContinuousTabs
|
||||
tabs={[
|
||||
{ id: "gasoline", label: "Bensin (Gasoline)" },
|
||||
{ id: "diesel", label: "Solar (Gasoil)" },
|
||||
]}
|
||||
activeId={activeTab}
|
||||
onChange={setActiveTab}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0 flex-1 flex flex-col">
|
||||
{loading ? (
|
||||
<div className="py-12 text-center text-sm text-muted-foreground">
|
||||
Memuat data harga BBM terbaru...
|
||||
</div>
|
||||
) : filteredData.length === 0 ? (
|
||||
<div className="py-12 text-center text-sm text-muted-foreground">
|
||||
Tidak ada data provinsi yang cocok.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto w-full max-h-[420px] overflow-y-auto">
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/30 sticky top-0 backdrop-blur z-10">
|
||||
<TableRow>
|
||||
<TableHead className="px-6 py-3 min-w-[200px] text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Provinsi / Wilayah</TableHead>
|
||||
{activeTab === "gasoline" ? (
|
||||
<>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Pertalite (90)</TableHead>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Pertamax (92)</TableHead>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Pertamax Green 95</TableHead>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Pertamax Turbo (98)</TableHead>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Pertamax Pertashop</TableHead>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Bio Solar (Subsidi)</TableHead>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Bio Solar (Non-Sub)</TableHead>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Dexlite</TableHead>
|
||||
<TableHead className="px-6 py-3 text-right text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Pertamina Dex</TableHead>
|
||||
</>
|
||||
)}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredData.map((row) => {
|
||||
const isKalbar = row.region === "Prov. Kalimantan Barat";
|
||||
return (
|
||||
<TableRow
|
||||
key={row.region}
|
||||
className={`text-xs transition-colors hover:bg-muted/40 h-12 ${
|
||||
isKalbar
|
||||
? "bg-amber-500/5 hover:bg-amber-500/10 border-l-4 border-l-amber-500 font-semibold"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<TableCell className="px-6 py-3.5 font-medium flex items-center gap-2">
|
||||
{isKalbar && (
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-amber-500 animate-pulse" />
|
||||
)}
|
||||
{row.region}
|
||||
</TableCell>
|
||||
{activeTab === "gasoline" ? (
|
||||
<>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.pertalite)}</TableCell>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.pertamax)}</TableCell>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.pertamaxGreen)}</TableCell>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.pertamaxTurbo)}</TableCell>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.pertamaxPertashop)}</TableCell>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.bioSolarSubsidi)}</TableCell>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.bioSolarNonSubsidi)}</TableCell>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.dexlite)}</TableCell>
|
||||
<TableCell className="px-6 py-3.5 text-right">{formatVal(row.pertaminaDex)}</TableCell>
|
||||
</>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</DashboardCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,571 @@
|
||||
"use client";
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any, react-hooks/set-state-in-effect */
|
||||
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
import { TimedUndoAction } from "@/components/time-undo-action";
|
||||
import {
|
||||
EV_TYPES,
|
||||
EV_STATUSES,
|
||||
GAS_BRANDS,
|
||||
REPAIR_SPECIALITIES,
|
||||
GAS_TYPES_BY_BRAND,
|
||||
} from "@/components/gas-station/station-placement-dialog";
|
||||
|
||||
/* ─── Helpers ───────────────────────────────────── */
|
||||
|
||||
function Field({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-1.5", className)}>
|
||||
<span className="text-[11px] font-semibold text-foreground/60 uppercase tracking-wider">
|
||||
{label}
|
||||
</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChipSelector({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
options: { value: string; label: string; color: string }[];
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{options.map((opt) => {
|
||||
const isSelected = value === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={cn(
|
||||
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all cursor-pointer",
|
||||
isSelected
|
||||
? "border-transparent text-white shadow-sm animate-in fade-in zoom-in-95 duration-150"
|
||||
: "border-border text-foreground/70 hover:bg-muted"
|
||||
)}
|
||||
style={isSelected ? { backgroundColor: opt.color } : undefined}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MultiChipSelector({
|
||||
options,
|
||||
values,
|
||||
onChange,
|
||||
color,
|
||||
}: {
|
||||
options: string[];
|
||||
values: string[];
|
||||
onChange: (v: string[]) => void;
|
||||
color: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{options.map((opt) => {
|
||||
const isSelected = values.includes(opt);
|
||||
return (
|
||||
<button
|
||||
key={opt}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (isSelected) {
|
||||
onChange(values.filter((v) => v !== opt));
|
||||
} else {
|
||||
onChange([...values, opt]);
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all cursor-pointer",
|
||||
isSelected
|
||||
? "border-transparent text-white shadow-sm"
|
||||
: "border-border text-foreground/70 hover:bg-muted"
|
||||
)}
|
||||
style={isSelected ? { backgroundColor: color } : undefined}
|
||||
>
|
||||
{opt}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Edit Dialog ───────────────────────────────── */
|
||||
|
||||
interface StationEditDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
marker: UserMarker | null;
|
||||
onUpdated: (updated: UserMarker) => void;
|
||||
onDeleted: (deleted: UserMarker) => void;
|
||||
}
|
||||
|
||||
export function StationEditDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
marker,
|
||||
onUpdated,
|
||||
onDeleted,
|
||||
}: StationEditDialogProps) {
|
||||
const [category, setCategory] = useState("gas-pump");
|
||||
const [name, setName] = useState("");
|
||||
|
||||
// Form fields for EV Charger
|
||||
const [evType, setEvType] = useState("DC Fast");
|
||||
const [evStatus, setEvStatus] = useState("Active");
|
||||
|
||||
// Form fields for Gas Station
|
||||
const [gasBrand, setGasBrand] = useState("Pertamina");
|
||||
const [gasHours, setGasHours] = useState("24 Jam");
|
||||
const [selectedGasTypes, setSelectedGasTypes] = useState<string[]>([]);
|
||||
|
||||
// Form fields for Repair Shop
|
||||
const [repairSpeciality, setRepairSpeciality] = useState("Umum");
|
||||
const [repairStatus, setRepairStatus] = useState("Buka 08:00 - 17:00");
|
||||
|
||||
// Timed Delete State
|
||||
const DELETE_SECONDS = 5;
|
||||
const TOAST_ID = "station-delete";
|
||||
const [deleteActive, setDeleteActive] = useState(false);
|
||||
const [deleteCountdown, setDeleteCountdown] = useState(DELETE_SECONDS);
|
||||
const pendingDeleteMarker = useRef<UserMarker | null>(null);
|
||||
|
||||
// Fetching and saving state
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:4000";
|
||||
|
||||
// Synchronize when marker opens and load latest from DB
|
||||
useEffect(() => {
|
||||
if (!open || !marker) return;
|
||||
|
||||
setDeleteActive(false);
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
pendingDeleteMarker.current = null;
|
||||
toast.dismiss(TOAST_ID);
|
||||
setError(null);
|
||||
|
||||
const dbId = marker.id.split("-").slice(1).join("-");
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
fetch(`${BACKEND_URL}/gas-station/markers/${dbId}`, { headers })
|
||||
.then((r) => {
|
||||
if (!r.ok) throw new Error("Gagal memuat data dari server");
|
||||
return r.json();
|
||||
})
|
||||
.then((row) => {
|
||||
setCategory(row.marker_category);
|
||||
setName(row.name);
|
||||
if (row.marker_category === "charging-station") {
|
||||
setEvType(row.sub_type ?? "DC Fast");
|
||||
setEvStatus(row.status ?? "Active");
|
||||
} else if (row.marker_category === "gas-pump") {
|
||||
setGasBrand(row.brand ?? "Pertamina");
|
||||
setGasHours(row.operating_hours ?? "24 Jam");
|
||||
setSelectedGasTypes(row.gas_types ?? GAS_TYPES_BY_BRAND[row.brand ?? "Pertamina"] ?? []);
|
||||
} else if (row.marker_category === "wrench") {
|
||||
setRepairSpeciality(row.sub_type ?? "Umum");
|
||||
setRepairStatus(row.status ?? "Buka 08:00 - 17:00");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setError("Gagal memuat data terbaru, menggunakan data lokal.");
|
||||
// Fallback
|
||||
setCategory(marker.type);
|
||||
setName(marker.name);
|
||||
const meta = marker.meta;
|
||||
if (marker.type === "charging-station") {
|
||||
setEvType(meta?.poi_type ?? "DC Fast");
|
||||
setEvStatus(meta?.notes?.replace("Status: ", "") ?? "Active");
|
||||
} else if (marker.type === "gas-pump") {
|
||||
setGasBrand(meta?.poi_type ?? "Pertamina");
|
||||
setGasHours(meta?.notes?.replace("Jam: ", "") ?? "24 Jam");
|
||||
setSelectedGasTypes(meta?.gas_types ?? GAS_TYPES_BY_BRAND[meta?.poi_type ?? "Pertamina"] ?? []);
|
||||
} else if (marker.type === "wrench") {
|
||||
setRepairSpeciality(meta?.poi_type ?? "Umum");
|
||||
setRepairStatus(meta?.notes ?? "Buka 08:00 - 17:00");
|
||||
}
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
}, [open, marker]);
|
||||
|
||||
async function handleDelete() {
|
||||
const target = pendingDeleteMarker.current;
|
||||
if (!target) return;
|
||||
|
||||
const dbId = target.id.split("-").slice(1).join("-");
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
|
||||
|
||||
setIsDeleting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/gas-station/markers/${dbId}`, {
|
||||
method: "DELETE",
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!res.ok && res.status !== 204) {
|
||||
throw new Error("Gagal menghapus lokasi dari server");
|
||||
}
|
||||
|
||||
pendingDeleteMarker.current = null;
|
||||
onDeleted(target);
|
||||
onOpenChange(false);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Terjadi kesalahan saat menghapus");
|
||||
toast.error(err instanceof Error ? err.message : "Gagal menghapus lokasi");
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Countdown tick
|
||||
useEffect(() => {
|
||||
if (!deleteActive) return;
|
||||
const id = setInterval(() => setDeleteCountdown((p) => Math.max(0, p - 1)), 1000);
|
||||
return () => clearInterval(id);
|
||||
}, [deleteActive]);
|
||||
|
||||
// Fire delete when countdown hits 0
|
||||
useEffect(() => {
|
||||
if (!deleteActive || deleteCountdown > 0) return;
|
||||
setDeleteActive(false);
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
toast.dismiss(TOAST_ID);
|
||||
handleDelete();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [deleteActive, deleteCountdown]);
|
||||
|
||||
// Toast showing countdown
|
||||
useEffect(() => {
|
||||
if (!deleteActive || !pendingDeleteMarker.current) {
|
||||
toast.dismiss(TOAST_ID);
|
||||
return;
|
||||
}
|
||||
const mName = pendingDeleteMarker.current.name;
|
||||
const pct = (deleteCountdown / DELETE_SECONDS) * 100;
|
||||
toast.custom(
|
||||
() => (
|
||||
<div className="relative flex items-center gap-3 w-72 rounded-xl border border-border bg-popover px-4 py-3 shadow-lg overflow-hidden font-sans">
|
||||
<div
|
||||
className="absolute bottom-0 left-0 h-[3px] bg-red-500 transition-[width] duration-1000 ease-linear"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold text-foreground truncate">Menghapus lokasi</p>
|
||||
<p className="text-xs text-muted-foreground truncate">"{mName}" — dalam {deleteCountdown} detik</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setDeleteActive(false);
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
pendingDeleteMarker.current = null;
|
||||
toast.dismiss(TOAST_ID);
|
||||
}}
|
||||
className="shrink-0 h-7 rounded-full border border-border bg-background px-3 text-xs font-medium hover:bg-muted transition-colors cursor-pointer"
|
||||
>
|
||||
Batalkan
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
{ id: TOAST_ID, duration: Infinity, position: "bottom-left" },
|
||||
);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [deleteActive, deleteCountdown]);
|
||||
|
||||
function toggleDelete() {
|
||||
setDeleteActive((prev) => {
|
||||
if (!prev) {
|
||||
pendingDeleteMarker.current = marker;
|
||||
setDeleteCountdown(DELETE_SECONDS);
|
||||
} else {
|
||||
pendingDeleteMarker.current = null;
|
||||
toast.dismiss(TOAST_ID);
|
||||
}
|
||||
return !prev;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!marker) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
let finalPoiType = "";
|
||||
let finalNotes = "";
|
||||
|
||||
const brand = category === "gas-pump" ? gasBrand : null;
|
||||
const sub_type = category === "charging-station" ? evType : (category === "wrench" ? repairSpeciality : null);
|
||||
const gas_types = category === "gas-pump" ? selectedGasTypes : null;
|
||||
const operating_hours = category === "gas-pump" ? gasHours : null;
|
||||
const status = category === "charging-station" ? evStatus : (category === "wrench" ? repairStatus : null);
|
||||
|
||||
if (category === "charging-station") {
|
||||
finalPoiType = evType;
|
||||
finalNotes = `Status: ${evStatus}`;
|
||||
} else if (category === "gas-pump") {
|
||||
finalPoiType = gasBrand;
|
||||
finalNotes = `Jam: ${gasHours}`;
|
||||
} else if (category === "wrench") {
|
||||
finalPoiType = repairSpeciality;
|
||||
finalNotes = repairStatus;
|
||||
}
|
||||
|
||||
try {
|
||||
const dbId = marker.id.split("-").slice(1).join("-");
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
};
|
||||
|
||||
const res = await fetch(`${BACKEND_URL}/gas-station/markers/${dbId}`, {
|
||||
method: "PUT",
|
||||
headers,
|
||||
body: JSON.stringify({
|
||||
name: name.trim() || marker.name,
|
||||
marker_category: category,
|
||||
brand,
|
||||
sub_type,
|
||||
gas_types,
|
||||
operating_hours,
|
||||
status,
|
||||
notes: null,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error ?? "Gagal menyimpan perubahan");
|
||||
}
|
||||
|
||||
const saved = await res.json();
|
||||
|
||||
const updated: UserMarker = {
|
||||
...marker,
|
||||
type: category,
|
||||
name: saved.name,
|
||||
meta: {
|
||||
...marker.meta,
|
||||
poi_type: finalPoiType,
|
||||
notes: finalNotes,
|
||||
gas_types: category === "gas-pump" ? selectedGasTypes : undefined,
|
||||
},
|
||||
};
|
||||
|
||||
onUpdated(updated);
|
||||
onOpenChange(false);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Terjadi kesalahan");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
"charging-station": "Edit EV Charger",
|
||||
"gas-pump": "Edit Gas Station",
|
||||
wrench: "Edit Bengkel",
|
||||
};
|
||||
|
||||
const titleLabel = categoryLabels[category] || "Edit Lokasi";
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) onOpenChange(false); }}>
|
||||
<DialogContent showCloseButton={false} className="sm:max-w-lg w-full max-h-[90vh] overflow-y-auto rounded-2xl p-0 gap-0">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col">
|
||||
{/* Header */}
|
||||
<DialogHeader className="px-6 pt-6 pb-4 border-b">
|
||||
<DialogTitle className="text-center text-base font-semibold">{titleLabel}</DialogTitle>
|
||||
<p className="text-center text-xs text-muted-foreground font-mono tabular-nums mt-1">
|
||||
{marker ? `${marker.lat.toFixed(5)}, ${marker.lng.toFixed(5)}` : ""}
|
||||
</p>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-5 flex flex-col gap-5">
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">Memuat data…</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Category Selector */}
|
||||
<Field label="Kategori Lokasi">
|
||||
<select
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="w-full h-10 rounded-lg border border-border bg-muted/50 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
|
||||
>
|
||||
<option value="charging-station">EV Charger</option>
|
||||
<option value="gas-pump">Gas Station</option>
|
||||
<option value="wrench">Repair Shop (Bengkel)</option>
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{/* Location Name */}
|
||||
<Field label="Nama Lokasi">
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Dynamic Fields: EV Charger */}
|
||||
{category === "charging-station" && (
|
||||
<>
|
||||
<Field label="Tipe Charging">
|
||||
<ChipSelector options={EV_TYPES} value={evType} onChange={setEvType} />
|
||||
</Field>
|
||||
<Field label="Status Operasional">
|
||||
<ChipSelector options={EV_STATUSES} value={evStatus} onChange={setEvStatus} />
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Dynamic Fields: Gas Station */}
|
||||
{category === "gas-pump" && (
|
||||
<>
|
||||
<Field label="Brand SPBU">
|
||||
<ChipSelector
|
||||
options={GAS_BRANDS}
|
||||
value={gasBrand}
|
||||
onChange={(brand) => {
|
||||
setGasBrand(brand);
|
||||
setSelectedGasTypes(GAS_TYPES_BY_BRAND[brand] ?? []);
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Tipe Bahan Bakar">
|
||||
<MultiChipSelector
|
||||
options={GAS_TYPES_BY_BRAND[gasBrand] ?? []}
|
||||
values={selectedGasTypes}
|
||||
onChange={setSelectedGasTypes}
|
||||
color={GAS_BRANDS.find((b) => b.value === gasBrand)?.color ?? "#ff3b1f"}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Jam Operasional">
|
||||
<Input
|
||||
value={gasHours}
|
||||
onChange={(e) => setGasHours(e.target.value)}
|
||||
required
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
<div className="flex gap-1.5 mt-1">
|
||||
{["24 Jam", "06:00 - 22:00", "07:00 - 21:00"].map((h) => (
|
||||
<button
|
||||
key={h}
|
||||
type="button"
|
||||
onClick={() => setGasHours(h)}
|
||||
className="text-[10px] bg-muted hover:bg-muted-foreground/20 text-muted-foreground px-2 py-0.5 rounded transition-colors cursor-pointer"
|
||||
>
|
||||
{h}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Dynamic Fields: Repair Shop */}
|
||||
{category === "wrench" && (
|
||||
<>
|
||||
<Field label="Spesialisasi">
|
||||
<ChipSelector options={REPAIR_SPECIALITIES} value={repairSpeciality} onChange={setRepairSpeciality} />
|
||||
</Field>
|
||||
<Field label="Status / Jam Buka">
|
||||
<Input
|
||||
value={repairStatus}
|
||||
onChange={(e) => setRepairStatus(e.target.value)}
|
||||
required
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
<div className="flex gap-1.5 mt-1">
|
||||
{["Buka 24 Jam", "Buka 08:00 - 17:00", "Tutup"].map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setRepairStatus(s)}
|
||||
className="text-[10px] bg-muted hover:bg-muted-foreground/20 text-muted-foreground px-2 py-0.5 rounded transition-colors cursor-pointer"
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-destructive mt-2">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between gap-2 px-6 py-4 border-t">
|
||||
<TimedUndoAction
|
||||
compact
|
||||
deleteLabel="Hapus Lokasi"
|
||||
undoLabel="Batal"
|
||||
isDeleting={deleteActive}
|
||||
countDown={deleteCountdown}
|
||||
onToggle={toggleDelete}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isSubmitting || isDeleting}
|
||||
className="h-9 rounded-full border border-border px-5 text-sm font-medium transition-colors hover:bg-muted disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || isLoading || isDeleting || !name.trim()}
|
||||
className="h-9 rounded-full bg-primary text-primary-foreground px-5 text-sm font-medium transition-colors hover:bg-primary/90 disabled:opacity-40 cursor-pointer"
|
||||
>
|
||||
{isSubmitting ? "Menyimpan…" : "Simpan"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
"use client";
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any, react-hooks/set-state-in-effect */
|
||||
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { UserMarker } from "@/components/leaflet-map";
|
||||
|
||||
/* ─── Selectors Options ────────────────────────── */
|
||||
|
||||
const EV_TYPES = [
|
||||
{ value: "DC Fast", label: "DC Fast", color: "#10b981" },
|
||||
{ value: "Supercharger", label: "Supercharger", color: "#14b8a6" },
|
||||
{ value: "AC Level 2", label: "AC Level 2", color: "#3b82f6" },
|
||||
];
|
||||
|
||||
const EV_STATUSES = [
|
||||
{ value: "Active", label: "Active", color: "#10b981" },
|
||||
{ value: "Maintenance", label: "Maintenance", color: "#eab308" },
|
||||
{ value: "Offline", label: "Offline", color: "#ef4444" },
|
||||
];
|
||||
|
||||
const GAS_BRANDS = [
|
||||
{ value: "Pertamina", label: "Pertamina", color: "#ef4444" },
|
||||
{ value: "Shell", label: "Shell", color: "#eab308" },
|
||||
{ value: "BP", label: "BP", color: "#10b981" },
|
||||
{ value: "Vivo", label: "Vivo", color: "#3b82f6" },
|
||||
];
|
||||
|
||||
const GAS_TYPES_BY_BRAND: Record<string, string[]> = {
|
||||
Pertamina: ["Pertalite", "Pertamax", "Pertamax Green", "Pertamax Turbo", "Dexlite", "Pertamina Dex", "Solar"],
|
||||
Shell: ["Shell Super", "Shell V-Power", "Shell V-Power Nitro+", "Shell V-Power Diesel"],
|
||||
BP: ["BP 92", "BP 95", "BP Ultimate", "BP Ultimate Diesel"],
|
||||
Vivo: ["Revvo 90", "Revvo 92", "Revvo 95"],
|
||||
};
|
||||
|
||||
const REPAIR_SPECIALITIES = [
|
||||
{ value: "Umum", label: "Umum", color: "#6b7280" },
|
||||
{ value: "AC & Kelistrikan",label: "AC & Kelistrikan",color: "#0ea5e9" },
|
||||
{ value: "Mesin", label: "Mesin", color: "#f97316" },
|
||||
{ value: "Ban & Velg", label: "Ban & Velg", color: "#f59e0b" },
|
||||
];
|
||||
|
||||
/* ─── Helpers ───────────────────────────────────── */
|
||||
|
||||
function Field({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-1.5", className)}>
|
||||
<span className="text-[11px] font-semibold text-foreground/60 uppercase tracking-wider">
|
||||
{label}
|
||||
</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChipSelector({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
options: { value: string; label: string; color: string }[];
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{options.map((opt) => {
|
||||
const isSelected = value === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={cn(
|
||||
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all cursor-pointer",
|
||||
isSelected
|
||||
? "border-transparent text-white shadow-sm animate-in fade-in zoom-in-95 duration-150"
|
||||
: "border-border text-foreground/70 hover:bg-muted"
|
||||
)}
|
||||
style={isSelected ? { backgroundColor: opt.color } : undefined}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MultiChipSelector({
|
||||
options,
|
||||
values,
|
||||
onChange,
|
||||
color,
|
||||
}: {
|
||||
options: string[];
|
||||
values: string[];
|
||||
onChange: (v: string[]) => void;
|
||||
color: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{options.map((opt) => {
|
||||
const isSelected = values.includes(opt);
|
||||
return (
|
||||
<button
|
||||
key={opt}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (isSelected) {
|
||||
onChange(values.filter((v) => v !== opt));
|
||||
} else {
|
||||
onChange([...values, opt]);
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all cursor-pointer",
|
||||
isSelected
|
||||
? "border-transparent text-white shadow-sm"
|
||||
: "border-border text-foreground/70 hover:bg-muted"
|
||||
)}
|
||||
style={isSelected ? { backgroundColor: color } : undefined}
|
||||
>
|
||||
{opt}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Placement Dialog ─────────────────────────── */
|
||||
|
||||
interface StationPlacementDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
pendingClick: { lat: number; lng: number } | null;
|
||||
markerType: string | null;
|
||||
onConfirm: (marker: UserMarker) => void;
|
||||
}
|
||||
|
||||
export function StationPlacementDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
pendingClick,
|
||||
markerType,
|
||||
onConfirm,
|
||||
}: StationPlacementDialogProps) {
|
||||
const [category, setCategory] = useState("gas-pump");
|
||||
const [name, setName] = useState("");
|
||||
|
||||
// Form fields for EV Charger
|
||||
const [evType, setEvType] = useState("DC Fast");
|
||||
const [evStatus, setEvStatus] = useState("Active");
|
||||
|
||||
// Form fields for Gas Station
|
||||
const [gasBrand, setGasBrand] = useState("Pertamina");
|
||||
const [gasHours, setGasHours] = useState("24 Jam");
|
||||
const [selectedGasTypes, setSelectedGasTypes] = useState<string[]>([]);
|
||||
|
||||
// Form fields for Repair Shop
|
||||
const [repairSpeciality, setRepairSpeciality] = useState("Umum");
|
||||
const [repairStatus, setRepairStatus] = useState("Buka 08:00 - 17:00");
|
||||
|
||||
// Submission state
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:4000";
|
||||
|
||||
// Synchronize with initial markerType when dialog opens
|
||||
useEffect(() => {
|
||||
if (open && markerType) {
|
||||
setCategory(markerType);
|
||||
setName("");
|
||||
setEvType("DC Fast");
|
||||
setEvStatus("Active");
|
||||
setGasBrand("Pertamina");
|
||||
setGasHours("24 Jam");
|
||||
setSelectedGasTypes(GAS_TYPES_BY_BRAND["Pertamina"]);
|
||||
setRepairSpeciality("Umum");
|
||||
setRepairStatus("Buka 08:00 - 17:00");
|
||||
setError(null);
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [open, markerType]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!pendingClick) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
let finalPoiType = "";
|
||||
let finalNotes = "";
|
||||
|
||||
const brand = category === "gas-pump" ? gasBrand : null;
|
||||
const sub_type = category === "charging-station" ? evType : (category === "wrench" ? repairSpeciality : null);
|
||||
const gas_types = category === "gas-pump" ? selectedGasTypes : null;
|
||||
const operating_hours = category === "gas-pump" ? gasHours : null;
|
||||
const status = category === "charging-station" ? evStatus : (category === "wrench" ? repairStatus : null);
|
||||
|
||||
if (category === "charging-station") {
|
||||
finalPoiType = evType;
|
||||
finalNotes = `Status: ${evStatus}`;
|
||||
} else if (category === "gas-pump") {
|
||||
finalPoiType = gasBrand;
|
||||
finalNotes = `Jam: ${gasHours}`;
|
||||
} else if (category === "wrench") {
|
||||
finalPoiType = repairSpeciality;
|
||||
finalNotes = repairStatus;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const res = await fetch(`${BACKEND_URL}/gas-station/markers`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name.trim() || `New ${category.replace("-", " ")}`,
|
||||
marker_category: category,
|
||||
brand,
|
||||
sub_type,
|
||||
gas_types,
|
||||
operating_hours,
|
||||
status,
|
||||
latitude: pendingClick.lat,
|
||||
longitude: pendingClick.lng,
|
||||
notes: null,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error ?? "Gagal menyimpan data");
|
||||
}
|
||||
|
||||
const saved = await res.json();
|
||||
|
||||
const savedMarker: UserMarker = {
|
||||
id: `gsm-${saved.id}`,
|
||||
lat: pendingClick.lat,
|
||||
lng: pendingClick.lng,
|
||||
type: category,
|
||||
name: saved.name,
|
||||
meta: {
|
||||
poi_type: finalPoiType,
|
||||
notes: finalNotes,
|
||||
gas_types: category === "gas-pump" ? selectedGasTypes : undefined,
|
||||
},
|
||||
};
|
||||
|
||||
onConfirm(savedMarker);
|
||||
handleCancel();
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Terjadi kesalahan");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
setName("");
|
||||
setError(null);
|
||||
setIsSubmitting(false);
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
"charging-station": "EV Charger Baru",
|
||||
"gas-pump": "Gas Station Baru",
|
||||
wrench: "Bengkel Baru",
|
||||
};
|
||||
|
||||
const titleLabel = categoryLabels[category] || "Lokasi Baru";
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) handleCancel(); }}>
|
||||
<DialogContent showCloseButton={false} className="sm:max-w-lg w-full max-h-[90vh] overflow-y-auto rounded-2xl p-0 gap-0">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col">
|
||||
{/* Header */}
|
||||
<DialogHeader className="px-6 pt-6 pb-4 border-b">
|
||||
<DialogTitle className="text-center text-base font-semibold">{titleLabel}</DialogTitle>
|
||||
<p className="text-center text-xs text-muted-foreground font-mono tabular-nums mt-1">
|
||||
{pendingClick ? `${pendingClick.lat.toFixed(5)}, ${pendingClick.lng.toFixed(5)}` : ""}
|
||||
</p>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-5 flex flex-col gap-5">
|
||||
{/* Category Selector */}
|
||||
<Field label="Kategori Lokasi">
|
||||
<select
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="w-full h-10 rounded-lg border border-border bg-muted/50 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
|
||||
>
|
||||
<option value="charging-station">EV Charger</option>
|
||||
<option value="gas-pump">Gas Station</option>
|
||||
<option value="wrench">Repair Shop (Bengkel)</option>
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{/* Location Name */}
|
||||
<Field label="Nama Lokasi">
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={
|
||||
category === "charging-station"
|
||||
? "Contoh: VoltCharge EV Station"
|
||||
: category === "gas-pump"
|
||||
? "Contoh: EcoFuel Station Menteng"
|
||||
: "Contoh: Bengkel Motor Jaya"
|
||||
}
|
||||
required
|
||||
autoFocus
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Dynamic Fields: EV Charger */}
|
||||
{category === "charging-station" && (
|
||||
<>
|
||||
<Field label="Tipe Charging">
|
||||
<ChipSelector options={EV_TYPES} value={evType} onChange={setEvType} />
|
||||
</Field>
|
||||
<Field label="Status Operasional">
|
||||
<ChipSelector options={EV_STATUSES} value={evStatus} onChange={setEvStatus} />
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Dynamic Fields: Gas Station */}
|
||||
{category === "gas-pump" && (
|
||||
<>
|
||||
<Field label="Brand SPBU">
|
||||
<ChipSelector
|
||||
options={GAS_BRANDS}
|
||||
value={gasBrand}
|
||||
onChange={(brand) => {
|
||||
setGasBrand(brand);
|
||||
setSelectedGasTypes(GAS_TYPES_BY_BRAND[brand] ?? []);
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Tipe Bahan Bakar">
|
||||
<MultiChipSelector
|
||||
options={GAS_TYPES_BY_BRAND[gasBrand] ?? []}
|
||||
values={selectedGasTypes}
|
||||
onChange={setSelectedGasTypes}
|
||||
color={GAS_BRANDS.find((b) => b.value === gasBrand)?.color ?? "#ff3b1f"}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Jam Operasional">
|
||||
<Input
|
||||
value={gasHours}
|
||||
onChange={(e) => setGasHours(e.target.value)}
|
||||
placeholder="Contoh: 24 Jam atau 06:00 - 22:00"
|
||||
required
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
<div className="flex gap-1.5 mt-1">
|
||||
{["24 Jam", "06:00 - 22:00", "07:00 - 21:00"].map((h) => (
|
||||
<button
|
||||
key={h}
|
||||
type="button"
|
||||
onClick={() => setGasHours(h)}
|
||||
className="text-[10px] bg-muted hover:bg-muted-foreground/20 text-muted-foreground px-2 py-0.5 rounded transition-colors cursor-pointer"
|
||||
>
|
||||
{h}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Dynamic Fields: Repair Shop */}
|
||||
{category === "wrench" && (
|
||||
<>
|
||||
<Field label="Spesialisasi">
|
||||
<ChipSelector options={REPAIR_SPECIALITIES} value={repairSpeciality} onChange={setRepairSpeciality} />
|
||||
</Field>
|
||||
<Field label="Status / Jam Buka">
|
||||
<Input
|
||||
value={repairStatus}
|
||||
onChange={(e) => setRepairStatus(e.target.value)}
|
||||
placeholder="Contoh: Buka 08:00 - 17:00 atau Tutup"
|
||||
required
|
||||
className="bg-muted/50 border border-border focus-visible:border-ring"
|
||||
/>
|
||||
<div className="flex gap-1.5 mt-1">
|
||||
{["Buka 24 Jam", "Buka 08:00 - 17:00", "Tutup"].map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setRepairStatus(s)}
|
||||
className="text-[10px] bg-muted hover:bg-muted-foreground/20 text-muted-foreground px-2 py-0.5 rounded transition-colors cursor-pointer"
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-destructive mt-2">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end gap-2 px-6 py-4 border-t">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
disabled={isSubmitting}
|
||||
className="h-9 rounded-full border border-border px-5 text-sm font-medium transition-colors hover:bg-muted disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !name.trim()}
|
||||
className="h-9 rounded-full bg-primary text-primary-foreground px-5 text-sm font-medium transition-colors hover:bg-primary/90 disabled:opacity-40 cursor-pointer"
|
||||
>
|
||||
{isSubmitting ? "Menyimpan…" : "Simpan & Pasang"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
export { EV_TYPES, EV_STATUSES, GAS_BRANDS, REPAIR_SPECIALITIES, GAS_TYPES_BY_BRAND };
|
||||
Reference in New Issue
Block a user