395 lines
14 KiB
TypeScript
395 lines
14 KiB
TypeScript
// app/routes/dashboard.settings.tsx
|
|
import {
|
|
json,
|
|
type LoaderFunctionArgs,
|
|
type ActionFunctionArgs
|
|
} from "@remix-run/node";
|
|
import { Form, useLoaderData, useNavigation } from "@remix-run/react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle
|
|
} from "~/components/ui/card";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Input } from "~/components/ui/input";
|
|
import { Label } from "~/components/ui/label";
|
|
import { Textarea } from "~/components/ui/textarea";
|
|
import { Separator } from "~/components/ui/separator";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { Building2, MapPin, Save, User } from "lucide-react";
|
|
|
|
// Loader untuk mengambil data profil perusahaan
|
|
export async function loader({ request }: LoaderFunctionArgs) {
|
|
// Simulasi data - ganti dengan query database Anda
|
|
const companyProfile = {
|
|
id: "1",
|
|
name: "PT. Kelola Sampah Indonesia",
|
|
email: "admin@kelolasampah.co.id",
|
|
phone: "+62 21 1234 5678",
|
|
website: "https://kelolasampah.co.id",
|
|
description:
|
|
"Perusahaan pengelolaan sampah terpadu dengan fokus pada daur ulang dan pengelolaan limbah yang ramah lingkungan.",
|
|
address: {
|
|
street: "Jl. Lingkungan Hijau No. 123",
|
|
city: "Jakarta",
|
|
province: "DKI Jakarta",
|
|
postalCode: "12345",
|
|
country: "Indonesia"
|
|
},
|
|
establishedYear: "2020",
|
|
licenseNumber: "LIC-2020-001"
|
|
};
|
|
|
|
return json({ companyProfile });
|
|
}
|
|
|
|
// Action untuk handle form submission
|
|
export async function action({ request }: ActionFunctionArgs) {
|
|
const formData = await request.formData();
|
|
const intent = formData.get("intent");
|
|
|
|
if (intent === "updateProfile") {
|
|
// Handle update profil perusahaan
|
|
const profileData = {
|
|
name: formData.get("name"),
|
|
email: formData.get("email"),
|
|
phone: formData.get("phone"),
|
|
website: formData.get("website"),
|
|
description: formData.get("description"),
|
|
establishedYear: formData.get("establishedYear"),
|
|
licenseNumber: formData.get("licenseNumber")
|
|
};
|
|
|
|
// Simulasi update - ganti dengan update database Anda
|
|
console.log("Updating profile:", profileData);
|
|
|
|
return json({
|
|
success: true,
|
|
message: "Profil perusahaan berhasil diperbarui"
|
|
});
|
|
}
|
|
|
|
if (intent === "updateAddress") {
|
|
// Handle update alamat
|
|
const addressData = {
|
|
street: formData.get("street"),
|
|
city: formData.get("city"),
|
|
province: formData.get("province"),
|
|
postalCode: formData.get("postalCode"),
|
|
country: formData.get("country")
|
|
};
|
|
|
|
// Simulasi update - ganti dengan update database Anda
|
|
console.log("Updating address:", addressData);
|
|
|
|
return json({
|
|
success: true,
|
|
message: "Alamat perusahaan berhasil diperbarui"
|
|
});
|
|
}
|
|
|
|
return json({ success: false, message: "Invalid action" });
|
|
}
|
|
|
|
export default function SettingsPage() {
|
|
const { companyProfile } = useLoaderData<typeof loader>();
|
|
const navigation = useNavigation();
|
|
|
|
const isSubmitting = navigation.state === "submitting";
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold tracking-tight">Pengaturan</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Kelola profil perusahaan dan informasi alamat Anda
|
|
</p>
|
|
</div>
|
|
|
|
{/* Main Grid Layout */}
|
|
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
|
{/* Left Column - Profil Perusahaan */}
|
|
<div className="xl:col-span-2 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Building2 className="h-5 w-5 text-primary" />
|
|
<CardTitle>Profil Perusahaan</CardTitle>
|
|
</div>
|
|
<CardDescription>
|
|
Informasi dasar tentang perusahaan pengelola sampah
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form method="post" className="space-y-4">
|
|
<input type="hidden" name="intent" value="updateProfile" />
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Nama Perusahaan</Label>
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
defaultValue={companyProfile.name}
|
|
placeholder="Masukkan nama perusahaan"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
defaultValue={companyProfile.email}
|
|
placeholder="admin@perusahaan.com"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">No. Telepon</Label>
|
|
<Input
|
|
id="phone"
|
|
name="phone"
|
|
defaultValue={companyProfile.phone}
|
|
placeholder="+62 21 1234 5678"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="website">Website</Label>
|
|
<Input
|
|
id="website"
|
|
name="website"
|
|
defaultValue={companyProfile.website}
|
|
placeholder="https://perusahaan.com"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="establishedYear">Tahun Berdiri</Label>
|
|
<Input
|
|
id="establishedYear"
|
|
name="establishedYear"
|
|
defaultValue={companyProfile.establishedYear}
|
|
placeholder="2020"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="licenseNumber">No. Izin Usaha</Label>
|
|
<Input
|
|
id="licenseNumber"
|
|
name="licenseNumber"
|
|
defaultValue={companyProfile.licenseNumber}
|
|
placeholder="LIC-2020-001"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Deskripsi Perusahaan</Label>
|
|
<Textarea
|
|
id="description"
|
|
name="description"
|
|
defaultValue={companyProfile.description}
|
|
placeholder="Deskripsikan perusahaan Anda..."
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
{isSubmitting ? "Menyimpan..." : "Simpan Profil"}
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Alamat Perusahaan Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<MapPin className="h-5 w-5 text-primary" />
|
|
<CardTitle>Alamat Perusahaan</CardTitle>
|
|
</div>
|
|
<CardDescription>
|
|
Informasi lokasi dan alamat lengkap perusahaan
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form method="post" className="space-y-4">
|
|
<input type="hidden" name="intent" value="updateAddress" />
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="street">Alamat Lengkap</Label>
|
|
<Input
|
|
id="street"
|
|
name="street"
|
|
defaultValue={companyProfile.address.street}
|
|
placeholder="Jl. Nama Jalan No. 123"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="city">Kota</Label>
|
|
<Input
|
|
id="city"
|
|
name="city"
|
|
defaultValue={companyProfile.address.city}
|
|
placeholder="Jakarta"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="province">Provinsi</Label>
|
|
<Input
|
|
id="province"
|
|
name="province"
|
|
defaultValue={companyProfile.address.province}
|
|
placeholder="DKI Jakarta"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="postalCode">Kode Pos</Label>
|
|
<Input
|
|
id="postalCode"
|
|
name="postalCode"
|
|
defaultValue={companyProfile.address.postalCode}
|
|
placeholder="12345"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="country">Negara</Label>
|
|
<Input
|
|
id="country"
|
|
name="country"
|
|
defaultValue={companyProfile.address.country}
|
|
placeholder="Indonesia"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
{isSubmitting ? "Menyimpan..." : "Simpan Alamat"}
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right Column - Info & Status */}
|
|
<div className="space-y-6">
|
|
{/* Status Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Status Perusahaan</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted-foreground">Status</span>
|
|
<Badge variant="default" className="bg-green-600">
|
|
Aktif
|
|
</Badge>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted-foreground">
|
|
Verifikasi
|
|
</span>
|
|
<Badge variant="secondary">Terverifikasi</Badge>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted-foreground">
|
|
Tahun Berdiri
|
|
</span>
|
|
<span className="text-sm font-medium">
|
|
{companyProfile.establishedYear}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted-foreground">
|
|
No. Izin
|
|
</span>
|
|
<span className="text-sm font-medium">
|
|
{companyProfile.licenseNumber}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium">Aktivitas Terakhir</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Profil diperbarui 2 hari yang lalu
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Quick Actions */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Aksi Cepat</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
size="sm"
|
|
>
|
|
<User className="h-4 w-4 mr-2" />
|
|
Edit Profil
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
size="sm"
|
|
>
|
|
<Building2 className="h-4 w-4 mr-2" />
|
|
Lihat Preview
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
size="sm"
|
|
>
|
|
<MapPin className="h-4 w-4 mr-2" />
|
|
Lokasi di Peta
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Info Card */}
|
|
<Card className="bg-muted/30">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-start gap-3">
|
|
<User className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium">Informasi Penting</p>
|
|
<p className="text-xs text-muted-foreground leading-relaxed">
|
|
Pastikan informasi yang Anda masukkan akurat dan terkini.
|
|
Data ini akan digunakan untuk laporan dan komunikasi dengan
|
|
pihak terkait.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|