feat:change sidebar
This commit is contained in:
parent
1cdfc5bad5
commit
ead5912044
|
|
@ -0,0 +1,243 @@
|
||||||
|
"use client";
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import FullCalendar from "@fullcalendar/react"; // must go before plugins
|
||||||
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||||
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||||
|
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
|
||||||
|
import listPlugin from "@fullcalendar/list";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import ExternalDraggingevent from "./dragging-events";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||||
|
import { Plus } from "lucide-react";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { CalendarEvent, CalendarCategory } from "./data"
|
||||||
|
import {
|
||||||
|
EventContentArg,
|
||||||
|
} from '@fullcalendar/core'
|
||||||
|
import EventModal from "./event-modal";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
|
interface CalendarViewProps {
|
||||||
|
events: CalendarEvent[];
|
||||||
|
categories: CalendarCategory[];
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const CalendarView = ({ events, categories }: CalendarViewProps) => {
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<string[] | null>(null);
|
||||||
|
const [selectedEventDate, setSelectedEventDate] = useState<Date | null>(null);
|
||||||
|
const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
|
||||||
|
const [draggableInitialized, setDraggableInitialized] = useState<boolean>(false);
|
||||||
|
const t = useTranslations("CalendarApp")
|
||||||
|
// event canvas state
|
||||||
|
const [sheetOpen, setSheetOpen] = useState<boolean>(false);
|
||||||
|
const [date, setDate] = React.useState<Date>(new Date());
|
||||||
|
|
||||||
|
const [dragEvents] = useState([
|
||||||
|
{ title: "New Event Planning", id: "101", tag: "business" },
|
||||||
|
{ title: "Meeting", id: "102", tag: "meeting" },
|
||||||
|
{ title: "Generating Reports", id: "103", tag: "holiday" },
|
||||||
|
{ title: "Create New theme", id: "104", tag: "etc" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSelectedCategory(categories?.map((c) => c.value));
|
||||||
|
}, [events, categories]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const draggableEl = document.getElementById("external-events");
|
||||||
|
|
||||||
|
const initDraggable = () => {
|
||||||
|
if (draggableEl) {
|
||||||
|
new Draggable(draggableEl, {
|
||||||
|
itemSelector: ".fc-event",
|
||||||
|
eventData: function (eventEl) {
|
||||||
|
let title = eventEl.getAttribute("title");
|
||||||
|
let id = eventEl.getAttribute("data");
|
||||||
|
let event = dragEvents.find((e) => e.id === id);
|
||||||
|
let tag = event ? event.tag : "";
|
||||||
|
return {
|
||||||
|
title: title,
|
||||||
|
id: id,
|
||||||
|
extendedProps: {
|
||||||
|
calendar: tag,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (dragEvents.length > 0) {
|
||||||
|
initDraggable();
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
draggableEl?.removeEventListener("mousedown", initDraggable);
|
||||||
|
};
|
||||||
|
}, [dragEvents]);
|
||||||
|
// event click
|
||||||
|
const handleEventClick = (arg: any) => {
|
||||||
|
setSelectedEventDate(null);
|
||||||
|
setSheetOpen(true);
|
||||||
|
setSelectedEvent(arg);
|
||||||
|
wait().then(() => (document.body.style.pointerEvents = "auto"));
|
||||||
|
};
|
||||||
|
// handle close modal
|
||||||
|
const handleCloseModal = () => {
|
||||||
|
setSheetOpen(false);
|
||||||
|
setSelectedEvent(null);
|
||||||
|
setSelectedEventDate(null);
|
||||||
|
};
|
||||||
|
const handleDateClick = (arg: any) => {
|
||||||
|
setSheetOpen(true);
|
||||||
|
setSelectedEventDate(arg);
|
||||||
|
setSelectedEvent(null);
|
||||||
|
wait().then(() => (document.body.style.pointerEvents = "auto"));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCategorySelection = (category: string) => {
|
||||||
|
if (selectedCategory && selectedCategory.includes(category)) {
|
||||||
|
setSelectedCategory(selectedCategory.filter((c) => c !== category));
|
||||||
|
} else {
|
||||||
|
setSelectedCategory([...selectedCategory || [], category]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClassName = (arg: EventContentArg) => {
|
||||||
|
|
||||||
|
if (arg.event.extendedProps.calendar === "holiday") {
|
||||||
|
return "destructive";
|
||||||
|
}
|
||||||
|
else if (arg.event.extendedProps.calendar === "business") {
|
||||||
|
return "primary";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "personal") {
|
||||||
|
return "success";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "family") {
|
||||||
|
return "info";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "etc") {
|
||||||
|
return "info";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "meeting") {
|
||||||
|
return "warning";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return "primary";
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredEvents = events?.filter((event) =>
|
||||||
|
selectedCategory?.includes(event.extendedProps.calendar)
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-12 gap-6 divide-x divide-border">
|
||||||
|
<Card className="col-span-12 lg:col-span-4 2xl:col-span-3 pb-5">
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<CardHeader className="border-none mb-2 pt-5">
|
||||||
|
<Button
|
||||||
|
onClick={handleDateClick}
|
||||||
|
className="dark:bg-background dark:text-foreground"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 me-1" />
|
||||||
|
{t("addEvent")}
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<div className="px-3">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={date}
|
||||||
|
onSelect={(s) => {
|
||||||
|
handleDateClick(s);
|
||||||
|
}}
|
||||||
|
className="rounded-md border w-full p-0 border-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="external-events" className=" space-y-1.5 mt-6 px-4">
|
||||||
|
<p className="text-sm font-medium text-default-700 mb-3">
|
||||||
|
{t("shortDesc")}
|
||||||
|
</p>
|
||||||
|
{dragEvents.map((event) => (
|
||||||
|
<ExternalDraggingevent key={event.id} event={event} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="py-4 text-default-800 font-semibold text-xs uppercase mt-4 mb-2 px-4">
|
||||||
|
{t("filter")}
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-3 px-4">
|
||||||
|
<li className=" flex gap-3">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedCategory?.length === categories?.length}
|
||||||
|
onClick={() => {
|
||||||
|
if (selectedCategory?.length === categories?.length) {
|
||||||
|
setSelectedCategory([]);
|
||||||
|
} else {
|
||||||
|
setSelectedCategory(categories.map((c) => c.value));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label>All</Label>
|
||||||
|
</li>
|
||||||
|
{categories?.map((category) => (
|
||||||
|
<li className="flex gap-3 " key={category.value}>
|
||||||
|
<Checkbox
|
||||||
|
className={category.className}
|
||||||
|
id={category.label}
|
||||||
|
checked={selectedCategory?.includes(category.value)}
|
||||||
|
onClick={() => handleCategorySelection(category.value)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor={category.label}>{category.label}</Label>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="col-span-12 lg:col-span-8 2xl:col-span-9 pt-5">
|
||||||
|
<CardContent className="dashcode-app-calendar">
|
||||||
|
<FullCalendar
|
||||||
|
plugins={[
|
||||||
|
dayGridPlugin,
|
||||||
|
timeGridPlugin,
|
||||||
|
interactionPlugin,
|
||||||
|
listPlugin,
|
||||||
|
]}
|
||||||
|
headerToolbar={{
|
||||||
|
left: "prev,next today",
|
||||||
|
center: "title",
|
||||||
|
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
|
||||||
|
}}
|
||||||
|
events={filteredEvents}
|
||||||
|
editable={true}
|
||||||
|
rerenderDelay={10}
|
||||||
|
eventDurationEditable={false}
|
||||||
|
selectable={true}
|
||||||
|
selectMirror={true}
|
||||||
|
droppable={true}
|
||||||
|
dayMaxEvents={2}
|
||||||
|
weekends={true}
|
||||||
|
eventClassNames={handleClassName}
|
||||||
|
dateClick={handleDateClick}
|
||||||
|
eventClick={handleEventClick}
|
||||||
|
initialView="dayGridMonth"
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<EventModal
|
||||||
|
open={sheetOpen}
|
||||||
|
onClose={handleCloseModal}
|
||||||
|
categories={categories}
|
||||||
|
event={selectedEvent}
|
||||||
|
selectedDate={selectedEventDate}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalendarView;
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
import { faker } from "@faker-js/faker";
|
||||||
|
|
||||||
|
const date = new Date();
|
||||||
|
const prevDay = new Date().getDate() - 1;
|
||||||
|
const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
|
||||||
|
|
||||||
|
// prettier-ignore
|
||||||
|
const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
|
||||||
|
// prettier-ignore
|
||||||
|
const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
|
||||||
|
export const calendarEvents = [
|
||||||
|
{
|
||||||
|
id: faker.string.uuid() ,
|
||||||
|
title: "All Day Event",
|
||||||
|
start: date,
|
||||||
|
end: nextDay,
|
||||||
|
allDay: false,
|
||||||
|
//className: "warning",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "business",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Meeting With Client",
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
|
||||||
|
allDay: true,
|
||||||
|
//className: "success",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "personal",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Lunch",
|
||||||
|
allDay: true,
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -9),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
|
||||||
|
// className: "info",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "family",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Birthday Party",
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
|
||||||
|
allDay: true,
|
||||||
|
//className: "primary",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "meeting",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Birthday Party",
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
|
||||||
|
allDay: true,
|
||||||
|
// className: "danger",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "holiday",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Monthly Meeting",
|
||||||
|
start: nextMonth,
|
||||||
|
end: nextMonth,
|
||||||
|
allDay: true,
|
||||||
|
//className: "primary",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "business",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const calendarCategories = [
|
||||||
|
{
|
||||||
|
label: "Business",
|
||||||
|
value: "business",
|
||||||
|
activeClass: "ring-primary-500 bg-primary-500",
|
||||||
|
className: "group-hover:border-blue-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Personal",
|
||||||
|
value: "personal",
|
||||||
|
activeClass: "ring-success-500 bg-success-500",
|
||||||
|
className: " group-hover:border-green-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Holiday",
|
||||||
|
value: "holiday",
|
||||||
|
activeClass: "ring-danger-500 bg-danger-500",
|
||||||
|
className: " group-hover:border-red-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Family",
|
||||||
|
value: "family",
|
||||||
|
activeClass: "ring-info-500 bg-info-500",
|
||||||
|
className: " group-hover:border-cyan-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Meeting",
|
||||||
|
value: "meeting",
|
||||||
|
activeClass: "ring-warning-500 bg-warning-500",
|
||||||
|
className: " group-hover:border-yellow-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Etc",
|
||||||
|
value: "etc",
|
||||||
|
activeClass: "ring-info-500 bg-info-500",
|
||||||
|
className: " group-hover:border-cyan-500",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const categories = [
|
||||||
|
{
|
||||||
|
label: "Business",
|
||||||
|
value: "business",
|
||||||
|
className: "data-[state=checked]:bg-primary data-[state=checked]:ring-primary",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Personal",
|
||||||
|
value: "personal",
|
||||||
|
|
||||||
|
className: "data-[state=checked]:bg-success data-[state=checked]:ring-success",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Holiday",
|
||||||
|
value: "holiday",
|
||||||
|
className: "data-[state=checked]:bg-destructive data-[state=checked]:ring-destructive ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Family",
|
||||||
|
value: "family",
|
||||||
|
className: "data-[state=checked]:bg-info data-[state=checked]:ring-info ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Meeting",
|
||||||
|
value: "meeting",
|
||||||
|
className: "data-[state=checked]:bg-warning data-[state=checked]:ring-warning",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Etc",
|
||||||
|
value: "etc",
|
||||||
|
className: "data-[state=checked]:bg-info data-[state=checked]:ring-info",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export type CalendarEvent = (typeof calendarEvents)[number]
|
||||||
|
export type CalendarCategory = (typeof calendarCategories)[number]
|
||||||
|
export type Category = (typeof categories)[number]
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
const ExternalDraggingevent = ({ event }: any) => {
|
||||||
|
const { title, id, tag } = event;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
title={title}
|
||||||
|
data-id={id}
|
||||||
|
className="fc-event px-4 py-1.5 bg-default-100 dark:bg-default-300 rounded text-sm flex items-center gap-2 shadow-sm cursor-move" >
|
||||||
|
<span
|
||||||
|
className={cn("h-2 w-2 rounded-full block", {
|
||||||
|
"bg-primary": tag === "business",
|
||||||
|
"bg-warning": tag === "meeting",
|
||||||
|
"bg-destructive": tag === "holiday",
|
||||||
|
"bg-info": tag === "etc",
|
||||||
|
})}
|
||||||
|
></span>
|
||||||
|
<span className="text-sm font-medium text-default-900">{title}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExternalDraggingevent;
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
"use client"
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { useForm, Controller } from "react-hook-form";
|
||||||
|
import { cn, } from "@/lib/utils";
|
||||||
|
import { format } from "date-fns"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { Loader2, CalendarIcon } from "lucide-react";
|
||||||
|
import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
|
||||||
|
import { CalendarCategory } from "./data";
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
title: z.string().min(3, { message: "Required" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const EventModal = ({ open, onClose, categories, event, selectedDate }: {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
categories: any;
|
||||||
|
event: any;
|
||||||
|
selectedDate: any
|
||||||
|
}) => {
|
||||||
|
const [startDate, setStartDate] = useState<Date>(new Date());
|
||||||
|
const [endDate, setEndDate] = useState<Date>(new Date());
|
||||||
|
const [isPending, startTransition] = React.useTransition();
|
||||||
|
const [calendarProps, setCalendarProps] = React.useState<any>(categories[0].value);
|
||||||
|
// delete modal state
|
||||||
|
const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
|
||||||
|
const [eventIdToDelete, setEventIdToDelete] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
control,
|
||||||
|
reset,
|
||||||
|
setValue,
|
||||||
|
formState: { errors },
|
||||||
|
handleSubmit,
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
mode: "all",
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (data: any) => {
|
||||||
|
startTransition(async () => {
|
||||||
|
if (!event) {
|
||||||
|
data.start = startDate;
|
||||||
|
data.end = endDate;
|
||||||
|
data.allDay = false;
|
||||||
|
data.extendedProps = {
|
||||||
|
calendar: calendarProps,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (event) {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedDate) {
|
||||||
|
setStartDate(selectedDate.date);
|
||||||
|
setEndDate(selectedDate.date);
|
||||||
|
}
|
||||||
|
if (event) {
|
||||||
|
setStartDate(event?.event?.start);
|
||||||
|
setEndDate(event?.event?.end);
|
||||||
|
const eventCalendar = event?.event?.extendedProps?.calendar;
|
||||||
|
if (eventCalendar) {
|
||||||
|
setCalendarProps(eventCalendar);
|
||||||
|
} else {
|
||||||
|
setCalendarProps(categories[0].value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setValue("title", event?.event?.title || "");
|
||||||
|
}, [event, selectedDate, open, categories, setValue]);
|
||||||
|
|
||||||
|
const onDeleteEventAction = async () => {
|
||||||
|
try {
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenDeleteModal = (eventId: string) => {
|
||||||
|
setEventIdToDelete(eventId);
|
||||||
|
setDeleteModalOpen(true);
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DeleteConfirmationDialog
|
||||||
|
open={deleteModalOpen}
|
||||||
|
onClose={() => setDeleteModalOpen(false)}
|
||||||
|
onConfirm={onDeleteEventAction}
|
||||||
|
defaultToast={false}
|
||||||
|
/>
|
||||||
|
<Dialog open={open} onOpenChange={onClose}>
|
||||||
|
<DialogContent
|
||||||
|
onPointerDownOutside={onClose}
|
||||||
|
>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{event ? "Edit Event" : "Create Event"} {event?.title}
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="mt-6 h-full">
|
||||||
|
<form className="h-full" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<div className="space-y-4 pb-5 ">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="title">Event Name</Label>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter Event Name"
|
||||||
|
{...register("title")}
|
||||||
|
/>
|
||||||
|
{errors?.title?.message && (
|
||||||
|
<div className="text-destructive text-sm">
|
||||||
|
{typeof errors?.title?.message === 'string'
|
||||||
|
? errors?.title?.message
|
||||||
|
: JSON.stringify(errors?.title?.message)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="startDate">Start Date </Label>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="md"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
|
||||||
|
!startDate && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{startDate ? (
|
||||||
|
format(startDate, "PP")
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
<CalendarIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Controller
|
||||||
|
name="startDate"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={startDate}
|
||||||
|
onSelect={(date) => setStartDate(date as Date)}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="endDate">End Date</Label>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="md"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
|
||||||
|
!endDate && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{endDate ? (
|
||||||
|
format(endDate, "PP")
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
<CalendarIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Controller
|
||||||
|
name="endDate"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={endDate}
|
||||||
|
onSelect={(date) => setEndDate(date as Date)}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="calendarProps">Label </Label>
|
||||||
|
<Controller
|
||||||
|
name="calendarProps"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Select
|
||||||
|
value={calendarProps}
|
||||||
|
onValueChange={(data) => setCalendarProps(data)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Label" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{categories.map((category: CalendarCategory) => (
|
||||||
|
<SelectItem
|
||||||
|
value={category.value}
|
||||||
|
key={category.value}
|
||||||
|
>
|
||||||
|
{category.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2 mt-10">
|
||||||
|
<Button type="submit" disabled={isPending} className="flex-1">
|
||||||
|
{isPending ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="me-2 h-4 w-4 animate-spin" />
|
||||||
|
{event ? "Updating..." : "Adding..."}
|
||||||
|
</>
|
||||||
|
) : event ? (
|
||||||
|
"Update Event"
|
||||||
|
) : (
|
||||||
|
"Add Event"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
{event && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
color="destructive"
|
||||||
|
onClick={() => handleOpenDeleteModal(event?.event?.id)}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EventModal;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Calender",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { getEvents, getCategories } from "./utils";
|
||||||
|
import { Category } from "./data"
|
||||||
|
import CalendarView from "./calender-view";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const CalenderPage = async () => {
|
||||||
|
const events = await getEvents();
|
||||||
|
const categories = await getCategories();
|
||||||
|
const formattedCategories = categories.map((category: Category) => ({
|
||||||
|
...category,
|
||||||
|
activeClass: "",
|
||||||
|
}));
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<CalendarView events={events} categories={formattedCategories} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalenderPage;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { calendarEvents, categories } from "./data";
|
||||||
|
|
||||||
|
// get events
|
||||||
|
export const getEvents = async () => {
|
||||||
|
return calendarEvents;
|
||||||
|
};
|
||||||
|
|
||||||
|
// get categories
|
||||||
|
export const getCategories = async () => {
|
||||||
|
return categories;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Blog",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const BlogPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BlogPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Communication",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const CommunicationPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CommunicationPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Video",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const VideoPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default VideoPage;
|
||||||
|
|
@ -0,0 +1,243 @@
|
||||||
|
"use client";
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import FullCalendar from "@fullcalendar/react"; // must go before plugins
|
||||||
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||||
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||||
|
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
|
||||||
|
import listPlugin from "@fullcalendar/list";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import ExternalDraggingevent from "./dragging-events";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||||
|
import { Plus } from "lucide-react";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { CalendarEvent, CalendarCategory } from "./data"
|
||||||
|
import {
|
||||||
|
EventContentArg,
|
||||||
|
} from '@fullcalendar/core'
|
||||||
|
import EventModal from "./event-modal";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
|
interface CalendarViewProps {
|
||||||
|
events: CalendarEvent[];
|
||||||
|
categories: CalendarCategory[];
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const CalendarView = ({ events, categories }: CalendarViewProps) => {
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<string[] | null>(null);
|
||||||
|
const [selectedEventDate, setSelectedEventDate] = useState<Date | null>(null);
|
||||||
|
const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
|
||||||
|
const [draggableInitialized, setDraggableInitialized] = useState<boolean>(false);
|
||||||
|
const t = useTranslations("CalendarApp")
|
||||||
|
// event canvas state
|
||||||
|
const [sheetOpen, setSheetOpen] = useState<boolean>(false);
|
||||||
|
const [date, setDate] = React.useState<Date>(new Date());
|
||||||
|
|
||||||
|
const [dragEvents] = useState([
|
||||||
|
{ title: "New Event Planning", id: "101", tag: "business" },
|
||||||
|
{ title: "Meeting", id: "102", tag: "meeting" },
|
||||||
|
{ title: "Generating Reports", id: "103", tag: "holiday" },
|
||||||
|
{ title: "Create New theme", id: "104", tag: "etc" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSelectedCategory(categories?.map((c) => c.value));
|
||||||
|
}, [events, categories]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const draggableEl = document.getElementById("external-events");
|
||||||
|
|
||||||
|
const initDraggable = () => {
|
||||||
|
if (draggableEl) {
|
||||||
|
new Draggable(draggableEl, {
|
||||||
|
itemSelector: ".fc-event",
|
||||||
|
eventData: function (eventEl) {
|
||||||
|
let title = eventEl.getAttribute("title");
|
||||||
|
let id = eventEl.getAttribute("data");
|
||||||
|
let event = dragEvents.find((e) => e.id === id);
|
||||||
|
let tag = event ? event.tag : "";
|
||||||
|
return {
|
||||||
|
title: title,
|
||||||
|
id: id,
|
||||||
|
extendedProps: {
|
||||||
|
calendar: tag,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (dragEvents.length > 0) {
|
||||||
|
initDraggable();
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
draggableEl?.removeEventListener("mousedown", initDraggable);
|
||||||
|
};
|
||||||
|
}, [dragEvents]);
|
||||||
|
// event click
|
||||||
|
const handleEventClick = (arg: any) => {
|
||||||
|
setSelectedEventDate(null);
|
||||||
|
setSheetOpen(true);
|
||||||
|
setSelectedEvent(arg);
|
||||||
|
wait().then(() => (document.body.style.pointerEvents = "auto"));
|
||||||
|
};
|
||||||
|
// handle close modal
|
||||||
|
const handleCloseModal = () => {
|
||||||
|
setSheetOpen(false);
|
||||||
|
setSelectedEvent(null);
|
||||||
|
setSelectedEventDate(null);
|
||||||
|
};
|
||||||
|
const handleDateClick = (arg: any) => {
|
||||||
|
setSheetOpen(true);
|
||||||
|
setSelectedEventDate(arg);
|
||||||
|
setSelectedEvent(null);
|
||||||
|
wait().then(() => (document.body.style.pointerEvents = "auto"));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCategorySelection = (category: string) => {
|
||||||
|
if (selectedCategory && selectedCategory.includes(category)) {
|
||||||
|
setSelectedCategory(selectedCategory.filter((c) => c !== category));
|
||||||
|
} else {
|
||||||
|
setSelectedCategory([...selectedCategory || [], category]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClassName = (arg: EventContentArg) => {
|
||||||
|
|
||||||
|
if (arg.event.extendedProps.calendar === "holiday") {
|
||||||
|
return "destructive";
|
||||||
|
}
|
||||||
|
else if (arg.event.extendedProps.calendar === "business") {
|
||||||
|
return "primary";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "personal") {
|
||||||
|
return "success";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "family") {
|
||||||
|
return "info";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "etc") {
|
||||||
|
return "info";
|
||||||
|
} else if (arg.event.extendedProps.calendar === "meeting") {
|
||||||
|
return "warning";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return "primary";
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredEvents = events?.filter((event) =>
|
||||||
|
selectedCategory?.includes(event.extendedProps.calendar)
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-12 gap-6 divide-x divide-border">
|
||||||
|
<Card className="col-span-12 lg:col-span-4 2xl:col-span-3 pb-5">
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<CardHeader className="border-none mb-2 pt-5">
|
||||||
|
<Button
|
||||||
|
onClick={handleDateClick}
|
||||||
|
className="dark:bg-background dark:text-foreground"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 me-1" />
|
||||||
|
{t("addEvent")}
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<div className="px-3">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={date}
|
||||||
|
onSelect={(s) => {
|
||||||
|
handleDateClick(s);
|
||||||
|
}}
|
||||||
|
className="rounded-md border w-full p-0 border-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="external-events" className=" space-y-1.5 mt-6 px-4">
|
||||||
|
<p className="text-sm font-medium text-default-700 mb-3">
|
||||||
|
{t("shortDesc")}
|
||||||
|
</p>
|
||||||
|
{dragEvents.map((event) => (
|
||||||
|
<ExternalDraggingevent key={event.id} event={event} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="py-4 text-default-800 font-semibold text-xs uppercase mt-4 mb-2 px-4">
|
||||||
|
{t("filter")}
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-3 px-4">
|
||||||
|
<li className=" flex gap-3">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedCategory?.length === categories?.length}
|
||||||
|
onClick={() => {
|
||||||
|
if (selectedCategory?.length === categories?.length) {
|
||||||
|
setSelectedCategory([]);
|
||||||
|
} else {
|
||||||
|
setSelectedCategory(categories.map((c) => c.value));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label>All</Label>
|
||||||
|
</li>
|
||||||
|
{categories?.map((category) => (
|
||||||
|
<li className="flex gap-3 " key={category.value}>
|
||||||
|
<Checkbox
|
||||||
|
className={category.className}
|
||||||
|
id={category.label}
|
||||||
|
checked={selectedCategory?.includes(category.value)}
|
||||||
|
onClick={() => handleCategorySelection(category.value)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor={category.label}>{category.label}</Label>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="col-span-12 lg:col-span-8 2xl:col-span-9 pt-5">
|
||||||
|
<CardContent className="dashcode-app-calendar">
|
||||||
|
<FullCalendar
|
||||||
|
plugins={[
|
||||||
|
dayGridPlugin,
|
||||||
|
timeGridPlugin,
|
||||||
|
interactionPlugin,
|
||||||
|
listPlugin,
|
||||||
|
]}
|
||||||
|
headerToolbar={{
|
||||||
|
left: "prev,next today",
|
||||||
|
center: "title",
|
||||||
|
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
|
||||||
|
}}
|
||||||
|
events={filteredEvents}
|
||||||
|
editable={true}
|
||||||
|
rerenderDelay={10}
|
||||||
|
eventDurationEditable={false}
|
||||||
|
selectable={true}
|
||||||
|
selectMirror={true}
|
||||||
|
droppable={true}
|
||||||
|
dayMaxEvents={2}
|
||||||
|
weekends={true}
|
||||||
|
eventClassNames={handleClassName}
|
||||||
|
dateClick={handleDateClick}
|
||||||
|
eventClick={handleEventClick}
|
||||||
|
initialView="dayGridMonth"
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<EventModal
|
||||||
|
open={sheetOpen}
|
||||||
|
onClose={handleCloseModal}
|
||||||
|
categories={categories}
|
||||||
|
event={selectedEvent}
|
||||||
|
selectedDate={selectedEventDate}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalendarView;
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
import { faker } from "@faker-js/faker";
|
||||||
|
|
||||||
|
const date = new Date();
|
||||||
|
const prevDay = new Date().getDate() - 1;
|
||||||
|
const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
|
||||||
|
|
||||||
|
// prettier-ignore
|
||||||
|
const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
|
||||||
|
// prettier-ignore
|
||||||
|
const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
|
||||||
|
export const calendarEvents = [
|
||||||
|
{
|
||||||
|
id: faker.string.uuid() ,
|
||||||
|
title: "All Day Event",
|
||||||
|
start: date,
|
||||||
|
end: nextDay,
|
||||||
|
allDay: false,
|
||||||
|
//className: "warning",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "business",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Meeting With Client",
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
|
||||||
|
allDay: true,
|
||||||
|
//className: "success",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "personal",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Lunch",
|
||||||
|
allDay: true,
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -9),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
|
||||||
|
// className: "info",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "family",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Birthday Party",
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
|
||||||
|
allDay: true,
|
||||||
|
//className: "primary",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "meeting",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Birthday Party",
|
||||||
|
start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
|
||||||
|
end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
|
||||||
|
allDay: true,
|
||||||
|
// className: "danger",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "holiday",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: faker.string.uuid(),
|
||||||
|
title: "Monthly Meeting",
|
||||||
|
start: nextMonth,
|
||||||
|
end: nextMonth,
|
||||||
|
allDay: true,
|
||||||
|
//className: "primary",
|
||||||
|
extendedProps: {
|
||||||
|
calendar: "business",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const calendarCategories = [
|
||||||
|
{
|
||||||
|
label: "Business",
|
||||||
|
value: "business",
|
||||||
|
activeClass: "ring-primary-500 bg-primary-500",
|
||||||
|
className: "group-hover:border-blue-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Personal",
|
||||||
|
value: "personal",
|
||||||
|
activeClass: "ring-success-500 bg-success-500",
|
||||||
|
className: " group-hover:border-green-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Holiday",
|
||||||
|
value: "holiday",
|
||||||
|
activeClass: "ring-danger-500 bg-danger-500",
|
||||||
|
className: " group-hover:border-red-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Family",
|
||||||
|
value: "family",
|
||||||
|
activeClass: "ring-info-500 bg-info-500",
|
||||||
|
className: " group-hover:border-cyan-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Meeting",
|
||||||
|
value: "meeting",
|
||||||
|
activeClass: "ring-warning-500 bg-warning-500",
|
||||||
|
className: " group-hover:border-yellow-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Etc",
|
||||||
|
value: "etc",
|
||||||
|
activeClass: "ring-info-500 bg-info-500",
|
||||||
|
className: " group-hover:border-cyan-500",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const categories = [
|
||||||
|
{
|
||||||
|
label: "Business",
|
||||||
|
value: "business",
|
||||||
|
className: "data-[state=checked]:bg-primary data-[state=checked]:ring-primary",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Personal",
|
||||||
|
value: "personal",
|
||||||
|
|
||||||
|
className: "data-[state=checked]:bg-success data-[state=checked]:ring-success",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Holiday",
|
||||||
|
value: "holiday",
|
||||||
|
className: "data-[state=checked]:bg-destructive data-[state=checked]:ring-destructive ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Family",
|
||||||
|
value: "family",
|
||||||
|
className: "data-[state=checked]:bg-info data-[state=checked]:ring-info ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Meeting",
|
||||||
|
value: "meeting",
|
||||||
|
className: "data-[state=checked]:bg-warning data-[state=checked]:ring-warning",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Etc",
|
||||||
|
value: "etc",
|
||||||
|
className: "data-[state=checked]:bg-info data-[state=checked]:ring-info",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export type CalendarEvent = (typeof calendarEvents)[number]
|
||||||
|
export type CalendarCategory = (typeof calendarCategories)[number]
|
||||||
|
export type Category = (typeof categories)[number]
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
const ExternalDraggingevent = ({ event }: any) => {
|
||||||
|
const { title, id, tag } = event;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
title={title}
|
||||||
|
data-id={id}
|
||||||
|
className="fc-event px-4 py-1.5 bg-default-100 dark:bg-default-300 rounded text-sm flex items-center gap-2 shadow-sm cursor-move" >
|
||||||
|
<span
|
||||||
|
className={cn("h-2 w-2 rounded-full block", {
|
||||||
|
"bg-primary": tag === "business",
|
||||||
|
"bg-warning": tag === "meeting",
|
||||||
|
"bg-destructive": tag === "holiday",
|
||||||
|
"bg-info": tag === "etc",
|
||||||
|
})}
|
||||||
|
></span>
|
||||||
|
<span className="text-sm font-medium text-default-900">{title}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExternalDraggingevent;
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
"use client"
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { useForm, Controller } from "react-hook-form";
|
||||||
|
import { cn, } from "@/lib/utils";
|
||||||
|
import { format } from "date-fns"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { Loader2, CalendarIcon } from "lucide-react";
|
||||||
|
import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
|
||||||
|
import { CalendarCategory } from "./data";
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
title: z.string().min(3, { message: "Required" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const EventModal = ({ open, onClose, categories, event, selectedDate }: {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
categories: any;
|
||||||
|
event: any;
|
||||||
|
selectedDate: any
|
||||||
|
}) => {
|
||||||
|
const [startDate, setStartDate] = useState<Date>(new Date());
|
||||||
|
const [endDate, setEndDate] = useState<Date>(new Date());
|
||||||
|
const [isPending, startTransition] = React.useTransition();
|
||||||
|
const [calendarProps, setCalendarProps] = React.useState<any>(categories[0].value);
|
||||||
|
// delete modal state
|
||||||
|
const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
|
||||||
|
const [eventIdToDelete, setEventIdToDelete] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
control,
|
||||||
|
reset,
|
||||||
|
setValue,
|
||||||
|
formState: { errors },
|
||||||
|
handleSubmit,
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
mode: "all",
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (data: any) => {
|
||||||
|
startTransition(async () => {
|
||||||
|
if (!event) {
|
||||||
|
data.start = startDate;
|
||||||
|
data.end = endDate;
|
||||||
|
data.allDay = false;
|
||||||
|
data.extendedProps = {
|
||||||
|
calendar: calendarProps,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (event) {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedDate) {
|
||||||
|
setStartDate(selectedDate.date);
|
||||||
|
setEndDate(selectedDate.date);
|
||||||
|
}
|
||||||
|
if (event) {
|
||||||
|
setStartDate(event?.event?.start);
|
||||||
|
setEndDate(event?.event?.end);
|
||||||
|
const eventCalendar = event?.event?.extendedProps?.calendar;
|
||||||
|
if (eventCalendar) {
|
||||||
|
setCalendarProps(eventCalendar);
|
||||||
|
} else {
|
||||||
|
setCalendarProps(categories[0].value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setValue("title", event?.event?.title || "");
|
||||||
|
}, [event, selectedDate, open, categories, setValue]);
|
||||||
|
|
||||||
|
const onDeleteEventAction = async () => {
|
||||||
|
try {
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenDeleteModal = (eventId: string) => {
|
||||||
|
setEventIdToDelete(eventId);
|
||||||
|
setDeleteModalOpen(true);
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DeleteConfirmationDialog
|
||||||
|
open={deleteModalOpen}
|
||||||
|
onClose={() => setDeleteModalOpen(false)}
|
||||||
|
onConfirm={onDeleteEventAction}
|
||||||
|
defaultToast={false}
|
||||||
|
/>
|
||||||
|
<Dialog open={open} onOpenChange={onClose}>
|
||||||
|
<DialogContent
|
||||||
|
onPointerDownOutside={onClose}
|
||||||
|
>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{event ? "Edit Event" : "Create Event"} {event?.title}
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="mt-6 h-full">
|
||||||
|
<form className="h-full" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<div className="space-y-4 pb-5 ">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="title">Event Name</Label>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter Event Name"
|
||||||
|
{...register("title")}
|
||||||
|
/>
|
||||||
|
{errors?.title?.message && (
|
||||||
|
<div className="text-destructive text-sm">
|
||||||
|
{typeof errors?.title?.message === 'string'
|
||||||
|
? errors?.title?.message
|
||||||
|
: JSON.stringify(errors?.title?.message)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="startDate">Start Date </Label>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="md"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
|
||||||
|
!startDate && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{startDate ? (
|
||||||
|
format(startDate, "PP")
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
<CalendarIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Controller
|
||||||
|
name="startDate"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={startDate}
|
||||||
|
onSelect={(date) => setStartDate(date as Date)}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="endDate">End Date</Label>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="md"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
|
||||||
|
!endDate && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{endDate ? (
|
||||||
|
format(endDate, "PP")
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
<CalendarIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Controller
|
||||||
|
name="endDate"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={endDate}
|
||||||
|
onSelect={(date) => setEndDate(date as Date)}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="calendarProps">Label </Label>
|
||||||
|
<Controller
|
||||||
|
name="calendarProps"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Select
|
||||||
|
value={calendarProps}
|
||||||
|
onValueChange={(data) => setCalendarProps(data)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Label" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{categories.map((category: CalendarCategory) => (
|
||||||
|
<SelectItem
|
||||||
|
value={category.value}
|
||||||
|
key={category.value}
|
||||||
|
>
|
||||||
|
{category.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2 mt-10">
|
||||||
|
<Button type="submit" disabled={isPending} className="flex-1">
|
||||||
|
{isPending ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="me-2 h-4 w-4 animate-spin" />
|
||||||
|
{event ? "Updating..." : "Adding..."}
|
||||||
|
</>
|
||||||
|
) : event ? (
|
||||||
|
"Update Event"
|
||||||
|
) : (
|
||||||
|
"Add Event"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
{event && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
color="destructive"
|
||||||
|
onClick={() => handleOpenDeleteModal(event?.event?.id)}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EventModal;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Audio",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { getEvents, getCategories } from "./utils";
|
||||||
|
import { Category } from "./data"
|
||||||
|
import CalendarView from "./calender-view";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const CalenderPage = async () => {
|
||||||
|
const events = await getEvents();
|
||||||
|
const categories = await getCategories();
|
||||||
|
const formattedCategories = categories.map((category: Category) => ({
|
||||||
|
...category,
|
||||||
|
activeClass: "",
|
||||||
|
}));
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<CalendarView events={events} categories={formattedCategories} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalenderPage;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { calendarEvents, categories } from "./data";
|
||||||
|
|
||||||
|
// get events
|
||||||
|
export const getEvents = async () => {
|
||||||
|
return calendarEvents;
|
||||||
|
};
|
||||||
|
|
||||||
|
// get categories
|
||||||
|
export const getCategories = async () => {
|
||||||
|
return categories;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Image",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const ImagePage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImagePage;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { calendarEvents, categories } from "./data";
|
||||||
|
|
||||||
|
// get events
|
||||||
|
export const getEvents = async () => {
|
||||||
|
return calendarEvents;
|
||||||
|
};
|
||||||
|
|
||||||
|
// get categories
|
||||||
|
export const getCategories = async () => {
|
||||||
|
return categories;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Nulis",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const CalenderPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalenderPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Spit",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const CalenderPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalenderPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Teks",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const TeksPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TeksPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Contest",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const ContestPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContestPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Kurasi Konten",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const CuratedContentPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CuratedContentPage;
|
||||||
|
|
@ -159,6 +159,6 @@ const DashboardPage = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default DashboardPage;
|
export default DashboardPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Mediahub",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const MediahubPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediahubPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Medsos Mediahub",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const MedsosMediahubPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MedsosMediahubPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Event",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const EventPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EventPage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Press Conference",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const PressConferencePage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PressConferencePage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Press Release",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const PressReleasePage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PressReleasePage;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Task",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const TaskPage = async () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TaskPage;
|
||||||
217
lib/menus.ts
217
lib/menus.ts
|
|
@ -1,5 +1,3 @@
|
||||||
|
|
||||||
|
|
||||||
export type SubChildren = {
|
export type SubChildren = {
|
||||||
href: string;
|
href: string;
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -31,7 +29,6 @@ export type Group = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export function getMenuList(pathname: string, t: any): Group[] {
|
export function getMenuList(pathname: string, t: any): Group[] {
|
||||||
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
groupLabel: t("dashboard"),
|
groupLabel: t("dashboard"),
|
||||||
|
|
@ -42,40 +39,61 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
||||||
href: "/dashboard/analytics",
|
href: "/dashboard/analytics",
|
||||||
label: t("dashboard"),
|
label: t("dashboard"),
|
||||||
active: pathname.includes("/dashboard"),
|
active: pathname.includes("/dashboard"),
|
||||||
icon: "heroicons-outline:home",
|
icon: "material-symbols:dashboard",
|
||||||
|
submenus: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "content",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "content",
|
||||||
|
href: "/content/image",
|
||||||
|
label: t("konten"),
|
||||||
|
active: pathname.includes("/content"),
|
||||||
|
icon: "line-md:youtube",
|
||||||
submenus: [
|
submenus: [
|
||||||
{
|
{
|
||||||
href: "/dashboard/analytics",
|
href: "/content/image",
|
||||||
label: t("analytics"),
|
label: t("image"),
|
||||||
active: pathname === "/dashboard/analytics",
|
active: pathname === "/content/image",
|
||||||
icon: "heroicons:arrow-trending-up",
|
icon: "ic:outline-image",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: "/dashboard/dash-ecom",
|
href: "/content/audio-visual",
|
||||||
label: t("ecommerce"),
|
label: t("audio visual"),
|
||||||
active: pathname === "/dashboard/dash-ecom",
|
active: pathname === "/content/audio-visual",
|
||||||
icon: "heroicons:shopping-cart",
|
icon: "line-md:youtube",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: "/dashboard/project",
|
href: "/content/teks",
|
||||||
label: t("project"),
|
label: t("text"),
|
||||||
active: pathname === "/dashboard/project",
|
active: pathname === "/content/teks",
|
||||||
icon: "heroicons:document",
|
icon: "heroicons:document",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: "/dashboard/crm",
|
href: "/content/audio",
|
||||||
label: t("crm"),
|
label: t("audio"),
|
||||||
active: pathname === "/dashboard/crm",
|
active: pathname === "/content/audio",
|
||||||
icon: "heroicons:share",
|
icon: "heroicons:share",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: "/dashboard/banking",
|
href: "/content/spit",
|
||||||
label: t("banking"),
|
label: t("spit"),
|
||||||
active: pathname === "/dashboard/banking",
|
active: pathname === "/content/spit",
|
||||||
|
icon: "heroicons:credit-card",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/content/nulis-ai",
|
||||||
|
label: t("nulis ai"),
|
||||||
|
active: pathname === "/content/nulisai",
|
||||||
icon: "heroicons:credit-card",
|
icon: "heroicons:credit-card",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
|
|
@ -85,14 +103,149 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
groupLabel: "",
|
groupLabel: "",
|
||||||
id: "changelog",
|
id: "agenda-setting",
|
||||||
menus: [
|
menus: [
|
||||||
{
|
{
|
||||||
id: "changelog",
|
id: "agenda-setting",
|
||||||
href: "/changelog",
|
href: "/agenda-setting",
|
||||||
label: t("changelog"),
|
label: t("agenda setting"),
|
||||||
active: pathname.includes("/changelog"),
|
active: pathname.includes("/agenda-setting"),
|
||||||
|
icon: "iconoir:journal-page",
|
||||||
|
submenus: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "planning",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "planning",
|
||||||
|
href: "/planning",
|
||||||
|
label: t("perencanaan"),
|
||||||
|
active: pathname.includes("/planning"),
|
||||||
|
icon: "pajamas:planning",
|
||||||
|
submenus: [
|
||||||
|
{
|
||||||
|
href: "/planning/mediahub",
|
||||||
|
label: t("mediaHub"),
|
||||||
|
active: pathname === "/planning/mediahub",
|
||||||
icon: "heroicons:arrow-trending-up",
|
icon: "heroicons:arrow-trending-up",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/planning/medsos-mediahub",
|
||||||
|
label: t("medsos mediahub"),
|
||||||
|
active: pathname === "/planning/medsos-mediahub",
|
||||||
|
icon: "heroicons:shopping-cart",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "task",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "task",
|
||||||
|
href: "/task",
|
||||||
|
label: t("penugasan"),
|
||||||
|
active: pathname.includes("/task"),
|
||||||
|
icon: "fluent:clipboard-task-add-24-regular",
|
||||||
|
submenus: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "schedule",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "schedule",
|
||||||
|
href: "/schedule",
|
||||||
|
label: t("schedule"),
|
||||||
|
active: pathname.includes("/schedule"),
|
||||||
|
icon: "uil:schedule",
|
||||||
|
submenus: [
|
||||||
|
{
|
||||||
|
href: "/schedule/press-conference",
|
||||||
|
label: t("konfesensi pers"),
|
||||||
|
active: pathname === "/schedule/press-conference",
|
||||||
|
icon: "heroicons:arrow-trending-up",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/schedule/event",
|
||||||
|
label: t("event"),
|
||||||
|
active: pathname === "/schedule/event",
|
||||||
|
icon: "heroicons:shopping-cart",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/schedule/press-release",
|
||||||
|
label: t("pers rilis"),
|
||||||
|
active: pathname === "/schedule/press-release",
|
||||||
|
icon: "heroicons:shopping-cart",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "blog",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "blog",
|
||||||
|
href: "/blog",
|
||||||
|
label: t("indeks"),
|
||||||
|
active: pathname.includes("/blog"),
|
||||||
|
icon: "fluent:clipboard-text-32-regular",
|
||||||
|
submenus: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "curatedcontent",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "curatedcontent",
|
||||||
|
href: "/curated-content",
|
||||||
|
label: t("kurasi konten"),
|
||||||
|
active: pathname.includes("/curated-content"),
|
||||||
|
icon: "pixelarticons:calendar-text",
|
||||||
|
submenus: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "communication",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "communication",
|
||||||
|
href: "/communication",
|
||||||
|
label: t("komunikasi"),
|
||||||
|
active: pathname.includes("/communication"),
|
||||||
|
icon: "token:chat",
|
||||||
|
submenus: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupLabel: "",
|
||||||
|
id: "contest",
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "contest",
|
||||||
|
href: "/contest",
|
||||||
|
label: t("lomba"),
|
||||||
|
active: pathname.includes("/contest"),
|
||||||
|
icon: "ic:outline-emoji-events",
|
||||||
submenus: [],
|
submenus: [],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -704,7 +857,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
||||||
label: t("inputFile"),
|
label: t("inputFile"),
|
||||||
active: pathname === "/forms/input-file",
|
active: pathname === "/forms/input-file",
|
||||||
icon: "",
|
icon: "",
|
||||||
children: []
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: "/forms/form-validation",
|
href: "/forms/form-validation",
|
||||||
|
|
@ -1171,10 +1324,10 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
groupLabel: "",
|
groupLabel: "",
|
||||||
|
|
@ -2391,5 +2544,3 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue