111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { z } from "zod";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Fragment, useEffect, useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { Card } from "@/components/ui/card";
|
|
|
|
const wilayahList = [
|
|
{ id: "mabes", label: "Mabes" },
|
|
{ id: "polda", label: "Polda" },
|
|
{ id: "satker", label: "Satker" },
|
|
];
|
|
|
|
const jumlahList = [5, 10, 15, 20, 25, 30];
|
|
|
|
export default function UpdateSettingTracking() {
|
|
const t = useTranslations("Menu");
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const form = useForm({
|
|
defaultValues: {
|
|
wilayah: [] as string[],
|
|
jumlah: [] as number[],
|
|
},
|
|
});
|
|
|
|
const onSubmit = (values: any) => {
|
|
console.log("Submitted values:", values);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card className="px-3 py-3">
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
{/* Wilayah */}
|
|
<FormField
|
|
control={form.control}
|
|
name="wilayah"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Wilayah</FormLabel>
|
|
<div className="flex gap-4">
|
|
{wilayahList.map((item) => (
|
|
<div key={item.id} className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={field.value.includes(item.id)}
|
|
onCheckedChange={(checked) => {
|
|
const updated = checked
|
|
? [...field.value, item.id]
|
|
: field.value.filter((val) => val !== item.id);
|
|
field.onChange(updated);
|
|
}}
|
|
/>
|
|
<label className="text-sm">{item.label}</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="jumlah"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Jumlah Tracking Berita Harian</FormLabel>
|
|
<div className="flex gap-4 flex-wrap">
|
|
<Input
|
|
size={"md"}
|
|
type="number"
|
|
placeholder="Masukan Nama Iklan"
|
|
/>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex items-end justify-end">
|
|
<Button type="submit">Tambah Setting</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|