setSidebarOpen(false)}
+ />
+ )}
+
+ {/* Main content */}
+
+ );
+}
diff --git a/app/components/layoutadmin/sidebar.tsx b/app/components/layoutadmin/sidebar.tsx
new file mode 100644
index 0000000..cffb20c
--- /dev/null
+++ b/app/components/layoutadmin/sidebar.tsx
@@ -0,0 +1,587 @@
+import { useState, useMemo } from "react";
+import { Link, useLocation } from "@remix-run/react";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { Separator } from "~/components/ui/separator";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger
+} from "~/components/ui/collapsible";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger
+} from "~/components/ui/tooltip";
+import {
+ LayoutDashboard,
+ Recycle,
+ Users,
+ TrendingUp,
+ FileText,
+ CreditCard,
+ BarChart3,
+ Settings,
+ MessageCircle,
+ MapPin,
+ Package,
+ DollarSign,
+ UserCheck,
+ Building2,
+ Newspaper,
+ HelpCircle,
+ Bell,
+ Shield,
+ ChevronDown,
+ X
+} from "lucide-react";
+import { cn } from "~/lib/utils";
+
+interface SidebarProps {
+ isOpen: boolean;
+ isCollapsed: boolean;
+ isHovered: boolean;
+ isMobile: boolean;
+ onClose: () => void;
+ onMouseEnter: () => void;
+ onMouseLeave: () => void;
+}
+
+interface MenuItem {
+ title: string;
+ icon?: React.ReactNode;
+ href?: string;
+ badge?: string;
+ badgeVariant?: "pro" | "new" | "urgent";
+ children?: MenuItem[];
+}
+
+const menuItems: MenuItem[] = [
+ {
+ title: "Dashboard",
+ icon:
+ {children}
+
+
+ {showText && (
+
+ );
+}
+
+function MenuItemComponent({
+ item,
+ isCollapsed,
+ isHovered
+}: {
+ item: MenuItem;
+ isCollapsed: boolean;
+ isHovered: boolean;
+}) {
+ const location = useLocation();
+ const pathname = location.pathname;
+ const [isOpen, setIsOpen] = useState(false);
+ const hasChildren = item.children && item.children.length > 0;
+ const showText = !isCollapsed || isHovered;
+
+ // Check if any child is active
+ const isChildActive = useMemo(() => {
+ if (!hasChildren) return false;
+ return item.children!.some((child) => child.href === pathname);
+ }, [hasChildren, item.children, pathname]);
+
+ // Auto open if child is active
+ useMemo(() => {
+ if (isChildActive && !isOpen) {
+ setIsOpen(true);
+ }
+ }, [isChildActive, isOpen]);
+
+ // For collapsed state without hover, show tooltip
+ if (isCollapsed && !isHovered) {
+ return (
+ + {title} +
+ )} +-
+ {items.map((item, index) => (
+
{item.title}
+
+ {/* Mobile header */}
+
+
+ {/* Hamburger menu button */}
+
+
+ {/* Mobile logo */}
+
+
+
+
+
+
+
+
+ {/* Desktop search - Commented out for now */}
+ {/*
+
+ {/* Desktop header actions */}
+
+
+
+ {/* Mobile more menu */}
+
+ LOGO
+
+
+
+
+
+
*/}
+
+
+
+
+ ⌘K
+
+
+
+
+
+ {/* Theme toggle */}
+
+
+
+
+
+
+
+
+ {/* User menu */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Notifications
+
+
+
+ Notifications
+
+ 3 new
+
+
+
+
+
+
+
+ + New user registered +
++ 2 minutes ago +
+
+
+ + System update available +
++ 1 hour ago +
+
+
+ + New message received +
++ 3 hours ago +
+
+
+ Fahmi Kurniawan
+
+ pengelola@example.com
+
+
+ {/* Sidebar */}
+ setSidebarOpen(false)}
+ onMouseEnter={() => setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ />
+
+ {/* Mobile overlay */}
+ {sidebarOpen && isMobile && (
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (hasChildren) {
+ return (
+
+
+
+
+
+ {showText && (
+
+ {item.children?.map((child, childIndex) => {
+ const isActive = pathname === child.href;
+ return (
+
+
+ {isActive && (
+
+ )}
+ {child.title}
+
+ {child.badge && (
+
+ {child.badge}
+
+ )}
+
+ );
+ })}
+
+ )}
+
+
+ );
+ }
+
+ // Single menu item (no children)
+ const isActive = pathname === item.href;
+
+ return (
+
+
+
+ );
+}
+
+export function PengelolaSidebar({
+ isOpen,
+ isCollapsed,
+ isHovered,
+ isMobile,
+ onClose,
+ onMouseEnter,
+ onMouseLeave
+}: SidebarProps) {
+ const sidebarWidth = isCollapsed && !isHovered ? "w-20" : "w-72";
+ const showText = !isCollapsed || isHovered;
+
+ return (
+
+ );
+}
diff --git a/app/components/map/leaflet-map.tsx b/app/components/map/leaflet-map.tsx
new file mode 100644
index 0000000..eca32a9
--- /dev/null
+++ b/app/components/map/leaflet-map.tsx
@@ -0,0 +1,192 @@
+import { useEffect, useState } from "react";
+import { MapPin } from "lucide-react";
+
+interface Location {
+ id: string;
+ name: string;
+ type: string;
+ address: string;
+ coordinates: [number, number];
+ status: string;
+ capacity: number;
+ currentLoad: number;
+ lastPickup: string;
+ coverage: string;
+ population: number;
+ schedule: string;
+}
+
+interface MapComponentProps {
+ locations: Location[];
+ onLocationSelect: (location: Location) => void;
+}
+
+export function LeafletMap({ locations, onLocationSelect }: MapComponentProps) {
+ const [mapComponents, setMapComponents] = useState(null);
+ const [leaflet, setLeaflet] = useState(null);
+
+ useEffect(() => {
+ const loadMapComponents = async () => {
+ try {
+ const [{ MapContainer, TileLayer, Marker, Popup }, L] =
+ await Promise.all([import("react-leaflet"), import("leaflet")]);
+
+ delete (L as any).Icon.Default.prototype._getIconUrl;
+ L.Icon.Default.mergeOptions({
+ iconRetinaUrl:
+ "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png",
+ iconUrl:
+ "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png",
+ shadowUrl:
+ "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png"
+ });
+
+ setMapComponents({ MapContainer, TileLayer, Marker, Popup });
+ setLeaflet(L);
+ } catch (error) {
+ console.error("Error loading map components:", error);
+ }
+ };
+
+ loadMapComponents();
+ }, []);
+
+ // Custom icon function
+ const getMarkerIcon = (type: string, status: string) => {
+ if (!leaflet) return undefined;
+
+ const color =
+ status === "active"
+ ? "#10b981"
+ : status === "maintenance"
+ ? "#f59e0b"
+ : "#ef4444";
+
+ return leaflet.divIcon({
+ html: `
+
+ onLocationSelect(location)
+ }}
+ >
+
+
+
+ ))}
+
+ );
+}
diff --git a/app/components/ui/3d-card.tsx b/app/components/ui/3d-card.tsx
new file mode 100644
index 0000000..fe0d9c4
--- /dev/null
+++ b/app/components/ui/3d-card.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { cn } from "~/lib/utils";
+
+import React, {
+ createContext,
+ useState,
+ useContext,
+ useRef,
+ useEffect,
+} from "react";
+
+const MouseEnterContext = createContext<
+ [boolean, React.Dispatch>] | undefined
+>(undefined);
+
+export const CardContainer = ({
+ children,
+ className,
+ containerClassName,
+}: {
+ children?: React.ReactNode;
+ className?: string;
+ containerClassName?: string;
+}) => {
+ const containerRef = useRef(null);
+ const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (!containerRef.current) return;
+ const { left, top, width, height } =
+ containerRef.current.getBoundingClientRect();
+ const x = (e.clientX - left - width / 2) / 25;
+ const y = (e.clientY - top - height / 2) / 25;
+ containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
+ };
+
+ const handleMouseEnter = (e: React.MouseEvent) => {
+ setIsMouseEntered(true);
+ if (!containerRef.current) return;
+ };
+
+ const handleMouseLeave = (e: React.MouseEvent) => {
+ if (!containerRef.current) return;
+ setIsMouseEntered(false);
+ containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
+ };
+ return (
+
+
+ );
+};
+
+export const CardBody = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ return (
+ (null);
+ const [isMouseEntered] = useMouseEnter();
+
+ useEffect(() => {
+ handleAnimations();
+ }, [isMouseEntered]);
+
+ const handleAnimations = () => {
+ if (!ref.current) return;
+ if (isMouseEntered) {
+ ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+ } else {
+ ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+// Create a hook to use the context
+export const useMouseEnter = () => {
+ const context = useContext(MouseEnterContext);
+ if (context === undefined) {
+ throw new Error("useMouseEnter must be used within a MouseEnterProvider");
+ }
+ return context;
+};
diff --git a/app/components/ui/alert-dialog.tsx b/app/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..1b3980b
--- /dev/null
+++ b/app/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "~/lib/utils"
+import { buttonVariants } from "~/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ & VariantProps
+>(({ className, variant, ...props }, ref) => (
+
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/app/components/ui/avatar.tsx b/app/components/ui/avatar.tsx
new file mode 100644
index 0000000..706f177
--- /dev/null
+++ b/app/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "~/lib/utils"
+
+const Avatar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
new file mode 100644
index 0000000..ef511cf
--- /dev/null
+++ b/app/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/app/components/ui/collapsible.tsx b/app/components/ui/collapsible.tsx
new file mode 100644
index 0000000..a23e7a2
--- /dev/null
+++ b/app/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/app/components/ui/dark-mode-toggle.tsx b/app/components/ui/dark-mode-toggle.tsx
new file mode 100644
index 0000000..7b8e8fb
--- /dev/null
+++ b/app/components/ui/dark-mode-toggle.tsx
@@ -0,0 +1,34 @@
+import { Moon, Sun } from "lucide-react";
+import { Theme, useTheme } from "remix-themes";
+
+import { Button } from "./button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from "./dropdown-menu";
+
+export function ModeToggle() {
+ const [, setTheme] = useTheme();
+
+ return (
+
+
+
+
+
+ setTheme(Theme.LIGHT)}>
+ Light
+
+ setTheme(Theme.DARK)}>
+ Dark
+
+
+
+ );
+}
diff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx
new file mode 100644
index 0000000..343a00b
--- /dev/null
+++ b/app/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ svg]:size-4 [&>svg]:shrink-0",
+ inset && "pl-8",
+ className
+ )}
+ {...props}
+ />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+}
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
new file mode 100644
index 0000000..601b3d2
--- /dev/null
+++ b/app/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+const Input = React.forwardRef>(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx
new file mode 100644
index 0000000..dbefb85
--- /dev/null
+++ b/app/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ (null);
+ const [landingDistance, setLandingDistance] = useState(800);
+
+ const { scrollYProgress } = useScroll({
+ target: ref,
+ offset: ["start start", "end start"],
+ });
+
+ // Responsive landing calculation - best practice
+ useEffect(() => {
+ const calculateLanding = () => {
+ if (!landingTargetId) return;
+
+ const target = document.getElementById(landingTargetId);
+ const container = ref.current;
+
+ if (target && container) {
+ const containerRect = container.getBoundingClientRect();
+ const targetRect = target.getBoundingClientRect();
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+ // Calculate absolute positions
+ const containerTop = containerRect.top + scrollTop;
+ const targetTop = targetRect.top + scrollTop;
+
+ // Distance from container to target
+ const distance = targetTop - containerTop + landingOffset;
+
+ // Mobile responsive adjustment - more aggressive
+ const isMobile = window.innerWidth < 1024; // Changed from 768 to 1024
+ const finalDistance = isMobile ? distance * 2.5 : distance; // More reduction for mobile
+
+ setLandingDistance(Math.max(finalDistance, 200));
+ }
+ };
+
+ calculateLanding();
+ const handleResize = () => calculateLanding();
+ const handleLoad = () => calculateLanding();
+
+ window.addEventListener('resize', handleResize);
+ window.addEventListener('load', handleLoad);
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ window.removeEventListener('load', handleLoad);
+ };
+ }, [landingTargetId, landingOffset]);
+
+ // Simple transforms
+ const scaleX = useTransform(scrollYProgress, [0, 0.3], [1.2, 1.5]);
+ const scaleY = useTransform(scrollYProgress, [0, 0.3], [0.6, 1.5]);
+ const translate = useTransform(scrollYProgress, [0, 1], [0, landingDistance]);
+ const rotate = useTransform(scrollYProgress, [0.1, 0.12, 0.3], [-28, -28, 0]);
+ const textTransform = useTransform(scrollYProgress, [0, 0.3], [0, 100]);
+ const textOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);
+
+ return (
+ ;
+ scaleY: MotionValue;
+ rotate: MotionValue;
+ translate: MotionValue;
+ src?: string;
+}) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, value, ...props }, ref) => (
+
+
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/app/components/ui/scroll-area.tsx b/app/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..f66ab4f
--- /dev/null
+++ b/app/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "~/lib/utils"
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
new file mode 100644
index 0000000..2a7b354
--- /dev/null
+++ b/app/components/ui/select.tsx
@@ -0,0 +1,157 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
new file mode 100644
index 0000000..a09f16e
--- /dev/null
+++ b/app/components/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+ HTMLTableCellElement,
+ React.TdHTMLAttributes
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/app/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/app/root.tsx b/app/root.tsx
index 61c8b98..f004345 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,11 +1,21 @@
import {
Links,
+ LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
+ useLoaderData
} from "@remix-run/react";
-import type { LinksFunction } from "@remix-run/node";
+import clsx from "clsx";
+import {
+ PreventFlashOnWrongTheme,
+ ThemeProvider,
+ useTheme
+} from "remix-themes";
+import { themeSessionResolver } from "./sessions.server";
+import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
+import { ProgressProvider } from "@bprogress/remix";
import "./tailwind.css";
@@ -14,32 +24,54 @@ export const links: LinksFunction = () => [
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
- crossOrigin: "anonymous",
+ crossOrigin: "anonymous"
},
{
rel: "stylesheet",
- href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
},
+ {
+ rel: "stylesheet",
+ href: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+ }
];
-export function Layout({ children }: { children: React.ReactNode }) {
+export async function loader({ request }: LoaderFunctionArgs) {
+ const { getTheme } = await themeSessionResolver(request);
+ return {
+ theme: getTheme()
+ };
+}
+
+export default function AppWithProviders() {
+ const data = useLoaderData();
return (
-
+
+
+ );
+}
+
+export function App() {
+ const data = useLoaderData();
+ const [theme] = useTheme();
+ return (
+
+
+
);
}
-
-export default function App() {
- return
+
+
+ {stakeholder.features.map((feature, fIndex) => (
+
+
+
+
+);
+
+const WorkStepCard = ({ step, index }: { step: WorkStep; index: number }) => (
+
+
+);
+
+const BlogCard = ({ blog, index }: { blog: Blog; index: number }) => (
+
+
+
+
+);
+
+const FAQItem = ({ faq, index }: { faq: FAQ; index: number }) => (
+
+
+);
+
+export default function LandingIndex() {
+ return (
+ ();
+ const navigate = useNavigate();
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [isScrolled, setIsScrolled] = useState(false);
+ const [showBackToTop, setShowBackToTop] = useState(false);
+
+ const { isAuthenticated, isRegistrationComplete, userRole } = authData;
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrollTop = window.scrollY;
+
+ setIsScrolled(scrollTop > 20);
+ setShowBackToTop(scrollTop > 300);
+ };
+
+ handleScroll();
+
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth"
+ });
+ };
+
+ const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+
+ const handleNavClick = (href: string) => {
+ setIsMenuOpen(false);
+ if (href.startsWith("#")) {
+ const element = document.querySelector(href);
+ if (element) {
+ element.scrollIntoView({ behavior: "smooth" });
+ }
+ }
+ };
+
+ const getRedirectPath = () => {
+ if (userRole === "administrator") {
+ return "/sys-rijig-adminpanel/dashboard";
+ }
+ return "/pengelola/dashboard";
+ };
+
+ const handleGetStarted = () => {
+ if (isAuthenticated && isRegistrationComplete) {
+ const dashboardPath =
+ userRole === "administrator"
+ ? "/sys-rijig-adminpanel/dashboard"
+ : "/pengelola/dashboard";
+ navigate(dashboardPath);
+ } else if (isAuthenticated && !isRegistrationComplete) {
+ const redirectPath = getRedirectPath();
+ navigate(redirectPath);
+ } else {
+ navigate("/pengelola/register");
+ }
+ };
+
+ const handleAdminLogin = () => {
+ navigate("/sys-rijig-adminpanel/login");
+ };
+
+ const getButtonText = () => {
+ if (isAuthenticated && isRegistrationComplete) {
+ return "Go to Dashboard";
+ }
+ return "Get Started";
+ };
+
+ return (
+ => {
+ // Mock data - dalam implementasi nyata, ambil dari database
+ const dashboardData: DashboardData = {
+ stats: {
+ totalSampahHariIni: 2450, // kg
+ targetHarian: 3000, // kg
+ trukAktif: 8,
+ totalTruk: 12,
+ pegawaiAktif: 24,
+ totalPegawai: 30,
+ wilayahTerlayani: 15,
+ totalWilayah: 18
+ },
+ recentActivities: [
+ {
+ id: 1,
+ type: "pickup",
+ title: "Pengangkutan selesai di Kelurahan Merdeka",
+ time: "10 menit yang lalu",
+ status: "completed",
+ driver: "Budi Santoso",
+ volume: "245 kg"
+ },
+ {
+ id: 2,
+ type: "maintenance",
+ title: "Truk B-002 menjalani maintenance rutin",
+ time: "1 jam yang lalu",
+ status: "in-progress",
+ estimatedComplete: "14:00"
+ },
+ {
+ id: 3,
+ type: "pickup",
+ title: "Pengangkutan dimulai di Komplek Permata",
+ time: "2 jam yang lalu",
+ status: "in-progress",
+ driver: "Andi Wijaya",
+ estimatedVolume: "180 kg"
+ },
+ {
+ id: 4,
+ type: "alert",
+ title: "Jadwal pengangkutan tertunda di Jl. Sudirman",
+ time: "3 jam yang lalu",
+ status: "warning",
+ reason: "Kemacetan lalu lintas"
+ }
+ ],
+ trucks: [
+ {
+ id: "B-001",
+ driver: "Budi Santoso",
+ status: "active",
+ location: "Kelurahan Merdeka",
+ capacity: "85%",
+ lastUpdate: "5 menit yang lalu"
+ },
+ {
+ id: "B-002",
+ driver: "Andi Wijaya",
+ status: "maintenance",
+ location: "Workshop",
+ capacity: "0%",
+ lastUpdate: "1 jam yang lalu"
+ },
+ {
+ id: "B-003",
+ driver: "Sari Dewi",
+ status: "active",
+ location: "Komplek Permata",
+ capacity: "60%",
+ lastUpdate: "15 menit yang lalu"
+ },
+ {
+ id: "B-004",
+ driver: "Dedi Kurniawan",
+ status: "idle",
+ location: "Pool Kendaraan",
+ capacity: "0%",
+ lastUpdate: "2 jam yang lalu"
+ }
+ ],
+ weeklyProgress: [
+ { day: "Sen", target: 3000, actual: 2800 },
+ { day: "Sel", target: 3000, actual: 3200 },
+ { day: "Rab", target: 3000, actual: 2950 },
+ { day: "Kam", target: 3000, actual: 3100 },
+ { day: "Jum", target: 3000, actual: 2750 },
+ { day: "Sab", target: 2500, actual: 2450 },
+ { day: "Min", target: 2000, actual: 0 } // hari ini
+ ]
+ };
+
+ return json(dashboardData);
+};
+
+export default function PengelolaDashboard() {
+ const data = useLoaderData();
+
+ const getStatusBadge = (status: string) => {
+ switch (status) {
+ case "completed":
+ return (
+
+ Selesai
+
+ );
+ case "in-progress":
+ return (
+
+ Berlangsung
+
+ );
+ case "warning":
+ return Peringatan ;
+ case "active":
+ return (
+
+ Aktif
+
+ );
+ case "maintenance":
+ return (
+
+ Maintenance
+
+ );
+ case "idle":
+ return Standby ;
+ default:
+ return {status} ;
+ }
+ };
+
+ const getActivityIcon = (type: string) => {
+ switch (type) {
+ case "pickup":
+ return => {
+ // Mock data - dalam implementasi nyata, ambil dari database
+ const chatData: ChatData = {
+ currentUser: {
+ id: "pengelola-001",
+ name: "Ahmad Pengelola"
+ },
+ contacts: [
+ {
+ id: "pengepul-001",
+ name: "Budi Santoso",
+ role: "Driver Truk B-001",
+ avatar: "",
+ isOnline: true,
+ lastSeen: "Online",
+ lastMessage: "Sampah sudah diangkut semua pak",
+ unreadCount: 2,
+ location: "Kelurahan Merdeka",
+ phone: "081234567890"
+ },
+ {
+ id: "pengepul-002",
+ name: "Sari Dewi",
+ role: "Driver Truk B-003",
+ avatar: "",
+ isOnline: false,
+ lastSeen: "15 menit yang lalu",
+ lastMessage: "Baik pak, segera ke lokasi",
+ unreadCount: 0,
+ location: "Komplek Permata",
+ phone: "081234567891"
+ },
+ {
+ id: "pengepul-003",
+ name: "Dedi Kurniawan",
+ role: "Driver Truk B-004",
+ avatar: "",
+ isOnline: true,
+ lastSeen: "Online",
+ lastMessage: "Truk sedang dalam perjalanan",
+ unreadCount: 1,
+ location: "Jl. Sudirman",
+ phone: "081234567892"
+ },
+ {
+ id: "pengepul-004",
+ name: "Andi Wijaya",
+ role: "Driver Truk B-002",
+ avatar: "",
+ isOnline: false,
+ lastSeen: "2 jam yang lalu",
+ lastMessage: "Maintenance selesai besok pagi",
+ unreadCount: 0,
+ location: "Workshop",
+ phone: "081234567893"
+ },
+ {
+ id: "pengepul-005",
+ name: "Rini Astuti",
+ role: "Supervisor Lapangan",
+ avatar: "",
+ isOnline: true,
+ lastSeen: "Online",
+ lastMessage: "Laporan harian sudah dikirim",
+ unreadCount: 0,
+ location: "Pool Kendaraan",
+ phone: "081234567894"
+ }
+ ],
+ messages: {
+ "pengepul-001": [
+ {
+ id: "msg-001",
+ senderId: "pengepul-001",
+ senderName: "Budi Santoso",
+ content:
+ "Selamat pagi pak, saya sudah sampai di lokasi Kelurahan Merdeka",
+ timestamp: "08:00",
+ type: "text",
+ status: "read"
+ },
+ {
+ id: "msg-002",
+ senderId: "pengelola-001",
+ senderName: "Ahmad Pengelola",
+ content: "Pagi Bud, bagus. Berapa estimasi waktu pengangkutan?",
+ timestamp: "08:02",
+ type: "text",
+ status: "read"
+ },
+ {
+ id: "msg-003",
+ senderId: "pengepul-001",
+ senderName: "Budi Santoso",
+ content: "Sekitar 2 jam pak, volume sampah cukup banyak hari ini",
+ timestamp: "08:05",
+ type: "text",
+ status: "read"
+ },
+ {
+ id: "msg-004",
+ senderId: "pengepul-001",
+ senderName: "Budi Santoso",
+ content: "Sampah sudah diangkut semua pak",
+ timestamp: "10:30",
+ type: "text",
+ status: "delivered"
+ },
+ {
+ id: "msg-005",
+ senderId: "pengepul-001",
+ senderName: "Budi Santoso",
+ content: "Total 245 kg, lanjut ke lokasi berikutnya?",
+ timestamp: "10:31",
+ type: "text",
+ status: "sent"
+ }
+ ],
+ "pengepul-002": [
+ {
+ id: "msg-006",
+ senderId: "pengelola-001",
+ senderName: "Ahmad Pengelola",
+ content: "Sari, bisa ke Komplek Permata sekarang?",
+ timestamp: "09:15",
+ type: "text",
+ status: "read"
+ },
+ {
+ id: "msg-007",
+ senderId: "pengepul-002",
+ senderName: "Sari Dewi",
+ content: "Baik pak, segera ke lokasi",
+ timestamp: "09:17",
+ type: "text",
+ status: "read"
+ }
+ ],
+ "pengepul-003": [
+ {
+ id: "msg-008",
+ senderId: "pengepul-003",
+ senderName: "Dedi Kurniawan",
+ content:
+ "Pak, ada kemacetan di Jl. Sudirman, mungkin terlambat 30 menit",
+ timestamp: "11:00",
+ type: "text",
+ status: "read"
+ },
+ {
+ id: "msg-009",
+ senderId: "pengelola-001",
+ senderName: "Ahmad Pengelola",
+ content: "OK Ded, hati-hati di jalan. Update terus ya",
+ timestamp: "11:05",
+ type: "text",
+ status: "read"
+ },
+ {
+ id: "msg-010",
+ senderId: "pengepul-003",
+ senderName: "Dedi Kurniawan",
+ content: "Truk sedang dalam perjalanan",
+ timestamp: "11:45",
+ type: "text",
+ status: "delivered"
+ }
+ ]
+ }
+ };
+
+ return json(chatData);
+};
+
+export default function ChatPengepul() {
+ const data = useLoaderData();
+ const [selectedContact, setSelectedContact] = useState(
+ data.contacts[0]
+ );
+ const [messageInput, setMessageInput] = useState("");
+ const [searchQuery, setSearchQuery] = useState("");
+ const scrollAreaRef = useRef(null);
+
+ // Filter contacts berdasarkan search
+ const filteredContacts = data.contacts.filter(
+ (contact) =>
+ contact.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ contact.role.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ // Get messages untuk contact yang dipilih
+ const currentMessages = selectedContact
+ ? data.messages[selectedContact.id] || []
+ : [];
+
+ // Auto scroll ke pesan terbaru
+ useEffect(() => {
+ if (scrollAreaRef.current) {
+ scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
+ }
+ }, [currentMessages]);
+
+ const handleSendMessage = () => {
+ if (!messageInput.trim() || !selectedContact) return;
+
+ // Implementasi kirim pesan (dalam real app, hit API)
+ console.log("Sending message:", messageInput, "to:", selectedContact.name);
+ setMessageInput("");
+ };
+
+ const getStatusIcon = (status: string) => {
+ switch (status) {
+ case "sent":
+ return
+ Online
+
+ );
+ }
+ return (
+
+ {contact.lastSeen}
+
+ );
+ };
+
+ return (
+
setSidebarOpen(false)}
+ />
+ )}
+
+ {/* Main content */}
+
+ );
+}
diff --git a/app/components/layoutpengelola/sidebar.tsx b/app/components/layoutpengelola/sidebar.tsx
new file mode 100644
index 0000000..7c4a0d9
--- /dev/null
+++ b/app/components/layoutpengelola/sidebar.tsx
@@ -0,0 +1,621 @@
+import { useState, useMemo } from "react";
+import { Link, useLocation } from "@remix-run/react";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { Separator } from "~/components/ui/separator";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger
+} from "~/components/ui/collapsible";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger
+} from "~/components/ui/tooltip";
+import {
+ LayoutDashboard,
+ Recycle,
+ Users,
+ TrendingUp,
+ FileText,
+ CreditCard,
+ BarChart3,
+ Settings,
+ MessageCircle,
+ MapPin,
+ Package,
+ DollarSign,
+ UserCheck,
+ Building2,
+ Newspaper,
+ HelpCircle,
+ Bell,
+ Shield,
+ ChevronDown,
+ X,
+ Truck,
+ Calendar,
+ ClipboardList,
+ Target,
+ Timer,
+ AlertCircle,
+ CheckCircle,
+ Route,
+ Phone
+} from "lucide-react";
+import { cn } from "~/lib/utils";
+
+interface SidebarProps {
+ isOpen: boolean;
+ isCollapsed: boolean;
+ isHovered: boolean;
+ isMobile: boolean;
+ onClose: () => void;
+ onMouseEnter: () => void;
+ onMouseLeave: () => void;
+}
+
+interface MenuItem {
+ title: string;
+ icon?: React.ReactNode;
+ href?: string;
+ badge?: string;
+ badgeVariant?: "pro" | "new" | "urgent";
+ children?: MenuItem[];
+}
+
+const operationalMenuItems: MenuItem[] = [
+ {
+ title: "Dashboard",
+ icon:
+ {children}
+
+
+ {showText && (
+
+ );
+}
+
+function MenuItemComponent({
+ item,
+ isCollapsed,
+ isHovered
+}: {
+ item: MenuItem;
+ isCollapsed: boolean;
+ isHovered: boolean;
+}) {
+ const location = useLocation();
+ const pathname = location.pathname;
+ const [isOpen, setIsOpen] = useState(false);
+ const hasChildren = item.children && item.children.length > 0;
+ const showText = !isCollapsed || isHovered;
+
+ // Check if any child is active
+ const isChildActive = useMemo(() => {
+ if (!hasChildren) return false;
+ return item.children!.some((child) => child.href === pathname);
+ }, [hasChildren, item.children, pathname]);
+
+ // Auto open if child is active
+ useMemo(() => {
+ if (isChildActive && !isOpen) {
+ setIsOpen(true);
+ }
+ }, [isChildActive, isOpen]);
+
+ // For collapsed state without hover, show tooltip
+ if (isCollapsed && !isHovered) {
+ return (
+ + {title} +
+ )} +-
+ {items.map((item, index) => (
+
{item.title}
+
+
+
+ `,
+ className: "custom-div-icon",
+ iconSize: [24, 24],
+ iconAnchor: [12, 12],
+ popupAnchor: [0, -12]
+ });
+ };
+
+ if (!mapComponents || !leaflet) {
+ return (
+
+
+ );
+ }
+
+ const { MapContainer, TileLayer, Marker, Popup } = mapComponents;
+
+ return (
+
+
+ Loading map...
+
+
+ {location.name}
+{location.address}
+ +
+
+
+
+
+ Status:
+
+ {location.status}
+
+
+
+
+ Load:
+
+ {Math.round(
+ (location.currentLoad / location.capacity) * 100
+ )}
+ %
+
+
+
+
+
+
+
+
+ Population:
+ {location.population.toLocaleString()}
+
+
+
+ Last Pickup:
+ {location.lastPickup}
+
+
+
+
+ {children}
+
+ *]:[transform-style:preserve-3d]",
+ className
+ )}
+ >
+ {children}
+
+ );
+};
+
+export const CardItem = ({
+ as: Tag = "div",
+ children,
+ className,
+ translateX = 0,
+ translateY = 0,
+ translateZ = 0,
+ rotateX = 0,
+ rotateY = 0,
+ rotateZ = 0,
+ ...rest
+}: {
+ as?: React.ElementType;
+ children: React.ReactNode;
+ className?: string;
+ translateX?: number | string;
+ translateY?: number | string;
+ translateZ?: number | string;
+ rotateX?: number | string;
+ rotateY?: number | string;
+ rotateZ?: number | string;
+ [key: string]: any;
+}) => {
+ const ref = useRef
+ {/* Menggunakan CSS variables untuk responsive - best practice Remix */}
+
+
+
+ {title || (
+
+ This Macbook is built with Tailwindcss.
No kidding. + + )} +
+
+ {/* Lid */}
+
+ );
+};
+
+export const Lid = ({
+ scaleX,
+ scaleY,
+ rotate,
+ translate,
+ src,
+}: {
+ scaleX: MotionValueNo kidding. + + )} +
+ {/* Keyboard bar */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {badge}
}
+
+
+
+ {src && (
+ 
+ )}
+
+
+ );
+};
+
+export const Trackpad = () => {
+ return (
+
+ );
+};
+
+export const Keypad = () => {
+ return (
+
+
+
+
+
+
+ {/* First Row */}
+
+ );
+};
+
+export const KBtn = ({
+ className,
+ children,
+ childrenClassName,
+ backlit = true,
+}: {
+ className?: string;
+ children?: React.ReactNode;
+ childrenClassName?: string;
+ backlit?: boolean;
+}) => {
+ return (
+
+
+ esc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Second row */}
+
+
+
+
+
+ ~
+ `
+
+
+ !
+ 1
+
+
+ @
+ 2
+
+
+ #
+ 3
+
+
+ $
+ 4
+
+
+ %
+ 5
+
+
+ ^
+ 6
+
+
+ &
+ 7
+
+
+ *
+ 8
+
+
+ (
+ 9
+
+
+ )
+ 0
+
+
+ _
+ -
+
+
+ +
+ =
+
+
+ delete
+
+
+
+ {/* Third row */}
+
+
+ tab
+
+
+ Q
+
+
+ W
+
+
+ E
+
+
+ R
+
+
+ T
+
+
+ Y
+
+
+ U
+
+
+ I
+
+
+ O
+
+
+ P
+
+
+ {`{`}
+ {`[`}
+
+
+ {`}`}
+ {`]`}
+
+
+ {`|`}
+ {`\\`}
+
+
+
+ {/* Fourth Row */}
+
+
+ caps lock
+
+
+ A
+
+
+ S
+
+
+ D
+
+
+ F
+
+
+ G
+
+
+ H
+
+
+ J
+
+
+ K
+
+
+ L
+
+
+ {`:`}
+ {`;`}
+
+
+ {`"`}
+ {`'`}
+
+
+ return
+
+
+
+ {/* Fifth Row */}
+
+
+ shift
+
+
+ Z
+
+
+ X
+
+
+ C
+
+
+ V
+
+
+ B
+
+
+ N
+
+
+ M
+
+
+ {`<`}
+ {`,`}
+
+
+ {`>`}
+ {`.`}
+
+
+ {`?`}
+ {`/`}
+
+
+ shift
+
+
+
+ {/* Sixth Row */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fn
+
+
+
+
+
+
+ control
+
+
+
+
+ option
+
+
+
+
+ command
+
+
+
+
+ command
+
+
+
+
+ option
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const SpeakerGrid = () => {
+ return (
+
+ );
+};
+
+export const OptionKey = ({ className }: { className: string }) => {
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/app/components/ui/progress.tsx b/app/components/ui/progress.tsx
new file mode 100644
index 0000000..ba7cb0b
--- /dev/null
+++ b/app/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "~/lib/utils"
+
+const Progress = React.forwardRef<
+ React.ElementRef
+
+
+ {children}
+
+
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
-
- );
-}
-
-const resources = [
- {
- href: "https://remix.run/start/quickstart",
- text: "Quick Start (5 min)",
- icon: (
-
- ),
- },
- {
- href: "https://remix.run/start/tutorial",
- text: "Tutorial (30 min)",
- icon: (
-
- ),
- },
- {
- href: "https://remix.run/docs",
- text: "Remix Docs",
- icon: (
-
- ),
- },
- {
- href: "https://rmx.as/discord",
- text: "Join Discord",
- icon: (
-
- ),
- },
-];
diff --git a/app/routes/_landing._index.tsx b/app/routes/_landing._index.tsx
new file mode 100644
index 0000000..1456e11
--- /dev/null
+++ b/app/routes/_landing._index.tsx
@@ -0,0 +1,1104 @@
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Card, CardContent } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Textarea } from "~/components/ui/textarea";
+import {
+ Play,
+ Download,
+ Apple,
+ Check,
+ ChevronDown,
+ Star,
+ Users,
+ Calendar,
+ MapPin,
+ Truck,
+ BarChart3,
+ Recycle,
+ ArrowLeft,
+ ArrowRight
+} from "lucide-react";
+import { CardBody, CardContainer, CardItem } from "~/components/ui/3d-card";
+import { MacbookScroll } from "~/components/ui/macbook-scroll";
+
+interface Feature {
+ icon: React.ReactNode | string;
+ title: string;
+ description: string;
+}
+
+interface StakeholderFeature {
+ title: string;
+ icon: string;
+ features: string[];
+}
+
+interface WorkStep {
+ icon: React.ReactNode | string;
+ title: string;
+ description: string;
+}
+
+interface Testimonial {
+ name: string;
+ role: string;
+ avatar: string;
+ rating: number;
+ comment: string;
+}
+
+interface Blog {
+ title: string;
+ excerpt: string;
+ author: string;
+ date: string;
+ image: string;
+}
+
+interface FAQ {
+ question: string;
+ answer: string;
+}
+
+// Data constants
+const features: Feature[] = [
+ {
+ icon:
-
-
-
-
- - Welcome to Remix -
-
- 
- 
-
-
-
-
+
+);
+
+const StakeholderCard = ({
+ stakeholder,
+ index
+}: {
+ stakeholder: StakeholderFeature;
+ index: number;
+}) => (
+
+ {typeof feature.icon === "string" ? (
+ {feature.icon}
+ ) : (
+ feature.icon
+ )}
+
+ + {feature.title} +
+{feature.description}
+
+
+ {stakeholder.icon}
+
+
+ {stakeholder.title}
+
+
+
+
+
+ ))}
+
+
+ Pelajari Lebih Lanjut
+
+
+
+
+);
+
+const TestimonialCard = ({
+ testimonial,
+ index
+}: {
+ testimonial: Testimonial;
+ index: number;
+}) => (
+
+ {typeof step.icon === "string" ? (
+ {step.icon}
+ ) : (
+ step.icon
+ )}
+
+ + {step.title} +
+{step.description}
+
+
+
+ + "{testimonial.comment}" +
+
+
+
+
+
+
+ {testimonial.avatar}
+
+
+
+ + {testimonial.name} +
++ {testimonial.role} +
+
+
+ {testimonial.rating}
+
+
+
+ {[...Array(testimonial.rating)].map((_, i) => (
+
+
+
+
+
+ {blog.image}
+
+
+
+
+
+
+
+
+
+ + {blog.title} +
++ {blog.excerpt} +
+ +
+
+
+ {faq.question}
+
+
+
+);
+
+const DashboardFeatureCard = ({
+ icon,
+ title,
+ description,
+ features,
+ iconBg
+}: {
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+ features: string[];
+ iconBg: string;
+}) => (
+
+
+ {faq.question}
+
+
+
+
+ {faq.answer}
+
+ {icon}
+
+ + {title} +
+{description}
+-
+ {features.map((feature, index) => (
+
-
+
+ {feature} +
+ ))}
+
+
+
+
+
+
+ {/* Features Section */}
+
+
+
+ {/* Stakeholder Features Section */}
+
+
+
+ {/* About Section */}
+
+
+
+ {/* Work Process Section */}
+
+
+
+ {/* Screenshots Section */}
+
+
+
+ {/* MacbookScroll Section */}
+
+
+ Aplikasi Rijig dibangun dengan teknologi modern.
+ + Pengalaman pengguna yang luar biasa. + + + } + landingTargetId="product-showcase" + landingOffset={-150} + showGradient={true} + badge={ +
+
+ {/* Product Showcase Section */}
+
+
+
+ {/* Download CTA Section */}
+
+
+
+ {/* Testimonials Section */}
+
+
+
+ {/* FAQ Section */}
+
+
+
+ {/* Blog Section */}
+
+
+
+ {/* Support Section */}
+
+
+
+ );
+}
diff --git a/app/routes/_landing.tsx b/app/routes/_landing.tsx
new file mode 100644
index 0000000..ef08956
--- /dev/null
+++ b/app/routes/_landing.tsx
@@ -0,0 +1,405 @@
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Outlet, useLoaderData, useNavigate } from "@remix-run/react";
+import { useState, useEffect } from "react";
+import { Button } from "~/components/ui/button";
+import { Separator } from "~/components/ui/separator";
+import {
+ Menu,
+ X,
+ Facebook,
+ Twitter,
+ Linkedin,
+ Instagram,
+ Recycle,
+ ArrowUp
+} from "lucide-react";
+import { ModeToggle } from "~/components/ui/dark-mode-toggle";
+
+export const meta: MetaFunction = () => {
+ return [
+ { title: "Rijig - Platform Pengelolaan Sampah Terpadu" },
+ {
+ name: "description",
+ content:
+ "Platform pengelolaan sampah terpadu yang menghubungkan masyarakat, pengepul, dan pengelola untuk ekonomi sirkular berkelanjutan"
+ },
+ { name: "viewport", content: "width=device-width, initial-scale=1" }
+ ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ const navigationItems = [
+ { name: "Fitur", href: "#features" },
+ { name: "Tentang", href: "#about" },
+ { name: "Cara Kerja", href: "#work-process" },
+ { name: "Testimoni", href: "#testimonials" },
+ { name: "Kontak", href: "#support" }
+ ];
+
+ const socialLinks = [
+ { name: "Facebook", icon: "facebook", href: "#" },
+ { name: "Twitter", icon: "twitter", href: "#" },
+ { name: "LinkedIn", icon: "linkedin", href: "#" },
+ { name: "Instagram", icon: "instagram", href: "#" }
+ ];
+
+ const authData = {
+ isAuthenticated: false,
+ isRegistrationComplete: false,
+ userRole: null as string | null
+ };
+
+ return json({
+ navigationItems,
+ socialLinks,
+ authData
+ });
+}
+
+export default function LandingLayout() {
+ const { navigationItems, socialLinks, authData } =
+ useLoaderData
+
+
+
+
+
+
+ Solusi Digital untuk Ekonomi Sirkular
+
+
+
+
+ + Rijig - Platform{" "} + + Pengelolaan Sampah + {" "} + Terpadu Indonesia +
+ ++ Menghubungkan masyarakat, pengepul, dan pengelola daur ulang + dalam satu ekosistem digital yang memudahkan pengelolaan sampah + dan menciptakan nilai ekonomi berkelanjutan. +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ♻️
+ + Rijig +
++ Kelola sampah dengan bijak +
+
+
+
+
+
+ Scroll untuk melihat lebih
+
+
+
+
+
+
+
+
+
+
+
+ + Fitur Lengkap untuk Semua Pengguna +
++ Rijig menyediakan solusi terintegrasi yang menghubungkan + masyarakat, pengepul, dan pengelola daur ulang dalam satu platform + yang mudah digunakan dan efisien. +
+
+ {features.map((feature, index) => (
+
+
+
+
+
+
+ + Fitur Khusus untuk Setiap Stakeholder +
++ Rijig dirancang khusus untuk memenuhi kebutuhan berbeda dari + setiap pemangku kepentingan dalam ekosistem pengelolaan sampah. +
+
+ {stakeholderFeatures.map((stakeholder, index) => (
+
+
+
+
+
+
+
+
+
+
+
+ 📊
+ 📈
+ ♻️
+
+
+ Pantau Aktivitas Sampah Real-time
+
+
+ + Tracking Lengkap dari Pickup hingga Daur Ulang +
++ Monitor seluruh proses pengelolaan sampah mulai dari permintaan + penjemputan, transaksi, hingga proses daur ulang dengan + dashboard yang informatif dan update real-time. +
+ +
+
+
+
+
+
+ 01
+
+
+
+ + Status Pickup Real-time +
++ Pantau status penjemputan sampah dari request hingga + selesai dengan notifikasi langsung. +
+
+
+
+ 02
+
+
+
+ + Pencatatan & Analisis Otomatis +
++ Sistem pencatatan otomatis dan analisis data untuk + membantu optimalisasi pengelolaan sampah. +
+
+
+
+
+ Dampak Lingkungan Terukur
+
+
+
+ + Visualisasi Kontribusi Anda untuk Lingkungan +
++ Lihat secara visual dampak positif yang Anda berikan terhadap + lingkungan melalui aktivitas pengelolaan sampah dan daur ulang + dalam dashboard yang mudah dipahami. +
+ +
+
+
+
+ 🌍
+ 🌱
+ 💚
+
+
+
+
+
+
+
+ + Bagaimana Cara Kerjanya? +
++ Bergabung dengan ekosistem pengelolaan sampah yang berkelanjutan + hanya dalam 3 langkah mudah dan mulai berkontribusi untuk + lingkungan yang lebih bersih. +
+
+ {workSteps.map((step, index) => (
+
+
+
+
+
+
+ + Screenshot Aplikasi +
++ Lihat tampilan antarmuka aplikasi Rijig yang user-friendly dan + mudah digunakan untuk semua kalangan pengguna. +
+
+
+
+ {[
+ { icon: "🏠", title: "Dashboard Masyarakat" },
+ { icon: "📊", title: "Panel Pengepul" },
+ { icon: "🏭", title: "Sistem Daur Ulang" }
+ ].map((screen, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {screen.icon}
+
+ + {screen.title} +
+
+
+
+
+ + + Pengalaman pengguna yang luar biasa. + + + } + landingTargetId="product-showcase" + landingOffset={-150} + showGradient={true} + badge={ +
+ Live Demo
+
+ }
+ />
+
+
+
+
+
+
+ Dashboard Analytics
+
+
+
+ + Dashboard Powerful untuk Monitoring Real-time +
++ Pantau seluruh aktivitas pengelolaan sampah dengan dashboard yang + informatif, real-time, dan mudah dipahami untuk semua stakeholder. +
+
+
+
+
+
+
+
+
+
+
+
+ 📊
+ + Dashboard Preview +
+
+
+
+
+
+
+
+
+ 2.5 Ton
+
+
+ Sampah Terkumpul Hari Ini
+
+
+
+
+ Rp 3.2 Juta
+
+
+ Total Transaksi
+
+
+
+
+ 127
+
+
+ Pickup Selesai
+
+
+
+
+ 98%
+
+
+ Kepuasan Pengguna
+
+
+
+
+
+
+
+ + Download Rijig Sekarang & Mulai Kelola Sampah dengan Bijak +
++ Bergabunglah dengan ekosistem pengelolaan sampah yang + berkelanjutan. Dapatkan pendapatan dari sampah, kelola bisnis + pengepulan, atau optimalisasi supply chain fasilitas daur ulang + Anda. +
+ +
+
+
+
+
+
+
+
+
+ 50K+
+ Pengguna Aktif
+
+
+
+ 1000+
+
+
+ Pengepul Terdaftar
+
+
+
+ 250+
+ Kota di Indonesia
+
+
+
+
+
+ + Apa Kata Pengguna Rijig +
++ Testimoni dari berbagai stakeholder yang telah merasakan manfaat + nyata dari penggunaan platform Rijig dalam pengelolaan sampah + sehari-hari. +
+
+ {testimonials.map((testimonial, index) => (
+
+
+
+ {faqs.map((faq, index) => (
+
+
+
+
+
+ + Pertanyaan yang Sering Diajukan +
++ Temukan jawaban atas pertanyaan umum tentang Rijig dan cara kerja + platform pengelolaan sampah terintegrasi kami. +
+
+
+
+
+
+ + Artikel & Tips Pengelolaan Sampah +
++ Pelajari lebih lanjut tentang pengelolaan sampah, tips bisnis + pengepulan, dan informasi terkini seputar industri daur ulang di + Indonesia. +
+
+ {blogs.map((blog, index) => (
+
+
+
+
+
+
+
+
+ + Mari Terhubung dengan Tim Rijig +
++ Punya pertanyaan atau ingin bermitra dengan Rijig? Hubungi tim + kami dan mari bersama-sama membangun ekosistem pengelolaan sampah + yang berkelanjutan di Indonesia. +
+
+
+
+
+
+
+
+
+
+
+
+ + Dengan mengklik tombol hubungi kami, Anda menyetujui syarat + dan ketentuan yang berlaku +
+ +
+ {/* Header dengan glassmorphism effect */}
+
+
+
+ {/* Main Content */}
+
+
+
+ {/* Back to Top Button */}
+
+
+ {/* Footer */}
+
+
+ );
+}
diff --git a/app/routes/action.set-theme.ts b/app/routes/action.set-theme.ts
new file mode 100644
index 0000000..f2d8ad8
--- /dev/null
+++ b/app/routes/action.set-theme.ts
@@ -0,0 +1,4 @@
+import { createThemeAction } from "remix-themes"
+import { themeSessionResolver } from "../sessions.server"
+
+export const action = createThemeAction(themeSessionResolver)
\ No newline at end of file
diff --git a/app/routes/pengelola._index.tsx b/app/routes/pengelola._index.tsx
new file mode 100644
index 0000000..f952225
--- /dev/null
+++ b/app/routes/pengelola._index.tsx
@@ -0,0 +1,6 @@
+import { redirect } from "@remix-run/node";
+
+export const loader = async () => {
+ return redirect("/pengelola/dashboard");
+};
+
diff --git a/app/routes/pengelola.dashboard._index.tsx b/app/routes/pengelola.dashboard._index.tsx
new file mode 100644
index 0000000..d616f53
--- /dev/null
+++ b/app/routes/pengelola.dashboard._index.tsx
@@ -0,0 +1,509 @@
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle
+} from "~/components/ui/card";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { Progress } from "~/components/ui/progress";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import {
+ Truck,
+ Users,
+ MapPin,
+ TrendingUp,
+ TrendingDown,
+ Clock,
+ CheckCircle,
+ AlertTriangle,
+ Calendar,
+ BarChart3,
+ Recycle,
+ Package
+} from "lucide-react";
+
+// Interface untuk activity
+interface Activity {
+ id: number;
+ type: string;
+ title: string;
+ time: string;
+ status: string;
+ driver?: string;
+ volume?: string;
+ estimatedComplete?: string;
+ estimatedVolume?: string;
+ reason?: string;
+}
+
+interface Truck {
+ id: string;
+ driver: string;
+ status: string;
+ location: string;
+ capacity: string;
+ lastUpdate: string;
+}
+
+interface WeeklyProgress {
+ day: string;
+ target: number;
+ actual: number;
+}
+
+interface DashboardData {
+ stats: {
+ totalSampahHariIni: number;
+ targetHarian: number;
+ trukAktif: number;
+ totalTruk: number;
+ pegawaiAktif: number;
+ totalPegawai: number;
+ wilayahTerlayani: number;
+ totalWilayah: number;
+ };
+ recentActivities: Activity[];
+ trucks: Truck[];
+ weeklyProgress: WeeklyProgress[];
+}
+
+// Loader untuk mengambil data dashboard
+export const loader = async (): Promise
+
+
+ {/* Logo */}
+
+
+ {/* Mobile Menu */}
+
+
+
+ {/* Mobile Menu Button */}
+
+
+ {/* Desktop Navigation - Centered */}
+
+
+ {/* Right Side Actions */}
+
+
+
+ Rijig
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Header Dashboard */}
+
+
+ Aktivitas Terbaru
+ Status Truk
+ Performa Mingguan
+
+
+
+
+
+ Aktivitas Terbaru
+
+ Pantau semua aktivitas operasional secara real-time
+
+
+
+
+
+
+
+
+
+
+ Status Truk Real-time
+
+ Monitor kondisi dan lokasi semua armada truk
+
+
+
+
+
+
+
+
+
+
+ Performa Mingguan
+
+ Pencapaian target pengumpulan sampah minggu ini
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/routes/pengelola.dashboard.chat._index.tsx b/app/routes/pengelola.dashboard.chat._index.tsx
new file mode 100644
index 0000000..4691006
--- /dev/null
+++ b/app/routes/pengelola.dashboard.chat._index.tsx
@@ -0,0 +1,596 @@
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { useState, useRef, useEffect } from "react";
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Badge } from "~/components/ui/badge";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import { Separator } from "~/components/ui/separator";
+import { Textarea } from "~/components/ui/textarea";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from "~/components/ui/dropdown-menu";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger
+} from "~/components/ui/dialog";
+import {
+ Search,
+ Send,
+ Phone,
+ Video,
+ MoreVertical,
+ Paperclip,
+ Image,
+ MapPin,
+ Clock,
+ Check,
+ CheckCheck,
+ User,
+ MessageCircle,
+ Truck,
+ Package,
+ AlertCircle
+} from "lucide-react";
+
+// Interfaces
+interface Message {
+ id: string;
+ senderId: string;
+ senderName: string;
+ content: string;
+ timestamp: string;
+ type: "text" | "image" | "location" | "document";
+ status: "sent" | "delivered" | "read";
+ attachmentUrl?: string;
+}
+
+interface Contact {
+ id: string;
+ name: string;
+ role: string;
+ avatar?: string;
+ isOnline: boolean;
+ lastSeen: string;
+ lastMessage: string;
+ unreadCount: number;
+ location?: string;
+ phone: string;
+}
+
+interface ChatData {
+ contacts: Contact[];
+ messages: { [contactId: string]: Message[] };
+ currentUser: {
+ id: string;
+ name: string;
+ };
+}
+
+export const loader = async (): Promise
+
+
+ {/* Cards Statistik Utama */}
+ + Dashboard Pengelola +
+
+
+
+
+
+
+
+
+ Sampah Terkumpul Hari Ini
+
+
+
+
+
+
+
+
+
+ Truk Operasional
+
+
+
+
+
+
+
+
+ Pegawai Aktif
+
+
+
+
+
+
+
+
+ Wilayah Terlayani
+
+
+
+
+
+
+
+ {/* Tabs untuk konten detail */}
+
+ {data.stats.totalSampahHariIni.toLocaleString()} kg
+
+
+ + {progressPercentage}% dari target ( + {data.stats.targetHarian.toLocaleString()} kg) +
+
+ {data.stats.trukAktif}/{data.stats.totalTruk}
+
+
+ + {Math.round((data.stats.trukAktif / data.stats.totalTruk) * 100)}% + truk sedang beroperasi +
+
+ {data.stats.pegawaiAktif}/{data.stats.totalPegawai}
+
+
+ + {Math.round( + (data.stats.pegawaiAktif / data.stats.totalPegawai) * 100 + )} + % pegawai sedang bertugas +
+
+ {data.stats.wilayahTerlayani}/{data.stats.totalWilayah}
+
+
+ + {Math.round( + (data.stats.wilayahTerlayani / data.stats.totalWilayah) * 100 + )} + % wilayah tercover hari ini +
+
+ {data.recentActivities.map((activity) => (
+
+
+
+ ))}
+
+ {getActivityIcon(activity.type)}
+
+
+
+ + {activity.title} +
+
+
+ {activity.time}
+ {activity.driver && ( + + • Driver: {activity.driver} + + )} + {activity.volume && ( + + • {activity.volume} + + )} + {activity.estimatedVolume && ( + + • Est: {activity.estimatedVolume} + + )} + {activity.estimatedComplete && ( + + • Selesai: {activity.estimatedComplete} + + )} + {activity.reason && ( + + • {activity.reason} + + )} +
+ {getStatusBadge(activity.status)}
+
+
+ {data.trucks.map((truck) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {truck.id}
++ Driver: {truck.driver} +
++ Update: {truck.lastUpdate} +
+
+
+
+ {getStatusBadge(truck.status)}
+
+ {truck.location}
++ Kapasitas: {truck.capacity} +
+
+ {data.weeklyProgress.map((day, index) => (
+
+
+
+ ))}
+
+ {day.day}
+
+
+
+
+
+ Target: {day.target.toLocaleString()} kg
+
+
+ Actual: {day.actual.toLocaleString()} kg
+
+
+
+ {day.actual >= day.target ? (
+
+
+ {/* Header */}
+
+
+
+ {/* Chat Container */}
+ Chat Pengepul
+
+
+
+
+
+ {/* Sidebar Contact List */}
+
+
+
+
+
+
+
+
+
+ {/* Chat Area */}
+
+ {selectedContact ? (
+ <>
+ {/* Chat Header */}
+
+
+
+
+
+
+
+
+ {/* Message Input */}
+
+
+
+ {filteredContacts.map((contact) => (
+
+ setSelectedContact(contact)}
+ className={`p-3 rounded-lg cursor-pointer transition-colors ${
+ selectedContact?.id === contact.id
+ ? "bg-primary/10 border border-primary/20"
+ : "hover:bg-gray-50"
+ }`}
+ >
+
+ ))}
+
+
+
+
+
+ {contact.name
+ .split(" ")
+ .map((n) => n[0])
+ .join("")}
+
+
+ {contact.isOnline && (
+
+ )}
+
+
+
+
+
+ {contact.unreadCount}
+
+ )}
+
+ + {contact.name} +
+ {contact.unreadCount > 0 && ( +
+
+ + {contact.role} +
++ {contact.lastMessage} +
+
+
+
+
+ {getContactStatusBadge(contact)}
+
+
+
+ {selectedContact.name
+ .split(" ")
+ .map((n) => n[0])
+ .join("")}
+
+
+
+
+
+ {selectedContact.name}
+
+
+ + {selectedContact.role} +
+ {getContactStatusBadge(selectedContact)} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {currentMessages.map((message) => {
+ const isOwnMessage =
+ message.senderId === data.currentUser.id;
+ return (
+
+
+
+ );
+ })}
+
+
+ {message.content}
+
+
+ {message.timestamp}
+
+ {isOwnMessage && (
+
+
+ {getStatusIcon(message.status)}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+