mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:upload task ta

This commit is contained in:
Anang Yusman 2025-05-01 15:19:35 +08:00
parent f3120e4cf8
commit ede150383d
11 changed files with 708 additions and 656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
View File

@ -172,7 +172,9 @@ const useTableColumns = () => {
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
{roleId == 12 && ( {roleId == 12 && (
<Link href={`/contributor/task-ta/upload-task`}> <Link
href={`/contributor/task-ta/upload-task/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Upload className="w-4 h-4 me-1.5" /> <Upload className="w-4 h-4 me-1.5" />
Upload Tugas Upload Tugas

0
app/[locale]/(protected)/contributor/task-ta/upload-task/page.tsx → app/[locale]/(protected)/contributor/task-ta/upload-task/[id]/page.tsx
View File

5
app/[locale]/(protected)/dashboard/executive/page.tsx
View File

@ -265,10 +265,7 @@ export default function ExecutiveDashboard() {
<Card className="rounded-sm p-3 h-[750px]"> <Card className="rounded-sm p-3 h-[750px]">
<div className="flex flex-row justify-between mx-3"> <div className="flex flex-row justify-between mx-3">
<p className="text-base font-semibold"> <p className="text-base font-semibold">
Heatmap Konten Dengan Interaksi Heatmap Konten dan Kategori dengan Interaksi
</p>
<p className="text-base font-semibold">
Heatmap Kategori Dengan Interaksi
</p> </p>
</div> </div>
<div className="my-5"> <div className="my-5">

2
components/form/content/audio-form.tsx
View File

@ -948,6 +948,8 @@ export default function FormAudio() {
{selectedArticleId && ( {selectedArticleId && (
<Link <Link
href={`/contributor/content/audio/update-seo/${selectedArticleId}`} href={`/contributor/content/audio/update-seo/${selectedArticleId}`}
target="_blank"
rel="noopener noreferrer"
> >
<Button <Button
className="mb-2" className="mb-2"

30
components/form/content/image-form.tsx
View File

@ -16,7 +16,7 @@ import * as z from "zod";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { redirect, useRouter } from "next/navigation"; import { redirect, useParams, useRouter } from "next/navigation";
import { import {
Select, Select,
SelectContent, SelectContent,
@ -57,7 +57,7 @@ import dynamic from "next/dynamic";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { request } from "http"; import { request } from "http";
import { useTranslations } from "next-intl"; import { useLocale, useTranslations } from "next-intl";
interface FileWithPreview extends File { interface FileWithPreview extends File {
preview: string; preview: string;
@ -85,6 +85,8 @@ export default function FormImage() {
const router = useRouter(); const router = useRouter();
const editor = useRef(null); const editor = useRef(null);
type ImageSchema = z.infer<typeof imageSchema>; type ImageSchema = z.infer<typeof imageSchema>;
const params = useParams();
const locale = params?.locale;
const t = useTranslations("Form"); const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
@ -466,7 +468,7 @@ export default function FormImage() {
tags: string; tags: string;
isYoutube: boolean; isYoutube: boolean;
isInternationalMedia: boolean; isInternationalMedia: boolean;
attachFromScheduleId?: number; // ✅ Tambahkan properti ini attachFromScheduleId?: number;
} = { } = {
...data, ...data,
title: finalTitle, title: finalTitle,
@ -951,18 +953,18 @@ export default function FormImage() {
<div className="pt-3"> <div className="pt-3">
<div className="flex flex-row justify-between items-center"> <div className="flex flex-row justify-between items-center">
{selectedArticleId && ( {selectedArticleId && (
<Link <Button
href={`/contributor/content/image/update-seo/${selectedArticleId}`} className="mb-2"
size="sm"
variant={"outline"}
color="primary"
onClick={() => {
const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
window.open(url, "_blank", "noopener,noreferrer");
}}
> >
<Button {t("update")}
className="mb-2" </Button>
size="sm"
variant={"outline"}
color="primary"
>
{t("update")}
</Button>
</Link>
)} )}
</div> </div>
</div> </div>

352
components/form/content/image-update-seo.tsx
View File

@ -62,6 +62,8 @@ import {
Legend, Legend,
ChartOptions, ChartOptions,
} from "chart.js"; } from "chart.js";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/routing";
ChartJS.register(ArcElement, Tooltip, Legend); ChartJS.register(ArcElement, Tooltip, Legend);
const imageSchema = z.object({ const imageSchema = z.object({
@ -127,6 +129,7 @@ export default function FormImageSeo() {
let progressInfo: any = []; let progressInfo: any = [];
let counterUpdateProgress = 0; let counterUpdateProgress = 0;
const t = useTranslations("Form");
const [progressList, setProgressList] = useState<any>([]); const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0; let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false); const [isStartUpload, setIsStartUpload] = useState(false);
@ -567,61 +570,174 @@ export default function FormImageSeo() {
return ( return (
<div> <div>
<div className="mx-5 mb-3"> <form onSubmit={handleSubmit(onSubmit)}>
<Card> <div className="mx-5 mb-3">
<Tabs defaultValue="content" className=""> <Card className="p-0">
<TabsList className="grid w-[300px] grid-cols-2 bg-slate-400 my-3 mx-3 "> <Tabs defaultValue="content" className="p-0">
<TabsTrigger <TabsList className="grid w-[300px] grid-cols-2 bg-slate-400 my-3 mx-3 ">
value="content" <TabsTrigger
className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md" value="content"
> className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md"
Konten >
</TabsTrigger> Konten
<TabsTrigger </TabsTrigger>
value="checker" <TabsTrigger
className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md" value="checker"
> className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md"
Checker >
</TabsTrigger> Checker
</TabsList> </TabsTrigger>
<TabsContent value="content"> </TabsList>
{articleData !== undefined ? ( <TabsContent value="content">
<CardContent className="space-y-2 my-3"> {articleData !== undefined ? (
<CardContent className="space-y-2 my-3">
<div className="space-y-1">
<Label htmlFor="name">Judul</Label>
<Input id="name" defaultValue={articleData?.title} />
</div>
<div className="flex flex-row gap-3 w-full">
<div className="w-full">
<Label htmlFor="username">Main Keyword</Label>
<Textarea
id="mainKeyword"
value={articleData?.mainKeyword}
/>
</div>
<div className="w-full">
<Label htmlFor="username">Additional Keyword</Label>
<Textarea
id="additionalKeywords"
value={articleData?.additionalKeywords}
/>
</div>
</div>
<div className="flex flex-row gap-3 w-full">
<div className="w-full">
<Label htmlFor="username">Meta Title</Label>
<Textarea
id="metaTitle"
value={articleData?.metaTitle}
/>
</div>
<div className="w-full">
<Label htmlFor="username">Meta Description</Label>
<Textarea
id="metaDescription"
value={articleData?.metaDescription}
/>
</div>
</div>
<div className="py-3">
<Label>Article</Label>
<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>
</CardContent>
) : (
""
)}
</TabsContent>
<TabsContent value="checker">
<CardContent className="space-y-2">
<div className="flex items-start justify-start">
<Pie
data={data}
options={options}
className="text-left flex items-start justify-start"
/>
</div>
<div className="space-y-1"> <div className="space-y-1">
<Label htmlFor="name">Judul</Label> <Accordion type="single" collapsible className="w-full ">
<Input id="name" defaultValue={articleData?.title} /> <AccordionItem
</div> value="error"
<div className="flex flex-row gap-3 w-full"> className="border border-red-600"
<div className="w-full"> >
<Label htmlFor="username">Main Keyword</Label> <AccordionTrigger>
<Textarea <div className="flex items-center">
id="mainKeyword" <XIcon className="text-red-600" />
value={articleData?.mainKeyword} Errors ({errorSEO.length})
/> </div>
</div> </AccordionTrigger>
<div className="w-full"> <AccordionContent>
<Label htmlFor="username">Additional Keyword</Label> {errorSEO.length > 0 ? (
<Textarea <ul className="list-disc list-inside">
id="additionalKeywords" {errorSEO.map((item, index) => (
value={articleData?.additionalKeywords} <li key={index}>{item}</li>
/> ))}
</div> </ul>
</div> ) : (
<div className="flex flex-row gap-3 w-full"> <p>No errors found.</p>
<div className="w-full"> )}
<Label htmlFor="username">Meta Title</Label> </AccordionContent>
<Textarea id="metaTitle" value={articleData?.metaTitle} /> </AccordionItem>
</div>
<div className="w-full"> <AccordionItem
<Label htmlFor="username">Meta Description</Label> value="warning"
<Textarea className="border border-yellow-600"
id="metaDescription" >
value={articleData?.metaDescription} <AccordionTrigger>
/> <div className="flex items-center">
</div> <XIcon className="text-yellow-600" />
Warnings ({warningSEO.length})
</div>
</AccordionTrigger>
<AccordionContent>
{warningSEO.length > 0 ? (
<ul className="list-disc list-inside">
{warningSEO.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No warnings found.</p>
)}
</AccordionContent>
</AccordionItem>
<AccordionItem
value="optimized"
className="border border-green-600"
>
<AccordionTrigger>
<div className="flex items-center">
<XIcon className="text-green-600" />
Optimized ({optimizedSEO.length})
</div>
</AccordionTrigger>
<AccordionContent>
{optimizedSEO.length > 0 ? (
<ul className="list-disc list-inside">
{optimizedSEO.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No optimizations found.</p>
)}
</AccordionContent>
</AccordionItem>
</Accordion>
</div> </div>
<div className="py-3"> <div className="py-3">
<Label>Article</Label> <div className="flex flex-row justify-between items-center mb-3">
<Label>Article</Label>
<Button size="md" className="bg-blue-500">
Select Image From Content Bank
</Button>
</div>
<Controller <Controller
control={control} control={control}
name="description" name="description"
@ -639,119 +755,25 @@ export default function FormImageSeo() {
)} )}
</div> </div>
</CardContent> </CardContent>
) : ( </TabsContent>
"" </Tabs>
)} <div className="flex flex-row justify-star gap-3 mx-5">
</TabsContent> <div className="mb-3">
<TabsContent value="checker"> <Link href={"/contributor/content/image"}>
<CardContent className="space-y-2"> <Button type="submit" color="primary" variant="outline">
<div className="flex items-start justify-start"> {t("cancel")}
<Pie </Button>
data={data} </Link>
options={options} </div>
className="text-left flex items-start justify-start" <div className="mb-3">
/> <Button type="submit" color="primary">
</div> {t("submit")}
<div className="space-y-1"> </Button>
<Accordion type="single" collapsible className="w-full "> </div>
<AccordionItem </div>
value="error" </Card>
className="border border-red-600" </div>
> </form>
<AccordionTrigger>
<div className="flex items-center">
<XIcon className="text-red-600" />
Errors ({errorSEO.length})
</div>
</AccordionTrigger>
<AccordionContent>
{errorSEO.length > 0 ? (
<ul className="list-disc list-inside">
{errorSEO.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No errors found.</p>
)}
</AccordionContent>
</AccordionItem>
<AccordionItem
value="warning"
className="border border-yellow-600"
>
<AccordionTrigger>
<div className="flex items-center">
<XIcon className="text-yellow-600" />
Warnings ({warningSEO.length})
</div>
</AccordionTrigger>
<AccordionContent>
{warningSEO.length > 0 ? (
<ul className="list-disc list-inside">
{warningSEO.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No warnings found.</p>
)}
</AccordionContent>
</AccordionItem>
<AccordionItem
value="optimized"
className="border border-green-600"
>
<AccordionTrigger>
<div className="flex items-center">
<XIcon className="text-green-600" />
Optimized ({optimizedSEO.length})
</div>
</AccordionTrigger>
<AccordionContent>
{optimizedSEO.length > 0 ? (
<ul className="list-disc list-inside">
{optimizedSEO.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No optimizations found.</p>
)}
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
<div className="py-3">
<div className="flex flex-row justify-between items-center mb-3">
<Label>Article</Label>
<Button size="md" className="bg-blue-500">
Select Image From Content Bank
</Button>
</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>
</CardContent>
</TabsContent>
</Tabs>
</Card>
</div>
</div> </div>
); );
} }

2
components/form/content/teks-form.tsx
View File

@ -945,6 +945,8 @@ export default function FormTeks() {
{selectedArticleId && ( {selectedArticleId && (
<Link <Link
href={`/contributor/content/teks/update-seo/${selectedArticleId}`} href={`/contributor/content/teks/update-seo/${selectedArticleId}`}
target="_blank"
rel="noopener noreferrer"
> >
<Button <Button
className="mb-2" className="mb-2"

2
components/form/content/video-form.tsx
View File

@ -944,6 +944,8 @@ export default function FormVideo() {
{selectedArticleId && ( {selectedArticleId && (
<Link <Link
href={`/contributor/content/video/update-seo/${selectedArticleId}`} href={`/contributor/content/video/update-seo/${selectedArticleId}`}
target="_blank"
rel="noopener noreferrer"
> >
<Button <Button
className="mb-2" className="mb-2"

80
components/form/task-ta/task-ta-form.tsx
View File

@ -33,7 +33,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { ChevronDown, ChevronUp, Trash2 } from "lucide-react"; import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
import { AudioRecorder } from "react-audio-voice-recorder"; import { AudioRecorder } from "react-audio-voice-recorder";
import FileUploader from "@/components/form/shared/file-uploader"; import FileUploader from "@/components/form/shared/file-uploader";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
@ -42,6 +42,18 @@ import { getCsrfToken } from "@/service/auth";
import { loading } from "@/lib/swal"; import { loading } from "@/lib/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { cn } from "@/lib/utils";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { addDays, format, setDate } from "date-fns";
import { DateRange } from "react-day-picker";
import TimePicker from "react-time-picker";
import "react-time-picker/dist/TimePicker.css";
import "react-clock/dist/Clock.css";
const taskSchema = z.object({ const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -134,6 +146,9 @@ export default function FormTaskTa() {
const [isTextUploadFinish, setIsTextUploadFinish] = useState(false); const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false); const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
const [voiceNoteLink, setVoiceNoteLink] = useState(""); const [voiceNoteLink, setVoiceNoteLink] = useState("");
const [date, setDate] = React.useState<DateRange | undefined>({
from: new Date(2024, 0, 1),
});
const [platformTypeVisible, setPlatformTypeVisible] = useState(false); const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
const [unitSelection, setUnitSelection] = useState({ const [unitSelection, setUnitSelection] = useState({
@ -478,7 +493,7 @@ export default function FormTaskTa() {
}; };
const upload = new Upload(file, { const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/assignment/file/upload`, endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
headers: headers, headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000], retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000, chunkSize: 20_000,
@ -735,6 +750,46 @@ export default function FormTaskTa() {
<Label htmlFor="tugas-harian">Tugas Harian</Label> <Label htmlFor="tugas-harian">Tugas Harian</Label>
</RadioGroup> </RadioGroup>
</div> </div>
<div className="flex flex-col space-y-2 mt-5">
<Label className="mr-3 mb-1">Tanggal</Label>
<Popover>
<PopoverTrigger asChild className="px-0">
<Button
size="md"
id="date"
variant={"outline"}
className={cn(
"w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
!date && "text-muted-foreground"
)}
>
<CalendarIcon size={15} className="mr-3" />
{date?.from ? (
date.to ? (
<>
{format(date.from, "LLL dd, y")} -{" "}
{format(date.to, "LLL dd, y")}
</>
) : (
format(date.from, "LLL dd, y")
)
) : (
<span>Pick a date</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
initialFocus
mode="range"
defaultMonth={date?.from}
selected={date}
onSelect={setDate}
numberOfMonths={1}
/>
</PopoverContent>
</Popover>
</div>
<div className="mt-5 space-y-2"> <div className="mt-5 space-y-2">
<Label>{t("areas-expertise")}</Label> <Label>{t("areas-expertise")}</Label>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
@ -779,27 +834,6 @@ export default function FormTaskTa() {
))} ))}
</div> </div>
</div> </div>
{/* <div className="mt-5">
<Label>Broadcast </Label>
<RadioGroup
value={broadcastType} // Nilai terpilih diambil dari state broadcastType
onValueChange={(value) => setBroadcastType(value)} // Mengatur nilai saat radio berubah
className="flex flex-wrap gap-3"
>
<div className="flex items-center gap-2">
<RadioGroupItem value="all" id="all" />
<Label htmlFor="all">Semua</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="email" id="email" />
<Label htmlFor="email">Email Blast</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="whatsapp" id="whatsapp" />
<Label htmlFor="whatsapp">WhatsApp Blast</Label>
</div>
</RadioGroup>
</div> */}
<div className="mt-5 space-y-2"> <div className="mt-5 space-y-2">
<Label>{t("description")}</Label> <Label>{t("description")}</Label>
<Controller <Controller

877
components/form/task-ta/task-ta-new.tsx
View File

File diff suppressed because it is too large Load Diff

10
components/landing-page/navbar.tsx
View File

@ -102,7 +102,7 @@ const Navbar = () => {
Cookies.remove(cookieName); Cookies.remove(cookieName);
}); });
router.push("/"); window.location.href = "/";
}; };
// const profilePicture = Cookies.get("profile_picture"); // const profilePicture = Cookies.get("profile_picture");
@ -1498,7 +1498,7 @@ const Navbar = () => {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer"> <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
<div> <div>
{/* <Link href={"/"}> <Link href={"/"}>
<button <button
type="submit" type="submit"
className="w-full flex items-center gap-2" className="w-full flex items-center gap-2"
@ -1507,7 +1507,7 @@ const Navbar = () => {
<Icon icon="heroicons:power" className="w-4 h-4" /> <Icon icon="heroicons:power" className="w-4 h-4" />
{t("logOut")} {t("logOut")}
</button> </button>
</Link> */} </Link>
</div> </div>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
@ -1726,7 +1726,7 @@ const Navbar = () => {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer"> <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
<div> <div>
{/* <Link href={"/"}> <Link href={"/"}>
<button <button
type="submit" type="submit"
className="w-full flex items-center gap-2" className="w-full flex items-center gap-2"
@ -1735,7 +1735,7 @@ const Navbar = () => {
<Icon icon="heroicons:power" className="w-4 h-4" /> <Icon icon="heroicons:power" className="w-4 h-4" />
{t("logOut")} {t("logOut")}
</button> </button>
</Link> */} </Link>
</div> </div>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>