feat:curated content detail

app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx

@@ -55,6 +55,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
 import { close, loading } from "@/lib/swal";
 import { Checkbox } from "@/components/ui/checkbox";
 import { htmlToString } from "@/utils/globals";
+import { Link } from "@/i18n/routing";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -443,8 +444,13 @@ export default function DetailImage() {
                         <p className="text-blue-500">Kotak Saran (0)</p>
                       </div>
                     </div>
-
+                    <Link
-                    <Button>Content Rewrite</Button>
+                      href={
+                        "/shared/curated-content/giat-routine/image/detail/content-rewrite"
+                      }
+                    >
+                      <Button>Content Rewrite</Button>
+                    </Link>
                   </div>
                 </div>
               </div>

app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/content-rewrite/page.tsx

@@ -0,0 +1,349 @@
+"use client";
+import { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Controller, useForm } from "react-hook-form";
+import CustomEditor from "@/components/editor/custom-editor";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Link } from "@/i18n/routing";
+
+const imageSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+const ContentRewritePage = () => {
+  const [step, setStep] = useState("configuration");
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedSize, setSelectedSize] = useState("");
+  const [selectedSort, setSelectedSort] = useState("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  return (
+    <div className="p-6">
+      <Card>
+        <CardContent className="p-6">
+          <h2 className="text-xl font-semibold mb-4">Content Rewrite</h2>
+          <div className="flex items-center space-x-6 mb-6">
+            <div className="flex flex-col items-center">
+              <div
+                className={`w-8 h-8 flex items-center justify-center border-2 rounded-full ${
+                  step === "configuration"
+                    ? "border-blue-500 text-blue-500"
+                    : "border-gray-400 text-gray-400"
+                }`}
+              >
+                ●
+              </div>
+              <p
+                className={
+                  step === "configuration"
+                    ? "text-blue-500 font-semibold"
+                    : "text-gray-400"
+                }
+              >
+                Configuration
+              </p>
+            </div>
+            <div
+              className={`flex-1 h-0.5 ${
+                step === "draft"
+                  ? "bg-blue-500 text-blue-500"
+                  : "bg-gray-400 text-gray-400"
+              }`}
+            ></div>
+            <div className="flex flex-col items-center">
+              <div
+                className={`w-8 h-8 flex items-center justify-center border-2 rounded-full ${
+                  step === "draft"
+                    ? "border-blue-500 text-blue-500"
+                    : "border-gray-400 text-gray-400"
+                }`}
+              >
+                ○
+              </div>
+              <p
+                className={
+                  step === "draft"
+                    ? "text-blue-500 font-semibold"
+                    : "text-gray-400"
+                }
+              >
+                Draft
+              </p>
+            </div>
+            <div
+              className={`flex-1 h-0.5 ${
+                step === "publish"
+                  ? "bg-blue-500 text-blue-500"
+                  : "bg-gray-400 text-gray-400"
+              }`}
+            ></div>
+            <div className="flex flex-col items-center">
+              <div
+                className={`w-8 h-8 flex items-center justify-center border-2 rounded-full ${
+                  step === "publish"
+                    ? "border-blue-500 text-blue-500"
+                    : "border-gray-400 text-gray-400"
+                }`}
+              >
+                ○
+              </div>
+              <p
+                className={
+                  step === "publish"
+                    ? "text-blue-500 font-semibold"
+                    : "text-gray-400"
+                }
+              >
+                Publish
+              </p>
+            </div>
+          </div>
+
+          {step === "configuration" && (
+            <>
+              <div className="flex flex-row gap-3">
+                <div className="space-y-2 py-3 w-4/12">
+                  <Label>Bahasa</Label>
+                  <Select onValueChange={setSelectedLanguage}>
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="id">Indonesia</SelectItem>
+                      <SelectItem value="en">English</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2 py-3 w-4/12">
+                  <Label>Writing Style</Label>
+                  <Select onValueChange={setSelectedWritingStyle}>
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="friendly">Friendly</SelectItem>
+                      <SelectItem value="profesional">Profesional</SelectItem>
+                      <SelectItem value="informational">
+                        Informational
+                      </SelectItem>
+                      <SelectItem value="neutral">Neutral</SelectItem>
+                      <SelectItem value="witty">Witty</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2 py-3 w-4/12">
+                  <Label>Article Size</Label>
+                  <Select onValueChange={setSelectedSize}>
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="news">
+                        News (300 - 900 words)
+                      </SelectItem>
+                      <SelectItem value="info">
+                        Info (900 - 2000 words)
+                      </SelectItem>
+                      <SelectItem value="detail">
+                        Detail (2000 - 5000 words)
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="mb-4">
+                <Label>Configuration</Label>
+                <Input
+                  placeholder="Type your custom instruction here!"
+                  className="h-20"
+                />
+              </div>
+              <Button
+                onClick={() => setStep("draft")}
+                className=" bg-blue-600 text-white"
+              >
+                Selanjutnya
+              </Button>
+            </>
+          )}
+
+          {step === "draft" && (
+            <div>
+              <div className="flex flex-row justify-between">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="accepted"
+                    // checked={filtered.includes("polri")}
+                    // onCheckedChange={(e) => handleFilter("polri", Boolean(e))}
+                  />
+                  <label
+                    htmlFor="accepted"
+                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    Select All
+                  </label>
+                </div>
+                <div className="space-y-2 py-3">
+                  <div className="flex flex-row items-center">
+                    <Label className="w-[50px]">Sort by</Label>
+                    <Select onValueChange={setSelectedSort}>
+                      <SelectTrigger size="sm" className="w-[150px]">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="id">Indonesia</SelectItem>
+                        <SelectItem value="en">English</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                {[
+                  {
+                    src: "/assets/img/image1.png",
+                    alt: "Article 1",
+                    title: "Kurang dari 24 Jam Polres Muara Enim Ungka...",
+                  },
+                  {
+                    src: "/assets/img/image3.png",
+                    alt: "Article 2",
+                    title: "Kurang dari 24 Jam Polres Muara Enim Ungka...",
+                  },
+                  {
+                    src: "/assets/img/image3.png",
+                    alt: "Article 3",
+                    title: "Polres Magelang Kota Konferensi Pers Terkait...",
+                  },
+                ].map((article, index) => (
+                  <div
+                    key={index}
+                    className="border rounded-md overflow-hidden relative"
+                  >
+                    <input
+                      type="checkbox"
+                      className="absolute top-2 left-2 w-5 h-5 cursor-pointer"
+                    />
+
+                    <img
+                      src={article.src}
+                      alt={article.alt}
+                      className="w-full h-40 object-cover"
+                    />
+
+                    <p className="p-2 text-sm">{article.title}</p>
+                  </div>
+                ))}
+              </div>
+
+              <div className="flex flex-row justify-between mt-3">
+                <Button
+                  onClick={() => setStep("configuration")}
+                  variant={"outline"}
+                  color="primary"
+                >
+                  Kembali
+                </Button>
+                <Button
+                  onClick={() => setStep("publish")}
+                  variant={"default"}
+                  color="primary"
+                >
+                  Selanjutnya
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {step === "publish" && (
+            <div>
+              <div className="py-3">
+                <div className="flex flex-row justify-between items-center mb-3">
+                  <Label>940 Words</Label>
+                  <Link
+                    href={`/contributor/content/image/update-seo/${selectedArticleId}`}
+                  >
+                    <Button
+                      className="mb-2"
+                      size="sm"
+                      variant={"outline"}
+                      color="primary"
+                    >
+                      Edit
+                    </Button>
+                  </Link>
+                </div>
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field: { onChange, value } }) => (
+                    <CustomEditor
+                      onChange={onChange}
+                      // initialData={articleBody}
+                    />
+                  )}
+                />
+                {/* {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )} */}
+              </div>
+              <div className="flex flex-row justify-between mt-3">
+                <Button
+                  onClick={() => setStep("configuration")}
+                  variant={"outline"}
+                  color="primary"
+                >
+                  Kembali
+                </Button>
+                <Button
+                  onClick={() => setStep("publish")}
+                  variant={"default"}
+                  color="primary"
+                >
+                  Selanjutnya
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default ContentRewritePage;