mediahub-fe/app/[locale]/(protected)/admin/settings/setting-tracking/component/update.tsx

"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { getUserRoles, postCategory } from "@/service/settings/settings";
import { Fragment, useEffect, useState } from "react";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Textarea } from "@/components/ui/textarea";
import { close, error, loading } from "@/config/swal";
import { useToast } from "@/components/ui/use-toast";
import { stringify } from "querystring";
import { useDropzone } from "react-dropzone";
import { CloudUpload, SquareEqual, SquarePen } from "lucide-react";
import Image from "next/image";
import { Upload } from "tus-js-client";
import { getCookiesDecrypt } from "@/lib/utils";
import Cookies from "js-cookie";
import { useTranslations } from "next-intl";

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(props: {
  id: string;
  isUpdate?: boolean;
}) {
  const { id, isUpdate } = props;
  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 (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <a
          onClick={() => setIsOpen(true)}
          className="flex flex-row items-center border-b p-2 hover:cursor-pointer hover:bg-black hover:text-white"
        >
          <SquarePen className="w-4 h-4 me-1.5" />
          Edit
        </a>
      </DialogTrigger>

      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
        </DialogHeader>

        <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">
                    {jumlahList.map((num) => (
                      <div key={num} className="flex items-center gap-2">
                        <Checkbox
                          checked={field.value.includes(num)}
                          onCheckedChange={(checked) => {
                            const updated = checked
                              ? [...field.value, num]
                              : field.value.filter((val) => val !== num);
                            field.onChange(updated);
                          }}
                        />
                        <label className="text-sm">{num}</label>
                      </div>
                    ))}
                  </div>
                </FormItem>
              )}
            />

            <DialogFooter>
              <Button type="submit">Tambah Setting</Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}