TorbatYar/frontend/modules/delivery/components/DeliveryMapPlaceholder.tsx
Mortezakoohjani 7978970783 feat(delivery): add Torbat Driver frontend module with real API wiring.
Ship the delivery platform UI under modules/delivery with thin app routes, BFF proxy, CRUD for phase 10.0-10.1 APIs, and capability-gated future screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-27 12:02:01 +03:30

57 lines
2.5 KiB
TypeScript
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import { MapPin, Navigation, Layers } from "lucide-react";
import { Card, CardContent, Badge } from "@/components/ds";
import { DeliveryBreadcrumbs } from "@/modules/delivery/components/DeliveryBreadcrumbs";
import { createDeliveryPhasePage } from "@/modules/delivery/components/DeliveryPhaseGate";
import { useDeliveryCapabilities } from "@/modules/delivery/hooks/useDeliveryCapabilities";
import { DeliveryPageLoader } from "@/modules/delivery/pages/shared";
import type { PhaseGateConfig } from "@/modules/delivery/types";
function MapSkeleton({ title }: { title: string }) {
return (
<div className="space-y-4">
<DeliveryBreadcrumbs current={title} />
<div className="relative overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--surface-muted)]">
<div className="flex aspect-[16/9] min-h-[320px] flex-col items-center justify-center gap-3 p-6 text-center">
<Layers className="h-12 w-12 text-[var(--delivery-accent)] opacity-60" />
<p className="text-sm font-medium text-secondary">رابط نقشه عملیاتی</p>
<p className="max-w-md text-xs text-[var(--muted)]">
مارکر رانندگان، pickup، delivery، خوشهبندی، ترافیک و پیشنمایش مسیر.
</p>
<div className="flex gap-2">
<Badge tone="info">
<MapPin className="ml-1 inline h-3 w-3" />
Live Markers
</Badge>
<Badge tone="info">
<Navigation className="ml-1 inline h-3 w-3" />
Route Preview
</Badge>
</div>
</div>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_40%,var(--delivery-accent-soft),transparent_50%)]" />
</div>
<Card>
<CardContent className="p-4 text-sm text-[var(--muted)]">
اتصال WebSocket/SSE برای بهروزرسانی لحظهای موقعیت در فاز ۱۰.۷ پیادهسازی میشود.
</CardContent>
</Card>
</div>
);
}
export function createDeliveryMapPage(config: PhaseGateConfig, title?: string) {
const pageTitle = title ?? config.title;
const PhasePage = createDeliveryPhasePage(config, true);
return function DeliveryMapPage() {
const caps = useDeliveryCapabilities();
if (caps.isLoading) return <DeliveryPageLoader />;
if (caps.data?.features?.[config.feature] === true) {
return <MapSkeleton title={pageTitle} />;
}
return <PhasePage />;
};
}