diff --git a/app/[locale]/(protected)/app/calendar/calender-view.tsx b/app/[locale]/(protected)/app/calendar/calender-view.tsx
deleted file mode 100644
index 4e49d138..00000000
--- a/app/[locale]/(protected)/app/calendar/calender-view.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-"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", { defaultValue: "Add Event" })}
-              </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", { defaultValue: "Short Desc" })}
-              </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", { defaultValue: "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;
diff --git a/app/[locale]/(protected)/app/calendar/data.ts b/app/[locale]/(protected)/app/calendar/data.ts
deleted file mode 100644
index 398810f4..00000000
--- a/app/[locale]/(protected)/app/calendar/data.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-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: "calendar-all-day-event-001",
-    title: "All Day Event",
-    start: date,
-    end: nextDay,
-    allDay: false,
-    //className: "warning",
-    extendedProps: {
-      calendar: "business",
-    },
-  },
-  {
-    id: "calendar-meeting-client-002",
-    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: "calendar-lunch-003",
-    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: "calendar-birthday-party-004",
-    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: "calendar-birthday-party-005",
-    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: "calendar-monthly-meeting-006",
-    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]
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/calendar/dragging-events.tsx b/app/[locale]/(protected)/app/calendar/dragging-events.tsx
deleted file mode 100644
index 56683eaa..00000000
--- a/app/[locale]/(protected)/app/calendar/dragging-events.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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;
diff --git a/app/[locale]/(protected)/app/calendar/event-modal.tsx b/app/[locale]/(protected)/app/calendar/event-modal.tsx
deleted file mode 100644
index 87ebc61f..00000000
--- a/app/[locale]/(protected)/app/calendar/event-modal.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-"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(() => {
-      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;
diff --git a/app/[locale]/(protected)/app/calendar/layout.tsx b/app/[locale]/(protected)/app/calendar/layout.tsx
deleted file mode 100644
index dae6bbc9..00000000
--- a/app/[locale]/(protected)/app/calendar/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Calender",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/app/calendar/page.tsx b/app/[locale]/(protected)/app/calendar/page.tsx
deleted file mode 100644
index 266a6f7b..00000000
--- a/app/[locale]/(protected)/app/calendar/page.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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;
diff --git a/app/[locale]/(protected)/app/calendar/utils.ts b/app/[locale]/(protected)/app/calendar/utils.ts
deleted file mode 100644
index e4862dd2..00000000
--- a/app/[locale]/(protected)/app/calendar/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { calendarEvents, categories } from "./data";
-
-// get events
-export const getEvents = async () => {
-    return calendarEvents;
-};
-
-// get categories
-export const getCategories = async () => {
-    return categories;
-}
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx b/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx
deleted file mode 100644
index be240857..00000000
--- a/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { Icon } from "@/components/ui/icon";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useMediaQuery } from "@/hooks/use-media-query";
-import { Contact, ProfileUser } from "@/app/api/chat/data";
-import { useChatConfig } from "@/hooks/use-chat";
-
-const ChatHeader = ({ contact }: { contact: any }) => {
-    let active = true;
-    const isLg = useMediaQuery("(max-width: 1024px)");
-
-    const [chatConfig, setChatConfig] = useChatConfig()
-
-    return (
-        <div className="flex  items-center">
-            <div className="flex-1 flex gap-3 items-center">
-                {isLg && (
-                    <Button size="icon" variant='ghost' color="secondary" onClick={() => setChatConfig({
-                        ...chatConfig,
-                        isOpen: true
-                    })}>
-                        <Icon icon="heroicons-outline:menu-alt-1" className="w-5 h-5" />
-                    </Button>
-                )}
-                <div className="relative inline-block">
-                    <Avatar className="border-none shadow-none bg-transparent hover:bg-transparent">
-                        <AvatarImage src={contact?.avatar?.src} alt="" />
-                        <AvatarFallback>{contact?.fullName?.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                    <Badge
-                        className=" h-2 w-2  p-0 ring-1 ring-border ring-offset-[1px]  absolute top-2 -end-0.5"
-                        color={active ? "success" : "secondary"}
-                    ></Badge>
-                </div>
-                <div className="hidden lg:block">
-                    <div className="text-default-800 text-sm font-medium mb-0.5 ">
-                        <span className="relative">{contact?.fullName}</span>
-                    </div>
-                    <div className="text-default-600 text-xs font-normal">
-                        {active ? "Active Now" : "Offline"}
-                    </div>
-                </div>
-            </div>
-            <div className="flex-none flex gap-2">
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button
-                                type="button"
-                                size="icon"
-                                className="rounded-full bg-default-100 text-default-900 hover:bg-default-100 hover:ring-0 hover:ring-transparent"
-                            >
-                                <Icon icon="heroicons-outline:phone" className="text-xl" />
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom" align="end">
-                            <p>Start a voice call</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button
-                                type="button"
-                                size="icon"
-                                className="rounded-full bg-default-100 text-default-900 hover:bg-default-100 hover:ring-0 hover:ring-transparent"
-                            >
-                                <Icon icon="heroicons-outline:video-camera" className="text-xl" />
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom" align="end">
-                            <p>Start a video call</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-                {!isLg && (
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    onClick={() => setChatConfig({ ...chatConfig, showInfo: !chatConfig.showInfo })}
-                                    type="button"
-                                    size="icon"
-                                    className={cn(
-                                        "rounded-full bg-default-100 text-primary hover:bg-default-100 hover:ring-0 hover:ring-transparent",
-                                        {
-                                            "text-default-900": !chatConfig.showInfo,
-                                        }
-                                    )}
-
-                                >
-                                    <span className="text-xl ">
-                                        {chatConfig.showInfo ? (
-                                            <Icon icon="heroicons-outline:dots-vertical" className="text-xl" />
-
-                                        ) : (
-                                            <Icon icon="heroicons-outline:dots-horizontal" className="text-xl" />
-                                        )}
-                                    </span>
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent side="bottom" align="end">
-                                <p>Conversation information</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default ChatHeader;
diff --git a/app/[locale]/(protected)/app/chat/[id]/components/info-wrapper.tsx b/app/[locale]/(protected)/app/chat/[id]/components/info-wrapper.tsx
deleted file mode 100644
index c4c21b7b..00000000
--- a/app/[locale]/(protected)/app/chat/[id]/components/info-wrapper.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Card, CardContent } from "@/components/ui/card";
-import { useChatConfig } from '@/hooks/use-chat';
-import { ScrollArea } from '@/components/ui/scroll-area';
-
-const InfoWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [chatConfig] = useChatConfig();
-    if (!chatConfig.showInfo) return null
-    return (
-        <Card className='w-[285px]'>
-            <ScrollArea className='h-full'>
-                <CardContent className='p-0'> {children}</CardContent>
-            </ScrollArea>
-        </Card>
-    )
-}
-
-export default InfoWrapper
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx b/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx
deleted file mode 100644
index 3132f927..00000000
--- a/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Icon } from "@/components/ui/icon";
-import { Annoyed, SendHorizontal } from "lucide-react";
-
-// import data from "@emoji-mart/data";
-// import Picker from "@emoji-mart/react";
-import {
-    Tooltip,
-    TooltipArrow,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Label } from "@/components/ui/label";
-
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover";
-import { postMessageAction } from "@/action/app-actions";
-import { useTheme } from "next-themes";
-
-const MessageFooter = () => {
-    const { theme: mode } = useTheme();
-    const [message, setMessage] = useState("");
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setMessage(e.target.value);
-        e.target.style.height = "auto"; // Reset the height to auto to adjust
-        e.target.style.height = `${e.target.scrollHeight - 15}px`;
-    };
-
-    const handleSelectEmoji = (emoji: any) => {
-        setMessage(message + emoji.native);
-    };
-
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (!message) return;
-        const data: any = {
-            message,
-        };
-
-        await postMessageAction("55fe838e-9a09-4caf-a591-559803309ef1", "sfsfsf");
-        setMessage("");
-
-
-    };
-    return (
-        <>
-
-
-            <div
-                className="w-full flex items-end gap-1 lg:gap-4 lg:px-4 relative px-2 "
-            >
-                <div className="flex-none flex gap-1 absolute md:static top-0 left-1.5 z-10 ">
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900">
-                                    <Icon icon="heroicons-outline:link" className="w-5 h-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Add link</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button
-                                size="icon"
-                                className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900">
-                                <Annoyed className="w-6 h-6 text-default" />
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent side="top" align="start" className="w-fit p-0 shadow-none border-none bottom-0 rtl:left-5 ltr:-left-[110px]">
-                            {/* <Picker
-                                data={data}
-                                onEmojiSelect={handleSelectEmoji}
-                                theme={mode === "dark" ? "dark" : "light"}
-                            /> */}
-                        </PopoverContent>
-                    </Popover>
-
-                </div>
-                <div className="flex-1">
-                    <form onSubmit={handleSubmit}>
-                        <div className="flex  gap-1 relative">
-                            <textarea
-                                value={message}
-                                onChange={handleChange}
-                                placeholder="Type your message..."
-                                className="bg-background focus:outline-none  rounded-xl break-words ps-8  md:ps-3 px-3 flex-1 h-10 pt-2 p-1 pr-8 no-scrollbar "
-                                onKeyDown={(e) => {
-                                    if (e.key === "Enter" && !e.shiftKey) {
-                                        e.preventDefault();
-                                        handleSubmit(e as any);
-                                    }
-                                }}
-                                style={{
-                                    minHeight: "40px",
-                                    maxHeight: "120px",
-                                    overflowY: "auto",
-                                    resize: "none",
-                                }}
-                            />
-
-                            <TooltipProvider>
-                                <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <Button
-                                            size="icon"
-                                            type="submit"
-                                            className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900"
-                                        >
-                                            <Icon
-                                                icon="heroicons-outline:paper-airplane"
-                                                className="transform rotate-[60deg] w-5 h-5"
-                                            />
-                                        </Button>
-                                    </TooltipTrigger>
-                                    <TooltipContent align="end">
-                                        <p>Send Message</p>
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </>
-    );
-};
-
-export default MessageFooter;
diff --git a/app/[locale]/(protected)/app/chat/[id]/page.tsx b/app/[locale]/(protected)/app/chat/[id]/page.tsx
deleted file mode 100644
index 98068e5c..00000000
--- a/app/[locale]/(protected)/app/chat/[id]/page.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-
-import { getChatsByContactId, getProfileUser } from '../utils'
-import { Icon } from "@/components/ui/icon";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Card, CardContent, CardHeader, CardFooter } from "@/components/ui/card";
-import Image from 'next/image';
-import { redirect } from '@/components/navigation';
-import MessageFooter from './components/message-footer';
-import ChatHeader from './components/chat-header';
-import InfoWrapper from './components/info-wrapper';
-import { MoreHorizontal } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-
-const socials = [
-    {
-        name: "facebook",
-        icon: "bi:facebook",
-        link: "#",
-    },
-    {
-        name: "twitter",
-        link: "#",
-        icon: "bi:twitter",
-    },
-    {
-        name: "instagram",
-        link: "#",
-        icon: "bi:instagram",
-    },
-];
-
-const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) => {
- 
-    const { chat, contact } = await getChatsByContactId(id)
-    const profile = await getProfileUser()
-
-    if (!contact) {
-        redirect('/app/chat')
-    }
-
-    return (
-        <>
-            <Card className="h-full flex flex-col flex-1 ">
-                <CardHeader className="flex-none mb-0 border-b border-default-200 py-5">
-                    <ChatHeader contact={contact} />
-                </CardHeader>
-                <CardContent className="  relative flex-1 overflow-y-auto no-scrollbar">
-                    {chat && chat?.chat?.length > 0 ? (
-                        chat?.chat?.map(({ senderId, message, }, index) => (
-                            <div className="block  " key={index}>
-                                {senderId === "e2c1a571-5f7e-4f56-9020-13f98b0eaba2" ? (
-                                    <>
-                                        <div className="flex gap-2 items-start justify-end group w-full mb-4">
-                                            <div className="flex flex-col  gap-1">
-                                                <div className="flex items-center gap-1">
-                                                    <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible ">
-                                                        <DropdownMenu>
-                                                            <DropdownMenuTrigger asChild>
-                                                                <span className="w-7 h-7 rounded-full bg-default-200 flex items-center justify-center">
-                                                                    <MoreHorizontal />
-                                                                </span>
-                                                            </DropdownMenuTrigger>
-                                                            <DropdownMenuContent
-                                                                className="w-fit"
-                                                                align="end"
-                                                                side="top"
-                                                            >
-                                                                <DropdownMenuItem>Remove</DropdownMenuItem>
-                                                                <DropdownMenuItem>Forward</DropdownMenuItem>
-                                                            </DropdownMenuContent>
-                                                        </DropdownMenu>
-                                                    </div>
-                                                    <div className="whitespace-pre-wrap break-all">
-                                                        <div className="bg-default-100 text-default-900 text-sm  p-3 font-normal rounded-md ">
-                                                            {message}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="font-normal text-xs text-default-400 dark:text-default-600 text-start mt-1"> 2:40 pm  </div>
-                                            </div>
-                                            <div className="flex-none self-end -translate-y-5">
-                                                <div className="h-8 w-8 rounded-full ">
-                                                    <Image
-                                                        src={profile?.avatar}
-                                                        alt=""
-                                                        className="block w-full h-full object-cover rounded-full"
-                                                    />
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </>
-                                ) : (
-                                    <div className="flex gap-2 items-start group mb-4">
-                                        <div className="flex-none self-end -translate-y-5">
-                                            <div className="h-8 w-8 rounded-full">
-                                                <Image
-                                                    src={contact?.avatar || `/images/users/user-5.jpg`}
-                                                    alt=""
-                                                    className="block w-full h-full object-cover rounded-full"
-                                                />
-                                            </div>
-
-                                        </div>
-                                        <div className="flex-1 flex flex-col gap-2">
-                                            <div className="flex flex-col   gap-1">
-                                                <div className="flex items-center gap-1">
-                                                    <div className="whitespace-pre-wrap break-all relative z-[1]">
-                                                        <div className="bg-default-100 text-default-900 text-sm  p-3 font-normal rounded-md ">
-                                                            {message}
-                                                        </div>
-                                                    </div>
-                                                    <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible ">
-                                                        <DropdownMenu>
-                                                            <DropdownMenuTrigger asChild>
-                                                                <span className="w-7 h-7 rounded-full bg-default-200 flex items-center justify-center">
-                                                                    <MoreHorizontal />
-                                                                </span>
-                                                            </DropdownMenuTrigger>
-                                                            <DropdownMenuContent
-                                                                className="w-fit"
-                                                                align="end"
-                                                                side="top"
-                                                            >
-                                                                <DropdownMenuItem>Remove</DropdownMenuItem>
-                                                                <DropdownMenuItem>Forward</DropdownMenuItem>
-                                                            </DropdownMenuContent>
-                                                        </DropdownMenu>
-                                                    </div>
-                                                </div>
-                                                <div className="font-normal text-xs text-default-400 dark:text-default-600 text-start mt-1"> 2:40 pm  </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        ))
-                    ) : (
-                        <div className="text-center   absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-                            <Icon icon="typcn:messages" className="h-20 w-20 text-default-300 mx-auto" />
-                            <div className="mt-4 text-lg font-medium text-default-500">No messages </div>
-                            <div className="mt-1 text-sm font-medium text-default-400">{`don't worry, just take a deep breath & say "Hello"`}</div>
-                        </div>
-                    )}
-
-                </CardContent>
-                <CardFooter className="flex-none flex-col px-0 py-4 border-t border-border">
-                    <MessageFooter />
-                </CardFooter>
-            </Card>
-
-            <InfoWrapper>
-                <h4 className="text-xl text-default-900 font-medium mb-8 px-6 mt-6">
-                   About
-                </h4>
-
-                <div className='flex flex-col items-center px-6'>
-                    <Avatar className="h-24 w-24 border-none shadow-none bg-transparent hover:bg-transparent">
-                        <AvatarImage src={contact?.avatar?.src || `/images/users/user-5.jpg`} alt="" />
-                        <AvatarFallback>{contact?.fullName?.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                    <div className="text-center mt-4 ">
-                        <h5 className="text-base text-default-600  font-medium mb-1">
-                            {contact?.fullName}
-                        </h5>
-                        <h6 className="text-xs text-default-600  font-normal">
-                            {contact?.role}
-                        </h6>
-                    </div>
-                </div>
-
-                <ul className="mt-5 px-6 space-y-4 border-b border-default-200  pb-5 ">
-                    <li className="flex justify-between text-sm text-default-600 ">
-                        <div className="flex gap-2 items-start ">
-                            <Icon
-                                icon="heroicons-outline:location-marker"
-                                className="text-base"
-                            />
-                            <span>Location</span>
-                        </div>
-                        <div className="font-medium">Bangladesh</div>
-                    </li>
-                    <li className="flex justify-between text-sm text-default-600 ">
-                        <div className="flex gap-2 items-start">
-                            <Icon icon="heroicons-outline:user" className="text-base" />
-                            <span>Members since</span>
-                        </div>
-                        <div className="font-medium">Oct 2021</div>
-                    </li>
-                    <li className="flex justify-between text-sm text-default-600 ">
-                        <div className="flex gap-2 items-start ">
-                            <Icon icon="heroicons-outline:translate" className="text-base" />
-                            <span>Language</span>
-                        </div>
-                        <div className="font-medium">English</div>
-                    </li>
-                </ul>
-                <ul className="mt-5 px-6 space-y-4 border-b border-default-200  pb-5 ">
-                    {socials?.map((slink, sindex) => (
-                        <li
-                            key={sindex}
-                            className="text-sm text-default-600"
-                        >
-                            <button className="flex gap-2">
-                                <Icon icon={slink.icon} className="text-base" />
-                                <span className="capitalize font-normal text-default-600">
-                                    {slink.name}
-                                </span>
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-                <h4 className="py-4 text-sm px-6 text-default-500  font-medium">
-                    Shared documents
-                </h4>
-                <div className="grid grid-cols-3 gap-2 px-6">
-                    {
-                        ["/images/chat/sd1.png", "/images/chat/sd2.png", "/images/chat/sd3.png", "/images/chat/sd4.png", "/images/chat/sd5.png", "/images/chat/sd6.png"].map((image, index) => (
-                            <Image
-                                key={`image-${index}`}
-                                src={image}
-                                alt=""
-                                width={200}
-                                height={100}
-                                className='w-full h-12 object-cover rounded-md'
-                            />
-
-                        ))
-                    }
-                </div>
-            </InfoWrapper>
-        </>
-    )
-
-}
-
-export default ChatPageSingle
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/chat-wrapper.tsx b/app/[locale]/(protected)/app/chat/chat-wrapper.tsx
deleted file mode 100644
index 408b8f03..00000000
--- a/app/[locale]/(protected)/app/chat/chat-wrapper.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-import { useMediaQuery } from '@/hooks/use-media-query';
-import React from 'react'
-import { useChatConfig } from '@/hooks/use-chat';
-
-const ChatWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [chatConfig, setChatConfig] = useChatConfig();
-    const { isOpen } = chatConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    return (
-        <div className=' app-height flex gap-5 relative'>
-            {!isTablet && isOpen && (
-                <div
-                    onClick={() => setChatConfig({ ...chatConfig, isOpen: false })}
-                    className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
-         backdrop-blur-sm absolute w-full flex-1 inset-0 z-20 rounded-md"
-
-                ></div>
-            )}
-
-            {children}
-        </div>
-    )
-}
-
-export default ChatWrapper
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/components/blank-chat.tsx b/app/[locale]/(protected)/app/chat/components/blank-chat.tsx
deleted file mode 100644
index 0ebea5e7..00000000
--- a/app/[locale]/(protected)/app/chat/components/blank-chat.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-import { Card, CardContent } from "@/components/ui/card";
-import { useMediaQuery } from "@/hooks/use-media-query";
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import { useChatConfig } from "@/hooks/use-chat";
-import { useTranslations } from "next-intl";
-const Blank = () => {
-    const isLg = useMediaQuery("(max-width: 1024px)");
-    const [chatConfig, setChatConfig] = useChatConfig()
-    const t = useTranslations("ChatApp");
-    return (
-        <Card className="flex-1 h-full">
-            <CardContent className="h-full flex justify-center items-center">
-                <div className="text-center flex flex-col items-center">
-                    <Icon icon="uiw:message" className="text-7xl text-default-300" />
-                    <div className="mt-4 text-lg font-medium text-default-500">
-                        {t("blankMessageTitle", { defaultValue: "Blank Message Title" })}
-                    </div>
-                    <p className="mt-1 text-sm font-medium text-default-400">
-                        {t("blankMessageDesc", { defaultValue: "Blank Message Desc" })}
-                    </p>
-                    {isLg && (
-                        <Button className="mt-2" onClick={() => setChatConfig({ ...chatConfig, isOpen: true })}>
-                            Start Conversation
-                        </Button>
-                    )}
-                </div>
-            </CardContent>
-        </Card>
-    );
-};
-
-export default Blank;
diff --git a/app/[locale]/(protected)/app/chat/components/contact-list.tsx b/app/[locale]/(protected)/app/chat/components/contact-list.tsx
deleted file mode 100644
index 5a0f4cbc..00000000
--- a/app/[locale]/(protected)/app/chat/components/contact-list.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-
-'use client'
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import { Icon } from "@/components/ui/icon";
-import { type Contact as ContactType, type Chat as ChatType } from "../utils";
-import { Link, usePathname } from "@/components/navigation";
-import { useChatConfig } from "@/hooks/use-chat";
-
-
-const ContactList = ({ contact }: {
-    contact: ContactType,
-
-}) => {
-    const { avatar, id, fullName, status, about, unreadmessage, date } =
-        contact;
-
-    const pathname = usePathname();
-    const [chatConfig, setChatConfig] = useChatConfig()
-    return (
-        <Link
-            onClick={() => setChatConfig({
-                ...chatConfig,
-                isOpen: false
-            })}
-            href={`/app/chat/${id}`} className={cn(
-                " gap-4 py-2 lg:py-2.5 px-3 border-l-2 border-transparent   hover:bg-default-100 cursor-pointer flex ",
-                {
-                    "lg:bg-default-100 ": `/app/chat/${id}` === pathname
-                }
-            )} >
-
-
-            <div className="flex-1 flex items-center  gap-3 ">
-                <div className="relative inline-block ">
-                    <Avatar className="border-none bg-transparent hover:bg-transparent">
-                        <AvatarImage src={avatar.src} />
-                        <AvatarFallback className="uppercase">
-                            {fullName.slice(0, 2)}
-                        </AvatarFallback>
-                    </Avatar>
-                    <Badge
-                        className=" h-2 w-2  p-0 ring-1 ring-border ring-offset-[1px]   items-center justify-center absolute top-2 -end-[3px]"
-                        color={status === "online" ? "success" : "secondary"}
-                    ></Badge>
-                </div>
-                <div className="block">
-                    <div className="truncate max-w-[120px]">
-                        <span className="text-sm text-default-900 font-medium">
-                            {" "}
-                            {fullName}
-                        </span>
-                    </div>
-                    <div className="truncate  max-w-[120px]">
-                        <span className=" text-xs  text-default-700 ">
-                            {about}
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div className="flex-none  flex-col items-end  gap-2 hidden lg:flex">
-                <span className="text-xs text-default-600 text-end uppercase">
-                    {date}
-                </span>
-                <span
-                    className={cn(
-                        "h-[14px] w-[14px] flex items-center justify-center bg-default-400 rounded-full text-default-foreground text-[10px] font-medium",
-                        {
-                            "bg-[#FFC155]": unreadmessage > 0,
-                        }
-                    )}
-                >
-                    {unreadmessage === 0 ? (
-                        <Icon icon="uil:check" className="text-sm" />
-                    ) : (
-                        unreadmessage
-                    )}
-                </span>
-            </div>
-        </Link>
-    );
-};
-
-export default ContactList;
diff --git a/app/[locale]/(protected)/app/chat/components/my-profile.tsx b/app/[locale]/(protected)/app/chat/components/my-profile.tsx
deleted file mode 100644
index e4ac9362..00000000
--- a/app/[locale]/(protected)/app/chat/components/my-profile.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-import { Icon } from "@/components/ui/icon"
-import { Button } from "@/components/ui/button"
-import { useChatConfig } from "@/hooks/use-chat";
-import { cn } from "@/lib/utils"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { ScrollArea } from "@/components/ui/scroll-area";
-
-const MyProfile = () => {
-    const [chatConfig, setChatConfig] = useChatConfig();
-    let status = "active";
-    return (
-        <div>
-            <div className="flex justify-between gap-1">
-                <div className="flex gap-3">
-                    <div className="flex-none">
-                        <Avatar>
-                            <AvatarImage src="/images/users/user-1.jpg" />
-                            <AvatarFallback>SC</AvatarFallback>
-                        </Avatar>
-                    </div>
-                    <div className="flex-1 text-start">
-                        <div className="text-default-800  text-sm font-medium mb-1">
-                            Jane Cooper
-                            <span className="bg-success inline-block h-2.5 w-2.5 rounded-full ms-3"></span>
-                        </div>
-                        <div className=" text-default-500  text-xs font-normal">
-                            Available
-                        </div>
-                    </div>
-                </div>
-                <Button
-                    size="icon"
-                    className="w-8 h-8"
-                    color="secondary"
-                    rounded="full"
-                    onClick={() => setChatConfig({ ...chatConfig, showProfile: true })}
-                >
-                    <Icon icon="heroicons-outline:dots-horizontal" className="w-4 h-4" />
-                </Button>
-            </div>
-
-            <div className={cn('absolute bg-card rounded-md   h-full start-0 top-0 bottom-0  w-full z-50', {
-                'hidden -start-full': !chatConfig.showProfile
-            })}>
-                <ScrollArea className="h-full">
-                    <div className="p-6">
-                        <div className="flex justify-end">
-                            <Button size="icon" color="secondary" className="w-8 h-8" rounded="full" onClick={() => setChatConfig({ ...chatConfig, showProfile: false })}>
-                                <Icon icon="heroicons-outline:x" className="w-4 h-4" />
-                            </Button>
-                        </div>
-                        <div className="flex flex-col items-center gap-3">
-                            <div className="relative">
-                                <Avatar className="h-16 w-16 border border-default-200 p-1 bg-transparent hover:bg-transparent ">
-                                    <AvatarImage src="/images/users/user-1.jpg" className="rounded-full" />
-                                    <AvatarFallback>SC</AvatarFallback>
-                                </Avatar>
-                                <span
-                                    className={cn("absolute top-3 -end-[3px] h-3 w-3 rounded-full bg-success  border border-primary-foreground",
-                                        {
-                                            "bg-success": status === "active",
-                                            "bg-warning": status === "away",
-                                            "bg-destructive": status === "busy",
-                                            "bg-secondary": status === "offline",
-                                        }
-                                    )}
-                                ></span>
-                            </div>
-                            <div className="text-center">
-                                <div className="text-default-800  text-sm font-medium mb-0.5">
-                                    Jane Cooper
-                                </div>
-                                <div className=" text-default-500  text-xs font-normal">
-                                    Admin
-                                </div>
-                            </div>
-                        </div>
-                        <div className="my-8">
-                            <Label htmlFor="bio" className="mb-2 block text-default-900"> About </Label>
-                            <Textarea id="bio" placeholder="About your self" />
-                        </div>
-                        <div>
-                            <Label htmlFor="status" className="block mb-3 text-default-700">Status</Label>
-                            <RadioGroup defaultValue="comfortable">
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="default" id="active" color="success" />
-                                    <Label htmlFor="active">Active</Label>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="busy" id="busy" color="destructive" />
-                                    <Label htmlFor="busy">Do Not Disturb</Label>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="away" id="away" color="warning" />
-                                    <Label htmlFor="away">Away</Label>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="offline" id="offline" color="warning" />
-                                    <Label htmlFor="offline">Offline</Label>
-                                </div>
-                            </RadioGroup>
-                        </div>
-                        <Button className="mt-7">Logout</Button>
-                    </div>
-                </ScrollArea>
-            </div>
-        </div>
-    );
-};
-
-export default MyProfile;
diff --git a/app/[locale]/(protected)/app/chat/components/search.tsx b/app/[locale]/(protected)/app/chat/components/search.tsx
deleted file mode 100644
index 015c6510..00000000
--- a/app/[locale]/(protected)/app/chat/components/search.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Input } from '@/components/ui/input';
-import React from 'react';
-import {Search as SearchIcon} from "lucide-react"
-const Search = () => {
-  return (
-    <div className='relative'>
-      <SearchIcon className='absolute top-1/2 -translate-y-1/2 start-6 w-4 h-4 text-default-600' />
-      <Input placeholder='Search...'  className='dark:bg-transparent rounded-none border-l-0 border-r-0 dark:border-default-300 focus:border-default-200 ps-12 text-lg font-normal' size="lg"/>
-    </div>
-  );
-};
-
-export default Search;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/layout copy.tsx b/app/[locale]/(protected)/app/chat/layout copy.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/app/chat/layout copy.tsx	
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/app/chat/layout.tsx b/app/[locale]/(protected)/app/chat/layout.tsx
deleted file mode 100644
index ebb69f01..00000000
--- a/app/[locale]/(protected)/app/chat/layout.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-
-import {
-    Card,
-    CardContent,
-    CardHeader,
-} from "@/components/ui/card";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import ContactList from "./components/contact-list";
-import { getContacts } from './utils';
-import MyProfile from './components/my-profile';
-import Search from './components/search';
-import ChatSidebarWrapper from './sidebar-wrapper';
-import ChatWrapper from './chat-wrapper';
-
-
-
-const layout = async ({ children }: { children: React.ReactNode }) => {
-  
-    const contacts = await getContacts()
-    return (
-        <ChatWrapper>
-            <ChatSidebarWrapper>
-                <Card className="h-full pb-0 ">
-                    <CardHeader className="border-none pb-3">
-                        <MyProfile />
-                    </CardHeader>
-                    <CardContent className="pt-0 px-0 h-full ">
-                        <ScrollArea className="lg:h-[calc(100%-62px)]  h-[calc(100%-80px)] ">
-                            <div className='sticky top-0 z-10 bg-card'>
-                                <Search />
-                            </div>
-                            {
-                                contacts?.map((contact) => {
-                                    return (
-                                        <ContactList
-                                            key={contact.id}
-                                            contact={contact}
-                                        />
-                                    )
-                                })
-                            }
-                        </ScrollArea>
-                    </CardContent>
-                </Card>
-            </ChatSidebarWrapper>
-            <div className='flex-1 h-full flex gap-5'>
-                {children}
-            </div>
-        </ChatWrapper>
-    )
-}
-
-export default layout
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/page.tsx b/app/[locale]/(protected)/app/chat/page.tsx
deleted file mode 100644
index ad8133d6..00000000
--- a/app/[locale]/(protected)/app/chat/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Blank from "./components/blank-chat"
-const ChatPage = async () => {
-    
-    return (
-        <Blank />
-    )
-}
-
-export default ChatPage
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/sidebar-wrapper.tsx b/app/[locale]/(protected)/app/chat/sidebar-wrapper.tsx
deleted file mode 100644
index 4d4f3841..00000000
--- a/app/[locale]/(protected)/app/chat/sidebar-wrapper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-import { useMediaQuery } from '@/hooks/use-media-query'
-import { cn } from '@/lib/utils'
-import React from 'react'
-import { useChatConfig } from '@/hooks/use-chat'
-const ChatSidebarWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [chatConfig] = useChatConfig()
-    const { isOpen } = chatConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    if (!isTablet) {
-        return (
-            <div className={cn('absolute h-full  start-0  w-[240px] z-50 ', {
-                '-start-full': !isOpen
-            })}>
-                {children}
-            </div>
-        )
-    }
-    return (
-        <div className='relative w-[320px] h-full '>{children}</div>
-    )
-}
-
-export default ChatSidebarWrapper
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/chat/utils.ts b/app/[locale]/(protected)/app/chat/utils.ts
deleted file mode 100644
index 726773eb..00000000
--- a/app/[locale]/(protected)/app/chat/utils.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { chats, contacts, profileUser } from '@/app/api/chat/data'
-import { baseURL } from '@/config'
-
-
-export const getContacts = async () => {
-  return contacts
-}
-
-// get chats by contact id
-export const getChatsByContactId = async (contactId: string) => {
-  
-   const chat = chats.find(chat => chat.id === contactId)
- const contact =   contacts.find(contact => contact.id === contactId)
-    return {
-        chat,
-        contact
-    }
-}
-// get contact by id 
-export const getContactById = async (contactId: string) => {
-  return contacts.find(contact => contact.id === contactId)
-}
-
-
-// get profile user
-export const getProfileUser = async () => {
-  return profileUser
-}
-export type Chat = typeof chats[number];
-export type Contact = typeof contacts[number];
-export type ProfileUser = typeof profileUser;
-
-// post message
-export const postMessage = async (id: string, data: any) => {
-  const res = await fetch(`${baseURL}/chat/${id}`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(data),
-  });
-  if (!res.ok) {
-    throw new Error(`Error creating task`);
-  }
-  return res.json();
-}
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/email/[id]/components/go-back.tsx b/app/[locale]/(protected)/app/email/[id]/components/go-back.tsx
deleted file mode 100644
index 4eaf85fd..00000000
--- a/app/[locale]/(protected)/app/email/[id]/components/go-back.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-import {
-    MoveLeft,
-
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useRouter } from '@/components/navigation';
-const GoBack = () => {
-    const router = useRouter()
-    return (
-        <Button
-            onClick={router.back}
-            size="icon"
-            className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-        >
-            <MoveLeft className=" h-5 w-5" />
-        </Button>
-    )
-}
-
-export default GoBack
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/email/[id]/page.tsx b/app/[locale]/(protected)/app/email/[id]/page.tsx
deleted file mode 100644
index 25c1ad34..00000000
--- a/app/[locale]/(protected)/app/email/[id]/page.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { Link } from '@/i18n/routing';
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import {
-    Box,
-    Ellipsis,
-    LogOutIcon,
-    Printer,
-    Star,
-} from "lucide-react";
-import Image from "next/image";
-import { getMailById } from "../utils";
-import { Alert } from "@/components/ui/alert";
-import GoBack from "./components/go-back"
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { Icon } from "@/components/ui/icon";
-const MailDetails = async ({ params: { id } }: { params: { id: string }; }) => {
-    const mail = await getMailById(id)
-    if (!mail) {
-        return <Alert color="destructive"> Mail not found</Alert>
-    }
-    return (
-        <Card className=" h-full overflow-auto">
-            <CardHeader className="flex flex-row items-center justify-between p-4 border-b border-solid">
-                <GoBack />
-                <div className="flex gap-3">
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <LogOutIcon className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Forward</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Star className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Favourite</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Box className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Archive</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Printer className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Print</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Ellipsis className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Actions</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-
-                </div>
-            </CardHeader>
-            <CardContent >
-                <p className="text-lg font-semibold text-default-800 mt-6">
-                    Pay bills & win up to 600$ Cashback!
-                </p>
-                <div className="flex items-center mt-4 gap-4">
-                    <Avatar className=" h-8 w-8">
-                        <AvatarImage
-                            src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
-                            alt="Avatar image"
-                        />
-                        <AvatarFallback>JD</AvatarFallback>
-                    </Avatar>
-                    <p className="text-sm text-default-700 font-semibold">John Doe</p>
-                </div>
-                <div className="my-4 border-b border-solid  border-default-200 pb-6 space-y-4 text-default-600 text-base">
-                    <p>Hi Jane Cooper,</p>
-                    <p>
-                        Jornalists call this critical, introductory section the Lede, and
-                        when bridge properly executed, it is that carries your reader from
-                        an headine try at attention-grabbing to the body of your blog post,
-                        if you want to get it right on of these 10 clever ways to omen your
-                        next blog
-                    </p>
-                    <p>
-                        posr with a bang With resrpect, i must disagree with Mr.Zinsser. We
-                        all know the most part of important part of any article is the
-                        title.Without a compelleing title, your reader will not even get to
-                        the first sentence.After the title, however, the first few sentences
-                        of your article are certainly the most important part.
-                    </p>
-                    <div>
-                        <p>Best regards,</p>
-                        <p>Esther Howard</p>
-                    </div>
-                </div>
-                <div className="py-5 flex gap-5 flex-wrap items-center border-b border-solid border-default-200">
-                    <div className="flex flex-col items-center">
-                        <Image
-                            className="w-[150px] h-[95px]"
-                            width={500}
-                            height={300}
-                            src="/images/all-img/inbox-1.png"
-                            alt="mail"
-                        />
-                        <Link className="text-primary mt-1" href="/">Download</Link>
-                    </div>
-                    <div className="flex flex-col items-center">
-                        <Image
-                            className="w-[150px] h-[95px]"
-                            width={500}
-                            height={300}
-                            src="/images/all-img/inbox-2.png"
-                            alt="mail"
-                        />
-                        <Link className="text-primary mt-1" href="/">Download</Link>
-                    </div>
-                    <div className="flex flex-col items-center">
-                        <Image
-                            className="w-[150px] h-[95px]"
-                            width={500}
-                            height={300}
-                            src="/images/all-img/inbox-3.png"
-                            alt="mail"
-                        />
-                        <Link className="text-primary mt-1" href="/">Download</Link>
-                    </div>
-                </div>
-                <Button color="secondary" variant="soft" size="md" className="mt-4">
-                    <Icon icon="heroicons:chat-bubble-left-right" className="h-5 w-5 me-3" /> Reply
-                </Button>
-            </CardContent>
-        </Card>
-    );
-};
-
-export default MailDetails;
diff --git a/app/[locale]/(protected)/app/email/compose.tsx b/app/[locale]/(protected)/app/email/compose.tsx
deleted file mode 100644
index 0c2240c2..00000000
--- a/app/[locale]/(protected)/app/email/compose.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client'
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import Select, { MultiValue } from 'react-select'
-import { Plus } from "lucide-react";
-import Image from "next/image";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { Textarea } from "@/components/ui/textarea";
-
-
-interface Option {
-  value: string;
-  label: string;
-  image?: string;
-}
-
-type Inputs = {
-  subject: string;
-  description: string;
-  mailTo: MultiValue<Option>;
-}
-
-const mailToOptions: Option[] = [
-  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
-  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
-  { value: "rakibul", label: "Rakibul Islam", image: "/images/avatar/av-3.svg" },
-  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
-];
-
-
-const Compose = () => {
-  const t = useTranslations("EmailApp");
-  const [open, setOpen] = useState<boolean>(false);
-  const [value, setValue] = useState<string>('Hello World');
-
-  const {
-    register,
-    handleSubmit,
-    control
-  } = useForm<Inputs>();
-  const onSubmit: SubmitHandler<Inputs> = (data) => {
-    setOpen(false)
-  };
-
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <Button
-        fullWidth
-        size="lg"
-        onClick={() => setOpen(true)}
-        className="dark:bg-background dark:ring-background dark:text-foreground"
-      >
-        <Plus className="w-6 h-6 me-1.5" />
-        {t("compose", { defaultValue: "Compose" })}
-      </Button>
-
-      <DialogContent>
-        <DialogHeader className="mb-6">
-          <DialogTitle> {t("composeEmail", { defaultValue: "Compose Email" })}</DialogTitle>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-3.5">
-          <div className="space-y-1">
-            <Label htmlFor="assignee">To</Label>
-            <Controller
-              name="mailTo"
-              control={control}
-              defaultValue={[]}
-              render={({ field }) => (
-                <Select
-                  className="react-select"
-                   classNamePrefix="select"
-                  {...field}
-                  options={mailToOptions}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm  font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
-                  placeholder="Select..."
-                />
-              )}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="subject">Subject</Label>
-            <Input
-              id="subject"
-              placeholder="Type Subject..."
-              {...register("subject")}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="description">Description</Label>
-           <Textarea placeholder="Hello world" id="description" {...register("description")}/>
-          </div>
-
-
-          <div className="flex justify-end">
-            <Button>Submit</Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default Compose;
diff --git a/app/[locale]/(protected)/app/email/data.ts b/app/[locale]/(protected)/app/email/data.ts
deleted file mode 100644
index aefe4ba9..00000000
--- a/app/[locale]/(protected)/app/email/data.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-
-export const mails = [
-  {
-    id: "fe3aa1aa-c89d-4539-8301-8bf18bd80e87",
-    image: [
-      {
-        image: "/images/avatar/avatar-4.png",
-        label: "Mahedi Amin",
-        value: "mahedi",
-      },
-    ],
-    title: "laboriosam mollitia et enim quasi adipisci quia provident illum",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: false,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "team",
-        label: "team",
-      },
-    ],
-  },
-  {
-    id: "9d7135af-2c69-44f6-a1b5-e7c42126e1e9",
-    image: [
-      {
-        image: "/images/avatar/avatar-2.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: true,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "low",
-        label: "low",
-      },
-    ],
-  },
-  {
-    id: "fff45fba-157c-4a9a-a839-480e4c94f927",
-    image: [
-      {
-        image: "/images/avatar/avatar-1.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    isDone: true,
-    isfav: true,
-    time: "12.00 pm",
-    name: "Ester Howard",
-    isTrash: false,
-    category: [
-      {
-        value: "medium",
-        label: "medium",
-      },
-      {
-        value: "low",
-        label: "low",
-      },
-    ],
-  },
-  {
-    id: "4c5bd598-f951-4a4e-981d-b1f0af0cc917",
-    image: [
-      {
-        image: "/images/avatar/avatar-3.png",
-        label: "Mahedi Amin",
-        value: "mahedi",
-      },
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: false,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "high",
-        label: "high",
-      },
-      {
-        value: "low",
-        label: "low",
-      },
-    ],
-  },
-  {
-    id: "bc1ad0b1-d6f8-42e1-9689-21c8f2814396",
-    image: [
-      {
-        image: "/images/avatar/avatar-5.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: false,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "update",
-        label: "update",
-      },
-    ],
-  },
-  {
-    id: "6f4eabf5-e549-4fd1-a24f-87093ebd31be",
-    image: [
-      {
-        image: "/images/avatar/avatar-5.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: false,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "update",
-        label: "update",
-      },
-    ],
-  },
-  {
-    id: "ed6df190-9141-4048-81d0-1ac067f37e46",
-    image: [
-      {
-        image: "/images/avatar/avatar-5.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: false,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "update",
-        label: "update",
-      },
-    ],
-  },
-  {
-    id: "a296f702-a7ed-4127-a42a-121669b02b1a",
-    image: [
-      {
-        image: "/images/avatar/avatar-5.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: false,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "update",
-        label: "update",
-      },
-    ],
-  },
-  {
-    id: "6d4be8c8-a382-4d4a-8df5-a2234e69b57f",
-    image: [
-      {
-        image: "/images/avatar/avatar-5.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    name: "Ester Howard",
-    isfav: false,
-    time: "12.00 pm",
-    isTrash: false,
-    category: [
-      {
-        value: "update",
-        label: "update",
-      }
-    ]
-  }
-];
-
-export type Mail = (typeof mails)[number];
diff --git a/app/[locale]/(protected)/app/email/layout copy.tsx b/app/[locale]/(protected)/app/email/layout copy.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/app/email/layout copy.tsx	
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/app/email/layout.tsx b/app/[locale]/(protected)/app/email/layout.tsx
deleted file mode 100644
index 04f11dfa..00000000
--- a/app/[locale]/(protected)/app/email/layout.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Metadata } from "next";
-import MailWrapper from "./mail-wrapper";
-import MailSidebarWrapper from "./sidebar-wrapper";
-import { Card, CardContent } from "@/components/ui/card";
-import Compose from "./compose";
-import Nav from "@/components/nav";
-import { ScrollArea } from "@/components/ui/scroll-area";
-export const metadata: Metadata = {
-  title: "Mail",
-  description: "Mail Application",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-
-  return <MailWrapper>
-    <div className="flex gap-5  h-full ">
-      <MailSidebarWrapper>
-        <Card className=" h-full   ">
-          <CardContent className=" h-full space-y-2 pt-6 px-0">
-            <div className="px-5">
-              <Compose />
-            </div>
-            <ScrollArea className="h-[calc(100%-30px)]">
-              <Nav
-                links={[
-                  {
-                    title: "Inbox",
-                    icon: "uil:image-v",
-                    active: true,
-                  },
-                  {
-                    title: "Starred",
-                    icon: "heroicons:star",
-                    active: false,
-                  },
-                  {
-                    title: "Sent",
-                    icon: "heroicons:paper-airplane",
-                    active: false,
-                  },
-                  {
-                    title: "Drafts",
-                    icon: "heroicons:pencil-square",
-                    active: false,
-                  },
-                  {
-                    title: "Spam",
-                    icon: "heroicons:information-circle",
-                    active: false,
-                  },
-                  {
-                    title: "Trash",
-                    icon: "heroicons:trash",
-                    active: false,
-                  },
-                ]}
-              />
-              <div className="space-y-2 mt-3">
-                <p className="text-sm font-medium text-default-900 px-5">TAGS</p>
-                <Nav
-                  dotStyle
-                  links={[
-                    {
-                      title: "personal",
-                      active: true,
-                    },
-                    {
-                      title: "social",
-                      active: false,
-                    },
-                    {
-                      title: "promotions",
-                      active: false,
-                    },
-                    {
-                      title: "business",
-                      active: false,
-                    },
-                  ]}
-                />
-              </div>
-            </ScrollArea>
-          </CardContent>
-        </Card>
-      </MailSidebarWrapper>
-      <div className="flex-1 w-full h-full">
-        {children}
-      </div>
-    </div>
-  </MailWrapper>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/app/email/mail-header.tsx b/app/[locale]/(protected)/app/email/mail-header.tsx
deleted file mode 100644
index 20ef554f..00000000
--- a/app/[locale]/(protected)/app/email/mail-header.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { MoreVertical, Search } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import { Checkbox } from "@/components/ui/checkbox";
-import ToggleMailSidebar from "./toggle-mail-sidebar";
-
-const MailHeader = () => {
-  const actions = [
-    {
-      name: "Reset Sort",
-      icon: "heroicons-outline:sort-ascending",
-    },
-    {
-      name: "Sort A-Z ",
-      icon: "heroicons-outline:sort-ascending",
-    },
-    {
-      name: "Sort Z-A ",
-      icon: "heroicons-outline:sort-descending",
-    },
-  ];
-  return (
-    <div className="flex gap-2">
-      <div className="flex-1 flex items-center gap-1">
-        <ToggleMailSidebar />
-        <Checkbox className="w-4 h-4 text-default-400 dark:bg-default-300" />
-        <Input
-          placeholder="Search Mail"
-          className="max-w-[180px] border-none font-medium dark:bg-transparent"
-        />
-      </div>
-      <div className="flex-none">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="icon" className="w-8 h-8 rounded-full bg-default-100">
-              <MoreVertical className="w-5 h-5 text-default hover:text-default-foreground" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="p-0 rounded-md overflow-hidden"
-          >
-            {actions.map((action, index) => (
-              <DropdownMenuItem
-                key={`action-${index}`}
-                className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
-              >
-                <Icon
-                  icon={action.icon}
-                  className="group-hover:text-primary-foreground w-4 h-4"
-                />
-                <span className="text-default-700 group-hover:text-primary-foreground">
-                  {action.name}
-                </span>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-};
-
-export default MailHeader;
diff --git a/app/[locale]/(protected)/app/email/mail-wrapper.tsx b/app/[locale]/(protected)/app/email/mail-wrapper.tsx
deleted file mode 100644
index dc8dbd60..00000000
--- a/app/[locale]/(protected)/app/email/mail-wrapper.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-import { useMediaQuery } from '@/hooks/use-media-query';
-import { useMailConfig } from '@/hooks/use-mail'
-import React from 'react'
-
-const MailWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [mailConfig, setMailConfig] = useMailConfig();
-    const { isOpen } = mailConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    return (
-        <div className=' relative app-height'>
-            {!isTablet && isOpen && (
-                <div
-                    onClick={() => setMailConfig({ ...mailConfig, isOpen: false })}
-                    className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
-         backdrop-blur-sm absolute w-full flex-1 inset-0 z-20 rounded-md"
-
-                ></div>
-            )}
-
-            {children}
-        </div>
-    )
-}
-
-export default MailWrapper
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/email/mail.tsx b/app/[locale]/(protected)/app/email/mail.tsx
deleted file mode 100644
index e55523a0..00000000
--- a/app/[locale]/(protected)/app/email/mail.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@/components/ui/icon";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { AvatarFallback } from "@radix-ui/react-avatar";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {ReactNode,useState} from "react";
-import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
-import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
-import { Link } from "@/components/navigation"
-const MailItem = ({ mail }: { mail: any }) => {
-  const { image, title, isfav, time, name, id } = mail;
-  const [open, setOpen] = useState<boolean>(false)
-  return (
-    <>
-      <DeleteConfirmationDialog
-        open={open}
-        onClose={() => setOpen(false)}
-      />
-      <Link href={`/app/email/${id}`} className=" group block border-b border-default-200 dark:border-default-300 last:border-none" >
-        <div className="flex items-center gap-4  group-hover:bg-default-50  last:border-none px-6 py-4 translate-y-0">
-          <div>
-            <Checkbox className="mt-0.5 dark:bg-default-300" />
-          </div>
-          <div className="ms-1">
-            {isfav ? (
-              <Icon
-                icon="heroicons:star-20-solid"
-                className="text-xl  cursor-pointer text-[#FFCE30]"
-              />
-            ) : (
-              <Icon
-                icon="heroicons:star"
-                className="text-xl cursor-pointer text-default-400"
-              />
-            )}
-          </div>
-          <div className="-space-x-1.5 rtl:space-x-reverse">
-            {image.map(
-              (
-                item: {
-                  label: ReactNode;
-                  image: string;
-                },
-                index: any
-              ) => (
-                <TooltipProvider key={`avatar-${index}`}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Avatar className="h-7 w-7 border-none shadow-none bg-transparent">
-                        <AvatarImage src={item.image} />
-                        <AvatarFallback>SA</AvatarFallback>
-                      </Avatar>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>{item.label}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )
-            )}
-          </div>
-          <div className="flex-1 overflow-hidden text-sm text-default-600 truncate">
-            <span className="me-3">{name}</span>
-            <span className="text-sm text-default-600 truncate max-w-56">{title}</span>
-          </div>
-
-          <div className="flex items-center">
-            <p className="text-default-900 text-sm">{time}</p>
-            <div className="group-hover:bg-default-100 hidden group-hover:flex absolute group-hover:transition-all duration-300 right-0 top-0 h-full items-center ">
-              <Button
-                className="bg-transparent  ring-transparent hover:bg-transparent hover:ring-0 hover:ring-offset-0 hover:ring-transparent w-28 border-transparent"
-                size="icon"
-                onClick={(event) => { 
-                  setOpen(true);
-                  event.preventDefault();
-                }}
-              >
-                <Trash2 className="text-default-900 w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </Link>
-    </>
-  );
-};
-
-export default MailItem;
diff --git a/app/[locale]/(protected)/app/email/page.tsx b/app/[locale]/(protected)/app/email/page.tsx
deleted file mode 100644
index 8ea8eed7..00000000
--- a/app/[locale]/(protected)/app/email/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import MailItem from "./mail";
-import MailHeader from "./mail-header";
-import { getMail } from "./utils";
-const EmailApp = async () => {
-  const mails = await getMail()
-  return (
-      <Card className="h-full rounded-md">
-        <CardHeader className="border-b border-default-200 sticky top-0 z-10 bg-card py-4">
-          <MailHeader />
-        </CardHeader>
-        <CardContent className="p-0 h-full">
-          <div className="h-[calc(100%-80px)] overflow-y-auto no-scrollbar">
-            {mails.map((mail, index) => (
-              <MailItem key={`mail-${index}`} mail={mail} />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-  );
-};
-
-export default EmailApp;
diff --git a/app/[locale]/(protected)/app/email/sidebar-wrapper.tsx b/app/[locale]/(protected)/app/email/sidebar-wrapper.tsx
deleted file mode 100644
index 1657502f..00000000
--- a/app/[locale]/(protected)/app/email/sidebar-wrapper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-import { useMediaQuery } from '@/hooks/use-media-query'
-import { useMailConfig } from '@/hooks/use-mail'
-import { cn } from '@/lib/utils'
-import React from 'react'
-const MailSidebarWrapper = ({ children }: { children: React.ReactNode }) => {
-  const [mailConfig] = useMailConfig()
-  const { isOpen } = mailConfig
-  const isTablet = useMediaQuery("(min-width: 1024px)");
-  if (!isTablet) {
-    return (
-      <div className={cn('absolute h-full  start-0  w-[240px] z-50 ', {
-        '-start-full': !isOpen
-      })}>
-        {children}
-      </div>
-    )
-  }
-  return (
-    <div className='flex-none  md:w-[270px] w-[200px]  '>{children}</div>
-  )
-}
-
-export default MailSidebarWrapper
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/email/toggle-mail-sidebar.tsx b/app/[locale]/(protected)/app/email/toggle-mail-sidebar.tsx
deleted file mode 100644
index 64d6ec53..00000000
--- a/app/[locale]/(protected)/app/email/toggle-mail-sidebar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { useMediaQuery } from "@/hooks/use-media-query";
-import { useMailConfig } from "@/hooks/use-mail";
-import { Menu } from "lucide-react";
-import React from "react";
-
-const ToggleMailSidebar = () => {
-  const isTablet = useMediaQuery("(min-width: 1024px)");
-  const [mailConfig, setMailConfig] = useMailConfig();
-  if (isTablet) return null;
-
-  return (
-    <Button
-      size="icon"
-      color="secondary"
-      onClick={() =>
-        setMailConfig({ ...mailConfig, isOpen: !mailConfig.isOpen })
-      }
-    >
-      <Menu className=" h-5 w-5" />
-    </Button>
-  );
-};
-
-export default ToggleMailSidebar;
diff --git a/app/[locale]/(protected)/app/email/utils.ts b/app/[locale]/(protected)/app/email/utils.ts
deleted file mode 100644
index e392ea30..00000000
--- a/app/[locale]/(protected)/app/email/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mails, Mail} from "./data"
-
-// get mail 
-
-export const getMail = async () => {
-    return mails
-}
-
-
-// get mail by id 
-
-export const getMailById = async (mailId: string) => {
-    return mails.find(mail => mail.id === mailId)
-}
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/kanban/add-board.tsx b/app/[locale]/(protected)/app/kanban/add-board.tsx
deleted file mode 100644
index 35aa3b0e..00000000
--- a/app/[locale]/(protected)/app/kanban/add-board.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Plus } from "lucide-react";
-import { useTranslations } from "next-intl";
-
-const AddBoard = () => {
-  const t = useTranslations("KanbanApp")
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>
-          <Plus className="h-4 w-4 me-1" />
-          {t("addBoard", { defaultValue: "Add Board" })}
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Create a new board</DialogTitle>
-        </DialogHeader>
-        <form className="space-y-4">
-          <div className="space-y-1">
-            <Label htmlFor="board-name">Board Name</Label>
-            <Input id="board-name" placeholder="Board Name" />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="board-color">Board Color</Label>
-            <Input id="board-color" type="color" placeholder="Board Name" className="p-0 border-0 shadow-none" />
-          </div>
-        </form>
-        <DialogFooter>
-          <Button type="submit">Add</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default AddBoard;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/kanban/column.tsx b/app/[locale]/(protected)/app/kanban/column.tsx
deleted file mode 100644
index f9408011..00000000
--- a/app/[locale]/(protected)/app/kanban/column.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
-import { CSS } from "@dnd-kit/utilities";
-import { useMemo, useState } from "react";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-import { Column, Task } from "./data";
-import TaskCard from "./task";
-import { Plus, Trash2 } from "lucide-react";
-import EmptyTask from "./empty";
-
-import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
-
-function ColumnContainer({ column, tasks, handleOpenTask }: { column: Column; tasks: Task[], handleOpenTask: () => void }) {
-    const [editMode, setEditMode] = useState<boolean>(false);
-
-    const [deleteColumn, setDeleteColumn] = useState<boolean>(false);
-    const tasksIds = useMemo(() => {
-        return tasks.map((task) => task.id);
-    }, [tasks]);
-
-    const {
-        setNodeRef,
-        attributes,
-        listeners,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({
-        id: column.id,
-        data: {
-            type: "Column",
-            column,
-        },
-        disabled: editMode,
-    });
-
-    const style = {
-        transition,
-        transform: CSS.Transform.toString(transform),
-    };
-
-    return (
-        <>
-            <DeleteConfirmationDialog
-                open={deleteColumn}
-                onClose={() => setDeleteColumn(false)}
-            />
-
-            <Card
-                ref={setNodeRef}
-                style={style}
-                className={cn("flex-1 w-[280px] bg-default-200 shadow-none app-height flex flex-col relative", {
-                    "opacity-20": isDragging,
-                })}
-            >
-                <CardHeader className="flex-none bg-card relative rounded-t-md py-4" {...attributes} {...listeners}>
-                    <div className={cn("absolute -start-[1px] top-1/2 -translate-y-1/2 h-[60%] w-0.5 bg-primary",
-                        {
-                            "bg-warning": (column.title).toLocaleLowerCase() === "work in progress",
-                            "bg-success": (column.title).toLocaleLowerCase() === "done",
-                        }
-                    )}></div>
-                    <div className="flex items-center gap-2" >
-                        <div className="flex-1 text-lg capitalize text-default-900 font-medium">{column.title}</div>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        size="icon"
-                                        className="w-6 h-6 bg-transparent  hover:bg-transparent border border-default-200 text-default-600 hover:ring-0 hover:ring-transparent"
-                                        onClick={() => setDeleteColumn(true)}
-                                    >
-                                        <Trash2 className="w-4 h-4" />
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent className="bg-destructive">
-                                    <p>Delete</p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        size="icon"
-                                        className="w-6 h-6 bg-transparent ring-offset-transparent hover:bg-transparent border border-default-200 text-default-600 hover:ring-0 hover:ring-transparent"
-                                        onClick={handleOpenTask}
-                                    >
-                                        <Plus className="w-4 h-4" />
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    <p>Add Project</p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                    </div>
-                </CardHeader>
-                <CardContent className="flex-1 pt-6 px-3.5 h-full overflow-y-auto no-scrollbar">
-                    {/* Column task container */}
-                    <div className=" space-y-6">
-                        {tasks?.length === 0 && <EmptyTask />}
-                        <SortableContext items={tasksIds}>
-                            {tasks.map((task) => (
-                                <TaskCard task={task} key={task.id} />
-                            ))}
-                        </SortableContext>
-                    </div>
-                </CardContent>
-
-            </Card>
-        </>
-    );
-}
-
-export default ColumnContainer;
diff --git a/app/[locale]/(protected)/app/kanban/create-task.tsx b/app/[locale]/(protected)/app/kanban/create-task.tsx
deleted file mode 100644
index eaf844ea..00000000
--- a/app/[locale]/(protected)/app/kanban/create-task.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
-interface CreateTaskProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface Option {
-  value: string;
-  label: string;
-  image?: string;
-}
-type Inputs = {
-  title: string;
-  description: string;
-  tags: MultiValue<Option>;
-  assignee: MultiValue<Option>;
-  startDate: Date;
-  endDate: Date;
-}
-const options: Option[] = [
-  {
-    value: "team",
-    label: "team",
-  },
-  {
-    value: "low",
-    label: "low",
-  },
-  {
-    value: "medium",
-    label: "medium",
-  },
-  {
-    value: "high",
-    label: "high",
-  },
-  {
-    value: "update",
-    label: "update",
-  }
-];
-const assigneeOptions: Option[] = [
-  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
-  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
-  { value: "rakibul", label: "Rakibul Islam", image: "/images/avatar/av-3.svg" },
-  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
-];
-
-
-const CreateTask = ({ open, setOpen }: CreateTaskProps) => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
-  const [endDate, setEndtDate] = useState<Date>(new Date());
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<Inputs>()
-  const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create  Task</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-1">
-            <Label htmlFor="projectName">Project Name</Label>
-            <Input
-              id="projectName"
-              placeholder="Project Name"
-              {...register("title", { required: "Title is required." })}
-              color={errors.title ? "destructive" : "default"}
-            />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
-          </div>
-          <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-            <div className="space-y-1">
-              <Label htmlFor="startDate">Start Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(startDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setStartDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="endDate">End Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(endDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setEndtDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="assignee">Assignee</Label>
-            <Controller
-              name="assignee"
-              control={control}
-              defaultValue={[]}
-              render={({ field }) => (
-                <Select
-                  className="react-select"
-                  classNamePrefix="select"
-                  {...field}
-                  options={assigneeOptions}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
-                  placeholder="Select assignee"
-                />
-              )}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="tag">Tags</Label>
-            <Controller
-              name="tags"
-              control={control}
-              defaultValue={[]}
-              render={({ field }) => (
-                <Select
-                  className="react-select"
-                  classNamePrefix="select"
-                  {...field}
-                  options={options}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
-                />
-              )}
-            />
-          </div>
-
-          <div className="space-y-1">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              placeholder="Project Description"
-              {...register("description")}
-            />
-          </div>
-
-          <div className="flex justify-end">
-            <Button type="submit">Add</Button>
-          </div>
-        </form>
-
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default CreateTask;
diff --git a/app/[locale]/(protected)/app/kanban/data.ts b/app/[locale]/(protected)/app/kanban/data.ts
deleted file mode 100644
index 358ac067..00000000
--- a/app/[locale]/(protected)/app/kanban/data.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-export const defaultCols = [
-  {
-    id: "col-todo-001",
-    title: "Todo",
-  },
-  {
-    id: "col-wip-002",
-    title: "Work in progress",
-  },
-  {
-    id: "col-done-003",
-    title: "Done",
-  },
-];
-
-export const defaultTasks = [
-  {
-    id: "task-crm-dashboard-001",
-    columnId: defaultCols[0].id,
-    title: "CRM Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-  {
-    id: "task-business-dashboard-002",
-    columnId: defaultCols[0].id,
-    title: "Business Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-  {
-    id: "task-management-dashboard-003",
-    columnId: defaultCols[1].id,
-    title: "Management Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-  {
-    id: "task-analytics-dashboard-004",
-    columnId: defaultCols[1].id,
-    title: "Analytics Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-
-  {
-    id: "task-marketing-dashboard-005",
-    columnId: defaultCols[1].id,
-    title: "Marketing Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-
-
-];
-
-export type Column = (typeof defaultCols)[number];
-
-export type Task = (typeof defaultTasks)[number]
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/kanban/edit-task.tsx b/app/[locale]/(protected)/app/kanban/edit-task.tsx
deleted file mode 100644
index 06e7b302..00000000
--- a/app/[locale]/(protected)/app/kanban/edit-task.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
-interface EditTaskProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface Option {
-  value: string;
-  label: string;
-  image?: string;
-}
-type Inputs = {
-  title: string;
-  description: string;
-  tags: MultiValue<Option>;
-  assignee: MultiValue<Option>;
-  startDate: Date;
-  endDate: Date;
-}
-const options: Option[] = [
-  {
-    value: "team",
-    label: "team",
-  },
-  {
-    value: "low",
-    label: "low",
-  },
-  {
-    value: "medium",
-    label: "medium",
-  },
-  {
-    value: "high",
-    label: "high",
-  },
-  {
-    value: "update",
-    label: "update",
-  }
-];
-const assigneeOptions: Option[] = [
-  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
-  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
-  { value: "rakibul", label: "Rakibul Islam", image: "/images/avatar/av-3.svg" },
-  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
-];
-
-
-const EditTask = ({ open, setOpen }: EditTaskProps) => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
-  const [endDate, setEndtDate] = useState<Date>(new Date());
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<Inputs>()
-  const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create  Task</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-1">
-            <Label htmlFor="projectName">Project Name</Label>
-            <Input
-              id="projectName"
-              placeholder="Project Name"
-              defaultValue="Project Title"
-              {...register("title", { required: "Title is required." })}
-              color={errors.title ? "destructive" : "default"}
-            />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
-          </div>
-          <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-            <div className="space-y-1">
-              <Label htmlFor="startDate">Start Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(startDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setStartDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="endDate">End Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(endDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setEndtDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="assignee">Assignee</Label>
-            <Controller
-              name="assignee"
-              control={control}
-              defaultValue={[{ value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" }]}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  options={assigneeOptions}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
-                  placeholder="Select assignee"
-                />
-              )}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="tag">Tags</Label>
-            <Controller
-              name="tags"
-              control={control}
-              defaultValue={[{ value: "team", label: "Team" }]}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  options={options}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
-                />
-              )}
-            />
-          </div>
-
-          <div className="space-y-1">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              placeholder="Project Description"
-              {...register("description")}
-              defaultValue="Project Description"
-            />
-          </div>
-
-          <div className="flex justify-end">
-            <Button type="submit">Add</Button>
-          </div>
-        </form>
-
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default EditTask;
diff --git a/app/[locale]/(protected)/app/kanban/empty.tsx b/app/[locale]/(protected)/app/kanban/empty.tsx
deleted file mode 100644
index b344af60..00000000
--- a/app/[locale]/(protected)/app/kanban/empty.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-
-import { Rabbit } from 'lucide-react';
-
-
-const EmptyTask = () => {
-  return (
-    <div className=" absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-      <Rabbit className=" h-[200px]  w-[200px] text-default-400 " strokeWidth={1} />
-      <div className=' text-sm text-default-500 text-center'>No tasks</div>
-    </div>
-  );
-};
-
-export default EmptyTask;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/kanban/kanban-app.tsx b/app/[locale]/(protected)/app/kanban/kanban-app.tsx
deleted file mode 100644
index 77cae4cd..00000000
--- a/app/[locale]/(protected)/app/kanban/kanban-app.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-'use client'
-import React, { useState, useMemo } from 'react'
-import { type Column, type Task } from './data';
-import {
-    DndContext,
-    DragEndEvent,
-    DragOverEvent,
-    DragOverlay,
-    DragStartEvent,
-    PointerSensor,
-    useSensor,
-    useSensors,
-} from "@dnd-kit/core";
-import { SortableContext, arrayMove } from "@dnd-kit/sortable";
-import ColumnContainer from "./column"
-import TaskCard from './task';
-// import { createPortal } from "react-dom";
-import AddBoard from './add-board';
-import CreateTask from "./create-task";
-import { useTranslations } from 'next-intl';
-const KanBanApp = ({ defaultCols, defaultTasks }: { defaultCols: Column[], defaultTasks: Task[] }) => {
-    const t = useTranslations("KanbanApp");
-    const [columns, setColumns] = useState<Column[]>(defaultCols);
-    const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
-
-    const [tasks, setTasks] = useState<Task[]>(defaultTasks);
-
-    const [activeColumn, setActiveColumn] = useState<Column | null>(null);
-
-    const [activeTask, setActiveTask] = useState<Task | null>(null);
-
-    // create task state 
-    const [open, setOpen] = useState<boolean>(false);
-    const sensors = useSensors(
-        useSensor(PointerSensor, {
-            activationConstraint: {
-                distance: 10,
-            },
-        })
-    );
-    function onDragStart(event: DragStartEvent) {
-        if (event.active.data.current?.type === "Column") {
-            setActiveColumn(event.active.data.current.column);
-            return;
-        }
-
-        if (event.active.data.current?.type === "Task") {
-            setActiveTask(event.active.data.current.task);
-            return;
-        }
-    }
-    function onDragEnd(event: DragEndEvent) {
-        setActiveColumn(null);
-        setActiveTask(null);
-
-        const { active, over } = event;
-        if (!over) return;
-
-        const activeId = active.id;
-        const overId = over.id;
-
-        if (activeId === overId) return;
-
-        const isActiveAColumn = active.data.current?.type === "Column";
-        if (!isActiveAColumn) return;
-
-        console.log("DRAG END");
-
-        setColumns((columns) => {
-            const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
-
-            const overColumnIndex = columns.findIndex((col) => col.id === overId);
-
-            return arrayMove(columns, activeColumnIndex, overColumnIndex);
-        });
-    }
-    function onDragOver(event: DragOverEvent) {
-        const { active, over } = event;
-        if (!over) return;
-
-        const activeId = active.id;
-        const overId = over.id;
-
-        if (activeId === overId) return;
-
-        const isActiveATask = active.data.current?.type === "Task";
-        const isOverATask = over.data.current?.type === "Task";
-
-        if (!isActiveATask) return;
-
-
-        if (isActiveATask && isOverATask) {
-            setTasks((tasks) => {
-                const activeIndex = tasks.findIndex((t) => t.id === activeId);
-                const overIndex = tasks.findIndex((t) => t.id === overId);
-
-                if (tasks[activeIndex].columnId != tasks[overIndex].columnId) {
-
-                    tasks[activeIndex].columnId = tasks[overIndex].columnId;
-                    return arrayMove(tasks, activeIndex, overIndex - 1);
-                }
-
-                return arrayMove(tasks, activeIndex, overIndex);
-            });
-        }
-
-        const isOverAColumn = over.data.current?.type === "Column";
-
-
-        if (isActiveATask && isOverAColumn) {
-            setTasks((tasks) => {
-                const activeIndex = tasks.findIndex((t) => t.id === activeId);
-                tasks[activeIndex].columnId = overId.toString();
-                return arrayMove(tasks, activeIndex, activeIndex);
-            });
-        }
-    }
-    return (
-        <>
-            <div className="">
-                <div className="flex gap-2 mb-5">
-                    <div className="flex-1 font-medium lg:text-2xl text-xl capitalize text-default-900">
-                        {t("title", { defaultValue: "Title" })}
-                    </div>
-                    <div className="flex-none">
-                        <AddBoard />
-                    </div>
-                </div>
-                <DndContext
-                    sensors={sensors}
-                    onDragStart={onDragStart}
-                    onDragEnd={onDragEnd}
-                    onDragOver={onDragOver}
-                >
-                    <div className="flex  gap-4 overflow-x-auto no-scrollbar">
-                        <div className="flex gap-4">
-                            <SortableContext items={columnsId}>
-                                {columns.map((col) => (
-                                    <ColumnContainer
-                                        key={col.id}
-                                        column={col}
-                                        tasks={tasks.filter((task) => task.columnId === col.id)}
-                                        handleOpenTask={() => setOpen(true)}
-                                    />
-                                ))}
-                            </SortableContext>
-                        </div>
-                    </div>
-
-                    {/* {createPortal(
-                        <DragOverlay>
-                            {activeColumn && (
-                                <ColumnContainer
-                                    column={activeColumn}
-                                    handleOpenTask={() => setOpen(true)}
-                                    tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
-                                />
-                            )}
-                            {activeTask && <TaskCard task={activeTask} />}
-                        </DragOverlay>,
-                        document.body
-                    )} */}
-                </DndContext>
-            </div>
-            <CreateTask
-                open={open}
-                setOpen={setOpen}
-            />
-        </>
-    )
-
-}
-
-export default KanBanApp
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/kanban/layout.tsx b/app/[locale]/(protected)/app/kanban/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/app/kanban/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/app/kanban/page.tsx b/app/[locale]/(protected)/app/kanban/page.tsx
deleted file mode 100644
index c056dc88..00000000
--- a/app/[locale]/(protected)/app/kanban/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import KanBanApp from './kanban-app'
-import { defaultCols, defaultTasks } from './data'
-
-const KanBanPage = () => {
-    return (
-        <KanBanApp
-            defaultCols={defaultCols}
-            defaultTasks={defaultTasks}
-        />
-    )
-}
-
-export default KanBanPage
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/kanban/task.tsx b/app/[locale]/(protected)/app/kanban/task.tsx
deleted file mode 100644
index 607d21dd..00000000
--- a/app/[locale]/(protected)/app/kanban/task.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client"
-import { cn } from "@/lib/utils"
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Task } from "./data";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Button } from "@/components/ui/button";
-import {  MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { Progress } from "@/components/ui/progress";
-import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
-import { useState } from "react";
-import EditTask from "./edit-task";
-import { Icon } from "@/components/ui/icon";
-
-function TaskCard({ task }: { task: Task }) {
-    const { projectLogo, title, desc, startDate, endDate, progress, assignee, remainingDays } = task;
-    const [open, setOpen] = useState<boolean>(false);
-    const [editTaskOpen, setEditTaskOpen] = useState<boolean>(false);
-    const {
-        setNodeRef,
-        attributes,
-        listeners,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({
-        id: task.id,
-        data: {
-            type: "Task",
-            task,
-        },
-    });
-
-    const style = {
-        transition,
-        transform: CSS.Transform.toString(transform),
-    };
-
-    return (
-        <>
-            <DeleteConfirmationDialog
-                open={open}
-                onClose={() => setOpen(false)}
-            />
-            <EditTask
-                open={editTaskOpen}
-                setOpen={setEditTaskOpen}
-            />
-            <Card
-                className={cn("", {
-                    "opacity-10 bg-primary/50 ": isDragging,
-                })}
-                ref={setNodeRef}
-                style={style}
-                {...attributes}
-                {...listeners}
-            >
-                <CardHeader className="flex-row gap-1 p-2.5 items-center space-y-0">
-                    <Avatar className="flex-none h-8 w-8 rounded bg-default-200 text-default hover:bg-default-200">
-                        <AvatarImage src={projectLogo} />
-                        <AvatarFallback className="uppercase">  {title.charAt(0) + title.charAt(1)}</AvatarFallback>
-                    </Avatar>
-                    <h3 className="flex-1 text-default-800 text-lg font-medium max-w-[160px] truncate text-center capitalize ">{title}</h3>
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button
-                                size="icon"
-                                className="flex-none ring-offset-transparent bg-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
-                            >
-                                <MoreVertical className="h-4 w-4 text-default-900" />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="p-0 overflow-hidden" align="end" >
-                            <DropdownMenuItem
-                                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-                                onClick={() => setEditTaskOpen(true)}
-                            >
-                                <SquarePen className="w-3.5 h-3.5 me-1" />
-                                Edit
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                                className="py-2 bg-destructive/30 text-destructive focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
-                                onClick={() => setOpen(true)}
-                            >
-                                <Trash2 className="w-3.5 h-3.5  me-1" />
-                                Delete
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </CardHeader>
-                <CardContent className="p-2.5 pt-1">
-                    <div className="text-default-600 text-sm">{desc}</div>
-                    <div className="flex gap-4 mt-6">
-                        <div>
-                            <div className="text-xs text-default-400 mb-1">Start Date</div>
-                            <div className="text-xs text-default-600  font-medium">{startDate}</div>
-                        </div>
-                        <div>
-                            <div className="text-xs text-default-400 mb-1">End Date</div>
-                            <div className="text-xs text-default-600  font-medium">{endDate}</div>
-                        </div>
-                    </div>
-                    <div className="mt-1">
-                        <div className="text-end text-xs text-default-600 mb-1.5 font-medium">{progress}%</div>
-                        <Progress value={progress} color="primary" size="sm" />
-                    </div>
-                    <div className="flex mt-5">
-                        <div className="flex-1">
-                            <div className="text-default-400  text-sm font-normal mb-3">Assigned to</div>
-                            <div className="flex items-center -space-x-1">
-                                {
-                                    assignee?.map((user, index) => (
-                                        <Avatar
-                                            key={`user-${index}`}
-                                            className="h-6 w-6"
-                                        >
-                                            <AvatarImage src={user.image} />
-                                            <AvatarFallback> {user.name.charAt(0) + user.name.charAt(1)}</AvatarFallback>
-                                        </Avatar>
-                                    ))
-                                }
-                                <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
-                                    +2
-                                </div>
-                            </div>
-                        </div>
-                        <div className="flex-none">
-                            <div className="flex items-center gap-1 bg-destructive/10 text-destructive rounded-full px-2 py-0.5 text-sm mt-1">
-                                <Icon icon="heroicons-outline:clock" />
-                                {remainingDays} days left
-                            </div>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-        </>
-    );
-}
-
-export default TaskCard;
diff --git a/app/[locale]/(protected)/app/layout.tsx b/app/[locale]/(protected)/app/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/app/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/app/projects/[id]/data.ts b/app/[locale]/(protected)/app/projects/[id]/data.ts
deleted file mode 100644
index 4cd2f599..00000000
--- a/app/[locale]/(protected)/app/projects/[id]/data.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-
-export const meets = [
-  {
-    img: "/images/svg/sk.svg",
-    title: "Meeting with client",
-    date: "01 Nov 2021",
-    meet: "Zoom meeting",
-  },
-  {
-    img: "/images/svg/path.svg",
-    title: "Design meeting (team)",
-    date: "01 Nov 2021",
-    meet: "Skyp meeting",
-  },
-  {
-    img: "/images/svg/dc.svg",
-    title: "Background research",
-    date: "01 Nov 2021",
-    meet: "Google meeting",
-  },
-  {
-    img: "/images/svg/sk.svg",
-    title: "Meeting with client",
-    date: "01 Nov 2021",
-    meet: "Zoom meeting",
-  },
-];
-
-
-
-export const tasks = [
-  {
-    id: 1,
-    image: "/images/users/user-1.jpg",
-    title: "Amet minim mollit non deserunt ullam.",
-  },
-  {
-    id: 2,
-    image: "/images/users/user-2.jpg",
-    title: "Amet minim mollit non deserunt ullam.",
-  },
-  {
-    id: 3,
-    image: "/images/users/user-3.jpg",
-    title: "Amet minim mollit non deserunt ullam.",
-  },
-  {
-    id: 4,
-    image: "/images/users/user-4.jpg",
-    title: "Amet minim mollit non deserunt ullam.",
-  },
-  {
-    id: 5,
-    image: "/images/users/user-5.jpg",
-    title: "Amet minim mollit non deserunt ullam.",
-  },
-  {
-    id: 6,
-    image: "/images/users/user-6.jpg",
-    title: "Amet minim mollit non deserunt ullam.",
-  }]
-
-export const messagesData = [
-  {
-    title: "Wade Warren",
-    desc: "Hi! How are you doing?.....",
-    active: true,
-    hasnotifaction: true,
-    notification_count: 1,
-    image: "/images/users/user-1.jpg"
-  },
-  {
-    title: "Savannah Nguyen",
-    desc: "Hi! How are you doing?.....",
-    active: false,
-    hasnotifaction: false,
-    image: "/images/users/user-2.jpg"
-  },
-  {
-    title: "Ralph Edwards",
-    desc: "Hi! How are you doing?.....",
-    active: false,
-    hasnotifaction: true,
-    notification_count: 8,
-    image: "/images/users/user-3.jpg"
-  },
-  {
-    title: "Cody Fisher",
-    desc: "Hi! How are you doing?.....",
-    active: true,
-    hasnotifaction: false,
-    image: "/images/users/user-4.jpg"
-  },
-  {
-    title: "Savannah Nguyen",
-    desc: "Hi! How are you doing?.....",
-    active: false,
-    hasnotifaction: false,
-    image: "/images/users/user-4.jpg"
-  }
-];
-
-
-
-export const activityList = [
-  {
-    title: "Project start date",
-    desc: "This parcel is paid for by the customer. Please contact the customer for any further information.",
-    date: "Sep 20, 2021 ",
-    time: "12:32 AM",
-    status: "ok",
-  },
-  {
-    title: "Project start date",
-    date: "Sep 20, 2021 ",
-    desc: "This parcel is paid for by the customer. Please contact the customer for any further information.",
-    time: "12:32 AM",
-    status: "ok",
-  },
-  {
-    title: "Project start date",
-    date: "Sep 20, 2021 ",
-    desc: "This parcel is paid for by the customer. Please contact the customer for any further information.",
-    time: "12:32 AM",
-    status: "ok",
-  },
-  {
-    title: "Project start date",
-    date: "Sep 20, 2021 ",
-    desc: "This parcel is paid for by the customer. Please contact the customer for any further information.",
-    time: "12:32 AM",
-  },
-  {
-    title: "Project start date",
-    date: "Sep 20, 2021 ",
-    desc: "This parcel is paid for by the customer. Please contact the customer for any further information.",
-    time: "12:32 AM",
-  },
-];
-
-
-
-
-export const files = [
-  {
-    img: "/images/icon/file-1.svg",
-    title: "Dashboard.fig",
-    date: "06 June 2021 / 155MB",
-  },
-  {
-    img: "/images/icon/pdf-1.svg",
-    title: "Ecommerce.pdf",
-    date: "06 June 2021 / 155MB",
-  },
-  {
-    img: "/images/icon/zip-1.svg",
-    title: "Job portal_app.zip",
-    date: "06 June 2021 / 155MB",
-  },
-  {
-    img: "/images/icon/pdf-2.svg",
-    title: "Ecommerce.pdf",
-    date: "06 June 2021 / 155MB",
-  },
-  {
-    img: "/images/icon/scr-1.svg",
-    title: "Screenshot.jpg",
-    date: "06 June 2021 / 155MB",
-  }
-];
-
-
-export const teamData = [
-  {
-    customer: {
-      name: "Arlene McCoy",
-      image: "/images/users/user-1.jpg",
-      deg: "Ux designer",
-    },
-    status: "progress",
-    time: "42.5 hours",
-    chart: null,
-    action: null,
-  },
-  {
-    customer: {
-      name: "Arlene McCoy",
-      image: "/images/users/user-2.jpg",
-      deg: "Ux designer",
-    },
-    status: "complete",
-    time: "42.5 hours",
-    chart: null,
-    action: null,
-  },
-  {
-    customer: {
-      name: "Arlene McCoy",
-      image: "/images/users/user-3.jpg",
-      deg: "Ux designer",
-    },
-    status: "progress",
-    time: "42.5 hours",
-    chart: null,
-    action: null,
-  },
-  {
-    customer: {
-      name: "Arlene McCoy",
-      image: "/images/users/user-4.jpg",
-      deg: "Ux designer",
-    },
-    status: "complete",
-    time: "42.5 hours",
-    chart: null,
-    action: null
-  }
-];
-
-export type TeamDataProps = (typeof teamData)[]
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/[id]/page.tsx b/app/[locale]/(protected)/app/projects/[id]/page.tsx
deleted file mode 100644
index de0ee3cd..00000000
--- a/app/[locale]/(protected)/app/projects/[id]/page.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { BarChart } from "lucide-react";
-import { Icon } from "@/components/ui/icon";
-import ProgressBlock from "@/components/blocks/progress-block";
-import { Link } from '@/i18n/routing';
-
-import { meets, tasks, messagesData, activityList, teamData, files } from "./data"
-import Image from "next/image";
-import DashboardDropdown from "@/components/dashboard-dropdown";
-
-import TaskItem from "@/components/project/task-item";
-import MessageListItem from "@/components/project/message-list-item";
-import ActivityItem from "@/components/project/activity";
-import TeamTable from "@/components/project/team-table";
-import NotesCalendar from "@/components/project/notes-calendar";
-import { getProjectById } from "../data";
-import { Alert } from "@/components/ui/alert";
-
-const SinglePage = async ({ params: { id } }: { params: { id: string }; }) => {
-    const project = await getProjectById(id)
-    if (!project) return <Alert color="destructive"> project id is not valid</Alert>
-    return (
-        <div className="space-y-5">
-            <div className="grid grid-cols-12 gap-5">
-
-                <Card className="col-span-12 xl:col-span-3">
-                    <CardContent className="p-6">
-                        <div className="grid grid-cols-2 gap-4">
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-info/20 shadow-none border-none">
-                                    <CardContent className=" p-4  text-center">
-                                        <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
-                                            <BarChart className=" h-6 w-6 text-info" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5"> Total Task</div>
-                                        <div className="text-2xl text-default-900  font-medium">  64</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-warning/20 shadow-none border-none">
-                                    <CardContent className=" p-4  text-center">
-                                        <div
-                                            className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-                                        >
-                                            <Icon className="w-6 h-6 text-warning" icon="heroicons:chart-pie" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5">Completed</div>
-                                        <div className="text-2xl text-default-900  font-medium">45</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-primary/20 shadow-none border-none">
-                                    <CardContent className=" p-4  text-center">
-                                        <div
-                                            className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-                                        >
-                                            <Icon className="w-6 h-6 text-primary" icon="heroicons:clock" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5">Hours</div>
-                                        <div className="text-2xl text-default-900  font-medium">190</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-success/20 shadow-none border-none">
-                                    <CardContent className="p-4 text-center">
-                                        <div
-                                            className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-                                        >
-                                            <Icon className="w-6 h-6 text-success" icon="heroicons:calculator" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5">Spendings</div>
-                                        <div className="text-2xl text-default-900  font-medium">$3,564</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="col-span-2">
-                                <ProgressBlock
-                                    title="Progress"
-                                    height={183}
-                                    className="border-none shadow-none"
-                                    chartType="pie"
-                                />
-                            </div>
-                        </div>
-                    </CardContent>
-                </Card>
-
-                <Card className="col-span-12 xl:col-span-5">
-                    <CardHeader>
-                        <CardTitle>About Project</CardTitle>
-                    </CardHeader>
-                    <CardContent className="p-6">
-
-                        <div className="text-base font-medium text-default-800  mb-3">
-                            Background information
-                        </div>
-                        <p className="text-sm text-default-600">
-                            The Optimistic Website Company - Amet minim mollit non deserunt
-                            ullamco est sit aliqua dolor do amet sint. Velit officia consequat
-                            duis enim velit mollit. Exercita -tion veniam consequat sunt
-                            nostrud amet.
-                        </p>
-                        <br />
-                        <p className="text-sm text-default-600">
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company - Amet minim mollit non
-                            deserunt ullamco est sit aliqua dolor do amet sint. Velit officia
-                            consequat duis enim velit mollit. Exercita -tion veniam consequat
-                            sunt nostrud amet.
-                        </p>
-                        <p className="text-sm text-default-600 mt-4">
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company.
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company. <br /> <br />
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company.
-                        </p>
-                        <div className="flex flex-wrap mt-8">
-                            <div className="xl:mr-8 mr-4 mb-3 space-y-1">
-                                <div className="font-semibold text-default-500 ">
-                                    Existing website
-                                </div>
-                                <div className="flex items-center gap-2 text-xs font-normal text-primary">
-                                    <Icon icon="heroicons:link" />
-                                    <Link href="#">www.example.com</Link>
-                                </div>
-                            </div>
-                            <div className="xl:me-8 me-4 mb-3 space-y-1">
-                                <div className="font-semibold text-default-500">
-                                    Project brief
-                                </div>
-                                <div className="flex items-center gap-2 text-xs font-normal text-primary-600 ">
-                                    <Icon icon="heroicons:link" />
-                                    <Link href="#">www.example.com</Link>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="bg-default-100  rounded px-4 pt-4 pb-1 flex flex-wrap justify-between mt-6">
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600">
-                                    Project owner
-                                </div>
-                                <div className="text-xs text-default-600">
-                                    John Doe
-                                </div>
-                            </div>
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600">
-                                    Budget
-                                </div>
-                                <div className="text-xs text-default-600 ">
-                                    $75,800
-                                </div>
-                            </div>
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600">
-                                    Start date
-                                </div>
-                                <div className="text-xs text-default-600">
-                                    01/11/2021
-                                </div>
-                            </div>
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600 ">
-                                    Deadline
-                                </div>
-                                <div className="text-xs text-warning">01/11/2021</div>
-                            </div>
-                        </div>
-                    </CardContent>
-                </Card>
-
-                <Card className="col-span-12 xl:col-span-4">
-                    <CardHeader>
-                        <CardTitle>Notes</CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-2">
-                        <NotesCalendar />
-                        <ul className="divide-y divide-default-100">
-                            {meets.map((item, i) => (
-                                <li key={i} className=" py-2.5 px-3">
-                                    <div className="flex gap-2">
-                                        <div className="flex-1 flex gap-2.5">
-                                            <div className="flex-none">
-                                                <div className="h-8 w-8">
-                                                    <Image
-                                                        src={item.img}
-                                                        alt=""
-                                                        className="w-full h-full "
-                                                        width={32}
-                                                        height={32}
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div className="flex-1">
-                                                <div className="text-default-600 text-sm  mb-1 font-medium">
-                                                    {item.title}
-                                                </div>
-                                                <div className="flex gap-1 font-normal text-xs  text-default-500">
-                                                    <div className="text-base">
-                                                        <Icon icon="heroicons-outline:video-camera" />
-                                                    </div>
-                                                    {item.meet}
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="flex-none text-xs text-default-600">
-                                            {item.date}
-                                        </div>
-                                    </div>
-                                </li>
-                            ))}
-                        </ul>
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
-                <Card>
-                    <CardHeader className="flex-row  items-center justify-between">
-                        <CardTitle>Task List</CardTitle>
-                        <DashboardDropdown />
-                    </CardHeader>
-                    <CardContent className="p-0">
-                        <ul className="divide-y divide-default-100">
-                            {
-                                tasks.map((task, index) => <TaskItem
-                                    key={index}
-                                    task={task} />)
-                            }
-                        </ul>
-                    </CardContent>
-                </Card>
-                <Card>
-                    <CardHeader className="flex-row items-center justify-between">
-                        <CardTitle>Messages</CardTitle>
-                        <DashboardDropdown />
-                    </CardHeader>
-                    <CardContent className="p-0">
-                        <ul className="divide-y divide-default-100">
-                            {
-                                messagesData.map((message, index) =>
-                                    <MessageListItem
-                                        message={message}
-                                        key={index} />)
-                            }
-                        </ul>
-                    </CardContent>
-                </Card>
-
-                <Card>
-                    <CardHeader className="flex-row items-center justify-between">
-                        <CardTitle>Activity</CardTitle>
-                        <DashboardDropdown />
-                    </CardHeader>
-                    <CardContent className="p-0">
-                        <ul className="relative before:absolute before:start-6 before:top-3.5 before:w-[1px] before:h-[80%] before:bg-default-200">
-                            {
-                                activityList.map((activity, index) =>
-                                    <ActivityItem
-                                        activity={activity}
-                                        key={index}
-                                    />)
-                            }
-                        </ul>
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="grid grid-cols-12 gap-5">
-                <div className="col-span-12 lg:col-span-8">
-                    <Card>
-                        <CardHeader className="flex-row items-center justify-between">
-                            <CardTitle>Team Members</CardTitle>
-                        </CardHeader>
-                        <CardContent className="p-0">
-                            <TeamTable data={teamData} />
-                        </CardContent>
-                    </Card>
-                </div>
-                <div className="col-span-12 lg:col-span-4">
-                    <Card>
-                        <CardHeader className="flex-row items-center justify-between">
-                            <CardTitle>Files</CardTitle>
-                            <DashboardDropdown />
-                        </CardHeader>
-                        <CardContent>
-                            <ul className="divide-y divide-default-100">
-                                {files.map((item, i) => (
-                                    <li key={i} className="py-3">
-                                        <div className="flex items-center gap-2">
-                                            <div className="flex-1 flex gap-2">
-                                                <div className="flex-none">
-                                                    <div className="h-8 w-8">
-                                                        <Image
-                                                            src={item.img}
-                                                            alt=""
-                                                            width={32}
-                                                            height={32}
-                                                            className=" w-full h-full object-cover rounded-full border hover:border-white border-transparent"
-                                                        />
-                                                    </div>
-                                                </div>
-                                                <div className="flex-1">
-                                                    <div className="text-default-600 text-sm">
-                                                        {item.title}
-                                                    </div>
-                                                    <div className="font-normal text-xs text-default-500 mt-1">
-                                                        {item.date}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="flex-none">
-                                                <button
-                                                    type="button"
-                                                    className="text-xs text-slate-900 dark:text-white"
-                                                >
-                                                    Download
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </li>
-                                ))}
-                            </ul>
-                        </CardContent>
-                    </Card>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default SinglePage
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/create-project.tsx b/app/[locale]/(protected)/app/projects/create-project.tsx
deleted file mode 100644
index 716bbe54..00000000
--- a/app/[locale]/(protected)/app/projects/create-project.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
-interface CreateTaskProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface Option {
-  value: string;
-  label: string;
-  image?: string;
-}
-type Inputs = {
-  title: string;
-  description: string;
-  tags: MultiValue<Option>;
-  assignee: MultiValue<Option>;
-  startDate: Date;
-  endDate: Date;
-}
-const options: Option[] = [
-  {
-    value: "team",
-    label: "team",
-  },
-  {
-    value: "low",
-    label: "low",
-  },
-  {
-    value: "medium",
-    label: "medium",
-  },
-  {
-    value: "high",
-    label: "high",
-  },
-  {
-    value: "update",
-    label: "update",
-  }
-];
-const assigneeOptions: Option[] = [
-  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
-  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
-  { value: "rakibul", label: "Rakibul Islam", image: "/images/avatar/av-3.svg" },
-  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
-];
-
-
-const CreateProject = ({ open, setOpen }: CreateTaskProps) => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
-  const [endDate, setEndtDate] = useState<Date>(new Date());
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<Inputs>()
-  const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create  Project</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-1">
-            <Label htmlFor="projectName">Project Name</Label>
-            <Input
-              id="projectName"
-              placeholder="Project Name"
-              {...register("title", { required: "Title is required." })}
-              color={errors.title ? "destructive" : "default"}
-            />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
-          </div>
-          <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-            <div className="space-y-1">
-              <Label htmlFor="startDate">Start Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(startDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setStartDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="endDate">End Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(endDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setEndtDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="assignee">Assignee</Label>
-            <Controller
-              name="assignee"
-              control={control}
-              defaultValue={[]}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  options={assigneeOptions}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
-                  placeholder="Select assignee"
-                />
-              )}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="tag">Tags</Label>
-            <Controller
-              name="tags"
-              control={control}
-              defaultValue={[]}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  options={options}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
-                />
-              )}
-            />
-          </div>
-
-          <div className="space-y-1">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              placeholder="Project Description"
-              {...register("description")}
-            />
-          </div>
-
-          <div className="flex justify-end">
-            <Button type="submit">Add</Button>
-          </div>
-        </form>
-
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default CreateProject;
diff --git a/app/[locale]/(protected)/app/projects/data.ts b/app/[locale]/(protected)/app/projects/data.ts
deleted file mode 100644
index 7e118626..00000000
--- a/app/[locale]/(protected)/app/projects/data.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-export const defaultProjects = [
-  {
-    id: "c06d48bf-7f35-4789-b71e-d80fee5b430f",
-    title: "CRM Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-  {
-    id: "project-business-dashboard-002",
-    title: "Business Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-  {
-    id: "project-management-dashboard-003",
-    title: "Management Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-  {
-    id: "project-analytics-dashboard-004",
-    title: "Analytics Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  },
-
-  {
-    id: "project-marketing-dashboard-005",
-    title: "Marketing Dashboard ",
-    projectLogo: "/images/project/p-2.png",
-    desc: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    startDate: "2022-10-03",
-    endDate: "2022-10-06",
-    progress: 90,
-    assignee: [
-      {
-        image: "/images/avatar/av-1.svg",
-        name: "Mahedi Amin",
-      },
-      {
-        image: "/images/avatar/av-2.svg",
-        name: "Sovo Haldar",
-      },
-      {
-        image: "/images/avatar/av-3.svg",
-        name: "Rakibul Islam",
-      }
-    ],
-    remainingDays: 3
-  }
-];
-
-
-export const getProjects = async () => {
-  return defaultProjects
-}
-
-export const getProjectById = async (id: string) => {
-  return defaultProjects.find(project => project.id === id)
-}
-
-interface ProjectNav {
-  label: string
-  href: string
-  active: boolean
-}
-
-export function getProjectNav(pathname: string): ProjectNav[] {
-  return [
-    {
-      label: 'grid view',
-      href: "/app/projects/grid",
-      active: pathname === "/app/projects/grid",
-    },
-    {
-      label: 'list view',
-      href: "/app/projects/list",
-      active: pathname === "/app/projects/list",
-    }
-  ]
-}
-
-export type Project = (typeof defaultProjects)[number]
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/edit-project.tsx b/app/[locale]/(protected)/app/projects/edit-project.tsx
deleted file mode 100644
index 56f997b7..00000000
--- a/app/[locale]/(protected)/app/projects/edit-project.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
-interface EditProjectProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface Option {
-  value: string;
-  label: string;
-  image?: string;
-}
-type Inputs = {
-  title: string;
-  description: string;
-  tags: MultiValue<Option>;
-  assignee: MultiValue<Option>;
-  startDate: Date;
-  endDate: Date;
-}
-const options: Option[] = [
-  {
-    value: "team",
-    label: "team",
-  },
-  {
-    value: "low",
-    label: "low",
-  },
-  {
-    value: "medium",
-    label: "medium",
-  },
-  {
-    value: "high",
-    label: "high",
-  },
-  {
-    value: "update",
-    label: "update",
-  }
-];
-const assigneeOptions: Option[] = [
-  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
-  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
-  { value: "rakibul", label: "Rakibul Islam", image: "/images/avatar/av-3.svg" },
-  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
-];
-
-
-const EditProject = ({ open, setOpen }: EditProjectProps) => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
-  const [endDate, setEndtDate] = useState<Date>(new Date());
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<Inputs>()
-  const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create  Task</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-1">
-            <Label htmlFor="projectName">Project Name</Label>
-            <Input
-              id="projectName"
-              placeholder="Project Name"
-              defaultValue="Project Title"
-              {...register("title", { required: "Title is required." })}
-              color={errors.title ? "destructive" : "default"}
-            />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
-          </div>
-          <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-            <div className="space-y-1">
-              <Label htmlFor="startDate">Start Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(startDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setStartDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="endDate">End Date</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-start font-normal border border-default-200 text-default-700 md:px-2.5 hover:bg-transparent hover:text-default-700"
-                    size="md"
-                  >
-                    <CalendarIcon className="me-2 h-3.5 w-3.5 text-default-500" />
-                    {format(endDate, "PPP")}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Controller
-                    name="startDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={(date) => {
-                          field.onChange(date);
-                          setEndtDate(date as Date);
-                        }}
-                        initialFocus
-                      />
-                    )}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="assignee">Assignee</Label>
-            <Controller
-              name="assignee"
-              control={control}
-              defaultValue={[{ value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" }]}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  options={assigneeOptions}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
-                  placeholder="Select assignee"
-                />
-              )}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="tag">Tags</Label>
-            <Controller
-              name="tags"
-              control={control}
-              defaultValue={[{ value: "team", label: "Team" }]}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  options={options}
-                  isMulti
-                  onChange={(selectedOption) => field.onChange(selectedOption)}
-                  placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
-                />
-              )}
-            />
-          </div>
-
-          <div className="space-y-1">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              placeholder="Project Description"
-              {...register("description")}
-              defaultValue="Project Description"
-            />
-          </div>
-
-          <div className="flex justify-end">
-            <Button type="submit">Add</Button>
-          </div>
-        </form>
-
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default EditProject;
diff --git a/app/[locale]/(protected)/app/projects/grid/components/empty.tsx b/app/[locale]/(protected)/app/projects/grid/components/empty.tsx
deleted file mode 100644
index 668fff04..00000000
--- a/app/[locale]/(protected)/app/projects/grid/components/empty.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-
-import { Rabbit } from 'lucide-react';
-
-
-const EmptyProject = () => {
-  return (
-    <div className="">
-      <Rabbit className=" h-[200px]  w-[200px] text-default-400 " strokeWidth={1} />
-      <div className=' text-sm text-default-500 text-center'>No tasks</div>
-    </div>
-  );
-};
-
-export default EmptyProject;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/grid/components/project-action.tsx b/app/[locale]/(protected)/app/projects/grid/components/project-action.tsx
deleted file mode 100644
index 97e77086..00000000
--- a/app/[locale]/(protected)/app/projects/grid/components/project-action.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client'
-import React, { useState } from 'react'
-import { Button } from "@/components/ui/button";
-import EditProject from "../../edit-project";
-import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { defaultProjects } from '../../data';
-import { Link } from '@/i18n/routing'; const ProjectAction = () => {
-    const [editTaskOpen, setEditTaskOpen] = useState<boolean>(false);
-    const [deleteProject, setDeleteProject] = useState<boolean>(false)
-    return (
-        <>
-            <EditProject
-                open={editTaskOpen}
-                setOpen={setEditTaskOpen}
-            />
-            <DeleteConfirmationDialog
-                open={deleteProject}
-                onClose={() => setDeleteProject(false)}
-            />
-
-
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button
-                        size="icon"
-                        className="flex-none bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
-                    >
-                        <MoreVertical className="h-4 w-4 text-default-700" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="p-0 overflow-hidden" align="end" >
-                    <DropdownMenuItem
-
-                        className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-
-                    >
-                        <Link href={`/app/projects/${defaultProjects[0].id}`} className=' flex  items-center w-full'>
-                            <Eye className="w-3.5 h-3.5 me-1" />
-                            View
-                        </Link>
-
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        onClick={() => setEditTaskOpen(true)}
-                        className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-
-                    >
-                        <SquarePen className="w-3.5 h-3.5 me-1" />
-                        Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        onClick={() => setDeleteProject(true)}
-                        className="py-2 bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
-
-                    >
-                        <Trash2 className="w-3.5 h-3.5  me-1" />
-                        Delete
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </>
-    )
-}
-
-export default ProjectAction
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/grid/page.tsx b/app/[locale]/(protected)/app/projects/grid/page.tsx
deleted file mode 100644
index eab10c22..00000000
--- a/app/[locale]/(protected)/app/projects/grid/page.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react'
-import { getProjects } from '../data'
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Progress } from "@/components/ui/progress";
-import { Icon } from "@/components/ui/icon";
-import EmptyProject from './components/empty';
-import ProjectAction from './components/project-action';
-const ProjectGrid = async () => {
-    const projects = await getProjects()
-    if (projects.length === 0) return <EmptyProject />
-    return (
-        <div className='grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
-            {projects?.map(({ projectLogo, title, desc, startDate, endDate, progress, assignee, remainingDays }, index) => (
-                <Card key={index}>
-                    <CardHeader className="flex-row gap-1  items-center space-y-0">
-                        <div className="flex-1 flex items-center gap-4">
-                            <Avatar className="flex-none h-10 w-10 rounded bg-default-200 text-default hover:bg-default-200">
-                                <AvatarImage src={projectLogo} />
-                                <AvatarFallback className="uppercase">  {title.charAt(0) + title.charAt(1)}</AvatarFallback>
-                            </Avatar>
-                            <h3 className="text-default-900 text-lg font-medium max-w-[210px] truncate text-center capitalize ">{title}</h3>
-                        </div>
-                        <ProjectAction />
-                    </CardHeader>
-                    <CardContent>
-                        <div className="text-default-600 text-sm">{desc}</div>
-                        <div className="flex gap-4 mt-6">
-                            <div>
-                                <div className="text-xs text-default-400 mb-1">Start Date</div>
-                                <div className="text-xs text-default-600  font-medium">{startDate}</div>
-                            </div>
-                            <div>
-                                <div className="text-xs text-default-400 mb-1">End Date</div>
-                                <div className="text-xs text-default-600  font-medium">{endDate}</div>
-                            </div>
-                        </div>
-                        <div className="mt-1">
-                            <div className="text-end text-xs text-default-600 mb-1.5 font-medium">{progress}%</div>
-                            <Progress value={progress} color="primary" size="sm" />
-                        </div>
-                        <div className="flex mt-5">
-                            <div className="flex-1">
-                                <div className="text-default-400  text-sm font-normal mb-3">Assigned to</div>
-                                <div className="flex items-center -space-x-1">
-                                    {
-                                        assignee?.map((user, index) => (
-                                            <Avatar
-                                                key={`user-${index}`}
-                                                className="h-6 w-6 shadow-none border-none bg-transparent hover:bg-transparent"
-                                            >
-                                                <AvatarImage src={user.image} />
-                                                <AvatarFallback> {user.name.charAt(0) + user.name.charAt(1)}</AvatarFallback>
-                                            </Avatar>
-                                        ))
-                                    }
-                                    <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
-                                        +2
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="flex-none">
-                                <div className="flex items-center gap-1 bg-destructive/10 text-destructive rounded-full px-2 py-0.5 text-xs mt-1">
-                                    <Icon icon="heroicons-outline:clock" />
-                                    {remainingDays} days left
-                                </div>
-                            </div>
-                        </div>
-                    </CardContent>
-                </Card>
-            ))}
-
-        </div>
-    )
-}
-
-export default ProjectGrid
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/layout.tsx b/app/[locale]/(protected)/app/projects/layout.tsx
deleted file mode 100644
index 57b9958c..00000000
--- a/app/[locale]/(protected)/app/projects/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-import ProjectWrapper from "./project-wrapper";
-export const metadata: Metadata = {
-  title: 'Projects',
-  description: 'Projects Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <ProjectWrapper>
-      {children}
-    </ProjectWrapper>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/list/components/list-table.tsx b/app/[locale]/(protected)/app/projects/list/components/list-table.tsx
deleted file mode 100644
index 50ee2df7..00000000
--- a/app/[locale]/(protected)/app/projects/list/components/list-table.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-"use client"
-import * as React from "react"
-import {
-    ColumnDef,
-    ColumnFiltersState,
-    SortingState,
-    VisibilityState,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    useReactTable
-} from "@tanstack/react-table"
-import { defaultProjects, type Project } from "../../data";
-import { Button } from '@/components/ui/button';
-import { ChevronLeft, ChevronRight, Eye, MoreVertical, SquarePen, Trash2 } from 'lucide-react';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Progress } from "@/components/ui/progress";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Link } from '@/i18n/routing';
-import EditProject from "../../edit-project";
-import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
-import { Input } from "@/components/ui/input";
-
-const ListTable = ({ projects }: { projects: Project[] }) => {
-    const [sorting, setSorting] = React.useState<SortingState>([])
-    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-        []
-    )
-    const [columnVisibility, setColumnVisibility] =
-        React.useState<VisibilityState>({})
-    const [rowSelection, setRowSelection] = React.useState({})
-    const [editTaskOpen, setEditTaskOpen] = React.useState<boolean>(false);
-    const [deleteProject, setDeleteProject] = React.useState<boolean>(false)
-
-    const columns: ColumnDef<Project>[] = [
-        {
-            accessorKey: "title",
-            header: "Name",
-            cell: ({ row }) => {
-                return (
-                    <div className="flex items-center gap-3">
-                        <Avatar className="w-10 h-10 shadow-none border-none bg-transparent hover:bg-transparent">
-                            <AvatarImage src={row.original.projectLogo} />
-                            <AvatarFallback> DC</AvatarFallback>
-                        </Avatar>
-                        <div className="font-medium text-sm leading-4 whitespace-nowrap">
-                            {row.getValue("title")}
-                        </div>
-                    </div>
-                )
-            }
-        },
-        {
-            accessorKey: "startDate",
-            header: "Start Date",
-            cell: ({ row }) => {
-                return (
-                    <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
-                )
-            }
-        },
-        {
-            accessorKey: "endDate",
-            header: "End Date",
-            cell: ({ row }) => {
-                return (
-                    <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
-                )
-            }
-        },
-        {
-            accessorKey: "assignee",
-            header: "Assignee",
-            cell: ({ row }: { row: { getValue: (key: string) => { image: string }[] } }) => {
-                const assignees = row.getValue("assignee");
-                return (
-                    <div className="flex -space-x-1 rtl:space-x-reverse">
-                        <div className="flex -space-x-1 rtl:space-x-reverse">
-                            {assignees.map((item, index) => (
-                                <Avatar
-                                    key={`user-${index}`}
-                                    className="h-6 w-6 shadow-none border-none bg-transparent hover:bg-transparent"
-                                >
-                                    <AvatarImage src={item.image} />
-                                    <AvatarFallback>SC</AvatarFallback>
-                                </Avatar>
-                            ))}
-                        </div>
-                        <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
-                            +2
-                        </div>
-                    </div>
-                );
-            }
-        },
-        {
-            accessorKey: "progress",
-            header: "Status",
-            cell: ({ row }) => {
-                return (
-                    <div>
-                        <Progress value={row.getValue("progress")} color="primary" size="sm" />
-                        <div className=" text-xs text-default-500  font-medium mt-3 whitespace-nowrap">
-                            12/15 Task Completed
-                        </div>
-                    </div>
-                )
-            }
-        },
-        {
-            id: "actions",
-            accessorKey: "action",
-            header: "Action",
-            enableHiding: false,
-            cell: ({ row }) => {
-                return (
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button
-                                size="icon"
-                                className="flex-none ring-offset-transparent bg-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
-                            >
-                                <MoreVertical className="h-4 w-4 text-default-700" />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="p-0 overflow-hidden" align="end" >
-                            <DropdownMenuItem
-                                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-                                asChild
-                            >
-                                <Link href={`/app/projects/${defaultProjects[0].id}`}>
-                                    <Eye className="w-3.5 h-3.5 me-1" />
-                                    View
-                                </Link>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-                                onClick={() => setEditTaskOpen(true)}
-                            >
-                                <SquarePen className="w-3.5 h-3.5 me-1" />
-                                Edit
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                                className="py-2  bg-destructive/10 text-destructive focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
-                                onClick={() => setDeleteProject(true)}
-                            >
-                                <Trash2 className="w-3.5 h-3.5  me-1" />
-                                Delete
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                )
-            }
-        }
-    ]
-    const table = useReactTable({
-        data: projects,
-        columns,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onColumnVisibilityChange: setColumnVisibility,
-        onRowSelectionChange: setRowSelection,
-        state: {
-            sorting,
-            columnFilters,
-            columnVisibility,
-            rowSelection
-        }
-    })
-
-    return (
-        <>
-            <EditProject
-                open={editTaskOpen}
-                setOpen={setEditTaskOpen}
-            />
-            <DeleteConfirmationDialog
-                open={deleteProject}
-                onClose={() => setDeleteProject(false)}
-            />
-            <Card>
-                <CardHeader>
-                    <CardTitle>Project List</CardTitle>
-                </CardHeader>
-                <CardContent className="p-0">
-                    <Table>
-                        <TableHeader className="px-3 bg-default-100">
-                            {table.getHeaderGroups().map((headerGroup) => (
-                                <TableRow key={headerGroup.id}>
-                                    {headerGroup.headers.map((header) => {
-                                        return (
-                                            <TableHead key={header.id}>
-                                                {header.isPlaceholder
-                                                    ? null
-                                                    : flexRender(
-                                                        header.column.columnDef.header,
-                                                        header.getContext()
-                                                    )}
-                                            </TableHead>
-                                        )
-                                    })}
-                                </TableRow>
-                            ))}
-                        </TableHeader>
-                        <TableBody>
-                            {table.getRowModel().rows?.length ? (
-                                table.getRowModel().rows.map((row) => (
-                                    <TableRow
-                                        key={row.id}
-                                        data-state={row.getIsSelected() && "selected"}
-                                        className="even:bg-default-100 px-6 h-20" >
-                                        {row.getVisibleCells().map((cell) => (
-                                            <TableCell key={cell.id}>
-                                                {flexRender(
-                                                    cell.column.columnDef.cell,
-                                                    cell.getContext()
-                                                )}
-                                            </TableCell>
-                                        ))}
-                                    </TableRow>
-                                ))
-                            ) : (
-                                <TableRow>
-                                    <TableCell
-                                        colSpan={columns.length}
-                                        className="h-24 text-center"
-                                    >
-                                        No results.
-                                    </TableCell>
-                                </TableRow>
-                            )}
-                        </TableBody>
-                    </Table>
-                    <div className="flex items-center justify-end py-4 px-10">
-
-                        <div className="flex-1 flex items-center gap-3">
-                            <div className=" flex gap-2 items-center">
-                                <div className="text-sm font-medium text-default-60">Go  </div>
-                                <Input
-                                    type="number"
-                                    className="w-16 px-2"
-                                    defaultValue={table.getState().pagination.pageIndex + 1}
-                                    onChange={(e) => {
-                                        const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
-                                        table.setPageIndex(pageNumber);
-                                    }}
-                                />
-                            </div>
-                            <div className="text-sm font-medium text-default-600">
-                                Page{" "}  {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-                            </div>
-                        </div>
-                        <div className="flex items-center gap-2 flex-none">
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.previousPage()}
-                                disabled={!table.getCanPreviousPage()}
-                                className='w-8 h-8'
-                            >
-                                <ChevronLeft className='w-4 h-4' />
-                            </Button>
-                            {table.getPageOptions().map((page, pageIndex) => (
-                                <Button
-                                    key={`basic-data-table-${pageIndex}`}
-                                    onClick={() => table.setPageIndex(pageIndex)}
-                                    size="icon"
-                                    className={`w-8 h-8 ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-                                >
-                                    {page + 1}
-                                </Button>
-
-                            ))}
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.nextPage()}
-                                disabled={!table.getCanNextPage()}
-                                className='w-8 h-8'
-                            >
-                                <ChevronRight className='w-4 h-4' />
-                            </Button>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-        </>
-    )
-}
-export default ListTable;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/list/page.tsx b/app/[locale]/(protected)/app/projects/list/page.tsx
deleted file mode 100644
index e9136af9..00000000
--- a/app/[locale]/(protected)/app/projects/list/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import ListTable from './components/list-table'
-import { getProjects } from '../data'
-
-const ProjectList = async () => {
-    const projects = await getProjects()
-    return (
-        <div>
-            <ListTable projects={projects} />
-        </div>
-    )
-}
-
-export default ProjectList
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/loading.tsx b/app/[locale]/(protected)/app/projects/loading.tsx
deleted file mode 100644
index 2eb5295e..00000000
--- a/app/[locale]/(protected)/app/projects/loading.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Loading = () => {
-    return (
-        <div>loading..</div>
-    )
-}
-
-export default Loading
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/page.tsx b/app/[locale]/(protected)/app/projects/page.tsx
deleted file mode 100644
index 06ca0027..00000000
--- a/app/[locale]/(protected)/app/projects/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-
-import { redirect } from '@/components/navigation'
-
-const ProjectPage = () => {
-  redirect('/app/projects/grid')
-  return null
-}
-
-export default ProjectPage
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/projects/project-wrapper.tsx b/app/[locale]/(protected)/app/projects/project-wrapper.tsx
deleted file mode 100644
index 2bc1abdf..00000000
--- a/app/[locale]/(protected)/app/projects/project-wrapper.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-"use client"
-import { Button } from "@/components/ui/button";
-import { Filter, List, Plus } from "lucide-react";
-import CreateProject from "./create-project";
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import { Link, usePathname } from "@/components/navigation";
-import { getProjectNav } from "./data";
-
-const ProjectWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [open, setOpen] = useState<boolean>(false);
-    const pathname = usePathname();
-    const menus = getProjectNav(pathname)
-
-    return (
-        <div>
-            <CreateProject
-                open={open}
-                setOpen={setOpen}
-            />
-            <div className="flex w-full flex-wrap items-center gap-4 mb-6">
-                <h4 className="flex-1 font-medium lg:text-2xl text-xl capitalize text-default-900">
-                    Project
-                </h4>
-                <div className="flex items-center gap-4 flex-wrap">
-                    {menus?.map(({ label, href, active }, index) => (
-                        <Button
-                            key={index}
-                            asChild
-                            className={cn("flex-none capitalize bg-card text-default-600 hover:bg-card hover:text-default-600  hover:ring-0 hover:ring-transparent", {
-                                "bg-default text-default-foreground hover:bg-default hover:text-default-foreground": active,
-                            })}
-
-                        >
-                            <Link href={href}>
-                                <List className="w-3.5 h-3.5 me-1" />
-                                <span>{label}</span>
-                            </Link>
-
-                        </Button>
-                    ))}
-
-
-                    <Button className="flex-none bg-card text-default-600 hover:ring-0 hover:ring-transparent hover:bg-default hover:text-default-foreground" >
-                        <Filter className="w-3.5 h-3.5 me-1" />
-                        <span>On Going</span>
-                    </Button>
-                    <Button
-                        className="flex-none"
-                        onClick={() => setOpen(true)}
-                    >
-                        <Plus className="w-4 h-4 me-1" />
-                        <span>Add Project</span>
-                    </Button>
-                </div>
-            </div>
-            {children}
-        </div>
-    );
-};
-
-export default ProjectWrapper;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/create-todo.tsx b/app/[locale]/(protected)/app/todo/create-todo.tsx
deleted file mode 100644
index 7037e949..00000000
--- a/app/[locale]/(protected)/app/todo/create-todo.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-"use client"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { CalendarIcon, Plus } from "lucide-react";
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { toast } from "@/components/ui/use-toast"
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import Image from "next/image";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { cn } from "@/lib/utils";
-import { format } from "date-fns";
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-
-const assigneeOptions = [
-  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
-  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
-  { value: "rakibul", label: "Rakibul Islam", image: "/images/avatar/av-3.svg" },
-  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
-];
-
-
-const FormSchema = z.object({
-  title: z.string().min(2, {
-    message: "Title must be at least 2 characters.",
-  }),
-  assign: z.string().optional(),
-  tag: z.string().optional(),
-  dob: z.date().optional(),
-  description: z.string().optional()
-})
-
-const CreateTodo = () => {
-  const t = useTranslations("TodoApp")
-  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      title: "",
-    },
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "Task created successfully.",
-    })
-    setIsDialogOpen(false);
-  }
-
-  return (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogTrigger asChild>
-        <Button fullWidth size="lg" className="dark:bg-background dark:text-foreground">
-          <Plus className="w-6 h-6 me-1.5" />
-          {t("addTask", { defaultValue: "Add Task" })}
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader className="mb-4">
-          <DialogTitle> {t("addTask", { defaultValue: "Add Task" })}</DialogTitle>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Title</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Enter Title" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="assign"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Assign</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select..." />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {
-                        assigneeOptions.map((user, index) =>
-                          <SelectItem
-                            key={`user-${index}`}
-                            value={user.value}>
-                            <div className="flex items-center gap-2">
-                              <Image
-                                src={user.image}
-                                alt={user.label}
-                                width={20}
-                                height={20}
-                                className="w-5 h-5 rounded-full" />
-                              <span className="text-sm text-default-900">{user.label}</span>
-                            </div>
-                          </SelectItem>)
-                      }
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="dob"
-              render={({ field }) => (
-                <FormItem className="flex flex-col">
-                  <FormLabel className="text-default-700">Due Date</FormLabel>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <FormControl>
-                        <Button
-                          variant="outline"
-                          size="md"
-                          fullWidth
-                          className={cn(
-                            "border-default md:px-3",
-                            !field.value && "text-muted-foreground border-default-200 md:px-3"
-                          )}
-                        >
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                          <CalendarIcon className={cn("ms-auto h-4 w-4 text-default-300",
-                            { "text-default-900": field.value }
-                          )} />
-                        </Button>
-                      </FormControl>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0" align="start">
-                      <Calendar
-                        mode="single"
-                        selected={field.value}
-                        onSelect={field.onChange}
-                        disabled={(date) =>
-                          date > new Date() || date < new Date("1900-01-01")
-                        }
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="tag"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Tag</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select..." />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value="team">Team</SelectItem>
-                      <SelectItem value="low">Low</SelectItem>
-                      <SelectItem value="medium">Medium</SelectItem>
-                      <SelectItem value="high">High</SelectItem>
-                      <SelectItem value="update">Update</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Tell us a little bit about yourself"
-                      className="resize-none"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <div className="flex justify-end">
-              <Button type="submit">Submit</Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default CreateTodo;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/data.ts b/app/[locale]/(protected)/app/todo/data.ts
deleted file mode 100644
index 7abd3847..00000000
--- a/app/[locale]/(protected)/app/todo/data.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-export const todos = [
-  {
-    id: "todo-001-laboriosam",
-    image: [
-      {
-        image: "/images/avatar/avatar-4.png",
-        label: "Mahedi Amin",
-        value: "mahedi",
-      },
-      {
-        image: "/images/avatar/avatar-2.png",
-        label: "Sovo Haldar",
-        value: "sovo",
-      },
-      {
-        image: "/images/avatar/avatar-3.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title: "laboriosam mollitia et enim quasi adipisci quia provident illum",
-    isDone: false,
-    isfav: false,
-    isTrash: false,
-    category: [
-      {
-        value: "team",
-        label: "team",
-      }
-    ]
-  },
-  {
-    id: "todo-002-amet-minim",
-    image: [
-      {
-        image:  "/images/avatar/avatar-2.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      }
-    ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    isDone: false,
-    isfav: true,
-    isTrash: false,
-    category: [
-      {
-        value: "low",
-        label: "low",
-      }
-    ]
-  },
-  {
-    id: "todo-003-amet-minim-2",
-    image: [
-      {
-        image: "/images/avatar/avatar-4.png",
-        label: "Sovo Haldar",
-        value: "sovo",
-      },
-      {
-        image: "/images/avatar/avatar-1.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
-    isDone: true,
-    isfav: true,
-    isTrash: false,
-    category: [
-      {
-        value: "medium",
-        label: "medium",
-      },
-      {
-        value: "low",
-        label: "low",
-      }
-    ]
-  },
-  {
-    id: "todo-004-illo-expedita",
-    image: [
-      {
-        image:  "/images/avatar/avatar-3.png",
-        label: "Mahedi Amin",
-        value: "mahedi",
-      },
-      {
-        image: "/images/avatar/avatar-4.png",
-        label: "Sovo Haldar",
-        value: "sovo",
-      },
-      {
-        image: "/images/avatar/avatar-4.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      }
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    isfav: false,
-    isTrash: false,
-    category: [
-      {
-        value: "high",
-        label: "high",
-      },
-      {
-        value: "low",
-        label: "low",
-      }
-    ]
-  },
-  {
-    id: "todo-005-illo-expedita-2",
-    image: [
-      {
-        image:  "/images/avatar/avatar-5.png",
-        label: "Rakibul Islam",
-        value: "rakibul",
-      },
-    ],
-    title: "illo expedita consequatur quia in",
-    isDone: false,
-    isfav: false,
-    isTrash: false,
-    category: [
-      {
-        value: "update",
-        label: "update",
-      }
-    ]
-  }
-]
-
-
-
-
-
-
-
-export type Todo =  ( typeof todos)[number]
diff --git a/app/[locale]/(protected)/app/todo/edit-todo.tsx b/app/[locale]/(protected)/app/todo/edit-todo.tsx
deleted file mode 100644
index 746c788f..00000000
--- a/app/[locale]/(protected)/app/todo/edit-todo.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-"use client"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import { CalendarIcon } from "lucide-react";
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { toast } from "@/components/ui/use-toast"
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import Image from "next/image";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { cn } from "@/lib/utils";
-import { format } from "date-fns";
-
-const assigneeOptions = [
-  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
-  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
-  { value: "rakibul", label: "Rakibul Islam", image: "/images/avatar/av-3.svg" },
-  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
-];
-
-
-const FormSchema = z.object({
-  title: z.string().min(2, {
-    message: "Title must be at least 2 characters.",
-  }),
-  assign: z.string().optional(),
-  tag: z.string().optional(),
-  dob: z.date().optional(),
-  description: z.string().optional()
-})
-
-const EditTodo = ({ open, setOpen }: { open: boolean; setOpen: React.Dispatch<React.SetStateAction<boolean>> }) => {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      title: "This is title",
-      assign: "mahedi",
-      tag: "high",
-      dob: new Date(),
-      description: "This is description"
-    }
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "Task Update successfully.",
-    })
-    setOpen(false);
-  }
-  return (
-    <Dialog open={open} onOpenChange={setOpen}      >
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle> Edit Task</DialogTitle>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Title</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Enter Title" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="assign"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Assign</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select..." />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {
-                        assigneeOptions.map((user, index) =>
-                          <SelectItem
-                            key={`user-${index}`}
-                            value={user.value}>
-                            <div className="flex items-center gap-2">
-                              <Image
-                                src={user.image}
-                                alt={user.label}
-                                width={20}
-                                height={20}
-                                className="w-5 h-5 rounded-full" />
-                              <span className="text-sm text-default-900">{user.label}</span>
-                            </div>
-                          </SelectItem>)
-                      }
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="dob"
-              render={({ field }) => (
-                <FormItem className="flex flex-col">
-                  <FormLabel className="text-default-700">Due Date</FormLabel>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <FormControl>
-                        <Button
-                          variant="outline"
-                          size="md"
-                          fullWidth
-                          className={cn(
-                            "border-default md:px-3",
-                            !field.value && "text-muted-foreground border-default-200 md:px-3"
-                          )}
-                        >
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                          <CalendarIcon className={cn("ms-auto h-4 w-4 text-default-300",
-                            { "text-default-900": field.value }
-                          )} />
-                        </Button>
-                      </FormControl>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0" align="start">
-                      <Calendar
-                        mode="single"
-                        selected={field.value}
-                        onSelect={field.onChange}
-                        disabled={(date) =>
-                          date > new Date() || date < new Date("1900-01-01")
-                        }
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="tag"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Tag</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select..." />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value="team">Team</SelectItem>
-                      <SelectItem value="low">Low</SelectItem>
-                      <SelectItem value="medium">Medium</SelectItem>
-                      <SelectItem value="high">High</SelectItem>
-                      <SelectItem value="update">Update</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-default-700">Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Tell us a little bit about yourself"
-                      className="resize-none"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit">Update</Button>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default EditTodo;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/layout.tsx b/app/[locale]/(protected)/app/todo/layout.tsx
deleted file mode 100644
index b8f2aa23..00000000
--- a/app/[locale]/(protected)/app/todo/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Metadata } from "next";
-import TodoWrapper from "./todo-wrapper";
-
-export const metadata: Metadata = {
-  title: "Todo",
-  description: "Todo Application"
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <TodoWrapper>
-      {children}
-    </TodoWrapper>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/page.tsx b/app/[locale]/(protected)/app/todo/page.tsx
deleted file mode 100644
index 7c6aa87f..00000000
--- a/app/[locale]/(protected)/app/todo/page.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import CreateTodo from "./create-todo";
-import { todos } from "./data";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import TodoHeader from "./todo-header";
-import Todo from "./todo";
-import TodoSidebarWrapper from "./sidebar-wrapper";
-import Nav from "@/components/nav";
-import { useTranslations } from "next-intl";
-const TodoPage = () => {
-const t = useTranslations("TodoApp");
-  return (
-    <div className="flex gap-5  h-full ">
-      <TodoSidebarWrapper >
-        <Card className="h-full">
-          <CardContent className="h-full p-0">
-            <ScrollArea className="h-[calc(100%-30px)]"  >
-              <div className="mb-4 px-4 pt-5 m-1 sticky top-0">
-                <CreateTodo />
-              </div>
-              <Nav links={[
-                {
-                  title: "My Task",
-                  icon: "uil:image-v",
-                  active: true,
-                },
-                {
-
-                  title: "Starred",
-                  icon: "heroicons:star",
-                  active: false,
-                },
-                {
-
-                  title: "Completed",
-                  icon: "heroicons:document-check",
-                  active: false,
-                },
-                {
-
-                  title: "Trash",
-                  icon: "heroicons:trash",
-                  active: false,
-                }
-              ]} />
-              <div className="py-4 px-5 text-default-800  font-semibold text-xs uppercase">
-                {t("todos", { defaultValue: "Todos" })}
-              </div>
-              <Nav dotStyle links={[
-                {
-                  title: "Team",
-                  active: true,
-
-                },
-                {
-                  title: "low",
-                  active: false,
-                },
-                {
-                  title: "medium",
-                  active: false,
-                },
-                {
-                  title: "high",
-                  active: false,
-                },
-                {
-                  title: "update",
-                  active: false,
-                }
-
-              ]} />
-            </ScrollArea>
-          </CardContent>
-        </Card>
-      </TodoSidebarWrapper>
-      <div className="flex-1 w-full">
-        <Card className="h-full overflow-hidden">
-          <CardHeader className="border-b border-default-200 ">
-            <TodoHeader />
-          </CardHeader>
-          <CardContent className="p-0 h-full">
-            <div className="h-[calc(100%-60px)] overflow-y-auto no-scrollbar">
-              {
-                todos.map((todo, index) =>
-                  <Todo
-                    key={`todo-${index}`}
-                    todo={todo}
-                  />)
-              }
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default TodoPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/sidebar-wrapper.tsx b/app/[locale]/(protected)/app/todo/sidebar-wrapper.tsx
deleted file mode 100644
index 79f94832..00000000
--- a/app/[locale]/(protected)/app/todo/sidebar-wrapper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-import { useMediaQuery } from '@/hooks/use-media-query'
-import { useTodoConfig } from '@/hooks/use-todo'
-import { cn } from '@/lib/utils'
-import React from 'react'
-const TodoSidebarWrapper = ({ children }: { children: React.ReactNode }) => {
-  const [todoConfig] = useTodoConfig()
-  const { isOpen } = todoConfig
-  const isTablet = useMediaQuery("(min-width: 1024px)");
-  if (!isTablet) {
-    return (
-      <div className={cn('absolute h-full  start-0  w-[240px] z-50 ', {
-        '-start-full': !isOpen
-      })}>
-        {children}
-      </div>
-    )
-  }
-  return (
-    <div className='flex-none  md:w-[270px] w-[200px]  '>{children}</div>
-  )
-}
-
-export default TodoSidebarWrapper
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/todo-header.tsx b/app/[locale]/(protected)/app/todo/todo-header.tsx
deleted file mode 100644
index d524542a..00000000
--- a/app/[locale]/(protected)/app/todo/todo-header.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { MoreVertical, Search } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import ToggleTodoSidebar from "./toggle-todo-sidebar";
-
-
-const TodoHeader = () => {
-  const actions = [
-    {
-      name: "Reset Sort",
-      icon: "heroicons-outline:sort-ascending",
-    },
-    {
-      name: "Sort A-Z ",
-      icon: "heroicons-outline:sort-ascending",
-    },
-    {
-      name: "Sort Z-A ",
-      icon: "heroicons-outline:sort-descending",
-    }
-  ];
-  return (
-    <div className="flex gap-2">
-      <div className="flex-1 flex items-center gap-1">
-        <ToggleTodoSidebar />
-        <Search className="w-4 h-4 text-default-400" />
-        <Input placeholder="Search Task" className="max-w-[180px] border-none font-medium dark:bg-transparent" />
-      </div>
-      <div className="flex-none">
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="icon" className="w-8 h-8 rounded-full bg-default-100 group">
-              <MoreVertical className="w-5 h-5 text-default group-hover:text-default-foreground" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
-            {
-              actions.map((action, index) => (
-                <DropdownMenuItem
-                  key={`action-${index}`}
-                  className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
-                >
-                  <Icon icon={action.icon} className="group-hover:text-primary-foreground w-4 h-4" />
-                  <span className="text-default-700 group-hover:text-primary-foreground">{action.name}</span>
-                </DropdownMenuItem>
-              ))
-            }
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-};
-
-export default TodoHeader;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/todo-wrapper.tsx b/app/[locale]/(protected)/app/todo/todo-wrapper.tsx
deleted file mode 100644
index cb3ee5bc..00000000
--- a/app/[locale]/(protected)/app/todo/todo-wrapper.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-import { useMediaQuery } from '@/hooks/use-media-query';
-import { useTodoConfig } from '@/hooks/use-todo'
-
-const TodoWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [todoConfig, setTodoConfig] = useTodoConfig();
-    const { isOpen } = todoConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    return (
-        <div className='relative app-height'>
-            {!isTablet && isOpen && (
-                <div
-                    onClick={() => setTodoConfig({ ...todoConfig, isOpen: false })}
-                    className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
-         backdrop-blur-sm absolute w-full flex-1 inset-0 z-20 rounded-md"
-
-                ></div>
-            )}
-
-            {children}
-        </div>
-    )
-}
-
-export default TodoWrapper
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/todo.tsx b/app/[locale]/(protected)/app/todo/todo.tsx
deleted file mode 100644
index 4e43b979..00000000
--- a/app/[locale]/(protected)/app/todo/todo.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client"
-import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@/components/ui/icon";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { AvatarFallback } from "@radix-ui/react-avatar";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import EditTodo from "./edit-todo";
-import { Todo as TodoProps } from "./data";
-import { Button } from "@/components/ui/button";
-import { SquarePen, Trash2 } from "lucide-react";
-import { useState } from "react";
-import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
-
-const Todo = ({ todo }: { todo: TodoProps }) => {
-  const { image, title, isfav, category } = todo;
-
-  const [confirmDelete, setConfirmDelete] = useState<boolean>(false);
-  const [openEdit, setOpenEdit] = useState<boolean>(false);
-
-  const categoryClasses: Record<string, string> = {
-    team: "bg-destructive/10 text-destructive",
-    high: "bg-primary/10 text-primary",
-    medium: "bg-warning/10 text-warning",
-    low: "bg-success/10 text-success",
-    update: "bg-info/10 text-info"
-  }
-  return (
-    <>
-      <DeleteConfirmationDialog
-        open={confirmDelete}
-        onClose={() => setConfirmDelete(false)}
-      />
-      <EditTodo
-        open={openEdit}
-        setOpen={setOpenEdit}
-      />
-      <div className="flex items-center gap-4 border-b border-defualt-200 dark:border-default-300 last:border-none px-6 py-4 transition-all duration-300 hover:-translate-y-1">
-        <div>
-          <Checkbox className="mt-0.5 dark:bg-default-300"/>
-        </div>
-        <div className="ms-1">
-          {isfav ? (
-            <Icon
-              icon="heroicons:star-20-solid"
-              className="text-xl  cursor-pointer text-[#FFCE30]"
-            />
-          ) : (
-            <Icon
-              icon="heroicons:star"
-              className="text-xl cursor-pointer text-default-400"
-            />
-          )}
-        </div>
-        <p className="flex-1 overflow-hidden text-sm text-default-600 truncate">{title}</p>
-
-        <div className="-space-x-1.5 rtl:space-x-reverse flex flex-nowrap">
-          {
-            image.map((item, index) =>
-              <TooltipProvider key={`avatar-${index}`} >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Avatar className="h-7 w-7 border-none shadow-none">
-                      <AvatarImage src={item.image} />
-                      <AvatarFallback>SA</AvatarFallback>
-                    </Avatar>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{item.label}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )
-          }
-        </div>
-        <div className="flex gap-1 items-center">
-          {category.map((item, index) => (
-            <Badge
-              key={`category-${index}`}
-              className={cn("rounded-full px-3 py-1 font-medium", categoryClasses[item.value])}>
-              {item.label}
-            </Badge>
-          ))}
-        </div>
-        <Button
-          className="bg-transparent text-default-400 ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-fit"
-          size="icon"
-          onClick={() => setOpenEdit(true)}
-        >
-          <SquarePen className=" w-4 h-4" />
-        </Button>
-        <Button
-          className="bg-transparent text-default-400 ring-offset-transparent  hover:text-destructive border-none focus-visible:ring-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent px-0 w-fit"
-          size="icon"
-          onClick={() => setConfirmDelete(true)}
-        >
-          <Trash2 className=" w-4 h-4" />
-        </Button>
-      </div>
-    </>
-  );
-};
-
-export default Todo;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/app/todo/toggle-todo-sidebar.tsx b/app/[locale]/(protected)/app/todo/toggle-todo-sidebar.tsx
deleted file mode 100644
index b022a32d..00000000
--- a/app/[locale]/(protected)/app/todo/toggle-todo-sidebar.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { useMediaQuery } from '@/hooks/use-media-query'
-import { useTodoConfig } from '@/hooks/use-todo'
-import { Menu } from 'lucide-react'
-import React from 'react'
-
-const ToggleTodoSidebar = () => {
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    const [todoConfig, setTodoConfig] = useTodoConfig()
-    if (isTablet) return null
-
-
-    return (
-        <Button size='icon' color='secondary' onClick={() => setTodoConfig({ ...todoConfig, isOpen: !todoConfig.isOpen })}>
-            <Menu className=' h-5 w-5' />
-        </Button>
-    )
-}
-
-export default ToggleTodoSidebar
\ No newline at end of file
diff --git a/app/[locale]/(protected)/blocks/basic-widget/layout.tsx b/app/[locale]/(protected)/blocks/basic-widget/layout.tsx
deleted file mode 100644
index 73d03819..00000000
--- a/app/[locale]/(protected)/blocks/basic-widget/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Basic Widget',
-  description: 'Basic Widget'
-}
-const BasicWidget = ({children}: {children: React.ReactNode}) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default BasicWidget;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/blocks/basic-widget/page.tsx b/app/[locale]/(protected)/blocks/basic-widget/page.tsx
deleted file mode 100644
index a5d8cde3..00000000
--- a/app/[locale]/(protected)/blocks/basic-widget/page.tsx
+++ /dev/null
@@ -1,532 +0,0 @@
-
-import { UpgradeBlock } from "@/components/blocks/upgrade-block";
-import { WelcomeBlock, BlockBadge } from "@/components/blocks/welcome-block";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Eye } from "lucide-react";
-import Image from "next/image";
-
-const WidgetPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-5" >
-        <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5">
-          {/* Block 1 */}
-          <WelcomeBlock >
-            <div className="max-w-[180px] relative z-10">
-              <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
-                Upgrade your Dashcode
-              </h4>
-              <p className="text-sm text-primary-foreground dark:text-default-800 text-opacity-80">
-                Pro plan for better results
-              </p>
-            </div>
-            <BlockBadge>Now</BlockBadge>
-            <Image
-              src="/images/all-img/widget-bg-3.png"
-              width={400}
-              height={150}
-              priority
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* Block 2 */}
-          <WelcomeBlock >
-            <div className="max-w-[180px] relative z-10">
-              <div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
-                Upgrade your Dashcode
-              </div>
-              <p className="text-sm text-default-800 dark:text-default-100">
-                Pro plan for better results
-              </p>
-            </div>
-            <BlockBadge>Now</BlockBadge>
-            <Image
-              src="/images/all-img/widget-bg-1.png"
-              width={400}
-              height={150}
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* Block 3 */}
-          <WelcomeBlock >
-            <div className="max-w-[180px] relative z-10">
-              <div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
-                Upgrade your Dashcode
-              </div>
-              <p className="text-sm text-default-800 dark:text-default-100">
-                Pro plan for better results
-              </p>
-            </div>
-            <BlockBadge>Now</BlockBadge>
-            <Image
-              src="/images/all-img/widget-bg-3-1.png"
-              width={400}
-              height={150}
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* Block 4 */}
-          <WelcomeBlock >
-            <div className="max-w-[180px] relative z-10">
-              <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
-                <span className="block font-normal">Good evening,</span>
-                <span className="block">Mr. Dianne Russell</span>
-              </h4>
-              <p className="text-sm text-primary-foreground dark:text-default-900 font-normal">
-                Welcome to Dashcode
-              </p>
-            </div>
-            <Image
-              src="/images/all-img/widget-bg-2.png"
-              width={400}
-              height={150}
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* Block 5 */}
-          <WelcomeBlock className="flex items-center" >
-            <div className="flex-1 relative z-10">
-              <div className="max-w-[180px]">
-                <div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
-                  <span className="block font-normal">Good evening,</span>
-                  <span className="block">Mr. Dianne Russell</span>
-                </div>
-                <p className="text-sm text-default-900 dark:text-default-100 font-normal">
-                  Welcome to Dashcode
-                </p>
-              </div>
-            </div>
-            <div className="flex-none relative w-[120px] z-10">
-              <Image
-                src="/images/all-img/widgetvector.png"
-                alt=""
-                width={220}
-                height={100}
-                className="w-full h-full"
-              />
-            </div>
-            <Image
-              src="/images/all-img/widget-bg-4.png"
-              width={400}
-              height={150}
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* block 6 */}
-          <WelcomeBlock className="flex items-center" >
-            <div className="flex-1 relative z-10">
-              <div className="max-w-[180px]">
-                <div className="text-xl font-medium text-primary-foreground  mb-2">
-                  <span className="block font-normal">Good evening,</span>
-                  <span className="block">Mr. Dianne Russell</span>
-                </div>
-                <p className="text-sm text-wgite text-primary-foreground  font-normal">
-                  Welcome to Dashcode
-                </p>
-              </div>
-            </div>
-            <div className="flex-none relative z-10">
-              <Image
-                alt=""
-                src="/images/all-img/widgetvector2.png"
-                className="ms-auto w-[100px] h-[80px]"
-                width={120}
-                height={100}
-              />
-            </div>
-            <Image
-              src="/images/all-img/widget-bg-5.png"
-              width={400}
-              height={150}
-              priority
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* Block 7 */}
-          <WelcomeBlock className="bg-default" >
-            <div className="max-w-[180px] relative z-10">
-              <h4 className="text-xl font-medium text-primary-foreground mb-2">
-                Upgrade your Dashcode
-              </h4>
-              <p className="text-sm text-primary-foreground text-opacity-80">
-                Pro plan for better results
-              </p>
-            </div>
-            <BlockBadge className="bg-destructive text-destructive-foreground dark:bg-default-100 dark:text-default-900">Now</BlockBadge>
-
-          </WelcomeBlock>
-          {/* Block 8 */}
-          <WelcomeBlock className="bg-primary" >
-            <div className="max-w-[180px] relative z-10">
-              <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
-                Upgrade your Dashcode
-              </h4>
-              <p className="text-sm text-primary-foreground dark:text-default-900 text-opacity-80">
-                Pro plan for better results
-              </p>
-            </div>
-            <BlockBadge className="bg-success text-success-foreground">Now</BlockBadge>
-          </WelcomeBlock>
-          {/* Block 9 */}
-          <WelcomeBlock className="bg-gradient-to-r from-primary to-success" >
-            <div className="max-w-[180px] relative z-10">
-              <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
-                Upgrade your Dashcode
-              </h4>
-              <p className="text-sm text-primary-foreground dark:text-default-900 text-opacity-80">
-                Pro plan for better results
-              </p>
-            </div>
-            <BlockBadge className="bg-warning text-warning-foreground">Now</BlockBadge>
-          </WelcomeBlock>
-          {/* Block 10 */}
-          <WelcomeBlock className="flex items-center py-7" >
-            <div className="flex-1 relative z-10">
-              <div className="max-w-[180px]">
-                <h4 className="text-2xl font-medium text-primary-foreground dark:text-default-900 mb-2">
-                  <span className="block text-sm">Current balance,</span>
-                  <span className="block">$34,564</span>
-                </h4>
-              </div>
-            </div>
-            <div className="flex-none relative z-10">
-              <Button
-                color="primary"
-                className="hover:ring-0 hover:ring-offset-0 "
-              >
-                <Eye className="w-4 h-4 text-primary-foreground me-2" />
-                View details
-              </Button>
-            </div>
-            <Image
-              src="/images/all-img/widget-bg-6.png"
-              width={400}
-              height={150}
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* Block 11 */}
-          <WelcomeBlock className="flex items-center py-7" >
-            <div className="flex-1 relative z-10">
-              <div className="max-w-[180px]">
-                <h4 className="text-2xl font-medium mb-2">
-                  <span className="block text-sm text-default-800 dark:text-default-100">Current balance,</span>
-                  <span className="block text-default-900 dark:text-default-100">$34,564</span>
-                </h4>
-              </div>
-            </div>
-            <div className="flex-none relative z-10">
-              <Button
-                color="primary"
-                className="hover:ring-0 hover:ring-offset-0 "
-              >
-                <Eye className="w-4 h-4 text-primary-foreground me-2" />
-                View details
-              </Button>
-            </div>
-            <Image
-              src="/images/all-img/widget-bg-7.png"
-              width={400}
-              height={150}
-              priority
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-          {/* Block 12 */}
-          <WelcomeBlock className="flex items-center py-7" >
-            <div className="flex-1 relative z-10">
-              <div className="max-w-[180px]">
-                <h4 className="text-2xl font-medium  mb-2">
-                  <span className="block text-sm text-default-800 dark:text-default-100">Current balance,</span>
-                  <span className="block text-default-900 dark:text-default-100">$34,564</span>
-                </h4>
-              </div>
-            </div>
-            <div className="flex-none relative z-10">
-              <Button
-                color="primary"
-                className="hover:ring-0 hover:ring-offset-0 "
-              >
-                <Eye className="w-4 h-4 text-primary-foreground me-2" />
-                View details
-              </Button>
-            </div>
-            <Image
-              src="/images/all-img/widget-bg-8.png"
-              width={400}
-              height={150}
-              priority
-              alt="Description of the image"
-              className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
-            />
-          </WelcomeBlock>
-        </div>
-        {/* Upgrade Block */}
-        <div className="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
-          <UpgradeBlock className="bg-default dark:bg-default-50">
-            <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-              <div className="text-xs font-normal text-default-foreground dark:text-default-800">
-                Upgrade your system to business plan
-              </div>
-            </div>
-            <div className="mt-6 mb-14 relative z-10">
-              <Button
-                size="md"
-                className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
-              >
-                Upgrade
-              </Button>
-            </div>
-            <div className="absolute bottom-0 start-0 z-10 w-full">
-              <Image
-                src="/images/svg/line.svg"
-                width={500}
-                height={200}
-                alt="Line Image"
-                draggable={false}
-              />
-            </div>
-            <div className="absolute -bottom-4 end-5">
-              <Image
-                src="/images/svg/rabit.svg"
-                width={96}
-                height={96}
-                alt="Rabbit"
-                draggable={false}
-                className="w-full h-full object-cover"
-              />
-            </div>
-          </UpgradeBlock>
-          <UpgradeBlock className="bg-primary">
-            <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-              <div className="text-xs font-normal text-default-foreground dark:text-default-800">
-                Upgrade your system to business plan
-              </div>
-            </div>
-            <div className="mt-6 mb-14 relative z-10">
-              <Button
-                size="md"
-                className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
-              >
-                Upgrade
-              </Button>
-            </div>
-            <div className="absolute bottom-0 start-0 z-10 w-full">
-              <Image
-                src="/images/svg/line.svg"
-                width={500}
-                height={200}
-                alt="Line Image"
-                draggable={false}
-              />
-            </div>
-            <div className="absolute -bottom-4 end-5">
-              <Image
-                src="/images/svg/rabit.svg"
-                width={96}
-                height={96}
-                alt="Rabbit"
-                draggable={false}
-                className="w-full h-full object-cover"
-              />
-            </div>
-          </UpgradeBlock>
-          <UpgradeBlock className="bg-success">
-            <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-              <div className="text-xs font-normal text-default-foreground dark:text-default-800">
-                Upgrade your system to business plan
-              </div>
-            </div>
-            <div className="mt-6 mb-14 relative z-10">
-              <Button
-                size="md"
-                className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
-              >
-                Upgrade
-              </Button>
-            </div>
-            <div className="absolute bottom-0 start-0 z-10 w-full">
-              <Image
-                src="/images/svg/line.svg"
-                width={500}
-                height={200}
-                alt="Line Image"
-                draggable={false}
-              />
-            </div>
-            <div className="absolute -bottom-4 end-5">
-              <Image
-                src="/images/svg/rabit.svg"
-                width={96}
-                height={96}
-                alt="Rabbit"
-                draggable={false}
-                className="w-full h-full object-cover"
-              />
-            </div>
-          </UpgradeBlock>
-          <UpgradeBlock className="bg-info">
-            <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-              <div className="text-xs font-normal text-default-foreground dark:text-default-800">
-                Upgrade your system to business plan
-              </div>
-            </div>
-            <div className="mt-6 mb-14 relative z-10">
-              <Button
-                size="md"
-                className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
-              >
-                Upgrade
-              </Button>
-            </div>
-            <div className="absolute bottom-0 start-0 z-10 w-full">
-              <Image
-                src="/images/svg/line.svg"
-                width={500}
-                height={200}
-                alt="Line Image"
-                draggable={false}
-              />
-            </div>
-            <div className="absolute -bottom-4 end-5">
-              <Image
-                src="/images/svg/rabit.svg"
-                width={96}
-                height={96}
-                alt="Rabbit"
-                draggable={false}
-                className="w-full h-full object-cover"
-              />
-            </div>
-          </UpgradeBlock>
-
-        </div>
-        {/* gift block */}
-
-        <div className="grid xl:grid-cols-6 lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
-          <UpgradeBlock
-            className="bg-default dark:bg-default-200 mt-14">
-            <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-              <Image
-                src="/images/svg/gift.svg"
-                alt="image"
-                height={72}
-                width={72}
-                className="h-16 w-16"
-              />
-            </div>
-            <div className="max-w-[160px] mx-auto mt-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-              <div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
-                Upgrade your system to business plan
-              </div>
-            </div>
-            <div className="mt-6">
-              <Button fullWidth size="md"
-                className="bg-primary-foreground dark:bg-white hover:ring-0  hover:ring-offset-0  ring-offset-transparent dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
-                Upgrade
-              </Button>
-            </div>
-          </UpgradeBlock>
-          {
-            ["primary", "success", "info", "destructive", "warning"].map((item, index) => (
-              <UpgradeBlock
-                key={index}
-                className={`bg-${item} mt-14`}>
-                <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-                  <Image
-                    src="/images/svg/gift.svg"
-                    alt="image"
-                    height={72}
-                    width={72}
-                    className="h-16 w-16"
-                  />
-                </div>
-                <div className="max-w-[160px] mx-auto mt-10">
-                  <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-                  <div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
-                    Upgrade your system to business plan
-                  </div>
-                </div>
-                <div className="mt-6">
-                  <Button fullWidth size="md" className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
-                    Upgrade
-                  </Button>
-                </div>
-              </UpgradeBlock>
-            ))
-          }
-        </div>
-        {/* rabbit block */}
-        <div className="grid grid-cols-6 gap-5">
-          <UpgradeBlock
-            className="bg-default dark:bg-default-200 mt-14">
-            <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-              <Image
-                src="/images/svg/rabit.svg"
-                alt="image"
-                height={100}
-                width={100}
-                className="h-24 w-24"
-              />
-            </div>
-            <div className="max-w-[160px] mx-auto mt-14">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-              <div className="text-xs font-normal text-default-foreground mt-1 dark:text-default-900">
-                Upgrade your system to business plan
-              </div>
-            </div>
-            <div className="mt-6">
-              <Button fullWidth size="md" className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
-                Upgrade
-              </Button>
-            </div>
-          </UpgradeBlock>
-          {
-            ["primary", "success", "info", "destructive", "warning"].map((item, index) => (
-              <UpgradeBlock key={index} className={`bg-${item} mt-14`}>
-                <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-                  <Image
-                    src="/images/svg/rabit.svg"
-                    alt="image"
-                    height={100}
-                    width={100}
-                    className="h-24 w-24"
-                  />
-                </div>
-                <div className="max-w-[160px] mx-auto mt-14">
-                  <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-                  <div className="text-xs font-normal text-default-foreground  dark:text-default-900 mt-1">
-                    Upgrade your system to business plan
-                  </div>
-                </div>
-                <div className="mt-6">
-                  <Button fullWidth size="md" className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
-                    Upgrade
-                  </Button>
-                </div>
-              </UpgradeBlock>
-            ))
-          }
-        </div>
-
-      </div>
-    </div>
-  );
-};
-
-export default WidgetPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/blocks/layout.tsx b/app/[locale]/(protected)/blocks/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/blocks/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/blocks/statistic-widget/layout.tsx b/app/[locale]/(protected)/blocks/statistic-widget/layout.tsx
deleted file mode 100644
index 10abf4d7..00000000
--- a/app/[locale]/(protected)/blocks/statistic-widget/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Statistic Widget',
-  description: 'Statistic Widget Description'
-}
-const StatisticWidget = ({children}: {children: React.ReactNode}) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default StatisticWidget;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/blocks/statistic-widget/page.tsx b/app/[locale]/(protected)/blocks/statistic-widget/page.tsx
deleted file mode 100644
index 75e3f722..00000000
--- a/app/[locale]/(protected)/blocks/statistic-widget/page.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-import Image from "next/image";
-import OrdersBlock from "@/components/blocks/orders-block";
-import ProgressBlock from "@/components/blocks/progress-block";
-import { StatisticsBlock } from "@/components/blocks/statistics-block";
-import { StatusBlock } from "@/components/blocks/status-block";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Icon } from "@/components/ui/icon";
-import { Box, TrendingDown, TrendingUp, ShoppingCart } from "lucide-react";
-import { Card, CardContent } from "@/components/ui/card";
-import { BarChart } from "lucide-react";
-import EarningBlock from "@/components/blocks/earning-block";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const StatisticPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-          <StatusBlock
-            title="Total Revenue"
-            total="3,564"
-            iconWrapperClass="bg-info/10"
-            chartColor="#00EBFF"
-            icon={<ShoppingCart className="w-5 h-5  text-info" />}
-          />
-          <StatusBlock
-            title="Products sold"
-            total="564"
-            icon={<Box className="w-5 h-5 text-warning" />}
-            iconWrapperClass="bg-warning/10"
-            chartColor="#FB8F65"
-          />
-
-          <StatusBlock
-            title="Growth"
-            total="+5.0%"
-            icon={<TrendingUp className="w-5 h-5 text-primary" />}
-            iconWrapperClass="bg-primary/10"
-            chartColor="#2563eb"
-          />
-        </div>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-          <StatisticsBlock
-            title="Total Revenue"
-            total="3,564"
-            className="bg-info/10"
-          />
-          <StatisticsBlock
-            title="Products sold"
-            total="564"
-            className="bg-warning/10"
-            chartColor="#FB8F65"
-          />
-          <StatisticsBlock
-            title="Growth"
-            total="+5.0%"
-            className="bg-primary/10"
-            chartColor="#2563eb"
-          />
-        </div>
-        <div>
-          <Card>
-            <CardContent className=" p-6">
-              <div className="grid xl:grid-cols-4 lg:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-5 place-content-center">
-                <div className="flex space-x-4 h-full items-center rtl:space-x-reverse">
-                  <div className="flex-none">
-                    <Avatar className="h-20 w-20 bg-transparent hover:bg-transparent">
-                      <AvatarImage src="/images/all-img/main-user.png" />
-                      <AvatarFallback>SA</AvatarFallback>
-                    </Avatar>
-                  </div>
-                  <div className="flex-1">
-                    <h4 className="text-xl font-medium mb-2">
-                      <span className="block font-light text-default-800">Good evening,</span>
-                      <span className="block text-default-900">Mr. Jone Doe</span>
-                    </h4>
-                    <p className="text-sm text-default-600">Welcome to Dashcode</p>
-                  </div>
-                </div>
-                {/*  status blocks */}
-                <StatusBlock
-                  title="Current balance"
-                  total="$34,564"
-                  chartType="bar"
-                  className="bg-secondary/10 shadow-none rounded"
-                  opacity={1}
-                />
-                <StatusBlock
-                  title="Credit"
-                  total="$3,564"
-                  chartColor="#80fac1"
-                  className="bg-secondary/10 shadow-none rounded"
-                  series={[40, 70, 45, 100, 75, 40, 80, 90]}
-                  chartType="bar"
-                  opacity={1}
-                />
-                <StatusBlock
-                  title="Debit"
-                  total="$3,564"
-                  chartColor="#ffbf99"
-                  className="bg-secondary/10 shadow-none rounded"
-                  chartType="bar"
-                  series={[40, 70, 45, 100, 75, 40, 80, 90]}
-                  opacity={1}
-                />
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 ">
-          <Card className="bg-warning/20 relative">
-            <CardContent className="p-4 ">
-              <Image
-                src="/images/all-img/shade-1.png"
-                alt="images"
-                draggable="false"
-                className="absolute top-0 start-0 w-full h-full object-contain"
-                width={300}
-                height={200}
-                priority
-              />
-              <div className="mb-6 text-sm text-default-900 font-medium">Sales </div>
-              <div className=" text-2xl text-default-900 font-medium mb-6"> 354</div>
-              <div className="flex gap-2">
-                <div className="flex-none text-xl">
-                  <TrendingUp className="w-4 h-4 text-primary" />
-                </div>
-                <div className="flex-1 text-sm">
-                  <span className="block mb-0.2">25.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="bg-info/20 relative">
-            <CardContent className="p-4">
-              <Image
-                src="/images/all-img/shade-2.png"
-                alt="images"
-                draggable="false"
-                className="absolute top-0 start-0 w-full h-full object-contain"
-                width={300}
-                height={200}
-                priority
-              />
-              <div className="mb-6 text-sm text-default-900 font-medium">Revenue </div>
-              <div className=" text-2xl text-default-900 font-medium mb-6">$86,954</div>
-              <div className="flex gap-2">
-                <div className="flex-none text-xl">
-                  <TrendingUp className="w-4 h-4 text-primary" />
-                </div>
-                <div className="flex-1 text-sm">
-                  <span className="block mb-0.2">8.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="bg-primary/20 relative">
-            <CardContent className=" p-4">
-              <Image
-                src="/images/all-img/shade-3.png"
-                alt="images"
-                draggable="false"
-                className="absolute top-0 start-0 w-full h-full object-contain"
-                width={300}
-                height={200}
-                priority
-              />
-              <div className="mb-6 text-sm text-default-900 font-medium">Conversion </div>
-              <div className=" text-2xl text-default-900 font-medium mb-6">15%</div>
-              <div className="flex gap-2">
-                <div className="flex-none text-xl">
-                  <TrendingDown className="w-4 h-4 text-destructive" />
-                </div>
-                <div className="flex-1 text-sm">
-                  <span className="block mb-0.2 text-destructive">1.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="bg-success/20 relative">
-            <CardContent className=" p-4">
-              <Image
-                src="/images/all-img/shade-4.png"
-                alt="images"
-                draggable="false"
-                className="absolute top-0 start-0 w-full h-full object-contain"
-                width={300}
-                height={200}
-                priority
-              />
-              <div className="mb-6 text-sm text-default-900 font-medium">Leads </div>
-              <div className=" text-2xl text-default-900 font-medium mb-6">654</div>
-              <div className="flex gap-2">
-                <div className="flex-none text-xl">
-                  <TrendingDown className="w-4 h-4 text-primary" />
-                </div>
-                <div className="flex-1 text-sm">
-                  <span className="block mb-0.2 text-primary">1.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 ">
-          <Card className="bg-info/20">
-            <CardContent className=" p-4  text-center">
-              <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
-                <BarChart className=" h-6 w-6 text-info" />
-              </div>
-              <div className="block text-sm text-default-600 font-medium  mb-1.5"> Total Task</div>
-              <div className="text-2xl text-default-900  font-medium">  64</div>
-            </CardContent>
-          </Card>
-          <Card className="bg-warning/20">
-            <CardContent className=" p-4  text-center">
-              <div
-                className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-              >
-                <Icon className="w-6 h-6 text-warning" icon="heroicons:chart-pie" />
-              </div>
-              <div className="block text-sm text-default-600 font-medium  mb-1.5">Completed</div>
-              <div className="text-2xl text-default-900  font-medium">45</div>
-            </CardContent>
-          </Card>
-          <Card className="bg-primary/20">
-            <CardContent className=" p-4  text-center">
-              <div
-                className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-              >
-                <Icon className="w-6 h-6 text-primary" icon="heroicons:clock" />
-              </div>
-              <div className="block text-sm text-default-600 font-medium  mb-1.5">Hours</div>
-              <div className="text-2xl text-default-900  font-medium">190</div>
-            </CardContent>
-          </Card>
-          <Card className="bg-success/20">
-            <CardContent className="p-4 text-center">
-              <div
-                className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-              >
-                <Icon className="w-6 h-6 text-success" icon="heroicons:calculator" />
-              </div>
-              <div className="block text-sm text-default-600 font-medium  mb-1.5">Spendings</div>
-              <div className="text-2xl text-default-900  font-medium">$3,564</div>
-            </CardContent>
-          </Card>
-        </div>
-        {/* progress */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 ">
-          <ProgressBlock
-            title="Progress"
-          />
-          <ProgressBlock
-            title="Progress"
-            colors={["#F1595C", "#F9E1E5"]}
-            labels={["Completed", "In Progress"]}
-          />
-          <ProgressBlock
-            title="Progress"
-            colors={["#50C793", "#E5F3E5"]}
-            labels={["Success", "Failure"]}
-          />
-          <ProgressBlock
-            title="Progress"
-            colors={["#FA916B", "#fcc8b5"]}
-          />
-        </div>
-        <div className="grid grid-cols-6 gap-4">
-          <OrdersBlock
-            title="Orders"
-            total="123k"
-          />
-          <OrdersBlock
-            title="Orders"
-            total="123k"
-            chartColor="#f1595c"
-          />
-          <OrdersBlock
-            title="Orders"
-            total="123k"
-            chartColor="#50c893"
-          />
-          <OrdersBlock
-            title="Profit"
-            total="123k"
-            chartColor="#4669fa"
-            chartType="line"
-            percentageContent={<span className="text-primary">+2.5%</span>}
-          />
-          <OrdersBlock
-            title="Profit"
-            total="123k"
-            chartColor="#f1595c"
-            chartType="line"
-            percentageContent={<span className="text-destructive">+2.5%</span>}
-          />
-          <OrdersBlock
-            title="Profit"
-            total="123k"
-            chartColor="#50c893"
-            chartType="line"
-            percentageContent={<span className="text-success">+2.5%</span>}
-          />
-        </div>
-        <div className="grid grid-cols-3 gap-4">
-          <EarningBlock
-            title="Earnings"
-            total="$12,335.00"
-            percentage="+08%"
-          />
-          <EarningBlock
-            title="Earnings"
-            total="$12,335.00"
-            percentage="+08%"
-          />
-          <EarningBlock
-            title="Earnings"
-            total="$12,335.00"
-            percentage="+08%"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default StatisticPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/basic-area.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/basic-area.tsx
deleted file mode 100644
index be6e6e24..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/basic-area.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-import { colors } from "@/lib/colors";
-
-
-const BasicArea = ({ height = 300 }) => {
-  const [config] = useConfig();
-
-  const { theme: mode } = useTheme();
-
-  const series = [
-    {
-      data: [90, 70, 85, 60, 80, 70, 90, 75, 60, 80],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [colors.primary],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: [colors.primary],
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.2,
-        opacityTo: 0.1,
-        stops: [50, 100, 0],
-      },
-    },
-    yaxis: getYAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicArea;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-style-chart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-style-chart.tsx
deleted file mode 100644
index 76fc8294..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-style-chart.tsx
+++ /dev/null
@@ -1,1831 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getLabel, getGridConfig } from "@/lib/appex-chart-options";
-
-const GithubStyleChart = () => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "commits",
-      data: [
-        {
-          x: 1352592000000,
-          a: 306,
-          d: 33,
-          y: 13,
-        },
-        {
-          x: 1353196800000,
-          a: 77,
-          d: 41,
-          y: 11,
-        },
-        {
-          x: 1353801600000,
-          a: 97,
-          d: 52,
-          y: 13,
-        },
-        {
-          x: 1354406400000,
-          a: 349,
-          d: 231,
-          y: 27,
-        },
-        {
-          x: 1355011200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1355616000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1356220800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1356825600000,
-          a: 93,
-          d: 16,
-          y: 12,
-        },
-        {
-          x: 1357430400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1358035200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1358640000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1359244800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1359849600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1360454400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1361059200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1361664000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1362268800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1362873600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1363478400000,
-          a: 47,
-          d: 20,
-          y: 6,
-        },
-        {
-          x: 1364083200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1364688000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1365292800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1365897600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1366502400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1367107200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1367712000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1368316800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1368921600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1369526400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1370131200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1370736000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1371340800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1371945600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1372550400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1373155200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1373760000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1374364800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1374969600000,
-          a: 22,
-          d: 16,
-          y: 9,
-        },
-        {
-          x: 1375574400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1376179200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1376784000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1377388800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1377993600000,
-          a: 104,
-          d: 79,
-          y: 12,
-        },
-        {
-          x: 1378598400000,
-          a: 60,
-          d: 17,
-          y: 9,
-        },
-        {
-          x: 1379203200000,
-          a: 27,
-          d: 36,
-          y: 3,
-        },
-        {
-          x: 1379808000000,
-          a: 283,
-          d: 199,
-          y: 20,
-        },
-        {
-          x: 1380412800000,
-          a: 1,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1381017600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1381622400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1382227200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1382832000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1383436800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1384041600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1384646400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1385251200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1385856000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1386460800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1387065600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1387670400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1388275200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1388880000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1389484800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1390089600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1390694400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1391299200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1391904000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1392508800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1393113600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1393718400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1394323200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1394928000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1395532800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1396137600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1396742400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1397347200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1397952000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1398556800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1399161600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1399766400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1400371200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1400976000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1401580800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1402185600000,
-          a: 115,
-          d: 38,
-          y: 11,
-        },
-        {
-          x: 1402790400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1403395200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1404000000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1404604800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1405209600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1405814400000,
-          a: 598,
-          d: 209,
-          y: 34,
-        },
-        {
-          x: 1406419200000,
-          a: 195,
-          d: 119,
-          y: 18,
-        },
-        {
-          x: 1407024000000,
-          a: 174,
-          d: 54,
-          y: 13,
-        },
-        {
-          x: 1407628800000,
-          a: 1,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1408233600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1408838400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1409443200000,
-          a: 2,
-          d: 2,
-          y: 1,
-        },
-        {
-          x: 1410048000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1410652800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1411257600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1411862400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1412467200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1413072000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1413676800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1414281600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1414886400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1415491200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1416096000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1416700800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1417305600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1417910400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1418515200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1419120000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1419724800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1420329600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1420934400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1421539200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1422144000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1422748800000,
-          a: 46,
-          d: 43,
-          y: 8,
-        },
-        {
-          x: 1423353600000,
-          a: 20,
-          d: 4,
-          y: 1,
-        },
-        {
-          x: 1423958400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1424563200000,
-          a: 18,
-          d: 11,
-          y: 4,
-        },
-        {
-          x: 1425168000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1425772800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1426377600000,
-          a: 54,
-          d: 63,
-          y: 4,
-        },
-        {
-          x: 1426982400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1427587200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1428192000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1428796800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1429401600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1430006400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1430611200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1431216000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1431820800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1432425600000,
-          a: 10,
-          d: 11,
-          y: 1,
-        },
-        {
-          x: 1433030400000,
-          a: 296,
-          d: 172,
-          y: 18,
-        },
-        {
-          x: 1433635200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1434240000000,
-          a: 10,
-          d: 13,
-          y: 2,
-        },
-        {
-          x: 1434844800000,
-          a: 20,
-          d: 16,
-          y: 3,
-        },
-        {
-          x: 1435449600000,
-          a: 24,
-          d: 10,
-          y: 3,
-        },
-        {
-          x: 1436054400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1436659200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1437264000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1437868800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1438473600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1439078400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1439683200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1440288000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1440892800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1441497600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1442102400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1442707200000,
-          a: 275,
-          d: 129,
-          y: 12,
-        },
-        {
-          x: 1443312000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1443916800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1444521600000,
-          a: 1213,
-          d: 837,
-          y: 5,
-        },
-        {
-          x: 1445126400000,
-          a: 299,
-          d: 54,
-          y: 3,
-        },
-        {
-          x: 1445731200000,
-          a: 30,
-          d: 33,
-          y: 1,
-        },
-        {
-          x: 1446336000000,
-          a: 202,
-          d: 185,
-          y: 18,
-        },
-        {
-          x: 1446940800000,
-          a: 554,
-          d: 292,
-          y: 39,
-        },
-        {
-          x: 1447545600000,
-          a: 9030,
-          d: 44,
-          y: 7,
-        },
-        {
-          x: 1448150400000,
-          a: 8,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1448755200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1449360000000,
-          a: 18,
-          d: 12,
-          y: 5,
-        },
-        {
-          x: 1449964800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1450569600000,
-          a: 4,
-          d: 3,
-          y: 2,
-        },
-        {
-          x: 1451174400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1451779200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1452384000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1452988800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1453593600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1454198400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1454803200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1455408000000,
-          a: 2,
-          d: 2,
-          y: 1,
-        },
-        {
-          x: 1456012800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1456617600000,
-          a: 32,
-          d: 43,
-          y: 1,
-        },
-        {
-          x: 1457222400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1457827200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1458432000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1459036800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1459641600000,
-          a: 23,
-          d: 13,
-          y: 3,
-        },
-        {
-          x: 1460246400000,
-          a: 421,
-          d: 335,
-          y: 9,
-        },
-        {
-          x: 1460851200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1461456000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1462060800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1462665600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1463270400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1463875200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1464480000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1465084800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1465689600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1466294400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1466899200000,
-          a: 6,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1467504000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1468108800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1468713600000,
-          a: 886,
-          d: 49,
-          y: 15,
-        },
-        {
-          x: 1469318400000,
-          a: 38,
-          d: 26,
-          y: 4,
-        },
-        {
-          x: 1469923200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1470528000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1471132800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1471737600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1472342400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1472947200000,
-          a: 2,
-          d: 2,
-          y: 1,
-        },
-        {
-          x: 1473552000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1474156800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1474761600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1475366400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1475971200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1476576000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1477180800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1477785600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1478390400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1478995200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1479600000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1480204800000,
-          a: 8,
-          d: 0,
-          y: 1,
-        },
-        {
-          x: 1480809600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1481414400000,
-          a: 1,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1482019200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1482624000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1483228800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1483833600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1484438400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1485043200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1485648000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1486252800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1486857600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1487462400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1488067200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1488672000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1489276800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1489881600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1490486400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1491091200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1491696000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1492300800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1492905600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1493510400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1494115200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1494720000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1495324800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1495929600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1496534400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1497139200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1497744000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1498348800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1498953600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1499558400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1500163200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1500768000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1501372800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1501977600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1502582400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1503187200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1503792000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1504396800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1505001600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1505606400000,
-          a: 2,
-          d: 2,
-          y: 2,
-        },
-        {
-          x: 1506211200000,
-          a: 49,
-          d: 10,
-          y: 4,
-        },
-        {
-          x: 1506816000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1507420800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1508025600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1508630400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1509235200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1509840000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1510444800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1511049600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1511654400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1512259200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1512864000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1513468800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1514073600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1514678400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1515283200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1515888000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1516492800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1517097600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1517702400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1518307200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1518912000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1519516800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1520121600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1520726400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1521331200000,
-          a: 768,
-          d: 2125,
-          y: 12,
-        },
-        {
-          x: 1521936000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1522540800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1523145600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1523750400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1524355200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1524960000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1525564800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1526169600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1526774400000,
-          a: 1,
-          d: 0,
-          y: 1,
-        },
-      ],
-    },
-  ];
-
-  var options: any = {
-    chart: {
-      id: "chartyear",
-      type: "area",
-      height: 120,
-      toolbar: {
-        show: false,
-        autoSelected: "pan",
-      },
-      events: {
-        mounted: function (chart: any) {
-          var commitsEl = document.querySelector(".cmeta span.commits");
-          var commits = chart.getSeriesTotalXRange(
-            chart.w.globals.minX,
-            chart.w.globals.maxX
-          );
-          if (commitsEl) {
-            commitsEl.innerHTML = commits;
-          }
-        },
-        updated: function (chart: any) {
-          var commitsEl = document.querySelector(".cmeta span.commits");
-          var commits = chart.getSeriesTotalXRange(
-            chart.w.globals.minX,
-            chart.w.globals.maxX
-          );
-          if (commitsEl) {
-            commitsEl.innerHTML = commits;
-          }
-        },
-      },
-    },
-    colors: [
-      colors.primary
-    ],
-    stroke: {
-      width: 0,
-      curve: "smooth",
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    fill: {
-      opacity: 1,
-      type: "solid",
-    },
-    grid: getGridConfig(),
-
-    yaxis: {
-      show: false,
-      tickAmount: 3,
-    },
-    xaxis: {
-      type: "datetime",
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={120}
-      width={"100%"}
-    />
-  );
-};
-
-export default GithubStyleChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-styles-charts1.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-styles-charts1.tsx
deleted file mode 100644
index bb5c24c3..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-styles-charts1.tsx
+++ /dev/null
@@ -1,1818 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getLabel, getGridConfig } from "@/lib/appex-chart-options";
-
-const GithubStyleCharts1 = () => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "commits",
-      data: [
-        {
-          x: 1352592000000,
-          a: 306,
-          d: 33,
-          y: 13,
-        },
-        {
-          x: 1353196800000,
-          a: 77,
-          d: 41,
-          y: 11,
-        },
-        {
-          x: 1353801600000,
-          a: 97,
-          d: 52,
-          y: 13,
-        },
-        {
-          x: 1354406400000,
-          a: 349,
-          d: 231,
-          y: 27,
-        },
-        {
-          x: 1355011200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1355616000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1356220800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1356825600000,
-          a: 93,
-          d: 16,
-          y: 12,
-        },
-        {
-          x: 1357430400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1358035200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1358640000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1359244800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1359849600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1360454400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1361059200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1361664000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1362268800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1362873600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1363478400000,
-          a: 47,
-          d: 20,
-          y: 6,
-        },
-        {
-          x: 1364083200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1364688000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1365292800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1365897600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1366502400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1367107200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1367712000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1368316800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1368921600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1369526400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1370131200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1370736000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1371340800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1371945600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1372550400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1373155200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1373760000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1374364800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1374969600000,
-          a: 22,
-          d: 16,
-          y: 9,
-        },
-        {
-          x: 1375574400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1376179200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1376784000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1377388800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1377993600000,
-          a: 104,
-          d: 79,
-          y: 12,
-        },
-        {
-          x: 1378598400000,
-          a: 60,
-          d: 17,
-          y: 9,
-        },
-        {
-          x: 1379203200000,
-          a: 27,
-          d: 36,
-          y: 3,
-        },
-        {
-          x: 1379808000000,
-          a: 283,
-          d: 199,
-          y: 20,
-        },
-        {
-          x: 1380412800000,
-          a: 1,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1381017600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1381622400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1382227200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1382832000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1383436800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1384041600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1384646400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1385251200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1385856000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1386460800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1387065600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1387670400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1388275200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1388880000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1389484800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1390089600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1390694400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1391299200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1391904000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1392508800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1393113600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1393718400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1394323200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1394928000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1395532800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1396137600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1396742400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1397347200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1397952000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1398556800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1399161600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1399766400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1400371200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1400976000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1401580800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1402185600000,
-          a: 115,
-          d: 38,
-          y: 11,
-        },
-        {
-          x: 1402790400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1403395200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1404000000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1404604800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1405209600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1405814400000,
-          a: 598,
-          d: 209,
-          y: 34,
-        },
-        {
-          x: 1406419200000,
-          a: 195,
-          d: 119,
-          y: 18,
-        },
-        {
-          x: 1407024000000,
-          a: 174,
-          d: 54,
-          y: 13,
-        },
-        {
-          x: 1407628800000,
-          a: 1,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1408233600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1408838400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1409443200000,
-          a: 2,
-          d: 2,
-          y: 1,
-        },
-        {
-          x: 1410048000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1410652800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1411257600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1411862400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1412467200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1413072000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1413676800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1414281600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1414886400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1415491200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1416096000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1416700800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1417305600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1417910400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1418515200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1419120000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1419724800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1420329600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1420934400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1421539200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1422144000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1422748800000,
-          a: 46,
-          d: 43,
-          y: 8,
-        },
-        {
-          x: 1423353600000,
-          a: 20,
-          d: 4,
-          y: 1,
-        },
-        {
-          x: 1423958400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1424563200000,
-          a: 18,
-          d: 11,
-          y: 4,
-        },
-        {
-          x: 1425168000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1425772800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1426377600000,
-          a: 54,
-          d: 63,
-          y: 4,
-        },
-        {
-          x: 1426982400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1427587200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1428192000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1428796800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1429401600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1430006400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1430611200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1431216000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1431820800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1432425600000,
-          a: 10,
-          d: 11,
-          y: 1,
-        },
-        {
-          x: 1433030400000,
-          a: 296,
-          d: 172,
-          y: 18,
-        },
-        {
-          x: 1433635200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1434240000000,
-          a: 10,
-          d: 13,
-          y: 2,
-        },
-        {
-          x: 1434844800000,
-          a: 20,
-          d: 16,
-          y: 3,
-        },
-        {
-          x: 1435449600000,
-          a: 24,
-          d: 10,
-          y: 3,
-        },
-        {
-          x: 1436054400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1436659200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1437264000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1437868800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1438473600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1439078400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1439683200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1440288000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1440892800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1441497600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1442102400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1442707200000,
-          a: 275,
-          d: 129,
-          y: 12,
-        },
-        {
-          x: 1443312000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1443916800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1444521600000,
-          a: 1213,
-          d: 837,
-          y: 5,
-        },
-        {
-          x: 1445126400000,
-          a: 299,
-          d: 54,
-          y: 3,
-        },
-        {
-          x: 1445731200000,
-          a: 30,
-          d: 33,
-          y: 1,
-        },
-        {
-          x: 1446336000000,
-          a: 202,
-          d: 185,
-          y: 18,
-        },
-        {
-          x: 1446940800000,
-          a: 554,
-          d: 292,
-          y: 39,
-        },
-        {
-          x: 1447545600000,
-          a: 9030,
-          d: 44,
-          y: 7,
-        },
-        {
-          x: 1448150400000,
-          a: 8,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1448755200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1449360000000,
-          a: 18,
-          d: 12,
-          y: 5,
-        },
-        {
-          x: 1449964800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1450569600000,
-          a: 4,
-          d: 3,
-          y: 2,
-        },
-        {
-          x: 1451174400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1451779200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1452384000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1452988800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1453593600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1454198400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1454803200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1455408000000,
-          a: 2,
-          d: 2,
-          y: 1,
-        },
-        {
-          x: 1456012800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1456617600000,
-          a: 32,
-          d: 43,
-          y: 1,
-        },
-        {
-          x: 1457222400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1457827200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1458432000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1459036800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1459641600000,
-          a: 23,
-          d: 13,
-          y: 3,
-        },
-        {
-          x: 1460246400000,
-          a: 421,
-          d: 335,
-          y: 9,
-        },
-        {
-          x: 1460851200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1461456000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1462060800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1462665600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1463270400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1463875200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1464480000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1465084800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1465689600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1466294400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1466899200000,
-          a: 6,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1467504000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1468108800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1468713600000,
-          a: 886,
-          d: 49,
-          y: 15,
-        },
-        {
-          x: 1469318400000,
-          a: 38,
-          d: 26,
-          y: 4,
-        },
-        {
-          x: 1469923200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1470528000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1471132800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1471737600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1472342400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1472947200000,
-          a: 2,
-          d: 2,
-          y: 1,
-        },
-        {
-          x: 1473552000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1474156800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1474761600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1475366400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1475971200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1476576000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1477180800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1477785600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1478390400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1478995200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1479600000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1480204800000,
-          a: 8,
-          d: 0,
-          y: 1,
-        },
-        {
-          x: 1480809600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1481414400000,
-          a: 1,
-          d: 1,
-          y: 1,
-        },
-        {
-          x: 1482019200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1482624000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1483228800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1483833600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1484438400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1485043200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1485648000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1486252800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1486857600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1487462400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1488067200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1488672000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1489276800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1489881600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1490486400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1491091200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1491696000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1492300800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1492905600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1493510400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1494115200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1494720000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1495324800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1495929600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1496534400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1497139200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1497744000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1498348800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1498953600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1499558400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1500163200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1500768000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1501372800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1501977600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1502582400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1503187200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1503792000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1504396800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1505001600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1505606400000,
-          a: 2,
-          d: 2,
-          y: 2,
-        },
-        {
-          x: 1506211200000,
-          a: 49,
-          d: 10,
-          y: 4,
-        },
-        {
-          x: 1506816000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1507420800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1508025600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1508630400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1509235200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1509840000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1510444800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1511049600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1511654400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1512259200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1512864000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1513468800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1514073600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1514678400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1515283200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1515888000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1516492800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1517097600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1517702400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1518307200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1518912000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1519516800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1520121600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1520726400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1521331200000,
-          a: 768,
-          d: 2125,
-          y: 12,
-        },
-        {
-          x: 1521936000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1522540800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1523145600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1523750400000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1524355200000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1524960000000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1525564800000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1526169600000,
-          a: 0,
-          d: 0,
-          y: 0,
-        },
-        {
-          x: 1526774400000,
-          a: 1,
-          d: 0,
-          y: 1,
-        },
-      ],
-    },
-  ];
-
-  var options: any = {
-    chart: {
-      id: "chartyear",
-      type: "area",
-      height: 170,
-      toolbar: {
-        autoSelected: "selection",
-      },
-      brush: {
-        enabled: true,
-        target: "chartyear",
-      },
-      selection: {
-        enabled: true,
-        xaxis: {
-          min: new Date("26 Jan 2014").getTime(),
-          max: new Date("29 Mar 2015").getTime(),
-        },
-      },
-    },
-    colors: [
-      colors.success,
-    ],
-    stroke: {
-      width: 0,
-      curve: "smooth",
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    fill: {
-      opacity: 1,
-      type: "solid",
-    },
-    grid: getGridConfig(),
-    yaxis: {
-      show: false,
-      tickAmount: 3,
-    },
-    xaxis: {
-      type: "datetime",
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={120}
-      width={"100%"}
-    />
-  );
-};
-
-export default GithubStyleCharts1;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/irregular-time-series.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/irregular-time-series.tsx
deleted file mode 100644
index 22afc1b9..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/irregular-time-series.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const IrregularTimeSeries = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-  const series = [
-    {
-      name: "product A",
-      data: [100, 200, 300, 400, 500, 200, 100],
-    },
-    {
-      name: "product B",
-      data: [600, 700, 300, 500],
-    },
-    {
-      name: "product C",
-      data: [500, 100, 400, 700, 400, 700],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.success,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: [
-        colors.primary,
-        colors.success,
-        colors.info,
-      ],
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.2,
-        opacityTo: 0.1,
-        stops: [20, 100, 100, 100],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default IrregularTimeSeries;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/layout.tsx
deleted file mode 100644
index bc44809d..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-export const metadata = {
-  title: "Appex Area Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/negative-areachart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/negative-areachart.tsx
deleted file mode 100644
index 4a60b8f3..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/negative-areachart.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const NegativeAreaChart = ({ height = 320 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "north",
-      data: [
-        {
-          x: 1996,
-          y: 322,
-        },
-        {
-          x: 1997,
-          y: 324,
-        },
-        {
-          x: 1998,
-          y: 329,
-        },
-        {
-          x: 1999,
-          y: 342,
-        },
-        {
-          x: 2000,
-          y: 348,
-        },
-        {
-          x: 2001,
-          y: 334,
-        },
-        {
-          x: 2002,
-          y: 325,
-        },
-        {
-          x: 2003,
-          y: 316,
-        },
-        {
-          x: 2004,
-          y: 318,
-        },
-        {
-          x: 2005,
-          y: 330,
-        },
-        {
-          x: 2006,
-          y: 355,
-        },
-        {
-          x: 2007,
-          y: 366,
-        },
-        {
-          x: 2008,
-          y: 337,
-        },
-        {
-          x: 2009,
-          y: 352,
-        },
-        {
-          x: 2010,
-          y: 377,
-        },
-        {
-          x: 2011,
-          y: 383,
-        },
-        {
-          x: 2012,
-          y: 344,
-        },
-        {
-          x: 2013,
-          y: 366,
-        },
-        {
-          x: 2014,
-          y: 389,
-        },
-        {
-          x: 2015,
-          y: 334,
-        },
-      ],
-    },
-    {
-      name: "south",
-      data: [
-        {
-          x: 1996,
-          y: 162,
-        },
-        {
-          x: 1997,
-          y: 90,
-        },
-        {
-          x: 1998,
-          y: 50,
-        },
-        {
-          x: 1999,
-          y: 77,
-        },
-        {
-          x: 2000,
-          y: 35,
-        },
-        {
-          x: 2001,
-          y: -45,
-        },
-        {
-          x: 2002,
-          y: -88,
-        },
-        {
-          x: 2003,
-          y: -120,
-        },
-        {
-          x: 2004,
-          y: -156,
-        },
-        {
-          x: 2005,
-          y: -123,
-        },
-        {
-          x: 2006,
-          y: -88,
-        },
-        {
-          x: 2007,
-          y: -66,
-        },
-        {
-          x: 2008,
-          y: -45,
-        },
-        {
-          x: 2009,
-          y: -29,
-        },
-        {
-          x: 2010,
-          y: -45,
-        },
-        {
-          x: 2011,
-          y: -88,
-        },
-        {
-          x: 2012,
-          y: -132,
-        },
-        {
-          x: 2013,
-          y: -146,
-        },
-        {
-          x: 2014,
-          y: -169,
-        },
-        {
-          x: 2015,
-          y: -184,
-        },
-      ],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: [
-        colors.primary,
-        colors.info,
-      ],
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.2,
-        opacityTo: 0.1,
-        stops: [50, 100, 0],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default NegativeAreaChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/null-value-area.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/null-value-area.tsx
deleted file mode 100644
index dd19801f..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/null-value-area.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const NullValueAreaChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Network",
-      data: [
-        {
-          x: "Dec 23 2017",
-          y: null,
-        },
-        {
-          x: "Dec 24 2017",
-          y: 44,
-        },
-        {
-          x: "Dec 25 2017",
-          y: 31,
-        },
-        {
-          x: "Dec 26 2017",
-          y: 38,
-        },
-        {
-          x: "Dec 27 2017",
-          y: null,
-        },
-        {
-          x: "Dec 28 2017",
-          y: 32,
-        },
-        {
-          x: "Dec 29 2017",
-          y: 55,
-        },
-        {
-          x: "Dec 30 2017",
-          y: 51,
-        },
-        {
-          x: "Dec 31 2017",
-          y: 67,
-        },
-        {
-          x: "Jan 01 2018",
-          y: 22,
-        },
-        {
-          x: "Jan 02 2018",
-          y: 34,
-        },
-        {
-          x: "Jan 03 2018",
-          y: null,
-        },
-        {
-          x: "Jan 04 2018",
-          y: null,
-        },
-        {
-          x: "Jan 05 2018",
-          y: 11,
-        },
-        {
-          x: "Jan 06 2018",
-          y: 4,
-        },
-        {
-          x: "Jan 07 2018",
-          y: 15,
-        },
-        {
-          x: "Jan 08 2018",
-          y: null,
-        },
-        {
-          x: "Jan 09 2018",
-          y: 9,
-        },
-        {
-          x: "Jan 10 2018",
-          y: 34,
-        },
-        {
-          x: "Jan 11 2018",
-          y: null,
-        },
-        {
-          x: "Jan 12 2018",
-          y: null,
-        },
-        {
-          x: "Jan 13 2018",
-          y: 13,
-        },
-        {
-          x: "Jan 14 2018",
-          y: null,
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "straight",
-    },
-    colors: [
-      colors.primary,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "pattern",
-      colors: [
-        colors.primary,
-        colors.success,
-      ],
-      pattern: {
-        style: ["verticalLines", "horizontalLines"],
-        width: 5,
-        height: 6,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default NullValueAreaChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/page.tsx
deleted file mode 100644
index 30bdb82a..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/page.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicArea from "./basic-area";
-import SplineArea from "./spline-area";
-import IrregularTimeSeries from "./irregular-time-series";
-import StackedAreaChart from "./stacked-area";
-import NullValueAreaChart from "./null-value-area";
-import GithubStyleChart from "./github-style-chart";
-import { Link } from '@/i18n/routing';
-import GithubStyleCharts1 from "./github-styles-charts1";
-import NegativeAreaChart from "./negative-areachart";
-import Image from "next/image";
-import avatar7 from "@/public/images/avatar/avatar-7.png";
-
-
-const AreaChartPage = () => {
-  return (
-    <div className="  grid xl:grid-cols-2  grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Basic Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BasicArea />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Spline Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SplineArea />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Area with Negative Values Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <NegativeAreaChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Area Chart - Github Style</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <GithubStyleChart />
-          <div className="flex items-center space-x-2 rtl:space-x-reverse mt-2">
-            <div className="w-12 h-12">
-              <Image
-                className="w-full h-full object-cover"
-                src={avatar7}
-                alt=""
-              />
-            </div>
-            <div className="">
-              <Link
-                href="#"
-                className="text-base capitalize font-medium text-card-foreground"
-              >
-                coder
-              </Link>
-              <div className="cmeta space-x-1 rtl:space-x-reverse">
-                <span className="text-base font-bold text-card-foreground commits">
-                  110
-                </span>
-                <span className="text-base text-card-foreground font-medium ">
-                  commits
-                </span>
-              </div>
-            </div>
-          </div>
-          <GithubStyleCharts1 />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Irregular Timeseries Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <IrregularTimeSeries />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Stacked Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <StackedAreaChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Area Chart With Null Values </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <NullValueAreaChart />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default AreaChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/spline-area.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/spline-area.tsx
deleted file mode 100644
index e374c12b..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/spline-area.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const SplineArea = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "series1",
-      data: [31, 40, 28, 51, 42, 109, 100],
-    },
-    {
-      name: "series2",
-      data: [11, 32, 45, 32, 34, 52, 41],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: [
-        colors.primary,
-        colors.success,
-      ],
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.2,
-        opacityTo: 0.1,
-        stops: [50, 100, 0],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default SplineArea;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/stacked-area.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/stacked-area.tsx
deleted file mode 100644
index 49d271e8..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/stacked-area.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-interface DataRange {
-  min: number;
-  max: number;
-}
-const StackedAreaChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  function generateDayWiseTimeSeries(baseval: number, count: number, yrange: DataRange) {
-    var i = 0;
-    var series: [number, number][] = [];
-    while (i < count) {
-      var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-      series.push([x, y]);
-      baseval += 86400000;
-      i++;
-    }
-    return series;
-  }
-
-  const series = [
-    {
-      name: "South",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
-    },
-    {
-      name: "North",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 40,
-        }
-      ),
-    },
-    {
-      name: "Central",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 30,
-        }
-      ),
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: [
-        colors.primary,
-        colors.primary,
-        colors.info,
-      ],
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.4,
-        opacityTo: 0.1,
-        stops: [50, 100, 0],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    xaxis: {
-      type: "datetime",
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default StackedAreaChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bar-image-chart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bar-image-chart.tsx
deleted file mode 100644
index aa84df13..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bar-image-chart.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const BarImageChart = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "coins",
-      data: [
-        2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12,
-        11, 12, 13, 14, 16, 14, 15, 17, 19, 21,
-      ],
-    },
-  ];
-
-  const labels: number[] = Array.from({ length: 39 }, (_, index) => index + 1);
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        barHeight: "100%",
-      },
-    },
-    labels: labels,
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      shared: false,
-      theme: mode === "dark" ? "dark" : "light",
-      y: {
-        formatter: function (val: number) {
-          return val + "K";
-        },
-      },
-    },
-    grid: {
-      position: "back",
-    },
-
-    fill: {
-      type: "image",
-      opacity: 0.87,
-      image: {
-        src: [
-          "https://apexcharts.com/wp-content/uploads/2018/10/bar-chart-image-fill.png",
-        ],
-        width: 466,
-        height: 406,
-      },
-    },
-    yaxis: {
-      show: false,
-      axisTicks: {
-        show: true,
-      },
-      labels: {
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ]
-        }
-      }
-    },
-    xaxis: {
-      categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
-    },
-    states: {
-      hover: {
-        filter: "none",
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      position: "right",
-      offsetY: 40,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BarImageChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bars-with-marks.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bars-with-marks.tsx
deleted file mode 100644
index 037fa89a..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bars-with-marks.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const BarsWithMarkes = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Actual",
-      data: [
-        {
-          x: "2011",
-          y: 12,
-          goals: [
-            {
-              name: "Expected",
-              value: 14,
-              strokeWidth: 2,
-              strokeDashArray: 2,
-              strokeColor: "#775DD0",
-            },
-          ],
-        },
-        {
-          x: "2012",
-          y: 44,
-          goals: [
-            {
-              name: "Expected",
-              value: 54,
-              strokeWidth: 5,
-              strokeHeight: 10,
-              strokeColor: "#775DD0",
-            },
-          ],
-        },
-        {
-          x: "2013",
-          y: 54,
-          goals: [
-            {
-              name: "Expected",
-              value: 52,
-              strokeWidth: 10,
-              strokeHeight: 0,
-              strokeLineCap: "round",
-              strokeColor: "#775DD0",
-            },
-          ],
-        },
-        {
-          x: "2014",
-          y: 66,
-          goals: [
-            {
-              name: "Expected",
-              value: 61,
-              strokeWidth: 10,
-              strokeHeight: 0,
-              strokeLineCap: "round",
-              strokeColor: "#775DD0",
-            },
-          ],
-        },
-        {
-          x: "2015",
-          y: 81,
-          goals: [
-            {
-              name: "Expected",
-              value: 66,
-              strokeWidth: 10,
-              strokeHeight: 0,
-              strokeLineCap: "round",
-              strokeColor: "#775DD0",
-            },
-          ],
-        },
-        {
-          x: "2016",
-          y: 67,
-          goals: [
-            {
-              name: "Expected",
-              value: 70,
-              strokeWidth: 5,
-              strokeHeight: 10,
-              strokeColor: "#775DD0",
-            }
-          ]
-        }
-      ]
-    }
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      },
-    },
-    dataLabels: {
-      formatter: function (val: number, opt: any) {
-        const goals =
-          opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex].goals;
-
-        if (goals && goals.length) {
-          return `${val} / ${goals[0].value}`;
-        }
-        return val;
-      },
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
-    },
-    colors: [
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
-        },
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-
-    legend: {
-      show: true,
-      showForSingleSeries: true,
-      customLegendItems: ["Actual", "Expected"],
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5,
-        fillColors: [
-          colors.success,
-          colors.primary,
-        ]
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series as any}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BarsWithMarkes;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/basic-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/basic-bar.tsx
deleted file mode 100644
index af62edc6..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/basic-bar.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const BasicBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
-    }
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [colors.info],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [
-        "South Korea",
-        "Canada",
-        "United Kingdom",
-        "Netherlands",
-        "Italy",
-        "France",
-        "Japan",
-        "United States",
-        "China",
-        "Germany",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      }
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/custom-label-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/custom-label-bar.tsx
deleted file mode 100644
index e6a2a619..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/custom-label-bar.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const CustomLabelBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        barHeight: "100%",
-        distributed: true,
-        horizontal: true,
-        dataLabels: {
-          position: "bottom",
-        }
-      }
-    },
-    dataLabels: {
-      enabled: true,
-      textAnchor: "start",
-      style: {
-        colors: ["#fff"]
-      },
-      formatter: function (val: number, opt: any) {
-        return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val;
-      },
-      offsetX: 0,
-      dropShadow: {
-        enabled: true,
-      },
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"]
-      ]
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: {
-      show: false,
-      axisTicks: {
-        show: true,
-      },
-      labels: {
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
-    },
-    xaxis: {
-      categories: [
-        "South Korea",
-        "Canada",
-        "United Kingdom",
-        "Netherlands",
-        "Italy",
-        "France",
-        "Japan",
-        "United States",
-        "China",
-        "India",
-      ],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default CustomLabelBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-bar.tsx
deleted file mode 100644
index e4065876..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-bar.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const GroupedBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [44, 55, 41, 64, 22, 43],
-    },
-    {
-      data: [53, 32, 33, 52, 13, 44],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        dataLabels: {
-          position: "top",
-        },
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      offsetX: -10,
-      style: {
-        fontSize: "12px",
-        fontWeight: 700,
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
-      },
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [2001, 2002, 2003, 2004, 2005, 2006],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(
-        mode === 'light' ? colors["default-600"] : colors["default-300"]
-      ),
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default GroupedBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-stack-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-stack-bar.tsx
deleted file mode 100644
index a69aba1f..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-stack-bar.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
-
-const GroupedStackBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Q1 Budget",
-      group: "budget",
-      data: [44000, 55000, 41000, 67000, 22000],
-    },
-    {
-      name: "Q1 Actual",
-      group: "actual",
-      data: [48000, 50000, 40000, 65000, 25000],
-    },
-    {
-      name: "Q2 Budget",
-      group: "budget",
-      data: [13000, 36000, 20000, 8000, 13000],
-    },
-    {
-      name: "Q2 Actual",
-      group: "actual",
-      data: [20000, 40000, 25000, 10000, 12000],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        dataLabels: {
-          total: {
-            enabled: false,
-            offsetX: 0,
-            style: {
-              colors: [
-                mode === 'light' ? colors["default-600"] : colors["default-300"],
-              ],
-              fontSize: "13px",
-              fontWeight: 800,
-            },
-          },
-        },
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      offsetX: 0,
-      style: {
-        fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
-      },
-      formatter: (val: number) => {
-        return val / 1000 + "K";
-      },
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ]
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [
-        "Online advertising",
-        "Sales Training",
-        "Print advertising",
-        "Catalogs",
-        "Meetings",
-      ],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        formatter: function (val: number) {
-          return val + "K";
-        },
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-
-    legend: {
-      position: "top",
-      horizontalAlign: "left",
-      offsetX: 40,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 12,
-        height: 12,
-        radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default GroupedStackBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/layout.tsx
deleted file mode 100644
index 5da12fe9..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Bar Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/negative-values-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/negative-values-bar.tsx
deleted file mode 100644
index 1111e595..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/negative-values-bar.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const NegativeValuesBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Males",
-      data: [
-        0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2,
-        4.5, 3.9, 3.5, 3,
-      ],
-    },
-    {
-      name: "Females",
-      data: [
-        -0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3,
-        -4.4, -4.1, -4, -4.1, -3.4, -3.1, -2.8,
-      ],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      }
-    },
-    dataLabels: {
-      enabled: false,
-      offsetX: 0,
-      style: {
-        fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
-      },
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [
-        "85+",
-        "80-84",
-        "75-79",
-        "70-74",
-        "65-69",
-        "60-64",
-        "55-59",
-        "50-54",
-        "45-49",
-        "40-44",
-        "35-39",
-        "30-34",
-        "25-29",
-        "20-24",
-        "15-19",
-        "10-14",
-        "5-9",
-        "0-4",
-      ],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        formatter: function (val: number) {
-          return Math.abs(Math.round(val)) + "%";
-        },
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
-        },
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-
-    legend: {
-      position: "top",
-      horizontalAlign: "end",
-      offsetX: 40,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 12,
-        height: 12,
-        radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default NegativeValuesBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/page.tsx
deleted file mode 100644
index 07208c1a..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/page.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicBar from "./basic-bar";
-import GroupedBar from "./grouped-bar";
-import StackedBar from "./stacked-bar";
-import StackedBar2 from "./stacked-bar2";
-import GroupedStackBar from "./grouped-stack-bar";
-import NegativeValuesBar from "./negative-values-bar";
-import BarsWithMarkes from "./bars-with-marks";
-import ReversedBar from "./reversed-bar";
-import CustomLabelBar from "./custom-label-bar";
-import PatternedBar from "./patterned-bar";
-import BarImageChart from "./bar-image-chart";
-
-const BarChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Bar Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grouped Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bar Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bars 100</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar2 />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grouped Stacked Bars</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupedStackBar />
-                </CardContent>
-            </Card>
-
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar with Negative Values</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <NegativeValuesBar />
-                </CardContent>
-            </Card>
-
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar with Markers</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarsWithMarkes />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Reversed Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ReversedBar />
-                </CardContent>
-            </Card>
-
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom DataLabels Bar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomLabelBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Patterned Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PatternedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar with Images</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarImageChart />
-                </CardContent>
-            </Card> 
-        </div>
-    );
-};
-
-export default BarChartPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/patterned-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/patterned-bar.tsx
deleted file mode 100644
index e8f988ab..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/patterned-bar.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel
-} from "@/lib/appex-chart-options";
-
-const PatternedBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Marine Sprite",
-      data: [44, 55, 41, 37, 22, 43, 21],
-    },
-    {
-      name: "Striking Calf",
-      data: [53, 32, 33, 52, 13, 43, 32],
-    },
-    {
-      name: "Tank Picture",
-      data: [12, 17, 11, 9, 15, 11, 20],
-    },
-    {
-      name: "Bucket Slope",
-      data: [9, 7, 5, 8, 6, 9, 4],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-      dropShadow: {
-        enabled: true,
-        blur: 1,
-        opacity: 0.25,
-      }
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        barHeight: "60%",
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-    ],
-    tooltip: {
-      shared: false,
-      theme: mode === "dark" ? "dark" : "light",
-      y: {
-        formatter: function (val: number) {
-          return val + "K";
-        },
-      },
-    },
-    grid: getGridConfig(),
-    fill: {
-      type: "pattern",
-      opacity: 1,
-      pattern: {
-        style: ["circles", "slantedLines", "verticalLines", "horizontalLines"],
-      },
-    },
-    yaxis: {
-      axisTicks: {
-        show: true,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    xaxis: {
-      categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    states: {
-      hover: {
-        filter: "none",
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      position: "right",
-      offsetY: 40,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default PatternedBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/reversed-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/reversed-bar.tsx
deleted file mode 100644
index 0216564a..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/reversed-bar.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const ReversedBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [400, 430, 448, 470, 540, 580, 690],
-    }
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      }
-    },
-    dataLabels: {
-      enabled: true,
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"]
-      ]
-    },
-    colors: [colors.info],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: {
-      reversed: true,
-      axisTicks: {
-        show: true,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    xaxis: {
-      categories: [
-        "June",
-        "July",
-        "August",
-        "September",
-        "October",
-        "November",
-        "December",
-      ],
-      axisBorder: {
-        show: false
-      },
-      axisTicks: {
-        show: false
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ReversedBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar.tsx
deleted file mode 100644
index 52fdd312..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
-
-const StackedBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-  const series = [
-    {
-      name: "Marine Sprite",
-      data: [44, 55, 41, 37, 22, 43, 21],
-    },
-    {
-      name: "Striking Calf",
-      data: [53, 32, 33, 52, 13, 43, 32],
-    },
-    {
-      name: "Tank Picture",
-      data: [12, 17, 11, 9, 15, 11, 20],
-    },
-    {
-      name: "Bucket Slope",
-      data: [9, 7, 5, 8, 6, 9, 4],
-    },
-    {
-      name: "Reborn Kid",
-      data: [25, 12, 19, 32, 25, 24, 10],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        dataLabels: {
-          total: {
-            enabled: false,
-          }
-        }
-      }
-    },
-    dataLabels: {
-      enabled: true,
-      offsetX: 0,
-      style: {
-        fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        ]
-      }
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [2001, 2002, 2003, 2004, 2005, 2006],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        formatter: function (val: number) {
-          return val + "K";
-        },
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-
-    legend: {
-      position: "top",
-      horizontalAlign: "left",
-      offsetX: 40,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 12,
-        height: 12,
-        radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default StackedBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar2.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar2.tsx
deleted file mode 100644
index 1d5d5549..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar2.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
-
-const StackedBar2 = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Marine Sprite",
-      data: [44, 55, 41, 37, 22, 43, 21],
-    },
-    {
-      name: "Striking Calf",
-      data: [53, 32, 33, 52, 13, 43, 32],
-    },
-    {
-      name: "Tank Picture",
-      data: [12, 17, 11, 9, 15, 11, 20],
-    },
-    {
-      name: "Bucket Slope",
-      data: [9, 7, 5, 8, 6, 9, 4],
-    },
-    {
-      name: "Reborn Kid",
-      data: [25, 12, 19, 32, 25, 24, 10],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-      stackType: "100%",
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        dataLabels: {
-          total: {
-            enabled: false,
-            offsetX: 0,
-            style: {
-              colors: [
-                mode === 'light' ? colors["default-600"] : colors["default-300"],
-              ],
-              fontSize: "13px",
-              fontWeight: 800,
-            }
-          }
-        }
-      }
-    },
-    dataLabels: {
-      enabled: true,
-      offsetX: 0,
-      style: {
-        fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
-      },
-    },
-    stroke: {
-      show: false,
-      width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [2001, 2002, 2003, 2004, 2005, 2006],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        formatter: function (val: number) {
-          return val + "K";
-        },
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
-        },
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-
-    legend: {
-      position: "top",
-      horizontalAlign: "left",
-      offsetX: 40,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 12,
-        height: 12,
-        radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default StackedBar2;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/basic-boxplot.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/basic-boxplot.tsx
deleted file mode 100644
index 2c769ac1..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/basic-boxplot.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const BasicBoxPlot = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      type: "boxPlot",
-      data: [
-        {
-          x: "Jan 2015",
-          y: [54, 66, 69, 75, 88],
-        },
-        {
-          x: "Jan 2016",
-          y: [43, 65, 69, 76, 81],
-        },
-        {
-          x: "Jan 2017",
-          y: [31, 39, 45, 51, 59],
-        },
-        {
-          x: "Jan 2018",
-          y: [39, 46, 55, 65, 71],
-        },
-        {
-          x: "Jan 2019",
-          y: [29, 31, 35, 39, 44],
-        },
-        {
-          x: "Jan 2020",
-          y: [41, 49, 58, 61, 67],
-        },
-        {
-          x: "Jan 2021",
-          y: [54, 59, 66, 71, 88],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    plotOptions: {
-      boxPlot: {
-        colors: {
-          upper: colors.info,
-          lower: colors.success,
-        },
-      },
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="boxPlot"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicBoxPlot;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/horizontal-boxplot.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/horizontal-boxplot.tsx
deleted file mode 100644
index 98925cfe..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/horizontal-boxplot.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const HorizontalBoxPlot = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      data: [
-        {
-          x: "Category A",
-          y: [54, 66, 69, 75, 88],
-        },
-        {
-          x: "Category B",
-          y: [43, 65, 69, 76, 81],
-        },
-        {
-          x: "Category C",
-          y: [31, 39, 45, 51, 59],
-        },
-        {
-          x: "Category D",
-          y: [39, 46, 55, 65, 71],
-        },
-        {
-          x: "Category E",
-          y: [29, 31, 35, 39, 44],
-        },
-        {
-          x: "Category F",
-          y: [41, 49, 58, 61, 67],
-        },
-        {
-          x: "Category G",
-          y: [54, 59, 66, 71, 88],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      type: "boxPlot",
-      height: 350,
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        barHeight: "50%",
-      },
-      boxPlot: {
-        colors: {
-          upper: colors.info,
-          lower: colors.warning,
-        },
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    stroke: {
-      colors: [
-        colors.primary,
-      ],
-    },
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="boxPlot"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default HorizontalBoxPlot;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/layout.tsx
deleted file mode 100644
index 3f786bf7..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Boxplot Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/page.tsx
deleted file mode 100644
index 5c577847..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/page.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicBoxPlot from "./basic-boxplot";
-import HorizontalBoxPlot from "./horizontal-boxplot";
-import ScatterBoxplot from "./scatter-boxplot";
-
-const CandleStickChartPage = () => {
-    return (
-        <div className="grid grid-cols-2 gap-6">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Box Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicBoxPlot />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Boxplot with Scatter Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <ScatterBoxplot />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 ">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Horizontal BoxPlot</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <HorizontalBoxPlot />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
-};
-
-export default CandleStickChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/scatter-boxplot.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/scatter-boxplot.tsx
deleted file mode 100644
index 48223105..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/scatter-boxplot.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const ScatterBoxplot = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "box",
-      type: "boxPlot",
-      data: [
-        {
-          x: new Date("2017-01-01").getTime(),
-          y: [54, 66, 69, 75, 88],
-        },
-        {
-          x: new Date("2018-01-01").getTime(),
-          y: [43, 65, 69, 76, 81],
-        },
-        {
-          x: new Date("2019-01-01").getTime(),
-          y: [31, 39, 45, 51, 59],
-        },
-        {
-          x: new Date("2020-01-01").getTime(),
-          y: [39, 46, 55, 65, 71],
-        },
-        {
-          x: new Date("2021-01-01").getTime(),
-          y: [29, 31, 35, 39, 44],
-        },
-      ],
-    },
-    {
-      name: "outliers",
-      type: "scatter",
-      data: [
-        {
-          x: new Date("2017-01-01").getTime(),
-          y: 32,
-        },
-        {
-          x: new Date("2018-01-01").getTime(),
-          y: 25,
-        },
-        {
-          x: new Date("2019-01-01").getTime(),
-          y: 64,
-        },
-        {
-          x: new Date("2020-01-01").getTime(),
-          y: 27,
-        },
-        {
-          x: new Date("2020-01-01").getTime(),
-          y: 78,
-        },
-        {
-          x: new Date("2021-01-01").getTime(),
-          y: 15,
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    plotOptions: {
-      boxPlot: {
-        colors: {
-          upper: colors.primary,
-          lower: colors.info,
-        },
-      },
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="boxPlot"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ScatterBoxplot;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/basic-bubble.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/basic-bubble.tsx
deleted file mode 100644
index 431db70d..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/basic-bubble.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const BasicBubble = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-  interface DataRange {
-    min: number;
-    max: number;
-  }
-  function generateData(baseval: number, count: number, yrange: DataRange) {
-    var i = 0;
-    var series: [number, number, number][] = [];
-    while (i < count) {
-      var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-      var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
-
-      series.push([x, y, z]);
-      baseval += 86400000;
-      i++;
-    }
-    return series;
-  }
-  const series = [
-    {
-      name: "Bubble1",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-    {
-      name: "Bubble2",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-    {
-      name: "Bubble3",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-    {
-      name: "Bubble4",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    fill: {
-      opacity: 0.8,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      },
-    },
-
-    xaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bubble"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicBubble;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/bubble-3d.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/bubble-3d.tsx
deleted file mode 100644
index 8f054923..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/bubble-3d.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const Bubble3D = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  interface DataRange {
-    min: number;
-    max: number;
-  }
-  function generateData(baseval: number, count: number, yrange: DataRange) {
-    var i = 0;
-    var series: [number, number, number][] = [];
-    while (i < count) {
-      var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-      var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
-
-      series.push([x, y, z]);
-      baseval += 86400000;
-      i++;
-    }
-    return series;
-  }
-  const series = [
-    {
-      name: "Product1",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-    {
-      name: "Product2",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-    {
-      name: "Product3",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-    {
-      name: "Product4",
-      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    fill: {
-      type: "gradient",
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      },
-    },
-
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    theme: {
-      palette: "palette2",
-    },
-    xaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bubble"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default Bubble3D;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/layout.tsx
deleted file mode 100644
index 2fa34303..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Bubble Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/page.tsx
deleted file mode 100644
index 2081a6da..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicBubble from "./basic-bubble";
-import Bubble3D from "./bubble-3d";
-
-const BarChartPage = () => {
-    return (
-        <div className="space-y-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicBubble />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>3D Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <Bubble3D />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default BarChartPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/basic-candle.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/basic-candle.tsx
deleted file mode 100644
index 37cd0ab1..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/basic-candle.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const BasicCandle = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      data: [
-        {
-          x: new Date(1538778600000),
-          y: [6629.81, 6650.5, 6623.04, 6633.33],
-        },
-        {
-          x: new Date(1538780400000),
-          y: [6632.01, 6643.59, 6620, 6630.11],
-        },
-        {
-          x: new Date(1538782200000),
-          y: [6630.71, 6648.95, 6623.34, 6635.65],
-        },
-        {
-          x: new Date(1538784000000),
-          y: [6635.65, 6651, 6629.67, 6638.24],
-        },
-        {
-          x: new Date(1538785800000),
-          y: [6638.24, 6640, 6620, 6624.47],
-        },
-        {
-          x: new Date(1538787600000),
-          y: [6624.53, 6636.03, 6621.68, 6624.31],
-        },
-        {
-          x: new Date(1538789400000),
-          y: [6624.61, 6632.2, 6617, 6626.02],
-        },
-        {
-          x: new Date(1538791200000),
-          y: [6627, 6627.62, 6584.22, 6603.02],
-        },
-        {
-          x: new Date(1538793000000),
-          y: [6605, 6608.03, 6598.95, 6604.01],
-        },
-        {
-          x: new Date(1538794800000),
-          y: [6604.5, 6614.4, 6602.26, 6608.02],
-        },
-        {
-          x: new Date(1538796600000),
-          y: [6608.02, 6610.68, 6601.99, 6608.91],
-        },
-        {
-          x: new Date(1538798400000),
-          y: [6608.91, 6618.99, 6608.01, 6612],
-        },
-        {
-          x: new Date(1538800200000),
-          y: [6612, 6615.13, 6605.09, 6612],
-        },
-        {
-          x: new Date(1538802000000),
-          y: [6612, 6624.12, 6608.43, 6622.95],
-        },
-        {
-          x: new Date(1538803800000),
-          y: [6623.91, 6623.91, 6615, 6615.67],
-        },
-        {
-          x: new Date(1538805600000),
-          y: [6618.69, 6618.74, 6610, 6610.4],
-        },
-        {
-          x: new Date(1538807400000),
-          y: [6611, 6622.78, 6610.4, 6614.9],
-        },
-        {
-          x: new Date(1538809200000),
-          y: [6614.9, 6626.2, 6613.33, 6623.45],
-        },
-        {
-          x: new Date(1538811000000),
-          y: [6623.48, 6627, 6618.38, 6620.35],
-        },
-        {
-          x: new Date(1538812800000),
-          y: [6619.43, 6620.35, 6610.05, 6615.53],
-        },
-        {
-          x: new Date(1538814600000),
-          y: [6615.53, 6617.93, 6610, 6615.19],
-        },
-        {
-          x: new Date(1538816400000),
-          y: [6615.19, 6621.6, 6608.2, 6620],
-        },
-        {
-          x: new Date(1538818200000),
-          y: [6619.54, 6625.17, 6614.15, 6620],
-        },
-        {
-          x: new Date(1538820000000),
-          y: [6620.33, 6634.15, 6617.24, 6624.61],
-        },
-        {
-          x: new Date(1538821800000),
-          y: [6625.95, 6626, 6611.66, 6617.58],
-        },
-        {
-          x: new Date(1538823600000),
-          y: [6619, 6625.97, 6595.27, 6598.86],
-        },
-        {
-          x: new Date(1538825400000),
-          y: [6598.86, 6598.88, 6570, 6587.16],
-        },
-        {
-          x: new Date(1538827200000),
-          y: [6588.86, 6600, 6580, 6593.4],
-        },
-        {
-          x: new Date(1538829000000),
-          y: [6593.99, 6598.89, 6585, 6587.81],
-        },
-        {
-          x: new Date(1538830800000),
-          y: [6587.81, 6592.73, 6567.14, 6578],
-        },
-        {
-          x: new Date(1538832600000),
-          y: [6578.35, 6581.72, 6567.39, 6579],
-        },
-        {
-          x: new Date(1538834400000),
-          y: [6579.38, 6580.92, 6566.77, 6575.96],
-        },
-        {
-          x: new Date(1538836200000),
-          y: [6575.96, 6589, 6571.77, 6588.92],
-        },
-        {
-          x: new Date(1538838000000),
-          y: [6588.92, 6594, 6577.55, 6589.22],
-        },
-        {
-          x: new Date(1538839800000),
-          y: [6589.3, 6598.89, 6589.1, 6596.08],
-        },
-        {
-          x: new Date(1538841600000),
-          y: [6597.5, 6600, 6588.39, 6596.25],
-        },
-        {
-          x: new Date(1538843400000),
-          y: [6598.03, 6600, 6588.73, 6595.97],
-        },
-        {
-          x: new Date(1538845200000),
-          y: [6595.97, 6602.01, 6588.17, 6602],
-        },
-        {
-          x: new Date(1538847000000),
-          y: [6602, 6607, 6596.51, 6599.95],
-        },
-        {
-          x: new Date(1538848800000),
-          y: [6600.63, 6601.21, 6590.39, 6591.02],
-        },
-        {
-          x: new Date(1538850600000),
-          y: [6591.02, 6603.08, 6591, 6591],
-        },
-        {
-          x: new Date(1538852400000),
-          y: [6591, 6601.32, 6585, 6592],
-        },
-        {
-          x: new Date(1538854200000),
-          y: [6593.13, 6596.01, 6590, 6593.34],
-        },
-        {
-          x: new Date(1538856000000),
-          y: [6593.34, 6604.76, 6582.63, 6593.86],
-        },
-        {
-          x: new Date(1538857800000),
-          y: [6593.86, 6604.28, 6586.57, 6600.01],
-        },
-        {
-          x: new Date(1538859600000),
-          y: [6601.81, 6603.21, 6592.78, 6596.25],
-        },
-        {
-          x: new Date(1538861400000),
-          y: [6596.25, 6604.2, 6590, 6602.99],
-        },
-        {
-          x: new Date(1538863200000),
-          y: [6602.99, 6606, 6584.99, 6587.81],
-        },
-        {
-          x: new Date(1538865000000),
-          y: [6587.81, 6595, 6583.27, 6591.96],
-        },
-        {
-          x: new Date(1538866800000),
-          y: [6591.97, 6596.07, 6585, 6588.39],
-        },
-        {
-          x: new Date(1538868600000),
-          y: [6587.6, 6598.21, 6587.6, 6594.27],
-        },
-        {
-          x: new Date(1538870400000),
-          y: [6596.44, 6601, 6590, 6596.55],
-        },
-        {
-          x: new Date(1538872200000),
-          y: [6598.91, 6605, 6596.61, 6600.02],
-        },
-        {
-          x: new Date(1538874000000),
-          y: [6600.55, 6605, 6589.14, 6593.01],
-        },
-        {
-          x: new Date(1538875800000),
-          y: [6593.15, 6605, 6592, 6603.06],
-        },
-        {
-          x: new Date(1538877600000),
-          y: [6603.07, 6604.5, 6599.09, 6603.89],
-        },
-        {
-          x: new Date(1538879400000),
-          y: [6604.44, 6604.44, 6600, 6603.5],
-        },
-        {
-          x: new Date(1538881200000),
-          y: [6603.5, 6603.99, 6597.5, 6603.86],
-        },
-        {
-          x: new Date(1538883000000),
-          y: [6603.85, 6605, 6600, 6604.07],
-        },
-        {
-          x: new Date(1538884800000),
-          y: [6604.98, 6606, 6604.07, 6606],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="candlestick"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicCandle;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/candle-stick-line.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/candle-stick-line.tsx
deleted file mode 100644
index 03f06fe3..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/candle-stick-line.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const CandleStickWithLine = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "line",
-      type: "line",
-      data: [
-        {
-          x: new Date(1538778600000),
-          y: 6604,
-        },
-        {
-          x: new Date(1538782200000),
-          y: 6602,
-        },
-        {
-          x: new Date(1538814600000),
-          y: 6607,
-        },
-        {
-          x: new Date(1538884800000),
-          y: 6620,
-        },
-      ],
-    },
-    {
-      name: "candle",
-      type: "candlestick",
-      data: [
-        {
-          x: new Date(1538778600000),
-          y: [6629.81, 6650.5, 6623.04, 6633.33],
-        },
-        {
-          x: new Date(1538780400000),
-          y: [6632.01, 6643.59, 6620, 6630.11],
-        },
-        {
-          x: new Date(1538782200000),
-          y: [6630.71, 6648.95, 6623.34, 6635.65],
-        },
-        {
-          x: new Date(1538784000000),
-          y: [6635.65, 6651, 6629.67, 6638.24],
-        },
-        {
-          x: new Date(1538785800000),
-          y: [6638.24, 6640, 6620, 6624.47],
-        },
-        {
-          x: new Date(1538787600000),
-          y: [6624.53, 6636.03, 6621.68, 6624.31],
-        },
-        {
-          x: new Date(1538789400000),
-          y: [6624.61, 6632.2, 6617, 6626.02],
-        },
-        {
-          x: new Date(1538791200000),
-          y: [6627, 6627.62, 6584.22, 6603.02],
-        },
-        {
-          x: new Date(1538793000000),
-          y: [6605, 6608.03, 6598.95, 6604.01],
-        },
-        {
-          x: new Date(1538794800000),
-          y: [6604.5, 6614.4, 6602.26, 6608.02],
-        },
-        {
-          x: new Date(1538796600000),
-          y: [6608.02, 6610.68, 6601.99, 6608.91],
-        },
-        {
-          x: new Date(1538798400000),
-          y: [6608.91, 6618.99, 6608.01, 6612],
-        },
-        {
-          x: new Date(1538800200000),
-          y: [6612, 6615.13, 6605.09, 6612],
-        },
-        {
-          x: new Date(1538802000000),
-          y: [6612, 6624.12, 6608.43, 6622.95],
-        },
-        {
-          x: new Date(1538803800000),
-          y: [6623.91, 6623.91, 6615, 6615.67],
-        },
-        {
-          x: new Date(1538805600000),
-          y: [6618.69, 6618.74, 6610, 6610.4],
-        },
-        {
-          x: new Date(1538807400000),
-          y: [6611, 6622.78, 6610.4, 6614.9],
-        },
-        {
-          x: new Date(1538809200000),
-          y: [6614.9, 6626.2, 6613.33, 6623.45],
-        },
-        {
-          x: new Date(1538811000000),
-          y: [6623.48, 6627, 6618.38, 6620.35],
-        },
-        {
-          x: new Date(1538812800000),
-          y: [6619.43, 6620.35, 6610.05, 6615.53],
-        },
-        {
-          x: new Date(1538814600000),
-          y: [6615.53, 6617.93, 6610, 6615.19],
-        },
-        {
-          x: new Date(1538816400000),
-          y: [6615.19, 6621.6, 6608.2, 6620],
-        },
-        {
-          x: new Date(1538818200000),
-          y: [6619.54, 6625.17, 6614.15, 6620],
-        },
-        {
-          x: new Date(1538820000000),
-          y: [6620.33, 6634.15, 6617.24, 6624.61],
-        },
-        {
-          x: new Date(1538821800000),
-          y: [6625.95, 6626, 6611.66, 6617.58],
-        },
-        {
-          x: new Date(1538823600000),
-          y: [6619, 6625.97, 6595.27, 6598.86],
-        },
-        {
-          x: new Date(1538825400000),
-          y: [6598.86, 6598.88, 6570, 6587.16],
-        },
-        {
-          x: new Date(1538827200000),
-          y: [6588.86, 6600, 6580, 6593.4],
-        },
-        {
-          x: new Date(1538829000000),
-          y: [6593.99, 6598.89, 6585, 6587.81],
-        },
-        {
-          x: new Date(1538830800000),
-          y: [6587.81, 6592.73, 6567.14, 6578],
-        },
-        {
-          x: new Date(1538832600000),
-          y: [6578.35, 6581.72, 6567.39, 6579],
-        },
-        {
-          x: new Date(1538834400000),
-          y: [6579.38, 6580.92, 6566.77, 6575.96],
-        },
-        {
-          x: new Date(1538836200000),
-          y: [6575.96, 6589, 6571.77, 6588.92],
-        },
-        {
-          x: new Date(1538838000000),
-          y: [6588.92, 6594, 6577.55, 6589.22],
-        },
-        {
-          x: new Date(1538839800000),
-          y: [6589.3, 6598.89, 6589.1, 6596.08],
-        },
-        {
-          x: new Date(1538841600000),
-          y: [6597.5, 6600, 6588.39, 6596.25],
-        },
-        {
-          x: new Date(1538843400000),
-          y: [6598.03, 6600, 6588.73, 6595.97],
-        },
-        {
-          x: new Date(1538845200000),
-          y: [6595.97, 6602.01, 6588.17, 6602],
-        },
-        {
-          x: new Date(1538847000000),
-          y: [6602, 6607, 6596.51, 6599.95],
-        },
-        {
-          x: new Date(1538848800000),
-          y: [6600.63, 6601.21, 6590.39, 6591.02],
-        },
-        {
-          x: new Date(1538850600000),
-          y: [6591.02, 6603.08, 6591, 6591],
-        },
-        {
-          x: new Date(1538852400000),
-          y: [6591, 6601.32, 6585, 6592],
-        },
-        {
-          x: new Date(1538854200000),
-          y: [6593.13, 6596.01, 6590, 6593.34],
-        },
-        {
-          x: new Date(1538856000000),
-          y: [6593.34, 6604.76, 6582.63, 6593.86],
-        },
-        {
-          x: new Date(1538857800000),
-          y: [6593.86, 6604.28, 6586.57, 6600.01],
-        },
-        {
-          x: new Date(1538859600000),
-          y: [6601.81, 6603.21, 6592.78, 6596.25],
-        },
-        {
-          x: new Date(1538861400000),
-          y: [6596.25, 6604.2, 6590, 6602.99],
-        },
-        {
-          x: new Date(1538863200000),
-          y: [6602.99, 6606, 6584.99, 6587.81],
-        },
-        {
-          x: new Date(1538865000000),
-          y: [6587.81, 6595, 6583.27, 6591.96],
-        },
-        {
-          x: new Date(1538866800000),
-          y: [6591.97, 6596.07, 6585, 6588.39],
-        },
-        {
-          x: new Date(1538868600000),
-          y: [6587.6, 6598.21, 6587.6, 6594.27],
-        },
-        {
-          x: new Date(1538870400000),
-          y: [6596.44, 6601, 6590, 6596.55],
-        },
-        {
-          x: new Date(1538872200000),
-          y: [6598.91, 6605, 6596.61, 6600.02],
-        },
-        {
-          x: new Date(1538874000000),
-          y: [6600.55, 6605, 6589.14, 6593.01],
-        },
-        {
-          x: new Date(1538875800000),
-          y: [6593.15, 6605, 6592, 6603.06],
-        },
-        {
-          x: new Date(1538877600000),
-          y: [6603.07, 6604.5, 6599.09, 6603.89],
-        },
-        {
-          x: new Date(1538879400000),
-          y: [6604.44, 6604.44, 6600, 6603.5],
-        },
-        {
-          x: new Date(1538881200000),
-          y: [6603.5, 6603.99, 6597.5, 6603.86],
-        },
-        {
-          x: new Date(1538883000000),
-          y: [6603.85, 6605, 6600, 6604.07],
-        },
-        {
-          x: new Date(1538884800000),
-          y: [6604.98, 6606, 6604.07, 6606],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      show: false,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="candlestick"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default CandleStickWithLine;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/category-xaxis.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/category-xaxis.tsx
deleted file mode 100644
index b4d88ada..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/category-xaxis.tsx
+++ /dev/null
@@ -1,342 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import dayjs from "dayjs";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const CategoryXAxis = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "candle",
-      data: [
-        {
-          x: new Date(1538778600000),
-          y: [6629.81, 6650.5, 6623.04, 6633.33],
-        },
-        {
-          x: new Date(1538780400000),
-          y: [6632.01, 6643.59, 6620, 6630.11],
-        },
-        {
-          x: new Date(1538782200000),
-          y: [6630.71, 6648.95, 6623.34, 6635.65],
-        },
-        {
-          x: new Date(1538784000000),
-          y: [6635.65, 6651, 6629.67, 6638.24],
-        },
-        {
-          x: new Date(1538785800000),
-          y: [6638.24, 6640, 6620, 6624.47],
-        },
-        {
-          x: new Date(1538787600000),
-          y: [6624.53, 6636.03, 6621.68, 6624.31],
-        },
-        {
-          x: new Date(1538789400000),
-          y: [6624.61, 6632.2, 6617, 6626.02],
-        },
-        {
-          x: new Date(1538791200000),
-          y: [6627, 6627.62, 6584.22, 6603.02],
-        },
-        {
-          x: new Date(1538793000000),
-          y: [6605, 6608.03, 6598.95, 6604.01],
-        },
-        {
-          x: new Date(1538794800000),
-          y: [6604.5, 6614.4, 6602.26, 6608.02],
-        },
-        {
-          x: new Date(1538796600000),
-          y: [6608.02, 6610.68, 6601.99, 6608.91],
-        },
-        {
-          x: new Date(1538798400000),
-          y: [6608.91, 6618.99, 6608.01, 6612],
-        },
-        {
-          x: new Date(1538800200000),
-          y: [6612, 6615.13, 6605.09, 6612],
-        },
-        {
-          x: new Date(1538802000000),
-          y: [6612, 6624.12, 6608.43, 6622.95],
-        },
-        {
-          x: new Date(1538803800000),
-          y: [6623.91, 6623.91, 6615, 6615.67],
-        },
-        {
-          x: new Date(1538805600000),
-          y: [6618.69, 6618.74, 6610, 6610.4],
-        },
-        {
-          x: new Date(1538807400000),
-          y: [6611, 6622.78, 6610.4, 6614.9],
-        },
-        {
-          x: new Date(1538809200000),
-          y: [6614.9, 6626.2, 6613.33, 6623.45],
-        },
-        {
-          x: new Date(1538811000000),
-          y: [6623.48, 6627, 6618.38, 6620.35],
-        },
-        {
-          x: new Date(1538812800000),
-          y: [6619.43, 6620.35, 6610.05, 6615.53],
-        },
-        {
-          x: new Date(1538814600000),
-          y: [6615.53, 6617.93, 6610, 6615.19],
-        },
-        {
-          x: new Date(1538816400000),
-          y: [6615.19, 6621.6, 6608.2, 6620],
-        },
-        {
-          x: new Date(1538818200000),
-          y: [6619.54, 6625.17, 6614.15, 6620],
-        },
-        {
-          x: new Date(1538820000000),
-          y: [6620.33, 6634.15, 6617.24, 6624.61],
-        },
-        {
-          x: new Date(1538821800000),
-          y: [6625.95, 6626, 6611.66, 6617.58],
-        },
-        {
-          x: new Date(1538823600000),
-          y: [6619, 6625.97, 6595.27, 6598.86],
-        },
-        {
-          x: new Date(1538825400000),
-          y: [6598.86, 6598.88, 6570, 6587.16],
-        },
-        {
-          x: new Date(1538827200000),
-          y: [6588.86, 6600, 6580, 6593.4],
-        },
-        {
-          x: new Date(1538829000000),
-          y: [6593.99, 6598.89, 6585, 6587.81],
-        },
-        {
-          x: new Date(1538830800000),
-          y: [6587.81, 6592.73, 6567.14, 6578],
-        },
-        {
-          x: new Date(1538832600000),
-          y: [6578.35, 6581.72, 6567.39, 6579],
-        },
-        {
-          x: new Date(1538834400000),
-          y: [6579.38, 6580.92, 6566.77, 6575.96],
-        },
-        {
-          x: new Date(1538836200000),
-          y: [6575.96, 6589, 6571.77, 6588.92],
-        },
-        {
-          x: new Date(1538838000000),
-          y: [6588.92, 6594, 6577.55, 6589.22],
-        },
-        {
-          x: new Date(1538839800000),
-          y: [6589.3, 6598.89, 6589.1, 6596.08],
-        },
-        {
-          x: new Date(1538841600000),
-          y: [6597.5, 6600, 6588.39, 6596.25],
-        },
-        {
-          x: new Date(1538843400000),
-          y: [6598.03, 6600, 6588.73, 6595.97],
-        },
-        {
-          x: new Date(1538845200000),
-          y: [6595.97, 6602.01, 6588.17, 6602],
-        },
-        {
-          x: new Date(1538847000000),
-          y: [6602, 6607, 6596.51, 6599.95],
-        },
-        {
-          x: new Date(1538848800000),
-          y: [6600.63, 6601.21, 6590.39, 6591.02],
-        },
-        {
-          x: new Date(1538850600000),
-          y: [6591.02, 6603.08, 6591, 6591],
-        },
-        {
-          x: new Date(1538852400000),
-          y: [6591, 6601.32, 6585, 6592],
-        },
-        {
-          x: new Date(1538854200000),
-          y: [6593.13, 6596.01, 6590, 6593.34],
-        },
-        {
-          x: new Date(1538856000000),
-          y: [6593.34, 6604.76, 6582.63, 6593.86],
-        },
-        {
-          x: new Date(1538857800000),
-          y: [6593.86, 6604.28, 6586.57, 6600.01],
-        },
-        {
-          x: new Date(1538859600000),
-          y: [6601.81, 6603.21, 6592.78, 6596.25],
-        },
-        {
-          x: new Date(1538861400000),
-          y: [6596.25, 6604.2, 6590, 6602.99],
-        },
-        {
-          x: new Date(1538863200000),
-          y: [6602.99, 6606, 6584.99, 6587.81],
-        },
-        {
-          x: new Date(1538865000000),
-          y: [6587.81, 6595, 6583.27, 6591.96],
-        },
-        {
-          x: new Date(1538866800000),
-          y: [6591.97, 6596.07, 6585, 6588.39],
-        },
-        {
-          x: new Date(1538868600000),
-          y: [6587.6, 6598.21, 6587.6, 6594.27],
-        },
-        {
-          x: new Date(1538870400000),
-          y: [6596.44, 6601, 6590, 6596.55],
-        },
-        {
-          x: new Date(1538872200000),
-          y: [6598.91, 6605, 6596.61, 6600.02],
-        },
-        {
-          x: new Date(1538874000000),
-          y: [6600.55, 6605, 6589.14, 6593.01],
-        },
-        {
-          x: new Date(1538875800000),
-          y: [6593.15, 6605, 6592, 6603.06],
-        },
-        {
-          x: new Date(1538877600000),
-          y: [6603.07, 6604.5, 6599.09, 6603.89],
-        },
-        {
-          x: new Date(1538879400000),
-          y: [6604.44, 6604.44, 6600, 6603.5],
-        },
-        {
-          x: new Date(1538881200000),
-          y: [6603.5, 6603.99, 6597.5, 6603.86],
-        },
-        {
-          x: new Date(1538883000000),
-          y: [6603.85, 6605, 6600, 6604.07],
-        },
-        {
-          x: new Date(1538884800000),
-          y: [6604.98, 6606, 6604.07, 6606],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    annotations: {
-      xaxis: [
-        {
-          x: "Oct 06 14:00",
-          borderColor: colors.primary,
-          label: {
-            borderColor: colors.primary,
-            style: {
-              fontSize: "12px",
-              color: "#fff",
-              background: colors.primary,
-            },
-            orientation: "horizontal",
-            offsetY: 7,
-            text: "Annotation Test",
-          },
-        },
-      ],
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    xaxis: {
-      type: "category",
-      labels: {
-        formatter: function (val: number) {
-          return dayjs(val).format("MMM DD HH:mm");
-        },
-        style: {
-          colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="candlestick"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default CategoryXAxis;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/layout.tsx
deleted file mode 100644
index ae38f77a..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Candlestick Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/page.tsx
deleted file mode 100644
index eaf83709..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/page.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicCandle from "./basic-candle";
-import CategoryXAxis from "./category-xaxis";
-import CandleStickWithLine from "./candle-stick-line";
-
-const CandleStickChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2 gap-6">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Candlestick Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicCandle />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Category X-Axis</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CategoryXAxis />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 ">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Candlestick with Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CandleStickWithLine />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
-};
-
-export default CandleStickChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/basic-column.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/basic-column.tsx
deleted file mode 100644
index 9e094ae0..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/basic-column.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const BasicColumn = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Net Profit",
-      data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
-    },
-    {
-      name: "Revenue",
-      data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
-    },
-    {
-      name: "Free Cash Flow",
-      data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: "45%",
-        endingShape: "rounded",
-      },
-    },
-    xaxis: {
-      categories: [
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      padding: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicColumn;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-label.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-label.tsx
deleted file mode 100644
index 544b9b90..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-label.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getXAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const ColumnWithLabel = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Inflation",
-      data: [2.5, 3.2, 5.0, 10.1, 4.2, 3.8, 3, 2.4, 4.0, 1.2, 3.5, 0.8],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      offsetY: -20,
-      formatter: function (val: number) {
-        return val + "%";
-      },
-      style: {
-        fontSize: "12px",
-        fontWeight: 700,
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    plotOptions: {
-      bar: {
-        columnWidth: "45%",
-        dataLabels: {
-          position: "top",
-        },
-      },
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ColumnWithLabel;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-marker.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-marker.tsx
deleted file mode 100644
index 569f85df..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-marker.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const ColumnMarker = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Actual",
-      data: [
-        {
-          x: "2011",
-          y: 1292,
-          goals: [
-            {
-              name: "Expected",
-              value: 1400,
-              strokeHeight: 5,
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-        {
-          x: "2012",
-          y: 4432,
-          goals: [
-            {
-              name: "Expected",
-              value: 5400,
-              strokeHeight: 5,
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-        {
-          x: "2013",
-          y: 5423,
-          goals: [
-            {
-              name: "Expected",
-              value: 5200,
-              strokeHeight: 5,
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-        {
-          x: "2014",
-          y: 6653,
-          goals: [
-            {
-              name: "Expected",
-              value: 6500,
-              strokeHeight: 5,
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-        {
-          x: "2015",
-          y: 8133,
-          goals: [
-            {
-              name: "Expected",
-              value: 6600,
-              strokeHeight: 13,
-              strokeWidth: 0,
-              strokeLineCap: "round",
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-        {
-          x: "2016",
-          y: 7132,
-          goals: [
-            {
-              name: "Expected",
-              value: 7500,
-              strokeHeight: 5,
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-        {
-          x: "2017",
-          y: 7332,
-          goals: [
-            {
-              name: "Expected",
-              value: 8700,
-              strokeHeight: 5,
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-        {
-          x: "2018",
-          y: 6553,
-          goals: [
-            {
-              name: "Expected",
-              value: 7300,
-              strokeHeight: 2,
-              strokeDashArray: 2,
-              strokeColor: "#ffa35d",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: false,
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    plotOptions: {
-      bar: {
-        columnWidth: "50%",
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    colors: [colors.info],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    xaxis: {
-      categories: [
-        "2016",
-        "2017",
-        "2018",
-        "2019",
-        "2020",
-        "2021",
-        "2022",
-        "2023",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      padding: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-  };
-  return (
-    <Chart
-      options={options}
-      series={series as any}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ColumnMarker;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-negative-values.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-negative-values.tsx
deleted file mode 100644
index 99abfe09..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-negative-values.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const ColumnNegativeValues = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Cash Flow",
-      data: [
-        1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34,
-        3.88, 13.07, 5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4,
-        -47.2, -43.3, -18.6, -48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4,
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    plotOptions: {
-      bar: {
-        colors: {
-          ranges: [
-            {
-              from: -100,
-              to: -46,
-              color: colors.primary,
-            },
-            {
-              from: -45,
-              to: 0,
-              color: colors.info,
-            },
-          ],
-        },
-        columnWidth: "80%",
-      },
-    },
-    xaxis: {
-      type: "datetime",
-      categories: [
-        "2011-01-01",
-        "2011-02-01",
-        "2011-03-01",
-        "2011-04-01",
-        "2011-05-01",
-        "2011-06-01",
-        "2011-07-01",
-        "2011-08-01",
-        "2011-09-01",
-        "2011-10-01",
-        "2011-11-01",
-        "2011-12-01",
-        "2012-01-01",
-        "2012-02-01",
-        "2012-03-01",
-        "2012-04-01",
-        "2012-05-01",
-        "2012-06-01",
-        "2012-07-01",
-        "2012-08-01",
-        "2012-09-01",
-        "2012-10-01",
-        "2012-11-01",
-        "2012-12-01",
-        "2013-01-01",
-        "2013-02-01",
-        "2013-03-01",
-        "2013-04-01",
-        "2013-05-01",
-        "2013-06-01",
-        "2013-07-01",
-        "2013-08-01",
-        "2013-09-01",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    )
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ColumnNegativeValues;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-rotate-labels.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-rotate-labels.tsx
deleted file mode 100644
index 609a1068..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-rotate-labels.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const ColumnRotateLabels = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Servings",
-      data: [44, 55, 41, 67, 76, 43, 60, 50, 70],
-    }
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    annotations: {
-      points: [
-        {
-          x: "Mangoes",
-          seriesIndex: 0,
-          label: {
-            borderColor: 'transparent',
-            offsetY: 0,
-            style: {
-              color: "#fff",
-              background: colors.primary,
-            },
-            text: "Mangoes are good",
-          },
-        },
-      ],
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      width: 2,
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    plotOptions: {
-      bar: {
-        borderRadius: 5,
-        columnWidth: "50%",
-      },
-    },
-    xaxis: {
-      categories: [
-        "Apples",
-        "Oranges",
-        "Strawberries",
-        "Pineapples",
-        "Mangoes",
-        "Bananas",
-        "Pears",
-        "Watermelons",
-        "Cherries",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ColumnRotateLabels;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/distributed-chart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/distributed-chart.tsx
deleted file mode 100644
index cd7d7794..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/distributed-chart.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const DistributedChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [21, 22, 10, 28, 16, 21, 13, 30],
-    }
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    plotOptions: {
-      bar: {
-        columnWidth: "45%",
-        distributed: true,
-      },
-    },
-    xaxis: {
-      categories: [
-        ["John", "Doe"],
-        ["Joe", "Smith"],
-        ["Jake", "Williams"],
-        "Amber",
-        ["Peter", "Brown"],
-        ["Mary", "Evans"],
-        ["David", "Wilson"],
-        ["Lily", "Roberts"],
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      padding: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default DistributedChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/dumbbell.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/dumbbell.tsx
deleted file mode 100644
index 7471a259..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/dumbbell.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const DumbbellChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [
-        {
-          x: "2008",
-          y: [2800, 4500],
-        },
-        {
-          x: "2009",
-          y: [3200, 4100],
-        },
-        {
-          x: "2010",
-          y: [2950, 7800],
-        },
-        {
-          x: "2011",
-          y: [3000, 4600],
-        },
-        {
-          x: "2012",
-          y: [3500, 4100],
-        },
-        {
-          x: "2013",
-          y: [4500, 6500],
-        },
-        {
-          x: "2014",
-          y: [4100, 5600],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: false,
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    plotOptions: {
-      bar: {
-        isDumbbell: true,
-        columnWidth: 3,
-        dumbbellColors: [
-          [
-            colors.primary,
-            colors.success,
-          ],
-        ],
-      },
-    },
-    colors: [colors.info],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      gradient: {
-        type: "vertical",
-        gradientToColors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
-        inverseColors: true,
-        stops: [0, 100],
-      },
-    },
-    xaxis: {
-      categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      padding: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default DumbbellChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-label-column.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-label-column.tsx
deleted file mode 100644
index 92185db9..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-label-column.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import dayjs from "dayjs";
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const GroupLabelColumn = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "sales",
-      data: [
-        {
-          x: "2019/01/01",
-          y: 400,
-        },
-        {
-          x: "2019/04/01",
-          y: 430,
-        },
-        {
-          x: "2019/07/01",
-          y: 448,
-        },
-        {
-          x: "2019/10/01",
-          y: 470,
-        },
-        {
-          x: "2020/01/01",
-          y: 540,
-        },
-        {
-          x: "2020/04/01",
-          y: 580,
-        },
-        {
-          x: "2020/07/01",
-          y: 690,
-        },
-        {
-          x: "2020/10/01",
-          y: 690,
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      formatter: (val: number) => {
-        return val / 1000 + "K";
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [colors.info],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    plotOptions: {
-      bar: {
-        horizontal: false,
-      },
-    },
-    xaxis: {
-      type: "category",
-
-      labels: {
-        formatter: function (val: number) {
-          return "Q" + Math.ceil(dayjs(val).month() / 3);
-        },
-        style: {
-          colors: Array(8).fill(
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ),
-        },
-      },
-      group: {
-        style: {
-          fontSize: "10px",
-          fontWeight: 700,
-          colors: Array(2).fill(
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ),
-        },
-        groups: [
-          { title: "2019", cols: 4 },
-          { title: "2020", cols: 4 },
-        ],
-      },
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default GroupLabelColumn;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-stacked.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-stacked.tsx
deleted file mode 100644
index b52d9d99..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-stacked.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const GroupStacked = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Q1 Budget",
-      group: "budget",
-      data: [44000, 55000, 41000, 67000, 22000, 43000],
-    },
-    {
-      name: "Q1 Actual",
-      group: "actual",
-      data: [48000, 50000, 40000, 65000, 25000, 40000],
-    },
-    {
-      name: "Q2 Budget",
-      group: "budget",
-      data: [13000, 36000, 20000, 8000, 13000, 27000],
-    },
-    {
-      name: "Q2 Actual",
-      group: "actual",
-      data: [20000, 40000, 25000, 10000, 12000, 28000],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-    },
-    dataLabels: {
-      formatter: (val: number) => {
-        return val / 1000 + "K";
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: {
-      labels: {
-        formatter: (val: number) => {
-          return val / 1000 + "K";
-        },
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
-        },
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: false,
-      },
-    },
-
-    xaxis: {
-      categories: [
-        "Online advertising",
-        "Sales Training",
-        "Print advertising",
-        "Catalogs",
-        "Meetings",
-        "Public relations",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      padding: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default GroupStacked;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/layout.tsx
deleted file mode 100644
index 1f744225..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Column Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/page.tsx
deleted file mode 100644
index d4dad362..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/page.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicColumn from "./basic-column";
-import ColumnWithLabel from "./column-label";
-import StackedColumn from "./stacked-column";
-import StackedColumn2 from "./stacked-column2";
-import GroupStacked from "./group-stacked";
-import DumbbellChart from "./dumbbell";
-import ColumnMarker from "./column-marker";
-import GroupLabelColumn from "./group-label-column";
-import ColumnRotateLabels from "./column-rotate-labels";
-import ColumnNegativeValues from "./column-negative-values";
-import DistributedChart from "./distributed-chart";
-
-const ColumnChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Column Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicColumn />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Data Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnWithLabel />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Columns</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedColumn />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Column 100</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedColumn2 />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grouped Stacked Columns</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupStacked />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Dumbbell Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DumbbellChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Markers</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnMarker />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Group Label</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupLabelColumn />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Rotated Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnRotateLabels />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Nagetive Values</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnNegativeValues />
-                </CardContent>
-            </Card>
-
-            <Card>
-                <CardHeader>
-                    <CardTitle>Distributed Columns Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DistributedChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ColumnChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column.tsx
deleted file mode 100644
index 0397765e..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const StackedColumn = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "PRODUCT A",
-      data: [44, 55, 41, 67, 22, 43],
-    },
-    {
-      name: "PRODUCT B",
-      data: [13, 23, 20, 8, 13, 27],
-    },
-    {
-      name: "PRODUCT C",
-      data: [11, 17, 15, 15, 21, 14],
-    },
-    {
-      name: "PRODUCT D",
-      data: [21, 7, 25, 13, 22, 8],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    plotOptions: {
-      bar: {
-        columnWidth: "45%",
-        borderRadius: 2,
-        dataLabels: {
-          position: "top",
-        },
-      },
-    },
-    xaxis: {
-      categories: ["Feb", "Mar", "Apr", "May"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      padding: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default StackedColumn;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column2.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column2.tsx
deleted file mode 100644
index 00d919bd..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column2.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const StackedColumn2 = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "PRODUCT A",
-      data: [44, 55, 41, 67, 22, 43],
-    },
-    {
-      name: "PRODUCT B",
-      data: [13, 23, 20, 8, 13, 27],
-    },
-    {
-      name: "PRODUCT C",
-      data: [11, 17, 15, 15, 21, 14],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      stacked: true,
-      stackType: "100%",
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2,
-    },
-    colors: [
-      colors.info,
-      colors.primary,
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    plotOptions: {
-      bar: {
-        columnWidth: "45%",
-        borderRadius: 2,
-        dataLabels: {
-          position: "top",
-        },
-      },
-    },
-    xaxis: {
-      categories: [
-        "2011 Q1",
-        "2012 Q2",
-        "2013 Q3",
-        "2014 Q4",
-        "2015 Q5",
-        "2016 Q6",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      padding: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default StackedColumn2;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/layout.tsx
deleted file mode 100644
index df6c0872..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const metadata = {
-  title: "Appex Combo Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
-
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-area.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-area.tsx
deleted file mode 100644
index d8bdfa13..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-area.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const LineArea = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-  const series = [
-    {
-      name: "TEAM A",
-      type: "area",
-      data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33],
-    },
-    {
-      name: "TEAM B",
-      type: "line",
-      data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false
-      }
-    },
-    stroke: {
-      curve: "smooth",
-      width: [0, 4],
-    },
-    dataLabels: {
-      enabled: true,
-      enabledOnSeries: [1]
-    },
-    labels: [
-      "01 Jan 2001",
-      "02 Jan 2001",
-      "03 Jan 2001",
-      "04 Jan 2001",
-      "05 Jan 2001",
-      "06 Jan 2001",
-      "07 Jan 2001",
-      "08 Jan 2001",
-      "09 Jan 2001",
-      "10 Jan 2001",
-      "11 Jan 2001",
-      "12 Jan 2001",
-    ],
-    colors: [
-      colors.info,
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: "45%",
-        endingShape: "rounded",
-      },
-    },
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      }
-    },
-    yaxis: [
-      {
-        title: {
-          text: "Website Blog",
-          style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          },
-        },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
-      },
-      {
-        opposite: true,
-        title: {
-          text: "Social Media",
-          style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-          }
-        },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
-      }
-    ],
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 10,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default LineArea;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column-area.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column-area.tsx
deleted file mode 100644
index 2ccbf5bd..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column-area.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const LineColumnArea = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "TEAM A",
-      type: "column",
-      data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
-    },
-    {
-      name: "TEAM B",
-      type: "area",
-      data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
-    },
-    {
-      name: "TEAM C",
-      type: "line",
-      data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false
-      }
-    },
-    stroke: {
-      width: [0, 2, 5],
-      curve: "smooth",
-    },
-    plotOptions: {
-      bar: {
-        columnWidth: "50%"
-      },
-    },
-    fill: {
-      opacity: [0.85, 0.25, 1],
-      gradient: {
-        inverseColors: false,
-        shade: "light",
-        type: "vertical",
-        opacityFrom: 0.85,
-        opacityTo: 0.55,
-        stops: [0, 100, 100, 100],
-      }
-    },
-    labels: [
-      "01/01/2003",
-      "02/01/2003",
-      "03/01/2003",
-      "04/01/2003",
-      "05/01/2003",
-      "06/01/2003",
-      "07/01/2003",
-      "08/01/2003",
-      "09/01/2003",
-      "10/01/2003",
-      "11/01/2003",
-    ],
-    markers: {
-      size: 0,
-    },
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      }
-    },
-    yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      title: {
-        text: "Points",
-        style: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      min: 0,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-      shared: true,
-      intersect: false,
-      y: {
-        formatter: function (y: any) {
-          if (typeof y !== "undefined") {
-            return y.toFixed(0) + " points";
-          }
-          return y;
-        },
-      },
-    },
-    grid: getGridConfig(),
-
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 10,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default LineColumnArea;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column.tsx
deleted file mode 100644
index 782cca2f..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const LineColumn = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Website Blog",
-      type: "column",
-      data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160],
-    },
-    {
-      name: "Social Media",
-      type: "line",
-      data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    stroke: {
-      width: [0, 4],
-    },
-    dataLabels: {
-      enabled: true,
-      enabledOnSeries: [1],
-    },
-    labels: [
-      "01 Jan 2001",
-      "02 Jan 2001",
-      "03 Jan 2001",
-      "04 Jan 2001",
-      "05 Jan 2001",
-      "06 Jan 2001",
-      "07 Jan 2001",
-      "08 Jan 2001",
-      "09 Jan 2001",
-      "10 Jan 2001",
-      "11 Jan 2001",
-      "12 Jan 2001",
-    ],
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: "45%",
-        endingShape: "rounded",
-      }
-    },
-
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: [
-      {
-        title: {
-          text: "Website Blog",
-          style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          },
-        },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
-      },
-      {
-        opposite: true,
-        title: {
-          text: "Social Media",
-          style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          },
-        },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
-      }
-    ],
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 10,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default LineColumn;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/multiple-yaxis.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/multiple-yaxis.tsx
deleted file mode 100644
index 620883aa..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/multiple-yaxis.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-"use client";
-import React, { useState } from 'react';
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const MultipleYAxis = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const [options, setOptions] = useState<any>({
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      type: 'line',
-      stacked: false
-    },
-    dataLabels: {
-      enabled: false
-    },
-    stroke: {
-      width: [1, 1, 4]
-    },
-    title: {
-      text: 'XYZ - Stock Analysis (2009 - 2016)',
-      align: 'center',
-      offsetX: 0,
-      style: {
-        color: colors.primary,
-      }
-    },
-    xaxis: {
-      categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: [
-      {
-        min: 0,
-        seriesName: 'Income',
-        axisTicks: {
-          show: true,
-        },
-        axisBorder: {
-          show: true,
-          color: colors.primary,
-        },
-        labels: {
-          style: {
-            colors: colors.primary,
-          }
-        },
-        title: {
-          text: "Income (thousand crores)",
-          style: {
-            color: colors.success,
-          }
-        },
-      },
-      {
-        min: 0,
-        seriesName: 'Cashflow',
-        opposite: true,
-        axisTicks: {
-          show: true,
-        },
-        axisBorder: {
-          show: true,
-          color: colors.success
-        },
-        labels: {
-          style: {
-            colors: colors.success,
-          }
-        },
-        title: {
-          text: "Operating Cashflow (thousand crores)",
-          style: {
-            color: colors.success,
-          }
-        }
-      },
-      {
-        seriesName: 'Revenue',
-        opposite: true,
-        axisTicks: {
-          show: true,
-        },
-        axisBorder: {
-          show: true,
-          color: colors.warning
-        },
-        labels: {
-          style: {
-            colors: colors.primary
-          },
-        },
-        title: {
-          text: "Revenue (thousand crores)",
-          style: {
-            color: colors.primary
-          }
-        }
-      },
-    ],
-    grid: getGridConfig(),
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    legend: {
-      horizontalAlign: 'center',
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 10,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  });
-
-  const [series, setSeries] = useState([{
-    name: 'Income',
-    type: 'column',
-    data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
-  }, {
-    name: 'Cashflow',
-    type: 'column',
-    data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
-  }, {
-    name: 'Revenue',
-    type: 'line',
-    data: [20, 29, 37, 36, 44, 45, 50, 58]
-  }]);
-
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MultipleYAxis;
-
-
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/page.tsx
deleted file mode 100644
index 086148d0..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/page.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import LineColumn from "./line-column";
-import MultipleYAxis from "./multiple-yaxis";
-import LineArea from "./line-area";
-import LineColumnArea from "./line-column-area";
-
-const ComboChartPage = () => {
-  return (
-    <div className=" grid xl:grid-cols-2  grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Line & Column Charts</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineColumn />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Multiple Y-Axis Charts</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <MultipleYAxis />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Line & Area Charts</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineArea />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Line Column Area</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineColumnArea />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default ComboChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/basic-funnel.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/basic-funnel.tsx
deleted file mode 100644
index 4a7dba62..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/basic-funnel.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig } from "@/lib/appex-chart-options";
-
-const BasicFunnel = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Funnel Series",
-      data: [1380, 1100, 990, 880, 740, 548, 330, 200],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 0,
-        horizontal: true,
-        barHeight: "90%",
-        isFunnel: true,
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function (val: number, opt: any) {
-        return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val;
-      },
-      dropShadow: {
-        enabled: true,
-      },
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: colors.primary,
-    },
-    yaxis: {
-      show: false,
-    },
-    xaxis: {
-      categories: [
-        "Sourced",
-        "Screened",
-        "Assessed",
-        "HR Interview",
-        "Technical",
-        "Verify",
-        "Offered",
-        "Hired",
-      ],
-    },
-    legend: {
-      show: false,
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicFunnel;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/layout.tsx
deleted file mode 100644
index 585fbd2f..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const metadata = {
-  title: "Appex Funnel Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
-
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/page.tsx
deleted file mode 100644
index 5245378b..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicFunnel from "./basic-funnel";
-import PyramidChart from "./pyramid";
-
-
-const FunnelChartPage = () => {
-    return (
-        <div className="grid   grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Funnel Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicFunnel />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pyramid Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PyramidChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default FunnelChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/pyramid.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/pyramid.tsx
deleted file mode 100644
index a5d6fae6..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/pyramid.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig } from "@/lib/appex-chart-options";
-
-const PyramidChart = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "",
-      data: [200, 330, 548, 740, 880, 990, 1100, 1380],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 0,
-        horizontal: true,
-        distributed: true,
-        barHeight: "100%",
-        isFunnel: true,
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function (val: string, opt: any) {
-        return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val;
-      },
-      dropShadow: {
-        enabled: true,
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: [
-        colors.primary,
-        colors.info,
-        colors.primary,
-        colors.success,
-      ],
-    },
-    yaxis: {
-      show: false,
-    },
-    xaxis: {
-      categories: [
-        "Sweets",
-        "Processed Foods",
-        "Healthy Fats",
-        "Meat",
-        "Beans & Legumes",
-        "Dairy",
-        "Fruits & Vegetables",
-        "Grains",
-      ],
-    },
-
-    legend: {
-      show: false,
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default PyramidChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/basic-heatmap.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/basic-heatmap.tsx
deleted file mode 100644
index 97804675..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/basic-heatmap.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-interface YRange {
-  min: number;
-  max: number;
-}
-
-interface DataPoint {
-  x: string;
-  y: number;
-}
-function generateData(count: number, yrange: YRange): DataPoint[] {
-  var i = 0;
-  var series = [];
-  while (i < count) {
-    var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-    series.push({
-      x: x,
-      y: y,
-    });
-    i++;
-  }
-  return series;
-}
-
-const BasicHeatMap = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Metric1",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric2",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric3",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric4",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric5",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric6",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric7",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric8",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric9",
-      data: generateData(14, {
-        min: 0,
-        max: 90,
-      }),
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      width: 0,
-    },
-    tooltip: {
-      enabled: true,
-    },
-    colors: ["#008FFB"],
-    plotOptions: {
-      heatmap: {
-        radius: 4,
-      },
-    },
-    xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    grid: getGridConfig(),
-    legend: {
-      show: false,
-    },
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicHeatMap;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/color-range.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/color-range.tsx
deleted file mode 100644
index a29aecb9..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/color-range.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-interface YRange {
-  min: number;
-  max: number;
-}
-
-interface DataPoint {
-  x: string;
-  y: number;
-}
-function generateData(count: number, yrange: YRange): DataPoint[] {
-  var i = 0;
-  var series = [];
-  while (i < count) {
-    var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-    series.push({
-      x: x,
-      y: y,
-    });
-    i++;
-  }
-  return series;
-}
-const ColorRange = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-
-  const series = [
-    {
-      name: "W1",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W2",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W3",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W4",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W5",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W6",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W7",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W8",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W9",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W10",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W11",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W12",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W13",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W14",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W15",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-  ];
-  const options: any = {
-    chart: {
-      height: 450,
-      type: "heatmap",
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    colors: [
-      "#F3B415",
-      "#F27036",
-      "#663F59",
-      "#6A6E94",
-      "#4E88B4",
-      "#00A7C6",
-      "#18D8D8",
-      "#A9D794",
-    ],
-    plotOptions: {
-      heatmap: {
-        colorScale: {
-          inverse: true,
-        }
-      }
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    grid: getGridConfig(),
-    xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ColorRange;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/layout.tsx
deleted file mode 100644
index 31bfba38..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Heatmap Chart,",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/mulitple-colors-heatmap.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/mulitple-colors-heatmap.tsx
deleted file mode 100644
index 06469319..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/mulitple-colors-heatmap.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-interface YRange {
-  min: number;
-  max: number;
-}
-
-interface DataPoint {
-  x: string;
-  y: number;
-}
-function generateData(count: number, yrange: YRange): DataPoint[] {
-  var i = 0;
-  var series = [];
-  while (i < count) {
-    var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-    series.push({
-      x: x,
-      y: y,
-    });
-    i++;
-  }
-  return series;
-}
-const MultipleColorsHeatMap = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "W1",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W2",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W3",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W4",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W5",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W6",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W7",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W8",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W9",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "W10",
-      data: generateData(15, {
-        min: 0,
-        max: 90,
-      }),
-    },
-  ];
-  const options: any = {
-    chart: {
-      type: "heatmap",
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      width: 0,
-    },
-    tooltip: {
-      fillSeriesColor: colors.primary,
-    },
-    plotOptions: {
-      heatmap: {
-        radius: 4,
-        colorScale: {
-          ranges: [
-            {
-              from: -30,
-              to: 5,
-              color: colors.primary,
-              name: "low",
-            },
-            {
-              from: 6,
-              to: 20,
-              color: colors.info,
-              name: "medium",
-            },
-            {
-              from: 21,
-              to: 45,
-              color: colors.success,
-              name: "high",
-            },
-          ],
-        },
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    xaxis: {
-      type: "category",
-      categories: [
-        "10:00",
-        "10:30",
-        "11:00",
-        "11:30",
-        "12:00",
-        "12:30",
-        "01:00",
-        "01:30",
-        "02:00",
-        "02:30",
-        "03:00",
-        "03:30",
-        "04:00",
-        "04:30",
-        "05:00",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    legend: {
-      show: false,
-    },
-    grid: {
-      show: false,
-    }
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MultipleColorsHeatMap;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/page.tsx
deleted file mode 100644
index cf93e71e..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicHeatMap from "./basic-heatmap";
-import MultipleColorsHeatMap from "./mulitple-colors-heatmap";
-import RoundedHeatMap from "./rounded-heatmap";
-
-const HeatMapChartPage = () => {
-    return (
-        <div className="grid grid-cols-1   gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Heat Map Chart(Single Color)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicHeatMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Heatmap - Multiple Colors</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleColorsHeatMap />
-                </CardContent>
-            </Card>
-
-            <Card>
-                <CardHeader>
-                    <CardTitle>Rounded(range without shades)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RoundedHeatMap />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default HeatMapChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/rounded-heatmap.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/rounded-heatmap.tsx
deleted file mode 100644
index a6e12e4e..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/rounded-heatmap.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-interface YRange {
-  min: number;
-  max: number;
-}
-
-interface DataPoint {
-  x: string;
-  y: number;
-}
-function generateData(count: number, yrange: YRange): DataPoint[] {
-  var i = 0;
-  var series = [];
-  while (i < count) {
-    var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-    series.push({
-      x: x,
-      y: y,
-    });
-    i++;
-  }
-  return series;
-}
-const RoundedHeatMap = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Metric1",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric2",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric3",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric4",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric5",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric6",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric7",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric8",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-    {
-      name: "Metric8",
-      data: generateData(20, {
-        min: 0,
-        max: 90,
-      }),
-    },
-  ];
-  const options: any = {
-    chart: {
-      height: 450,
-      type: "heatmap",
-      toolbar: {
-        show: false,
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-
-    ],
-    plotOptions: {
-      heatmap: {
-        radius: 30,
-        enableShades: false,
-        colorScale: {
-          ranges: [
-            {
-              from: 0,
-              to: 50,
-              color: "#008FFB",
-            },
-            {
-              from: 51,
-              to: 100,
-              color: "#00E396",
-            },
-          ],
-        },
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      style: {
-        colors: ["#fff"],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      type: "category",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    stroke: {
-      width: 0,
-    },
-    grid: {
-      show: false,
-    },
-    legend: {
-      position: "bottom",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default RoundedHeatMap;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/brush-linechart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/brush-linechart.tsx
deleted file mode 100644
index 64d76b32..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/brush-linechart.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-interface DataRange {
-  min: number;
-  max: number;
-}
-const BrushLinechart = () => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  function generateDayWiseTimeSeries(baseval: number, count: number, yrange: DataRange) {
-    var i = 0;
-    var series: [number, number][] = [];
-    while (i < count) {
-      var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-      series.push([x, y]);
-      baseval += 86400000;
-      i++;
-    }
-    return series;
-  }
-
-  var data = generateDayWiseTimeSeries(new Date("11 Feb 2017").getTime(), 185, {
-    min: 30,
-    max: 90,
-  });
-  const series = [
-    {
-      data: data,
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      id: "chart2",
-
-      height: 230,
-      toolbar: {
-        autoSelected: "pan",
-        show: false,
-      },
-    },
-    colors: [
-      colors.primary,
-    ],
-    grid: getGridConfig(),
-    stroke: {
-      width: 3,
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    fill: {
-      opacity: 1,
-    },
-    markers: {
-      size: 0,
-    },
-    xaxis: {
-      type: "datetime",
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    yaxis: {
-      tickAmount: 2,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-
-  const seriesLine = [
-    {
-      data: data,
-    },
-  ];
-
-  const optionsLine: any = {
-    chart: {
-      id: "chart1",
-      height: 130,
-      brush: {
-        target: "chart2",
-        enabled: true,
-      },
-      selection: {
-        enabled: true,
-        xaxis: {
-          min: new Date("19 Jun 2017").getTime(),
-          max: new Date("14 Aug 2017").getTime(),
-        },
-      },
-    },
-    colors: [colors.info],
-    fill: {
-      type: "gradient",
-      gradient: {
-        opacityFrom: 0.91,
-        opacityTo: 0.1,
-      },
-    },
-    xaxis: {
-      type: "datetime",
-      tooltip: {
-        enabled: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: {
-      tickAmount: 2,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-  };
-
-  return (
-    <div id="wrapper">
-      <div id="chart-line2">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height={230}
-          width={"100%"}
-        />
-      </div>
-      <div id="chart-line">
-        <Chart
-          options={optionsLine}
-          series={seriesLine}
-          type="area"
-          height={130}
-          width={"100%"}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default BrushLinechart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/dashed-linechart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/dashed-linechart.tsx
deleted file mode 100644
index 18e0d85c..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/dashed-linechart.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const DashedLineChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Sesson Duration",
-      data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10],
-    },
-    {
-      name: "Page Views",
-      data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35],
-    },
-    {
-      name: "Total Visits",
-      data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      width: [5, 7, 5],
-      curve: "straight",
-      dashArray: [0, 8, 5],
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default DashedLineChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/gradiant-linechart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/gradiant-linechart.tsx
deleted file mode 100644
index d2b1cf3a..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/gradiant-linechart.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const GradiantLineChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    forecastDataPoints: {
-      count: 3,
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    fill: {
-      type: "gradient",
-      gradient: {
-        shade: "dark",
-        gradientToColors: [
-          colors.primary,
-        ],
-        shadeIntensity: 1,
-        type: "horizontal",
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [0, 100, 100, 100],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default GradiantLineChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/layout.tsx
deleted file mode 100644
index 3d77b5aa..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Line Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-chart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-chart.tsx
deleted file mode 100644
index 0b28a5ad..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-chart.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const BasicLineChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicLineChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-annotations.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-annotations.tsx
deleted file mode 100644
index 96252ecb..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-annotations.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const LineWithAnnonotations = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [7800.0, 8100.0, 8400.0, 9000.0, 9300.0, 9600.0],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "straight",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [
-        "Jan",
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-        "Nov",
-        "Dec",
-      ],
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-    },
-    annotations: {
-      yaxis: [
-        {
-          y: 8200,
-          borderColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          label: {
-            borderColor: 'transparent',
-            style: {
-              color: "#fff",
-              background: colors.primary,
-            },
-            text: "Support",
-          },
-        },
-        {
-          y: 8600,
-          y2: 9000,
-          borderColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          fillColor: colors.primary,
-          label: {
-            borderColor: 'transparent',
-            style: {
-              fontSize: "10px",
-              color: colors.success,
-              background: colors.secondary,
-            },
-            text: "Y-axis range",
-          },
-        },
-      ],
-      xaxis: [
-        {
-          x: new Date("23 Nov 2017").getTime(),
-          strokeDashArray: 0,
-          borderColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          label: {
-            borderColor: 'transparent',
-            style: {
-              color: colors.success,
-              background: 'transparent',
-            },
-            text: "Anno Test",
-          },
-        },
-        {
-          x: new Date("26 Nov 2017").getTime(),
-          x2: new Date("28 Nov 2017").getTime(),
-          fillColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          opacity: 0.4,
-          label: {
-            borderColor: 'transparent',
-            style: {
-              fontSize: "10px",
-              color: colors.warning,
-              background: 'transparent',
-            },
-            offsetY: -10,
-            text: "X-axis range",
-          },
-        },
-      ],
-      points: [
-        {
-          x: new Date("01 Dec 2017").getTime(),
-          y: 8607.55,
-          marker: {
-            size: 8,
-            fillColor: colors.info,
-            strokeColor: "red",
-            radius: 2,
-            cssClass: "apexcharts-custom-class",
-          },
-          label: {
-            borderColor: 'transparent',
-            offsetY: 0,
-            style: {
-              color: colors.info,
-              background: colors.success,
-            },
-
-            text: "Point Annotation",
-          },
-        },
-        {
-          x: new Date("08 Dec 2017").getTime(),
-          y: 9340.85,
-          marker: {
-            size: 0,
-          },
-        },
-      ],
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default LineWithAnnonotations;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-datalabels.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-datalabels.tsx
deleted file mode 100644
index bb94d22e..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-datalabels.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const LineChartWithDataLabels = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [28, 29, 33, 36, 32, 32, 33],
-    },
-    {
-      data: [12, 11, 14, 18, 17, 13, 13],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: true,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.danger,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      },
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default LineChartWithDataLabels;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/missingdata-linechart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/missingdata-linechart.tsx
deleted file mode 100644
index eb64ae52..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/missingdata-linechart.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const MissingDataLineChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Peter",
-      data: [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
-    },
-    {
-      name: "Johnny",
-      data: [
-        10,
-        15,
-        null,
-        12,
-        null,
-        10,
-        12,
-        15,
-        null,
-        null,
-        12,
-        null,
-        14,
-        null,
-        null,
-        null,
-      ],
-    },
-    {
-      name: "David",
-      data: [
-        null,
-        null,
-        null,
-        null,
-        3,
-        4,
-        1,
-        3,
-        4,
-        6,
-        7,
-        9,
-        5,
-        null,
-        null,
-        null,
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      width: [5, 5, 4],
-      curve: "straight",
-    },
-    zoom: {
-      enabled: false,
-    },
-    animations: {
-      enabled: false,
-    },
-    colors: [
-      colors.primary,
-      colors.danger,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    xaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      },
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MissingDataLineChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx
deleted file mode 100644
index ea603e09..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicLineChart from "./line-chart";
-import LineChartWithDataLabels from "./line-with-datalabels";
-import ZoomableTimeSeries from "./zoomable-timeseries";
-import LineWithAnnonotations from "./line-with-annotations";
-import DashedLineChart from "./dashed-linechart";
-import StepLineChart from "./step-linechart";
-import GradiantLineChart from "./gradiant-linechart";
-import MissingDataLineChart from "./missingdata-linechart";
-import BrushLineChart from "./brush-linechart";
-import SynchronizedChart from "./synchronized-chart";
-
-const LineChartPage = () => {
-  return (
-    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6 ">
-      <Card>
-        <CardHeader>
-          <CardTitle>Basic Line Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BasicLineChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Line with Data Labels</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineChartWithDataLabels />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Zoomable Timeseries</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ZoomableTimeSeries />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Line with Annotations</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineWithAnnonotations />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Dashed Line</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DashedLineChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Stepline Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <StepLineChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Gradient Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <GradiantLineChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Missing Data/ Null Value Charts</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <MissingDataLineChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Brush Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BrushLineChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Syncing Charts</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SynchronizedChart />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default LineChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/realttime-linechart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/realttime-linechart.tsx
deleted file mode 100644
index b4c928bb..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/realttime-linechart.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-import { useState } from "react";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getXAxisConfig } from "@/lib/appex-chart-options";
-
-const RealTimeLineChart = ({ height = 300 }) => {
-  const [chartData, setChartData] = useState({
-    series: [{ data: [10, 41, 35, 51, 49, 62, 69, 91, 100] }],
-  });
-
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      animations: {
-        enabled: true,
-        easing: "linear",
-        dynamicAnimation: {
-          speed: 1000,
-        },
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-    },
-    markers: {
-      size: 0,
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: getXAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    xaxis: getXAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-
-  return (
-    <>
-      <Chart
-        options={options}
-        series={chartData.series}
-        type="line"
-        height={height}
-        width={"100%"}
-      />
-    </>
-  );
-};
-
-export default RealTimeLineChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/step-linechart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/step-linechart.tsx
deleted file mode 100644
index 4c7a2dbc..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/step-linechart.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig
-} from "@/lib/appex-chart-options";
-
-const StepLineChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "stepline",
-    },
-    colors: [
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    markers: {
-      hover: {
-        sizeOffset: 4,
-      },
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default StepLineChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/synchronized-chart.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/synchronized-chart.tsx
deleted file mode 100644
index 88b6f35c..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/synchronized-chart.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getLabel, getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
-interface DataRange {
-  min: number;
-  max: number;
-}
-const SynchronizedChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-  function generateDayWiseTimeSeries(baseval: number, count: number, yrange: DataRange) {
-    var i = 0;
-    var series: [number, number][] = [];
-    while (i < count) {
-      var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-      series.push([x, y]);
-      baseval += 86400000;
-      i++;
-    }
-    return series;
-  }
-
-  const series = [
-    {
-      data: generateDayWiseTimeSeries(new Date("11 Feb 2017").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      id: "fb",
-      group: "social",
-
-      height: 160,
-    },
-    colors: [
-      colors.primary,
-    ],
-    grid: getGridConfig(),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-  };
-  const seriesLine2 = [
-    {
-      data: generateDayWiseTimeSeries(new Date("11 Feb 2017").getTime(), 20, {
-        min: 10,
-        max: 30,
-      }),
-    },
-  ];
-
-  const optionsLine2: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      id: "tw",
-      group: "social",
-
-      height: 160,
-    },
-    colors: [
-      colors.danger,
-    ],
-    grid: getGridConfig(),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-  };
-
-  const seriesArea = [
-    {
-      data: generateDayWiseTimeSeries(new Date("11 Feb 2017").getTime(), 20, {
-        min: 10,
-        max: 60,
-      }),
-    },
-  ];
-  const optionsArea: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      id: "yt",
-      group: "social",
-    },
-    stroke: {
-      curve: "straight",
-      width: 3,
-    },
-
-    markers: {
-      size: 4,
-      hover: {
-        size: 6,
-      },
-    },
-    grid: getGridConfig(),
-    colors: [colors.info],
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    yaxis: {
-      tickAmount: 2,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-  };
-
-  return (
-    <div id="wrapper">
-      <div id="chart-line">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height={160}
-          width={"100%"}
-        />
-      </div>
-      <div id="chart-line2">
-        <Chart
-          options={optionsLine2}
-          series={seriesLine2}
-          type="line"
-          height={160}
-          width={"100%"}
-        />
-      </div>
-      <div id="chart-area">
-        <Chart
-          options={optionsArea}
-          series={seriesArea}
-          type="area"
-          height={160}
-          width={"100%"}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default SynchronizedChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/zoomable-timeseries.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/zoomable-timeseries.tsx
deleted file mode 100644
index 0eb1d744..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/zoomable-timeseries.tsx
+++ /dev/null
@@ -1,601 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
-
-const ZoomableTimeSeries = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "XYZ MOTORS",
-      data: [
-        {
-          x: new Date("2018-01-12").getTime(),
-          y: 140,
-        },
-        {
-          x: new Date("2018-01-13").getTime(),
-          y: 147,
-        },
-        {
-          x: new Date("2018-01-14").getTime(),
-          y: 150,
-        },
-        {
-          x: new Date("2018-01-15").getTime(),
-          y: 154,
-        },
-        {
-          x: new Date("2018-01-16").getTime(),
-          y: 160,
-        },
-        {
-          x: new Date("2018-01-17").getTime(),
-          y: 165,
-        },
-        {
-          x: new Date("2018-01-18").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-01-20").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-01-21").getTime(),
-          y: 164,
-        },
-        {
-          x: new Date("2018-01-22").getTime(),
-          y: 160,
-        },
-        {
-          x: new Date("2018-01-23").getTime(),
-          y: 165,
-        },
-        {
-          x: new Date("2018-01-24").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-01-25").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-01-26").getTime(),
-          y: 177,
-        },
-        {
-          x: new Date("2018-01-27").getTime(),
-          y: 173,
-        },
-        {
-          x: new Date("2018-01-28").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-01-29").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-01-30").getTime(),
-          y: 158,
-        },
-        {
-          x: new Date("2018-02-01").getTime(),
-          y: 153,
-        },
-        {
-          x: new Date("2018-02-02").getTime(),
-          y: 149,
-        },
-        {
-          x: new Date("2018-02-03").getTime(),
-          y: 144,
-        },
-        {
-          x: new Date("2018-02-05").getTime(),
-          y: 150,
-        },
-        {
-          x: new Date("2018-02-06").getTime(),
-          y: 155,
-        },
-        {
-          x: new Date("2018-02-07").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-02-08").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-02-09").getTime(),
-          y: 156,
-        },
-        {
-          x: new Date("2018-02-11").getTime(),
-          y: 151,
-        },
-        {
-          x: new Date("2018-02-12").getTime(),
-          y: 157,
-        },
-        {
-          x: new Date("2018-02-13").getTime(),
-          y: 161,
-        },
-        {
-          x: new Date("2018-02-14").getTime(),
-          y: 150,
-        },
-        {
-          x: new Date("2018-02-15").getTime(),
-          y: 154,
-        },
-        {
-          x: new Date("2018-02-16").getTime(),
-          y: 160,
-        },
-        {
-          x: new Date("2018-02-17").getTime(),
-          y: 165,
-        },
-        {
-          x: new Date("2018-02-18").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-02-20").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-02-21").getTime(),
-          y: 164,
-        },
-        {
-          x: new Date("2018-02-22").getTime(),
-          y: 160,
-        },
-        {
-          x: new Date("2018-02-23").getTime(),
-          y: 165,
-        },
-        {
-          x: new Date("2018-02-24").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-02-25").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-02-26").getTime(),
-          y: 177,
-        },
-        {
-          x: new Date("2018-02-27").getTime(),
-          y: 173,
-        },
-        {
-          x: new Date("2018-02-28").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-02-29").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-02-30").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-03-01").getTime(),
-          y: 158,
-        },
-        {
-          x: new Date("2018-03-02").getTime(),
-          y: 152,
-        },
-        {
-          x: new Date("2018-03-03").getTime(),
-          y: 147,
-        },
-        {
-          x: new Date("2018-03-05").getTime(),
-          y: 142,
-        },
-        {
-          x: new Date("2018-03-06").getTime(),
-          y: 147,
-        },
-        {
-          x: new Date("2018-03-07").getTime(),
-          y: 151,
-        },
-        {
-          x: new Date("2018-03-08").getTime(),
-          y: 155,
-        },
-        {
-          x: new Date("2018-03-09").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-03-11").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-03-12").getTime(),
-          y: 157,
-        },
-        {
-          x: new Date("2018-03-13").getTime(),
-          y: 161,
-        },
-        {
-          x: new Date("2018-03-14").getTime(),
-          y: 166,
-        },
-        {
-          x: new Date("2018-03-15").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-03-16").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-03-17").getTime(),
-          y: 177,
-        },
-        {
-          x: new Date("2018-03-18").getTime(),
-          y: 181,
-        },
-        {
-          x: new Date("2018-03-20").getTime(),
-          y: 178,
-        },
-        {
-          x: new Date("2018-03-21").getTime(),
-          y: 173,
-        },
-        {
-          x: new Date("2018-03-22").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-03-23").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-03-24").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-03-25").getTime(),
-          y: 164,
-        },
-        {
-          x: new Date("2018-03-26").getTime(),
-          y: 168,
-        },
-        {
-          x: new Date("2018-03-27").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-03-28").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-03-29").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-03-30").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-04-01").getTime(),
-          y: 158,
-        },
-        {
-          x: new Date("2018-04-02").getTime(),
-          y: 152,
-        },
-        {
-          x: new Date("2018-04-03").getTime(),
-          y: 147,
-        },
-        {
-          x: new Date("2018-04-05").getTime(),
-          y: 142,
-        },
-        {
-          x: new Date("2018-04-06").getTime(),
-          y: 147,
-        },
-        {
-          x: new Date("2018-04-07").getTime(),
-          y: 151,
-        },
-        {
-          x: new Date("2018-04-08").getTime(),
-          y: 155,
-        },
-        {
-          x: new Date("2018-04-09").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-04-11").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-04-12").getTime(),
-          y: 157,
-        },
-        {
-          x: new Date("2018-04-13").getTime(),
-          y: 161,
-        },
-        {
-          x: new Date("2018-04-14").getTime(),
-          y: 166,
-        },
-        {
-          x: new Date("2018-04-15").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-04-16").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-04-17").getTime(),
-          y: 177,
-        },
-        {
-          x: new Date("2018-04-18").getTime(),
-          y: 181,
-        },
-        {
-          x: new Date("2018-04-20").getTime(),
-          y: 178,
-        },
-        {
-          x: new Date("2018-04-21").getTime(),
-          y: 173,
-        },
-        {
-          x: new Date("2018-04-22").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-04-23").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-04-24").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-04-25").getTime(),
-          y: 164,
-        },
-        {
-          x: new Date("2018-04-26").getTime(),
-          y: 168,
-        },
-        {
-          x: new Date("2018-04-27").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-04-28").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-04-29").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-04-30").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-05-01").getTime(),
-          y: 158,
-        },
-        {
-          x: new Date("2018-05-02").getTime(),
-          y: 152,
-        },
-        {
-          x: new Date("2018-05-03").getTime(),
-          y: 147,
-        },
-        {
-          x: new Date("2018-05-04").getTime(),
-          y: 142,
-        },
-        {
-          x: new Date("2018-05-05").getTime(),
-          y: 147,
-        },
-        {
-          x: new Date("2018-05-07").getTime(),
-          y: 151,
-        },
-        {
-          x: new Date("2018-05-08").getTime(),
-          y: 155,
-        },
-        {
-          x: new Date("2018-05-09").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-05-11").getTime(),
-          y: 162,
-        },
-        {
-          x: new Date("2018-05-12").getTime(),
-          y: 157,
-        },
-        {
-          x: new Date("2018-05-13").getTime(),
-          y: 161,
-        },
-        {
-          x: new Date("2018-05-14").getTime(),
-          y: 166,
-        },
-        {
-          x: new Date("2018-05-15").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-05-16").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-05-17").getTime(),
-          y: 177,
-        },
-        {
-          x: new Date("2018-05-18").getTime(),
-          y: 181,
-        },
-        {
-          x: new Date("2018-05-20").getTime(),
-          y: 178,
-        },
-        {
-          x: new Date("2018-05-21").getTime(),
-          y: 173,
-        },
-        {
-          x: new Date("2018-05-22").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-05-23").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-05-24").getTime(),
-          y: 159,
-        },
-        {
-          x: new Date("2018-05-25").getTime(),
-          y: 164,
-        },
-        {
-          x: new Date("2018-05-26").getTime(),
-          y: 168,
-        },
-        {
-          x: new Date("2018-05-27").getTime(),
-          y: 172,
-        },
-        {
-          x: new Date("2018-05-28").getTime(),
-          y: 169,
-        },
-        {
-          x: new Date("2018-05-29").getTime(),
-          y: 163,
-        },
-        {
-          x: new Date("2018-05-30").getTime(),
-          y: 162,
-        },
-      ],
-    },
-  ];
-  const options: any = {
-    chart: {
-      zoom: {
-        type: "x",
-        enabled: true,
-        autoScaleYaxis: true,
-      },
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    zoom: {
-      type: "x",
-      enabled: true,
-      autoScaleYaxis: true,
-    },
-    colors: [
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    fill: {
-      type: "gradient",
-      gradient: {
-        shadeIntensity: 1,
-        inverseColors: false,
-        opacityFrom: 0.5,
-        opacityTo: 0,
-        stops: [0, 90, 100],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ZoomableTimeSeries;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-donut.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-donut.tsx
deleted file mode 100644
index 2f36ea31..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-donut.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const BasicDonut = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [44, 55, 41, 17, 15];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
-    dataLabels: {
-      enabled: true,
-      style: {
-        fontSize: "20px",
-      },
-    },
-    stroke: {
-      width: 0
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.secondary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="donut"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicDonut;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-pie.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-pie.tsx
deleted file mode 100644
index 6a23354c..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-pie.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const BasicPie = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-  const series = [44, 55, 13, 43, 22];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    stroke: {
-      width: 0
-    },
-    labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
-    dataLabels: {
-      enabled: true,
-      style: {
-        fontSize: "20px",
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.secondary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="pie"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicPie;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/donut-pattern.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/donut-pattern.tsx
deleted file mode 100644
index 771a445c..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/donut-pattern.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const DonutPattern = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [44, 55, 41, 17, 15];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      dropShadow: {
-        enabled: true,
-        color: "#111",
-        top: -1,
-        left: 3,
-        blur: 3,
-        opacity: 0.2,
-      },
-    },
-    stroke: {
-      width: 0,
-    },
-    labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
-    dataLabels: {
-      dropShadow: {
-        blur: 3,
-        opacity: 0.8,
-      },
-    },
-    fill: {
-      type: "pattern",
-      opacity: 1,
-      pattern: {
-        enabled: true,
-        style: [
-          "verticalLines",
-          "squares",
-          "horizontalLines",
-          "circles",
-          "slantedLines",
-        ],
-      },
-      colors: [
-        colors.primary,
-        colors.info,
-        colors.primary,
-        colors.success,
-        colors.secondary,
-        colors.danger,
-
-      ],
-    },
-    states: {
-      hover: {
-        filter: "none",
-      },
-    },
-    plotOptions: {
-      pie: {
-        donut: {
-          labels: {
-            show: false
-          }
-        }
-      },
-    },
-    theme: {
-      palette: "palette2",
-    },
-
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-
-    legend: {
-      show: true,
-      position: "bottom",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="donut"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default DonutPattern;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/gradiant-donut.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/gradiant-donut.tsx
deleted file mode 100644
index e408d3d1..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/gradiant-donut.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const GradiantDonut = ({ height = 350 }) => {
-
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [44, 55, 41, 17, 15];
-
-    const options: any = {
-        chart: {
-            toolbar: {
-                show: false,
-            }
-        },
-        plotOptions: {
-            pie: {
-                startAngle: -90,
-                endAngle: 270
-            }
-        },
-        dataLabels: {
-            enabled: false
-        },
-        fill: {
-            type: 'gradient',
-        },
-        legend: {
-            position: 'bottom',
-            formatter: function (val: number, opts: any) {
-                return val + " - " + opts.w.globals.series[opts.seriesIndex]
-            },
-            labels: {
-                colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
-            },
-            itemMargin: {
-                horizontal: 5,
-                vertical: 5,
-            },
-            markers: {
-                width: 10,
-                height: 10,
-                radius: 10,
-                offsetX: config.isRtl ? 5 : -5
-            }
-        },
-        stroke: {
-            width: 0
-        },
-        tooltip: {
-            theme: mode === "dark" || mode === "system" ? "dark" : "light",
-        },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="donut"
-            height={height}
-            width={"100%"}
-        />
-    );
-};
-
-export default GradiantDonut;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/image-pie.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/image-pie.tsx
deleted file mode 100644
index 3b02bf98..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/image-pie.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const ImagePie = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [44, 33, 54, 45];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
-    dataLabels: {
-      enabled: true,
-      style: {
-        fontSize: "20px",
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.secondary,
-    ],
-    fill: {
-      type: "image",
-      opacity: 0.85,
-      image: {
-        src: [
-          "/images/chart/chart-5.avif",
-          "/images/chart/chart-2.jpg",
-          "/images/chart/chart-3.jpg",
-          "/images/chart/chart-1.png",
-        ],
-        width: 25,
-        imagedHeight: 25,
-      },
-    },
-    stroke: {
-      width: 4,
-    },
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="pie"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ImagePie;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/layout.tsx
deleted file mode 100644
index 9578810a..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Pie Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/mono-chrome.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/mono-chrome.tsx
deleted file mode 100644
index 41335148..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/mono-chrome.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const MonoChrome = ({ height = 350 }) => {
-
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [25, 15, 44, 55, 41, 17];
-    const options: any = {
-        chart: {
-            toolbar: {
-                show: false,
-            }
-        },
-        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-        theme: {
-            monochrome: {
-                enabled: true
-            }
-        },
-        plotOptions: {
-            pie: {
-                dataLabels: {
-                    offset: -5
-                }
-            }
-        },
-        dataLabels: {
-            formatter(val: number, opts: any) {
-                const name = opts.w.globals.labels[opts.seriesIndex]
-                return [name, val.toFixed(1) + '%']
-            }
-        },
-        fill: {
-            colors: [
-                colors.primary
-            ]
-        },
-        tooltip: {
-            theme: mode === "dark" ? "dark" : "light",
-        },
-        stroke: {
-            width: 0
-        },
-        legend: {
-            show: false
-        },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="pie"
-            height={height}
-            width={"100%"}
-        />
-    );
-};
-
-export default MonoChrome;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/page.tsx
deleted file mode 100644
index 49cd0874..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/page.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicPie from "./basic-pie";
-import BasicDonut from "./basic-donut";
-import MonoChrome from "./mono-chrome";
-import GradiantDonut from "./gradiant-donut";
-import SemiDonut from "./semi-donut";
-import DonutPattern from "./donut-pattern";
-import ImagePie from "./image-pie";
-
-
-const PieChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicPie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicDonut />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Monochrome Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MonoChrome />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Gradient Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GradiantDonut />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Semi Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <SemiDonut />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Patterned Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DonutPattern />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie with Image</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ImagePie />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default PieChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/semi-donut.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/semi-donut.tsx
deleted file mode 100644
index 5769378e..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/semi-donut.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const SemiDonut = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [44, 55, 41, 17, 15];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    labels: [
-      "Monday",
-      "Tuesday",
-      "Wednesday",
-      "Thursday",
-      "Friday",
-      "Saturday",
-    ],
-    theme: {
-      monochrome: {
-        enabled: true,
-      },
-    },
-    plotOptions: {
-      pie: {
-        startAngle: -90,
-        endAngle: 90,
-        offsetY: 10,
-      },
-    },
-    dataLabels: {
-      formatter(val: number, opts: any) {
-        const name = opts.w.globals.labels[opts.seriesIndex];
-        return [name, val.toFixed(1) + "%"];
-      },
-    },
-    stroke: {
-      width: 0
-    },
-    fill: {
-      colors: [
-        colors.primary,
-        colors.info,
-        colors.success,
-        colors.primary,
-        colors.secondary,
-      ],
-    },
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    legend: {
-      show: true,
-      position: "bottom",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="donut"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default SemiDonut;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/basic-polar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/basic-polar.tsx
deleted file mode 100644
index 98c5e22b..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/basic-polar.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const BasicPolar = ({ height = 400 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [14, 23, 21, 17, 15, 10, 12, 17, 21];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
-    fill: {
-      opacity: 0.5,
-    },
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    plotOptions: {
-      polarArea: {
-        rings: {
-          strokeWidth: 1,
-          strokeColor: 'transparent',
-        },
-        spokes: {
-          strokeWidth: 1,
-          connectorColors: 'transparent',
-        },
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    legend: {
-      position: "bottom",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="polarArea"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicPolar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/layout.tsx
deleted file mode 100644
index 739b231e..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Polar Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/mono-chrome.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/mono-chrome.tsx
deleted file mode 100644
index 3b4f5d56..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/mono-chrome.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getXAxisConfig } from "@/lib/appex-chart-options";
-
-const MonChromePolarArea = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [42, 47, 52, 58, 65];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    labels: ["Rose A", "Rose B", "Rose C", "Rose D", "Rose E"],
-    fill: {
-      opacity: 1,
-    },
-    stroke: {
-      width: 1,
-      colors: undefined,
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: {
-      show: false,
-    },
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    plotOptions: {
-      polarArea: {
-        rings: {
-          strokeWidth: 0,
-        },
-        spokes: {
-          strokeWidth: 0,
-        },
-      },
-    },
-    theme: {
-      monochrome: {
-        enabled: true,
-        shadeTo: "light",
-        shadeIntensity: 0.6,
-      },
-    },
-    legend: {
-      position: "bottom",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="polarArea"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MonChromePolarArea;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/page.tsx
deleted file mode 100644
index 10685741..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicPolar from "./basic-polar";
-import MonChromePolarArea from "./mono-chrome";
-
-const PieChartPage = () => {
-    return (
-        <div className="grid  grid-cols-1 gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Polar Area Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicPolar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Polar Area Monochrome</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MonChromePolarArea />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default PieChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/basic-radar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/basic-radar.tsx
deleted file mode 100644
index 419671a1..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/basic-radar.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
-
-const BasicRadar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Series 1",
-      data: [80, 50, 30, 40, 100, 20],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    colors: [
-      colors.primary,
-    ],
-    fill: {
-      type: "gradient",
-      colors: colors.primary,
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.2,
-        opacityTo: 0.1,
-        stops: [50, 100, 0],
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: ["January", "February", "March", "April", "May", "June"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      radar: {
-        size: undefined,
-        offsetX: 0,
-        offsetY: 0,
-        polygons: {
-          strokeColors: 'transparent',
-          strokeWidth: 0.5,
-          connectorColors: 'transparent',
-        },
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicRadar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/layout.tsx
deleted file mode 100644
index b240a5ed..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Radar Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/multiple-series-radar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/multiple-series-radar.tsx
deleted file mode 100644
index daf89a89..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/multiple-series-radar.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const MultipleSeriesRadar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Series 1",
-      data: [80, 50, 30, 40, 100, 20],
-    },
-    {
-      name: "Series 2",
-      data: [20, 30, 40, 80, 20, 80],
-    },
-    {
-      name: "Series 3",
-      data: [44, 76, 78, 13, 43, 10],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      dropShadow: {
-        enabled: true,
-        blur: 1,
-        left: 1,
-        top: 1,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-
-    plotOptions: {
-      radar: {
-        size: undefined,
-        offsetX: 0,
-        offsetY: 0,
-        polygons: {
-          strokeColors: 'transparent',
-          strokeWidth: 0.5,
-          connectorColors: 'transparent',
-        },
-      },
-    },
-    fill: {
-      type: "gradient",
-      colors: [
-        colors.primary,
-        colors.info,
-        colors.success,
-      ],
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.2,
-        opacityTo: 0.1,
-        stops: [50, 100, 0],
-      },
-    },
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      show: true,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MultipleSeriesRadar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/page.tsx
deleted file mode 100644
index 8ea25276..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/page.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicRadar from "./basic-radar";
-import MultipleSeriesRadar from "./multiple-series-radar";
-import RadarPolygonFill from "./radar-polygon-fill";
-
-const RadarChartPage = () => {
-    return (
-        <div className="grid grid-cols-2  gap-6 ">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Radar Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicRadar />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Radar Chart - Multiple series</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <MultipleSeriesRadar />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Radar with Polygon-fill</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <RadarPolygonFill />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
-};
-
-export default RadarChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/radar-polygon-fill.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/radar-polygon-fill.tsx
deleted file mode 100644
index 4339124b..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/radar-polygon-fill.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const RadarPolygonFill = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Series 1",
-      data: [20, 100, 40, 30, 50, 80, 33],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: true,
-    },
-    colors: [colors.info],
-    fill: {
-      type: "solid",
-      colors: ["#1A73E8"],
-    },
-    markers: {
-      size: 4,
-      colors: ["#000"],
-      strokeColor: "#FF4560",
-      strokeWidth: 2,
-    },
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    plotOptions: {
-      radar: {
-        size: undefined,
-        offsetX: 0,
-        offsetY: 0,
-        polygons: {
-          strokeColors: 'transparent',
-          strokeWidth: 0.5,
-          connectorColors: 'transparent',
-        }
-      }
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: {
-      categories: [
-        "Sunday",
-        "Monday",
-        "Tuesday",
-        "Wednesday",
-        "Thursday",
-        "Friday",
-        "Saturday",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      show: true,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default RadarPolygonFill;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/basic-radial-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/basic-radial-bar.tsx
deleted file mode 100644
index f7fc0e43..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/basic-radial-bar.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const BasicRadialBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [80];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 8,
-    },
-    plotOptions: {
-      radialBar: {
-        hollow: {
-          size: "80%",
-        },
-        dataLabels: {
-          value: {
-            fontSize: "18px",
-            fontWeight: 700,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          },
-        },
-      },
-    },
-    colors: [
-      colors.primary,
-    ],
-    labels: ["Cricket"],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicRadialBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/custom-angle.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/custom-angle.tsx
deleted file mode 100644
index d958bfcb..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/custom-angle.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const CustomAngle = ({ height = 350 }) => {
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [76, 67, 61, 90];
-
-    const options: any = {
-        chart: {
-            toolbar: {
-                show: false,
-            },
-        },
-        stroke: {
-            curve: "smooth",
-            width: 6,
-        },
-        plotOptions: {
-            radialBar: {
-                offsetY: 0,
-                startAngle: 0,
-                endAngle: 270,
-                hollow: {
-                    margin: 5,
-                    size: '30%',
-                    background: 'transparent',
-                    image: undefined,
-                },
-                dataLabels: {
-                    name: {
-                        show: false,
-                    },
-                    value: {
-                        show: false,
-                    }
-                }
-            }
-        },
-        colors: [
-            colors.primary,
-            colors.info,
-            colors.success,
-            colors.primary
-        ],
-        labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
-        legend: {
-            show: true,
-            floating: true,
-            fontSize: '16px',
-            position: 'left',
-            offsetX: 160,
-            offsetY: 15,
-            labels: {
-                useSeriesColors: true,
-            },
-            markers: {
-                size: 0
-            },
-            formatter: function (seriesName: string[], opts: any) {
-                return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
-            },
-            itemMargin: {
-                vertical: 3
-            }
-        },
-        tooltip: {
-            theme: mode === "dark" ? "dark" : "light",
-        },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="radialBar"
-            height={height}
-            width={"100%"}
-        />
-    );
-};
-
-export default CustomAngle;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/gradiant-radial-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/gradiant-radial-bar.tsx
deleted file mode 100644
index a1e48396..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/gradiant-radial-bar.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const GradiantRadialBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [75];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    stroke: {
-      lineCap: "round",
-    },
-    plotOptions: {
-      radialBar: {
-        startAngle: -135,
-        endAngle: 225,
-        hollow: {
-          margin: 0,
-          size: "70%",
-          background: "transparent",
-          image: undefined,
-          imageOffsetX: 0,
-          imageOffsetY: 0,
-          position: "front",
-          dropShadow: {
-            enabled: true,
-            top: 3,
-            left: 0,
-            blur: 4,
-            opacity: 0.24,
-          },
-        },
-        dataLabels: {
-          show: true,
-          name: {
-            offsetY: -10,
-            show: true,
-            color: colors.success,
-            fontSize: "20px",
-          },
-          value: {
-            formatter: function (val: string) {
-              return parseInt(val);
-            },
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "36px",
-            show: true,
-          }
-        }
-      }
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        shade: "dark",
-        type: "horizontal",
-        shadeIntensity: 0.5,
-        gradientToColors: [
-          colors.primary,
-        ],
-        inverseColors: true,
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [0, 100],
-      },
-    },
-    colors: [
-      colors.primary,
-    ],
-    labels: ["Cricket"],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default GradiantRadialBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/layout.tsx
deleted file mode 100644
index 818ca393..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Radial Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/multiple-radial-bar.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/multiple-radial-bar.tsx
deleted file mode 100644
index dbd05703..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/multiple-radial-bar.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const MultipleRadialBar = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [44, 55, 67, 83];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 6,
-    },
-    plotOptions: {
-      radialBar: {
-        dataLabels: {
-          name: {
-            fontSize: "22px",
-          },
-          value: {
-            fontSize: "16px",
-            fontWeight: 700,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          },
-          total: {
-            show: true,
-            label: "Total",
-            formatter: function (w: any) {
-              return 249;
-            },
-          },
-        },
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
-    labels: ["Apples", "Oranges", "Bananas", "Berries"],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MultipleRadialBar;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/page.tsx
deleted file mode 100644
index 1da8ace1..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/page.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicRadialBar from "./basic-radial-bar";
-import MultipleRadialBar from "./multiple-radial-bar";
-import CustomAngle from "./custom-angle";
-import GradiantRadialBar from "./gradiant-radial-bar";
-import RadialBarWithImage from "./radialbar-with-Image";
-import StrokedGauge from "./stroked-gauge";
-import SemiCircleGauge from "./semi-circle-gauge";
-
-
-const RadialBarsChart = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Radialbar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicRadialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Multiple Radialbar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleRadialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Circle Chart - Custom Angle </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomAngle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Gradient Circle Chart </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GradiantRadialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Radialbars with Image </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RadialBarWithImage />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stroked Gauge</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StrokedGauge />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Semi Circular Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <SemiCircleGauge />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default RadialBarsChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/radialbar-with-Image.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/radialbar-with-Image.tsx
deleted file mode 100644
index d4da2047..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/radialbar-with-Image.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const RadialBarWithImage = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [67];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-
-    plotOptions: {
-      radialBar: {
-        hollow: {
-          margin: 15,
-          size: "70%",
-          image: "/images/chart/rocket.png",
-          imageWidth: 64,
-          imageHeight: 64,
-          imageClipped: false,
-        },
-        dataLabels: {
-          name: {
-            show: false,
-            color: "#fff",
-          },
-          value: {
-            show: true,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            offsetY: 70,
-            fontSize: "22px",
-          },
-        },
-      },
-    },
-    fill: {
-      type: "image",
-      image: {
-        src: ["/images/chart/paint.png"],
-      },
-    },
-    stroke: {
-      lineCap: "round",
-    },
-    labels: ["Volatility"],
-    colors: [
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default RadialBarWithImage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/semi-circle-gauge.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/semi-circle-gauge.tsx
deleted file mode 100644
index 43c6dc54..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/semi-circle-gauge.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const SemiCircleGauge = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [76];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      offsetY: -20,
-      sparkline: {
-        enabled: true,
-      },
-    },
-    stroke: {
-      curve: "smooth",
-      width: 6,
-    },
-    plotOptions: {
-      radialBar: {
-        startAngle: -90,
-        endAngle: 90,
-        track: {
-          background: colors["default-300"],
-          strokeWidth: "97%",
-          margin: 5,
-          dropShadow: {
-            enabled: true,
-            top: 2,
-            left: 0,
-            color: "#999",
-            opacity: 1,
-            blur: 2,
-          },
-        },
-        dataLabels: {
-          name: {
-            show: false,
-          },
-          value: {
-            offsetY: -2,
-            fontSize: "22px",
-            fontWeight: 700,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          },
-        },
-      },
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        shade: "light",
-        shadeIntensity: 0.4,
-        inverseColors: false,
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [0, 50, 53, 91],
-      },
-    },
-    colors: [colors.info],
-    labels: ["Average Results"],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default SemiCircleGauge;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/stroked-gauge.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/stroked-gauge.tsx
deleted file mode 100644
index 20e69328..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/stroked-gauge.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const StrokedGauge = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [67, 80];
-
-  const options = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      offsetY: -10,
-    },
-    plotOptions: {
-      radialBar: {
-        startAngle: -135,
-        endAngle: 135,
-        dataLabels: {
-          name: {
-            fontSize: "16px",
-            color: undefined,
-            offsetY: 120,
-          },
-          value: {
-            offsetY: 76,
-            fontSize: "22px",
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            formatter: function (val: number) {
-              return val + "%";
-            },
-          },
-        },
-      },
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        shade: "dark",
-        shadeIntensity: 0.15,
-        inverseColors: false,
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [0, 50, 65, 91],
-      },
-    },
-    stroke: {
-      dashArray: 4,
-    },
-    labels: ["Median Ratio"],
-    colors: [
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default StrokedGauge;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/basic-range.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/basic-range.tsx
deleted file mode 100644
index 0e60eab1..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/basic-range.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getXAxisConfig } from "@/lib/appex-chart-options";
-
-const BasicRange = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "New York Temperature",
-      data: [
-        {
-          x: "Jan",
-          y: [-2, 4],
-        },
-        {
-          x: "Feb",
-          y: [-1, 6],
-        },
-        {
-          x: "Mar",
-          y: [3, 10],
-        },
-        {
-          x: "Apr",
-          y: [8, 16],
-        },
-        {
-          x: "May",
-          y: [13, 22],
-        },
-        {
-          x: "Jun",
-          y: [18, 26],
-        },
-        {
-          x: "Jul",
-          y: [21, 29],
-        },
-        {
-          x: "Aug",
-          y: [21, 28],
-        },
-        {
-          x: "Sep",
-          y: [17, 24],
-        },
-        {
-          x: "Oct",
-          y: [11, 18],
-        },
-        {
-          x: "Nov",
-          y: [6, 12],
-        },
-        {
-          x: "Dec",
-          y: [1, 7],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      type: "rangeArea",
-    },
-    stroke: {
-      curve: "straight",
-    },
-    markers: {
-      hover: {
-        sizeOffset: 5,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: {
-      labels: {
-        formatter: (val: number) => {
-          return val + "°C";
-        },
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ]
-        }
-      }
-    },
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeArea"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicRange;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/combo-range.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/combo-range.tsx
deleted file mode 100644
index c37f6737..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/combo-range.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const ComboRange = ({ height = 350 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      type: "rangeArea",
-      name: "Team B Range",
-
-      data: [
-        {
-          x: "Jan",
-          y: [1100, 1900],
-        },
-        {
-          x: "Feb",
-          y: [1200, 1800],
-        },
-        {
-          x: "Mar",
-          y: [900, 2900],
-        },
-        {
-          x: "Apr",
-          y: [1400, 2700],
-        },
-        {
-          x: "May",
-          y: [2600, 3900],
-        },
-        {
-          x: "Jun",
-          y: [500, 1700],
-        },
-        {
-          x: "Jul",
-          y: [1900, 2300],
-        },
-        {
-          x: "Aug",
-          y: [1000, 1500],
-        },
-      ],
-    },
-
-    {
-      type: "rangeArea",
-      name: "Team A Range",
-      data: [
-        {
-          x: "Jan",
-          y: [3100, 3400],
-        },
-        {
-          x: "Feb",
-          y: [4200, 5200],
-        },
-        {
-          x: "Mar",
-          y: [3900, 4900],
-        },
-        {
-          x: "Apr",
-          y: [3400, 3900],
-        },
-        {
-          x: "May",
-          y: [5100, 5900],
-        },
-        {
-          x: "Jun",
-          y: [5400, 6700],
-        },
-        {
-          x: "Jul",
-          y: [4300, 4600],
-        },
-        {
-          x: "Aug",
-          y: [2100, 2900],
-        }
-      ]
-    },
-    {
-      type: "line",
-      name: "Team B Median",
-      data: [
-        {
-          x: "Jan",
-          y: 1500,
-        },
-        {
-          x: "Feb",
-          y: 1700,
-        },
-        {
-          x: "Mar",
-          y: 1900,
-        },
-        {
-          x: "Apr",
-          y: 2200,
-        },
-        {
-          x: "May",
-          y: 3000,
-        },
-        {
-          x: "Jun",
-          y: 1000,
-        },
-        {
-          x: "Jul",
-          y: 2100,
-        },
-        {
-          x: "Aug",
-          y: 1200,
-        },
-        {
-          x: "Sep",
-          y: 1800,
-        },
-        {
-          x: "Oct",
-          y: 2000,
-        },
-      ]
-    },
-    {
-      type: "line",
-      name: "Team A Median",
-      data: [
-        {
-          x: "Jan",
-          y: 3300,
-        },
-        {
-          x: "Feb",
-          y: 4900,
-        },
-        {
-          x: "Mar",
-          y: 4300,
-        },
-        {
-          x: "Apr",
-          y: 3700,
-        },
-        {
-          x: "May",
-          y: 5500,
-        },
-        {
-          x: "Jun",
-          y: 5900,
-        },
-        {
-          x: "Jul",
-          y: 4500,
-        },
-        {
-          x: "Aug",
-          y: 2400,
-        },
-        {
-          x: "Sep",
-          y: 2100,
-        },
-        {
-          x: "Oct",
-          y: 1500,
-        },
-      ]
-    }
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      animations: {
-        speed: 500,
-      },
-    },
-    forecastDataPoints: {
-      count: 2,
-    },
-    legend: {
-      show: true,
-      customLegendItems: ["Team B", "Team A"],
-      inverseOrder: true,
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 10,
-        vertical: 12,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    stroke: {
-      curve: "straight",
-      width: [0, 0, 2, 2],
-    },
-
-    dataLabels: {
-      enabled: false,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: {
-      labels: {
-        style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
-    },
-    xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeArea"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ComboRange;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/layout.tsx
deleted file mode 100644
index af1f08ec..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Range Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/page.tsx
deleted file mode 100644
index 4006f8e6..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/page.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicRange from "./basic-range";
-import ComboRange from "./combo-range";
-
-const RangeChartPage = () => {
-    return (
-        <div className="grid grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Range Area Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicRange />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Combo</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ComboRange />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default RangeChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/basic-scatter.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/basic-scatter.tsx
deleted file mode 100644
index 0a50676f..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/basic-scatter.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const BasicScatter = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "SAMPLE A",
-      data: [
-        [16.4, 5.4],
-        [21.7, 2],
-        [25.4, 3],
-        [19, 2],
-        [10.9, 1],
-        [13.6, 3.2],
-        [10.9, 7.4],
-        [10.9, 0],
-        [10.9, 8.2],
-        [16.4, 0],
-        [16.4, 1.8],
-        [13.6, 0.3],
-        [13.6, 0],
-        [29.9, 0],
-        [27.1, 2.3],
-        [16.4, 0],
-        [13.6, 3.7],
-        [10.9, 5.2],
-        [16.4, 6.5],
-        [10.9, 0],
-        [24.5, 7.1],
-        [10.9, 0],
-        [8.1, 4.7],
-        [19, 0],
-        [21.7, 1.8],
-        [27.1, 0],
-        [24.5, 0],
-        [27.1, 0],
-        [29.9, 1.5],
-        [27.1, 0.8],
-        [22.1, 2],
-      ],
-    },
-    {
-      name: "SAMPLE B",
-      data: [
-        [36.4, 13.4],
-        [1.7, 11],
-        [5.4, 8],
-        [9, 17],
-        [1.9, 4],
-        [3.6, 12.2],
-        [1.9, 14.4],
-        [1.9, 9],
-        [1.9, 13.2],
-        [1.4, 7],
-        [6.4, 8.8],
-        [3.6, 4.3],
-        [1.6, 10],
-        [9.9, 2],
-        [7.1, 15],
-        [1.4, 0],
-        [3.6, 13.7],
-        [1.9, 15.2],
-        [6.4, 16.5],
-        [0.9, 10],
-        [4.5, 17.1],
-        [10.9, 10],
-        [0.1, 14.7],
-        [9, 10],
-        [12.7, 11.8],
-        [2.1, 10],
-        [2.5, 10],
-        [27.1, 10],
-        [2.9, 11.5],
-        [7.1, 10.8],
-        [2.1, 12],
-      ],
-    },
-    {
-      name: "SAMPLE C",
-      data: [
-        [21.7, 3],
-        [23.6, 3.5],
-        [24.6, 3],
-        [29.9, 3],
-        [21.7, 20],
-        [23, 2],
-        [10.9, 3],
-        [28, 4],
-        [27.1, 0.3],
-        [16.4, 4],
-        [13.6, 0],
-        [19, 5],
-        [22.4, 3],
-        [24.5, 3],
-        [32.6, 3],
-        [27.1, 4],
-        [29.6, 6],
-        [31.6, 8],
-        [21.6, 5],
-        [20.9, 4],
-        [22.4, 0],
-        [32.6, 10.3],
-        [29.7, 20.8],
-        [24.5, 0.8],
-        [21.4, 0],
-        [21.7, 6.9],
-        [28.6, 7.7],
-        [15.4, 0],
-        [18.1, 0],
-        [33.4, 0],
-        [16.4, 0],
-      ],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: true,
-        type: "xy",
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-
-    fill: {
-      opacity: 1,
-    },
-
-    yaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-
-    xaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="scatter"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicScatter;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/date-time.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/date-time.tsx
deleted file mode 100644
index f8a1c1b4..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/date-time.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const DateTime = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  interface DataRange {
-    min: number;
-    max: number;
-  }
-  function generateDayWiseTimeSeries(baseval: number, count: number, yrange: DataRange) {
-    var i = 0;
-    var series: [number, number][] = [];
-    while (i < count) {
-      var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-
-      series.push([x, y]);
-      baseval += 86400000;
-      i++;
-    }
-    return series;
-  }
-
-  const series = [
-    {
-      name: "TEAM 1",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
-    },
-    {
-      name: "TEAM 2",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
-    },
-    {
-      name: "TEAM 3",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        30,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
-    },
-    {
-      name: "TEAM 4",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        10,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
-    },
-    {
-      name: "TEAM 5",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        30,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: true,
-        type: "xy",
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      opacity: 1,
-    },
-
-    yaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-
-    xaxis: {
-      type: "datetime",
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="scatter"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default DateTime;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/layout.tsx
deleted file mode 100644
index 4b27b4e7..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Scatter Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/page.tsx
deleted file mode 100644
index ba65f8b8..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/page.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicScatter from "./basic-scatter";
-import DateTime from "./date-time";
-import ScatterImage from "./scatter-image";
-
-const AreaChartPage = () => {
-  return (
-    <div className="grid grid-cols-2  gap-6">
-      <div className="col-span-2 lg:col-span-1">
-        <Card>
-          <CardHeader>
-            <CardTitle>Basic Scatter Chart</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <BasicScatter />
-          </CardContent>
-        </Card>
-      </div>
-      <div className="col-span-2 lg:col-span-1">
-        <Card>
-          <CardHeader>
-            <CardTitle>Scatter - Datetime Chart</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <DateTime />
-          </CardContent>
-        </Card>
-      </div>
-      <div className="col-span-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Scatter - Image Chart</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ScatterImage />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default AreaChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/scatter-image.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/scatter-image.tsx
deleted file mode 100644
index 9731874b..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/scatter-image.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const ScatterImage = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Messenger",
-      data: [
-        [16.4, 5.4],
-        [21.7, 4],
-        [25.4, 3],
-        [19, 2],
-        [10.9, 1],
-        [13.6, 3.2],
-        [10.9, 7],
-        [10.9, 8.2],
-        [16.4, 4],
-        [13.6, 4.3],
-        [13.6, 12],
-        [29.9, 3],
-        [10.9, 5.2],
-        [16.4, 6.5],
-        [10.9, 8],
-        [24.5, 7.1],
-        [10.9, 7],
-        [8.1, 4.7],
-        [19, 10],
-        [27.1, 10],
-        [24.5, 8],
-        [27.1, 3],
-        [29.9, 11.5],
-        [27.1, 0.8],
-        [22.1, 2],
-      ],
-    },
-    {
-      name: "Instagram",
-      data: [
-        [6.4, 5.4],
-        [11.7, 4],
-        [15.4, 3],
-        [9, 2],
-        [10.9, 11],
-        [20.9, 7],
-        [12.9, 8.2],
-        [6.4, 14],
-        [11.6, 12],
-      ],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: true,
-        type: "xy",
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-
-
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    fill: {
-      type: "image",
-      opacity: 1,
-      image: {
-        src: ["images/chart/messenger.png", "images/chart/insta.png"],
-        width: 40,
-        height: 40,
-      },
-    },
-    yaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      tickAmount: 7,
-    },
-
-    xaxis: {
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-      min: 0,
-      max: 40,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      tickAmount: 10,
-    },
-    markers: {
-      size: 20,
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-    legend: {
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="scatter"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default ScatterImage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/basic-timeline.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/basic-timeline.tsx
deleted file mode 100644
index 36cc3ec4..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/basic-timeline.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const BasicTimeline = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [
-        {
-          x: "Code",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-04").getTime(),
-          ],
-        },
-        {
-          x: "Test",
-          y: [
-            new Date("2019-03-04").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
-        },
-        {
-          x: "Validation",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-12").getTime(),
-          ],
-        },
-        {
-          x: "Deployment",
-          y: [
-            new Date("2019-03-12").getTime(),
-            new Date("2019-03-18").getTime(),
-          ],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      },
-    },
-
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default BasicTimeline;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/custom-color.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/custom-color.tsx
deleted file mode 100644
index b95ba658..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/custom-color.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-import moment from "moment";
-const CustomColor = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [
-        {
-          x: "Analysis",
-          y: [
-            new Date("2019-02-27").getTime(),
-            new Date("2019-03-04").getTime(),
-          ],
-          fillColor: "#008FFB",
-        },
-        {
-          x: "Design",
-          y: [
-            new Date("2019-03-04").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
-          fillColor: "#00E396",
-        },
-        {
-          x: "Coding",
-          y: [
-            new Date("2019-03-07").getTime(),
-            new Date("2019-03-10").getTime(),
-          ],
-          fillColor: "#775DD0",
-        },
-        {
-          x: "Testing",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-12").getTime(),
-          ],
-          fillColor: "#FEB019",
-        },
-        {
-          x: "Deployment",
-          y: [
-            new Date("2019-03-12").getTime(),
-            new Date("2019-03-17").getTime(),
-          ],
-          fillColor: "#FF4560",
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        distributed: true,
-        dataLabels: {
-          hideOverflowingLabels: false,
-        },
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function (val: any, opts: any) {
-        var label = opts.w.globals.labels[opts.dataPointIndex];
-        var a = moment(val[0]);
-        var b = moment(val[1]);
-        var diff = b.diff(a, "days");
-        return label + ": " + diff + (diff > 1 ? " days" : " day");
-      },
-      style: {
-        colors: ["#fff"],
-      }
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    yaxis: {
-      show: false,
-    },
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    }
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default CustomColor;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/dumbbell-timeline.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/dumbbell-timeline.tsx
deleted file mode 100644
index 8284e9e4..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/dumbbell-timeline.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const DumbbellTimelineChart = ({ height = 400 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      data: [
-        {
-          x: "Operations",
-          y: [2800, 4500],
-        },
-        {
-          x: "Customer Success",
-          y: [3200, 4100],
-        },
-        {
-          x: "Engineering",
-          y: [2950, 7800],
-        },
-        {
-          x: "Marketing",
-          y: [3000, 4600],
-        },
-        {
-          x: "Product",
-          y: [3500, 4100],
-        },
-        {
-          x: "Data Science",
-          y: [4500, 6500],
-        },
-        {
-          x: "Sales",
-          y: [4100, 5600],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        isDumbbell: true,
-        dumbbellColors: [
-          [
-            colors.warning,
-            colors.info,
-          ],
-        ],
-      },
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        gradientToColors: [
-          colors.info,
-        ],
-        inverseColors: false,
-        stops: [0, 100],
-      },
-    },
-    colors: [
-      colors.primary,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default DumbbellTimelineChart;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/group-rows.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/group-rows.tsx
deleted file mode 100644
index f3b6edc8..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/group-rows.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-
-const GroupRows = ({ height = 400 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "George Washington",
-      data: [
-        {
-          x: "President",
-          y: [new Date(1789, 3, 30).getTime(), new Date(1797, 2, 4).getTime()],
-        },
-      ],
-    },
-    {
-      name: "John Adams",
-      data: [
-        {
-          x: "President",
-          y: [new Date(1797, 2, 4).getTime(), new Date(1801, 2, 4).getTime()],
-        },
-        {
-          x: "Vice President",
-          y: [new Date(1789, 3, 21).getTime(), new Date(1797, 2, 4).getTime()],
-        },
-      ],
-    },
-    {
-      name: "Thomas Jefferson",
-      data: [
-        {
-          x: "President",
-          y: [new Date(1801, 2, 4).getTime(), new Date(1809, 2, 4).getTime()],
-        },
-        {
-          x: "Vice President",
-          y: [new Date(1797, 2, 4).getTime(), new Date(1801, 2, 4).getTime()],
-        },
-        {
-          x: "Secretary of State",
-          y: [
-            new Date(1790, 2, 22).getTime(),
-            new Date(1793, 11, 31).getTime(),
-          ],
-        },
-      ],
-    },
-    {
-      name: "Aaron Burr",
-      data: [
-        {
-          x: "Vice President",
-          y: [new Date(1801, 2, 4).getTime(), new Date(1805, 2, 4).getTime()],
-        },
-      ],
-    },
-    {
-      name: "George Clinton",
-      data: [
-        {
-          x: "Vice President",
-          y: [new Date(1805, 2, 4).getTime(), new Date(1812, 3, 20).getTime()],
-        },
-      ],
-    },
-    {
-      name: "John Jay",
-      data: [
-        {
-          x: "Secretary of State",
-          y: [new Date(1789, 8, 25).getTime(), new Date(1790, 2, 22).getTime()],
-        },
-      ],
-    },
-    {
-      name: "Edmund Randolph",
-      data: [
-        {
-          x: "Secretary of State",
-          y: [new Date(1794, 0, 2).getTime(), new Date(1795, 7, 20).getTime()],
-        },
-      ],
-    },
-    {
-      name: "Timothy Pickering",
-      data: [
-        {
-          x: "Secretary of State",
-          y: [new Date(1795, 7, 20).getTime(), new Date(1800, 4, 12).getTime()],
-        },
-      ],
-    },
-    {
-      name: "Charles Lee",
-      data: [
-        {
-          x: "Secretary of State",
-          y: [new Date(1800, 4, 13).getTime(), new Date(1800, 5, 5).getTime()],
-        },
-      ],
-    },
-    {
-      name: "John Marshall",
-      data: [
-        {
-          x: "Secretary of State",
-          y: [new Date(1800, 5, 13).getTime(), new Date(1801, 2, 4).getTime()],
-        },
-      ],
-    },
-    {
-      name: "Levi Lincoln",
-      data: [
-        {
-          x: "Secretary of State",
-          y: [new Date(1801, 2, 5).getTime(), new Date(1801, 4, 1).getTime()],
-        },
-      ],
-    },
-    {
-      name: "James Madison",
-      data: [
-        {
-          x: "Secretary of State",
-          y: [new Date(1801, 4, 2).getTime(), new Date(1809, 2, 3).getTime()],
-        },
-      ],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        barHeight: "50%",
-        rangeBarGroupRows: true,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    fill: {
-      type: "solid",
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    legend: {
-      position: "right",
-      horizontalAlign: "right",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default GroupRows;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/layout.tsx
deleted file mode 100644
index 6a395908..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex Timeline Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-range.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-range.tsx
deleted file mode 100644
index 4e55c549..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-range.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
-
-const MultiRange = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Bob",
-      data: [
-        {
-          x: "Design",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
-        },
-        {
-          x: "Code",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-05").getTime(),
-          ],
-        },
-        {
-          x: "Code",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-07").getTime(),
-          ],
-        },
-        {
-          x: "Test",
-          y: [
-            new Date("2019-03-03").getTime(),
-            new Date("2019-03-09").getTime(),
-          ],
-        },
-        {
-          x: "Test",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-11").getTime(),
-          ],
-        },
-        {
-          x: "Validation",
-          y: [
-            new Date("2019-03-11").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
-        },
-        {
-          x: "Design",
-          y: [
-            new Date("2019-03-01").getTime(),
-            new Date("2019-03-03").getTime(),
-          ],
-        },
-      ],
-    },
-    {
-      name: "Joe",
-      data: [
-        {
-          x: "Design",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-05").getTime(),
-          ],
-        },
-        {
-          x: "Test",
-          y: [
-            new Date("2019-03-06").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
-          goals: [
-            {
-              name: "Break",
-              value: new Date("2019-03-10").getTime(),
-              strokeColor: "#CD2F2A",
-            },
-          ],
-        },
-        {
-          x: "Code",
-          y: [
-            new Date("2019-03-03").getTime(),
-            new Date("2019-03-07").getTime(),
-          ],
-        },
-        {
-          x: "Deployment",
-          y: [
-            new Date("2019-03-20").getTime(),
-            new Date("2019-03-22").getTime(),
-          ],
-        },
-        {
-          x: "Design",
-          y: [
-            new Date("2019-03-10").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
-        },
-      ],
-    },
-    {
-      name: "Dan",
-      data: [
-        {
-          x: "Code",
-          y: [
-            new Date("2019-03-10").getTime(),
-            new Date("2019-03-17").getTime(),
-          ],
-        },
-        {
-          x: "Validation",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-09").getTime(),
-          ],
-          goals: [
-            {
-              name: "Break",
-              value: new Date("2019-03-07").getTime(),
-              strokeColor: "#CD2F2A",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        barHeight: "80%",
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-    yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    },
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    legend: {
-      position: "top",
-      horizontalAlign: "left",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MultiRange;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-series.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-series.tsx
deleted file mode 100644
index 864a4bd5..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-series.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-import moment from "moment";
-const MultiSeries = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  const series = [
-    {
-      name: "Bob",
-      data: [
-        {
-          x: "Design",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
-        },
-        {
-          x: "Code",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-11").getTime(),
-          ],
-        },
-        {
-          x: "Test",
-          y: [
-            new Date("2019-03-11").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
-        },
-      ],
-    },
-    {
-      name: "Joe",
-      data: [
-        {
-          x: "Design",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-05").getTime(),
-          ],
-        },
-        {
-          x: "Code",
-          y: [
-            new Date("2019-03-06").getTime(),
-            new Date("2019-03-09").getTime(),
-          ],
-        },
-        {
-          x: "Test",
-          y: [
-            new Date("2019-03-10").getTime(),
-            new Date("2019-03-19").getTime(),
-          ],
-        },
-      ],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-
-    plotOptions: {
-      bar: {
-        horizontal: true,
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function (val: [number, number]) {
-        var a = moment(val[0]);
-        var b = moment(val[1]);
-        var diff = b.diff(a, "days");
-        return diff + (diff > 1 ? " days" : " day");
-      },
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        shade: "light",
-        type: "vertical",
-        shadeIntensity: 0.5,
-        gradientToColors: undefined,
-        inverseColors: true,
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [50, 0, 100, 100],
-      },
-    },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    xaxis: {
-      type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    legend: {
-      position: "top",
-      labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-      itemMargin: {
-        horizontal: 5,
-        vertical: 5,
-      },
-      markers: {
-        width: 10,
-        height: 10,
-        radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    },
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default MultiSeries;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/page.tsx
deleted file mode 100644
index 85976df5..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicTimeline from "./basic-timeline";
-import CustomColor from "./custom-color";
-import MultiSeries from "./multi-series";
-import MultiRange from "./multi-range";
-import GroupRows from "./group-rows";
-import DumbbellTimelineChart from "./dumbbell-timeline";
-
-const RangeChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic TimeLine Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicTimeline />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Different Color For Each Bar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomColor />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multi Series Timeline</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultiSeries />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Advanced Timeline (Multiple Range)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultiRange />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multiple series (Group rows)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupRows />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Dumbbell Chart (Horizontal)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DumbbellTimelineChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default RangeChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/basic-treemap.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/basic-treemap.tsx
deleted file mode 100644
index bfac35e2..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/basic-treemap.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const BasicTreeMap = ({ height = 300 }) => {
-
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
-        {
-            data: [
-                {
-                    x: 'New Delhi',
-                    y: 218
-                },
-                {
-                    x: 'Kolkata',
-                    y: 149
-                },
-                {
-                    x: 'Mumbai',
-                    y: 184
-                },
-                {
-                    x: 'Ahmedabad',
-                    y: 55
-                },
-                {
-                    x: 'Bangaluru',
-                    y: 84
-                },
-                {
-                    x: 'Pune',
-                    y: 31
-                },
-                {
-                    x: 'Chennai',
-                    y: 70
-                },
-                {
-                    x: 'Jaipur',
-                    y: 30
-                },
-                {
-                    x: 'Surat',
-                    y: 44
-                },
-                {
-                    x: 'Hyderabad',
-                    y: 68
-                },
-                {
-                    x: 'Lucknow',
-                    y: 28
-                },
-                {
-                    x: 'Indore',
-                    y: 19
-                },
-                {
-                    x: 'Kanpur',
-                    y: 29
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            }
-        },
-        dataLabels: {
-            enabled: true,
-        },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
-};
-
-export default BasicTreeMap;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/color-range.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/color-range.tsx
deleted file mode 100644
index 557d2cb5..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/color-range.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const ColorRange = ({ height = 300 }) => {
-
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
-        {
-            data: [
-                {
-                    x: 'INTC',
-                    y: 1.2
-                },
-                {
-                    x: 'GS',
-                    y: 0.4
-                },
-                {
-                    x: 'CVX',
-                    y: -1.4
-                },
-                {
-                    x: 'GE',
-                    y: 2.7
-                },
-                {
-                    x: 'CAT',
-                    y: -0.3
-                },
-                {
-                    x: 'RTX',
-                    y: 5.1
-                },
-                {
-                    x: 'CSCO',
-                    y: -2.3
-                },
-                {
-                    x: 'JNJ',
-                    y: 2.1
-                },
-                {
-                    x: 'PG',
-                    y: 0.3
-                },
-                {
-                    x: 'TRV',
-                    y: 0.12
-                },
-                {
-                    x: 'MMM',
-                    y: -2.31
-                },
-                {
-                    x: 'NKE',
-                    y: 3.98
-                },
-                {
-                    x: 'IYT',
-                    y: 1.67
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            },
-        },
-        dataLabels: {
-            enabled: true,
-            style: {
-                fontSize: '12px',
-            },
-            formatter: function (text: string, op: any) {
-                return [text, op.value]
-            },
-            offsetY: -4
-        },
-        plotOptions: {
-            treemap: {
-                enableShades: true,
-                shadeIntensity: 0.5,
-                reverseNegativeShade: true,
-                colorScale: {
-                    ranges: [
-                        {
-                            from: -6,
-                            to: 0,
-                            color: '#724bf1'
-                        },
-                        {
-                            from: 0.001,
-                            to: 6,
-                            color: '#52B12C'
-                        }
-                    ]
-                }
-            }
-        },
-
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
-        legend: {
-            show: false
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
-};
-
-export default ColorRange;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/distributed-treemap.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/distributed-treemap.tsx
deleted file mode 100644
index 29ee6576..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/distributed-treemap.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const DistributedTreeMap = ({ height = 300 }) => {
-
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
-        {
-            data: [
-                {
-                    x: 'New Delhi',
-                    y: 218
-                },
-                {
-                    x: 'Kolkata',
-                    y: 149
-                },
-                {
-                    x: 'Mumbai',
-                    y: 184
-                },
-                {
-                    x: 'Ahmedabad',
-                    y: 55
-                },
-                {
-                    x: 'Bangaluru',
-                    y: 84
-                },
-                {
-                    x: 'Pune',
-                    y: 31
-                },
-                {
-                    x: 'Chennai',
-                    y: 70
-                },
-                {
-                    x: 'Jaipur',
-                    y: 30
-                },
-                {
-                    x: 'Surat',
-                    y: 44
-                },
-                {
-                    x: 'Hyderabad',
-                    y: 68
-                },
-                {
-                    x: 'Lucknow',
-                    y: 28
-                },
-                {
-                    x: 'Indore',
-                    y: 19
-                },
-                {
-                    x: 'Kanpur',
-                    y: 29
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            },
-        },
-        dataLabels: {
-            enabled: true,
-        },
-        colors: [
-            '#3B93A5',
-            '#F7B844',
-            '#ADD8C7',
-            '#EC3C65',
-            '#CDD7B6',
-            '#C1F666',
-            '#D43F97',
-            '#1E5D8C',
-            '#421243',
-            '#7F94B0',
-            '#EF6537',
-            '#C0ADDB'
-        ],
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
-        plotOptions: {
-            treemap: {
-                distributed: true,
-                enableShades: false
-            }
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
-};
-
-export default DistributedTreeMap;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/layout.tsx
deleted file mode 100644
index 060f9ae3..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Appex TreeMap Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/multiple-series-treemap.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/multiple-series-treemap.tsx
deleted file mode 100644
index 07e8ad7d..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/multiple-series-treemap.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { useConfig } from "@/hooks/use-config";
-
-const MultipleSeriesTreeMap = ({ height = 300 }) => {
-
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
-        {
-            name: 'Desktops',
-            data: [
-                {
-                    x: 'ABC',
-                    y: 10
-                },
-                {
-                    x: 'DEF',
-                    y: 60
-                },
-                {
-                    x: 'XYZ',
-                    y: 41
-                }
-            ]
-        },
-        {
-            name: 'Mobile',
-            data: [
-                {
-                    x: 'ABCD',
-                    y: 10
-                },
-                {
-                    x: 'DEFG',
-                    y: 20
-                },
-                {
-                    x: 'WXYZ',
-                    y: 51
-                },
-                {
-                    x: 'PQR',
-                    y: 30
-                },
-                {
-                    x: 'MNO',
-                    y: 20
-                },
-                {
-                    x: 'CDE',
-                    y: 30
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            },
-        },
-        dataLabels: {
-            enabled: true,
-        },
-        colors: ["#62f78c"],
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
-        legend: {
-            show: false
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
-};
-
-export default MultipleSeriesTreeMap;
diff --git a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/page.tsx b/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/page.tsx
deleted file mode 100644
index f7f596da..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/page.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicTreeMap from "./basic-treemap";
-import MultipleSeriesTreeMap from "./multiple-series-treemap";
-import ColorRange from "./color-range";
-import DistributedTreeMap from "./distributed-treemap";
-
-const TreeMapChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicTreeMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multi-Dimensional Treemap Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleSeriesTreeMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Color Range</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColorRange />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Distributed Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DistributedTreeMap />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default TreeMapChartPage;
diff --git a/app/[locale]/(protected)/charts/appex-charts/layout.tsx b/app/[locale]/(protected)/charts/appex-charts/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/charts/appex-charts/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/delay-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/delay-chart.tsx
deleted file mode 100644
index f63185d8..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/delay-chart.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bar } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const DelayChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: labels.map(() => 67),
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        borderSkipped: "bottom",
-      },
-      {
-        label: "Dataset 1",
-        data: labels.map(() => -45),
-        borderColor: hexToRGB(colors.info, 0.5),
-        backgroundColor: hexToRGB(colors.info, 0.5),
-        borderSkipped: "bottom",
-      },
-      {
-        label: "Dataset 3",
-        data: labels.map(() => 45),
-        borderColor: hexToRGB(colors.success, 0.5),
-        backgroundColor: hexToRGB(colors.success, 0.5),
-        borderSkipped: "bottom",
-      },
-    ],
-  };
-
-  let delayed: boolean = false;
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-      }
-    },
-    animation: {
-      onComplete: () => {
-        delayed = true;
-      },
-      delay: (context: any) => {
-        let delay = 0;
-        if (context.type === "data" && context.mode === "default" && !delayed) {
-          delay = context.dataIndex * 300 + context.datasetIndex * 100;
-        }
-        return delay;
-      },
-    },
-    hover: {
-      mode: "index",
-      intersect: false,
-    },
-    scales: {
-      y: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          stepSize: 50,
-        },
-      },
-      x: {
-        stacked: true,
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default DelayChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/drop-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/drop-chart.tsx
deleted file mode 100644
index ea32f858..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/drop-chart.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const DropChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        animations: {
-          y: {
-            duration: 2000,
-            delay: 500,
-          },
-        },
-        data: labels.map(() => 23),
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        fill: true,
-        tension: 0.5,
-      },
-      {
-        label: "Dataset 1",
-        data: labels.map(() => -34),
-        borderColor: hexToRGB(colors.info, 0.5),
-        backgroundColor: hexToRGB(colors.info, 0.5),
-      },
-    ],
-  };
-
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-      }
-    },
-    animation: {
-      y: {
-        easing: "easeInOutElastic",
-        from: (ctx: any) => {
-          if (ctx.type === "data") {
-            if (ctx.mode === "default" && !ctx.dropped) {
-              ctx.dropped = true;
-              return 0;
-            }
-          }
-        },
-      },
-    },
-    hover: {
-      mode: "index",
-      intersect: false,
-    },
-    scales: {
-      y: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        stacked: true,
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
-    },
-    maintainAspectRatio: false,
-  };
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default DropChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/layout.tsx
deleted file mode 100644
index a2e6272c..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Animation Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/loop-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/loop-chart.tsx
deleted file mode 100644
index 75fec409..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/loop-chart.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const LoopChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        animations: {
-          y: {
-            duration: 2000,
-            delay: 500,
-          },
-        },
-        data: labels.map(() => -23),
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        fill: 1,
-        tension: 0.5,
-      },
-      {
-        label: "Dataset 1",
-        data: labels.map(() => 89),
-        borderColor: hexToRGB(colors.info, 0.5),
-        backgroundColor: hexToRGB(colors.info, 0.5),
-      },
-    ],
-  };
-
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-      },
-    },
-    animations: {
-      radius: {
-        duration: 400,
-        easing: "linear",
-        loop: (context: any) => context.active,
-      },
-    },
-    hoverRadius: 12,
-    hoverBackgroundColor: "yellow",
-    interaction: {
-      mode: "nearest",
-      intersect: false,
-      axis: "x",
-    },
-    scales: {
-      y: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        stacked: true,
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default LoopChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/page.tsx
deleted file mode 100644
index 3e22aacd..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import PrograssiveLine from "./prograssive-line";
-import DelayChart from "./delay-chart";
-import DropChart from "./drop-chart";
-import LoopChart from "./loop-chart";
-
-
-const ChartsChartJsAnimation = () => {
-  return (
-    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Delay</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DelayChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Drop</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DropChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Loop</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LoopChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Progressive Line</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <PrograssiveLine />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default ChartsChartJsAnimation;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/prograssive-line.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/prograssive-line.tsx
deleted file mode 100644
index 962e5e68..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/prograssive-line.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-"use client";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const ProgressiveLine = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  var data = [];
-  let data2 = [];
-  let prev = 100;
-  let prev2 = 80;
-  for (let i = 0; i < 1000; i++) {
-    prev += 5 - Math.random() * 10;
-    data.push({ x: i, y: prev });
-    prev2 += 5 - Math.random() * 10;
-    data2.push({ x: i, y: prev2 });
-  }
-
-  const totalDuration = 10000;
-  const delayBetweenPoints = totalDuration / data.length;
-  const previousY = (ctx: any) =>
-    ctx.index === 0
-      ? ctx.chart.scales.y.getPixelForValue(100)
-      : ctx.chart
-        .getDatasetMeta(ctx.datasetIndex)
-        .data[ctx.index - 1].getProps(["y"], true).y;
-  const animation = {
-    x: {
-      type: "number",
-      easing: "linear",
-      duration: delayBetweenPoints,
-      from: NaN, // the point is initially skipped
-      delay(ctx: any) {
-        if (ctx.type !== "data" || ctx.xStarted) {
-          return 0;
-        }
-        ctx.xStarted = true;
-        return ctx.index * delayBetweenPoints;
-      },
-    },
-    y: {
-      type: "number",
-      easing: "linear",
-      duration: delayBetweenPoints,
-      from: previousY,
-      delay(ctx: any) {
-        if (ctx.type !== "data" || ctx.yStarted) {
-          return 0;
-        }
-        ctx.yStarted = true;
-        return ctx.index * delayBetweenPoints;
-      },
-    },
-  };
-
-  let data1: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: data,
-        borderColor: hexToRGB(colors.danger, 0.5),
-        borderWidth: 1,
-        radius: 0,
-      },
-      {
-        label: "Dataset 2",
-        data: data2,
-        borderColor: hexToRGB(colors.info, 0.5),
-        borderWidth: 1,
-        radius: 0,
-      },
-    ],
-  };
-
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        legend: false,
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-      },
-    },
-    animation,
-    interaction: {
-      intersect: false,
-    },
-    hover: {
-      mode: "index",
-      intersect: false,
-    },
-    scales: {
-      y: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        type: "linear",
-        stacked: true,
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
-    },
-
-    maintainAspectRatio: false,
-  };
-  return (
-    <div>
-      <Line options={options} data={data1} height={height} />
-    </div>
-  );
-};
-
-export default ProgressiveLine;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/basic-area.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/basic-area.tsx
deleted file mode 100644
index a9dc5da5..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/basic-area.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const BasicArea = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        fill: true,
-        label: "Dataset",
-        data: [-20, -60, 35, 59, 80, -50, 81, 56, 55, 40],
-        borderColor: hexToRGB(colors.warning, 1),
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      filler: {
-        propagate: false,
-      },
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-        }
-      }
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default BasicArea;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/draw-time.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/draw-time.tsx
deleted file mode 100644
index 9592b9ce..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/draw-time.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const DrawTime = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 40, 60, 80, 90],
-        borderColor: colors.primary,
-        backgroundColor: hexToRGB(colors.primary, 0.4),
-        fill: true,
-      },
-      {
-        label: "Dataset 2",
-        data: [30, 60, 70, 80, 90, 60, 60],
-        borderColor: colors.warning,
-        backgroundColor: hexToRGB(colors.warning, 0.4),
-        fill: true,
-      }
-    ]
-  };
-
-  const options: any = {
-    responsive: true,
-    plugins: {
-      filler: {
-        propagate: false,
-      },
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      interaction: {
-        mode: "nearest",
-        axis: "x",
-        intersect: false,
-      }
-    },
-
-    scales: {
-      y: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default DrawTime;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/layout.tsx
deleted file mode 100644
index 5aec1f20..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Area Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/line-datasets.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/line-datasets.tsx
deleted file mode 100644
index 5e410d73..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/line-datasets.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const LineDatasets = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        fill: true,
-        label: "D0",
-        data: [80, 70, 60, 80, 60, 50, 61, 56, 35, 70],
-        borderColor: hexToRGB(colors.primary, 1),
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-      },
-      {
-        label: "D1",
-        data: [10, 50, 40, 60, 70, 40, 81, 66, 45, 60],
-        borderColor: hexToRGB(colors.info, 1),
-        backgroundColor: hexToRGB(colors.info, 0.5),
-        fill: "-1",
-      },
-      {
-        label: "D2",
-        data: [100, 90, 130, 90, 90, 90, 91, 96, 105, 100],
-        borderColor: hexToRGB(colors.warning, 1),
-        backgroundColor: hexToRGB(colors.warning, 0.5),
-        fill: 1,
-      },
-      {
-        label: "D3",
-        data: [150, 180, 170, 189, 190, 140, 191, 186, 175, 190],
-        borderColor: hexToRGB(colors.success, 1),
-        backgroundColor: hexToRGB(colors.success, 0.5),
-        fill: "-1",
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      filler: {
-        propagate: true,
-      },
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    interaction: {
-      intersect: false,
-    },
-    scales: {
-      y: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default LineDatasets;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/linechart-stacked.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/linechart-stacked.tsx
deleted file mode 100644
index 65382c5d..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/linechart-stacked.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const LineChartStacked = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 40, 60, 80, 90],
-        borderColor: colors.primary,
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        fill: true,
-      },
-      {
-        label: "Dataset 2",
-        data: [30, 60, 70, 80, 90, 60, 60],
-        borderColor: colors.warning,
-        backgroundColor: hexToRGB(colors.info, 0.5),
-        fill: true,
-      },
-      {
-        label: "Dataset 3",
-        data: [110, 70, 40, 190, 20, 10, 100],
-        borderColor: colors.warning,
-        backgroundColor: hexToRGB(colors.warning, 0.5),
-        fill: true,
-      },
-      {
-        label: "Dataset 4",
-        data: [130, 160, 170, 180, 190, 160, 160],
-        borderColor: colors.success,
-        backgroundColor: hexToRGB(colors.success, 0.5),
-        fill: true,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      filler: {
-        propagate: false,
-      },
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        stacked: true,
-      },
-      x: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default LineChartStacked;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/page.tsx
deleted file mode 100644
index 6fe96448..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicArea from "./basic-area";
-import LineDatasets from "./line-datasets";
-import DrawTime from "./draw-time";
-import LineChartStacked from "./linechart-stacked";
-import RadarStacked from "./radar-stacked";
-
-const ChartsChartJsAreaPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Boundaries</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicArea />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Datasets</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LineDatasets />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Draw Time</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DrawTime />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Stacked</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LineChartStacked />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Radar Chart Stacked</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RadarStacked />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartsChartJsAreaPage;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/radar-stacked.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/radar-stacked.tsx
deleted file mode 100644
index a4ffc2bd..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/radar-stacked.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  RadialLinearScale,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Radar } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  RadialLinearScale
-);
-
-const RadarStacked = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-    ],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 40, 60, 80, 90, 100],
-        borderColor: colors.primary,
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        fill: true,
-      },
-      {
-        label: "Dataset 2",
-        data: [30, 60, 70, 80, 90, 60, 60, 80],
-        borderColor: colors.warning,
-        backgroundColor: hexToRGB(colors.warning, 0.5),
-        fill: true,
-      },
-      {
-        label: "Dataset 3",
-        data: [110, 70, 40, 190, 20, 10, 100, 70],
-        borderColor: colors.info,
-        backgroundColor: hexToRGB(colors.info, 0.5),
-        fill: true,
-      },
-      {
-        label: "Dataset 4",
-        data: [130, 160, 170, 180, 190, 160, 160, 60],
-        borderColor: colors.success,
-        backgroundColor: hexToRGB(colors.success, 0.5),
-        fill: true,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      filler: {
-        propagate: false,
-      },
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Radar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default RadarStacked;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/basic-bar.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/basic-bar.tsx
deleted file mode 100644
index 7afb635f..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/basic-bar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const BasicBar = ({ height = 350 }: { height?: number }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "data one",
-        data: [35, 59, 80, 81, 56, 55, 40],
-        fill: false,
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        borderColor: hexToRGB(colors.primary, 0.5),
-        borderWidth: 2,
-        borderRadius: "15",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-      {
-        label: " data two",
-        data: [24, 42, 40, 19, 86, 27, 90],
-        fill: false,
-        backgroundColor: hexToRGB(colors.success, 0.8),
-        borderColor: hexToRGB(colors.success, 0.8),
-
-        borderWidth: 2,
-        borderRadius: "15",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default BasicBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/floating-bar.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/floating-bar.tsx
deleted file mode 100644
index e5960b5d..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/floating-bar.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bar } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const FloatingBar = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "data one",
-        data: [
-          [20, 50],
-          [10, 80],
-          [50, 100],
-          [0, 60],
-          [25, 50],
-          [12, 50],
-          [10, 70],
-        ],
-        fill: false,
-        backgroundColor: hexToRGB(colors.info, 1),
-        borderColor: hexToRGB(colors.info, 1),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-      {
-        label: "data two",
-        data: [
-          [25, 40],
-          [20, 60],
-          [60, 90],
-          [0, 30],
-          [15, 40],
-          [20, 40],
-          [30, 60],
-        ],
-        fill: false,
-        backgroundColor: hexToRGB(colors.warning, 0.9),
-        borderColor: hexToRGB(colors.warning, 0.9),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default FloatingBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/horizontal-bar.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/horizontal-bar.tsx
deleted file mode 100644
index 679e6667..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/horizontal-bar.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bar } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const HorizontalBar = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "data one",
-        data: [
-          [20, 50],
-          [10, 80],
-          [50, 100],
-          [0, 60],
-          [25, 50],
-          [12, 50],
-          [10, 70],
-        ],
-        fill: false,
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        borderColor: hexToRGB(colors.primary, 0.5),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-      {
-        label: "data two",
-        data: [
-          [25, 40],
-          [20, 60],
-          [60, 90],
-          [0, 30],
-          [15, 40],
-          [20, 40],
-          [30, 60],
-        ],
-        fill: false,
-        backgroundColor: hexToRGB(colors.info, 0.9),
-        borderColor: hexToRGB(colors.info, 0.9),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      }
-    ]
-  };
-  const options: any = {
-    indexAxis: "y",
-    responsive: true,
-    plugins: {
-      position: "right",
-      labels: {
-        color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default HorizontalBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/layout.tsx
deleted file mode 100644
index b6f4af5a..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Bar Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/page.tsx
deleted file mode 100644
index f09e610c..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/page.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicBar from "./basic-bar";
-import FloatingBar from "./floating-bar";
-import HorizontalBar from "./horizontal-bar";
-import StackedBar from "./stacked-bar";
-import StackedBarWithGroups from "./stackedbar-with-groups";
-import VerticalBar from "./vertical-bar";
-
-const ChartsChartJsBarPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart Border Radius</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Floating Bars</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <FloatingBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Horizontal Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <HorizontalBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked  Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bar Chart with Groups</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBarWithGroups />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Vertical Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <VerticalBar />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartsChartJsBarPage;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stacked-bar.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stacked-bar.tsx
deleted file mode 100644
index f0df2221..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stacked-bar.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const StackedBar = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "data one",
-        data: [35, 59, 80, 81, 56, 55, 40],
-        fill: false,
-        backgroundColor: hexToRGB(colors.primary, 0.8),
-        borderColor: hexToRGB(colors.primary, 0.9),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-      {
-        label: "data two",
-        data: [24, 42, 40, 19, 86, 27, 60],
-        fill: false,
-        backgroundColor: hexToRGB(colors.success, 1),
-        borderColor: hexToRGB(colors.success, 0.8),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-      {
-        label: "data three",
-        data: [20, 30, 40, 15, 70, 40, 50],
-        fill: false,
-        backgroundColor: hexToRGB(colors.info, 0.8),
-        borderColor: hexToRGB(colors.info, 0.9),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default StackedBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stackedbar-with-groups.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stackedbar-with-groups.tsx
deleted file mode 100644
index 33e2af53..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stackedbar-with-groups.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const StackedBarWithGroups = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "data one",
-        data: [50, 59, 80, 81, 56, 55, 40],
-        fill: false,
-        backgroundColor: hexToRGB(colors.primary, 0.8),
-        borderColor: hexToRGB(colors.primary, 0.9),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-        stack: "Stack 0",
-      },
-      {
-        label: "data two",
-        data: [54, 42, 40, 19, 86, 27, 60],
-        fill: false,
-        backgroundColor: hexToRGB(colors.success, 1),
-        borderColor: hexToRGB(colors.success, 0.8),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-        stack: "Stack 0",
-      },
-      {
-        label: "data three",
-        data: [20, 30, 40, 15, 70, 40, 50],
-        fill: false,
-        backgroundColor: hexToRGB(colors.info, 0.8),
-        borderColor: hexToRGB(colors.info, 0.9),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-        stack: "Stack 1",
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        stacked: true,
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default StackedBarWithGroups;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/vertical-bar.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/vertical-bar.tsx
deleted file mode 100644
index c0f9ffef..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/vertical-bar.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const VerticalBar = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "data one",
-        data: [-35, 59, -80, 81, 56, 55, -40],
-        fill: false,
-        backgroundColor: hexToRGB(colors.primary, 0.8),
-        borderColor: hexToRGB(colors.primary, 0.9),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-      {
-        label: "data two",
-        data: [-24, 42, -40, 19, 86, 27, -60],
-        fill: false,
-        backgroundColor: hexToRGB(colors.info, 1),
-        borderColor: hexToRGB(colors.info, 0.8),
-
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 25,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default VerticalBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/alignment-andtitle-position.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/alignment-andtitle-position.tsx
deleted file mode 100644
index 4f91c19a..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/alignment-andtitle-position.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const AlignmentAndTitlePosition = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.warning,
-        fill: false,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        position: "bottom",
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-          text: "The Chart Title",
-        },
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default AlignmentAndTitlePosition;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/layout.tsx
deleted file mode 100644
index c538be32..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Legend Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-events.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-events.tsx
deleted file mode 100644
index 7629187e..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-events.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Doughnut } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
-
-const LegendEvents = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["Primary", "Info", "Warning", "Success", "Muted"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20],
-        backgroundColor: [colors.primary, colors.info, colors.warning, colors.success, colors.secondary],
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Doughnut
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default LegendEvents;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-html.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-html.tsx
deleted file mode 100644
index 4559d2b5..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-html.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-} from "chart.js";
-
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { colors } from "@/lib/colors";
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const LegendHTML = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.primary,
-        fill: false,
-      },
-      {
-        label: "Dataset 1",
-        data: [30, 60, 70, 90, 50, 40, 30],
-        borderColor: colors.info,
-        fill: false,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default LegendHTML;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-position.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-position.tsx
deleted file mode 100644
index 3680c6eb..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-position.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const LegendPosition = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Bottom Legend",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.success,
-        fill: false,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        position: "bottom",
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height} />
-    </div>
-  );
-};
-
-export default LegendPosition;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/page.tsx
deleted file mode 100644
index e9708f87..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import LegendEvents from "./legend-events";
-import LegendHTML from "./legend-html";
-import PointStyle from "./point-style";
-import LegendPosition from "./legend-position";
-import AlignmentAndTitlePosition from "./alignment-andtitle-position";
-
-
-const ChartsChartJsLegendPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Events</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LegendEvents />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>HTML Legend(incompleted)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LegendHTML />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Point Style</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PointStyle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Legend Position</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LegendPosition />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Alignment and Title Position</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <AlignmentAndTitlePosition />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartsChartJsLegendPage;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/point-style.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/point-style.tsx
deleted file mode 100644
index 3275020d..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/point-style.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const PointStyle = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.warning,
-        fill: false,
-        borderWidth: 1,
-        pointStyle: "rectRot",
-        pointRadius: 5,
-        pointBorderColor: colors.warning,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default PointStyle;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/basic-line.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/basic-line.tsx
deleted file mode 100644
index 8af3e67d..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/basic-line.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const BasicLine = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [35, 59, 80, 81, 56, 55, 40],
-        borderColor: hexToRGB(colors.primary, 0.5),
-        tension: 0.1,
-      },
-      {
-        label: "Dataset 2",
-        data: [24, 42, 40, 19, 86, 27, 90],
-        borderColor: hexToRGB(colors.warning, 0.5),
-        tension: 0.1,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default BasicLine;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/interpolation-modes.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/interpolation-modes.tsx
deleted file mode 100644
index 295b24d5..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/interpolation-modes.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const InterpolationModes = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-  const DATA_COUNT = 12;
-  const labels = [];
-  for (let i = 0; i < DATA_COUNT; ++i) {
-    labels.push(i.toString());
-  }
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Cubic interpolation (monotone)",
-        data: [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170],
-        borderColor: hexToRGB(colors.danger, 0.5),
-        tension: 0.4,
-      },
-      {
-        label: "Cubic interpolation",
-        data: [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170],
-        borderColor: hexToRGB(colors.primary, 0.5),
-        tension: 0.4,
-      },
-      {
-        label: "Linear interpolation (default)",
-        data: [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170],
-        borderColor: hexToRGB(colors.success, 0.5),
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default InterpolationModes;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/layout.tsx
deleted file mode 100644
index 36439c03..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const metadata = {
-  title: "Chart-js Line Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
-
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/line-styling.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/line-styling.tsx
deleted file mode 100644
index b64632f2..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/line-styling.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  Filler,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  Filler
-);
-
-const LineStyling = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Unfilled",
-        data: [45, -23, 67, -12, 89, -34, 56],
-        borderColor: hexToRGB(colors.success, 0.5),
-        tension: 0.4,
-        fill: false,
-      },
-      {
-        label: "Dashed",
-        data: [-67, 34, -89, 12, -45, 78, -23],
-        borderColor: hexToRGB(colors.info, 0.5),
-        borderDash: [5, 5],
-        fill: false,
-      },
-      {
-        label: "Filled",
-        data: [23, -56, 78, -34, 45, -67, 89],
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        fill: true,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      filler: {
-        propagate: false,
-      },
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
-    },
-
-    scales: {
-      y: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-        }
-      }
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default LineStyling;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/linesegment-styling.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/linesegment-styling.tsx
deleted file mode 100644
index 386bd159..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/linesegment-styling.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-interface Context {
-  p0: {
-    skip: boolean;
-    parsed: { y: number };
-  };
-  p1: {
-    skip: boolean;
-    parsed: { y: number };
-  };
-}
-
-const LineSegmentStyling = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-  const skipped = (ctx: Context, value: string | number): string | number | undefined =>
-    ctx.p0.skip || ctx.p1.skip ? value : undefined;
-
-  const down = (ctx: Context, value: string | number): string | number | undefined =>
-    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
-
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [65, 59, NaN, 48, 56, 57, 40],
-        borderColor: hexToRGB(colors.info, 0.5),
-        segment: {
-          borderColor: (ctx: Context) =>
-            skipped(ctx, colors.primary) || down(ctx, colors.danger),
-          borderDash: (ctx: Context): number[] | undefined => skipped(ctx, [6, 6] as any) as number[] | undefined
-        },
-        spanGaps: true
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default LineSegmentStyling;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/multi-axisline-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/multi-axisline-chart.tsx
deleted file mode 100644
index 25690485..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/multi-axisline-chart.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const MultiAxisLineChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-  const data: any = {
-    labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: labels.map(() =>
-          890
-        ),
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        yAxisID: "y",
-      },
-      {
-        label: "Dataset 2",
-        data: labels.map(() =>
-          670
-        ),
-        borderColor: hexToRGB(colors.primary, 0.5),
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        yAxisID: "y1",
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    data: data,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      y1: {
-        grid: {
-          drawTicks: false,
-          drawOnChartArea: false,
-        },
-        position: "right",
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default MultiAxisLineChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/page.tsx
deleted file mode 100644
index 592bf143..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/page.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicLine from "./basic-line";
-import InterpolationModes from "./interpolation-modes";
-import MultiAxisLineChart from "./multi-axisline-chart";
-import PointStyling from "./point-styling";
-import LineSegmentStyling from "./linesegment-styling";
-import SteppedLineCharts from "./steppedline-charts";
-import LineStyling from "./line-styling";
-
-const ChartsChartJsBar = () => {
-  return (
-    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Basic Line Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BasicLine />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Interpolation Modes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <InterpolationModes />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Multi Axis Line Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <MultiAxisLineChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Point Styling</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <PointStyling />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Line Segment Styling</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineSegmentStyling />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Stepped Line Charts</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SteppedLineCharts />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Line Styling</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineStyling />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default ChartsChartJsBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/point-styling.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/point-styling.tsx
deleted file mode 100644
index 57ccbcee..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/point-styling.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const PointStyling = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const labels = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6"];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset",
-        data: labels.map(() => 89),
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        pointStyle: "circle",
-        pointRadius: 10,
-        pointHoverRadius: 15,
-      }
-    ]
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default PointStyling;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/steppedline-charts.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/steppedline-charts.tsx
deleted file mode 100644
index 68b93599..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/steppedline-charts.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const SteppedLineCharts = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-  const labels = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6"];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset",
-        data: labels.map(() => -12),
-        borderColor: hexToRGB(colors.danger, 0.5),
-        fill: false,
-        stepped: true,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default SteppedLineCharts;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/bubble-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/bubble-chart.tsx
deleted file mode 100644
index 4c3d54a9..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/bubble-chart.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bubble } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const BubbleChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "1st Dataset",
-        data: [
-          {
-            x: 20,
-            y: 30,
-            r: 15,
-          },
-          {
-            x: 40,
-            y: 10,
-            r: 10,
-          },
-        ],
-        backgroundColor: colors.primary,
-      },
-      {
-        label: "2nd Dataset",
-        data: [
-          {
-            x: 20,
-            y: 60,
-            r: 15,
-          },
-          {
-            x: 40,
-            y: 60,
-            r: 10,
-          },
-        ],
-        backgroundColor: colors.warning,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bubble options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default BubbleChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/centeredpoint-labels.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/centeredpoint-labels.tsx
deleted file mode 100644
index 83d00f41..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/centeredpoint-labels.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  RadialLinearScale,
-} from "chart.js";
-
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { colors } from "@/lib/colors";
-import { PolarArea } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  RadialLinearScale
-);
-
-const PolarAreaCenteredPointLabel = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["Primary", "Info", "Warning", "Success"],
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [11, 16, 7, 3, 14],
-        backgroundColor: [colors.primary, colors.info, colors.info, colors.success],
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <PolarArea options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default PolarAreaCenteredPointLabel;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/combo-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/combo-chart.tsx
deleted file mode 100644
index 1ff7cf35..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/combo-chart.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  BarElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bar } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  BarElement
-);
-
-const ComboChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [50, 60, 30, 70, 80, 90, 100, 40],
-        backgroundColor: hexToRGB(colors.info, 0.5),
-        borderColor: hexToRGB(colors.info, 1),
-        order: 1,
-      },
-      {
-        label: "Dataset 2",
-        data: [70, 90, 50, 100, 80, 40, 100, 40],
-        backgroundColor: hexToRGB(colors.warning, 0.5),
-        borderColor: hexToRGB(colors.warning, 1),
-        type: "line",
-        order: 0,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default ComboChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/doughnut-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/doughnut-chart.tsx
deleted file mode 100644
index 29c1d132..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/doughnut-chart.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Doughnut } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
-
-const DoughnutChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["Primary", "Info", "Warning", "Success"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [50, 60, 30, 70, 80, 90, 100, 40],
-        backgroundColor: [
-          hexToRGB(colors.primary, 0.5),
-          hexToRGB(colors.info, 0.5),
-          hexToRGB(colors.warning, 0.5),
-          hexToRGB(colors.success, 0.5),
-        ],
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Doughnut options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default DoughnutChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/layout.tsx
deleted file mode 100644
index 06b33208..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Other Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/multi-series-pie.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/multi-series-pie.tsx
deleted file mode 100644
index 3378dbba..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/multi-series-pie.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Doughnut } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
-
-const MultiSeriesPieChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["Primary", "Info", "Warning", "Success"],
-    datasets: [
-      {
-        backgroundColor: [colors.primary, colors.info],
-        data: [21, 79],
-      },
-      {
-        backgroundColor: [colors.warning, colors.success],
-        data: [33, 67],
-      },
-      {
-        backgroundColor: [colors.primary, colors.warning],
-        data: [20, 80],
-      },
-      {
-        backgroundColor: [colors.success, colors.info],
-        data: [10, 90],
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Doughnut options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default MultiSeriesPieChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx
deleted file mode 100644
index e8931937..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import MultiSeriesPieChart from "./multi-series-pie";
-import PolarAreaChart from "./polar-area";
-import PolarAreaCenteredPointLabel from "./centeredpoint-labels";
-import RadarChart from "./radar-chart";
-import BubbleChart from "./bubble-chart";
-import ComboChart from "./combo-chart";
-import DoughnutChart from "./doughnut-chart";
-import PieChart from "./pie-chart";
-import ScatterChart from "./scatter-chart";
-
-
-const ChartsChartJsOther = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BubbleChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Combo bar/line</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ComboChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Doughnut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DoughnutChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multi Series Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultiSeriesPieChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PieChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Polar Area</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PolarAreaChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Polar Area Centered Point Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PolarAreaCenteredPointLabel />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Radar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RadarChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScatterChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartsChartJsOther;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/pie-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/pie-chart.tsx
deleted file mode 100644
index ce339d98..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/pie-chart.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Doughnut } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
-
-const PieChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["Primary", "Info", "Warning", "Success"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70],
-        backgroundColor: [colors.primary, colors.info, colors.info, colors.success],
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Doughnut
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default PieChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/polar-area.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/polar-area.tsx
deleted file mode 100644
index 7d1089a0..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/polar-area.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  RadialLinearScale,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { PolarArea } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  RadialLinearScale
-);
-
-const PolarAreaChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["Primary", "Info", "Warning", "Success"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70],
-        backgroundColor: [colors.primary, colors.info, colors.info, colors.success],
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <PolarArea
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default PolarAreaChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/radar-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/radar-chart.tsx
deleted file mode 100644
index c4001260..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/radar-chart.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Radar } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
-
-const RadarChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-  const data: any = {
-    labels: [
-      "Eating",
-      "Drinking",
-      "Sleeping",
-      "Designing",
-      "Coding",
-      "Cycling",
-      "Running",
-    ],
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [65, 59, 90, 81, 56, 55, 40],
-        fill: true,
-        backgroundColor: colors.primary,
-        borderColor: colors.primary,
-        pointBackgroundColor: colors.primary,
-        pointBorderColor: colors.primary,
-        pointHoverBackgroundColor: colors.warning,
-        pointHoverBorderColor: colors.primary,
-      },
-      {
-        label: "My Second Dataset",
-        data: [28, 48, 40, 19, 96, 27, 100],
-        fill: true,
-        backgroundColor: colors.info,
-        borderColor: colors.info,
-        pointBackgroundColor: colors.info,
-        pointBorderColor: colors.info,
-        pointHoverBackgroundColor: colors.warning,
-        pointHoverBorderColor: colors.warning,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Radar
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default RadarChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/scatter-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/scatter-chart.tsx
deleted file mode 100644
index ec4fb246..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/scatter-chart.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-import React from "react";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Scatter } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-const ScatterChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data: any = {
-    labels: [
-      "Eating",
-      "Drinking",
-      "Sleeping",
-      "Designing",
-      "Coding",
-      "Cycling",
-      "Running",
-    ],
-    datasets: [
-      {
-        label: "Scatter Dataset",
-        data: [
-          {
-            x: -10,
-            y: 0,
-          },
-          {
-            x: 0,
-            y: 10,
-          },
-          {
-            x: 10,
-            y: 5,
-          },
-          {
-            x: 0.5,
-            y: 5.5,
-          },
-        ],
-        backgroundColor: colors.warning,
-      },
-    ],
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Scatter
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default ScatterChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/center-positioning.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/center-positioning.tsx
deleted file mode 100644
index cd37367c..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/center-positioning.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Scatter } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const CenterPositioningScale = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const data: any = {
-    labels: [
-      "Eating",
-      "Drinking",
-      "Sleeping",
-      "Designing",
-      "Coding",
-      "Cycling",
-      "Running",
-    ],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [
-          {
-            x: -10,
-            y: 0,
-          },
-          {
-            x: 0,
-            y: 10,
-          },
-          {
-            x: 10,
-            y: 5,
-          },
-          {
-            x: 0.5,
-            y: 5.5,
-          },
-          {
-            x: -20,
-            y: 10,
-          },
-          {
-            x: 40,
-            y: 10,
-          },
-          {
-            x: 20,
-            y: 25,
-          },
-          {
-            x: 2.5,
-            y: 3.5,
-          },
-        ],
-        backgroundColor: colors.primary,
-      },
-      {
-        label: "Dataset 2",
-        data: [
-          {
-            x: 10,
-            y: 20,
-          },
-          {
-            x: 10,
-            y: 10,
-          },
-          {
-            x: 10,
-            y: 5,
-          },
-          {
-            x: 2.5,
-            y: 4.5,
-          },
-          {
-            x: -10,
-            y: 20,
-          },
-          {
-            x: 40,
-            y: 10,
-          },
-          {
-            x: 20,
-            y: 35,
-          },
-        ],
-        backgroundColor: colors.warning,
-      },
-    ],
-    scales: {
-
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          display: false
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Scatter
-        options={options}
-        data={data}
-        height={height}
-      />
-    </div>
-  );
-};
-
-export default CenterPositioningScale;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/grid-configure.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/grid-configure.tsx
deleted file mode 100644
index 935aa2a8..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/grid-configure.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { colors } from "@/lib/colors";
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const GridConfigure = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [35, 59, 80, 81, 56, 55, 40],
-        borderColor: hexToRGB(colors.primary, 0.5),
-        tension: 0.1,
-      },
-      {
-        label: "Dataset 2",
-        data: [24, 42, 40, 19, 86, 27, 90],
-        borderColor: hexToRGB(colors.warning, 0.5),
-        tension: 0.1,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          display: false
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        border: {
-          display: true,
-        },
-        grid: {
-          display: false,
-          drawOnChartArea: true,
-          drawTicks: true,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default GridConfigure;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/layout.tsx
deleted file mode 100644
index 546dfabf..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Scale Option Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/page.tsx
deleted file mode 100644
index 2d1db47a..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import CenterPositioningScale from "./center-positioning";
-import GridConfigure from "./grid-configure";
-import TickConfiguration from "./tick-configuration";
-import TitleConfiguration from "./title-configuration";
-
-
-const ChartsChartJsScaleOptions = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Center Positioning</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CenterPositioningScale />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grid Configuration</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GridConfigure />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Tick Configuration</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TickConfiguration />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Title Configuration</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TitleConfiguration />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartsChartJsScaleOptions;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/tick-configuration.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/tick-configuration.tsx
deleted file mode 100644
index e5b49010..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/tick-configuration.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const TickConfiguration = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [35, 59, 80, 81, 56, 55, 40],
-        borderColor: hexToRGB(colors.primary, 1),
-        tension: 0.1,
-      },
-      {
-        label: "Dataset 2",
-        data: [24, 42, 40, 19, 86, 27, 90],
-        borderColor: hexToRGB(colors.warning),
-        tension: 0.1,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          callback: function (val: number, index: number) {
-            return index % 2 === 0 ? this.getLabelForValue(val) : "";
-          },
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        } as any,
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default TickConfiguration;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/title-configuration.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/title-configuration.tsx
deleted file mode 100644
index f4f77de7..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/title-configuration.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const TitleConfiguration = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [35, 59, 80, 81, 56, 55, 40],
-        borderColor: hexToRGB(colors.primary, 1),
-        tension: 0.1,
-      },
-      {
-        label: "Dataset 2",
-        data: [24, 42, 40, 19, 86, 27, 90],
-        borderColor: hexToRGB(colors.warning),
-        tension: 0.1,
-      }
-    ]
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false,
-        },
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-          text: "YAxis Title",
-          font: {
-            family: "Times",
-            size: 20,
-            style: "normal",
-            lineHeight: 1.2,
-          },
-          padding: { top: 30, left: 0, right: 0, bottom: 0 },
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-          text: "XAxis Title",
-          font: {
-            family: "Comic Sans MS",
-            size: 20,
-            weight: "bold",
-            lineHeight: 1.2,
-          },
-          padding: { top: 20, left: 0, right: 0, bottom: 0 },
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default TitleConfiguration;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/layout.tsx
deleted file mode 100644
index ba65d550..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Scale Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-minmax.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-minmax.tsx
deleted file mode 100644
index 447cf97d..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-minmax.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const LinearScaleMinMax = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [10, 30, 50, 20, 25, 44, -10],
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        tension: 0.1,
-      },
-      {
-        label: "Dataset 2",
-        data: [100, 33, 22, 19, 11, 49, 30],
-        borderColor: hexToRGB(colors.primary, 0.5),
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        tension: 0.1,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-        text: "Min and Max Settings",
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        min: 10,
-        max: 50,
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default LinearScaleMinMax;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-stepsize.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-stepsize.tsx
deleted file mode 100644
index b184c1d8..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-stepsize.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  Filler,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  Filler
-);
-
-const LinearScaleStepsize = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [25, 45, 67, 34, 89, 56, 78],
-        borderColor: hexToRGB(colors.primary, 0.5),
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        fill: true,
-      },
-      {
-        label: "Dataset 2",
-        data: [67, 23, 45, 78, 34, 89, 12],
-        borderColor: hexToRGB(colors.success, 0.5),
-        backgroundColor: hexToRGB(colors.success, 0.5),
-        fill: true,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-        text: "Chart.js Line Chart",
-      }
-    },
-    hover: {
-      mode: "index",
-      intersec: false,
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-          text: "Value",
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          stepSize: 50,
-        },
-        min: 0,
-        max: 100,
-      },
-      x: {
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-          text: "Month",
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default LinearScaleStepsize;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/logscale-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/logscale-chart.tsx
deleted file mode 100644
index 8a3cc5c0..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/logscale-chart.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  LogarithmicScale,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-  LogarithmicScale
-);
-
-const LogScaleChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: labels.map(() => 45),
-        borderColor: hexToRGB(colors.danger, 0.5),
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-        text: "Chart.js Line Chart - Logarithmic",
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        type: "logarithmic",
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default LogScaleChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/page.tsx
deleted file mode 100644
index 99e7e2b1..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import LinearScaleMinMax from "./linearscale-minmax";
-import LinearScaleSuggestedMinMax from "./suggested-minmax";
-import LinearScaleStepSize from "./linearscale-stepsize";
-import StackedLinearCategory from "./stackedlinear-category";
-import LogScaleChart from "./logscale-chart";
-import TimeScaleChart from "./timescale-chart";
-
-const ChartsChartJsScales = () => {
-  return (
-    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Linear Scale - Min-Max</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LinearScaleMinMax />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Linear Scale Suggested Min-Max</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LinearScaleSuggestedMinMax />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Linear Scale Step Size</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LinearScaleStepSize />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>LogScale</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LogScaleChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Stacked Linear / Category</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <StackedLinearCategory />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Time Scale</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <TimeScaleChart />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default ChartsChartJsScales;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/stackedlinear-category.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/stackedlinear-category.tsx
deleted file mode 100644
index e4765cba..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/stackedlinear-category.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const StackedLinearCategory = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [10, 30, 39, 20, 25, 34, -10],
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-      },
-      {
-        label: "Dataset 2",
-        data: ["ON", "ON", "OFF", "ON", "OFF", "OFF", "ON"],
-        borderColor: hexToRGB(colors.primary, 0.5),
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        stepped: true,
-        yAxisID: "y2",
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-        text: "Stacked scales",
-      }
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        stackWeight: 2,
-        type: "linear",
-        position: "left",
-        stack: "demo",
-
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      y2: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        stackWeight: 1,
-        type: "category",
-        labels: ["ON", "OFF"],
-        offset: true,
-        position: "left",
-        stack: "demo",
-        border: {
-          color: hexToRGB(colors.primary, 0.5),
-        }
-      }
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default StackedLinearCategory;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/suggested-minmax.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/suggested-minmax.tsx
deleted file mode 100644
index e015c359..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/suggested-minmax.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const LinearScaleSuggestedMinMax = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [10, 30, 39, 20, 25, 34, -10],
-        borderColor: hexToRGB(colors.danger, 0.5),
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        tension: 0.1,
-      },
-      {
-        label: "Dataset 2",
-        data: [18, 33, 22, 19, 11, 39, 30],
-        borderColor: hexToRGB(colors.primary, 0.5),
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        tension: 0.1,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-        text: "Suggested Min and Max Settings",
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        suggestedMin: 30,
-        suggestedMax: 50,
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-        }
-      }
-    },
-
-    maintainAspectRatio: false,
-  };
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default LinearScaleSuggestedMinMax;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/timescale-chart.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/timescale-chart.tsx
deleted file mode 100644
index 3116993d..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/timescale-chart.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-const TimeScaleChart = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "Nov 24",
-    "Nov 25",
-    "Nov 26",
-    "Nov 27",
-    "Nov 28",
-    "Nov 29",
-    "Nov 30",
-    "Dec 1",
-    "Dec 2",
-    "Dec 3",
-    "Dec 4",
-    "Dec 5",
-    "Dec 6",
-    "Dec 7",
-    "Dec 8",
-    "Dec 9",
-    "Dec 10",
-    "Dec 11",
-    "Dec 12",
-    "Dec 13",
-    "Dec 14",
-  ];
-
-  const data: any = {
-    labels: labels,
-    datasets: [
-      {
-        label: "My First dataset",
-        backgroundColor: hexToRGB(colors.danger, 0.5),
-        borderColor: hexToRGB(colors.danger, 0.5),
-        fill: false,
-        data: labels.map(() => 90),
-      },
-      {
-        label: "My Second dataset",
-        backgroundColor: hexToRGB(colors.primary, 0.5),
-        borderColor: hexToRGB(colors.primary, 0.5),
-        fill: false,
-        data: labels.map(() => 45),
-      },
-      {
-        label: "Dataset with point data",
-        backgroundColor: hexToRGB(colors.success, 0.5),
-        borderColor: hexToRGB(colors.success, 0.5),
-        fill: false,
-        data: [
-          {
-            x: [100],
-            y: labels.map(() => 67),
-          },
-          {
-            x: [43],
-            y: labels.map(() => 67),
-          },
-          {
-            x: [16],
-            y: labels.map(() => 56),
-          },
-          {
-            x: [5],
-            y: labels.map(() => 90),
-          },
-        ],
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        display: true,
-        text: "Chart.js Time Scale",
-      },
-    },
-
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-          text: "value",
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        time: {
-          tooltipFormat: "DD T",
-        },
-        title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-          display: true,
-          text: "Date",
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default TimeScaleChart;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/layout.tsx
deleted file mode 100644
index abaf2a8c..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Scriptable Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/page.tsx
deleted file mode 100644
index 9c701964..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/page.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import ScriptBar from "./script-bar";
-import ScriptBubble from "./script-bubble";
-
-const ChartsChartJsScriptBar = () => {
-    return (
-        <div className="grid  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScriptBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScriptBubble />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartsChartJsScriptBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bar.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bar.tsx
deleted file mode 100644
index a23101be..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bar.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { colors } from "@/lib/colors";
-import { Bar } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-interface Context {
-  parsed: {
-    y: number;
-  };
-}
-interface UtilsType {
-  transparentize: (color: string, opacity: number) => string;
-}
-
-const Utils: UtilsType = {
-  transparentize: (color, opacity) => {
-    return color;
-  },
-};
-
-const colorize = (opaque: boolean) => {
-  return (ctx: Context) => {
-    const v = ctx.parsed.y;
-    const c =
-      v < -50 ? "#D60000" : v < 0 ? "#F46300" : v < 50 ? "#0358B6" : "#44DE28";
-    return opaque ? c : Utils.transparentize(c, 1 - Math.abs(v / 150));
-  };
-};
-
-const ScriptBar = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "data one",
-        data: [35, -59, 80, -81, 56, -55, 40],
-        fill: false,
-        borderWidth: 2,
-        borderRadius: "0",
-        borderSkipped: "bottom",
-        barThickness: 50,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: false,
-    },
-    elements: {
-      bar: {
-        backgroundColor: colorize(true),
-        borderColor: colorize(true),
-        borderWidth: 4,
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bar options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default ScriptBar;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bubble.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bubble.tsx
deleted file mode 100644
index 36921417..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bubble.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Bubble } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
-
-
-const ScriptBubble = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "1st Dataset",
-        data: [
-          {
-            x: 20,
-            y: 30,
-            r: 15,
-          },
-          {
-            x: 40,
-            y: 10,
-            r: 10,
-          },
-        ],
-      },
-      {
-        label: "2nd Dataset",
-        data: [
-          {
-            x: 20,
-            y: 60,
-            r: 15,
-          },
-          {
-            x: 40,
-            y: 60,
-            r: 10,
-          },
-        ],
-      },
-    ],
-  };
-  const options: any = {
-    aspectRatio: 1,
-    responsive: true,
-    plugins: {
-      legend: {
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    elements: {
-      point: {
-        backgroundColor: function (context: any) {
-          const index = context.dataIndex;
-          const value = context.dataset.data[index];
-          return value < 0 ? "red" : index % 2 ? "blue" : "green";
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Bubble options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default ScriptBubble;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/layout.tsx
deleted file mode 100644
index a55d91b7..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const metadata = {
-  title: "Chart-js Title Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
-
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/page.tsx
deleted file mode 100644
index f3cdc77a..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TitleAlignment from "./title-alignment";
-
-const ChartsChartJsTitlePage = () => {
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Alignment</CardTitle>
-            </CardHeader>
-            <CardContent>
-                <TitleAlignment />
-            </CardContent>
-        </Card>
-    );
-};
-
-export default ChartsChartJsTitlePage;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/title-alignment.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/title-alignment.tsx
deleted file mode 100644
index 20ed9290..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/title-alignment.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const TitleAlignment = ({ height = 450 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.warning,
-        fill: false,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        position: "top", // left,right,top,bottom
-        title: {
-          display: true,
-          text: "The Chart Title",
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default TitleAlignment;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/custom-tooltip.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/custom-tooltip.tsx
deleted file mode 100644
index 86052c38..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/custom-tooltip.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-  TooltipItem,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const footer = (tooltipItems: TooltipItem<'line'>[]) => {
-  let sum = 0;
-
-  tooltipItems.forEach(function (tooltipItem) {
-    sum += tooltipItem.parsed.y;
-  });
-  return "Sum: " + sum;
-};
-
-const CustomTooltip = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.warning,
-        fill: false,
-      },
-      {
-        label: "Dataset 2",
-        data: [40, 70, 80, 90, 40, 50, 40],
-        borderColor: colors.info,
-        fill: false,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    plugins: {
-      legend: {
-        position: "top",
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      tooltip: {
-        callbacks: {
-          footer: footer,
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default CustomTooltip;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/interaction-modes.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/interaction-modes.tsx
deleted file mode 100644
index b102f4a3..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/interaction-modes.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-  TooltipItem,
-} from "chart.js";
-
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-import { colors } from "@/lib/colors";
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
-  let sum = 0;
-
-  tooltipItems.forEach(function (tooltipItem) {
-    sum += tooltipItem.parsed.y;
-  });
-  return "Sum: " + sum;
-};
-
-const InteractionModes = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.warning,
-        fill: false,
-      },
-      {
-        label: "Dataset 2",
-        data: [40, 70, 80, 90, 40, 50, 40],
-        borderColor: colors.info,
-        fill: false,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    interaction: {
-      intersect: false,
-      mode: "index",
-    },
-    plugins: {
-      legend: {
-        position: "top",
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      tooltip: {
-        callbacks: {
-          footer: customTooltip,
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default InteractionModes;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/layout.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/layout.tsx
deleted file mode 100644
index 225c271a..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Chart-js Tooltip Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/page.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/page.tsx
deleted file mode 100644
index 0e296e17..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/page.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import CustomTooltip from "./custom-tooltip";
-import InteractionModes from "./interaction-modes";
-import TooltipPointStyle from "./tooltip-point-style";
-import PositionTooltip from "./position-tooltip";
-
-const ChartsChartJsTitlePage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom Tooltip Content</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomTooltip />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Interaction Modes</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <InteractionModes />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Point Style</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TooltipPointStyle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Position(incomplete)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PositionTooltip />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartsChartJsTitlePage;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/position-tooltip.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/position-tooltip.tsx
deleted file mode 100644
index 36e9e8db..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/position-tooltip.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-  TooltipItem,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
-  let sum = 0;
-
-  tooltipItems.forEach(function (tooltipItem) {
-    sum += tooltipItem.parsed.y;
-  });
-  return "Sum: " + sum;
-};
-
-const PositionTooltip = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Dataset 1",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.warning,
-        fill: false,
-      },
-      {
-        label: "Dataset 2",
-        data: [40, 70, 80, 90, 40, 50, 40],
-        borderColor: colors.info,
-        fill: false,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    interaction: {
-      intersect: false,
-      mode: "index",
-    },
-    plugins: {
-      legend: {
-        position: "top",
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      tooltip: {
-        callbacks: {
-          footer: customTooltip,
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default PositionTooltip;
diff --git a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/tooltip-point-style.tsx b/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/tooltip-point-style.tsx
deleted file mode 100644
index a900d68f..00000000
--- a/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/tooltip-point-style.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client";
-import React from "react";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
-  TooltipItem,
-} from "chart.js";
-
-import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils";
-
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  PointElement
-);
-
-const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
-  let sum = 0;
-
-  tooltipItems.forEach(function (tooltipItem) {
-    sum += tooltipItem.parsed.y;
-  });
-  return "Sum: " + sum;
-};
-
-const TooltipPointStyle = ({ height = 350 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-
-
-  const data: any = {
-    labels: ["January", "February", "March", "April", "May", "Jun", "July"],
-    datasets: [
-      {
-        label: "Traingle",
-        data: [20, 50, 60, 70, 20, 30, 20],
-        borderColor: colors.warning,
-        fill: false,
-        pointStyle: "triangle",
-        pointRadius: 6,
-      },
-      {
-        label: "Circle",
-        data: [40, 70, 80, 90, 40, 50, 40],
-        borderColor: colors.info,
-        fill: false,
-        pointStyle: "circle",
-        pointRadius: 6,
-      },
-      {
-        label: "Star",
-        data: [30, 60, 70, 80, 30, 40, 30],
-        borderColor: colors.primary,
-        fill: false,
-        pointStyle: "star",
-        pointRadius: 6,
-      },
-    ],
-  };
-  const options: any = {
-    responsive: true,
-    interaction: {
-      intersect: false,
-      mode: "index",
-    },
-    plugins: {
-      legend: {
-        position: "top",
-        labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      tooltip: {
-        callbacks: {
-          footer: customTooltip,
-          usePointStyle: true,
-        },
-      },
-    },
-    scales: {
-      y: {
-        border: {
-          display: false
-        },
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-      x: {
-        grid: {
-          drawTicks: false,
-          display: false,
-        },
-
-        ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-  };
-
-  return (
-    <div>
-      <Line options={options} data={data} height={height} />
-    </div>
-  );
-};
-
-export default TooltipPointStyle;
diff --git a/app/[locale]/(protected)/charts/chart-js/layout.tsx b/app/[locale]/(protected)/charts/chart-js/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/charts/chart-js/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/layout.tsx b/app/[locale]/(protected)/charts/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/charts/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/area-connect-nulls.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/area-connect-nulls.tsx
deleted file mode 100644
index abf4686a..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/area-connect-nulls.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
-const AreaChartConnectNulls = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  return (
-    <div>
-      <ResponsiveContainer height={height}>
-        <AreaChart data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <Tooltip />
-          <Area
-            type="monotone"
-            dataKey="uv"
-            stackId="1"
-            stroke={colors.primary}
-            dot={true}
-            strokeWidth={2}
-            fill={colors.primary}
-            style={{
-              opacity: 0.5,
-
-            } as React.CSSProperties}
-          />
-        </AreaChart>
-      </ResponsiveContainer>
-      <ResponsiveContainer height={height}>
-        <AreaChart data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <Tooltip />
-
-          <Area
-            type="monotone"
-            dataKey="uv"
-            stackId="1"
-            stroke={colors.primary}
-            connectNulls
-            dot={true}
-            strokeWidth={2}
-            fill={colors.primary}
-            style={{
-              opacity: 0.5,
-
-            } as React.CSSProperties}
-          />
-        </AreaChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};
-
-export default AreaChartConnectNulls;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/areachart-fillby-value.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/areachart-fillby-value.tsx
deleted file mode 100644
index e81c82b1..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/areachart-fillby-value.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
-const AreaChartFillByValue = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  const gradientOffset = () => {
-    const dataMax = Math.max(...data.map((i) => i.uv));
-    const dataMin = Math.min(...data.map((i) => i.uv));
-
-    if (dataMax <= 0) {
-      return 0;
-    }
-    if (dataMin >= 0) {
-      return 1;
-    }
-
-    return dataMax / (dataMax - dataMin);
-  };
-
-  const off = gradientOffset();
-
-  return (
-    <ResponsiveContainer width={"100%"} height={height}>
-      <AreaChart data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip />
-        <defs>
-          <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
-            <stop offset={off} stopColor="#334155" stopOpacity={1} />
-            <stop offset={off} stopColor="#64748b" stopOpacity={1} />
-          </linearGradient>
-        </defs>
-
-        <Area
-          type="monotone"
-          dataKey="uv"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.primary}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default AreaChartFillByValue;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/basic-area-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/basic-area-chart.tsx
deleted file mode 100644
index 1bb5bd18..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/basic-area-chart.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
-const BasicAreaChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md gap-2 ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-  return (
-    <ResponsiveContainer height={height}>
-      <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-
-        <Area
-          type="monotone"
-          dataKey="uv"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BasicAreaChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/cardinal-area.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/cardinal-area.tsx
deleted file mode 100644
index ac9088d8..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/cardinal-area.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-import { curveCardinal } from "d3-shape";
-
-
-const CustomTooltip = ({ active, payload }: any) => {
-  if (active && payload && payload.length > 0) {
-    return (
-      <div className="bg-slate-900 text-primary-foreground p-3 rounded-md gap-2">
-        <span>{`${payload[0].name}`}</span>
-        <span>:</span>
-        <span>{`${payload[0].value}%`}</span>
-      </div>
-    );
-  }
-  return null;
-};
-
-
-
-const CardinalAreaChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const cardinal = curveCardinal.tension(0.2);
-
-  const data = [
-    { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
-    { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
-    { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
-    { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
-    { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
-    { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
-    { name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
-  ];
-
-  return (
-    <ResponsiveContainer height={height}>
-      <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Area
-          type="monotone"
-          dataKey="uv"
-          stackId="1"
-          stroke={colors.warning}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.warning}
-          style={{
-            opacity: 0.5,
-            "--theme-warning": colors.warning,
-          } as React.CSSProperties}
-        />
-        <Area
-          type={cardinal}
-          dataKey="uv"
-          stackId="1"
-          stroke={colors.success}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.success}
-          style={{
-            opacity: 0.5,
-            "--theme-success": colors.success,
-          } as React.CSSProperties}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default CardinalAreaChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/layout.tsx
deleted file mode 100644
index 9265de51..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Area Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx
deleted file mode 100644
index 7caa49e8..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicAreaChart from "./basic-area-chart";
-import StackedRechartArea from "./stacked-rechart-area";
-import TinyRechartArea from "./tiny-rechart-area";
-import PercentReAreaChart from "./percent-area";
-import CardinalAreaChart from "./cardinal-area";
-import AreaChartConnectNulls from "./area-connect-nulls";
-import ReSynchronizedAreaChart from "./synchronized-area";
-import AreaChartFillByValue from "./areachart-fillby-value";
-
-const RechartAreaPage = () => {
-  return (
-    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Basic Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BasicAreaChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Stacked Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <StackedRechartArea />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Tiny Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <TinyRechartArea />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Percent Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <PercentReAreaChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Cardinal Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <CardinalAreaChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Area Chart Fill By Value</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <AreaChartFillByValue />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Area Chart Connect Nulls</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <AreaChartConnectNulls />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Synchronized Area Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ReSynchronizedAreaChart />
-        </CardContent>
-      </Card>
-
-    </div>
-  );
-};
-
-export default RechartAreaPage;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/percent-area.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/percent-area.tsx
deleted file mode 100644
index 65f7c146..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/percent-area.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
-const PercentReAreaChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      month: "2015.01",
-      a: 4000,
-      b: 2400,
-      c: 2400,
-    },
-    {
-      month: "2015.02",
-      a: 3000,
-      b: 1398,
-      c: 2210,
-    },
-    {
-      month: "2015.03",
-      a: 2000,
-      b: 9800,
-      c: 2290,
-    },
-    {
-      month: "2015.04",
-      a: 2780,
-      b: 3908,
-      c: 2000,
-    },
-    {
-      month: "2015.05",
-      a: 1890,
-      b: 4800,
-      c: 2181,
-    },
-    {
-      month: "2015.06",
-      a: 2390,
-      b: 3800,
-      c: 2500,
-    },
-    {
-      month: "2015.07",
-      a: 3490,
-      b: 4300,
-      c: 2100,
-    },
-  ];
-
-  const toPercent = (decimal: number, fixed = 0) =>
-    `${(decimal * 100).toFixed(fixed)}%`;
-
-  const getPercent = (value: number, total: number) => {
-    const ratio = total > 0 ? value / total : 0;
-
-    return toPercent(ratio, 2);
-  };
-
-
-
-  return (
-    <ResponsiveContainer height={height}>
-      <AreaChart width={600} height={300} data={data} stackOffset="expand">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="month"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tickFormatter={toPercent}
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-
-        <Area
-          type="monotone"
-          dataKey="a"
-          stackId="1"
-          stroke={colors.warning}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.warning}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-        />
-        <Area
-          type="monotone"
-          dataKey="b"
-          stackId="1"
-          stroke={colors.success}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.success}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-        />
-        <Area
-          type="monotone"
-          dataKey="c"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.primary}
-          style={{
-            opacity: 0.5,
-
-
-          } as React.CSSProperties}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default PercentReAreaChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/stacked-rechart-area.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/stacked-rechart-area.tsx
deleted file mode 100644
index 17483394..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/stacked-rechart-area.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
-const StackedRechartArea = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer height={height}>
-      <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-
-        <Area
-          type="monotone"
-          dataKey="uv"
-          stackId="1"
-          stroke={colors.warning}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.warning}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-        />
-        <Area
-          type="monotone"
-          dataKey="pv"
-          stackId="1"
-          stroke={colors.success}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.success}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-        />
-        <Area
-          type="monotone"
-          dataKey="amt"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.primary}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default StackedRechartArea;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/synchronized-area.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/synchronized-area.tsx
deleted file mode 100644
index f0496602..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/synchronized-area.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
-const ReSynchronizedAreaChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <div>
-      <ResponsiveContainer height={height}>
-        <AreaChart width={600} height={150} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <Tooltip />
-
-          <Area
-            type="monotone"
-            dataKey="uv"
-            stackId="1"
-            stroke={colors.primary}
-            dot={true}
-            strokeWidth={2}
-            fill={colors.primary}
-            style={{
-              opacity: 0.5,
-
-            } as React.CSSProperties}
-          />
-        </AreaChart>
-      </ResponsiveContainer>
-      <ResponsiveContainer height={height}>
-        <AreaChart width={600} height={150} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: 12,
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <Tooltip />
-
-          <Area
-            type="monotone"
-            dataKey="pv"
-            stackId="1"
-            stroke={colors.success}
-            dot={true}
-            strokeWidth={2}
-            fill={colors.success}
-            style={{
-              opacity: 0.5,
-            } as React.CSSProperties}
-          />
-        </AreaChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};
-
-export default ReSynchronizedAreaChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/tiny-rechart-area.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-area/tiny-rechart-area.tsx
deleted file mode 100644
index 23205b09..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-area/tiny-rechart-area.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
-const TinyRechartArea = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload && payload.length > 0) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md gap-2">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer height={height}>
-      <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-
-        <Area
-          type="monotone"
-          dataKey="amt"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-
-          style={{
-            opacity: 0.5,
-            fill: colors.primary,
-          } as React.CSSProperties}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default TinyRechartArea;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/background-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/background-bar.tsx
deleted file mode 100644
index bd81c6c5..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/background-bar.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const BackgroundBar = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-          background={{ fill: "transparent" }}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.success}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BackgroundBar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barchart-with-multixaxis.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barchart-with-multixaxis.tsx
deleted file mode 100644
index 0a3e7227..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barchart-with-multixaxis.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-  Legend,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-interface DataPoint {
-  date: string;
-  uv: number;
-  pv: number;
-  amt: number;
-}
-
-const data: DataPoint[] = [
-  {
-    date: "2000-01",
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    date: "2000-02",
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    date: "2000-03",
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  },
-  {
-    date: "2000-04",
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    date: "2000-05",
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  },
-  {
-    date: "2000-06",
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  },
-  {
-    date: "2000-07",
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-  {
-    date: "2000-08",
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    date: "2000-09",
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    date: "2000-10",
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  },
-  {
-    date: "2000-11",
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    date: "2000-12",
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  },
-];
-
-
-const monthTickFormatter = (tick: string): string => {
-  const date = new Date(tick);
-  return (date.getMonth() + 1).toString();
-};
-const CustomizedTick = (tickProps: any): JSX.Element | null => {
-  const { x, y, payload } = tickProps;
-  if (!x || !y || !payload) return null;
-  const { value, offset } = payload;
-  const date = new Date(value);
-  const month = date.getMonth();
-  const quarterNo = Math.floor(month / 3) + 1;
-
-  if (month % 3 === 1) {
-    return <text x={x} y={y - 4} textAnchor="middle">{`Q${quarterNo}`}</text>;
-  }
-
-  const isLast = month === 11;
-
-  if (month % 3 === 0 || isLast) {
-    const pathX = Math.floor(isLast ? x + offset : x - offset) + 0.5;
-    return <path d={`M${pathX},${y - 4}v${-35}`} stroke="red" />;
-  }
-  return null;
-};
-const BarChartWithMultiAxis = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="date"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-          tickFormatter={monthTickFormatter}
-        />
-        <XAxis
-          dataKey="date"
-          axisLine={false}
-          tickLine={false}
-          interval={0}
-          tick={<CustomizedTick />}
-          height={1}
-          scale="band"
-          xAxisId="quarter"
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Bar
-          dataKey="pv"
-          fill={colors.warning}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BarChartWithMultiAxis;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barwith-minheight.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barwith-minheight.tsx
deleted file mode 100644
index 20612221..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barwith-minheight.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-  LabelList,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const renderCustomizedLabel = (props: any) => {
-  const { x, y, width, height, value } = props;
-  const radius = 10;
-
-  return (
-    <g>
-      <circle cx={x + width / 2} cy={y - radius} r={radius} fill="#8884d8" />
-      <text
-        x={x + width / 2}
-        y={y - radius}
-        fill="#fff"
-        textAnchor="middle"
-        dominantBaseline="middle"
-      >
-        {value.split(" ")[1]}
-      </text>
-    </g>
-  );
-};
-
-const BarWithMinHeight = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-          minPointSize={5}
-        >
-          <LabelList dataKey="name" content={renderCustomizedLabel} />
-        </Bar>
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-          minPointSize={10}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BarWithMinHeight;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/bi-axxial-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/bi-axxial-bar.tsx
deleted file mode 100644
index bdbfc20d..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/bi-axxial-bar.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const BiAxialBar = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          yAxisId="left"
-          orientation="left"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <YAxis
-          yAxisId="right"
-          orientation="right"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-
-        <Tooltip content={<CustomTooltip />} />
-        <Bar
-          yAxisId="left"
-          dataKey="pv"
-          fill={colors.primary}
-        />
-        <Bar
-          yAxisId="right"
-          dataKey="uv"
-          fill={colors.success}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BiAxialBar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/brush-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/brush-bar.tsx
deleted file mode 100644
index 0309856b..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/brush-bar.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Legend,
-  ReferenceLine,
-  Brush,
-} from "recharts";
-
-const data = [
-  { name: "1", uv: 300, pv: 456 },
-  { name: "2", uv: -145, pv: 230 },
-  { name: "3", uv: -100, pv: 345 },
-  { name: "4", uv: -8, pv: 450 },
-  { name: "5", uv: 100, pv: 321 },
-  { name: "6", uv: 9, pv: 235 },
-  { name: "7", uv: 53, pv: 267 },
-  { name: "8", uv: 252, pv: -378 },
-  { name: "9", uv: 79, pv: -210 },
-  { name: "10", uv: 294, pv: -23 },
-  { name: "12", uv: 43, pv: 45 },
-  { name: "13", uv: -74, pv: 90 },
-  { name: "14", uv: -71, pv: 130 },
-  { name: "15", uv: -117, pv: 11 },
-  { name: "16", uv: -186, pv: 107 },
-  { name: "17", uv: -16, pv: 926 },
-  { name: "18", uv: -125, pv: 653 },
-  { name: "19", uv: 222, pv: 366 },
-  { name: "20", uv: 372, pv: 486 },
-  { name: "21", uv: 182, pv: 512 },
-  { name: "22", uv: 164, pv: 302 },
-  { name: "23", uv: 316, pv: 425 },
-  { name: "24", uv: 131, pv: 467 },
-  { name: "25", uv: 291, pv: -190 },
-  { name: "26", uv: -47, pv: 194 },
-  { name: "27", uv: -415, pv: 371 },
-  { name: "28", uv: -182, pv: 376 },
-  { name: "29", uv: -93, pv: 295 },
-  { name: "30", uv: -99, pv: 322 },
-  { name: "31", uv: -52, pv: 246 },
-  { name: "32", uv: 154, pv: 33 },
-  { name: "33", uv: 205, pv: 354 },
-  { name: "34", uv: 70, pv: 258 },
-  { name: "35", uv: -25, pv: 359 },
-  { name: "36", uv: -59, pv: 192 },
-  { name: "37", uv: -63, pv: 464 },
-  { name: "38", uv: -91, pv: -2 },
-  { name: "39", uv: -66, pv: 154 },
-  { name: "40", uv: -50, pv: 186 },
-];
-
-const BrushBar = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Legend verticalAlign="top" wrapperStyle={{ paddingBottom: "20px" }} />
-        <ReferenceLine
-          y={0}
-          stroke='none'
-        />
-        <Brush
-          dataKey="name"
-          height={30}
-          stroke={colors.info}
-        />
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BrushBar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-shape.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-shape.tsx
deleted file mode 100644
index f5096871..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-shape.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  Cell,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const getPath = (x: number, y: number, width: number, height: number) => {
-  return `M${x},${y + height}C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3
-    }
-    ${x + width / 2}, ${y}
-    C${x + width / 2},${y + height / 3} ${x + (2 * width) / 3},${y + height} ${x + width
-    }, ${y + height}
-    Z`;
-};
-
-const TriangleBar = (props: any) => {
-  const { fill, x, y, width, height } = props;
-
-  return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />;
-};
-
-const CustomShape = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="uv"
-          fill="#8884d8"
-          shape={<TriangleBar />}
-          label={{ position: "top" }}
-        >
-          {data.map((entry, index) => (
-            <Cell
-              key={`cell-${index}`}
-              fill={colors.primary}
-            />
-          ))}
-        </Bar>
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default CustomShape;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-tooltip.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-tooltip.tsx
deleted file mode 100644
index 3f55b186..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-tooltip.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const CustomTooltip = ({ active, payload }:any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
-
-    return null;
-};
-
-export default CustomTooltip
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/customized-event-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/customized-event-bar.tsx
deleted file mode 100644
index d044aa2a..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/customized-event-bar.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client"
-import { useState } from 'react';
-import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-const CustomizedEvent = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-    const [data, setData] = useState([
-        {
-            name: 'Page A',
-            uv: 4000,
-            pv: 2400,
-            amt: 2400,
-        },
-        {
-            name: 'Page B',
-            uv: 3000,
-            pv: 1398,
-            amt: 2210,
-        },
-        {
-            name: 'Page C',
-            uv: 2000,
-            pv: 9800,
-            amt: 2290,
-        },
-        {
-            name: 'Page D',
-            uv: 2780,
-            pv: 3908,
-            amt: 2000,
-        },
-        {
-            name: 'Page E',
-            uv: 1890,
-            pv: 4800,
-            amt: 2181,
-        },
-        {
-            name: 'Page F',
-            uv: 2390,
-            pv: 3800,
-            amt: 2500,
-        },
-        {
-            name: 'Page G',
-            uv: 3490,
-            pv: 4300,
-            amt: 2100,
-        },
-    ]);
-
-    const [activeIndex, setActiveIndex] = useState(0);
-    const activeItem = data[activeIndex];
-
-    const handleClick = (entry: any, index: number) => {
-        setActiveIndex(index);
-    };
-
-    return (
-        <div style={{ width: '100%' }}>
-            <p className='text-center text-card-foreground font-base font-medium'>Click each rectangle </p>
-            <ResponsiveContainer width="100%" height={height}>
-                <BarChart data={data}>
-                    <Bar dataKey="uv" onClick={handleClick}>
-                        {data.map((entry, index) => (
-                            <Cell
-                                cursor="pointer"
-                                fill={index === activeIndex ? colors.success
-                                    :
-                                    colors.primary}
-                                key={`cell-${index}`}
-                            />
-                        ))}
-                    </Bar>
-                </BarChart>
-            </ResponsiveContainer>
-            <p className="text-center text-card-foreground font-base font-medium pt-2">{`Uv of "${activeItem.name}": ${activeItem.uv}`}</p>
-        </div>
-    );
-};
-
-export default CustomizedEvent;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data.ts b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data.ts
deleted file mode 100644
index 4bef7447..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export const data = [
-    {
-      name: 'Page A',
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: 'Page B',
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: 'Page C',
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: 'Page D',
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: 'Page E',
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: 'Page F',
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: 'Page G',
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/layout.tsx
deleted file mode 100644
index 326e3977..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Bar Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/mix-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/mix-bar.tsx
deleted file mode 100644
index c82dd5e8..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/mix-bar.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const MixBar = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          stackId="a"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          stackId="a"
-          fill={colors.info}
-        />
-        <Bar
-          dataKey="amt"
-          fill={colors.success}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default MixBar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/no-padding-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/no-padding-bar.tsx
deleted file mode 100644
index 5b6c0503..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/no-padding-bar.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const NoPaddingBar = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data} barSize={20}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-          scale="point"
-          padding={{ left: 10, right: 10 }}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          fill={colors.warning}
-          background={{
-            fill: colors.warning,
-          }}
-
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default NoPaddingBar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/page.tsx
deleted file mode 100644
index 9fffaf49..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/page.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TinyBar from "./tiny-bar";
-import SimpleBar from "./simple-bar";
-import StackedBar from "./stacked-bar";
-import MixBar from "./mix-bar";
-import CustomShape from "./custom-shape";
-import PositiveAndNegative from "./positive-negative-bar";
-import BrushBar from "./brush-bar";
-import CustomizedEventBar from "./customized-event-bar";
-import BarWithMinHeight from "./barwith-minheight";
-import StackedBarWithSign from "./stacked-barwith-sign";
-import BiAxialBar from "./bi-axxial-bar";
-import BackgroundBar from "./background-bar";
-import BarChartWithMultiAxis from "./barchart-with-multixaxis";
-import NoPaddingBar from "./no-padding-bar";
-
-const ChartJsRechartBarPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Tiny Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TinyBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <SimpleBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Mix Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MixBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom Shape Bar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomShape />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Positive And Negative Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PositiveAndNegative />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Brush Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BrushBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart With Customized Event</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomizedEventBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart With Min Height</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarWithMinHeight />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart Stacked By Sign</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBarWithSign />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bi Axial Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BiAxialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart Has Background</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BackgroundBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart With Multi XAxis</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarChartWithMultiAxis />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart No Padding</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <NoPaddingBar />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartJsRechartBarPage;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/positive-negative-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/positive-negative-bar.tsx
deleted file mode 100644
index b288e7e8..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/positive-negative-bar.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-  ReferenceLine,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const data = [
-  {
-    name: "Page A",
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    name: "Page B",
-    uv: -3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    name: "Page C",
-    uv: -2000,
-    pv: -9800,
-    amt: 2290,
-  },
-  {
-    name: "Page D",
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    name: "Page E",
-    uv: -1890,
-    pv: 4800,
-    amt: 2181,
-  },
-  {
-    name: "Page F",
-    uv: 2390,
-    pv: -3800,
-    amt: 2500,
-  },
-  {
-    name: "Page G",
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-];
-
-const PositiveAndNegative = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <ReferenceLine
-          y={0}
-          stroke='none'
-        />
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default PositiveAndNegative;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/simple-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/simple-bar.tsx
deleted file mode 100644
index 3ba29ba5..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/simple-bar.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const SimpleBar = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          fill={colors.warning}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default SimpleBar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-bar.tsx
deleted file mode 100644
index 24c140fe..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-bar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
-import CustomTooltip from "./custom-tooltip";
-
-const StackedBar = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          stackId="a"
-          fill={colors.warning}
-        />
-        <Bar
-          dataKey="uv"
-          stackId="a"
-          fill={colors.info}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default StackedBar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-barwith-sign.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-barwith-sign.tsx
deleted file mode 100644
index 7f42a9dd..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-barwith-sign.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-  Legend,
-  ReferenceLine,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-const data = [
-  {
-    name: "Page A",
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    name: "Page B",
-    uv: -3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    name: "Page C",
-    uv: -2000,
-    pv: -9800,
-    amt: 2290,
-  },
-  {
-    name: "Page D",
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    name: "Page E",
-    uv: -1890,
-    pv: 4800,
-    amt: 2181,
-  },
-  {
-    name: "Page F",
-    uv: 2390,
-    pv: -3800,
-    amt: 2500,
-  },
-  {
-    name: "Page G",
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-];
-const StackedBarWithSign = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart height={height} data={data} stackOffset="sign">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <ReferenceLine
-          y={0}
-          stroke='none'
-        />
-        <Bar
-          dataKey="pv"
-          stackId="stack"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          stackId="stack"
-          fill={colors.success}
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default StackedBarWithSign;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/tiny-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/tiny-bar.tsx
deleted file mode 100644
index c712080e..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/tiny-bar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, BarChart, Bar } from 'recharts';
-import { data } from "./data";
-
-const TinyBar = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer height={height}>
-            <BarChart height={height} data={data} >
-                <Bar
-                    dataKey="uv"
-                    fill={colors.primary}
-                />
-
-            </BarChart>
-        </ResponsiveContainer>
-    );
-};
-
-export default TinyBar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/composedchart-with-axislabels.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/composedchart-with-axislabels.tsx
deleted file mode 100644
index 7188e123..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/composedchart-with-axislabels.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client";
-
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  ComposedChart,
-  Line,
-  Area,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-
-const ComposedChartWithAxisLabels = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 590,
-      pv: 800,
-      amt: 1400,
-    },
-    {
-      name: "Page B",
-      uv: 868,
-      pv: 967,
-      amt: 1506,
-    },
-    {
-      name: "Page C",
-      uv: 1397,
-      pv: 1098,
-      amt: 989,
-    },
-    {
-      name: "Page D",
-      uv: 1480,
-      pv: 1200,
-      amt: 1228,
-    },
-    {
-      name: "Page E",
-      uv: 1520,
-      pv: 1108,
-      amt: 1100,
-    },
-    {
-      name: "Page F",
-      uv: 1400,
-      pv: 680,
-      amt: 1700,
-    },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer height={height}>
-      <ComposedChart
-        width={500}
-        height={400}
-        data={data}
-        margin={{
-          top: 20,
-          right: 20,
-          bottom: 20,
-          left: 20,
-        }}
-      >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Area
-          type="monotone"
-          dataKey="amt"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          style={{
-            opacity: 0.7,
-
-          } as React.CSSProperties}
-        />
-        <Bar
-          dataKey="pv"
-          barSize={20}
-          fill={colors.primary}
-        />
-        <Line
-          type="monotone"
-          strokeWidth={2}
-          dataKey="uv"
-          stroke={colors.warning}
-          dot={{
-            stroke: colors.warning,
-            strokeWidth: 2,
-          }}
-        />
-      </ComposedChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ComposedChartWithAxisLabels;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/layout.tsx
deleted file mode 100644
index bfc56137..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Composed Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/linebar-area-composedchart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/linebar-area-composedchart.tsx
deleted file mode 100644
index a8ead80e..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/linebar-area-composedchart.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-"use client";
-import React from "react";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  ComposedChart,
-  Line,
-  Area,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Scatter,
-  ResponsiveContainer,
-} from "recharts";
-
-const LineBarAreaComposedChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 590,
-      pv: 800,
-      amt: 1400,
-      cnt: 490,
-    },
-    {
-      name: "Page B",
-      uv: 868,
-      pv: 967,
-      amt: 1506,
-      cnt: 590,
-    },
-    {
-      name: "Page C",
-      uv: 1397,
-      pv: 1098,
-      amt: 989,
-      cnt: 350,
-    },
-    {
-      name: "Page D",
-      uv: 1480,
-      pv: 1200,
-      amt: 1228,
-      cnt: 480,
-    },
-    {
-      name: "Page E",
-      uv: 1520,
-      pv: 1108,
-      amt: 1100,
-      cnt: 460,
-    },
-    {
-      name: "Page F",
-      uv: 1400,
-      pv: 680,
-      amt: 1700,
-      cnt: 380,
-    },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer height={height}>
-      <ComposedChart
-        width={500}
-        height={400}
-        data={data}
-        margin={{
-          top: 20,
-          right: 20,
-          bottom: 20,
-          left: 20,
-        }}
-      >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-        <Area
-          type="monotone"
-          dataKey="amt"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          style={{
-            opacity: 0.7,
-
-          } as React.CSSProperties}
-        />
-        <Bar
-          dataKey="pv"
-          barSize={20}
-          fill={colors.primary}
-        />
-        <Line
-          type="monotone"
-          strokeWidth={2}
-          dataKey="uv"
-          stroke={colors.warning}
-          dot={{
-            stroke: colors.warning,
-            strokeWidth: 2,
-          }}
-        />
-        <Scatter
-          dataKey="cnt"
-          data={data}
-          fill={colors.danger}
-        />
-      </ComposedChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default LineBarAreaComposedChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/page.tsx
deleted file mode 100644
index 0a8367d9..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import LineBarAreaComposedChart from "./linebar-area-composedchart";
-import SameDataComposedChart from "./samedata-composed-chart";
-import ReVerticalComposedChart from "./vertical-composed-chart";
-import ComposedChartWithAxisLabels from "./composedchart-with-axislabels";
-import ReScatterAndLineOfBestFit from "./scatter-line-bestfit";
-
-const ChartJsRechartComposed = () => {
-
-  return (
-    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Line Bar Area Composed Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LineBarAreaComposedChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Same Data Composed Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SameDataComposedChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Vertical Composed Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ReVerticalComposedChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Composed Chart With Axis Labels</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ComposedChartWithAxisLabels />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Scatter And Line Of Best Fit</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ReScatterAndLineOfBestFit />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default ChartJsRechartComposed;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/samedata-composed-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/samedata-composed-chart.tsx
deleted file mode 100644
index d0ca0009..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/samedata-composed-chart.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-import React from "react";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  ComposedChart,
-  Line,
-  Area,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-
-const SameDataComposedChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 590,
-      pv: 800,
-      amt: 1400,
-    },
-    {
-      name: "Page B",
-      uv: 868,
-      pv: 967,
-      amt: 1506,
-    },
-    {
-      name: "Page C",
-      uv: 1397,
-      pv: 1098,
-      amt: 989,
-    },
-    {
-      name: "Page D",
-      uv: 1480,
-      pv: 1200,
-      amt: 1228,
-    },
-    {
-      name: "Page E",
-      uv: 1520,
-      pv: 1108,
-      amt: 1100,
-    },
-    {
-      name: "Page F",
-      uv: 1400,
-      pv: 680,
-      amt: 1700,
-    },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer height={height}>
-      <ComposedChart
-        width={500}
-        height={400}
-        data={data}
-        margin={{
-          top: 20,
-          right: 20,
-          bottom: 20,
-          left: 20,
-        }}
-      >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Bar
-          dataKey="uv"
-          barSize={20}
-          fill={colors.primary}
-        />
-        <Line
-          type="monotone"
-          strokeWidth={2}
-          dataKey="uv"
-          stroke={colors.warning}
-          dot={{
-            stroke: colors.warning,
-            strokeWidth: 2,
-          }}
-        />
-      </ComposedChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default SameDataComposedChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/scatter-line-bestfit.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/scatter-line-bestfit.tsx
deleted file mode 100644
index e5d6a58e..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/scatter-line-bestfit.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-import React from "react";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  ComposedChart,
-  Line,
-  Area,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  Scatter,
-  ResponsiveContainer,
-} from "recharts";
-
-const ReScatterAndLineOfBestFit = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    { index: 10000, red: 1643, blue: 790 },
-    { index: 1666, red: 182, blue: 42 },
-    { index: 625, red: 56, blue: 11 },
-    { index: 300, redLine: 0 },
-    { index: 10000, redLine: 1522 },
-    { index: 600, blueLine: 0 },
-    { index: 10000, blueLine: 678 },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer height={height}>
-      <ComposedChart
-        width={500}
-        height={400}
-        data={data}
-        margin={{
-          top: 20,
-          right: 20,
-          bottom: 20,
-          left: 20,
-        }}
-      >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="index"
-          type="number"
-          label={{ value: "Index", position: "insideBottomRight", offset: 0 }}
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          unit="ms"
-          type="number"
-          label={{ value: "Time", angle: -90, position: "insideLeft" }}
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Scatter
-          name="red"
-          dataKey="red"
-          data={data}
-          fill={colors.danger}
-        />
-        <Scatter
-          name="blue"
-          dataKey="blue"
-          data={data}
-          fill={colors.primary}
-        />
-
-        <Line
-          type="monotone"
-          strokeWidth={2}
-          dataKey="blueLine"
-          stroke={colors.primary}
-          dot={{
-            stroke: colors.primary,
-            strokeWidth: 2,
-          }}
-        />
-        <Line
-          type="monotone"
-          strokeWidth={2}
-          dataKey="redLine"
-          stroke={colors.danger}
-          dot={{
-            stroke: colors.danger,
-            strokeWidth: 2,
-          }}
-        />
-      </ComposedChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ReScatterAndLineOfBestFit;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/vertical-composed-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/vertical-composed-chart.tsx
deleted file mode 100644
index 2c49253d..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/vertical-composed-chart.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  ComposedChart,
-  Line,
-  Area,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-
-const ReVerticalComposedChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 590,
-      pv: 800,
-      amt: 1400,
-    },
-    {
-      name: "Page B",
-      uv: 868,
-      pv: 967,
-      amt: 1506,
-    },
-    {
-      name: "Page C",
-      uv: 1397,
-      pv: 1098,
-      amt: 989,
-    },
-    {
-      name: "Page D",
-      uv: 1480,
-      pv: 1200,
-      amt: 1228,
-    },
-    {
-      name: "Page E",
-      uv: 1520,
-      pv: 1108,
-      amt: 1100,
-    },
-    {
-      name: "Page F",
-      uv: 1400,
-      pv: 680,
-      amt: 1700,
-    },
-  ];
-
-  const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-      return (
-        <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-          <span>{`${payload[0].name}`}</span>
-          <span>:</span>
-          <span>{`${payload[0].value}%`}</span>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer height={height}>
-      <ComposedChart
-        layout="vertical"
-        width={500}
-        height={400}
-        data={data}
-        margin={{
-          top: 20,
-          right: 20,
-          bottom: 20,
-          left: 20,
-        }}
-      >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          type="number"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          dataKey="name"
-          type="category"
-          scale="band"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <Tooltip content={CustomTooltip} />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Area
-          dataKey="amt"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          style={{
-            opacity: 0.7,
-
-          } as React.CSSProperties}
-        />
-        <Bar
-          dataKey="pv"
-          barSize={20}
-          fill={colors.primary}
-        />
-        <Line
-          strokeWidth={2}
-          dataKey="uv"
-          stroke={colors.warning}
-          dot={{
-            stroke: colors.warning,
-            strokeWidth: 2,
-          }}
-        />
-      </ComposedChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ReVerticalComposedChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/basic-line.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/basic-line.tsx
deleted file mode 100644
index f3bf957d..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/basic-line.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const BasicLine = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          stroke={colors.primary}
-          dot={{
-            stroke: colors.primary,
-            strokeWidth: 1,
-          }}
-        />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.primary}
-          dot={{
-            stroke: colors.info,
-            strokeWidth: 1,
-          }}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BasicLine;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/biaxial-linechart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/biaxial-linechart.tsx
deleted file mode 100644
index 70a8a7c0..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/biaxial-linechart.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const BiAxialLineChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          dataKey="name"
-        />
-
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          yAxisId="left"
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          yAxisId="right"
-          orientation="right"
-        />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          yAxisId="left"
-          dataKey="pv"
-          stroke={colors.success}
-          strokeDasharray="5 5"
-        />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          yAxisId="right"
-          stroke={colors.warning}
-          strokeDasharray="3 4 5 2"
-          dot={{
-            stroke: colors.warning,
-            strokeWidth: 2,
-          }}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BiAxialLineChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/connect-nulls.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/connect-nulls.tsx
deleted file mode 100644
index b8448cb4..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/connect-nulls.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const ConnectNulls = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    { name: "Page A", uv: 4000 },
-    { name: "Page B", uv: 3000 },
-    { name: "Page C", uv: 2000 },
-    { name: "Page D" },
-    { name: "Page E", uv: 1890 },
-    { name: "Page F", uv: 2390 },
-    { name: "Page G", uv: 3490 },
-  ];
-
-  return (
-    <>
-      <ResponsiveContainer height={height}>
-        <LineChart height={height} data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-          />
-          <Tooltip />
-          <Line
-            type="monotone"
-            dataKey="uv"
-            dot={{
-              stroke: colors.primary,
-              strokeWidth: 2,
-            }}
-            stroke={colors.warning}
-          />
-        </LineChart>
-      </ResponsiveContainer>
-      <div className="mt-4"></div>
-      <ResponsiveContainer width="100%" height={200}>
-        <LineChart width={500} height={200} data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-          />
-
-          <Tooltip />
-          <Line
-            connectNulls
-            type="monotone"
-            dataKey="uv"
-            dot={{
-              stroke: colors.primary,
-              strokeWidth: 2,
-            }}
-            stroke={colors.warning}
-            fill={colors.warning}
-          />
-        </LineChart>
-      </ResponsiveContainer>
-    </>
-  );
-};
-
-export default ConnectNulls;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/custom-tooltip.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/custom-tooltip.tsx
deleted file mode 100644
index 3f55b186..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/custom-tooltip.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const CustomTooltip = ({ active, payload }:any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
-
-    return null;
-};
-
-export default CustomTooltip
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-dot.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-dot.tsx
deleted file mode 100644
index 27b8ddfa..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-dot.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const data = [
-  {
-    name: "Page A",
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  },
-  {
-    name: "Page B",
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  },
-  {
-    name: "Page C",
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  },
-  {
-    name: "Page D",
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  },
-  {
-    name: "Page E",
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  },
-  {
-    name: "Page F",
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  },
-  {
-    name: "Page G",
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-];
-interface CustomDotProps {
-  cx?: number;
-  cy?: number;
-  stroke?: string;
-  payload?: any;
-  value?: number;
-}
-
-const CustomDot: React.FC<CustomDotProps> = (props) => {
-  const { cx = 0, cy = 0, value } = props;
-
-  if (value !== undefined && value > 2500) {
-    return (
-      <svg
-        x={cx - 10}
-        y={cy - 10}
-        width={20}
-        height={20}
-        fill="red"
-        viewBox="0 0 1024 1024"
-      >
-        <path d="M512 1009.984c-274.912 0-497.76-222.848-497.76-497.76s222.848-497.76 497.76-497.76c274.912 0 497.76 222.848 497.76 497.76s-222.848 497.76-497.76 497.76zM340.768 295.936c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM686.176 296.704c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM772.928 555.392c-18.752-8.864-40.928-0.576-49.632 18.528-40.224 88.576-120.256 143.552-208.832 143.552-85.952 0-164.864-52.64-205.952-137.376-9.184-18.912-31.648-26.592-50.08-17.28-18.464 9.408-21.216 21.472-15.936 32.64 52.8 111.424 155.232 186.784 269.76 186.784 117.984 0 217.12-70.944 269.76-186.784 8.672-19.136 9.568-31.2-9.12-40.096z" />
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      x={cx - 10}
-      y={cy - 10}
-      width={20}
-      height={20}
-      fill="green"
-      viewBox="0 0 1024 1024"
-    >
-      <path d="M517.12 53.248q95.232 0 179.2 36.352t145.92 98.304 98.304 145.92 36.352 179.2-36.352 179.2-98.304 145.92-145.92 98.304-179.2 36.352-179.2-36.352-145.92-98.304-98.304-145.92-36.352-179.2 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352zM663.552 261.12q-15.36 0-28.16 6.656t-23.04 18.432-15.872 27.648-5.632 33.28q0 35.84 21.504 61.44t51.2 25.6 51.2-25.6 21.504-61.44q0-17.408-5.632-33.28t-15.872-27.648-23.04-18.432-28.16-6.656zM373.76 261.12q-29.696 0-50.688 25.088t-20.992 60.928 20.992 61.44 50.688 25.6 50.176-25.6 20.48-61.44-20.48-60.928-50.176-25.088zM520.192 602.112q-51.2 0-97.28 9.728t-82.944 27.648-62.464 41.472-35.84 51.2q-1.024 1.024-1.024 2.048-1.024 3.072-1.024 8.704t2.56 11.776 7.168 11.264 12.8 6.144q25.6-27.648 62.464-50.176 31.744-19.456 79.36-35.328t114.176-15.872q67.584 0 116.736 15.872t81.92 35.328q37.888 22.528 63.488 50.176 17.408-5.12 19.968-18.944t0.512-18.944-3.072-7.168-1.024-3.072q-26.624-55.296-100.352-88.576t-176.128-33.28z" />
-    </svg>
-  );
-};
-
-const CustomizedDot = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          dot={{
-            stroke: colors.primary,
-            strokeWidth: 2,
-          }}
-          stroke={colors.primary}
-        />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.info}
-          dot={<CustomDot />}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default CustomizedDot;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-label.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-label.tsx
deleted file mode 100644
index 6fdc9308..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-label.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-interface CustomLabelProps {
-  x?: number;
-  y?: number;
-  stroke?: string;
-  value?: number | string;
-}
-const CustomLabel = ({ x, y, stroke, value }: CustomLabelProps) => {
-  return (
-    <text x={x} y={y} dy={-4} fill={stroke} fontSize={10} textAnchor="middle">
-      {value}
-    </text>
-  );
-};
-
-const CustomizedLabel = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          stroke={colors.primary}
-          label={<CustomLabel />}
-        />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.info}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default CustomizedLabel;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/dashedline-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/dashedline-chart.tsx
deleted file mode 100644
index d2835261..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/dashedline-chart.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const DashedLineChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.primary}
-          strokeDasharray="5 5"
-          dot={{
-            stroke: colors.primary,
-            strokeWidth: 2,
-          }}
-        />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          dot={{
-            stroke: colors.primary,
-            strokeWidth: 2,
-          }}
-          stroke={colors.info}
-          strokeDasharray="3 4 5 2"
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default DashedLineChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/layout.tsx
deleted file mode 100644
index e5c47612..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Line Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/linechart-with-padding.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/linechart-with-padding.tsx
deleted file mode 100644
index b47566fd..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/linechart-with-padding.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from "recharts";
-
-const LineChartWithPadding = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          padding={{ left: 30, right: 30 }}
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip />
-        <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          dot={{
-            stroke: colors.primary,
-            strokeWidth: 2,
-          }}
-          strokeWidth={2}
-          stroke={colors.primary}
-        />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          dot={{
-            stroke: colors.info,
-            strokeWidth: 2,
-          }}
-          strokeWidth={2}
-          stroke={colors.info}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default LineChartWithPadding;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/multi-series.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/multi-series.tsx
deleted file mode 100644
index 6dbd728c..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/multi-series.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const MultiSeriesChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const series = [
-    {
-      name: "Series 1",
-      data: [
-        { category: "A", value: Math.random() },
-        { category: "B", value: Math.random() },
-        { category: "C", value: Math.random() },
-      ],
-    },
-    {
-      name: "Series 2",
-      data: [
-        { category: "B", value: Math.random() },
-        { category: "C", value: Math.random() },
-        { category: "D", value: Math.random() },
-      ],
-    },
-    {
-      name: "Series 3",
-      data: [
-        { category: "C", value: Math.random() },
-        { category: "D", value: Math.random() },
-        { category: "E", value: Math.random() },
-      ],
-    },
-  ];
-
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-
-        <XAxis
-          dataKey="category"
-          type="category"
-          allowDuplicatedCategory={false}
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          dataKey="value"
-        />
-        <Tooltip />
-
-        {series.map((s) => (
-          <Line
-            dataKey="value"
-            data={s.data}
-            name={s.name}
-            key={s.name}
-            dot={{
-              stroke: colors.primary,
-              strokeWidth: 2,
-            }}
-            stroke={colors.primary}
-          />
-        ))}
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default MultiSeriesChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/page.tsx
deleted file mode 100644
index 4ea65f3c..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/page.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicLine from "./basic-line";
-import TinyLineChart from "./tinyline-chart";
-import DashedLineChart from "./dashedline-chart";
-import VerticalLineChart from "./verticalline-chart";
-import BiAxialLineChart from "./biaxial-linechart";
-import SpecifiedDomain from "./specified-domain";
-import ConnectNulls from "./connect-nulls";
-import LineChartWithPadding from "./linechart-with-padding";
-import LineChartWithReferenceLines from "./reference-lines";
-import CustomizedDot from "./customized-dot";
-import CustomizedLabel from "./customized-label";
-import SynchronizedLineChart from "./synchronized-linechart";
-import MultiSeriesChart from "./multi-series";
-
-const ChartJsRechartLinePage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  gap-6">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicLine />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Tiny Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <TinyLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Dashed Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <DashedLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Vertical Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <VerticalLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Biaxial Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BiAxialLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Vertical Line Chart With Specified Domain</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <SpecifiedDomain />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart With XAxis Padding</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <LineChartWithPadding />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart With Reference Lines</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <LineChartWithReferenceLines />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Customized Dot Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CustomizedDot />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Customized Label</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CustomizedLabel />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart Has Multi Series</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <MultiSeriesChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Synchronized Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <SynchronizedLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart Connect Nulls</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <ConnectNulls />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
-};
-
-export default ChartJsRechartLinePage;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/reference-lines.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/reference-lines.tsx
deleted file mode 100644
index b32de88c..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/reference-lines.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-  ReferenceLine,
-} from "recharts";
-
-const LineChartWithReferenceLines = ({ height = 300 }) => {
-  const [config] = useConfig();
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  return (
-    <>
-      <ResponsiveContainer height={height}>
-        <LineChart height={height} data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-          />
-          <Tooltip />
-          <Legend
-            formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-          />
-          <ReferenceLine
-            x="Page C"
-            stroke={colors.warning}
-            label="Max PV PAGE"
-          />
-          <ReferenceLine
-            y={9800}
-            label="Max"
-            stroke={colors.warning}
-          />
-          <Line
-            type="monotone"
-            dataKey="pv"
-            stroke={colors.warning}
-          />
-          <Line
-            type="monotone"
-            dataKey="uv"
-            stroke={colors.info}
-            dot={{
-              stroke: colors.primary,
-              strokeWidth: 2,
-            }}
-          />
-        </LineChart>
-      </ResponsiveContainer>
-    </>
-  );
-};
-
-export default LineChartWithReferenceLines;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/specified-domain.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/specified-domain.tsx
deleted file mode 100644
index c5baaf05..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/specified-domain.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const SpecifiedDomain = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data} layout="vertical">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-          type="number"
-          domain={[0, "dataMax + 1000"]}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          dataKey="name"
-          type="category"
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.info}
-          strokeDasharray="5 5"
-          dot={{
-            stroke: colors.info,
-            strokeWidth: 2,
-          }}
-        />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          stroke={colors.warning}
-          strokeDasharray="3 4 5 2"
-          dot={{
-            stroke: colors.warning,
-            strokeWidth: 2,
-          }}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default SpecifiedDomain;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/synchronized-linechart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/synchronized-linechart.tsx
deleted file mode 100644
index 6fe26ed1..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/synchronized-linechart.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Brush,
-  AreaChart,
-  Area,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const SynchronizedLineChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  return (
-    <>
-      <ResponsiveContainer height={height}>
-        <LineChart height={height} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-          />
-          <Tooltip content={CustomTooltip} />
-          <Line
-            type="monotone"
-            dataKey="uv"
-            dot={{
-              stroke: colors.primary,
-              strokeWidth: 2,
-            }}
-            stroke={colors.primary}
-          />
-        </LineChart>
-      </ResponsiveContainer>
-
-      <p className="text-sm ml-14 mt-2 mb-5 text-card-foreground ">
-        Maybe some other content
-      </p>
-      <ResponsiveContainer width="100%" height={200}>
-        <LineChart width={500} height={200} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-          />
-          <Tooltip content={CustomTooltip} />
-          <Line
-            type="monotone"
-            dataKey="pv"
-            stroke={colors.info}
-            dot={{
-              stroke: colors.info,
-              strokeWidth: 2,
-            }}
-          />
-          <Brush />
-        </LineChart>
-      </ResponsiveContainer>
-
-      <ResponsiveContainer width="100%" height={200}>
-        <AreaChart data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
-          <XAxis
-            dataKey="name"
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-            axisLine={false}
-          />
-          <YAxis
-            tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-              fontSize: "12px",
-            }}
-            tickLine={false}
-            stroke='none'
-          />
-          <Tooltip content={CustomTooltip} />
-          <Area
-            type="monotone"
-            dataKey="pv"
-            stroke={colors.primary}
-            fill={colors.info}
-            opacity={0.2}
-            dot={{
-              stroke: colors.primary,
-              strokeWidth: 2,
-            }}
-          />
-        </AreaChart>
-      </ResponsiveContainer>
-    </>
-  );
-};
-
-export default SynchronizedLineChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/tinyline-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/tinyline-chart.tsx
deleted file mode 100644
index d4b8b79c..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/tinyline-chart.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const TinyLineChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          dataKey="name"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          dot={{
-            stroke: colors.success,
-            strokeWidth: 1,
-          }}
-          stroke={colors.success}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default TinyLineChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/verticalline-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-line/verticalline-chart.tsx
deleted file mode 100644
index 572299bf..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-line/verticalline-chart.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  LineChart,
-  Line,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-
-const VerticalLineChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      name: "Page A",
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: "Page B",
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: "Page C",
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: "Page D",
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: "Page E",
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: "Page F",
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: "Page G",
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
-  return (
-    <ResponsiveContainer height={height}>
-      <LineChart height={height} data={data} layout="vertical">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
-        <XAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-          type="number"
-        />
-        <YAxis
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          dataKey="name"
-          type="category"
-        />
-        <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.primary}
-          strokeDasharray="5 5"
-        />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          stroke={colors.primary}
-          strokeDasharray="3 4 5 2"
-          dot={{
-            stroke: colors.info,
-            strokeWidth: 2,
-          }}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default VerticalLineChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/customized-label-pie.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/customized-label-pie.tsx
deleted file mode 100644
index e3df0d0d..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/customized-label-pie.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
-
-const data = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
-];
-
-const RADIAN = Math.PI / 180;
-const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }: any) => {
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-    const x = cx + radius * Math.cos(-midAngle * RADIAN);
-    const y = cy + radius * Math.sin(-midAngle * RADIAN);
-
-    return (
-        <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
-            {`${(percent * 100).toFixed(0)}%`}
-        </text>
-    );
-};
-
-const CustomizedLabelPie = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-    const COLORS = [
-        colors.primary,
-        colors.info,
-        colors.warning,
-        colors.success
-    ]
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height}>
-                <Pie
-                    data={data}
-                    cx="50%"
-                    cy="50%"
-                    labelLine={false}
-                    label={renderCustomizedLabel}
-                    outerRadius={130}
-                    fill={colors.info}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-            </PieChart>
-        </ResponsiveContainer>
-    );
-};
-
-export default CustomizedLabelPie;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/layout.tsx
deleted file mode 100644
index 12fd79ea..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Pie Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/page.tsx
deleted file mode 100644
index 636570aa..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TwoLevelPie from "./twolevel-pie";
-import StraightAngle from "./straight-angle";
-import TwoSimplePie from "./two-simple-pie";
-import CustomizedLabelPie from "./customized-label-pie";
-import PieChartWithPaddingAngle from "./pie-chart-with-paddingangle";
-import PieWithNeedle from "./piewith-needle";
-
-const ChartJsRechartPiePage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Two Level Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TwoLevelPie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Straight Angle Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StraightAngle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Two Simple Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TwoSimplePie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart With Customized Label</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomizedLabelPie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart With Padding Angle</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PieChartWithPaddingAngle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart With Needle</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PieWithNeedle />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartJsRechartPiePage;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/pie-chart-with-paddingangle.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/pie-chart-with-paddingangle.tsx
deleted file mode 100644
index 4f95a950..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/pie-chart-with-paddingangle.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
-
-const PieChartWithPaddingAngle = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-
-    const data = [
-        { name: 'Group A', value: 400 },
-        { name: 'Group B', value: 300 },
-        { name: 'Group C', value: 300 },
-        { name: 'Group D', value: 200 },
-    ];
-    const COLORS = [
-        colors.primary,
-        colors.info,
-        colors.warning,
-        colors.success
-    ];
-
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height}>
-                <Pie
-                    data={data}
-                    cx={120}
-                    cy={150}
-                    innerRadius={80}
-                    outerRadius={120}
-                    fill={colors.primary}
-                    paddingAngle={5}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-                <Pie
-                    data={data}
-                    cx={420}
-                    cy={120}
-                    startAngle={180}
-                    endAngle={0}
-                    innerRadius={80}
-                    outerRadius={100}
-                    fill={colors.info}
-                    paddingAngle={5}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-            </PieChart>
-        </ResponsiveContainer>
-    );
-};
-
-export default PieChartWithPaddingAngle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/piewith-needle.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/piewith-needle.tsx
deleted file mode 100644
index eb7a7539..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/piewith-needle.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
-
-const RADIAN = Math.PI / 180;
-const data = [
-    { name: "A", value: 80, color: "#ff0000" },
-    { name: "B", value: 45, color: "#00ff00" },
-    { name: "C", value: 25, color: "#0000ff" },
-];
-const cx = 300;
-const cy = 160;
-const iR = 50;
-const oR = 100;
-const value = 50;
-
-const needle = (value: number, data: any, cx: number, cy: number, iR: number, oR: number, color: string) => {
-    let total = 0;
-    data.forEach((v: any) => {
-        total += v.value;
-    });
-    const ang = 180.0 * (1 - value / total);
-    const length = (iR + 2 * oR) / 3;
-    const sin = Math.sin(-RADIAN * ang);
-    const cos = Math.cos(-RADIAN * ang);
-    const r = 5;
-    const x0 = cx + 5;
-    const y0 = cy + 5;
-    const xba = x0 + r * sin;
-    const yba = y0 - r * cos;
-    const xbb = x0 - r * sin;
-    const ybb = y0 + r * cos;
-    const xp = x0 + length * cos;
-    const yp = y0 + length * sin;
-
-    return [
-        <circle cx={x0} cy={y0} r={r} fill={color} stroke="none" key="pie-needle-circle" />,
-        <path d={`M${xba} ${yba}L${xbb} ${ybb} L${xp} ${yp} L${xba} ${yba}`} stroke="#none" fill={color} key="pie-needle-path" />,
-    ];
-};
-
-const PieWithNeedle = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height}>
-                <Pie
-                    dataKey="value"
-                    startAngle={180}
-                    endAngle={0}
-                    data={data}
-                    cx={cx}
-                    cy={cy}
-                    innerRadius={iR}
-                    outerRadius={oR}
-                    fill={colors.primary}
-                    stroke="none"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                </Pie>
-                {needle(value, data, cx, cy, iR, oR, colors.warning)}
-            </PieChart>
-        </ResponsiveContainer>
-    );
-};
-
-export default PieWithNeedle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/straight-angle.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/straight-angle.tsx
deleted file mode 100644
index b833bb83..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/straight-angle.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie } from 'recharts';
-const data = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
-    { name: 'Group E', value: 278 },
-    { name: 'Group F', value: 189 },
-];
-const StraightAngle = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart >
-                <Pie
-                    dataKey="value"
-                    startAngle={180}
-                    endAngle={0}
-                    data={data}
-                    cx="50%"
-                    cy="50%"
-                    outerRadius={80}
-                    fill={colors.primary}
-                    label
-                />
-            </PieChart>
-        </ResponsiveContainer>
-    );
-};
-
-export default StraightAngle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/two-simple-pie.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/two-simple-pie.tsx
deleted file mode 100644
index 7de8f29d..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/two-simple-pie.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Tooltip } from 'recharts';
-
-const data01 = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
-    { name: 'Group E', value: 278 },
-    { name: 'Group F', value: 189 },
-];
-
-const data02 = [
-    { name: 'Group A', value: 2400 },
-    { name: 'Group B', value: 4567 },
-    { name: 'Group C', value: 1398 },
-    { name: 'Group D', value: 9800 },
-    { name: 'Group E', value: 3908 },
-    { name: 'Group F', value: 4800 },
-];
-const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
-
-    return null;
-};
-
-const TwoSimplePie = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart >
-                <Pie
-                    dataKey="value"
-                    isAnimationActive={false}
-                    data={data01}
-                    cx="50%"
-                    cy="50%"
-                    outerRadius={80}
-                    fill={colors.primary}
-                    label
-                />
-                <Pie dataKey="value" data={data02} cx={500} cy={200} innerRadius={40} outerRadius={80}
-                    fill={colors.info}
-                />
-                <Tooltip content={<CustomTooltip />} />
-            </PieChart>
-        </ResponsiveContainer>
-    );
-};
-
-export default TwoSimplePie;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/twolevel-pie.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/twolevel-pie.tsx
deleted file mode 100644
index ce312d7f..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/twolevel-pie.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie } from 'recharts';
-
-
-const data01 = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
-];
-const data02 = [
-    { name: 'A1', value: 100 },
-    { name: 'A2', value: 300 },
-    { name: 'B1', value: 100 },
-    { name: 'B2', value: 80 },
-    { name: 'B3', value: 40 },
-    { name: 'B4', value: 30 },
-    { name: 'B5', value: 50 },
-    { name: 'C1', value: 100 },
-    { name: 'C2', value: 200 },
-    { name: 'D1', value: 150 },
-    { name: 'D2', value: 50 },
-];
-
-const TwoLevelPie = ({ height = 300 }) => {
-
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height} >
-                <Pie data={data01} dataKey="value" cx="50%" cy="50%" outerRadius={60}
-                    fill={colors.primary} />
-                <Pie data={data02} dataKey="value" cx="50%" cy="50%" innerRadius={70} outerRadius={90}
-                    fill={colors.info}
-                    label
-                />
-            </PieChart>
-        </ResponsiveContainer>
-    );
-};
-
-export default TwoLevelPie;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/layout.tsx
deleted file mode 100644
index 91fb5962..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Radar Chart",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/page.tsx
deleted file mode 100644
index 72825899..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import ReSimpleRadarChart from "./simple-radar-chart";
-import ReSpecifiedDomainRadarChart from "./specified-domain-radar";
-const ChartJsRechartRadar = () => {
-  return (
-    <div className="grid   grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>SimpleRadarChart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ReSimpleRadarChart />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Specified Domain Radar Chart</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ReSpecifiedDomainRadarChart />
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default ChartJsRechartRadar;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/simple-radar-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/simple-radar-chart.tsx
deleted file mode 100644
index fbdc089b..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/simple-radar-chart.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-import React from "react";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  Radar,
-  RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  ResponsiveContainer,
-} from "recharts";
-
-const ReSimpleRadarChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const data = [
-    {
-      subject: "Math",
-      A: 120,
-      B: 110,
-      fullMark: 150,
-    },
-    {
-      subject: "Chinese",
-      A: 98,
-      B: 130,
-      fullMark: 150,
-    },
-    {
-      subject: "English",
-      A: 86,
-      B: 130,
-      fullMark: 150,
-    },
-    {
-      subject: "Geography",
-      A: 99,
-      B: 100,
-      fullMark: 150,
-    },
-    {
-      subject: "Physics",
-      A: 85,
-      B: 90,
-      fullMark: 150,
-    },
-    {
-      subject: "History",
-      A: 65,
-      B: 85,
-      fullMark: 150,
-    },
-  ];
-  return (
-    <ResponsiveContainer height={height}>
-      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
-        <PolarGrid />
-        <PolarAngleAxis dataKey="subject" />
-        <PolarRadiusAxis />
-        <Radar
-          name="Mike"
-          dataKey="A"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.primary}
-          style={{
-            opacity: 0.4,
-            "--theme-primary": colors.primary,
-          } as React.CSSProperties}
-        />
-      </RadarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ReSimpleRadarChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/specified-domain-radar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/specified-domain-radar.tsx
deleted file mode 100644
index 1e992a01..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/specified-domain-radar.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-import React from "react";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  Radar,
-  RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  ResponsiveContainer,
-} from "recharts";
-
-const ReSpecifiedDomainRadarChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const data = [
-    {
-      subject: "Math",
-      A: 120,
-      B: 110,
-      fullMark: 150,
-    },
-    {
-      subject: "Chinese",
-      A: 98,
-      B: 130,
-      fullMark: 150,
-    },
-    {
-      subject: "English",
-      A: 86,
-      B: 130,
-      fullMark: 150,
-    },
-    {
-      subject: "Geography",
-      A: 99,
-      B: 100,
-      fullMark: 150,
-    },
-    {
-      subject: "Physics",
-      A: 85,
-      B: 90,
-      fullMark: 150,
-    },
-    {
-      subject: "History",
-      A: 65,
-      B: 85,
-      fullMark: 150,
-    },
-  ];
-  return (
-    <ResponsiveContainer height={height}>
-      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
-        <PolarGrid />
-        <PolarAngleAxis dataKey="subject" />
-        <PolarRadiusAxis angle={30} domain={[0, 150]} />
-        <Radar
-          name="Mike"
-          dataKey="A"
-          stroke={colors.primary}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.primary}
-          style={{
-            opacity: 0.2,
-            "--theme-primary": colors.primary,
-          } as React.CSSProperties}
-        />
-        <Radar
-          name="Lily"
-          dataKey="B"
-          stroke={colors.success}
-          dot={true}
-          strokeWidth={2}
-          fill={colors.success}
-          style={{
-            opacity: 0.4,
-
-          } as React.CSSProperties}
-        />
-      </RadarChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ReSpecifiedDomainRadarChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/basic-radial-bar.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/basic-radial-bar.tsx
deleted file mode 100644
index ea9aefe0..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/basic-radial-bar.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { RadialBarChart, RadialBar, Legend, ResponsiveContainer } from 'recharts';
-
-
-
-const BasicRadialBar = ({ height = 450 }) => {
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-    const data = [
-        {
-            name: '18-24',
-            uv: 31.47,
-            pv: 2400,
-            fill: '#8884d8',
-        },
-        {
-            name: '25-29',
-            uv: 26.69,
-            pv: 4567,
-            fill: '#83a6ed',
-        },
-        {
-            name: '30-34',
-            uv: 15.69,
-            pv: 1398,
-            fill: '#8dd1e1',
-        },
-        {
-            name: '35-39',
-            uv: 8.22,
-            pv: 9800,
-            fill: '#82ca9d',
-        },
-        {
-            name: '40-49',
-            uv: 8.63,
-            pv: 3908,
-            fill: '#a4de6c',
-        },
-        {
-            name: '50+',
-            uv: 2.63,
-            pv: 4800,
-            fill: '#d0ed57',
-        },
-        {
-            name: '30',
-            uv: 6.67,
-            pv: 4800,
-            fill: '#ffc658',
-        },
-    ];
-
-    const style = {
-        top: '50%',
-        right: config.isRtl ? "" : "0",
-        left: config.isRtl ? "0" : "",
-        transform: 'translate(0, -50%)',
-        lineHeight: '24px',
-    };
-
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <RadialBarChart height={height} cx="50%" cy="50%" innerRadius="10%" outerRadius="100%" barSize={10} data={data}>
-                <RadialBar
-                    background
-                    dataKey="uv"
-                />
-                <Legend
-                    iconSize={10}
-                    layout="vertical"
-                    verticalAlign="middle"
-                    wrapperStyle={style}
-                    formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-                />
-            </RadialBarChart>
-
-        </ResponsiveContainer>
-    );
-};
-
-export default BasicRadialBar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/layout.tsx
deleted file mode 100644
index 4ca4eaf6..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Radialbar Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/page.tsx
deleted file mode 100644
index 9e28dae4..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicRadialBar from "./basic-radial-bar";
-
-
-
-const ChartJsRadialBarPage = () => {
-
-
-    return (
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Radial Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicRadialBar />
-                </CardContent>
-            </Card>
-    );
-};
-
-export default ChartJsRadialBarPage;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/basic-scatter.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/basic-scatter.tsx
deleted file mode 100644
index 4228242a..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/basic-scatter.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-const data: { x: number; y: number; z: number }[] = [
-  { x: 100, y: 200, z: 200 },
-  { x: 120, y: 100, z: 260 },
-  { x: 170, y: 300, z: 400 },
-  { x: 140, y: 250, z: 280 },
-  { x: 150, y: 400, z: 500 },
-  { x: 110, y: 280, z: 200 },
-];
-const BasicScatter = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <ScatterChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          type="number"
-          dataKey="x"
-          name="stature"
-          unit="cm"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          name="A school"
-          data={data}
-          fill={colors.primary}
-        />
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default BasicScatter;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/bubble-chart.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/bubble-chart.tsx
deleted file mode 100644
index 0c1615b2..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/bubble-chart.tsx
+++ /dev/null
@@ -1,484 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  ZAxis,
-} from "recharts";
-interface DataProps {
-  hour: string;
-  index: number;
-  value: number
-}
-const data01: DataProps[] = [
-  { hour: "12a", index: 1, value: 170 },
-  { hour: "1a", index: 1, value: 180 },
-  { hour: "2a", index: 1, value: 150 },
-  { hour: "3a", index: 1, value: 120 },
-  { hour: "4a", index: 1, value: 200 },
-  { hour: "5a", index: 1, value: 300 },
-  { hour: "6a", index: 1, value: 400 },
-  { hour: "7a", index: 1, value: 200 },
-  { hour: "8a", index: 1, value: 100 },
-  { hour: "9a", index: 1, value: 150 },
-  { hour: "10a", index: 1, value: 160 },
-  { hour: "11a", index: 1, value: 170 },
-  { hour: "12a", index: 1, value: 180 },
-  { hour: "1p", index: 1, value: 144 },
-  { hour: "2p", index: 1, value: 166 },
-  { hour: "3p", index: 1, value: 145 },
-  { hour: "4p", index: 1, value: 150 },
-  { hour: "5p", index: 1, value: 170 },
-  { hour: "6p", index: 1, value: 180 },
-  { hour: "7p", index: 1, value: 165 },
-  { hour: "8p", index: 1, value: 130 },
-  { hour: "9p", index: 1, value: 140 },
-  { hour: "10p", index: 1, value: 170 },
-  { hour: "11p", index: 1, value: 180 },
-];
-
-const data02: DataProps[] = [
-  { hour: "12a", index: 1, value: 160 },
-  { hour: "1a", index: 1, value: 180 },
-  { hour: "2a", index: 1, value: 150 },
-  { hour: "3a", index: 1, value: 120 },
-  { hour: "4a", index: 1, value: 200 },
-  { hour: "5a", index: 1, value: 300 },
-  { hour: "6a", index: 1, value: 100 },
-  { hour: "7a", index: 1, value: 200 },
-  { hour: "8a", index: 1, value: 100 },
-  { hour: "9a", index: 1, value: 150 },
-  { hour: "10a", index: 1, value: 160 },
-  { hour: "11a", index: 1, value: 160 },
-  { hour: "12a", index: 1, value: 180 },
-  { hour: "1p", index: 1, value: 144 },
-  { hour: "2p", index: 1, value: 166 },
-  { hour: "3p", index: 1, value: 145 },
-  { hour: "4p", index: 1, value: 150 },
-  { hour: "5p", index: 1, value: 160 },
-  { hour: "6p", index: 1, value: 180 },
-  { hour: "7p", index: 1, value: 165 },
-  { hour: "8p", index: 1, value: 130 },
-  { hour: "9p", index: 1, value: 140 },
-  { hour: "10p", index: 1, value: 160 },
-  { hour: "11p", index: 1, value: 180 },
-];
-
-const parseDomain = () => [
-  0,
-  Math.max(
-    Math.max.apply(
-      null,
-      data01.map((entry) => entry.value)
-    ),
-    Math.max.apply(
-      null,
-      data02.map((entry) => entry.value)
-    )
-  ),
-];
-
-const renderTooltip = (props: any) => {
-  const { active, payload } = props;
-
-  if (active && payload && payload.length) {
-    const data = payload[0] && payload[0].payload;
-
-    return (
-      <div
-        style={{
-          backgroundColor: "#fff",
-          border: "1px solid #999",
-          margin: 0,
-          padding: 10,
-        }}
-      >
-        <p>{data.hour}</p>
-        <p>
-          <span>value: </span>
-          {data.value}
-        </p>
-      </div>
-    );
-  }
-};
-const BubbleChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  const domain = parseDomain();
-  const range = [16, 225];
-
-  return (
-    <>
-      <div style={{ width: "100%", height }} >
-        <ResponsiveContainer width="100%" height={60}>
-          <ScatterChart
-            margin={{
-              top: 10,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          >
-            <XAxis
-              type="category"
-              dataKey="hour"
-              interval={0}
-              tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-                fontSize: "0px",
-              }}
-              tickLine={{ transform: "translate(0, -6)" }}
-              stroke="none"
-            />
-            <YAxis
-              type="number"
-              dataKey="index"
-              name="sunday"
-              height={10}
-              width={80}
-              tick={false}
-              tickLine={false}
-              axisLine={false}
-              stroke="none"
-              label={{ value: "Sunday", position: "insideRight" }}
-            />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
-            <Tooltip
-              cursor={{ strokeDasharray: "3 3" }}
-              wrapperStyle={{ zIndex: 100 }}
-              content={renderTooltip}
-            />
-            <Scatter
-              data={data01}
-              fill={colors.primary}
-            />
-          </ScatterChart>
-        </ResponsiveContainer>
-
-        <ResponsiveContainer width="100%" height={60}>
-          <ScatterChart
-            width={800}
-            height={60}
-            margin={{
-              top: 10,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          >
-            <XAxis
-              type="category"
-              dataKey="hour"
-              name="hour"
-              interval={0}
-              tickLine={{ transform: "translate(0, -6)" }}
-              tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-                fontSize: "0px",
-              }}
-              stroke="none"
-            />
-            <YAxis
-              type="number"
-              dataKey="index"
-              height={10}
-              width={80}
-              tick={false}
-              tickLine={false}
-              axisLine={false}
-              label={{ value: "Monday", position: "insideRight" }}
-              stroke="none"
-            />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
-            <Tooltip
-              cursor={{ strokeDasharray: "3 3" }}
-              wrapperStyle={{ zIndex: 100 }}
-              content={renderTooltip}
-            />
-            <Scatter
-              data={data02}
-              fill={colors.info}
-            />
-          </ScatterChart>
-        </ResponsiveContainer>
-
-        <ResponsiveContainer width="100%" height={60}>
-          <ScatterChart
-            width={800}
-            height={60}
-            margin={{
-              top: 10,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          >
-            <XAxis
-              type="category"
-              dataKey="hour"
-              name="hour"
-              interval={0}
-              tickLine={{ transform: "translate(0, -6)" }}
-              tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-                fontSize: "0px",
-              }}
-              stroke="none"
-            />
-            <YAxis
-              type="number"
-              dataKey="index"
-              height={10}
-              width={80}
-              tick={false}
-              tickLine={false}
-              axisLine={false}
-              label={{ value: "Tuesday", position: "insideRight" }}
-              stroke="none"
-            />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
-            <Tooltip
-              cursor={{ strokeDasharray: "3 3" }}
-              wrapperStyle={{ zIndex: 100 }}
-              content={renderTooltip}
-            />
-            <Scatter
-              data={data01}
-              fill={colors.warning}
-            />
-          </ScatterChart>
-        </ResponsiveContainer>
-
-        <ResponsiveContainer width="100%" height={60}>
-          <ScatterChart
-            width={800}
-            height={60}
-            margin={{
-              top: 10,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          >
-            <XAxis
-              type="category"
-              dataKey="hour"
-              name="hour"
-              interval={0}
-              tickLine={{ transform: "translate(0, -6)" }}
-              tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-                fontSize: "0px",
-              }}
-              stroke="none"
-            />
-
-            <YAxis
-              type="number"
-              dataKey="index"
-              height={10}
-              width={80}
-              tick={false}
-              tickLine={false}
-              axisLine={false}
-              label={{ value: "Wednesday", position: "insideRight" }}
-              stroke="none"
-            />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
-            <Tooltip
-              cursor={{ strokeDasharray: "3 3" }}
-              wrapperStyle={{ zIndex: 100 }}
-              content={renderTooltip}
-            />
-            <Scatter
-              data={data02}
-              fill={colors.info}
-            />
-          </ScatterChart>
-        </ResponsiveContainer>
-
-        <ResponsiveContainer width="100%" height={60}>
-          <ScatterChart
-            width={800}
-            height={60}
-            margin={{
-              top: 10,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          >
-            <XAxis
-              type="category"
-              dataKey="hour"
-              name="hour"
-              interval={0}
-              tick={{ fontSize: 0 }}
-              tickLine={{ transform: "translate(0, -6)" }}
-              stroke="none"
-            />
-            <YAxis
-              type="number"
-              dataKey="index"
-              height={10}
-              width={80}
-              tick={false}
-              tickLine={false}
-              axisLine={false}
-              label={{ value: "Thursday", position: "insideRight" }}
-              stroke="none"
-            />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
-            <Tooltip
-              cursor={{ strokeDasharray: "3 3" }}
-              wrapperStyle={{ zIndex: 100 }}
-              content={renderTooltip}
-            />
-            <Scatter
-              data={data01}
-              fill={colors.success}
-            />
-          </ScatterChart>
-        </ResponsiveContainer>
-
-        <ResponsiveContainer width="100%" height={60}>
-          <ScatterChart
-            width={800}
-            height={60}
-            margin={{
-              top: 10,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          >
-            <XAxis
-              type="category"
-              dataKey="hour"
-              name="hour"
-              interval={0}
-              tick={{ fontSize: 0 }}
-              tickLine={{ transform: "translate(0, -6)" }}
-              stroke="none"
-            />
-            <YAxis
-              type="number"
-              dataKey="index"
-              height={10}
-              width={80}
-              tick={false}
-              tickLine={false}
-              axisLine={false}
-              label={{ value: "Friday", position: "insideRight" }}
-              stroke="none"
-            />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
-            <Tooltip
-              cursor={{ strokeDasharray: "3 3" }}
-              wrapperStyle={{ zIndex: 100 }}
-              content={renderTooltip}
-            />
-            <Scatter
-              data={data02}
-              fill={colors.primary}
-            />
-          </ScatterChart>
-        </ResponsiveContainer>
-
-        <ResponsiveContainer width="100%" height={60}>
-          <ScatterChart
-            width={800}
-            height={60}
-            margin={{
-              top: 10,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          >
-            <XAxis
-              type="category"
-              dataKey="hour"
-              name="hour"
-              interval={0}
-              tickLine={{ transform: "translate(0, -6)" }}
-              stroke="none"
-              tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-
-                fontSize: "12px",
-              }}
-            />
-            <YAxis
-              type="number"
-              dataKey="index"
-              height={10}
-              width={80}
-              tick={false}
-              tickLine={false}
-              axisLine={false}
-              label={{ value: "Saturday", position: "insideRight" }}
-              stroke="none"
-            />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
-            <Tooltip
-              cursor={{ strokeDasharray: "3 3" }}
-              wrapperStyle={{ zIndex: 100 }}
-              content={renderTooltip}
-            />
-            <Scatter
-              data={data01}
-              fill={colors.info}
-            />
-          </ScatterChart>
-        </ResponsiveContainer>
-      </div>
-    </>
-  );
-};
-
-export default BubbleChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/custom-tooltip.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/custom-tooltip.tsx
deleted file mode 100644
index 7f1ec663..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/custom-tooltip.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
-
-    return null;
-};
-
-export default CustomTooltip
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/jointline-scatter.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/jointline-scatter.tsx
deleted file mode 100644
index e308d833..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/jointline-scatter.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  ZAxis,
-} from "recharts";
-
-import CustomTooltip from "./custom-tooltip";
-interface DataPoint {
-  x: number;
-  y: number;
-}
-const data01: DataPoint[] = [
-  { x: 10, y: 30 },
-  { x: 30, y: 200 },
-  { x: 45, y: 100 },
-  { x: 50, y: 400 },
-  { x: 70, y: 150 },
-  { x: 100, y: 250 },
-];
-const data02: DataPoint[] = [
-  { x: 30, y: 20 },
-  { x: 50, y: 180 },
-  { x: 75, y: 240 },
-  { x: 100, y: 100 },
-  { x: 120, y: 190 },
-];
-
-const JointLineScatter = ({ height = 400 }) => {
-
-  const { theme: mode } = useTheme();
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          type="number"
-          dataKey="x"
-          name="stature"
-          unit="cm"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <ZAxis type="number" range={[100]} />
-        <Tooltip content={<CustomTooltip />} />
-
-        <Scatter
-          name="A school"
-          data={data01}
-          line
-          shape="cross"
-          fill={colors.info}
-        />
-        <Scatter
-          name="B school"
-          data={data02}
-          line
-          shape="diamond"
-          fill={colors.success}
-        />
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default JointLineScatter;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/layout.tsx
deleted file mode 100644
index c84f84c9..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Scatter Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/multiple-yaxes-scatter.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/multiple-yaxes-scatter.tsx
deleted file mode 100644
index a032d1c8..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/multiple-yaxes-scatter.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-interface DataPoint {
-  x: number;
-  y: number;
-  z: number;
-}
-const data01: DataPoint[] = [
-  { x: 100, y: 200, z: 200 },
-  { x: 120, y: 100, z: 260 },
-  { x: 170, y: 300, z: 400 },
-  { x: 140, y: 250, z: 280 },
-  { x: 150, y: 400, z: 500 },
-  { x: 110, y: 280, z: 200 },
-];
-const data02: DataPoint[] = [
-  { x: 300, y: 300, z: 200 },
-  { x: 400, y: 500, z: 260 },
-  { x: 200, y: 700, z: 400 },
-  { x: 340, y: 350, z: 280 },
-  { x: 560, y: 500, z: 500 },
-  { x: 230, y: 780, z: 200 },
-  { x: 500, y: 400, z: 200 },
-  { x: 300, y: 500, z: 260 },
-  { x: 240, y: 300, z: 400 },
-  { x: 320, y: 550, z: 280 },
-  { x: 500, y: 400, z: 500 },
-  { x: 420, y: 280, z: 200 },
-];
-
-const MultipleYAxesChart = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          type="number"
-          dataKey="x"
-          name="stature"
-          unit="cm"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          yAxisId="left"
-        />
-        <YAxis
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          yAxisId="right"
-          orientation="right"
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          yAxisId="left"
-          name="A school"
-          data={data01}
-          fill={colors.primary}
-        />
-        <Scatter
-          yAxisId="right"
-          name="A school"
-          data={data02}
-          fill={colors.primary}
-        />
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default MultipleYAxesChart;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/page.tsx
deleted file mode 100644
index a228f635..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/page.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicScatter from "./basic-scatter";
-import ThreeDimScatter from "./threedim-scatter";
-import JointLineScatter from "./jointline-scatter";
-import BubbleChart from "./bubble-chart";
-import ScatterChartWithLabels from "./scatterchart-withlabels";
-import MultipleYAxesChart from "./multiple-yaxes-scatter";
-import ScatterChartWithCells from "./scatter-chartwith-cells";
-
-const ChartJsRechartScatterPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicScatter />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Three Dim Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ThreeDimScatter />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Joint Line Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <JointLineScatter />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BubbleChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Scatter Chart With Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScatterChartWithLabels />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multiple YAxes Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleYAxesChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Scatter Chart With Cells</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScatterChartWithCells />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartJsRechartScatterPage;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatter-chartwith-cells.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatter-chartwith-cells.tsx
deleted file mode 100644
index 7328d7f2..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatter-chartwith-cells.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  Cell,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-interface DataPoint {
-  x: number;
-  y: number;
-  z: number;
-}
-const data: DataPoint[] = [
-  { x: 100, y: 200, z: 200 },
-  { x: 120, y: 100, z: 260 },
-  { x: 170, y: 300, z: 400 },
-  { x: 140, y: 250, z: 280 },
-  { x: 150, y: 400, z: 500 },
-  { x: 110, y: 280, z: 200 },
-];
-
-const ScatterChartWithCells = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  const COLORS = [
-    colors.primary,
-    colors.info,
-    colors.warning,
-    colors.success,
-  ];
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          type="number"
-          dataKey="x"
-          name="stature"
-          unit="cm"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-
-        <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          data={data}
-          name="A school"
-          fill={colors.primary}
-        >
-          {data.map((entry, index) => (
-            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-          ))}
-        </Scatter>
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ScatterChartWithCells;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatterchart-withlabels.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatterchart-withlabels.tsx
deleted file mode 100644
index 4ecaba7a..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatterchart-withlabels.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  LabelList,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-interface DataPoint {
-  x: number;
-  y: number;
-  z: number;
-}
-const data: DataPoint[] = [
-  { x: 100, y: 200, z: 200 },
-  { x: 120, y: 100, z: 260 },
-  { x: 170, y: 300, z: 400 },
-  { x: 140, y: 250, z: 280 },
-  { x: 150, y: 400, z: 500 },
-  { x: 110, y: 280, z: 200 },
-];
-
-const ScatterChartWithLabels = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <ScatterChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          type="number"
-          dataKey="x"
-          name="stature"
-          unit="cm"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          name="A school"
-          data={data}
-          fill={colors.info}
-        >
-          <LabelList dataKey="x" />
-        </Scatter>
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ScatterChartWithLabels;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/threedim-scatter.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/threedim-scatter.tsx
deleted file mode 100644
index 1c88cb7f..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/threedim-scatter.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  ZAxis,
-} from "recharts";
-import CustomTooltip from "./custom-tooltip";
-interface DataPoint {
-  x: number;
-  y: number;
-  z: number;
-}
-const data01: DataPoint[] = [
-  { x: 100, y: 200, z: 200 },
-  { x: 120, y: 100, z: 260 },
-  { x: 170, y: 300, z: 400 },
-  { x: 140, y: 250, z: 280 },
-  { x: 150, y: 400, z: 500 },
-  { x: 110, y: 280, z: 200 },
-];
-const data02: DataPoint[] = [
-  { x: 200, y: 260, z: 240 },
-  { x: 240, y: 290, z: 220 },
-  { x: 190, y: 290, z: 250 },
-  { x: 198, y: 250, z: 210 },
-  { x: 180, y: 280, z: 260 },
-  { x: 210, y: 220, z: 230 },
-];
-
-const ThreeDimScatter = ({ height = 300 }) => {
-
-  const { theme: mode } = useTheme();
-
-
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
-        <XAxis
-          type="number"
-          dataKey="x"
-          name="stature"
-          unit="cm"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-          axisLine={false}
-        />
-        <YAxis
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
-            fontSize: "12px",
-          }}
-          tickLine={false}
-          stroke='none'
-        />
-        <ZAxis
-          type="number"
-          dataKey="z"
-          range={[60, 400]}
-          name="score"
-          unit="km"
-        />
-        <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          name="A school"
-          data={data01}
-          shape="star"
-          fill={colors.info}
-        />
-        <Scatter
-          name="B school"
-          data={data02}
-          fill={colors.success}
-          shape="triangle"
-        />
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default ThreeDimScatter;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/basic-tree-map.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/basic-tree-map.tsx
deleted file mode 100644
index cf3e35d4..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/basic-tree-map.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, Treemap } from 'recharts';
-
-const data: any = [
-    {
-        name: 'axis',
-        children: [
-            { name: 'Axes', size: 1302 },
-            { name: 'Axis', size: 24593 },
-            { name: 'AxisGridLine', size: 652 },
-            { name: 'AxisLabel', size: 636 },
-            { name: 'CartesianAxes', size: 6703 },
-        ],
-    },
-    {
-        name: 'controls',
-        children: [
-            { name: 'AnchorControl', size: 2138 },
-            { name: 'ClickControl', size: 3824 },
-            { name: 'Control', size: 1353 },
-            { name: 'ControlList', size: 4665 },
-            { name: 'DragControl', size: 2649 },
-            { name: 'ExpandControl', size: 2832 },
-            { name: 'HoverControl', size: 4896 },
-            { name: 'IControl', size: 763 },
-            { name: 'PanZoomControl', size: 5222 },
-            { name: 'SelectionControl', size: 7862 },
-            { name: 'TooltipControl', size: 8435 },
-        ],
-    },
-    {
-        name: 'data',
-        children: [
-            { name: 'Data', size: 20544 },
-            { name: 'DataList', size: 19788 },
-            { name: 'DataSprite', size: 10349 },
-            { name: 'EdgeSprite', size: 3301 },
-            { name: 'NodeSprite', size: 19382 },
-            {
-                name: 'render',
-                children: [
-                    { name: 'ArrowType', size: 698 },
-                    { name: 'EdgeRenderer', size: 5569 },
-                    { name: 'IRenderer', size: 353 },
-                    { name: 'ShapeRenderer', size: 2247 },
-                ],
-            },
-            { name: 'ScaleBinding', size: 11275 },
-            { name: 'Tree', size: 7147 },
-            { name: 'TreeBuilder', size: 9930 },
-        ],
-    },
-    {
-        name: 'events',
-        children: [
-            { name: 'DataEvent', size: 7313 },
-            { name: 'SelectionEvent', size: 6880 },
-            { name: 'TooltipEvent', size: 3701 },
-            { name: 'VisualizationEvent', size: 2117 },
-        ],
-    },
-    {
-        name: 'legend',
-        children: [
-            { name: 'Legend', size: 20859 },
-            { name: 'LegendItem', size: 4614 },
-            { name: 'LegendRange', size: 10530 },
-        ],
-    },
-    {
-        name: 'operator',
-        children: [
-            {
-                name: 'distortion',
-                children: [
-                    { name: 'BifocalDistortion', size: 4461 },
-                    { name: 'Distortion', size: 6314 },
-                    { name: 'FisheyeDistortion', size: 3444 },
-                ],
-            },
-            {
-                name: 'encoder',
-                children: [
-                    { name: 'ColorEncoder', size: 3179 },
-                    { name: 'Encoder', size: 4060 },
-                    { name: 'PropertyEncoder', size: 4138 },
-                    { name: 'ShapeEncoder', size: 1690 },
-                    { name: 'SizeEncoder', size: 1830 },
-                ],
-            },
-            {
-                name: 'filter',
-                children: [
-                    { name: 'FisheyeTreeFilter', size: 5219 },
-                    { name: 'GraphDistanceFilter', size: 3165 },
-                    { name: 'VisibilityFilter', size: 3509 },
-                ],
-            },
-            { name: 'IOperator', size: 1286 },
-            {
-                name: 'label',
-                children: [
-                    { name: 'Labeler', size: 9956 },
-                    { name: 'RadialLabeler', size: 3899 },
-                    { name: 'StackedAreaLabeler', size: 3202 },
-                ],
-            },
-            {
-                name: 'layout',
-                children: [
-                    { name: 'AxisLayout', size: 6725 },
-                    { name: 'BundledEdgeRouter', size: 3727 },
-                    { name: 'CircleLayout', size: 9317 },
-                    { name: 'CirclePackingLayout', size: 12003 },
-                    { name: 'DendrogramLayout', size: 4853 },
-                    { name: 'ForceDirectedLayout', size: 8411 },
-                    { name: 'IcicleTreeLayout', size: 4864 },
-                    { name: 'IndentedTreeLayout', size: 3174 },
-                    { name: 'Layout', size: 7881 },
-                    { name: 'NodeLinkTreeLayout', size: 12870 },
-                    { name: 'PieLayout', size: 2728 },
-                    { name: 'RadialTreeLayout', size: 12348 },
-                    { name: 'RandomLayout', size: 870 },
-                    { name: 'StackedAreaLayout', size: 9121 },
-                    { name: 'TreeMapLayout', size: 9191 },
-                ],
-            },
-            { name: 'Operator', size: 2490 },
-            { name: 'OperatorList', size: 5248 },
-            { name: 'OperatorSequence', size: 4190 },
-            { name: 'OperatorSwitch', size: 2581 },
-            { name: 'SortOperator', size: 2023 },
-        ],
-    },
-];
-const BasicTreeMap = ({ height = 350 }) => {
-
-    const { theme: mode } = useTheme();
-
-
-    return (
-        <ResponsiveContainer height={height}>
-            <Treemap width={400} height={200} data={data} dataKey="size" aspectRatio={4 / 3}
-                stroke="#fff"
-                fill={colors.primary}
-            />
-        </ResponsiveContainer>
-    );
-};
-
-export default BasicTreeMap;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/custom-content-treemap.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/custom-content-treemap.tsx
deleted file mode 100644
index 2992adb8..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/custom-content-treemap.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/hooks/use-config";
-import { ResponsiveContainer, Treemap } from 'recharts';
-
-const data: any = [
-    {
-        name: 'axis',
-        children: [
-            { name: 'Axes', size: 1302 },
-            { name: 'Axis', size: 24593 },
-            { name: 'AxisGridLine', size: 652 },
-            { name: 'AxisLabel', size: 636 },
-            { name: 'CartesianAxes', size: 6703 },
-        ],
-    },
-    {
-        name: 'controls',
-        children: [
-            { name: 'AnchorControl', size: 2138 },
-            { name: 'ClickControl', size: 3824 },
-            { name: 'Control', size: 1353 },
-            { name: 'ControlList', size: 4665 },
-            { name: 'DragControl', size: 2649 },
-            { name: 'ExpandControl', size: 2832 },
-            { name: 'HoverControl', size: 4896 },
-            { name: 'IControl', size: 763 },
-            { name: 'PanZoomControl', size: 5222 },
-            { name: 'SelectionControl', size: 7862 },
-            { name: 'TooltipControl', size: 8435 },
-        ],
-    },
-    {
-        name: 'data',
-        children: [
-            { name: 'Data', size: 20544 },
-            { name: 'DataList', size: 19788 },
-            { name: 'DataSprite', size: 10349 },
-            { name: 'EdgeSprite', size: 3301 },
-            { name: 'NodeSprite', size: 19382 },
-            {
-                name: 'render',
-                children: [
-                    { name: 'ArrowType', size: 698 },
-                    { name: 'EdgeRenderer', size: 5569 },
-                    { name: 'IRenderer', size: 353 },
-                    { name: 'ShapeRenderer', size: 2247 },
-                ],
-            },
-            { name: 'ScaleBinding', size: 11275 },
-            { name: 'Tree', size: 7147 },
-            { name: 'TreeBuilder', size: 9930 },
-        ],
-    },
-    {
-        name: 'events',
-        children: [
-            { name: 'DataEvent', size: 7313 },
-            { name: 'SelectionEvent', size: 6880 },
-            { name: 'TooltipEvent', size: 3701 },
-            { name: 'VisualizationEvent', size: 2117 },
-        ],
-    },
-    {
-        name: 'legend',
-        children: [
-            { name: 'Legend', size: 20859 },
-            { name: 'LegendItem', size: 4614 },
-            { name: 'LegendRange', size: 10530 },
-        ],
-    },
-    {
-        name: 'operator',
-        children: [
-            {
-                name: 'distortion',
-                children: [
-                    { name: 'BifocalDistortion', size: 4461 },
-                    { name: 'Distortion', size: 6314 },
-                    { name: 'FisheyeDistortion', size: 3444 },
-                ],
-            },
-            {
-                name: 'encoder',
-                children: [
-                    { name: 'ColorEncoder', size: 3179 },
-                    { name: 'Encoder', size: 4060 },
-                    { name: 'PropertyEncoder', size: 4138 },
-                    { name: 'ShapeEncoder', size: 1690 },
-                    { name: 'SizeEncoder', size: 1830 },
-                ],
-            },
-            {
-                name: 'filter',
-                children: [
-                    { name: 'FisheyeTreeFilter', size: 5219 },
-                    { name: 'GraphDistanceFilter', size: 3165 },
-                    { name: 'VisibilityFilter', size: 3509 },
-                ],
-            },
-            { name: 'IOperator', size: 1286 },
-            {
-                name: 'label',
-                children: [
-                    { name: 'Labeler', size: 9956 },
-                    { name: 'RadialLabeler', size: 3899 },
-                    { name: 'StackedAreaLabeler', size: 3202 },
-                ],
-            },
-            {
-                name: 'layout',
-                children: [
-                    { name: 'AxisLayout', size: 6725 },
-                    { name: 'BundledEdgeRouter', size: 3727 },
-                    { name: 'CircleLayout', size: 9317 },
-                    { name: 'CirclePackingLayout', size: 12003 },
-                    { name: 'DendrogramLayout', size: 4853 },
-                    { name: 'ForceDirectedLayout', size: 8411 },
-                    { name: 'IcicleTreeLayout', size: 4864 },
-                    { name: 'IndentedTreeLayout', size: 3174 },
-                    { name: 'Layout', size: 7881 },
-                    { name: 'NodeLinkTreeLayout', size: 12870 },
-                    { name: 'PieLayout', size: 2728 },
-                    { name: 'RadialTreeLayout', size: 12348 },
-                    { name: 'RandomLayout', size: 870 },
-                    { name: 'StackedAreaLayout', size: 9121 },
-                    { name: 'TreeMapLayout', size: 9191 },
-                ],
-            },
-            { name: 'Operator', size: 2490 },
-            { name: 'OperatorList', size: 5248 },
-            { name: 'OperatorSequence', size: 4190 },
-            { name: 'OperatorSwitch', size: 2581 },
-            { name: 'SortOperator', size: 2023 },
-        ],
-    },
-];
-const COLORS = [
-    '#8889DD',
-    '#9597E4',
-    '#8DC77B',
-    '#A5D297',
-    '#E2CF45',
-    '#F8C12D'
-];
-
-const CustomizedContent = ({ root, depth, x, y, width, height, index, colors, name }: any) => {
-    return (
-        <g>
-            <rect
-                x={x}
-                y={y}
-                width={width}
-                height={height}
-                style={{
-                    fill: depth < 2 ? colors[Math.floor((index / root.children.length) * 6)] : '#ffffff00',
-                    stroke: '#fff',
-                    strokeWidth: 2 / (depth + 1e-10),
-                    strokeOpacity: 1 / (depth + 1e-10),
-                }}
-            />
-            {depth === 1 ? (
-                <text x={x + width / 2} y={y + height / 2 + 7} textAnchor="middle" fill="#fff" fontSize={14}>
-                    {name}
-                </text>
-            ) : null}
-            {depth === 1 ? (
-                <text x={x + 4} y={y + 18} fill="#fff" fontSize={16} fillOpacity={0.9}>
-                    {index + 1}
-                </text>
-            ) : null}
-        </g>
-    );
-
-}
-
-const CustomContentTreeMap = ({ height = 350 }) => {
-
-    const { theme: mode } = useTheme();
-
-
-    return (
-        <ResponsiveContainer height={height}>
-            <Treemap
-                data={data}
-                dataKey="size"
-                aspectRatio={4 / 3}
-                stroke="#fff"
-                fill={colors.info}
-                content={<CustomizedContent colors={COLORS} />}
-            />
-        </ResponsiveContainer>
-    );
-};
-
-export default CustomContentTreeMap;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/layout.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/layout.tsx
deleted file mode 100644
index 7fec258a..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const metadata = {
-  title: "Rechart Tree Chart ",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/page.tsx b/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/page.tsx
deleted file mode 100644
index 91f40807..00000000
--- a/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/page.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicTreeMap from "./basic-tree-map";
-import CustomContentTreeMap from "./custom-content-treemap";
-
-const ChartjsRechartTreemapPage = () => {
-    return (
-        <div className="space-y-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicTreeMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom Content Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomContentTreeMap />
-                </CardContent>
-            </Card>
-        </div>
-    );
-};
-
-export default ChartjsRechartTreemapPage;
diff --git a/app/[locale]/(protected)/charts/rechart/layout.tsx b/app/[locale]/(protected)/charts/rechart/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/charts/rechart/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/accordion/basic-accordion.tsx b/app/[locale]/(protected)/components/accordion/basic-accordion.tsx
deleted file mode 100644
index 1bc380dc..00000000
--- a/app/[locale]/(protected)/components/accordion/basic-accordion.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-const BasicAccordion = () => {
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
-          How does Dashcode work?
-        </AccordionTrigger>
-        <AccordionContent>
-          Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Where I can learn more about using Dashcode?</AccordionTrigger>
-        <AccordionContent>
-          Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Why Dashcode is so important?</AccordionTrigger>
-        <AccordionContent>
-          Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default BasicAccordion;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/accordion/layout.tsx b/app/[locale]/(protected)/components/accordion/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/accordion/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/accordion/page.tsx b/app/[locale]/(protected)/components/accordion/page.tsx
deleted file mode 100644
index c6bc8976..00000000
--- a/app/[locale]/(protected)/components/accordion/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicAccordion from "./basic-accordion";
-import { basicAccordion } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const AccordionPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb/>
-      <Card title="Basic Accordion" code={basicAccordion}>
-        <BasicAccordion />
-      </Card>
-    </div>
-  );
-};
-
-export default AccordionPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/accordion/source-code.ts b/app/[locale]/(protected)/components/accordion/source-code.ts
deleted file mode 100644
index 661a9e9e..00000000
--- a/app/[locale]/(protected)/components/accordion/source-code.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-export const basicAccordion=`import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-const BasicAccordion = () => {
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
-          How does Dashcode work?
-        </AccordionTrigger>
-        <AccordionContent>
-          Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Where I can learn more about using Dashcode?</AccordionTrigger>
-        <AccordionContent>
-          Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Why Dashcode is so important?</AccordionTrigger>
-        <AccordionContent>
-          Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default BasicAccordion;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert-dialog/basic-alert-dialog.tsx b/app/[locale]/(protected)/components/alert-dialog/basic-alert-dialog.tsx
deleted file mode 100644
index f5f20b51..00000000
--- a/app/[locale]/(protected)/components/alert-dialog/basic-alert-dialog.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
-import { Button } from "@/components/ui/button";
-const BasicAlertDialog = () => {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline">Show Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-};
-
-export default BasicAlertDialog;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert-dialog/layout.tsx b/app/[locale]/(protected)/components/alert-dialog/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/alert-dialog/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/alert-dialog/page.tsx b/app/[locale]/(protected)/components/alert-dialog/page.tsx
deleted file mode 100644
index 090cfac9..00000000
--- a/app/[locale]/(protected)/components/alert-dialog/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicAlertDialog from "./basic-alert-dialog";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import {basicAlertDialog} from "./source-code";
-const AlertDialogPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb/>
-      <Card title="Basic Alert Dialog" code={basicAlertDialog}>
-        <BasicAlertDialog />
-      </Card>
-    </div>
-  );
-};
-
-export default AlertDialogPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert-dialog/source-code.ts b/app/[locale]/(protected)/components/alert-dialog/source-code.ts
deleted file mode 100644
index 033cd9f3..00000000
--- a/app/[locale]/(protected)/components/alert-dialog/source-code.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export const basicAlertDialog=`import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
-import { Button } from "@/components/ui/button";
-const BasicAlertDialog = () => {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline">Show Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-};
-
-export default BasicAlertDialog;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/basic-alert.tsx b/app/[locale]/(protected)/components/alert/basic-alert.tsx
deleted file mode 100644
index ba69830a..00000000
--- a/app/[locale]/(protected)/components/alert/basic-alert.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-
-const BasicAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert>
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default BasicAlert;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/dismissable-alert.tsx b/app/[locale]/(protected)/components/alert/dismissable-alert.tsx
deleted file mode 100644
index 9b5f0fa3..00000000
--- a/app/[locale]/(protected)/components/alert/dismissable-alert.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
-
-const DissmissableAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" dismissible>
-        <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default DissmissableAlert;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/dismissable-softalert.tsx b/app/[locale]/(protected)/components/alert/dismissable-softalert.tsx
deleted file mode 100644
index 1eb66457..00000000
--- a/app/[locale]/(protected)/components/alert/dismissable-softalert.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
-
-const DissmissableSoftAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert variant="soft" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="primary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="secondary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="success" dismissible>
-        <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="warning" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="destructive" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="info" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default DissmissableSoftAlert;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/layout.tsx b/app/[locale]/(protected)/components/alert/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/alert/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/alert/link-colors.tsx b/app/[locale]/(protected)/components/alert/link-colors.tsx
deleted file mode 100644
index a395b8ae..00000000
--- a/app/[locale]/(protected)/components/alert/link-colors.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import Link from 'next/link';
-
-const LinkColorsAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert variant="soft">
-        <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" variant="soft">
-        <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" variant="soft">
-        <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default LinkColorsAlert;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/outline-alert.tsx b/app/[locale]/(protected)/components/alert/outline-alert.tsx
deleted file mode 100644
index 55a338c2..00000000
--- a/app/[locale]/(protected)/components/alert/outline-alert.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-
-const OutlineAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default OutlineAlert;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/outline-alerticon.tsx b/app/[locale]/(protected)/components/alert/outline-alerticon.tsx
deleted file mode 100644
index 9b319bb3..00000000
--- a/app/[locale]/(protected)/components/alert/outline-alerticon.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
-
-const OutlineAlertIcon = () => {
-  return (
-    <div className="space-y-4">
-     <Alert variant="outline" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-     <Alert variant="outline" color="primary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="secondary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="success" dismissible>
-        <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="warning" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="destructive" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="info" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default OutlineAlertIcon;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/page.tsx b/app/[locale]/(protected)/components/alert/page.tsx
deleted file mode 100644
index 85aca296..00000000
--- a/app/[locale]/(protected)/components/alert/page.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Card from "@/components/code-snippet";
-import SoftColorsAlert from "./soft-colors";
-import LinkColorsAlert from "./link-colors";
-import DissmissableAlert from "./dismissable-alert";
-import DissmissableSoftAlert from "./dismissable-softalert";
-import OutlineAlert from "./outline-alert";
-import OutlineAlertIcon from "./outline-alerticon";
-import BasicAlert from "./basic-alert";
-import { basicAlert, dismissableAlert, dismissableSoftAlert, linkColorsAlert, outlineAlert, outlineAlertIcon, softColorAlert } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const AlertPage = () => {
-  return (
-    <>
-    <SiteBreadcrumb/>
-      <div className="grid grid-cols-2  gap-6">
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Color" code={basicAlert}>
-            <BasicAlert />
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Soft Color" code={softColorAlert}>
-            <SoftColorsAlert />
-          </Card>
-        </div>
-        <div className="col-span-2">
-          <Card title="Link Colors" code={linkColorsAlert}>
-            <LinkColorsAlert />
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Dismissible Theme Color Alerts With Icon" code={dismissableAlert}>
-            <DissmissableAlert />
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Dismissible Light Color Alerts With Icon" code={dismissableSoftAlert}>
-            <DissmissableSoftAlert />
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Outline Theme Color Alerts" code={outlineAlert}>
-            <OutlineAlert />
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Outline Light Color Alerts With Icon" code={outlineAlertIcon}>
-            <OutlineAlertIcon />
-          </Card>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default AlertPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/soft-colors.tsx b/app/[locale]/(protected)/components/alert/soft-colors.tsx
deleted file mode 100644
index 185a16b8..00000000
--- a/app/[locale]/(protected)/components/alert/soft-colors.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-
-const SoftColorsAlert = () => {
-  return (
-    <div className="space-y-4">
-       <Alert variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default SoftColorsAlert;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/alert/source-code.ts b/app/[locale]/(protected)/components/alert/source-code.ts
deleted file mode 100644
index 2d47575d..00000000
--- a/app/[locale]/(protected)/components/alert/source-code.ts
+++ /dev/null
@@ -1,325 +0,0 @@
-export const basicAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
-
-const BasicAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert>
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default BasicAlert;`
-
-export const softColorAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
-
-const SoftColorsAlert = () => {
-  return (
-    <div className="space-y-4">
-       <Alert variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default SoftColorsAlert;`
-
-export const linkColorsAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
-import Link from 'next/link';
-
-const LinkColorsAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert variant="soft">
-        <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" variant="soft">
-        <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" variant="soft">
-        <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" variant="soft">
-        <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default LinkColorsAlert;`
-
-export const dismissableAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
-
-const DissmissableAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" dismissible>
-        <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default DissmissableAlert;`
-
-export const dismissableSoftAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
-
-const DissmissableSoftAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert variant="soft" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="primary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="secondary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="success" dismissible>
-        <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="warning" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="destructive" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="soft" color="info" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default DissmissableSoftAlert;`
-
-export const outlineAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
-
-const OutlineAlert = () => {
-  return (
-    <div className="space-y-4">
-      <Alert variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="primary" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="secondary" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="success" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="destructive" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="warning" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert color="info" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default OutlineAlert;`
-
-export const outlineAlertIcon=`import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
-
-const OutlineAlertIcon = () => {
-  return (
-    <div className="space-y-4">
-     <Alert variant="outline" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-     <Alert variant="outline" color="primary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="secondary" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="success" dismissible>
-        <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="warning" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="destructive" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-      <Alert variant="outline" color="info" dismissible>
-        <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-};
-
-export default OutlineAlertIcon;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/avatar-group.tsx b/app/[locale]/(protected)/components/avatar/avatar-group.tsx
deleted file mode 100644
index b3a3560c..00000000
--- a/app/[locale]/(protected)/components/avatar/avatar-group.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-
-const AvatarGroup = () => {
-  return (
-    <div className="-gap-2">
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-1.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-2.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-3.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-4.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default AvatarGroup;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/avatar-shape.tsx b/app/[locale]/(protected)/components/avatar/avatar-shape.tsx
deleted file mode 100644
index bda666ad..00000000
--- a/app/[locale]/(protected)/components/avatar/avatar-shape.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const AvatarShape = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar shape="circle"  color="primary">
-        <AvatarImage src="/images/avatar/av-4.jpg" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar shape="square" >
-        <AvatarImage src="/images/avatar/av-1.jpg" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default AvatarShape;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/basic-avatar.tsx b/app/[locale]/(protected)/components/avatar/basic-avatar.tsx
deleted file mode 100644
index 4802fff9..00000000
--- a/app/[locale]/(protected)/components/avatar/basic-avatar.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-const BasicAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar>
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="primary">
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar color="secondary">
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar color="success">
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar color="info">
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="warning">
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar color="destructive">
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default BasicAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/border-avatar.tsx b/app/[locale]/(protected)/components/avatar/border-avatar.tsx
deleted file mode 100644
index 8a8ccd5a..00000000
--- a/app/[locale]/(protected)/components/avatar/border-avatar.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-const BorderAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" >
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="primary">
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="secondary">
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="success">
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="info">
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="warning">
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="destructive">
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default BorderAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/border-color-avatar.tsx b/app/[locale]/(protected)/components/avatar/border-color-avatar.tsx
deleted file mode 100644
index 5d6db46c..00000000
--- a/app/[locale]/(protected)/components/avatar/border-color-avatar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const BorderColorAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar
-        className="ring-1 ring-default ring-offset-[3px] ring-offset-background"
-      >
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-primary ring-offset-[3px] ring-offset-background"
-        color="primary"
-      >
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-secondary ring-offset-[3px] ring-offset-background"
-        color="secondary"
-      >
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-success ring-offset-[3px] ring-offset-background"
-        color="success"
-      >
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-info ring-offset-[3px] ring-offset-background"
-        color="info"
-      >
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-warning ring-offset-[3px] ring-offset-background"
-        color="warning"
-      >
-        <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-destructive ring-offset-[3px] ring-offset-background"
-        color="destructive"
-      >
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-
-    </div>
-  )
-}
-export default BorderColorAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/icon-avatar.tsx b/app/[locale]/(protected)/components/avatar/icon-avatar.tsx
deleted file mode 100644
index 6fad9382..00000000
--- a/app/[locale]/(protected)/components/avatar/icon-avatar.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { CircleCheck, MessageSquare, Trash2, User } from "lucide-react";
-const IconAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar>
-        <AvatarFallback><User className="w-5 h-5" /></AvatarFallback>
-      </Avatar>
-      <Avatar color="primary">
-        <AvatarFallback> <MessageSquare className="w-5 h-5" /></AvatarFallback>
-      </Avatar>
-      <Avatar color="secondary">
-        <AvatarFallback> <Trash2 className="w-5 h-5" /> </AvatarFallback>
-      </Avatar>
-      <Avatar color="success">
-        <AvatarFallback> <CircleCheck className="w-5 h-5" /> </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default IconAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/image-avatar.tsx b/app/[locale]/(protected)/components/avatar/image-avatar.tsx
deleted file mode 100644
index 00292a9d..00000000
--- a/app/[locale]/(protected)/components/avatar/image-avatar.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-
-const ImageAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar>
-        <AvatarImage src="/images/avatar/avatar-1.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="primary">
-        <AvatarImage src="/images/avatar/avatar-2.png" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar color="secondary">
-        <AvatarImage src="/images/avatar/avatar-3.png" alt="dashcode" />
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar color="success">
-        <AvatarImage src="/images/avatar/avatar-4.png" alt="dashcode" />
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar color="info">
-        <AvatarImage src="/images/avatar/avatar-5.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="warning">
-        <AvatarImage src="/images/avatar/avatar-6.png" alt="dashcode" />
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar color="destructive">
-        <AvatarImage src="/images/avatar/avatar-7.png" alt="dashcode" />
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-    </div>
-  )
-}
-
-export default ImageAvatar;
diff --git a/app/[locale]/(protected)/components/avatar/layout.tsx b/app/[locale]/(protected)/components/avatar/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/avatar/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/avatar/page.tsx b/app/[locale]/(protected)/components/avatar/page.tsx
deleted file mode 100644
index 5b93ea73..00000000
--- a/app/[locale]/(protected)/components/avatar/page.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicAvatar from "./basic-avatar";
-import ImageAvatar from "./image-avatar";
-import TonalAvatar from "./tonal-avatar";
-import IconAvatar from "./icon-avatar";
-import BorderAvatar from "./border-avatar";
-import BorderColorAvatar from "./border-color-avatar";
-import SizeAvatar from "./size-avatar";
-import RoundedAvatar from "./rounded-avatar";
-import TooltipAvatar from "./tooltip-avatar";
-import AvatarShape from "./avatar-shape";
-import AvatarGroup from "./avatar-group";
-import { avatarGroup, avatarShape, basicAvatar, borderAvatar, borderColorAvatar, iconAvatar, imageAvatar, roundedAvatar, sizeAvatar, tonalAvatar, tooltipAvatar } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const AvatarPage = () => {
-  return (
-    <>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-        <Card title="Basic Avatar" code={basicAvatar}>
-          <BasicAvatar />
-        </Card>
-        <Card title="Image Avatar" code={imageAvatar}>
-          <ImageAvatar />
-        </Card>
-        <Card title="Tonal Avatar" code={tonalAvatar}>
-          <TonalAvatar />
-        </Card>
-        <Card title="Icon Avatar" code={iconAvatar}>
-          <IconAvatar />
-        </Card>
-        <Card title="Border Avatar" code={borderAvatar}>
-          <BorderAvatar />
-        </Card>
-        <Card title="Border Color Avatar" code={borderColorAvatar}>
-          <BorderColorAvatar />
-        </Card>
-        <Card title="Size Avatar" code={sizeAvatar}>
-          <SizeAvatar />
-        </Card>
-        <Card title="Rounded Avatar" code={roundedAvatar}>
-          <RoundedAvatar />
-        </Card>
-        <Card title="Avatar Shape" code={avatarShape}>
-          <AvatarShape />
-        </Card>
-        <Card title="Tooltip Avatar" code={tooltipAvatar}>
-          <TooltipAvatar />
-        </Card>
-        <Card title="Avatar Group" code={avatarGroup}>
-          <AvatarGroup />
-        </Card>
-      </div>
-    </>
-  );
-};
-
-export default AvatarPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/rounded-avatar.tsx b/app/[locale]/(protected)/components/avatar/rounded-avatar.tsx
deleted file mode 100644
index 60692fb1..00000000
--- a/app/[locale]/(protected)/components/avatar/rounded-avatar.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const RoundedAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar rounded="sm"  color="primary">
-        <AvatarImage src="/images/avatar/av-1.jpg" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar rounded="md"  >
-        <AvatarImage src="/images/avatar/av-2.jpg" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar rounded="lg"  color="secondary">
-        <AvatarImage src="/images/avatar/av-3.jpg" alt="dashcode" />
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar rounded="full"  color="success">
-        <AvatarImage src="/images/avatar/av-4.jpg" alt="avatar image" />
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default RoundedAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/size-avatar.tsx b/app/[locale]/(protected)/components/avatar/size-avatar.tsx
deleted file mode 100644
index ad21d632..00000000
--- a/app/[locale]/(protected)/components/avatar/size-avatar.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const SizeAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar size="sm">
-        <AvatarImage  src="/images/avatar/avatar-1.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar size="base" color="primary">
-        <AvatarImage  src="/images/avatar/avatar-2.png" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar size="md" color="success">
-        <AvatarImage  src="/images/avatar/avatar-3.png" alt="dashcode" />
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar size="lg" color="info">
-        <AvatarImage  src="/images/avatar/avatar-4.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar size="xl" color="warning">
-        <AvatarImage  src="/images/avatar/avatar-5.png" alt="dashcode" />
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default SizeAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/source-code.ts b/app/[locale]/(protected)/components/avatar/source-code.ts
deleted file mode 100644
index 22ee3dee..00000000
--- a/app/[locale]/(protected)/components/avatar/source-code.ts
+++ /dev/null
@@ -1,432 +0,0 @@
-export const basicAvatar = `import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-const BasicAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar>
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="primary">
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar color="secondary">
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar color="success">
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar color="info">
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="warning">
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar color="destructive">
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default BasicAvatar;`
-
-export const imageAvatar = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-
-const ImageAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar>
-        <AvatarImage src="/images/avatar/avatar-1.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="primary">
-        <AvatarImage src="/images/avatar/avatar-2.png" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar color="secondary">
-        <AvatarImage src="/images/avatar/avatar-3.png" alt="dashcode" />
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar color="success">
-        <AvatarImage src="/images/avatar/avatar-4.png" alt="dashcode" />
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar color="info">
-        <AvatarImage src="/images/avatar/avatar-5.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar color="warning">
-        <AvatarImage src="/images/avatar/avatar-6.png" alt="dashcode" />
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar color="destructive">
-        <AvatarImage src="/images/avatar/avatar-7.png" alt="dashcode" />
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-    </div>
-  )
-}
-
-export default ImageAvatar;`
-
-export const tonalAvatar=`import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-
-const TonalAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-    <Avatar variant="ghost" >
-      <AvatarFallback > PR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="primary">
-      <AvatarFallback> LI </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="secondary">
-      <AvatarFallback> SH </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="success">
-      <AvatarFallback> SU </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="info">
-      <AvatarFallback> PR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="warning">
-      <AvatarFallback> SR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="destructive">
-      <AvatarFallback> AR </AvatarFallback>
-    </Avatar>
-  </div>
-  );
-};
-
-export default TonalAvatar;`
-
-export const iconAvatar=`import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { CircleCheck, MessageSquare, Trash2, User } from "lucide-react";
-const IconAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar>
-        <AvatarFallback><User className="w-5 h-5" /></AvatarFallback>
-      </Avatar>
-      <Avatar color="primary">
-        <AvatarFallback> <MessageSquare className="w-5 h-5" /></AvatarFallback>
-      </Avatar>
-      <Avatar color="secondary">
-        <AvatarFallback> <Trash2 className="w-5 h-5" /> </AvatarFallback>
-      </Avatar>
-      <Avatar color="success">
-        <AvatarFallback> <CircleCheck className="w-5 h-5" /> </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default IconAvatar;`
-
-export const borderAvatar=`import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-const BorderAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" >
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="primary">
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="secondary">
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="success">
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="info">
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="warning">
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="destructive">
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default BorderAvatar;`
-
-export const borderColorAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const BorderColorAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar
-        className="ring-1 ring-default ring-offset-[3px] ring-offset-background"
-      >
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-primary ring-offset-[3px] ring-offset-background"
-        color="primary"
-      >
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-secondary ring-offset-[3px] ring-offset-background"
-        color="secondary"
-      >
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-success ring-offset-[3px] ring-offset-background"
-        color="success"
-      >
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-info ring-offset-[3px] ring-offset-background"
-        color="info"
-      >
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-warning ring-offset-[3px] ring-offset-background"
-        color="warning"
-      >
-        <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-      <Avatar
-        className="ring-1 ring-destructive ring-offset-[3px] ring-offset-background"
-        color="destructive"
-      >
-        <AvatarFallback> AR </AvatarFallback>
-      </Avatar>
-
-    </div>
-  )
-}
-export default BorderColorAvatar;`
-
-export const sizeAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const SizeAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar size="sm">
-        <AvatarImage  src="/images/avatar/avatar-1.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar size="base" color="primary">
-        <AvatarImage  src="/images/avatar/avatar-2.png" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar size="md" color="success">
-        <AvatarImage  src="/images/avatar/avatar-3.png" alt="dashcode" />
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-      <Avatar size="lg" color="info">
-        <AvatarImage  src="/images/avatar/avatar-4.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar size="xl" color="warning">
-        <AvatarImage  src="/images/avatar/avatar-5.png" alt="dashcode" />
-        <AvatarFallback> SR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default SizeAvatar;`
-
-export const roundedAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const RoundedAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar rounded="sm"  color="primary">
-        <AvatarImage src="/images/avatar/av-1.jpg" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar rounded="md"  >
-        <AvatarImage src="/images/avatar/av-2.jpg" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar rounded="lg"  color="secondary">
-        <AvatarImage src="/images/avatar/av-3.jpg" alt="dashcode" />
-        <AvatarFallback> SH </AvatarFallback>
-      </Avatar>
-      <Avatar rounded="full"  color="success">
-        <AvatarImage src="/images/avatar/av-4.jpg" alt="avatar image" />
-        <AvatarFallback> SU </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default RoundedAvatar;`
-
-export const avatarShape=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-const AvatarShape = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Avatar shape="circle"  color="primary">
-        <AvatarImage src="/images/avatar/av-4.jpg" alt="dashcode" />
-        <AvatarFallback> LI </AvatarFallback>
-      </Avatar>
-      <Avatar shape="square" >
-        <AvatarImage src="/images/avatar/av-1.jpg" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default AvatarShape;`
-
-export const tooltipAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-const TooltipAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar>
-              <AvatarImage
-                src="/images/avatar/avatar-1.png" alt="dashcode"
-              />
-              <AvatarFallback> PR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Hasan Ali</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="primary">
-              <AvatarImage
-                src="/images/avatar/avatar-2.png" alt="dashcode"
-              />
-              <AvatarFallback> LI </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="info">
-            <p>Blue Cherry</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="secondary">
-              <AvatarImage
-                src="/images/avatar/avatar-3.png" alt="dashcode"
-              />
-              <AvatarFallback> SH </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>John Doe</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="success">
-              <AvatarImage
-                src="/images/avatar/avatar-4.png" alt="dashcode"
-              />
-              <AvatarFallback> SU </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Emily Davis</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="info">
-              <AvatarImage
-                src="/images/avatar/avatar-5.png" alt="dashcode"
-              />
-              <AvatarFallback> PR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Rachel Brown</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="warning">
-              <AvatarImage
-                src="/images/avatar/avatar-6.png" alt="dashcode"
-              />
-              <AvatarFallback> SR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>Hannah Lewis</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="destructive">
-              <AvatarImage
-                src="/images/avatar/avatar-7.png" alt="dashcode"
-              />
-              <AvatarFallback> AR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Emma Walker</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default TooltipAvatar;`
-
-export const avatarGroup=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-
-const AvatarGroup = () => {
-  return (
-    <div className="-gap-2">
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-1.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-2.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-3.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-      <Avatar className="ring-1 ring-default-300 ring-offset-[2px]  ring-offset-background transition-all duration-300 hover:-translate-y-0.5">
-        <AvatarImage src="/images/avatar/avatar-4.png" alt="dashcode" />
-        <AvatarFallback> PR </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-};
-
-export default AvatarGroup;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/tonal-avatar.tsx b/app/[locale]/(protected)/components/avatar/tonal-avatar.tsx
deleted file mode 100644
index bc5de452..00000000
--- a/app/[locale]/(protected)/components/avatar/tonal-avatar.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-
-const TonalAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-    <Avatar variant="ghost" >
-      <AvatarFallback > PR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="primary">
-      <AvatarFallback> LI </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="secondary">
-      <AvatarFallback> SH </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="success">
-      <AvatarFallback> SU </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="info">
-      <AvatarFallback> PR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="warning">
-      <AvatarFallback> SR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="destructive">
-      <AvatarFallback> AR </AvatarFallback>
-    </Avatar>
-  </div>
-  );
-};
-
-export default TonalAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/avatar/tooltip-avatar.tsx b/app/[locale]/(protected)/components/avatar/tooltip-avatar.tsx
deleted file mode 100644
index 4b468e35..00000000
--- a/app/[locale]/(protected)/components/avatar/tooltip-avatar.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-const TooltipAvatar = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar>
-              <AvatarImage
-                src="/images/avatar/avatar-1.png" alt="dashcode"
-              />
-              <AvatarFallback> PR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Hasan Ali</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="primary">
-              <AvatarImage
-                src="/images/avatar/avatar-2.png" alt="dashcode"
-              />
-              <AvatarFallback> LI </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="info">
-            <p>Blue Cherry</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="secondary">
-              <AvatarImage
-                src="/images/avatar/avatar-3.png" alt="dashcode"
-              />
-              <AvatarFallback> SH </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>John Doe</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="success">
-              <AvatarImage
-                src="/images/avatar/avatar-4.png" alt="dashcode"
-              />
-              <AvatarFallback> SU </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Emily Davis</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="info">
-              <AvatarImage
-                src="/images/avatar/avatar-5.png" alt="dashcode"
-              />
-              <AvatarFallback> PR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Rachel Brown</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="warning">
-              <AvatarImage
-                src="/images/avatar/avatar-6.png" alt="dashcode"
-              />
-              <AvatarFallback> SR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>Hannah Lewis</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger>
-            <Avatar color="destructive">
-              <AvatarImage
-                src="/images/avatar/avatar-7.png" alt="dashcode"
-              />
-              <AvatarFallback> AR </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Emma Walker</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default TooltipAvatar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/badges-button.tsx b/app/[locale]/(protected)/components/badge/badges-button.tsx
deleted file mode 100644
index f4376910..00000000
--- a/app/[locale]/(protected)/components/badge/badges-button.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
-const BadgesButton = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Button>Notifications <Badge color="success" className="ms-1">5</Badge></Button>
-      <Button
-        color="success">Messages
-        <Badge color="warning" className="ms-1">5</Badge>
-      </Button>
-      <Button
-        color="destructive"
-        variant="outline"
-        className="hover:bg-transparent hover:text-destructive"
-      >Mails
-        <Badge color="destructive" className="ms-1">5</Badge>
-      </Button>
-    </div>
-  );
-};
-
-export default BadgesButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/badges-icon.tsx b/app/[locale]/(protected)/components/badge/badges-icon.tsx
deleted file mode 100644
index 92c81c75..00000000
--- a/app/[locale]/(protected)/components/badge/badges-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { BellRing, Heart, Mail } from "lucide-react";
-
-const BadgesIcon = () => {
-  return (
-    <div className="flex flex-wrap gap-10">
-      <div className="relative inline-block">
-        <BellRing className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1 py-0.5 text-xs bg-default -translate-y-3.5 translate-x-3.5">15</Badge>
-      </div>
-      <div className="relative inline-block">
-        <Mail className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-primary -translate-y-3.5 translate-x-3.5">5</Badge>
-      </div>
-      <div className="relative inline-block">
-        <Heart className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-warning -translate-y-3.5 translate-x-3.5">8</Badge>
-      </div>
-    </div>
-  );
-};
-
-export default BadgesIcon;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/badges-position.tsx b/app/[locale]/(protected)/components/badge/badges-position.tsx
deleted file mode 100644
index fa5d21cc..00000000
--- a/app/[locale]/(protected)/components/badge/badges-position.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
-const BadgePositions = () => {
-  return (
-    <div className="flex flex-wrap gap-8">
-      <Button className="relative">
-        Notifications
-        <Badge color="success" className="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2">5</Badge>
-      </Button>
-      <Button color="success" className="relative">
-        Messages
-        <Badge color="warning" className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2">5</Badge>
-      </Button>
-      <Button color="destructive" variant="outline" className="relative">
-        Audio Call
-        <Badge color="destructive" className="absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2">5</Badge>
-      </Button>
-      <Button color="success" variant="outline" className="relative">
-        Drafts
-        <Badge color="success" className="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2">5</Badge>
-      </Button>
-    </div>
-  );
-};
-
-export default BadgePositions;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/basic-badge.tsx b/app/[locale]/(protected)/components/badge/basic-badge.tsx
deleted file mode 100644
index f6621410..00000000
--- a/app/[locale]/(protected)/components/badge/basic-badge.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-
-const BasicBadge = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge>Default</Badge>
-      <Badge color="primary">Primary</Badge>
-      <Badge color="secondary">Secondary</Badge>
-      <Badge color="success">Success</Badge>
-      <Badge color="info">Info</Badge>
-      <Badge color="warning">Warning</Badge>
-      <Badge color="destructive">Destructive</Badge>
-    </div>
-  );
-};
-
-export default BasicBadge;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/gradient-badges.tsx b/app/[locale]/(protected)/components/badge/gradient-badges.tsx
deleted file mode 100644
index 617bf178..00000000
--- a/app/[locale]/(protected)/components/badge/gradient-badges.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-
-const GradientBadges = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge className="bg-gradient-to-r from-primary to-success border-none">Primary</Badge>
-      <Badge className="bg-gradient-to-r from-secondary to-secondary/80 border-none">Secondary</Badge>
-      <Badge className="bg-gradient-to-tr from-success to-info border-none">Success</Badge>
-      <Badge className="bg-gradient-to-tr from-info to-primary border-none">Info</Badge>
-      <Badge className="bg-gradient-to-r from-warning to-destructive border-none">Warning</Badge>
-      <Badge className="bg-gradient-to-r from-destructive to-warning border-none">Destructive</Badge>
-    </div>
-  );
-};
-
-export default GradientBadges;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/icon-badges.tsx b/app/[locale]/(protected)/components/badge/icon-badges.tsx
deleted file mode 100644
index d2d3c0ce..00000000
--- a/app/[locale]/(protected)/components/badge/icon-badges.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Star } from "lucide-react";
-
-const IconBadges = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Default</Badge>
-      <Badge color="primary"> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Primary</Badge>
-      <Badge color="secondary"> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Secondary</Badge>
-      <Badge color="success"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Success</Badge>
-      <Badge color="info"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Info</Badge>
-      <Badge color="warning"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Warning</Badge>
-      <Badge color="destructive"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Destructive</Badge>
-    </div>
-  );
-};
-
-export default IconBadges;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/layout.tsx b/app/[locale]/(protected)/components/badge/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/badge/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/badge/page.tsx b/app/[locale]/(protected)/components/badge/page.tsx
deleted file mode 100644
index 111cdfa4..00000000
--- a/app/[locale]/(protected)/components/badge/page.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-
-import Card from "@/components/code-snippet";
-import BasicBadge from "./basic-badge";
-import IconBadges from "./icon-badges";
-import BadgesButton from "./badges-button";
-import BadgePositions from "./badges-position";
-import GradientBadges from "./gradient-badges";
-import RoundedBadge from "./rounded-badge";
-import { badgesIcon, badgesInButton, badgesPosition, basicBadges, gradientBadges, iconBadges, roundedBadges } from "./source-code";
-import BadgesIcon from "./badges-icon";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const BadgePage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-        <Card title="Basic Badges" code={basicBadges}>
-          <BasicBadge />
-        </Card>
-        <Card title="Rounded Badges" code={roundedBadges}>
-          <RoundedBadge />
-        </Card>
-        <Card title="Badges Icon" code={iconBadges}>
-          <IconBadges />
-        </Card>
-        <Card title="Badges With Icon" code={badgesIcon}>
-          <BadgesIcon />
-        </Card>
-        <Card title="Badges In Buttons" code={badgesInButton}>
-          <BadgesButton />
-        </Card>
-        <Card title="Badge Positions" code={badgesPosition}>
-          <BadgePositions />
-        </Card>
-        <Card title="Gradient Badges" code={gradientBadges}>
-          <GradientBadges />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default BadgePage;
diff --git a/app/[locale]/(protected)/components/badge/rounded-badge.tsx b/app/[locale]/(protected)/components/badge/rounded-badge.tsx
deleted file mode 100644
index 7f0ccfef..00000000
--- a/app/[locale]/(protected)/components/badge/rounded-badge.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-
-const RoundedBadge = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge rounded="sm">Default</Badge>
-      <Badge color="primary" rounded="md" >Primary</Badge>
-      <Badge color="secondary" rounded="lg">Secondary</Badge>
-      <Badge color="success" rounded="full">Success</Badge>
-    </div>
-  );
-};
-
-export default RoundedBadge;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/badge/source-code.ts b/app/[locale]/(protected)/components/badge/source-code.ts
deleted file mode 100644
index c3797b32..00000000
--- a/app/[locale]/(protected)/components/badge/source-code.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-export const basicBadges=`import { Badge } from "@/components/ui/badge";
-const BasicBadge = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge>Default</Badge>
-      <Badge color="primary">Primary</Badge>
-      <Badge color="secondary">Secondary</Badge>
-      <Badge color="success">Success</Badge>
-      <Badge color="info">Info</Badge>
-      <Badge color="warning">Warning</Badge>
-      <Badge color="destructive">Destructive</Badge>
-    </div>
-  );
-};
-
-export default BasicBadge;`
-
-export const roundedBadges=`import { Badge } from "@/components/ui/badge";
-
-const RoundedBadge = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge rounded="sm">Default</Badge>
-      <Badge color="primary" rounded="md" >Primary</Badge>
-      <Badge color="secondary" rounded="lg">Secondary</Badge>
-      <Badge color="success" rounded="full">Success</Badge>
-    </div>
-  );
-};
-
-export default RoundedBadge;`
-
-export const iconBadges=`import { Badge } from "@/components/ui/badge";
-import { Star } from "lucide-react";
-
-const IconBadges = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Default</Badge>
-      <Badge color="primary"> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Primary</Badge>
-      <Badge color="secondary"> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Secondary</Badge>
-      <Badge color="success"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Success</Badge>
-      <Badge color="info"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Info</Badge>
-      <Badge color="warning"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Warning</Badge>
-      <Badge color="destructive"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Destructive</Badge>
-    </div>
-  );
-};
-
-export default IconBadges;`
-
-export const badgesInButton=`import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
-const BadgesButton = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Button>Notifications <Badge color="success" className="ms-1">5</Badge></Button>
-      <Button
-        color="success">Messages
-        <Badge color="warning" className="ms-1">5</Badge>
-      </Button>
-      <Button
-        color="destructive"
-        variant="outline"
-        className="hover:bg-transparent hover:text-destructive"
-      >Mails
-        <Badge color="destructive" className="ms-1">5</Badge>
-      </Button>
-    </div>
-  );
-};
-
-export default BadgesButton;`
-
-export const badgesPosition=`import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
-const BadgePositions = () => {
-  return (
-    <div className="flex flex-wrap gap-8">
-      <Button className="relative">
-        Notifications
-        <Badge color="success" className="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2">5</Badge>
-      </Button>
-      <Button color="success" className="relative">
-        Messages
-        <Badge color="warning" className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2">5</Badge>
-      </Button>
-      <Button color="destructive" variant="outline" className="relative">
-        Audio Call
-        <Badge color="destructive" className="absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2">5</Badge>
-      </Button>
-      <Button color="success" variant="outline" className="relative">
-        Drafts
-        <Badge color="success" className="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2">5</Badge>
-      </Button>
-    </div>
-  );
-};
-
-export default BadgePositions;`
-
-export const gradientBadges=`import { Badge } from "@/components/ui/badge";
-
-const GradientBadges = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <Badge className="bg-gradient-to-r from-primary to-success border-none">Primary</Badge>
-      <Badge className="bg-gradient-to-r from-secondary to-secondary/80 border-none">Secondary</Badge>
-      <Badge className="bg-gradient-to-tr from-success to-info border-none">Success</Badge>
-      <Badge className="bg-gradient-to-tr from-info to-primary border-none">Info</Badge>
-      <Badge className="bg-gradient-to-r from-warning to-destructive border-none">Warning</Badge>
-      <Badge className="bg-gradient-to-r from-destructive to-warning border-none">Destructive</Badge>
-    </div>
-  );
-};
-
-export default GradientBadges;`
-
-export const badgesIcon=`import { Badge } from "@/components/ui/badge";
-import { BellRing, Heart, Mail } from "lucide-react";
-
-const BadgesIcon = () => {
-  return (
-    <div className="flex flex-wrap gap-10">
-      <div className="relative inline-block">
-        <BellRing className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1 py-0.5 text-xs bg-default -translate-y-3.5 translate-x-3.5">15</Badge>
-      </div>
-      <div className="relative inline-block">
-        <Mail className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-primary -translate-y-3.5 translate-x-3.5">5</Badge>
-      </div>
-      <div className="relative inline-block">
-        <Heart className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-warning -translate-y-3.5 translate-x-3.5">8</Badge>
-      </div>
-    </div>
-  );
-};
-
-export default BadgesIcon;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/breadcrumb/basic-breadcrumb.tsx b/app/[locale]/(protected)/components/breadcrumb/basic-breadcrumb.tsx
deleted file mode 100644
index abe43295..00000000
--- a/app/[locale]/(protected)/components/breadcrumb/basic-breadcrumb.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-
-const BasicBreadcrumb = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};
-
-export default BasicBreadcrumb;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/breadcrumb/breadcrumb-collapsed.tsx b/app/[locale]/(protected)/components/breadcrumb/breadcrumb-collapsed.tsx
deleted file mode 100644
index c602fe73..00000000
--- a/app/[locale]/(protected)/components/breadcrumb/breadcrumb-collapsed.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Link from "next/link"
-
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-
-const BreadcrumbCollapsed = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/">Home</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbEllipsis />
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/docs/components">Components</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}
-export default BreadcrumbCollapsed;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/breadcrumb/breadcrumb-dropdown.tsx b/app/[locale]/(protected)/components/breadcrumb/breadcrumb-dropdown.tsx
deleted file mode 100644
index 8fc05611..00000000
--- a/app/[locale]/(protected)/components/breadcrumb/breadcrumb-dropdown.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { ChevronDown, Slash } from "lucide-react";
-const BreadcrumbDropdown = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              Components
-              <ChevronDown />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbItem>
-          <BreadcrumbPage>About</BreadcrumbPage>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};
-
-export default BreadcrumbDropdown;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/breadcrumb/custom-separator.tsx b/app/[locale]/(protected)/components/breadcrumb/custom-separator.tsx
deleted file mode 100644
index d252f686..00000000
--- a/app/[locale]/(protected)/components/breadcrumb/custom-separator.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import { Slash } from "lucide-react";
-
-const CustomSeparator = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};
-
-export default CustomSeparator;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/breadcrumb/layout.tsx b/app/[locale]/(protected)/components/breadcrumb/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/breadcrumb/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/breadcrumb/page.tsx b/app/[locale]/(protected)/components/breadcrumb/page.tsx
deleted file mode 100644
index 0d33c276..00000000
--- a/app/[locale]/(protected)/components/breadcrumb/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicBreadcrumb from "./basic-breadcrumb";
-import CustomSeparator from "./custom-separator";
-import BreadcrumbDropdown from "./breadcrumb-dropdown";
-import BreadcrumbCollapsed from "./breadcrumb-collapsed";
-import { basicBreadcrumb, breadcrumbCollapsed, breadcrumbDropdown, customSeparator } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const BreadcrumbPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic Breadcrumb" code={basicBreadcrumb}>
-          <BasicBreadcrumb />
-        </Card>
-        <Card title="Custom Separator" code={customSeparator}>
-          <CustomSeparator />
-        </Card>
-        <Card title="Breadcrumb Dropdown" code={breadcrumbDropdown}>
-          <BreadcrumbDropdown />
-        </Card>
-        <Card title="Breadcrumb Collapsed" code={breadcrumbCollapsed}>
-          <BreadcrumbCollapsed />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default BreadcrumbPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/breadcrumb/source-code.ts b/app/[locale]/(protected)/components/breadcrumb/source-code.ts
deleted file mode 100644
index e32138ae..00000000
--- a/app/[locale]/(protected)/components/breadcrumb/source-code.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-export const basicBreadcrumb =`import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-
-const BasicBreadcrumb = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};
-
-export default BasicBreadcrumb;`
-
-export const customSeparator=`
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import { Slash } from "lucide-react";
-
-const CustomSeparator = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};
-
-export default CustomSeparator;`
-
-export const breadcrumbDropdown=`
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { ChevronDown, Slash } from "lucide-react";
-const BreadcrumbDropdown = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              Components
-              <ChevronDown />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbItem>
-          <BreadcrumbPage>About</BreadcrumbPage>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash className="-rotate-[20deg]" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};
-
-export default BreadcrumbDropdown;`
-
-export const breadcrumbCollapsed=`
-import Link from "next/link"
-
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-
-const BreadcrumbCollapsed = () => {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/">Home</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbEllipsis />
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/docs/components">Components</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}
-export default BreadcrumbCollapsed;
-`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/basic-button.tsx b/app/[locale]/(protected)/components/button/basic-button.tsx
deleted file mode 100644
index c57c1493..00000000
--- a/app/[locale]/(protected)/components/button/basic-button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Button } from "@/components/ui/button";
-const BasicButton = () => {
-    return (
-        <div className="flex flex-wrap gap-3">
-            <Button>Default</Button>
-            <Button color="primary">Primary</Button>
-            <Button color="secondary">Secondary</Button>
-            <Button color="success">Success</Button>
-            <Button color="info">Info</Button>
-            <Button color="warning">Warning</Button>
-            <Button color="destructive">Destructive</Button>
-        </div>
-    );
-};
-
-export default BasicButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/block-button.tsx b/app/[locale]/(protected)/components/button/block-button.tsx
deleted file mode 100644
index 12aa929a..00000000
--- a/app/[locale]/(protected)/components/button/block-button.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Newspaper } from "lucide-react";
-const BlockButton = () => {
-  return (
-    <div className="space-y-3">
-      <Button fullWidth>Primary</Button>
-      <Button color="secondary" fullWidth>
-        <Newspaper className="w-4 h-4 me-2" /> Left Icon
-      </Button>
-      <Button color="success" fullWidth> Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-    </div>
-  );
-};
-
-export default BlockButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/disabled-button.tsx b/app/[locale]/(protected)/components/button/disabled-button.tsx
deleted file mode 100644
index 043eced4..00000000
--- a/app/[locale]/(protected)/components/button/disabled-button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Button } from "@/components/ui/button";
-const DisabledButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button disabled>Default</Button>
-      <Button color="primary" disabled>Primary</Button>
-      <Button color="secondary" disabled>Secondary</Button>
-      <Button color="success" disabled>Success</Button>
-      <Button color="info" disabled>Info</Button>
-      <Button color="warning" disabled>Warning</Button>
-      <Button color="destructive" disabled>Destructive</Button>
-    </div>
-  );
-};
-
-export default DisabledButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/ghost-button.tsx b/app/[locale]/(protected)/components/button/ghost-button.tsx
deleted file mode 100644
index e1fce8d9..00000000
--- a/app/[locale]/(protected)/components/button/ghost-button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Button } from "@/components/ui/button";
-const GhostButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button variant="ghost">Default</Button>
-      <Button color="primary" variant="ghost">Primary</Button>
-      <Button color="secondary" variant="ghost">Secondary</Button>
-      <Button color="success" variant="ghost">Success</Button>
-      <Button color="info" variant="ghost">Info</Button>
-      <Button color="warning" variant="ghost">Warning</Button>
-      <Button color="destructive" variant="ghost">Destructive</Button>
-    </div>
-  );
-};
-
-export default GhostButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/icon-buttons.tsx b/app/[locale]/(protected)/components/button/icon-buttons.tsx
deleted file mode 100644
index f4ab0be9..00000000
--- a/app/[locale]/(protected)/components/button/icon-buttons.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Newspaper } from "lucide-react";
-
-const IconButtons = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button>
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="primary">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button color="secondary">
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="success" variant="outline">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button variant="outline" color="primary" size="icon">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon" color="primary" variant="soft">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-    </div>
-  );
-};
-
-export default IconButtons;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/icon-rounded.tsx b/app/[locale]/(protected)/components/button/icon-rounded.tsx
deleted file mode 100644
index 2dcb701a..00000000
--- a/app/[locale]/(protected)/components/button/icon-rounded.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Newspaper } from "lucide-react";
-
-const IconRounded = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button rounded="full">
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="primary"  rounded="full">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button color="secondary"  rounded="full">
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="success" variant="outline"  rounded="full">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button variant="outline" color="primary" size="icon"  rounded="full">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon"  rounded="full">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon" color="primary" variant="soft"  rounded="full">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-    </div>
-  );
-};
-
-export default IconRounded;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/layout.tsx b/app/[locale]/(protected)/components/button/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/button/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/button/link-button.tsx b/app/[locale]/(protected)/components/button/link-button.tsx
deleted file mode 100644
index 61d6f2fc..00000000
--- a/app/[locale]/(protected)/components/button/link-button.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/routing';
-const LinkButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button asChild>
-        <Link href="#">Default</Link>
-      </Button>
-      <Button color="primary" asChild>
-        <Link href="#">Primary</Link>
-      </Button>
-      <Button color="secondary" asChild>
-        <Link href="#">Secondary</Link>
-      </Button>
-      <Button color="success" asChild>
-        <Link href="#">Success</Link>
-      </Button>
-      <Button color="info" asChild>
-        <Link href="#">Info</Link>
-      </Button>
-      <Button color="warning" asChild>
-        <Link href="#">Warning</Link>
-      </Button>
-      <Button color="destructive" asChild>
-        <Link href="#">Destructive</Link>
-      </Button>
-    </div>
-  );
-};
-
-export default LinkButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/loading-button.tsx b/app/[locale]/(protected)/components/button/loading-button.tsx
deleted file mode 100644
index bee72f73..00000000
--- a/app/[locale]/(protected)/components/button/loading-button.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Loader2 } from "lucide-react";
-const LoadingButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button disabled>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Default
-      </Button>
-      <Button color="primary" disabled>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Primary
-      </Button>
-      <Button color="secondary" disabled>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Secondary
-      </Button>
-      <Button color="success" disabled>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Success
-      </Button>
-      <Button color="info" disabled>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Info
-      </Button>
-      <Button color="warning" disabled>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Warning
-      </Button>
-      <Button color="destructive" disabled>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Destructive
-      </Button>
-    </div>
-  );
-};
-
-export default LoadingButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/outline-button.tsx b/app/[locale]/(protected)/components/button/outline-button.tsx
deleted file mode 100644
index f7696527..00000000
--- a/app/[locale]/(protected)/components/button/outline-button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Button } from '@/components/ui/button';
-const OutlineButton = () => {
-  return (
-    <div className='flex flex-wrap gap-3'>
-      <Button variant="outline">Default</Button>
-      <Button color="primary" variant="outline" >Primary</Button>
-      <Button color="secondary" variant="outline">Secondary</Button>
-      <Button color="success" variant="outline">Success</Button>
-      <Button color="info" variant="outline">Info</Button>
-      <Button color="warning" variant="outline">Warning</Button>
-      <Button color="destructive" variant="outline">Destructive</Button>
-    </div>
-  );
-};
-
-export default OutlineButton;  
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/page.tsx b/app/[locale]/(protected)/components/button/page.tsx
deleted file mode 100644
index 06ec52c0..00000000
--- a/app/[locale]/(protected)/components/button/page.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-
-import Card from "@/components/code-snippet";
-import BasicButton from "./basic-button";
-import OutlineButton from "./outline-button";
-import SoftButton from "./soft-button";
-import ShadowButton from "./shadow-button";
-import RoundedButton from "./rounded-button";
-import RoundedOutline from "./rounded-outline";
-import IconButtons from "./icon-buttons";
-import IconRounded from "./icon-rounded";
-import SizesButton from "./sizes-button";
-import DisabledButton from "./disabled-button";
-import LoadingButton from "./loading-button";
-import BlockButton from "./block-button";
-import LinkButton from "./link-button";
-import GhostButton from "./ghost-button";
-import { basicButton, blockButton, disabledButton, ghostButton, iconButtons, iconRounded, linkButton, loadingButton, outlineButton, roundedButton, roundedOutline, shadowButton, sizesButton, softButton } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-
-const ButtonPage = () => {
-    return (
-        <>
-            <SiteBreadcrumb />
-            <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-                <Card title="Basic" code={basicButton}>
-                    <BasicButton />
-                </Card>
-                <Card title="Outline" code={outlineButton}>
-                    <OutlineButton />
-                </Card>
-                <Card title="Soft Color" code={softButton}>
-                    <SoftButton />
-                </Card>
-                <Card title="Shadow Button" code={shadowButton}>
-                    <ShadowButton />
-                </Card>
-                <Card title="Rounded" code={roundedButton}>
-                    <RoundedButton />
-                </Card>
-                <Card title="Rounded Outline" code={roundedOutline}>
-                    <RoundedOutline />
-                </Card>
-                <Card title="Icon Buttons" code={iconButtons}>
-                    <IconButtons />
-                </Card>
-                <Card title="Icon Rounded" code={iconRounded}>
-                    <IconRounded />
-                </Card>
-                <Card title="Size" code={sizesButton}>
-                    <SizesButton />
-                </Card>
-                <Card title="Disabled Button" code={disabledButton}>
-                    <DisabledButton />
-                </Card>
-                <Card title="Loading Button" code={loadingButton}>
-                    <LoadingButton />
-                </Card>
-                <Card title="Block" code={blockButton}>
-                    <BlockButton />
-                </Card>
-                <Card title="Link Button" code={linkButton}>
-                    <LinkButton />
-                </Card>
-                <Card title="Ghost Button" code={ghostButton}>
-                    <GhostButton />
-                </Card>
-            </div>
-        </>
-    );
-};
-
-export default ButtonPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/rounded-button.tsx b/app/[locale]/(protected)/components/button/rounded-button.tsx
deleted file mode 100644
index b799e440..00000000
--- a/app/[locale]/(protected)/components/button/rounded-button.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-const RoundedButton = () => {
-  return (
-    <div className='flex flex-wrap gap-3'>
-      <Button rounded="sm">Default</Button>
-      <Button color="primary" rounded="md" >Primary</Button>
-      <Button color="secondary" rounded="lg" >Scondary</Button>
-      <Button color="warning" rounded="full" >Warning</Button>
-    </div>
-  );
-};
-
-export default RoundedButton;  
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/rounded-outline.tsx b/app/[locale]/(protected)/components/button/rounded-outline.tsx
deleted file mode 100644
index 2ff3af64..00000000
--- a/app/[locale]/(protected)/components/button/rounded-outline.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-const RoundedOutline = () => {
-  return (
-    <div className='flex flex-wrap gap-3'>
-      <Button variant="outline" rounded="full">Default</Button>
-      <Button color="primary" variant="outline" rounded="full">Primary</Button>
-      <Button color="secondary" variant="outline" rounded="full">Secondary</Button>
-      <Button color="success" variant="outline" rounded="full">Success</Button>
-      <Button color="info" variant="outline" rounded="full">Info</Button>
-      <Button color="warning" variant="outline" rounded="full">Warning</Button>
-      <Button color="destructive" variant="outline" rounded="full">Destructive</Button>
-    </div>
-  );
-};
-
-export default RoundedOutline;  
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/shadow-button.tsx b/app/[locale]/(protected)/components/button/shadow-button.tsx
deleted file mode 100644
index 5810e6f2..00000000
--- a/app/[locale]/(protected)/components/button/shadow-button.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Button } from "@/components/ui/button";
-const ShadowButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button shadow="sm">Primary</Button>
-      <Button color="secondary" shadow="md">Secondary</Button>
-      <Button color="success" shadow="lg">Success</Button>
-      <Button color="info" shadow="xl">Info</Button>
-    </div>
-  );
-};
-
-export default ShadowButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/sizes-button.tsx b/app/[locale]/(protected)/components/button/sizes-button.tsx
deleted file mode 100644
index 3f2f7360..00000000
--- a/app/[locale]/(protected)/components/button/sizes-button.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Button } from "@/components/ui/button";
-const SizesButton = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button size="lg">Large</Button>
-      <Button>Default</Button>
-      <Button size="md">medium</Button>
-      <Button size="sm">Small</Button>
-    </div>
-  );
-};
-
-export default SizesButton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/button/soft-button.tsx b/app/[locale]/(protected)/components/button/soft-button.tsx
deleted file mode 100644
index e783f9cb..00000000
--- a/app/[locale]/(protected)/components/button/soft-button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Button } from "@/components/ui/button";
-const SoftButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button variant="soft">Primary</Button>
-      <Button color="primary" variant="soft" >Primary</Button>
-      <Button color="secondary" variant="soft">Secondary</Button>
-      <Button color="success" variant="soft">Success</Button>
-      <Button color="info" variant="soft">Info</Button>
-      <Button color="warning" variant="soft">Warning</Button>
-      <Button color="destructive" variant="soft">Destructive</Button>
-    </div>
-  )
-};
-
-export default SoftButton;
diff --git a/app/[locale]/(protected)/components/button/source-code.ts b/app/[locale]/(protected)/components/button/source-code.ts
deleted file mode 100644
index d61b4df3..00000000
--- a/app/[locale]/(protected)/components/button/source-code.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-export const basicButton=`import { Button } from "@/components/ui/button";
-const BasicButton = () => {
-    return (
-        <div className="flex flex-wrap gap-3">
-            <Button>Default</Button>
-            <Button color="primary">Primary</Button>
-            <Button color="secondary">Secondary</Button>
-            <Button color="success">Success</Button>
-            <Button color="info">Info</Button>
-            <Button color="warning">Warning</Button>
-            <Button color="destructive">Destructive</Button>
-        </div>
-    );
-};
-
-export default BasicButton;`
-
-export const outlineButton=`import { Button } from '@/components/ui/button';
-const OutlineButton = () => {
-  return (
-    <div className='flex flex-wrap gap-3'>
-      <Button variant="outline">Default</Button>
-      <Button color="primary" variant="outline" >Primary</Button>
-      <Button color="secondary" variant="outline">Secondary</Button>
-      <Button color="success" variant="outline">Success</Button>
-      <Button color="info" variant="outline">Info</Button>
-      <Button color="warning" variant="outline">Warning</Button>
-      <Button color="destructive" variant="outline">Destructive</Button>
-    </div>
-  );
-};
-
-export default OutlineButton;`
-
-export const softButton=`import { Button } from "@/components/ui/button";
-const SoftButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button variant="soft">Primary</Button>
-      <Button color="primary" variant="soft" >Primary</Button>
-      <Button color="secondary" variant="soft">Secondary</Button>
-      <Button color="success" variant="soft">Success</Button>
-      <Button color="info" variant="soft">Info</Button>
-      <Button color="warning" variant="soft">Warning</Button>
-      <Button color="destructive" variant="soft">Destructive</Button>
-    </div>
-  )
-};
-
-export default SoftButton;
-`
-export const shadowButton=`import { Button } from "@/components/ui/button";
-const ShadowButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button shadow="sm">Primary</Button>
-      <Button color="secondary" shadow="md">Secondary</Button>
-      <Button color="success" shadow="lg">Success</Button>
-      <Button color="info" shadow="xl">Info</Button>
-    </div>
-  );
-};
-
-export default ShadowButton;`
-export const roundedButton=`import { Button } from '@/components/ui/button';
-
-const RoundedButton = () => {
-  return (
-    <div className='flex flex-wrap gap-3'>
-      <Button rounded="sm">DEfault</Button>
-      <Button color="primary" rounded="md" >Primary</Button>
-      <Button color="secondary" rounded="lg" >Scondary</Button>
-      <Button color="warning" rounded="full" >Warning</Button>
-    </div>
-  );
-};
-
-export default RoundedButton;  `
-
-export const roundedOutline=`import { Button } from '@/components/ui/button';
-
-const RoundedOutline = () => {
-  return (
-    <div className='flex flex-wrap gap-3'>
-      <Button variant="outline" rounded="full">Default</Button>
-      <Button color="primary" variant="outline" rounded="full">Primary</Button>
-      <Button color="secondary" variant="outline" rounded="full">Secondary</Button>
-      <Button color="success" variant="outline" rounded="full">Success</Button>
-      <Button color="info" variant="outline" rounded="full">Info</Button>
-      <Button color="warning" variant="outline" rounded="full">Warning</Button>
-      <Button color="destructive" variant="outline" rounded="full">Destructive</Button>
-    </div>
-  );
-};
-
-export default RoundedOutline;  `
-
-export const iconButtons=`import { Button } from "@/components/ui/button";
-import { Newspaper } from "lucide-react";
-
-const IconButtons = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button>
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="primary">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button color="secondary">
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="success" variant="outline">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button variant="outline" color="primary" size="icon">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon" color="primary" variant="soft">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-    </div>
-  );
-};
-
-export default IconButtons;`
-
-export const iconRounded=`import { Button } from "@/components/ui/button";
-import { Newspaper } from "lucide-react";
-
-const IconRounded = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button rounded="full">
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="primary"  rounded="full">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button color="secondary"  rounded="full">
-        <Newspaper className="w-4 h-4 me-2" />
-        Left Icon
-      </Button>
-      <Button color="success" variant="outline"  rounded="full">
-        Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-      <Button variant="outline" color="primary" size="icon"  rounded="full">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon"  rounded="full">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-      <Button  size="icon" color="primary" variant="soft"  rounded="full">
-        <Newspaper className="w-5 h-5" />
-      </Button>
-    </div>
-  );
-};
-
-export default IconRounded;`
-
-export const sizesButton=`import { Button } from "@/components/ui/button";
-const SizesButton = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button size="lg">Large</Button>
-      <Button>Default</Button>
-      <Button size="md">Midium</Button>
-      <Button size="sm">Small</Button>
-    </div>
-  );
-};
-
-export default SizesButton;`
-
-export const disabledButton=`import { Button } from "@/components/ui/button";
-const DisabledButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button disabled>Default</Button>
-      <Button color="primary" disabled>Primary</Button>
-      <Button color="secondary" disabled>Secondary</Button>
-      <Button color="success" disabled>Success</Button>
-      <Button color="info" disabled>Info</Button>
-      <Button color="warning" disabled>Warning</Button>
-      <Button color="destructive" disabled>Destructive</Button>
-    </div>
-  );
-};
-
-export default DisabledButton;`
-
-export const loadingButton=`import { Button } from "@/components/ui/button";
-import { Loader2 } from "lucide-react";
-const LoadingButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button>
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Default
-      </Button>
-      <Button color="primary">
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Primary
-      </Button>
-      <Button color="secondary">
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Secondary
-      </Button>
-      <Button color="success">
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Success
-      </Button>
-      <Button color="info">
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Info
-      </Button>
-      <Button color="warning">
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Warning
-      </Button>
-      <Button color="destructive">
-        <Loader2 className="me-2 h-4 w-4 animate-spin" />
-        Destructive
-      </Button>
-    </div>
-  );
-};
-
-export default LoadingButton;`
-
-export const blockButton=`import { Button } from "@/components/ui/button";
-import { Newspaper } from "lucide-react";
-const BlockButton = () => {
-  return (
-    <div className="space-y-3">
-      <Button size="block">Primary</Button>
-      <Button color="secondary"  size="block">
-        <Newspaper className="w-4 h-4 me-2" /> Left Icon
-      </Button>
-      <Button color="success"  size="block"> Right Icon
-        <Newspaper className="w-4 h-4 ms-2" />
-      </Button>
-    </div>
-  );
-};
-
-export default BlockButton;`
-
-export const linkButton=`import { Button } from "@/components/ui/button";
-import {Link} from '@/i18n/routing';
-const LinkButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button asChild>
-        <Link href="#">Default</Link>
-      </Button>
-      <Button color="primary" asChild>
-        <Link href="#">Primary</Link>
-      </Button>
-      <Button color="secondary" asChild>
-        <Link href="#">Secondary</Link>
-      </Button>
-      <Button color="success" asChild>
-        <Link href="#">Success</Link>
-      </Button>
-      <Button color="info" asChild>
-        <Link href="#">Info</Link>
-      </Button>
-      <Button color="warning" asChild>
-        <Link href="#">Warning</Link>
-      </Button>
-      <Button color="destructive" asChild>
-        <Link href="#">Destructive</Link>
-      </Button>
-    </div>
-  );
-};
-
-export default LinkButton;`
-
-export const ghostButton=`import { Button } from "@/components/ui/button";
-const GhostButton = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button variant="ghost">Default</Button>
-      <Button color="primary" variant="ghost">Primary</Button>
-      <Button color="secondary" variant="ghost">Secondary</Button>
-      <Button color="success" variant="ghost">Success</Button>
-      <Button color="info" variant="ghost">Info</Button>
-      <Button color="warning" variant="ghost">Warning</Button>
-      <Button color="destructive" variant="ghost">Destructive</Button>
-    </div>
-  );
-};
-
-export default GhostButton;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/calendar/basic-calendar.tsx b/app/[locale]/(protected)/components/calendar/basic-calendar.tsx
deleted file mode 100644
index 99826df4..00000000
--- a/app/[locale]/(protected)/components/calendar/basic-calendar.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Calendar } from "@/components/ui/calendar"
-
-const BasicCalendar = () => {
-  const [date, setDate] = useState<Date | undefined>(new Date())
-
-  return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      className="rounded-md border"
-    />
-  )
-}
-
-export default BasicCalendar;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/calendar/layout.tsx b/app/[locale]/(protected)/components/calendar/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/calendar/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/calendar/page.tsx b/app/[locale]/(protected)/components/calendar/page.tsx
deleted file mode 100644
index 7c529986..00000000
--- a/app/[locale]/(protected)/components/calendar/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicCalendar from "./basic-calendar";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { basicCalendar } from "./soure-code";
-
-const CalendarPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Calendar" code={basicCalendar}>
-        <div className="max-w-4xl p-2 mx-auto">
-          <BasicCalendar />
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default CalendarPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/calendar/soure-code.ts b/app/[locale]/(protected)/components/calendar/soure-code.ts
deleted file mode 100644
index b3b0df9a..00000000
--- a/app/[locale]/(protected)/components/calendar/soure-code.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const basicCalendar =`"use client"
-
-import { useState } from "react"
-import { Calendar } from "@/components/ui/calendar"
-
-const BasicCalendar = () => {
-  const [date, setDate] = useState<Date | undefined>(new Date())
-
-  return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      className="rounded-md border"
-    />
-  )
-}
-
-export default BasicCalendar;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/card/basic-card.tsx b/app/[locale]/(protected)/components/card/basic-card.tsx
deleted file mode 100644
index eb8b314d..00000000
--- a/app/[locale]/(protected)/components/card/basic-card.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-
-const BasicCard = () => {
-  return (
-    <div className="grid md:grid-cols-3 grid-cols-1 gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Card Title</CardTitle>
-          <CardDescription>Card Subtitle</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Image
-            alt=""
-            src="/images/all-img/card-1.png"
-            width={700}
-            height={700}
-            className="w-full h-[140px] object-cover mb-6 rounded-md"
-          />
-          <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
-          </p>
-        </CardContent>
-        <CardFooter className="gap-6">
-          <Link href="#" className="text-sm text-default underline">
-            Learn More
-          </Link>
-          <Link href="#" className="text-sm text-default underline">
-            Another Link
-          </Link>
-        </CardFooter>
-      </Card>
-      <Card>
-        <Image
-          alt=""
-          src="/images/all-img/card-2.png"
-          width={700}
-          height={700}
-          className="w-full h-[140px] object-cover mb-6 rounded-t-md"
-        />
-        <CardHeader className="p-6 pt-0">
-          <CardTitle>Card Title</CardTitle>
-          <CardDescription>Card Subtitle</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
-          </p>
-        </CardContent>
-        <CardFooter className="gap-6 mt-6">
-          <Link href="#" className="text-sm text-default underline">
-            Learn More
-          </Link>
-          <Link href="#" className="text-sm text-default underline">
-            Another Link
-          </Link>
-        </CardFooter>
-      </Card>
-      <Card className="relative z-[1] rounded-lg overflow-hidden">
-        <Image
-          alt=""
-          src="/images/all-img/card-3.png"
-          width={700}
-          height={700}
-          className="w-full h-full object-cover absolute top-0 left-0 z-[-1]"
-        />
-        <div className="pt-6 h-max">
-          <CardHeader className="p-6 pt-0">
-            <CardTitle className="text-default-foreground dark:text-default">
-              Card Title
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="mt-16">
-            <CardDescription className="text-base text-default-foreground dark:text-default mb-3">
-              Card Title
-            </CardDescription>
-            <p className="text-sm text-default-foreground dark:text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="mt-14">
-            <Button asChild size="lg">
-              <Link href="#">Another Link</Link>
-            </Button>
-          </CardFooter>
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default BasicCard;
diff --git a/app/[locale]/(protected)/components/card/layout.tsx b/app/[locale]/(protected)/components/card/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/card/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/card/marketing-image-card.tsx b/app/[locale]/(protected)/components/card/marketing-image-card.tsx
deleted file mode 100644
index fb52ed20..00000000
--- a/app/[locale]/(protected)/components/card/marketing-image-card.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-
-const MarketingImageCard = () => {
-  return (
-    <div className="grid md:grid-cols-4 grid-cols-1 gap-4">
-      <Card>
-        <Image
-          alt=""
-          src="/images/all-img/card-4.png"
-          width={700}
-          height={400}
-          className="w-full h-[250px] object-cover rounded-t-md"
-        />
-        <CardHeader>
-          <CardTitle>Sales Automation</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
-          </p>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle>Personalization</CardTitle>
-        </CardHeader>
-        <CardContent className="text-center ">
-          <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
-          </p>
-        </CardContent>
-        <CardContent className="pb-0">
-          <Image
-            alt=""
-            src="/images/all-img/card-5.png"
-            width={700}
-            height={400}
-            className="w-full h-[250px] object-cover rounded-b-md"
-          />
-        </CardContent>
-      </Card>
-      <Card>
-        <Image
-          alt=""
-          src="/images/all-img/card-6.png"
-          width={700}
-          height={400}
-          className="w-full h-[250px] object-cover rounded-t-md"
-        />
-        <CardHeader className="text-center">
-          <CardTitle>Marketing Automation</CardTitle>
-        </CardHeader>
-        <CardContent className="text-center pb-0">
-          <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
-          </p>
-        </CardContent>
-      </Card>
-      <Card className="bg-[#E5F9FF] dark:bg-default-foreground pb-0">
-        <CardHeader className="text-center">
-          <CardTitle>Marketing Automation</CardTitle>
-        </CardHeader>
-        <CardContent className="text-center ">
-          <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
-          </p>
-        </CardContent>
-        <Image
-          alt=""
-          src="/images/all-img/card-7.png"
-          width={700}
-          height={400}
-          className="w-full h-[250px] object-cover rounded-b-md"
-        />
-      </Card>
-    </div>
-
-
-  );
-};
-
-export default MarketingImageCard;
diff --git a/app/[locale]/(protected)/components/card/page.tsx b/app/[locale]/(protected)/components/card/page.tsx
deleted file mode 100644
index c16323f0..00000000
--- a/app/[locale]/(protected)/components/card/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import BasicCard from "./basic-card";
-import MarketingImageCard from "./marketing-image-card";
-import SalesAutomationCard from "./sales-automation-card";
-
-const Card = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <BasicCard />
-        <MarketingImageCard />
-        <SalesAutomationCard />
-      </div>
-    </div>
-  );
-};
-
-export default Card;
diff --git a/app/[locale]/(protected)/components/card/sales-automation-card.tsx b/app/[locale]/(protected)/components/card/sales-automation-card.tsx
deleted file mode 100644
index eeb5eda3..00000000
--- a/app/[locale]/(protected)/components/card/sales-automation-card.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Link } from '@/i18n/routing';
-
-const SalesAutomationCard = () => {
-  return (
-    <div className="space-y-6">
-      <div className="grid md:grid-cols-4 gap-4">
-        <Card>
-          <CardHeader>
-            <CardTitle>Sales Automation</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="gap-6">
-            <Link href="#" className="text-sm text-default underline">
-              Learn More
-            </Link>
-          </CardFooter>
-        </Card>
-        <Card className="bg-default dark:bg-default-foreground">
-          <CardHeader>
-            <CardTitle className="text-default-50 dark:text-default">
-              Sales Automation
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-default-50 dark:text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="gap-6">
-            <Link
-              href="#"
-              className="text-sm text text-default-50 dark:text-default underline"
-            >
-              Learn More
-            </Link>
-          </CardFooter>
-        </Card>
-        <Card className="bg-[#EDFFE5] dark:bg-default-foreground">
-          <CardHeader>
-            <CardTitle className="text-default">Sales Automation</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="gap-6">
-            <Link href="#" className="text-sm text-default underline">
-              Learn More
-            </Link>
-          </CardFooter>
-        </Card>
-        <Card className="bg-[#E5F9FF] dark:bg-default-foreground">
-          <CardHeader>
-            <CardTitle className="text-default">Sales Automation</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="gap-6">
-            <Link href="#" className="text-sm text-default underline">
-              Learn More
-            </Link>
-          </CardFooter>
-        </Card>
-      </div>
-      <div className="grid md:grid-cols-3 gap-4">
-        <Card>
-          <CardHeader>
-            <CardTitle>Sales Automation</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="gap-6">
-            <Button asChild>
-              <Link href="#"> Another Link</Link>
-            </Button>
-          </CardFooter>
-        </Card>
-        <Card>
-          <CardHeader className="text-center">
-            <CardTitle>Sales Automation</CardTitle>
-          </CardHeader>
-          <CardContent className="text-center">
-            <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="gap-6 justify-center">
-            <Button asChild>
-              <Link href="#"> Another Link</Link>
-            </Button>
-          </CardFooter>
-        </Card>
-        <Card>
-          <CardHeader className="text-center">
-            <CardTitle>Sales Automation</CardTitle>
-          </CardHeader>
-          <CardContent className="text-center">
-            <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
-            </p>
-          </CardContent>
-          <CardFooter className="gap-6 justify-center w-full">
-            <Button asChild fullWidth>
-              <Link href="#"> Another Link</Link>
-            </Button>
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default SalesAutomationCard;
diff --git a/app/[locale]/(protected)/components/carousel/autoplay-carousel.tsx b/app/[locale]/(protected)/components/carousel/autoplay-carousel.tsx
deleted file mode 100644
index 13f891d7..00000000
--- a/app/[locale]/(protected)/components/carousel/autoplay-carousel.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-import { Card, CardContent } from "@/components/ui/card"
-import Autoplay from "embla-carousel-autoplay"
-
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-import { useRef } from "react";
-
-const AutoplayCarousel = () => {
-  const plugin = useRef(
-    Autoplay({ delay: 2000, stopOnInteraction: true })
-  )
-
-  return (
-      <Carousel
-        className="w-full max-w-sm mx-auto"
-        plugins={[plugin.current]}
-        onMouseEnter={plugin.current.stop}
-        onMouseLeave={plugin.current.reset}
-      >
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card  className="dark:border-default-300">
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-  );
-};
-
-export default AutoplayCarousel;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/carousel/basic-carousel.tsx b/app/[locale]/(protected)/components/carousel/basic-carousel.tsx
deleted file mode 100644
index 27a99811..00000000
--- a/app/[locale]/(protected)/components/carousel/basic-carousel.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const BasicCarousel = () => {
-  return (
-    <Carousel className="w-full max-w-xs mx-auto">
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index}>
-            <div className="p-1">
-              <Card className="dark:border-default-300">
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-        
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  );
-};
-
-export default BasicCarousel;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/carousel/custom-carousel.tsx b/app/[locale]/(protected)/components/carousel/custom-carousel.tsx
deleted file mode 100644
index 42a52c17..00000000
--- a/app/[locale]/(protected)/components/carousel/custom-carousel.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client"
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselApi,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-import { useEffect, useState } from "react"
-
-const CustomCarousel = () => {
-  const [api, setApi] = useState<CarouselApi | undefined>(undefined)
-  const [current, setCurrent] = useState<number>(0)
-  const [count, setCount] = useState<number>(0)
-
-  useEffect(() => {
-    if (!api) {
-      return
-    }
-
-    setCount(api.scrollSnapList().length)
-    setCurrent(api.selectedScrollSnap() + 1)
-
-    api.on("select", () => {
-      setCurrent(api.selectedScrollSnap() + 1)
-    })
-  }, [api])
-
-  return (
-    <div className="flex flex-col items-center gap-3">
-      <Carousel setApi={setApi} className="w-full max-w-xs">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-               <div className="p-1">
-              <Card  className="dark:border-default-300">
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-      <div className="py-2 text-center font-medium text-sm text-muted-foreground">
-        Slide <strong>{current}</strong> of <strong>{count}</strong>
-      </div>
-    </div>
-  )
-}
-
-export default CustomCarousel
diff --git a/app/[locale]/(protected)/components/carousel/layout.tsx b/app/[locale]/(protected)/components/carousel/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/carousel/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/carousel/page.tsx b/app/[locale]/(protected)/components/carousel/page.tsx
deleted file mode 100644
index a9c8e393..00000000
--- a/app/[locale]/(protected)/components/carousel/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicCarousel from "./basic-carousel";
-import SizeCarousel from "./size-carousel";
-import SpacingCarousel from "./spacing-carousel";
-import VerticalCarousel from "./vertical-carousel";
-import AutoplayCarousel from "./autoplay-carousel";
-import CustomCarousel from "./custom-carousel";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { basicCarousel, sizeCarousel, spacingCarousel, verticalCarousel, autoplayCarousel, customCarousel } from "./source-code"
-const CarouselPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic" code={basicCarousel}>
-          <BasicCarousel />
-        </Card>
-        <Card title="Size Carousel" code={sizeCarousel}>
-          <SizeCarousel />
-        </Card>
-        <Card title="Spacing Carousel" code={spacingCarousel}>
-          <SpacingCarousel />
-        </Card>
-        <Card title="Vertical Carousel" code={verticalCarousel}>
-          <VerticalCarousel />
-        </Card>
-        <Card title="Autoplay Carousel" code={autoplayCarousel}>
-          <AutoplayCarousel />
-        </Card>
-        <Card title="Custom Carousel" code={customCarousel}>
-          <CustomCarousel />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default CarouselPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/carousel/size-carousel.tsx b/app/[locale]/(protected)/components/carousel/size-carousel.tsx
deleted file mode 100644
index f1443266..00000000
--- a/app/[locale]/(protected)/components/carousel/size-carousel.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const SizeCarousel = () => {
-  return (
-      <Carousel
-        opts={{
-          align: "start",
-        }}
-        className="w-full max-w-sm mx-auto"
-      >
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card  className="dark:border-default-300">
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-  );
-};
-
-export default SizeCarousel;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/carousel/source-code.ts b/app/[locale]/(protected)/components/carousel/source-code.ts
deleted file mode 100644
index da56fa80..00000000
--- a/app/[locale]/(protected)/components/carousel/source-code.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-export const basicCarousel=`import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const BasicCarousel = () => {
-  return (
-    <Carousel className="w-full max-w-xs mx-auto">
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index}>
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  );
-};
-
-export default BasicCarousel;`
-
-export const sizeCarousel=`import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const SizeCarousel = () => {
-  return (
-      <Carousel
-        opts={{
-          align: "start",
-        }}
-        className="w-full max-w-sm mx-auto"
-      >
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-  );
-};
-
-export default SizeCarousel;`
-
-export const spacingCarousel=`"use client"
-
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const SpacingCarousel = () => {
-  return (
-      <Carousel className="w-full max-w-sm mx-auto">
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-  );
-};
-
-export default SpacingCarousel;`
-
-export const verticalCarousel=`import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const VerticalCarousel = () => {
-  return (
-    <div className="pt-10 pb-12">
-      <Carousel
-        opts={{
-          align: "start",
-        }}
-        orientation="vertical"
-        className="w-full max-w-xs mx-auto"
-      >
-        <CarouselContent className="-mt-1 h-[200px] min-w-[200px]">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pt-1 md:basis-1/2">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  );
-};
-
-export default VerticalCarousel;`
-
-export const autoplayCarousel=`"use client"
-import { Card, CardContent } from "@/components/ui/card"
-import Autoplay from "embla-carousel-autoplay"
-
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-import { useRef } from "react";
-
-const AutoplayCarousel = () => {
-  const plugin = useRef(
-    Autoplay({ delay: 2000, stopOnInteraction: true })
-  )
-
-  return (
-      <Carousel
-        className="w-full max-w-sm mx-auto"
-        plugins={[plugin.current]}
-        onMouseEnter={plugin.current.stop}
-        onMouseLeave={plugin.current.reset}
-      >
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-  );
-};
-
-export default AutoplayCarousel;`
-
-export const customCarousel=`"use client"
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselApi,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-import { useEffect, useState } from "react"
-
-const CustomCarousel = () => {
-  const [api, setApi] = useState<CarouselApi | undefined>(undefined)
-  const [current, setCurrent] = useState<number>(0)
-  const [count, setCount] = useState<number>(0)
-
-  useEffect(() => {
-    if (!api) {
-      return
-    }
-
-    setCount(api.scrollSnapList().length)
-    setCurrent(api.selectedScrollSnap() + 1)
-
-    api.on("select", () => {
-      setCurrent(api.selectedScrollSnap() + 1)
-    })
-  }, [api])
-
-  return (
-    <div className="flex flex-col items-center gap-3">
-      <Carousel setApi={setApi} className="w-full max-w-xs">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-      <div className="py-2 text-center font-medium text-sm text-muted-foreground">
-        Slide <strong>{current}</strong> of <strong>{count}</strong>
-      </div>
-    </div>
-  )
-}
-
-export default CustomCarousel
-`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/carousel/spacing-carousel.tsx b/app/[locale]/(protected)/components/carousel/spacing-carousel.tsx
deleted file mode 100644
index ad5f4b2b..00000000
--- a/app/[locale]/(protected)/components/carousel/spacing-carousel.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const SpacingCarousel = () => {
-  return (
-      <Carousel className="w-full max-w-sm mx-auto">
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card  className="dark:border-default-300">
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-  );
-};
-
-export default SpacingCarousel;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/carousel/vertical-carousel.tsx b/app/[locale]/(protected)/components/carousel/vertical-carousel.tsx
deleted file mode 100644
index 861108c5..00000000
--- a/app/[locale]/(protected)/components/carousel/vertical-carousel.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-const VerticalCarousel = () => {
-  return (
-    <div className="pt-10 pb-12">
-      <Carousel
-        opts={{
-          align: "start",
-        }}
-        orientation="vertical"
-        className="w-full max-w-xs mx-auto"
-      >
-        <CarouselContent className="-mt-1 h-[200px] min-w-[200px]">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pt-1 md:basis-1/2">
-              <div className="p-1">
-                <Card  className="dark:border-default-300">
-                  <CardContent className="flex items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  );
-};
-
-export default VerticalCarousel;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/collapsible/basic-collapsible.tsx b/app/[locale]/(protected)/components/collapsible/basic-collapsible.tsx
deleted file mode 100644
index 0d579336..00000000
--- a/app/[locale]/(protected)/components/collapsible/basic-collapsible.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client"
-import { ChevronsUpDown} from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-
-import { useState } from "react";
-
-const BasicCollapsible = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  return (
-    <div className="flex justify-center">
-      <Collapsible
-        open={isOpen}
-        onOpenChange={setIsOpen}
-        className="w-[350px] space-y-2 "
-      >
-        <div className="flex items-center justify-between gap-4">
-          <h4 className="text-sm font-semibold">
-           Collapsible Trigger 
-          </h4>
-          <CollapsibleTrigger asChild>
-            <Button variant="outline" size="icon">
-              <ChevronsUpDown className="h-4 w-4" />
-              <span className="sr-only">Toggle</span>
-            </Button>
-          </CollapsibleTrigger>
-        </div>
-        <div className="rounded-md  border border-default-200 dark:border-default-300 px-4 py-3 font-mono text-sm">
-          @radix-ui/primitives
-        </div>
-        <CollapsibleContent className="space-y-2">
-          <div className="rounded-md   border border-default-200 dark:border-default-300 px-4 py-3 font-mono text-sm">
-            @radix-ui/colors
-          </div>
-          <div className="rounded-md  border border-default-200 dark:border-default-300 px-4 py-3 font-mono text-sm">
-            @stitches/react
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  );
-};
-
-export default BasicCollapsible;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/collapsible/layout.tsx b/app/[locale]/(protected)/components/collapsible/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/collapsible/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/collapsible/page.tsx b/app/[locale]/(protected)/components/collapsible/page.tsx
deleted file mode 100644
index bed6a296..00000000
--- a/app/[locale]/(protected)/components/collapsible/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicCollapsible from "./basic-collapsible";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import {basicCarousel} from "./source-code"
-const CollapsiblePage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Collapsible" code={basicCarousel}>
-        <BasicCollapsible />
-      </Card>
-    </div>
-  );
-};
-
-export default CollapsiblePage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/collapsible/source-code.ts b/app/[locale]/(protected)/components/collapsible/source-code.ts
deleted file mode 100644
index abc9efcd..00000000
--- a/app/[locale]/(protected)/components/collapsible/source-code.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export const basicCarousel=`"use client"
-import { ChevronsUpDown} from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-
-import { useState } from "react";
-
-const BasicCollapsible = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  return (
-    <div className="flex justify-center">
-      <Collapsible
-        open={isOpen}
-        onOpenChange={setIsOpen}
-        className="w-[350px] space-y-2"
-      >
-        <div className="flex items-center justify-between space-x-4">
-          <h4 className="text-sm font-semibold">
-           Collapsible Trigger 
-          </h4>
-          <CollapsibleTrigger asChild>
-            <Button variant="outline" size="icon">
-              <ChevronsUpDown className="h-4 w-4" />
-              <span className="sr-only">Toggle</span>
-            </Button>
-          </CollapsibleTrigger>
-        </div>
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">
-          @radix-ui/primitives
-        </div>
-        <CollapsibleContent className="space-y-2">
-          <div className="rounded-md border px-4 py-3 font-mono text-sm">
-            @radix-ui/colors
-          </div>
-          <div className="rounded-md border px-4 py-3 font-mono text-sm">
-            @stitches/react
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  );
-};
-
-export default BasicCollapsible;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/colors/layout.tsx b/app/[locale]/(protected)/components/colors/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/colors/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/colors/page.tsx b/app/[locale]/(protected)/components/colors/page.tsx
deleted file mode 100644
index 496cadb5..00000000
--- a/app/[locale]/(protected)/components/colors/page.tsx
+++ /dev/null
@@ -1,588 +0,0 @@
-import { CopyButton } from "@/components/copy-button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import React from "react";
-
-const slates = [
-  {
-    name: "default-50",
-    bg: "bg-default-50",
-    color: "#f8fafc",
-  },
-  {
-    name: "default-100",
-    bg: "bg-default-100",
-    color: "#f1f5f9",
-  },
-
-  {
-    name: "default-200",
-    bg: "bg-default-200",
-    color: "#e2e8f0",
-  },
-  {
-    name: "default-300",
-    bg: "bg-default-300",
-    color: "#cbd5e1",
-  },
-
-  {
-    name: "default-400",
-    bg: "bg-default-400",
-    color: "#94a3b8",
-  },
-  {
-    name: "default-500",
-    bg: "bg-default-500",
-    color: "#64748b",
-  },
-  {
-    name: "default-600",
-    bg: "bg-default-600",
-    color: "#475569",
-  },
-  {
-    name: "default-700",
-    bg: "bg-default-700",
-    color: "#1e293b",
-  },
-  {
-    name: "default-800",
-    bg: "bg-default-800",
-    color: "#1e293b",
-  },
-  {
-    name: "default-900",
-    bg: "bg-default-900",
-    color: "#0f172a",
-  },
-];
-const primary = [
-  {
-    name: "primary-50",
-    bg: "bg-primary-50",
-    color: "#F6F8FF",
-  },
-  {
-    name: "primary-100",
-    bg: "bg-primary-100",
-    color: "#EDF0FF",
-  },
-
-  {
-    name: "primary-200",
-    bg: "bg-primary-200",
-    color: "#D1DAFE",
-  },
-  {
-    name: "primary-300",
-    bg: "bg-primary-300",
-    color: "#B4C2FD",
-  },
-
-  {
-    name: "primary-400",
-    bg: "bg-primary-400",
-    color: "#8092FF",
-  },
-  {
-    name: "primary-500",
-    bg: "bg-primary-500",
-    color: "#7E96FC",
-  },
-  {
-    name: "primary-600",
-    bg: "bg-primary-600",
-    color: "#3F5EDF",
-  },
-  {
-    name: "primary-700",
-    bg: "bg-primary-700",
-    color: "#2A3F96",
-  },
-  {
-    name: "primary-800",
-    bg: "bg-primary-800",
-    color: "#203071",
-  },
-  {
-    name: "primary-900",
-    bg: "bg-primary-900",
-    color: "#151F49",
-  },
-];
-const danger = [
-  {
-    name: "destructive",
-    bg: "bg-destructive",
-    color: "#FFF7F7",
-  },
-  // {
-  //   name: "destructive-50",
-  //   bg: "bg-destructive-50",
-  //   color: "#FFF7F7",
-  // },
-  // {
-  //   name: "destructive-100",
-  //   bg: "bg-destructive-100",
-  //   color: "#FEEFEF",
-  // },
-
-  // {
-  //   name: "destructive-200",
-  //   bg: "bg-destructive-200",
-  //   color: "#FCD6D7",
-  // },
-  // {
-  //   name: "destructive-300",
-  //   bg: "bg-destructive-300",
-  //   color: "#FABBBD",
-  // },
-
-  // {
-  //   name: "destructive-400",
-  //   bg: "bg-destructive-400",
-  //   color: "#F68B8D",
-  // },
-  // {
-  //   name: "destructive-500",
-  //   bg: "bg-destructive-500",
-  //   color: "#F1595C",
-  // },
-  // {
-  //   name: "destructive-600",
-  //   bg: "bg-destructive-600",
-  //   color: "#D75052",
-  // },
-  // {
-  //   name: "destructive-700",
-  //   bg: "bg-destructive-700",
-  //   color: "#913638",
-  // },
-  // {
-  //   name: "destructive-800",
-  //   bg: "bg-destructive-800",
-  //   color: "#6D292A",
-  // },
-  // {
-  //   name: "destructive-900",
-  //   bg: "bg-destructive-900",
-  //   color: "#461A1B",
-  // },
-];
-const warning = [
-  {
-    name: "warning",
-    bg: "bg-warning",
-    color: "#FFFAF8",
-  },
-  // {
-  //   name: "warning-50",
-  //   bg: "bg-warning-50",
-  //   color: "#FFFAF8",
-  // },
-  // {
-  //   name: "warning-100",
-  //   bg: "bg-warning-100",
-  //   color: "#FFF4F1",
-  // },
-
-  // {
-  //   name: "warning-200",
-  //   bg: "bg-warning-200",
-  //   color: "#FEE4DA",
-  // },
-  // {
-  //   name: "warning-300",
-  //   bg: "bg-warning-300",
-  //   color: "#FDD2C3",
-  // },
-
-  // {
-  //   name: "warning-400",
-  //   bg: "bg-warning-400",
-  //   color: "#FCB298",
-  // },
-  // {
-  //   name: "warning-500",
-  //   bg: "bg-warning-500",
-  //   color: "#FA916B",
-  // },
-  // {
-  //   name: "warning-600",
-  //   bg: "bg-warning-600",
-  //   color: "#DF8260",
-  // },
-  // {
-  //   name: "warning-700",
-  //   bg: "bg-warning-700",
-  //   color: "#965741",
-  // },
-  // {
-  //   name: "warning-800",
-  //   bg: "bg-warning-800",
-  //   color: "#714231",
-  // },
-  // {
-  //   name: "warning-900",
-  //   bg: "bg-warning-900",
-  //   color: "#4A2E21",
-  // },
-];
-const info = [
-  {
-    name: "info",
-    bg: "bg-info",
-    color: "#F3FEFF",
-  },
-  // {
-  //   name: "info-50",
-  //   bg: "bg-info-50",
-  //   color: "#F3FEFF",
-  // },
-  // {
-  //   name: "info-100",
-  //   bg: "bg-info-100",
-  //   color: "#E7FEFF",
-  // },
-
-  // {
-  //   name: "info-200",
-  //   bg: "bg-info-200",
-  //   color: "#C5FDFF",
-  // },
-  // {
-  //   name: "info-300",
-  //   bg: "bg-info-300",
-  //   color: "#A3FCFF",
-  // },
-
-  // {
-  //   name: "info-400",
-  //   bg: "bg-info-400",
-  //   color: "#5FF9FF",
-  // },
-  // {
-  //   name: "info-500",
-  //   bg: "bg-info-500",
-  //   color: "#0CE7FA",
-  // },
-  // {
-  //   name: "info-600",
-  //   bg: "bg-info-600",
-  //   color: "#00B8D4",
-  // },
-  // {
-  //   name: "info-700",
-  //   bg: "bg-info-700",
-  //   color: "#007A8D",
-  // },
-  // {
-  //   name: "info-800",
-  //   bg: "bg-info-800",
-  //   color: "#005E67",
-  // },
-  // {
-  //   name: "info-900",
-  //   bg: "bg-info-900",
-  //   color: "#003F42",
-  // },
-];
-const success = [
-  {
-    name: "success",
-    bg: "bg-success",
-    color: "#F3FEF8",
-  },
-  // {
-  //   name: "success-50",
-  //   bg: "bg-success-50",
-  //   color: "#F3FEF8",
-  // },
-  // {
-  //   name: "success-100",
-  //   bg: "bg-success-100",
-  //   color: "#E7FDF1",
-  // },
-
-  // {
-  //   name: "success-200",
-  //   bg: "bg-success-200",
-  //   color: "#E7FDF1",
-  // },
-  // {
-  //   name: "success-300",
-  //   bg: "bg-success-300",
-  //   color: "#A3F9D5",
-  // },
-
-  // {
-  //   name: "success-400",
-  //   bg: "bg-success-400",
-  //   color: "#5FF5B1",
-  // },
-  // {
-  //   name: "success-500",
-  //   bg: "bg-success-500",
-  //   color: "#50C793",
-  // },
-  // {
-  //   name: "success-600",
-  //   bg: "bg-success-600",
-  //   color: "#3F9A7A",
-  // },
-  // {
-  //   name: "success-700",
-  //   bg: "bg-success-700",
-  //   color: "#2E6D61",
-  // },
-  // {
-  //   name: "success-800",
-  //   bg: "bg-success-800",
-  //   color: "#1F4B47",
-  // },
-  // {
-  //   name: "success-900",
-  //   bg: "bg-success-900",
-  //   color: "#0F2A2E",
-  // },
-];
-
-const Colors = () => {
-  return (
-    <Card>
-      <CardHeader className="border-b border-solid">
-        <CardTitle>All Colors</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-5">
-        <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Bases
-          </div>
-          <div className="flex flex-wrap gap-4">
-            <div className="group">
-              <div className="color-box relative h-[96px] 2xl:w-[107px] w-[96px] bg-default-900 rounded-md flex flex-col text-primary-foreground p-4 transition-all  duration-200 group-hover:shadow-sm group-hover:-translate-y-1">
-                <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                  <CopyButton
-                    event="copy_color"
-                    name="Dark"
-                    code="#0F172A"
-                    className="h-5 w-5 ms-2 bg-white"
-                  />
-                </span>
-              </div>
-              <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                Dark
-              </div>
-              <div className="flex-0 text-sm text-default-700 flex items-center">
-                #0F172A
-              </div>
-            </div>
-            <div className="group">
-              <div className="color-box relative h-[96px] 2xl:w-[107px] w-[96px] bg-primary-foreground border-default-500 border rounded-md flex flex-col text-default-900  p-4 transition-all duration-200 group-hover:shadow-sm group-hover:-translate-y-1">
-                <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                  <CopyButton
-                    event="copy_color"
-                    name="White"
-                    code="#FFFFFF"
-                    className="ms-2 h-5 w-5 bg-white"
-                  />
-                </span>
-              </div>
-              <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                White
-              </div>
-              <div className="flex-0 text-sm text-default-700 flex items-center">
-                #FFFFFF
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Slate
-          </div>
-          <div className="flex flex-wrap gap-4">
-            {slates?.map((item, i) => (
-              <div key={i} className="group ">
-                <div
-                  className={`color-box relative h-[96px] 2xl:w-[107px] w-[96px]
-                 rounded-md flex flex-col text-primary-foreground p-4 transition-all duration-200 
-                 group-hover:shadow-sm group-hover:-translate-y-1 ${item.bg}`}
-                >
-                  <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                    <CopyButton
-                      event="copy_color"
-                      name={item.name}
-                      code={item.color}
-                      className="ms-2 h-5 w-5 bg-white"
-                    />
-                  </span>
-                </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
-                <div className="flex-0 text-sm text-default-700 flex items-center">
-                  {item.color}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Primary
-          </div>
-          <div className="flex flex-wrap gap-4">
-            {primary?.map((item, i) => (
-              <div key={i} className="group">
-                <div
-                  className={`color-box relative h-[96px] 2xl:w-[107px] w-[96px] 
-                rounded-md flex flex-col text-primary-foreground p-4 transition-all 
-                duration-200 group-hover:shadow-sm group-hover:-translate-y-1  ${item.bg}`}
-                >
-                  <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                    <CopyButton
-                      event="copy_color"
-                      name={item.name}
-                      code={item.color}
-                      className="ms-2 h-5 w-5 bg-white"
-                    />
-                  </span>
-                </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
-                <div className="flex-0 text-sm text-default-700 flex items-center">
-                  {item.color}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Danger
-          </div>
-          <div className="flex flex-wrap gap-4">
-            {danger?.map((item, i) => (
-              <div key={i} className="group ">
-                <div
-                  className={`color-box relative h-[96px] 2xl:w-[107px] w-[96px]
-                 rounded-md flex flex-col text-destructive-foreground p-4 transition-all duration-200
-                  group-hover:shadow-sm group-hover:-translate-y-1 ${item.bg}`}
-                >
-                  <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                    <CopyButton
-                      event="copy_color"
-                      name={item.name}
-                      code={item.color}
-                      className="ms-2 h-5 w-5 bg-white"
-                    />
-                  </span>
-                </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
-                <div className="flex-0 text-sm text-default-700 flex items-center">
-                  {item.color}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Warning
-          </div>
-          <div className="flex flex-wrap gap-4">
-            {warning?.map((item, i) => (
-              <div key={i} className="group ">
-                <div
-                  className={`color-box relative h-[96px] 2xl:w-[107px] w-[96px] rounded-md
-                 flex flex-col  text-warning-foreground p-4 transition-all duration-200 group-hover:shadow-sm group-hover:-translate-y-1 ${item.bg}`}
-                >
-                  <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                    <CopyButton
-                      event="copy_color"
-                      name={item.name}
-                      code={item.color}
-                      className="ms-2 h-5 w-5 bg-white"
-                    />
-                  </span>
-                </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
-                <div className="flex-0 text-sm text-default-700 flex items-center">
-                  {item.color}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Info
-          </div>
-          <div className="flex flex-wrap gap-4">
-            {info?.map((item, i) => (
-              <div key={i} className="group">
-                <div
-                  className={`color-box  relative h-[96px] 2xl:w-[107px] w-[96px] rounded-md flex flex-col text-info-foreground
-                 p-4 transition-all duration-200 group-hover:shadow-sm  group-hover:-translate-y-1 ${item.bg}`}
-                >
-                  <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                    <CopyButton
-                      event="copy_color"
-                      name={item.name}
-                      code={item.color}
-                      className="ms-2 h-5 w-5 bg-white"
-                    />
-                  </span>
-                </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
-                <div className="flex-0 text-sm text-default-700 flex items-center">
-                  {item.color}{" "}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Success
-          </div>
-          <div className="flex flex-wrap gap-4">
-            {success?.map((item, i) => (
-              <div key={i} className="group">
-                <div
-                  className={`color-box h-[96px] relative 2xl:w-[107px] w-[96px] rounded-md flex flex-col text-success-foreground p-4 transition-all duration-200 group-hover:shadow-sm  group-hover:-translate-y-1 ${item.bg}`}
-                >
-                  <span className="absolute top-3 end-3 hidden group-hover:block duration-200 transition-all">
-                    <CopyButton
-                      event="copy_color"
-                      name={item.name}
-                      code={item.color}
-                      className="ms-2 h-5 w-5 bg-white"
-                    />
-                  </span>
-                </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
-                <div className="flex-0 text-sm text-default-700 flex items-center">
-                  {item.color}{" "}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-export default Colors;
diff --git a/app/[locale]/(protected)/components/context-menu/basic-contextmenu.tsx b/app/[locale]/(protected)/components/context-menu/basic-contextmenu.tsx
deleted file mode 100644
index bb4d781b..00000000
--- a/app/[locale]/(protected)/components/context-menu/basic-contextmenu.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-
-const BasicContextMenu = () => {
-  return (
-    <div className="flex justify-center">
-      <ContextMenu>
-        <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed dark:border-default-300 text-sm">
-          Right click here
-        </ContextMenuTrigger>
-        <ContextMenuContent className="w-64">
-          <ContextMenuItem inset>
-            Back
-            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuItem inset disabled>
-            Forward
-            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuItem inset>
-            Reload
-            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuSub>
-            <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-            <ContextMenuSubContent className="w-48">
-              <ContextMenuItem>
-                Save Page As...
-                <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-              </ContextMenuItem>
-              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-              <ContextMenuItem>Name Window...</ContextMenuItem>
-              <ContextMenuSeparator />
-              <ContextMenuItem>Developer Tools</ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-          <ContextMenuSeparator />
-          <ContextMenuCheckboxItem checked>
-            Show Bookmarks Bar
-            <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-          </ContextMenuCheckboxItem>
-          <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-          <ContextMenuSeparator />
-          <ContextMenuRadioGroup value="pedro">
-            <ContextMenuLabel inset>People</ContextMenuLabel>
-            <ContextMenuSeparator />
-            <ContextMenuRadioItem value="pedro">
-              Pedro Duarte
-            </ContextMenuRadioItem>
-            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-          </ContextMenuRadioGroup>
-        </ContextMenuContent>
-      </ContextMenu>
-    </div>
-  );
-};
-export default BasicContextMenu;
diff --git a/app/[locale]/(protected)/components/context-menu/layout.tsx b/app/[locale]/(protected)/components/context-menu/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/context-menu/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/context-menu/page.tsx b/app/[locale]/(protected)/components/context-menu/page.tsx
deleted file mode 100644
index 6ed727c2..00000000
--- a/app/[locale]/(protected)/components/context-menu/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicContextMenu from "./basic-contextmenu";
-import { basicContextMenu } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const ConextMenuPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Context Menu" code={basicContextMenu}>
-        <BasicContextMenu />
-      </Card>
-    </div>
-  );
-};
-
-export default ConextMenuPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/context-menu/source-code.ts b/app/[locale]/(protected)/components/context-menu/source-code.ts
deleted file mode 100644
index 2b3ce23a..00000000
--- a/app/[locale]/(protected)/components/context-menu/source-code.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-export const basicContextMenu=`import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-
-const BasicContextMenu = () => {
-  return (
-    <div className="flex justify-center">
-      <ContextMenu>
-        <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-          Right click here
-        </ContextMenuTrigger>
-        <ContextMenuContent className="w-64">
-          <ContextMenuItem inset>
-            Back
-            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuItem inset disabled>
-            Forward
-            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuItem inset>
-            Reload
-            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuSub>
-            <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-            <ContextMenuSubContent className="w-48">
-              <ContextMenuItem>
-                Save Page As...
-                <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-              </ContextMenuItem>
-              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-              <ContextMenuItem>Name Window...</ContextMenuItem>
-              <ContextMenuSeparator />
-              <ContextMenuItem>Developer Tools</ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-          <ContextMenuSeparator />
-          <ContextMenuCheckboxItem checked>
-            Show Bookmarks Bar
-            <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-          </ContextMenuCheckboxItem>
-          <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-          <ContextMenuSeparator />
-          <ContextMenuRadioGroup value="pedro">
-            <ContextMenuLabel inset>People</ContextMenuLabel>
-            <ContextMenuSeparator />
-            <ContextMenuRadioItem value="pedro">
-              Pedro Duarte
-            </ContextMenuRadioItem>
-            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-          </ContextMenuRadioGroup>
-        </ContextMenuContent>
-      </ContextMenu>
-    </div>
-  );
-};
-export default BasicContextMenu;
-`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dialog/basic-dialog.tsx b/app/[locale]/(protected)/components/dialog/basic-dialog.tsx
deleted file mode 100644
index 703534f4..00000000
--- a/app/[locale]/(protected)/components/dialog/basic-dialog.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-const BasicDialog = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">Default</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Default</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="primary">Primary</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Primary</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="primary">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="secondary">Secondary</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Secondary</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="secondary">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="success">Success</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Success</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="success">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="info">Info</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Info</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="info">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="warning">Warning</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Warning</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="warning">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="destructive">Destructive</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Destructive</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="destructive">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-  
-    </div>
-  );
-};
-
-export default BasicDialog;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dialog/layout.tsx b/app/[locale]/(protected)/components/dialog/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/dialog/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/dialog/page.tsx b/app/[locale]/(protected)/components/dialog/page.tsx
deleted file mode 100644
index c9da9ae6..00000000
--- a/app/[locale]/(protected)/components/dialog/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicDialog from "./basic-dialog";
-import SizesDialog from "./size-dialog";
-import {  basicDialog, sizesDialog } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const DialogPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic  Dialog" code={basicDialog}>
-          <BasicDialog />
-        </Card>
-        <Card title="Size Dialog" code={sizesDialog}>
-          <SizesDialog />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default DialogPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dialog/size-dialog.tsx b/app/[locale]/(protected)/components/dialog/size-dialog.tsx
deleted file mode 100644
index 64f2ca25..00000000
--- a/app/[locale]/(protected)/components/dialog/size-dialog.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-
-const SizesDialog = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" >
-            Default Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Default Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">
-            Large Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent
-          size="lg"
-        >
-          <DialogHeader>
-            <DialogTitle>Large Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter className="gap-4">
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">
-            Medium Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent size="md">
-          <DialogHeader>
-            <DialogTitle>Medium Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">
-            Small Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent size="sm">
-          <DialogHeader>
-            <DialogTitle>Small Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-    </div>
-  );
-};
-
-export default SizesDialog;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dialog/source-code.ts b/app/[locale]/(protected)/components/dialog/source-code.ts
deleted file mode 100644
index 30ccf0c9..00000000
--- a/app/[locale]/(protected)/components/dialog/source-code.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-export const basicDialog=`import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-const BasicDialog = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">Default</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Default</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="primary">Primary</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Primary</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="primary">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="secondary">Secondary</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Secondary</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="secondary">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="success">Success</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Success</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="success">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="info">Info</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Info</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="info">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="warning">Warning</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Warning</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="warning">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" color="destructive">Destructive</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Destructive</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button color="destructive">Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-};
-
-export default BasicDialog;`
-
-export const sizesDialog=`import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-
-const SizesDialog = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" >
-            Default Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent
-          closeIconClass="text-primary-foreground"
-        >
-          <DialogHeader className="bg-primary">
-            <DialogTitle className="text-primary-foreground">Default Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">
-            Large Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent
-          closeIconClass="text-primary-foreground"
-          size="lg"
-        >
-          <DialogHeader className="bg-primary">
-            <DialogTitle className="text-primary-foreground">Large Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">
-            Medium Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent
-          closeIconClass="text-primary-foreground"
-          size="md"
-        >
-          <DialogHeader className="bg-primary">
-            <DialogTitle className="text-primary-foreground">Medium Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">
-            Small Dialog
-          </Button>
-        </DialogTrigger>
-        <DialogContent
-          closeIconClass="text-primary-foreground"
-          size="sm"
-        >
-          <DialogHeader className="bg-primary">
-            <DialogTitle className="text-primary-foreground">Small Dialog</DialogTitle>
-          </DialogHeader>
-          <DialogDescription className="pb-8">
-            <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
-          </DialogDescription>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
-            </DialogClose>
-            <DialogClose asChild>
-              <Button>Save</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-    </div>
-  );
-};
-
-export default SizesDialog;`
-
diff --git a/app/[locale]/(protected)/components/drawer/basic-drawer.tsx b/app/[locale]/(protected)/components/drawer/basic-drawer.tsx
deleted file mode 100644
index cbaf844e..00000000
--- a/app/[locale]/(protected)/components/drawer/basic-drawer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer"
-
-const BasicDrawer = () => {
-  return (
-  <Drawer>
-    <DrawerTrigger asChild >
-      <Button>Open drawer</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
-        <DrawerDescription>This action cannot be undone.</DrawerDescription>
-      </DrawerHeader>
-      <DrawerFooter className="flex-row justify-end">
-        <Button>Submit</Button>
-        <DrawerClose>
-          <Button variant="outline"> Cancel </Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
-  );
-};
-
-export default BasicDrawer;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/drawer/layout.tsx b/app/[locale]/(protected)/components/drawer/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/drawer/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/drawer/page.tsx b/app/[locale]/(protected)/components/drawer/page.tsx
deleted file mode 100644
index fec5f5b7..00000000
--- a/app/[locale]/(protected)/components/drawer/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicDrawer from "./basic-drawer";
-import { basicDrawer } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const Drawer = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic Drawer" code={basicDrawer}>
-          <BasicDrawer />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default Drawer;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/drawer/source-code.ts b/app/[locale]/(protected)/components/drawer/source-code.ts
deleted file mode 100644
index 04ab7935..00000000
--- a/app/[locale]/(protected)/components/drawer/source-code.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export const basicDrawer=`import { Button } from "@/components/ui/button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer"
-
-const BasicDrawer = () => {
-  return (
-  <Drawer>
-    <DrawerTrigger asChild >
-      <Button>Open drawer</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
-        <DrawerDescription>This action cannot be undone.</DrawerDescription>
-      </DrawerHeader>
-      <DrawerFooter className="flex-row justify-end">
-        <Button>Submit</Button>
-        <DrawerClose>
-          <Button variant="outline"> Cancel </Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
-  );
-};
-
-export default BasicDrawer;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/basic-dropdown.tsx b/app/[locale]/(protected)/components/dropdown/basic-dropdown.tsx
deleted file mode 100644
index c86f0a04..00000000
--- a/app/[locale]/(protected)/components/dropdown/basic-dropdown.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const BasicDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Default
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="primary">
-            Primary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="secondary">
-            Secondary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success">
-            Success
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info">
-            Info
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="warning">
-            Warning
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="destructive">
-            Destructive
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default BasicDropdown;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/dropdown-directions.tsx b/app/[locale]/(protected)/components/dropdown/dropdown-directions.tsx
deleted file mode 100644
index 3f87e67f..00000000
--- a/app/[locale]/(protected)/components/dropdown/dropdown-directions.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const DropdownDirections = () => {
-  return (
-    <div className="flex flex-wrap gap-3 min-h-36">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Left Align
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Right Align
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>Center</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="center">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-          <DropdownMenuItem>Team</DropdownMenuItem>
-          <DropdownMenuItem>Subscription</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Right Side
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent side="right">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Left Side
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent side="left">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Top Side
-            <Icon icon="heroicons:chevron-up" className=" h-5 w-5 ms-2 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" side="top">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-          <DropdownMenuItem>Team</DropdownMenuItem>
-          <DropdownMenuItem>Subscription</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Bottom Side
-            <Icon icon="heroicons:chevron-down" className=" h-5 w-5 ms-2 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" side="bottom">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-          <DropdownMenuItem>Team</DropdownMenuItem>
-          <DropdownMenuItem>Subscription</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default DropdownDirections;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/dropdown-sizes.tsx b/app/[locale]/(protected)/components/dropdown/dropdown-sizes.tsx
deleted file mode 100644
index ddc3c981..00000000
--- a/app/[locale]/(protected)/components/dropdown/dropdown-sizes.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const DropdownSizes = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button size="lg">
-            Large Button
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info">
-            Default
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success" size="sm">
-            Small
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default DropdownSizes;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/flat-dropdown.tsx b/app/[locale]/(protected)/components/dropdown/flat-dropdown.tsx
deleted file mode 100644
index a03d51bc..00000000
--- a/app/[locale]/(protected)/components/dropdown/flat-dropdown.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const FlatDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost">
-            Default
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" color="primary">
-            Primary
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="secondary" variant="ghost" >
-            Secondary
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success" variant="ghost" >
-            Success
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info" variant="ghost">
-            Info
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="warning" variant="ghost">
-            Warning
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="destructive" variant="ghost">
-            Destructive
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default FlatDropdown;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/layout.tsx b/app/[locale]/(protected)/components/dropdown/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/dropdown/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/dropdown/outline-dropdown.tsx b/app/[locale]/(protected)/components/dropdown/outline-dropdown.tsx
deleted file mode 100644
index ad7e3175..00000000
--- a/app/[locale]/(protected)/components/dropdown/outline-dropdown.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const OutlineDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">
-            Default
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" color="primary">
-            Primary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="secondary" variant="outline">
-            Secondary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success" variant="outline">
-            Success
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info" variant="outline">
-            Info
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="warning" variant="outline">
-            Warning
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="destructive" variant="outline">
-            Destructive
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default OutlineDropdown;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/page.tsx b/app/[locale]/(protected)/components/dropdown/page.tsx
deleted file mode 100644
index 2663b66c..00000000
--- a/app/[locale]/(protected)/components/dropdown/page.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicDropdown from "./basic-dropdown";
-import OutlineDropdown from "./outline-dropdown";
-import FlatDropdown from "./flat-dropdown";
-import DropdownSizes from "./dropdown-sizes";
-import SplitDropdown from "./split-dropdown";
-import SplitOutline from "./split-outline";
-import DropdownDirections from "./dropdown-directions";
-import { basicDropdown, dropdownDirections, dropdownSizes, flatDropdown, outlineDropdown, splitDropdown, splitOutlineDropdown } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const DropdownPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card title="Basic Dropdown" code={basicDropdown}>
-          <BasicDropdown />
-        </Card>
-        <Card title="Outline Dropdown" code={outlineDropdown}>
-          <OutlineDropdown />
-        </Card>
-        <Card title="Flat Dropdown" code={flatDropdown}>
-          <FlatDropdown />
-        </Card>
-        <Card title="Dropdown Sizes" code={dropdownSizes}>
-          <DropdownSizes />
-        </Card>
-        <Card title="Dropdown Directions" code={dropdownDirections}>
-          <DropdownDirections />
-        </Card>
-        <Card title="Split Dropdowns" code={splitDropdown}>
-          <SplitDropdown />
-        </Card>
-        <Card title="Split Outline Dropdowns" code={splitOutlineDropdown}>
-          <SplitOutline />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default DropdownPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/source-code.ts b/app/[locale]/(protected)/components/dropdown/source-code.ts
deleted file mode 100644
index 4b2877e8..00000000
--- a/app/[locale]/(protected)/components/dropdown/source-code.ts
+++ /dev/null
@@ -1,821 +0,0 @@
-export const basicDropdown=`
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const BasicDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Default
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="primary">
-            Primary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="secondary">
-            Secondary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success">
-            Success
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info">
-            Info
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="warning">
-            Warning
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="destructive">
-            Destructive
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default BasicDropdown;`
-
-export const outlineDropdown=`
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const OutlineDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">
-            Default
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" color="primary">
-            Primary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="secondary" variant="outline">
-            Secondary
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success" variant="outline">
-            Success
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info" variant="outline">
-            Info
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="warning" variant="outline">
-            Warning
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="destructive" variant="outline">
-            Destructive
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default OutlineDropdown;`
-
-export const flatDropdown=`
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const FlatDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost">
-            Default
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" color="primary">
-            Primary
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="secondary" variant="ghost" >
-            Secondary
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success" variant="ghost" >
-            Success
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info" variant="ghost">
-            Info
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="warning" variant="ghost">
-            Warning
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="destructive" variant="ghost">
-            Destructive
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default FlatDropdown;`
-
-export const dropdownSizes=`import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const DropdownSizes = () => {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button size="lg">
-            Large Button
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="info">
-            Default
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button color="success" size="sm">
-            Small
-            <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default DropdownSizes;`
-
-export const dropdownDirections=`
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const DropdownDirections = () => {
-  return (
-    <div className="flex flex-wrap gap-3 min-h-36">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Left Align
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Right Align
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>Center</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" align="center">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-          <DropdownMenuItem>Team</DropdownMenuItem>
-          <DropdownMenuItem>Subscription</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Right Side
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent side="right">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Left Side
-            <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent side="left">
-          <DropdownMenuItem>Action</DropdownMenuItem>
-          <DropdownMenuItem>Another Action</DropdownMenuItem>
-          <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Top Side
-            <Icon icon="heroicons:chevron-up" className=" h-5 w-5 ms-2 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" side="top">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-          <DropdownMenuItem>Team</DropdownMenuItem>
-          <DropdownMenuItem>Subscription</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button>
-            Bottom Side
-            <Icon icon="heroicons:chevron-down" className=" h-5 w-5 ms-2 " />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[196px]" side="bottom">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-          <DropdownMenuItem>Team</DropdownMenuItem>
-          <DropdownMenuItem>Subscription</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export default DropdownDirections;`
-
-export const splitDropdown=`
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const SplitDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <div className="flex">
-        <Button className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"> Default </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-primary-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button color="primary" className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"> Primary </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="primary" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-primary-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="secondary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Secondary
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="secondary" 
-            className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-secondary-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="success"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Success
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="success" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-success-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="info"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Info
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="info" className="ltr:rounded-l-none rtl:rounded-r-none  hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-info-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="warning"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Warning
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="warning" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-warning-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="destructive"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Destructive
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="destructive" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-destructive-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-};
-
-export default SplitDropdown;`
-
-export const splitOutlineDropdown=`
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const SplitOutline = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <div className="flex">
-        <Button
-          variant="outline"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Default </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="primary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Primary </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="primary"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="secondary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Secondary </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="secondary"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="success"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Success </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="success"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="info"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Info </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="info"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="warning"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Warning </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="warning"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="destructive"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Destructive </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="destructive"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-};
-
-export default SplitOutline;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/split-dropdown.tsx b/app/[locale]/(protected)/components/dropdown/split-dropdown.tsx
deleted file mode 100644
index 2a188d3c..00000000
--- a/app/[locale]/(protected)/components/dropdown/split-dropdown.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const SplitDropdown = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <div className="flex">
-        <Button className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"> Default </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-primary-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button color="primary" className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"> Primary </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="primary" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-primary-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="secondary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Secondary
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="secondary" 
-            className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-secondary-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="success"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Success
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="success" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-success-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="info"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Info
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="info" className="ltr:rounded-l-none rtl:rounded-r-none  hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-info-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="warning"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Warning
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="warning" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-warning-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          color="destructive"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
-          Destructive
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button color="destructive" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-destructive-foreground/30  hover:ring-offset-0">
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-};
-
-export default SplitDropdown;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/dropdown/split-outline.tsx b/app/[locale]/(protected)/components/dropdown/split-outline.tsx
deleted file mode 100644
index 567084c7..00000000
--- a/app/[locale]/(protected)/components/dropdown/split-outline.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-const SplitOutline = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <div className="flex">
-        <Button
-          variant="outline"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Default </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="primary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Primary </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="primary"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="secondary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Secondary </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="secondary"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="success"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Success </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="success"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="info"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Info </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="info"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="warning"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Warning </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="warning"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="flex">
-        <Button
-          variant="outline"
-          color="destructive"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Destructive </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              color="destructive"
-              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r   hover:ring-offset-0"
-            >
-              <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Action</DropdownMenuItem>
-            <DropdownMenuItem>Another Action</DropdownMenuItem>
-            <DropdownMenuItem>Something Else Here</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-};
-
-export default SplitOutline;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/hover-card/basic-card.tsx b/app/[locale]/(protected)/components/hover-card/basic-card.tsx
deleted file mode 100644
index d898cd2b..00000000
--- a/app/[locale]/(protected)/components/hover-card/basic-card.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { CalendarDays } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card"
-
-const BasicCard = () => {
-  return (
-    <div className="flex justify-center">
-      <HoverCard>
-        <HoverCardTrigger asChild>
-          <Button variant="outline">Hover Me</Button>
-        </HoverCardTrigger>
-        <HoverCardContent className="w-80">
-          <div className="flex justify-between space-x-4">
-            <Avatar>
-              <AvatarImage src="https://github.com/vercel.png" />
-              <AvatarFallback>VC</AvatarFallback>
-            </Avatar>
-            <div className="space-y-1">
-              <h4 className="text-sm font-semibold">DashCode</h4>
-              <p className="text-sm">
-                Admin UI Kit - DashCode; Next.js, React, and Tailwind CSS
-              </p>
-              <div className="flex items-center pt-2">
-                <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
-                <span className="text-xs text-muted-foreground">
-                  Joined December 2021
-                </span>
-              </div>
-            </div>
-          </div>
-        </HoverCardContent>
-      </HoverCard>
-    </div>
-  );
-};
-
-export default BasicCard;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/hover-card/layout.tsx b/app/[locale]/(protected)/components/hover-card/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/hover-card/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/hover-card/page.tsx b/app/[locale]/(protected)/components/hover-card/page.tsx
deleted file mode 100644
index 46373fd8..00000000
--- a/app/[locale]/(protected)/components/hover-card/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicCard from "./basic-card";
-import { hoverCard } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const HoverCardPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Basic Hover Card" code={hoverCard}>
-        <BasicCard />
-      </Card>
-    </div>
-  );
-};
-
-export default HoverCardPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/hover-card/source-code.ts b/app/[locale]/(protected)/components/hover-card/source-code.ts
deleted file mode 100644
index 27f2bc3f..00000000
--- a/app/[locale]/(protected)/components/hover-card/source-code.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-export const hoverCard=`import { CalendarDays } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card"
-
-const BasicCard = () => {
-  return (
-    <div className="flex justify-center">
-      <HoverCard>
-        <HoverCardTrigger asChild>
-          <Button variant="outline">Hover Me</Button>
-        </HoverCardTrigger>
-        <HoverCardContent className="w-80">
-          <div className="flex justify-between space-x-4">
-            <Avatar>
-              <AvatarImage src="https://github.com/vercel.png" />
-              <AvatarFallback>VC</AvatarFallback>
-            </Avatar>
-            <div className="space-y-1">
-              <h4 className="text-sm font-semibold">DashCode</h4>
-              <p className="text-sm">
-                Admin UI Kit - DashCode; Next.js, React, and Tailwind CSS
-              </p>
-              <div className="flex items-center pt-2">
-                <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
-                <span className="text-xs text-muted-foreground">
-                  Joined December 2021
-                </span>
-              </div>
-            </div>
-          </div>
-        </HoverCardContent>
-      </HoverCard>
-    </div>
-  );
-};
-
-export default BasicCard;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/layout.tsx b/app/[locale]/(protected)/components/layout.tsx
deleted file mode 100644
index b3db54a9..00000000
--- a/app/[locale]/(protected)/components/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div dir='ltr'>
-      {children}
-    </div>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/menu-bar/basic-menu.tsx b/app/[locale]/(protected)/components/menu-bar/basic-menu.tsx
deleted file mode 100644
index d53cef96..00000000
--- a/app/[locale]/(protected)/components/menu-bar/basic-menu.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from "@/components/ui/menubar"
-const BasicMenu = () => {
-  return (
-    <div className="flex justify-center">
-      <Menubar>
-        <MenubarMenu>
-          <MenubarTrigger>File</MenubarTrigger>
-          <MenubarContent>
-            <MenubarItem>
-              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>
-              New Window <MenubarShortcut>⌘N</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled>New Incognito Window</MenubarItem>
-            <MenubarSeparator />
-            <MenubarSub>
-              <MenubarSubTrigger>Share</MenubarSubTrigger>
-              <MenubarSubContent>
-                <MenubarItem>Email link</MenubarItem>
-                <MenubarItem>Messages</MenubarItem>
-                <MenubarItem>Notes</MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
-            <MenubarSeparator />
-            <MenubarItem>
-              Print... <MenubarShortcut>⌘P</MenubarShortcut>
-            </MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>Edit</MenubarTrigger>
-          <MenubarContent>
-            <MenubarItem>
-              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>
-              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarSub>
-              <MenubarSubTrigger>Find</MenubarSubTrigger>
-              <MenubarSubContent>
-                <MenubarItem>Search the web</MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>Find...</MenubarItem>
-                <MenubarItem>Find Next</MenubarItem>
-                <MenubarItem>Find Previous</MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
-            <MenubarSeparator />
-            <MenubarItem>Cut</MenubarItem>
-            <MenubarItem>Copy</MenubarItem>
-            <MenubarItem>Paste</MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>View</MenubarTrigger>
-          <MenubarContent>
-            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-            <MenubarCheckboxItem checked>
-              Always Show Full URLs
-            </MenubarCheckboxItem>
-            <MenubarSeparator />
-            <MenubarItem inset>
-              Reload <MenubarShortcut>⌘R</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled inset>
-              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem inset>Hide Sidebar</MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>Profiles</MenubarTrigger>
-          <MenubarContent>
-            <MenubarRadioGroup value="benoit">
-              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-              <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-            </MenubarRadioGroup>
-            <MenubarSeparator />
-            <MenubarItem inset>Edit...</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem inset>Add Profile...</MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-      </Menubar>
-    </div>
-  );
-};
-
-export default BasicMenu;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/menu-bar/layout.tsx b/app/[locale]/(protected)/components/menu-bar/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/menu-bar/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/menu-bar/page.tsx b/app/[locale]/(protected)/components/menu-bar/page.tsx
deleted file mode 100644
index f41e7078..00000000
--- a/app/[locale]/(protected)/components/menu-bar/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicMenu from "./basic-menu";
-import { basicMenu } from "./souce-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const MenuBarPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Basic Menu" code={basicMenu}>
-        <BasicMenu />
-      </Card>
-    </div>
-  );
-};
-
-export default MenuBarPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/menu-bar/souce-code.ts b/app/[locale]/(protected)/components/menu-bar/souce-code.ts
deleted file mode 100644
index a279a176..00000000
--- a/app/[locale]/(protected)/components/menu-bar/souce-code.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-export const basicMenu=`import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from "@/components/ui/menubar"
-const BasicMenu = () => {
-  return (
-    <div className="flex justify-center">
-      <Menubar>
-        <MenubarMenu>
-          <MenubarTrigger>File</MenubarTrigger>
-          <MenubarContent>
-            <MenubarItem>
-              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>
-              New Window <MenubarShortcut>⌘N</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled>New Incognito Window</MenubarItem>
-            <MenubarSeparator />
-            <MenubarSub>
-              <MenubarSubTrigger>Share</MenubarSubTrigger>
-              <MenubarSubContent>
-                <MenubarItem>Email link</MenubarItem>
-                <MenubarItem>Messages</MenubarItem>
-                <MenubarItem>Notes</MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
-            <MenubarSeparator />
-            <MenubarItem>
-              Print... <MenubarShortcut>⌘P</MenubarShortcut>
-            </MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>Edit</MenubarTrigger>
-          <MenubarContent>
-            <MenubarItem>
-              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>
-              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarSub>
-              <MenubarSubTrigger>Find</MenubarSubTrigger>
-              <MenubarSubContent>
-                <MenubarItem>Search the web</MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>Find...</MenubarItem>
-                <MenubarItem>Find Next</MenubarItem>
-                <MenubarItem>Find Previous</MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
-            <MenubarSeparator />
-            <MenubarItem>Cut</MenubarItem>
-            <MenubarItem>Copy</MenubarItem>
-            <MenubarItem>Paste</MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>View</MenubarTrigger>
-          <MenubarContent>
-            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-            <MenubarCheckboxItem checked>
-              Always Show Full URLs
-            </MenubarCheckboxItem>
-            <MenubarSeparator />
-            <MenubarItem inset>
-              Reload <MenubarShortcut>⌘R</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled inset>
-              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem inset>Hide Sidebar</MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>Profiles</MenubarTrigger>
-          <MenubarContent>
-            <MenubarRadioGroup value="benoit">
-              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-              <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-            </MenubarRadioGroup>
-            <MenubarSeparator />
-            <MenubarItem inset>Edit...</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem inset>Add Profile...</MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-      </Menubar>
-    </div>
-  );
-};
-
-export default BasicMenu;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/navigation-menu/basic-nav.tsx b/app/[locale]/(protected)/components/navigation-menu/basic-nav.tsx
deleted file mode 100644
index 66a165f5..00000000
--- a/app/[locale]/(protected)/components/navigation-menu/basic-nav.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import { cn } from "@/lib/utils"
-
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
-
-const components: { title: string; href: string; description: string }[] = [
-  {
-    title: "Alert Dialog",
-    href: "#",
-    description:
-      "A modal dialog that interrupts the user with important content and expects a response.",
-  },
-  {
-    title: "Hover Card",
-    href: "#",
-    description:
-      "For sighted users to preview content available behind a link.",
-  },
-  {
-    title: "Progress",
-    href: "#",
-    description:
-      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
-  },
-  {
-    title: "Scroll-area",
-    href: "#",
-    description: "Visually or semantically separates content.",
-  },
-  {
-    title: "Tabs",
-    href: "#",
-    description:
-      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
-  },
-  {
-    title: "Tooltip",
-    href: "#",
-    description:
-      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
-  },
-]
-
-const BasicNav = () => {
-  return (
-    <div className="max-w-min mx-auto">
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Home</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                <li className="row-span-3">
-                  <NavigationMenuLink asChild>
-                    <Link
-                      className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                      href="#"
-                    >
-                      Admin UI
-                      <div className="mb-2 mt-2 text-sm font-medium">
-                        DashCode Admin Template
-                      </div>
-                      <p className="text-sm leading-tight text-muted-foreground">
-                        Beautifully designed components that you can copy and
-                        paste into your apps. Accessible. Customizable. Open
-                        Source.
-                      </p>
-                    </Link>
-                  </NavigationMenuLink>
-                </li>
-                <ListItem href="#" title="Introduction">
-                  Re-usable components built using Radix UI and Tailwind CSS.
-                </ListItem>
-                <ListItem href="#" title="Installation">
-                  How to install dependencies and structure your app.
-                </ListItem>
-                <ListItem href="#" title="Typography">
-                  Styles for headings, paragraphs, lists...etc
-                </ListItem>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                {components.map((component) => (
-                  <ListItem
-                    key={component.title}
-                    title={component.title}
-                    href={component.href}
-                  >
-                    {component.description}
-                  </ListItem>
-                ))}
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <Link href="#" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Pages
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <Link href="#" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Documentation
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-    </div>
-  )
-}
-
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <a
-          ref={ref}
-          className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className
-          )}
-          {...props}
-        >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  )
-})
-ListItem.displayName = "ListItem"
-
-export default BasicNav;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/navigation-menu/layout.tsx b/app/[locale]/(protected)/components/navigation-menu/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/navigation-menu/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/navigation-menu/page.tsx b/app/[locale]/(protected)/components/navigation-menu/page.tsx
deleted file mode 100644
index a5d1e17d..00000000
--- a/app/[locale]/(protected)/components/navigation-menu/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicNav from "./basic-nav";
-import { basicNav } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const NavPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Navigation Menu" code={basicNav}>
-        <BasicNav />
-      </Card>
-    </div>
-  );
-};
-
-export default NavPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/navigation-menu/source-code.ts b/app/[locale]/(protected)/components/navigation-menu/source-code.ts
deleted file mode 100644
index 6097111e..00000000
--- a/app/[locale]/(protected)/components/navigation-menu/source-code.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-export const basicNav=`"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import { cn } from "@/lib/utils"
-
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
-
-const components: { title: string; href: string; description: string }[] = [
-  {
-    title: "Alert Dialog",
-    href: "#",
-    description:
-      "A modal dialog that interrupts the user with important content and expects a response.",
-  },
-  {
-    title: "Hover Card",
-    href: "#",
-    description:
-      "For sighted users to preview content available behind a link.",
-  },
-  {
-    title: "Progress",
-    href: "#",
-    description:
-      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
-  },
-  {
-    title: "Scroll-area",
-    href: "#",
-    description: "Visually or semantically separates content.",
-  },
-  {
-    title: "Tabs",
-    href: "#",
-    description:
-      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
-  },
-  {
-    title: "Tooltip",
-    href: "#",
-    description:
-      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
-  },
-]
-
-const BasicNav = () => {
-  return (
-    <div className="max-w-min mx-auto">
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Home</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                <li className="row-span-3">
-                  <NavigationMenuLink asChild>
-                    <Link
-                      className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                      href="#"
-                    >
-                      Admin UI
-                      <div className="mb-2 mt-2 text-sm font-medium">
-                        DashCode Admin Template
-                      </div>
-                      <p className="text-sm leading-tight text-muted-foreground">
-                        Beautifully designed components that you can copy and
-                        paste into your apps. Accessible. Customizable. Open
-                        Source.
-                      </p>
-                    </Link>
-                  </NavigationMenuLink>
-                </li>
-                <ListItem href="#" title="Introduction">
-                  Re-usable components built using Radix UI and Tailwind CSS.
-                </ListItem>
-                <ListItem href="#" title="Installation">
-                  How to install dependencies and structure your app.
-                </ListItem>
-                <ListItem href="#" title="Typography">
-                  Styles for headings, paragraphs, lists...etc
-                </ListItem>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                {components.map((component) => (
-                  <ListItem
-                    key={component.title}
-                    title={component.title}
-                    href={component.href}
-                  >
-                    {component.description}
-                  </ListItem>
-                ))}
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <Link href="#" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Pages
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <Link href="#" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Documentation
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-    </div>
-  )
-}
-
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <a
-          ref={ref}
-          className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className
-          )}
-          {...props}
-        >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  )
-})
-ListItem.displayName = "ListItem"
-
-export default BasicNav;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/pagination/basic-pagination.tsx b/app/[locale]/(protected)/components/pagination/basic-pagination.tsx
deleted file mode 100644
index 8efbbcd8..00000000
--- a/app/[locale]/(protected)/components/pagination/basic-pagination.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const BasicPagination = () => {
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">4</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">5</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  )
-}
-
-export default BasicPagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/pagination/layout.tsx b/app/[locale]/(protected)/components/pagination/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/pagination/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/pagination/page.tsx b/app/[locale]/(protected)/components/pagination/page.tsx
deleted file mode 100644
index 79f248a7..00000000
--- a/app/[locale]/(protected)/components/pagination/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicPagination from "./basic-pagination";
-import PaginationWithElipsis from "./pagination-withelipsis";
-import PaginationWithBg from "./pagination-withbg";
-import PaginationWithText from "./pagination-withtext";
-import { basicPagination, paginationWithBackground, paginationWithElipsis, paginationWithText } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const PaginationPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic Pagination" code={basicPagination}>
-          <BasicPagination />
-        </Card>
-        <Card title="Pagination With Background" code={paginationWithBackground}>
-          <PaginationWithBg />
-        </Card>
-        <Card title="Pagination With Text" code={paginationWithText}>
-          <PaginationWithText />
-        </Card>
-        <Card
-          title="Pagination With Elipsis"
-          code={paginationWithElipsis}
-        >
-          <PaginationWithElipsis />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default PaginationPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/pagination/pagination-withbg.tsx b/app/[locale]/(protected)/components/pagination/pagination-withbg.tsx
deleted file mode 100644
index c1554b8b..00000000
--- a/app/[locale]/(protected)/components/pagination/pagination-withbg.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const PaginationWithBg = () => {
-  return (
-      <Pagination className="bg-default-200 dark:bg-default-300 px-3 py-2.5 rounded-md  w-fit">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">1</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#" isActive>2</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">3</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext href="#" />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-  )
-}
-
-export default PaginationWithBg;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/pagination/pagination-withelipsis.tsx b/app/[locale]/(protected)/components/pagination/pagination-withelipsis.tsx
deleted file mode 100644
index 05aea26e..00000000
--- a/app/[locale]/(protected)/components/pagination/pagination-withelipsis.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const PaginationWithElipsis = () => {
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  )
-}
-
-export default PaginationWithElipsis;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/pagination/pagination-withtext.tsx b/app/[locale]/(protected)/components/pagination/pagination-withtext.tsx
deleted file mode 100644
index 5bb1ceb0..00000000
--- a/app/[locale]/(protected)/components/pagination/pagination-withtext.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const PaginationWithText = () => {
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious  href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext  href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  )
-}
-
-export default PaginationWithText;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/pagination/source-code.ts b/app/[locale]/(protected)/components/pagination/source-code.ts
deleted file mode 100644
index 2f7f7ad7..00000000
--- a/app/[locale]/(protected)/components/pagination/source-code.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-export const basicPagination=`import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const BasicPagination = () => {
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">4</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">5</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  )
-}
-
-export default BasicPagination;`
-
-export const paginationWithBackground=`import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const PaginationWithBg = () => {
-  return (
-      <Pagination className="bg-default-200 px-3 py-2.5 rounded-md  w-fit">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">1</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#" isActive>2</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">3</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext href="#" />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-  )
-}
-
-export default PaginationWithBg;`
-
-export const paginationWithText=`import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const PaginationWithText = () => {
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious  href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext  href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  )
-}
-
-export default PaginationWithText;`
-
-export const paginationWithElipsis=`import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const PaginationWithElipsis = () => {
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  )
-}
-
-export default PaginationWithElipsis;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/popover/basic-popover.tsx b/app/[locale]/(protected)/components/popover/basic-popover.tsx
deleted file mode 100644
index bba9c2b8..00000000
--- a/app/[locale]/(protected)/components/popover/basic-popover.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-
-const BasicPopover = () => {
-  return (
-    <div className="flex flex-wrap gap-2">
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button className="hover:ring-0 hover:ring-transparent">Open Popover</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button className="hover:ring-0 hover:ring-transparent">Open With Arrow</Button>
-        </PopoverTrigger>
-        <PopoverContent className="p-0 border-none rounded-md">
-          <PopoverArrow className='fill-default w-3' />
-          <div
-            className='p-2.5  bg-default text-default-foreground text-sm  font-medium rounded-t-md'>
-            Create Project
-          </div>
-          <div
-            className='p-2 text-sm text-default-600'>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-            cumque?
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
-
-export default BasicPopover;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/popover/layout.tsx b/app/[locale]/(protected)/components/popover/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/popover/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/popover/page.tsx b/app/[locale]/(protected)/components/popover/page.tsx
deleted file mode 100644
index 5791b5bd..00000000
--- a/app/[locale]/(protected)/components/popover/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicPopover from "./basic-popover";
-import PlacementPopover from "./placement-popover";
-import { basicPopover, placementPopover } from "./souce-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const PopoverPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card
-          title="Basic Popover"
-          code={basicPopover}>
-          <BasicPopover />
-        </Card>
-        <Card
-          title="Placement Popover"
-          code={placementPopover}>
-          <PlacementPopover />
-        </Card>
-      </div>
-    </div >
-  );
-};
-
-export default PopoverPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/popover/placement-popover.tsx b/app/[locale]/(protected)/components/popover/placement-popover.tsx
deleted file mode 100644
index 222eb518..00000000
--- a/app/[locale]/(protected)/components/popover/placement-popover.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-
-const PlacementPopover = () => {
-  return (
-    <div className="flex flex-wrap gap-2">
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Top</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="top"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Right</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="right"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Bottom</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="bottom"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Left</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="left"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-    </div>
-  );
-};
-
-export default PlacementPopover;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/popover/souce-code.ts b/app/[locale]/(protected)/components/popover/souce-code.ts
deleted file mode 100644
index c2873a07..00000000
--- a/app/[locale]/(protected)/components/popover/souce-code.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-export const basicPopover=`import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-
-const BasicPopover = () => {
-  return (
-    <div className="flex flex-wrap gap-2">
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button className="hover:ring-0 hover:ring-transparent">Open Popover</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button className="hover:ring-0 hover:ring-transparent">Open With Arrow</Button>
-        </PopoverTrigger>
-        <PopoverContent className="p-0 border-none rounded-md">
-          <PopoverArrow className='fill-default w-3' />
-          <div
-            className='p-2.5  bg-default text-default-foreground text-sm  font-medium rounded-t-md'>
-            Create Project
-          </div>
-          <div
-            className='p-2 text-sm text-default-600'>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-            cumque?
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
-
-export default BasicPopover;`
-
-export const placementPopover=`import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-
-const PlacementPopover = () => {
-  return (
-    <div className="flex flex-wrap gap-2">
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Top</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="top"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Right</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="right"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Bottom</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="bottom"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Open Left</Button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="left"
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
-          <Card>
-            <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
-            </CardContent>
-          </Card>
-        </PopoverContent>
-      </Popover>
-
-    </div>
-  );
-};
-
-export default PlacementPopover;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/animate-striped.tsx b/app/[locale]/(protected)/components/progress/animate-striped.tsx
deleted file mode 100644
index d62fe15f..00000000
--- a/app/[locale]/(protected)/components/progress/animate-striped.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-import { Progress } from "@/components/ui/progress";
-
-const AnimatedStriped = () => {
-
-  return (
-    <div className="space-y-4">
-      <Progress value={30}  isStripe isAnimate/>
-      <Progress value={30} color="primary" isStripe isAnimate/>
-      <Progress value={40} color="secondary" isStripe isAnimate />
-      <Progress value={80} color="destructive" isStripe isAnimate />
-      <Progress value={60} color="warning" isStripe isAnimate />
-      <Progress value={70} color="info" isStripe isAnimate />
-      <Progress value={20} color="success" isStripe isAnimate />
-    </div>
-  );
-};
-
-export default AnimatedStriped;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/basic-progress.tsx b/app/[locale]/(protected)/components/progress/basic-progress.tsx
deleted file mode 100644
index 6f4c90a4..00000000
--- a/app/[locale]/(protected)/components/progress/basic-progress.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Progress } from "@/components/ui/progress";
-
-const BasicProgress = () => {
-  return (
-    <div className="space-y-4">
-      <Progress value={33} />
-      <Progress value={80} />
-      <Progress value={50} />
-      <Progress value={70} />
-    </div>
-  );
-};
-
-export default BasicProgress;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/color-progress.tsx b/app/[locale]/(protected)/components/progress/color-progress.tsx
deleted file mode 100644
index 43b1fd71..00000000
--- a/app/[locale]/(protected)/components/progress/color-progress.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-import { Progress } from "@/components/ui/progress";
-
-const ColorProgress = () => {
-
-  return (
-    <div className="space-y-4">
-      <Progress value={30}  />
-      <Progress value={40} color="primary"/>
-      <Progress value={40} color="secondary"/>
-      <Progress value={80} color="destructive" />
-      <Progress value={60} color="warning" />
-      <Progress value={70} color="info" />
-      <Progress value={20} color="success" />
-    </div>
-  );
-};
-
-export default ColorProgress;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/layout.tsx b/app/[locale]/(protected)/components/progress/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/progress/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/progress/page.tsx b/app/[locale]/(protected)/components/progress/page.tsx
deleted file mode 100644
index 41ae1023..00000000
--- a/app/[locale]/(protected)/components/progress/page.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-import Card from "@/components/code-snippet";
-import BasicProgress from "./basic-progress";
-import ColorProgress from "./color-progress";
-import SizesProgress from "./sizes-progress";
-import StripedProgress from "./striped-progress";
-import AnimatedStriped from "./animate-striped";
-import ProgressWithValue from "./progress-withvalue";
-import { animateStriped, basicProgress, colorProgress, progressWithValue, sizesProgress, stripedProgress } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const ProgressPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card title="Default Progress" code={basicProgress}>
-          <BasicProgress />
-        </Card>
-        <Card title="Color Progress" code={colorProgress}>
-          <ColorProgress />
-        </Card>
-        <Card title="Sizes Progress" code={sizesProgress}>
-          <SizesProgress />
-        </Card>
-        <Card title="Striped Progress" code={stripedProgress}>
-          <StripedProgress />
-        </Card>
-        <Card title="Animated Striped Progress" code={animateStriped}>
-          <AnimatedStriped />
-        </Card>
-        <Card title="Progress With Value" code={progressWithValue}>
-          <ProgressWithValue />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default ProgressPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/progress-withvalue.tsx b/app/[locale]/(protected)/components/progress/progress-withvalue.tsx
deleted file mode 100644
index af546f33..00000000
--- a/app/[locale]/(protected)/components/progress/progress-withvalue.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client"
-import { Progress } from "@/components/ui/progress";
-import { useState } from "react";
-
-const ProgressWithValue = () => {
-  const [value1, setValue1] = useState<number>(80);
-  const [value2, setValue2] = useState<number>(70);
-  return (
-    <div className="space-y-4">
-      <div className="pb-3">
-        <span className="text-base text-default-700 font-medium">{value1}%</span>
-        <Progress value={value1} />
-      </div>
-      <Progress value={80} size="lg" color="warning" showValue />
-      <div>
-        <span className="text-base text-default-700 font-medium block text-end">{value2}%</span>
-        <Progress value={value2} color="primary" />
-      </div>
-    </div>
-  );
-};
-
-export default ProgressWithValue;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/sizes-progress.tsx b/app/[locale]/(protected)/components/progress/sizes-progress.tsx
deleted file mode 100644
index c4471a7b..00000000
--- a/app/[locale]/(protected)/components/progress/sizes-progress.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Progress } from "@/components/ui/progress";
-
-const SizesProgress = () => {
-  return (
-    <div className="space-y-4">
-      <Progress value={30} size="sm" color="primary" />
-      <Progress value={40} color="warning" />
-      <Progress value={70} size="md" color="success" />
-      <Progress value={90} size="lg" color="destructive" />
-    </div>
-  );
-};
-
-export default SizesProgress;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/source-code.ts b/app/[locale]/(protected)/components/progress/source-code.ts
deleted file mode 100644
index 4c9c3337..00000000
--- a/app/[locale]/(protected)/components/progress/source-code.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-export const basicProgress=`import { Progress } from "@/components/ui/progress";
-
-const BasicProgress = () => {
-  return (
-    <div className="space-y-4">
-      <Progress value={33} />
-      <Progress value={80} />
-      <Progress value={50} />
-      <Progress value={70} />
-    </div>
-  );
-};
-
-export default BasicProgress;`
-
-export const colorProgress=`
-import { Progress } from "@/components/ui/progress";
-
-const ColorProgress = () => {
-
-  return (
-    <div className="space-y-4">
-      <Progress value={30}  />
-      <Progress value={40} color="primary"/>
-      <Progress value={40} color="secondary"/>
-      <Progress value={80} color="destructive" />
-      <Progress value={60} color="warning" />
-      <Progress value={70} color="info" />
-      <Progress value={20} color="success" />
-    </div>
-  );
-};
-
-export default ColorProgress;`
-
-export const sizesProgress=`import { Progress } from "@/components/ui/progress";
-
-const SizesProgress = () => {
-  return (
-    <div className="space-y-4">
-      <Progress value={30} size="sm" color="primary" />
-      <Progress value={40} color="warning" />
-      <Progress value={70} size="md" color="success" />
-      <Progress value={90} size="lg" color="destructive" />
-    </div>
-  );
-};
-
-export default SizesProgress;`
-
-export const stripedProgress=`
-import { Progress } from "@/components/ui/progress";
-
-const StripedProgress = () => {
-
-  return (
-    <div className="space-y-4">
-      <Progress value={60} isStripe />
-      <Progress value={30} color="primary" isStripe />
-      <Progress value={40} color="secondary" isStripe />
-      <Progress value={80} color="destructive" isStripe />
-      <Progress value={60} color="warning" isStripe />
-      <Progress value={70} color="info" isStripe />
-      <Progress value={20} color="success" isStripe />
-    </div>
-  );
-};
-
-export default StripedProgress;`
-
-export const animateStriped=`
-import { Progress } from "@/components/ui/progress";
-
-const AnimatedStriped = () => {
-
-  return (
-    <div className="space-y-4">
-      <Progress value={30}  isStripe isAnimate/>
-      <Progress value={30} color="primary" isStripe isAnimate/>
-      <Progress value={40} color="secondary" isStripe isAnimate />
-      <Progress value={80} color="destructive" isStripe isAnimate />
-      <Progress value={60} color="warning" isStripe isAnimate />
-      <Progress value={70} color="info" isStripe isAnimate />
-      <Progress value={20} color="success" isStripe isAnimate />
-    </div>
-  );
-};
-
-export default AnimatedStriped;`
-
-export const progressWithValue=`"use client"
-import { Progress } from "@/components/ui/progress";
-import { useState } from "react";
-
-const ProgressWithValue = () => {
-  const [value1, setValue1] = useState<number>(80);
-  const [value2, setValue2] = useState<number>(70);
-  return (
-    <div className="space-y-4">
-      <div className="pb-3">
-        <span className="text-base text-default-700 font-medium">{value1}%</span>
-        <Progress value={value1} />
-      </div>
-      <Progress value={80} size="lg" color="warning" showValue />
-      <div>
-        <span className="text-base text-default-700 font-medium block text-end">{value2}%</span>
-        <Progress value={value2} color="primary" />
-      </div>
-    </div>
-  );
-};
-
-export default ProgressWithValue;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/progress/striped-progress.tsx b/app/[locale]/(protected)/components/progress/striped-progress.tsx
deleted file mode 100644
index 1213bd6c..00000000
--- a/app/[locale]/(protected)/components/progress/striped-progress.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-import { Progress } from "@/components/ui/progress";
-
-const StripedProgress = () => {
-
-  return (
-    <div className="space-y-4">
-      <Progress value={60} isStripe />
-      <Progress value={30} color="primary" isStripe />
-      <Progress value={40} color="secondary" isStripe />
-      <Progress value={80} color="destructive" isStripe />
-      <Progress value={60} color="warning" isStripe />
-      <Progress value={70} color="info" isStripe />
-      <Progress value={20} color="success" isStripe />
-    </div>
-  );
-};
-
-export default StripedProgress;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/resizable/basic-resizable.tsx b/app/[locale]/(protected)/components/resizable/basic-resizable.tsx
deleted file mode 100644
index df98d3e7..00000000
--- a/app/[locale]/(protected)/components/resizable/basic-resizable.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable"
-
-const BasicResizable = () => {
-  return (
-    <div className="flex justify-center">
-      <ResizablePanelGroup
-        direction="horizontal"
-        className="min-h-[300px] max-w-xl rounded-lg border border-default-200 dark:border-default-300"
-      >
-        <ResizablePanel defaultSize={25}>
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Sidebar</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle withHandle className="border border-default-200 dark:border-default-300"/>
-        <ResizablePanel defaultSize={75}>
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Content</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  )
-}
-export default BasicResizable;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/resizable/layout.tsx b/app/[locale]/(protected)/components/resizable/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/resizable/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/resizable/page.tsx b/app/[locale]/(protected)/components/resizable/page.tsx
deleted file mode 100644
index a18bb3f6..00000000
--- a/app/[locale]/(protected)/components/resizable/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicResizable from "./basic-resizable";
-import { basicResizable } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const ResizablePage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Resizable" code={basicResizable}>
-        <BasicResizable />
-      </Card>
-    </div>
-  );
-};
-
-export default ResizablePage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/resizable/source-code.ts b/app/[locale]/(protected)/components/resizable/source-code.ts
deleted file mode 100644
index 70c3a4a2..00000000
--- a/app/[locale]/(protected)/components/resizable/source-code.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export const basicResizable=`import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable"
-
-const BasicResizable = () => {
-  return (
-    <div className="flex justify-center">
-      <ResizablePanelGroup
-        direction="horizontal"
-        className="min-h-[300px] max-w-xl rounded-lg border"
-      >
-        <ResizablePanel defaultSize={25}>
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Sidebar</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={75}>
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Content</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  )
-}
-export default BasicResizable;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/scroll-area/basic-scroll.tsx b/app/[locale]/(protected)/components/scroll-area/basic-scroll.tsx
deleted file mode 100644
index ff0a2e94..00000000
--- a/app/[locale]/(protected)/components/scroll-area/basic-scroll.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from "react"
-
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
-
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`
-)
-
-const BasicScroll = () => {
-  return (
-    <div className="flex justify-center">
-      <ScrollArea className="h-72 w-full max-w-sm rounded-md border border-default-200 dark:border-default-300">
-        <div className="p-4">
-          <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-          {tags.map((tag) => (
-            <>
-              <div key={tag} className="text-sm">
-                {tag}
-              </div>
-              <Separator className="my-2" />
-            </>
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  )
-}
-
-export default BasicScroll;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/scroll-area/layout.tsx b/app/[locale]/(protected)/components/scroll-area/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/scroll-area/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/scroll-area/page.tsx b/app/[locale]/(protected)/components/scroll-area/page.tsx
deleted file mode 100644
index 4901a88f..00000000
--- a/app/[locale]/(protected)/components/scroll-area/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-
-import Card from "@/components/code-snippet";
-import BasicScroll from "./basic-scroll";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const ScrollAreaPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Basic Scroll" code="">
-        <BasicScroll />
-      </Card>
-    </div>
-  );
-};
-
-export default ScrollAreaPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/separator/basic-separator.tsx b/app/[locale]/(protected)/components/separator/basic-separator.tsx
deleted file mode 100644
index 549a5329..00000000
--- a/app/[locale]/(protected)/components/separator/basic-separator.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Separator } from "@/components/ui/separator"
-
-const BasicSeparator = () => {
-  return (
-    <div className="max-w-sm mx-auto">
-      <div className="space-y-1">
-        <h4 className="text-sm font-medium leading-none">Dashcode</h4>
-        <p className="text-sm text-muted-foreground">
-          Reusable Admin Ui Template
-        </p>
-      </div>
-      <Separator className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-sm">
-        <div>Blog</div>
-        <Separator orientation="vertical" />
-        <div>Docs</div>
-        <Separator orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </div>
-  )
-}
-
-export default BasicSeparator;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/separator/layout.tsx b/app/[locale]/(protected)/components/separator/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/separator/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/separator/page.tsx b/app/[locale]/(protected)/components/separator/page.tsx
deleted file mode 100644
index fc88cf57..00000000
--- a/app/[locale]/(protected)/components/separator/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicSeparator from "./basic-separator";
-import { basicSeparator } from "./souce-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const SeparatorPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Separator" code={basicSeparator}>
-        <BasicSeparator />
-      </Card>
-    </div>
-  );
-};
-
-export default SeparatorPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/separator/souce-code.ts b/app/[locale]/(protected)/components/separator/souce-code.ts
deleted file mode 100644
index 198cc351..00000000
--- a/app/[locale]/(protected)/components/separator/souce-code.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const  basicSeparator=`import { Separator } from "@/components/ui/separator"
-
-const BasicSeparator = () => {
-  return (
-    <div className="max-w-sm mx-auto">
-      <div className="space-y-1">
-        <h4 className="text-sm font-medium leading-none">Dashcode</h4>
-        <p className="text-sm text-muted-foreground">
-          Reusable Admin Ui Template
-        </p>
-      </div>
-      <Separator className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-sm">
-        <div>Blog</div>
-        <Separator orientation="vertical" />
-        <div>Docs</div>
-        <Separator orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </div>
-  )
-}
-
-export default BasicSeparator;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/sheet/basic-sheet.tsx b/app/[locale]/(protected)/components/sheet/basic-sheet.tsx
deleted file mode 100644
index dd84affb..00000000
--- a/app/[locale]/(protected)/components/sheet/basic-sheet.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-const BasicSheet = () => {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Edit profile</SheetTitle>
-          <SheetDescription>
-            Make changes to your profile here. Click save when you are done.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="space-y-4 py-4">
-          <div className="flex items-center gap-4">
-            <Label htmlFor="name" className="min-w-20"> Name</Label>
-            <Input id="name" placeholder="Pedro Duarte" />
-          </div>
-          <div className="flex items-center gap-4">
-          <Label htmlFor="username" className="min-w-20"> Username</Label>
-          <Input id="username" placeholder="@peduarte" />
-          </div>
-        </div>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button type="submit">Save changes</Button>
-          </SheetClose>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-export default BasicSheet;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/sheet/layout.tsx b/app/[locale]/(protected)/components/sheet/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/sheet/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/sheet/page.tsx b/app/[locale]/(protected)/components/sheet/page.tsx
deleted file mode 100644
index ee90fd47..00000000
--- a/app/[locale]/(protected)/components/sheet/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicSheet from "./basic-sheet";
-import SheetSide from "./sheet-side";
-import { basicSheet, sheetPosition } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const SheetPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic Sheet" code={basicSheet}>
-          <BasicSheet />
-        </Card>
-        <Card title="Sheet Position" code={sheetPosition}>
-          <SheetSide />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default SheetPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/sheet/sheet-side.tsx b/app/[locale]/(protected)/components/sheet/sheet-side.tsx
deleted file mode 100644
index d75eaa24..00000000
--- a/app/[locale]/(protected)/components/sheet/sheet-side.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-
-const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
-
-type SheetSide = (typeof SHEET_SIDES)[number]
-
-const SheetSide = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-      {SHEET_SIDES.map((side) => (
-        <Sheet key={side}>
-          <SheetTrigger asChild>
-            <Button variant="outline" className="capitalize">Open {side}</Button>
-          </SheetTrigger>
-          <SheetContent side={side}>
-            <SheetHeader>
-              <SheetTitle>Edit profile</SheetTitle>
-              <SheetDescription>
-                Make changes to your profile here. Click save when you are done.
-              </SheetDescription>
-            </SheetHeader>
-            <div className="space-y-4 py-4">
-              <div className="flex items-center gap-4">
-                <Label htmlFor="name" className="min-w-20"> Name</Label>
-                <Input id="name" placeholder="Pedro Duarte" />
-              </div>
-              <div className="flex items-center gap-4">
-                <Label htmlFor="username" className="min-w-20"> Username</Label>
-                <Input id="username" placeholder="@peduarte" />
-              </div>
-            </div>
-            <SheetFooter>
-              <SheetClose asChild>
-                <Button type="submit">Save changes</Button>
-              </SheetClose>
-            </SheetFooter>
-          </SheetContent>
-        </Sheet>
-      ))}
-    </div>
-  )
-}
-
-export default SheetSide;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/sheet/source-code.ts b/app/[locale]/(protected)/components/sheet/source-code.ts
deleted file mode 100644
index cf40a3fb..00000000
--- a/app/[locale]/(protected)/components/sheet/source-code.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-export const basicSheet=`import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-const BasicSheet = () => {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Edit profile</SheetTitle>
-          <SheetDescription>
-            Make changes to your profile here. Click save when you are done.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
-              Name
-            </Label>
-            <Input id="name" value="Pedro Duarte" className="col-span-3" />
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
-              Username
-            </Label>
-            <Input id="username" value="@peduarte" className="col-span-3" />
-          </div>
-        </div>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button type="submit">Save changes</Button>
-          </SheetClose>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-export default BasicSheet;`
-
-export const sheetPosition=`"use client"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-
-const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
-
-type SheetSide = (typeof SHEET_SIDES)[number]
-
-const SheetSide = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-      {SHEET_SIDES.map((side) => (
-        <Sheet key={side}>
-          <SheetTrigger asChild>
-            <Button variant="outline" className="capitalize">Open {side}</Button>
-          </SheetTrigger>
-          <SheetContent side={side}>
-            <SheetHeader>
-              <SheetTitle>Edit profile</SheetTitle>
-              <SheetDescription>
-                Make changes to your profile here. Click save when you are done.
-              </SheetDescription>
-            </SheetHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="name" className="text-right">
-                  Name
-                </Label>
-                <Input id="name" value="Pedro Duarte" className="col-span-3" />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="username" className="text-right">
-                  Username
-                </Label>
-                <Input id="username" value="@peduarte" className="col-span-3" />
-              </div>
-            </div>
-            <SheetFooter>
-              <SheetClose asChild>
-                <Button type="submit">Save changes</Button>
-              </SheetClose>
-            </SheetFooter>
-          </SheetContent>
-        </Sheet>
-      ))}
-    </div>
-  )
-}
-
-export default SheetSide;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/skeleton/basic-skeleton.tsx b/app/[locale]/(protected)/components/skeleton/basic-skeleton.tsx
deleted file mode 100644
index 14512e9d..00000000
--- a/app/[locale]/(protected)/components/skeleton/basic-skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-const BasiSkeleton = () => {
-  return (
-    <div className="flex items-center gap-4 max-w-sm mx-auto">
-      <Skeleton className="h-12 w-12 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  );
-};
-
-export default BasiSkeleton;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/skeleton/layout.tsx b/app/[locale]/(protected)/components/skeleton/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/skeleton/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/skeleton/page.tsx b/app/[locale]/(protected)/components/skeleton/page.tsx
deleted file mode 100644
index d8b75877..00000000
--- a/app/[locale]/(protected)/components/skeleton/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasiSkeleton from "./basic-skeleton";
-import SkeletonCard from "./skeleton-card";
-import { basicSkeleton, skeletonCard } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const SkeletonPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Skeleton" code={basicSkeleton}>
-          <BasiSkeleton />
-        </Card>
-        <Card title="Skeleton Card" code={skeletonCard}>
-          <SkeletonCard />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default SkeletonPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/skeleton/skeleton-card.tsx b/app/[locale]/(protected)/components/skeleton/skeleton-card.tsx
deleted file mode 100644
index 68941523..00000000
--- a/app/[locale]/(protected)/components/skeleton/skeleton-card.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton"
-
-const SkeletonCard = () => {
-  return (
-    <div className="flex flex-col space-y-3 max-w-sm mx-auto">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  )
-}
-export default SkeletonCard;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/skeleton/source-code.ts b/app/[locale]/(protected)/components/skeleton/source-code.ts
deleted file mode 100644
index 961b39ec..00000000
--- a/app/[locale]/(protected)/components/skeleton/source-code.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const basicSkeleton=`import { Skeleton } from "@/components/ui/skeleton";
-
-const BasiSkeleton = () => {
-  return (
-    <div className="flex items-center gap-4 max-w-sm mx-auto">
-      <Skeleton className="h-12 w-12 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  );
-};
-
-export default BasiSkeleton;`
-
-export const skeletonCard=`import { Skeleton } from "@/components/ui/skeleton"
-
-const SkeletonCard = () => {
-  return (
-    <div className="flex flex-col space-y-3 max-w-sm mx-auto">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  )
-}
-export default SkeletonCard;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/sonner/basic-sonner.tsx b/app/[locale]/(protected)/components/sonner/basic-sonner.tsx
deleted file mode 100644
index d5b1b306..00000000
--- a/app/[locale]/(protected)/components/sonner/basic-sonner.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-
-"use client"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
-
-const BasicSonner = () => {
-  return (
-    <Button
-      variant="outline"
-      onClick={() =>
-        toast("Event has been created", {
-          description: "Sunday, December 03, 2023 at 9:00 AM",
-          action: {
-            label: "Undo",
-            onClick: () => console.log("Undo"),
-          },
-        })
-      }
-    >
-      Show Toast
-    </Button>
-  )
-}
-export default BasicSonner;
-
diff --git a/app/[locale]/(protected)/components/sonner/layout.tsx b/app/[locale]/(protected)/components/sonner/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/sonner/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/sonner/page.tsx b/app/[locale]/(protected)/components/sonner/page.tsx
deleted file mode 100644
index ba476784..00000000
--- a/app/[locale]/(protected)/components/sonner/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicSonner from "./basic-sonner";
-import { basicSonner } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const SoonerPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Basic Sooner" code={basicSonner}>
-        <BasicSonner />
-      </Card>
-    </div>
-  );
-};
-
-export default SoonerPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/sonner/source-code.ts b/app/[locale]/(protected)/components/sonner/source-code.ts
deleted file mode 100644
index a8003a5f..00000000
--- a/app/[locale]/(protected)/components/sonner/source-code.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export const basicSonner=`
-"use client"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
-
-const BasicSonner = () => {
-  return (
-    <Button
-      variant="outline"
-      onClick={() =>
-        toast("Event has been created", {
-          description: "Sunday, December 03, 2023 at 9:00 AM",
-          action: {
-            label: "Undo",
-            onClick: () => console.log("Undo"),
-          },
-        })
-      }
-    >
-      Show Toast
-    </Button>
-  )
-}
-export default BasicSonner;
-
-`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tabs/basic-tab.tsx b/app/[locale]/(protected)/components/tabs/basic-tab.tsx
deleted file mode 100644
index a7e05f2e..00000000
--- a/app/[locale]/(protected)/components/tabs/basic-tab.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const BasicTab = () => {
-  return (
-    <Tabs defaultValue="home" className="w-full">
-      <TabsList>
-        <TabsTrigger
-          value="home"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Home</TabsTrigger>
-        <TabsTrigger
-          value="profile"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Profile</TabsTrigger>
-        <TabsTrigger
-          value="messages"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Messages</TabsTrigger>
-        <TabsTrigger
-          value="settings"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-      </TabsContent>
-      <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-      </TabsContent>
-      <TabsContent value="messages">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-      </TabsContent>
-      <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-export default BasicTab;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tabs/justify-tab.tsx b/app/[locale]/(protected)/components/tabs/justify-tab.tsx
deleted file mode 100644
index edfe560c..00000000
--- a/app/[locale]/(protected)/components/tabs/justify-tab.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const JustifyTab = () => {
-  return (
-    <Tabs defaultValue="home" className="w-full">
-      <TabsList className="flex-wrap">
-        <TabsTrigger
-          value="home"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Home</TabsTrigger>
-        <TabsTrigger
-          value="profile"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Profile</TabsTrigger>
-        <TabsTrigger
-          value="messages"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Messages</TabsTrigger>
-        <TabsTrigger
-          value="settings"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-      </TabsContent>
-      <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-      </TabsContent>
-      <TabsContent value="messages">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-      </TabsContent>
-      <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-export default JustifyTab;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tabs/layout.tsx b/app/[locale]/(protected)/components/tabs/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/tabs/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/tabs/page.tsx b/app/[locale]/(protected)/components/tabs/page.tsx
deleted file mode 100644
index cedc8803..00000000
--- a/app/[locale]/(protected)/components/tabs/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-
-import Card from "@/components/code-snippet";
-import BasicTab from "./basic-tab";
-import TabsWithIcon from "./tabs-with-icon";
-import VerticalTab from "./vertical-tab";
-import JustifyTab from "./justify-tab";
-import { basicTab, justifyTab, tabsWithIcon, verticalTab } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const TabsPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card title="Default Tabs" code={basicTab}>
-          <BasicTab />
-        </Card>
-        <Card title="Tabs With Icon" code={tabsWithIcon}>
-          <TabsWithIcon />
-        </Card>
-        <Card title="Vertical Tab" code={verticalTab}>
-          <VerticalTab />
-        </Card>
-        <Card title="Justify Tabs" code={justifyTab}>
-          <JustifyTab />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default TabsPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tabs/source-code.ts b/app/[locale]/(protected)/components/tabs/source-code.ts
deleted file mode 100644
index 03529d9f..00000000
--- a/app/[locale]/(protected)/components/tabs/source-code.ts
+++ /dev/null
@@ -1,245 +0,0 @@
-export const basicTab=`
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const BasicTab = () => {
-  return (
-    <Tabs defaultValue="home" className="w-full">
-      <TabsList>
-        <TabsTrigger
-          value="home"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Home</TabsTrigger>
-        <TabsTrigger
-          value="profile"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Profile</TabsTrigger>
-        <TabsTrigger
-          value="messages"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Messages</TabsTrigger>
-        <TabsTrigger
-          value="settings"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-      </TabsContent>
-      <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-      </TabsContent>
-      <TabsContent value="messages">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-      </TabsContent>
-      <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-export default BasicTab;`
-
-export const justifyTab=`
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const JustifyTab = () => {
-  return (
-    <Tabs defaultValue="home" className="w-full">
-      <TabsList className="flex-wrap">
-        <TabsTrigger
-          value="home"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Home</TabsTrigger>
-        <TabsTrigger
-          value="profile"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Profile</TabsTrigger>
-        <TabsTrigger
-          value="messages"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Messages</TabsTrigger>
-        <TabsTrigger
-          value="settings"
-          className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-      </TabsContent>
-      <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-      </TabsContent>
-      <TabsContent value="messages">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-      </TabsContent>
-      <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-export default JustifyTab;`
-
-export const tabsWithIcon=`
-
-import { Icon } from "@/components/ui/icon";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const TabsWithIcon = () => {
-  return (
-    <Tabs defaultValue="home" className="w-full">
-      <TabsList>
-        <TabsTrigger
-          value="home"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="heroicons:home" className="h-4 w-4 me-1" />
-          Home
-        </TabsTrigger>
-        <TabsTrigger
-          value="profile"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="heroicons:user" className="h-4 w-4 me-1" />
-          Profile
-        </TabsTrigger>
-        <TabsTrigger
-          value="messages"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="heroicons:chat-bubble-left-right" className="h-4 w-4 me-1" />
-          Messages
-        </TabsTrigger>
-        <TabsTrigger
-          value="settings"
-          className="relative before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="bitcoin-icons:gear-filled" className="h-4 w-4 me-1" />
-          Settings
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-      </TabsContent>
-      <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-      </TabsContent>
-      <TabsContent value="messages">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-      </TabsContent>
-      <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-export default TabsWithIcon;`
-
-export const verticalTab=`import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const VerticalTab = () => {
-  return (
-    <Tabs defaultValue="home" >
-      <div className="grid grid-cols-12 gap-6">
-        <div className="lg:col-span-3 md:col-span-5 col-span-12">
-          <TabsList className="md:flex-col gap-2 flex-wrap   justify-start">
-            <TabsTrigger
-              value="home"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Home</TabsTrigger>
-            <TabsTrigger
-              value="profile"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Profile</TabsTrigger>
-            <TabsTrigger
-              value="messages"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Messages</TabsTrigger>
-            <TabsTrigger
-              value="settings"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Settings</TabsTrigger>
-          </TabsList>
-        </div>
-        <div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
-          <TabsContent value="home" className="mt-0">
-            <strong>Home Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. 
-            Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-          </TabsContent>
-          <TabsContent value="profile" className="mt-0" >
-            <strong>Profile Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-             Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-          </TabsContent>
-          <TabsContent value="messages" className="mt-0" >
-            <strong>Messages Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-          </TabsContent>
-          <TabsContent value="settings" className="mt-0">
-            <strong>Settings Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-             Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-             Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-          </TabsContent>
-        </div>
-      </div>
-    </Tabs>
-
-  );
-};
-
-export default VerticalTab;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tabs/tabs-with-icon.tsx b/app/[locale]/(protected)/components/tabs/tabs-with-icon.tsx
deleted file mode 100644
index fafe08f2..00000000
--- a/app/[locale]/(protected)/components/tabs/tabs-with-icon.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-import { Icon } from "@/components/ui/icon";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const TabsWithIcon = () => {
-  return (
-    <Tabs defaultValue="home" className="w-full">
-      <TabsList>
-        <TabsTrigger
-          value="home"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="heroicons:home" className="h-4 w-4 me-1" />
-          Home
-        </TabsTrigger>
-        <TabsTrigger
-          value="profile"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="heroicons:user" className="h-4 w-4 me-1" />
-          Profile
-        </TabsTrigger>
-        <TabsTrigger
-          value="messages"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="heroicons:chat-bubble-left-right" className="h-4 w-4 me-1" />
-          Messages
-        </TabsTrigger>
-        <TabsTrigger
-          value="settings"
-          className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >
-          <Icon icon="bitcoin-icons:gear-filled" className="h-4 w-4 me-1" />
-          Settings
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-      </TabsContent>
-      <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-      </TabsContent>
-      <TabsContent value="messages">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-      </TabsContent>
-      <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-export default TabsWithIcon;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tabs/vertical-tab.tsx b/app/[locale]/(protected)/components/tabs/vertical-tab.tsx
deleted file mode 100644
index d4816c18..00000000
--- a/app/[locale]/(protected)/components/tabs/vertical-tab.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
-
-const VerticalTab = () => {
-  return (
-    <Tabs defaultValue="home" >
-      <div className="grid grid-cols-12 gap-6">
-        <div className="lg:col-span-3 md:col-span-5 col-span-12">
-          <TabsList className="md:flex-col gap-2 flex-wrap   justify-start">
-            <TabsTrigger
-              value="home"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Home</TabsTrigger>
-            <TabsTrigger
-              value="profile"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Profile</TabsTrigger>
-            <TabsTrigger
-              value="messages"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Messages</TabsTrigger>
-            <TabsTrigger
-              value="settings"
-              className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Settings</TabsTrigger>
-          </TabsList>
-        </div>
-        <div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
-          <TabsContent value="home" className="mt-0">
-            <strong>Home Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. 
-            Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-          </TabsContent>
-          <TabsContent value="profile" className="mt-0" >
-            <strong>Profile Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-             Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-          </TabsContent>
-          <TabsContent value="messages" className="mt-0" >
-            <strong>Messages Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-          </TabsContent>
-          <TabsContent value="settings" className="mt-0">
-            <strong>Settings Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-             Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-             Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-          </TabsContent>
-        </div>
-      </div>
-    </Tabs>
-
-  );
-};
-
-export default VerticalTab;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toast/basic-toast.tsx b/app/[locale]/(protected)/components/toast/basic-toast.tsx
deleted file mode 100644
index a4eaf824..00000000
--- a/app/[locale]/(protected)/components/toast/basic-toast.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-
-"use client"
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-const BasicToast = () => {
-  const { toast } = useToast()
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          title: "Scheduled: Catch up ",
-          description: "Friday, February 10, 2023 at 5:57 PM",
-          action: (
-            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
-          ),
-        })
-      }}
-    >
-      Add to calendar
-    </Button>
-  )
-}
-export default BasicToast;
-
diff --git a/app/[locale]/(protected)/components/toast/layout.tsx b/app/[locale]/(protected)/components/toast/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/toast/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/toast/page.tsx b/app/[locale]/(protected)/components/toast/page.tsx
deleted file mode 100644
index 7a4d40f6..00000000
--- a/app/[locale]/(protected)/components/toast/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicToast from "./basic-toast";
-import ToastWithTitle from "./toast-with-title";
-import ToastWithAction from "./toast-with-action";
-import ToastVariant from "./toast-variant";
-import { basicToast, toastVariant, toastWithAction, toastWithTitle } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const ToastPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-        <Card title="Basic Toast" code={basicToast}>
-          <BasicToast />
-        </Card>
-        <Card title="Toast with Title" code={toastWithTitle}>
-          <ToastWithTitle />
-        </Card>
-        <Card title="Toast with Action" code={toastWithAction}>
-          <ToastWithAction />
-        </Card>
-        <Card title="Toast Variant" code={toastVariant}>
-          <ToastVariant />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default ToastPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toast/source-code.ts b/app/[locale]/(protected)/components/toast/source-code.ts
deleted file mode 100644
index 9c7244c0..00000000
--- a/app/[locale]/(protected)/components/toast/source-code.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-export const basicToast=`
-"use client"
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-const BasicToast = () => {
-  const { toast } = useToast()
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          title: "Scheduled: Catch up ",
-          description: "Friday, February 10, 2023 at 5:57 PM",
-          action: (
-            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
-          ),
-        })
-      }}
-    >
-      Add to calendar
-    </Button>
-  )
-}
-export default BasicToast;`
-
-export const toastWithTitle=`"use client"
-
-import { Button } from "@/components/ui/button"
-import { useToast } from "@/components/ui/use-toast"
-
-const ToastWithTitle = () => {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          title: "Uh oh! Something went wrong.",
-          description: "There was a problem with your request.",
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}
-
-export default ToastWithTitle;`
-
-export const toastWithAction=`"use client"
-
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-const ToastWithAction = () => {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          title: "Uh oh! Something went wrong.",
-          description: "There was a problem with your request.",
-          action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}
-export default ToastWithAction;`
-
-export const toastVariant=`"use client"
-
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-const ToastVariant = () => {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          variant: "destructive",
-          title: "Uh oh! Something went wrong.",
-          description: "There was a problem with your request.",
-          action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}
-
-export default ToastVariant;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toast/toast-variant.tsx b/app/[locale]/(protected)/components/toast/toast-variant.tsx
deleted file mode 100644
index 90db750b..00000000
--- a/app/[locale]/(protected)/components/toast/toast-variant.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-const ToastVariant = () => {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          variant: "destructive",
-          title: "Uh oh! Something went wrong.",
-          description: "There was a problem with your request.",
-          action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}
-
-export default ToastVariant;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toast/toast-with-action.tsx b/app/[locale]/(protected)/components/toast/toast-with-action.tsx
deleted file mode 100644
index 1315d18c..00000000
--- a/app/[locale]/(protected)/components/toast/toast-with-action.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-const ToastWithAction = () => {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          title: "Uh oh! Something went wrong.",
-          description: "There was a problem with your request.",
-          action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}
-export default ToastWithAction;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toast/toast-with-title.tsx b/app/[locale]/(protected)/components/toast/toast-with-title.tsx
deleted file mode 100644
index 7aedea5f..00000000
--- a/app/[locale]/(protected)/components/toast/toast-with-title.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { useToast } from "@/components/ui/use-toast"
-
-const ToastWithTitle = () => {
-  const { toast } = useToast()
-
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        toast({
-          title: "Uh oh! Something went wrong.",
-          description: "There was a problem with your request.",
-        })
-      }}
-    >
-      Show Toast
-    </Button>
-  )
-}
-
-export default ToastWithTitle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/basic-toggle.tsx b/app/[locale]/(protected)/components/toggle/basic-toggle.tsx
deleted file mode 100644
index 2f7a8fe8..00000000
--- a/app/[locale]/(protected)/components/toggle/basic-toggle.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Bold } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-
-const BasicToggle = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default BasicToggle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/disabled-toggle.tsx b/app/[locale]/(protected)/components/toggle/disabled-toggle.tsx
deleted file mode 100644
index 2079059b..00000000
--- a/app/[locale]/(protected)/components/toggle/disabled-toggle.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Underline } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-
-const DisabledToggle = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle aria-label="Toggle underline" disabled>
-        <Underline className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default DisabledToggle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/layout.tsx b/app/[locale]/(protected)/components/toggle/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/toggle/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/toggle/outline-toggle.tsx b/app/[locale]/(protected)/components/toggle/outline-toggle.tsx
deleted file mode 100644
index 0012c539..00000000
--- a/app/[locale]/(protected)/components/toggle/outline-toggle.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-
-const OutlineToggle = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle variant="outline" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default OutlineToggle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/page.tsx b/app/[locale]/(protected)/components/toggle/page.tsx
deleted file mode 100644
index 5c70be80..00000000
--- a/app/[locale]/(protected)/components/toggle/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicToggle from "./basic-toggle";
-import OutlineToggle from './outline-toggle';
-import ToggleWithText from "./toggle-with-text";
-import SizeToggle from "./size-toggle";
-import DisabledToggle from "./disabled-toggle";
-import ToggleGroups from "./toggle-groups";
-import { basicToggle, disabledToggle, outlineToggle, sizeToggle, toggleGroups, toggleWithText } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const TogglePage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-        <Card title="Basic Toggle" code={basicToggle}>
-          <BasicToggle />
-        </Card>
-        <Card title="Outline Toggle" code={outlineToggle}>
-          <OutlineToggle />
-        </Card>
-        <Card title="Toggle With Text" code={toggleWithText}>
-          <ToggleWithText />
-        </Card>
-        <Card title="Toggle Size" code={sizeToggle}>
-          <SizeToggle />
-        </Card>
-        <Card title="Disabled Toggle" code={disabledToggle}>
-          <DisabledToggle />
-        </Card>
-        <Card title="Toggle Group" code={toggleGroups}>
-          <ToggleGroups />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default TogglePage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/size-toggle.tsx b/app/[locale]/(protected)/components/toggle/size-toggle.tsx
deleted file mode 100644
index 45905897..00000000
--- a/app/[locale]/(protected)/components/toggle/size-toggle.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-const SizeToggle = () => {
-  return (
-    <div className="flex gap-5 justify-center">
-      <Toggle size="sm" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-      <Toggle aria-label="Toggle italic default">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-      <Toggle size="lg" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default SizeToggle;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/source-code.ts b/app/[locale]/(protected)/components/toggle/source-code.ts
deleted file mode 100644
index 3ce9c4ff..00000000
--- a/app/[locale]/(protected)/components/toggle/source-code.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-export const basicToggle=`import { Bold } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-
-const BasicToggle = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default BasicToggle;`
-
-export const outlineToggle=`import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-
-const OutlineToggle = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle variant="outline" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default OutlineToggle;`
-
-export const toggleWithText=`import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-const ToggleWithText = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle aria-label="Toggle italic">
-        <Italic className="mr-2 h-4 w-4" />
-        Italic
-      </Toggle>
-    </div>
-  );
-};
-
-export default ToggleWithText;`
-
-export const sizeToggle=`import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-const SizeToggle = () => {
-  return (
-    <div className="flex gap-5 justify-center">
-      <Toggle size="sm" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-      <Toggle aria-label="Toggle italic default">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-      <Toggle size="lg" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default SizeToggle;`
-
-export const disabledToggle=`import { Underline } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-
-const DisabledToggle = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle aria-label="Toggle underline" disabled>
-        <Underline className="h-4 w-4" />
-      </Toggle>
-    </div>
-  );
-};
-
-export default DisabledToggle;`
-
-export const toggleGroups=`import { Bold, Italic, Underline } from "lucide-react"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/components/ui/toggle-group"
-
-const ToggleGroups = () => {
-  return (
-    <div>
-      <ToggleGroup type="multiple">
-        <ToggleGroupItem value="bold" aria-label="Toggle bold">
-          <Bold className="h-4 w-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="italic" aria-label="Toggle italic">
-          <Italic className="h-4 w-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="underline" aria-label="Toggle underline">
-          <Underline className="h-4 w-4" />
-        </ToggleGroupItem>
-      </ToggleGroup>
-    </div>
-  );
-};
-
-export default ToggleGroups;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/toggle-groups.tsx b/app/[locale]/(protected)/components/toggle/toggle-groups.tsx
deleted file mode 100644
index addbb1dd..00000000
--- a/app/[locale]/(protected)/components/toggle/toggle-groups.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Bold, Italic, Underline } from "lucide-react"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/components/ui/toggle-group"
-
-const ToggleGroups = () => {
-  return (
-    <div>
-      <ToggleGroup type="multiple">
-        <ToggleGroupItem value="bold" aria-label="Toggle bold">
-          <Bold className="h-4 w-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="italic" aria-label="Toggle italic">
-          <Italic className="h-4 w-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="underline" aria-label="Toggle underline">
-          <Underline className="h-4 w-4" />
-        </ToggleGroupItem>
-      </ToggleGroup>
-    </div>
-  );
-};
-
-export default ToggleGroups;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/toggle/toggle-with-text.tsx b/app/[locale]/(protected)/components/toggle/toggle-with-text.tsx
deleted file mode 100644
index 67a4ee79..00000000
--- a/app/[locale]/(protected)/components/toggle/toggle-with-text.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
-const ToggleWithText = () => {
-  return (
-    <div className="flex justify-center">
-      <Toggle aria-label="Toggle italic">
-        <Italic className="mr-2 h-4 w-4" />
-        Italic
-      </Toggle>
-    </div>
-  );
-};
-
-export default ToggleWithText;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/basic-tooltip.tsx b/app/[locale]/(protected)/components/tooltip/basic-tooltip.tsx
deleted file mode 100644
index 39656729..00000000
--- a/app/[locale]/(protected)/components/tooltip/basic-tooltip.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const BasicTooltip = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline">Default</Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Default Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline" color="primary">Primary</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary">
-            <p>Primary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="secondary" variant="outline">Secondary</Button>
-          </TooltipTrigger>
-          <TooltipContent color="secondary">
-            <p>Secondary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="success" variant="outline">Success</Button>
-          </TooltipTrigger>
-          <TooltipContent color="success">
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="info" variant="outline">Info</Button>
-          </TooltipTrigger>
-          <TooltipContent color="info">
-            <p>Info Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="warning" variant="outline">Warning</Button>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>Warning Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="destructive" variant="outline">Destructive</Button>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Destructive Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default BasicTooltip;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/control-tooltip.tsx b/app/[locale]/(protected)/components/tooltip/control-tooltip.tsx
deleted file mode 100644
index 9b0396bb..00000000
--- a/app/[locale]/(protected)/components/tooltip/control-tooltip.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-
-const ControlTooltip = () => {
-    const [isOpen, setIsOpen] = useState(false);
-  return (
-    <div className="space-y-3">
-      <TooltipProvider>
-        <Tooltip open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
-          <TooltipTrigger asChild>
-            <Button color="primary" variant="outline">Hover Me</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary">
-            <p>Tooltip</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <p className="text-sm text-muted-foreground">
-        Open: {isOpen ? "true" : "false"}
-      </p>
-    </div>
-  );
-};
-
-export default ControlTooltip;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/layout.tsx b/app/[locale]/(protected)/components/tooltip/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/tooltip/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/tooltip/page.tsx b/app/[locale]/(protected)/components/tooltip/page.tsx
deleted file mode 100644
index 5a0a6fa3..00000000
--- a/app/[locale]/(protected)/components/tooltip/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Card from "@/components/code-snippet";
-import TooltipPositions from "./tooltip-positions";
-import VariousTrigger from "./various-trigger";
-import WithDelay from "./with-delay";
-import ControlTooltip from "./control-tooltip";
-import BasicTooltip from "./basic-tooltip";
-import TooltipWithArrow from "./tooltip-with-arrow";
-import { basicTooltip, controlTooltip, tooltipPosition, tooltipWithDelay, tooltupWithArrow, variousTrigger } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const TooltipPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-1  gap-6">
-        <Card title="Basic Tooltip" code={basicTooltip}>
-          <BasicTooltip />
-        </Card>
-        <Card title="Tooltip with Arrow" code={tooltupWithArrow}>
-          <TooltipWithArrow />
-        </Card>
-        <Card title="Tooltip Position" code={tooltipPosition}>
-          <TooltipPositions />
-        </Card>
-        <Card title="Various Triggers" code={variousTrigger}>
-          <VariousTrigger />
-        </Card>
-        <Card title="Delay Tooltip" code={tooltipWithDelay}>
-          <WithDelay />
-        </Card>
-        <Card title="Control Tooltip" code={controlTooltip}>
-          <ControlTooltip />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default TooltipPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/source-code.ts b/app/[locale]/(protected)/components/tooltip/source-code.ts
deleted file mode 100644
index e18edd07..00000000
--- a/app/[locale]/(protected)/components/tooltip/source-code.ts
+++ /dev/null
@@ -1,383 +0,0 @@
-export const basicTooltip=`
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const BasicTooltip = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline">Default</Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Default Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline" color="primary">Primary</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary">
-            <p>Primary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="secondary" variant="outline">Secondary</Button>
-          </TooltipTrigger>
-          <TooltipContent color="secondary">
-            <p>Secondary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="success" variant="outline">Success</Button>
-          </TooltipTrigger>
-          <TooltipContent color="success">
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="info" variant="outline">Info</Button>
-          </TooltipTrigger>
-          <TooltipContent color="info">
-            <p>Info Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="warning" variant="outline">Warning</Button>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>Warning Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="destructive" variant="outline">Destructive</Button>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Destructive Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default BasicTooltip;`
-
-export const tooltupWithArrow=`
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const TooltipWithArrow = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline">Default</Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <TooltipArrow className="fill-default w-4 h-2" />
-            <p>Default Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline" color="primary">Primary</Button>
-          </TooltipTrigger>
-          <TooltipContent   color="primary">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Primary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="secondary" variant="outline">Secondary</Button>
-          </TooltipTrigger>
-          <TooltipContent color="secondary">
-            <TooltipArrow className="fill-secondary w-4 h-2" />
-            <p>Secondary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="success" variant="outline">Success</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="success">
-            <TooltipArrow className="fill-success w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="info" variant="outline">Info</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="info">
-            <TooltipArrow className="fill-info w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="warning" variant="outline">Warning</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="warning">
-            <TooltipArrow className="fill-warning w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="destructive" variant="outline">Destructive</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="destructive">
-            <TooltipArrow className="fill-destructive w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default TooltipWithArrow;`
-
-export const tooltipPosition=`
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const TooltipPositions = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Top</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Top!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Bottom</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary" side="bottom">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Bottom!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Right</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary" side="right">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Right!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Left</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary" side="left">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Left!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
-    </div>
-  );
-};
-
-export default TooltipPositions;`
-
-export const variousTrigger=`import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-import { Copy, Scan } from "lucide-react";
-
-const VariousTrigger = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline">Button</Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Trigger Button</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button   variant="outline" size="icon">
-              <Scan className=" h-6 w-6" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Scan Now! </p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button   variant="outline" size="icon">
-              <Copy  className=" h-6 w-6"/>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Copy The Text! ... </p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default VariousTrigger;`
-
-export const tooltipWithDelay=`"use client";
-import React from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const WithDelay = () => {
-  return (
-    <div className="flex flex-wrap  gap-3">
-      <TooltipProvider delayDuration={2000}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button  variant="outline" color="info" >Delay Open (2000ms)</Button>
-          </TooltipTrigger>
-          <TooltipContent color="info">
-            <p>Tooltip Delay</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider delayDuration={1000}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button  variant="outline" color="warning">Hover Me (delay 1000ms)</Button>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>Tooltip Delay</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider >
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button  variant="outline" color="destructive">Then Hover me</Button>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Tooltip Delay</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default WithDelay;`
-
-export const controlTooltip=`"use client";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-
-const ControlTooltip = () => {
-    const [isOpen, setIsOpen] = useState(false);
-  return (
-    <div className="space-y-3">
-      <TooltipProvider>
-        <Tooltip open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
-          <TooltipTrigger asChild>
-            <Button color="primary" variant="outline">Hover Me</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary">
-            <p>Tooltip</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <p className="text-sm text-muted-foreground">
-        Open: {isOpen ? "true" : "false"}
-      </p>
-    </div>
-  );
-};
-
-export default ControlTooltip;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/tooltip-positions.tsx b/app/[locale]/(protected)/components/tooltip/tooltip-positions.tsx
deleted file mode 100644
index 663af95f..00000000
--- a/app/[locale]/(protected)/components/tooltip/tooltip-positions.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const TooltipPositions = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Top</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Top!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Bottom</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary" side="bottom">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Bottom!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Right</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary" side="right">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Right!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="soft">Tooltip Left</Button>
-          </TooltipTrigger>
-          <TooltipContent color="primary" side="left">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Tooltip On Left!</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
-    </div>
-  );
-};
-
-export default TooltipPositions;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/tooltip-with-arrow.tsx b/app/[locale]/(protected)/components/tooltip/tooltip-with-arrow.tsx
deleted file mode 100644
index b65f64e1..00000000
--- a/app/[locale]/(protected)/components/tooltip/tooltip-with-arrow.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const TooltipWithArrow = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline">Default</Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <TooltipArrow className="fill-default w-4 h-2" />
-            <p>Default Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline" color="primary">Primary</Button>
-          </TooltipTrigger>
-          <TooltipContent   color="primary">
-            <TooltipArrow className="fill-primary w-4 h-2" />
-            <p>Primary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="secondary" variant="outline">Secondary</Button>
-          </TooltipTrigger>
-          <TooltipContent color="secondary">
-            <TooltipArrow className="fill-secondary w-4 h-2" />
-            <p>Secondary Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="success" variant="outline">Success</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="success">
-            <TooltipArrow className="fill-success w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="info" variant="outline">Info</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="info">
-            <TooltipArrow className="fill-info w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="warning" variant="outline">Warning</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="warning">
-            <TooltipArrow className="fill-warning w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button color="destructive" variant="outline">Destructive</Button>
-          </TooltipTrigger>
-          <TooltipContent  color="destructive">
-            <TooltipArrow className="fill-destructive w-4 h-2" />
-            <p>Success Style</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default TooltipWithArrow;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/various-trigger.tsx b/app/[locale]/(protected)/components/tooltip/various-trigger.tsx
deleted file mode 100644
index 6407910e..00000000
--- a/app/[locale]/(protected)/components/tooltip/various-trigger.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-import { Copy, Scan } from "lucide-react";
-
-const VariousTrigger = () => {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline">Button</Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Trigger Button</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button   variant="outline" size="icon">
-              <Scan className=" h-6 w-6" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Scan Now! </p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button   variant="outline" size="icon">
-              <Copy  className=" h-6 w-6"/>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Copy The Text! ... </p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default VariousTrigger;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/tooltip/with-delay.tsx b/app/[locale]/(protected)/components/tooltip/with-delay.tsx
deleted file mode 100644
index 75b893c1..00000000
--- a/app/[locale]/(protected)/components/tooltip/with-delay.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-import React from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-
-const WithDelay = () => {
-  return (
-    <div className="flex flex-wrap  gap-3">
-      <TooltipProvider delayDuration={2000}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button  variant="outline" color="info" >Delay Open (2000ms)</Button>
-          </TooltipTrigger>
-          <TooltipContent color="info">
-            <p>Tooltip Delay</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider delayDuration={1000}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button  variant="outline" color="warning">Hover Me (delay 1000ms)</Button>
-          </TooltipTrigger>
-          <TooltipContent color="warning">
-            <p>Tooltip Delay</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <TooltipProvider >
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button  variant="outline" color="destructive">Then Hover me</Button>
-          </TooltipTrigger>
-          <TooltipContent color="destructive">
-            <p>Tooltip Delay</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default WithDelay;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/components/typography/layout.tsx b/app/[locale]/(protected)/components/typography/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/components/typography/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/components/typography/page.tsx b/app/[locale]/(protected)/components/typography/page.tsx
deleted file mode 100644
index 5f494989..00000000
--- a/app/[locale]/(protected)/components/typography/page.tsx
+++ /dev/null
@@ -1,539 +0,0 @@
-import { Link } from '@/i18n/routing';
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Icon } from "@/components/ui/icon";
-import React from "react";
-
-type Props = {};
-
-const lists = [
-  {
-    id: 1,
-  },
-  {
-    id: 2,
-  },
-  {
-    id: 3,
-  },
-  {
-    id: 4,
-  },
-  {
-    id: 5,
-  },
-  {
-    id: 6,
-  },
-];
-const Typography = ({ }: Props) => {
-  return (
-    <div>
-      {" "}
-      <div>
-        <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-          <Card>
-            <CardHeader className="border-b border-solid mb-6">
-              <CardTitle>HTML headings Default</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="text-sm text-default-600 ">
-                All HTML headings, are available. .h1 through .h7 classes are
-                also available, for when you want to match the font styling of a
-                heading.
-              </div>
-              <div className="bg-default-100  text-xs text-default-600  flex justify-between py-3 px-6 items-center -mx-6 mt-6 mb-6 font-semibold">
-                <span>PREVIEW</span>
-                <span>FONT SIZE</span>
-              </div>
-
-              <div className="text-[60px] md:flex justify-between items-center mb-4">
-                <h1>Heading 1</h1>
-                <span className="text-[60px] text-default-600 ">60px</span>
-              </div>
-
-              <div className="text-[48px] md:flex justify-between items-center mb-4">
-                <h2>Heading 2</h2>
-                <span className="text-default-600 ">48px</span>
-              </div>
-
-              <div className="text-[36px] md:flex justify-between items-center mb-4">
-                <h3>Heading 3</h3>
-                <span className=" text-default-600 ">36px</span>
-              </div>
-              <div className="text-[30px] md:flex justify-between items-center mb-4">
-                <h4>Heading 4</h4>
-                <span className=" text-default-600 ">30px</span>
-              </div>
-              <div className="text-[24px] md:flex justify-between items-center mb-4">
-                <h5>Heading 5</h5>
-                <span className=" text-default-600 ">24px</span>
-              </div>
-              <div className="text-[20px] md:flex justify-between items-center mb-4">
-                <h6>Heading 6</h6>
-                <span className=" text-default-600 ">20px</span>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="border-b border-solid mb-6">
-              <CardTitle>HTML headings Light</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="text-sm text-default-600 ">
-                All HTML headings are available with light and bold font-weight.
-                Use .font-weight-normal for light heading and .
-              </div>
-              <div className="bg-default-100  text-xs text-default-600  flex justify-between py-3 px-6 items-center -mx-6 mt-6 mb-6 font-semibold">
-                <span>LIGHT HEADINGS</span>
-                <span>BOLD HEADINGS</span>
-              </div>
-
-              <div className="text-[60px] md:flex justify-between items-center mb-4">
-                <h1 className="font-normal">Heading</h1>
-                <h1 className="font-semibold">Heading</h1>
-              </div>
-
-              <div className="text-[48px] md:flex justify-between items-center mb-4">
-                <h2 className="font-normal">Heading 2</h2>
-                <h2 className="font-semibold">Heading 2</h2>
-              </div>
-
-              <div className="text-[36px] md:flex justify-between items-center mb-4">
-                <h3 className="font-normal">Heading 3</h3>
-                <h3 className="font-semibold">Heading 3</h3>
-              </div>
-              <div className="text-[30px] md:flex justify-between items-center mb-4">
-                <h4 className="font-normal">Heading 4</h4>
-                <h4 className="font-semibold">Heading 4</h4>
-              </div>
-              <div className="text-[24px] md:flex justify-between items-center mb-4">
-                <h5 className="font-normal">Heading 5</h5>
-                <h5 className="font-semibold">Heading 5</h5>
-              </div>
-              <div className="text-[20px] md:flex justify-between items-center mb-4">
-                <h6 className="font-normal">Heading 6</h6>
-                <h6 className="font-semibold">Heading 6</h6>
-              </div>
-            </CardContent>
-          </Card>
-          <div className="lg:col-span-2 col-span-1">
-            <Card>
-              <CardHeader className="border-b border-solid mb-6">
-                <CardTitle>Texts</CardTitle>
-              </CardHeader>
-              <CardContent className="-mx-6">
-                <table className="w-full border-collapse border-none text-left">
-                  <thead>
-                    <tr>
-                      <th className="text-xs font-semibold bg-default-100 ">
-                        <span className="px-6 py-5 block text-default-600 ">
-                          Type
-                        </span>
-                      </th>
-                      <th className="text-xs font-semibold bg-default-100 ">
-                        <span className="px-6 py-5 block text-default-600 ">
-                          Class
-                        </span>
-                      </th>
-                      <th className="text-xs font-semibold bg-default-100 ">
-                        <span className="px-6 py-5 block text-default-600 ">
-                          Text
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr className="border-b border-default-100 dark:border-default-700">
-                      <td className="text-default-900  text-left px-6 py-4 text-lg font-medium">
-                        Title
-                      </td>
-                      <td className="text-default-900  text-lg font-medium text-left t px-6 py-4">
-                        text-lg
-                      </td>
-                      <td className="text-default-900  text-lg font-medium text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
-                        <div className="text-xs text-default-500 dark:text-default-400 mt-1">
-                          font-size: 18px / line-height: 28px / font-weight: 500
-                        </div>
-                      </td>
-                    </tr>
-                    <tr className="border-b border-default-100 dark:border-default-700">
-                      <td className="text-default-700  text-left px-6 py-4 text-base font-normal">
-                        Sub Title
-                      </td>
-                      <td className="text-default-700  text-base font-normaltext-left t px-6 py-4">
-                        text-base
-                      </td>
-                      <td className="text-default-700  text-base font-normal text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
-                        <div className="text-xs text-default-500 dark:text-default-400 mt-1">
-                          font-size: 16px / line-height: 24px / font-weight: 400
-                        </div>
-                      </td>
-                    </tr>
-                    <tr className="border-b border-default-100 dark:border-default-700">
-                      <td className="text-default-600  text-left px-6 py-4 text-sm font-normal">
-                        Body Text
-                      </td>
-                      <td className="text-default-600  text-base font-sm font-normal text-left t px-6 py-4">
-                        text-sm
-                      </td>
-                      <td className="text-default-600  text-sm font-normal text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
-                        <div className="text-xs text-default-500 dark:text-default-400 mt-1">
-                          font-size: 14px / line-height: 20px / font-weight: 400
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td className="text-default-600  text-left px-6 py-4 text-xs font-normal">
-                        Small Text
-                      </td>
-                      <td className="text-default-600  text-base font-xs font-normal text-left t px-6 py-4">
-                        text-xs
-                      </td>
-                      <td className="text-default-600  text-xs font-normal text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
-                        <div className="text-xs text-default-500 dark:text-default-400 mt-1">
-                          font-size: 12px / line-height: 18px / font-weight: 400
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </CardContent>
-            </Card>
-          </div>
-          <Card>
-            <CardHeader className="border-b border-solid mb-6">
-              <CardTitle>Customizing headings Default</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="text-sm text-default-600  mb-6">
-                Use the included utility classes to recreate the small
-                secondary-500 heading text.
-              </div>
-
-              <div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
-                <h1>Display heading</h1>
-              </div>
-              <div className="text-[48px] md:flex font-medium justify-between items-center mb-3">
-                <h2>Display heading</h2>
-              </div>
-              <div className="text-[36px] md:flex font-medium justify-between items-center mb-3">
-                <h3>Display heading</h3>
-              </div>
-              <div className="text-[30px] md:flex font-medium justify-between items-center mb-3">
-                <h4>Display heading</h4>
-              </div>
-              <div className="text-[24px] md:flex font-medium justify-between items-center mb-3">
-                <h5>Display heading</h5>
-              </div>
-              <div className="text-[20px] md:flex font-medium justify-between items-center mb-3">
-                <h6>Display heading</h6>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="border-b border-solid mb-6">
-              <CardTitle>Heading colors</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="text-sm text-default-600  mb-6">
-                Use the included utility classes to recreate the small
-                secondary-500 heading text.
-              </div>
-
-              <div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
-                <h1 className="text-default">Display heading</h1>
-              </div>
-              <div className="text-[48px] md:flex font-medium justify-between items-center mb-3">
-                <h2 className="text-primary">Display heading</h2>
-              </div>
-              <div className="text-[36px] md:flex font-medium justify-between items-center mb-3">
-                <h3 className="text-info">Display heading</h3>
-              </div>
-              <div className="text-[30px] md:flex font-medium justify-between items-center mb-3">
-                <h4 className="text-success">Display heading</h4>
-              </div>
-              <div className="text-[24px] md:flex font-medium justify-between items-center mb-3">
-                <h5 className="text-warning">Display heading</h5>
-              </div>
-              <div className="text-[20px] md:flex font-medium justify-between items-center mb-3">
-                <h6 className="text-destructive">Display heading</h6>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="border-b border-solid mb-6">
-              <CardTitle>Display Headings</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="text-sm text-default-600  mb-6">
-                Traditional heading elements are designed to work best in the
-                meat of your page content. When you need a heading to stand out,
-                consider using a display heading—a larger, slightly more
-                opinionated heading style.
-              </div>
-
-              <div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
-                <h1>Display 1</h1>
-              </div>
-              <div className="text-[48px] md:flex font-medium justify-between items-center mb-3">
-                <h2>Display 2</h2>
-              </div>
-              <div className="text-[36px] md:flex font-medium justify-between items-center mb-3">
-                <h3>Display 3</h3>
-              </div>
-              <div className="text-[30px] md:flex font-medium justify-between items-center mb-3">
-                <h4>Display 4</h4>
-              </div>
-            </CardContent>
-          </Card>
-
-          <div className="space-y-5">
-            <Card>
-              <CardHeader className="border-b border-solid mb-6">
-                <CardTitle>Inline Text Elements</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <p className="text-sm font-light text-default-600 ">
-                    Styling for common inline HTML5 elements.
-                  </p>
-                  <p className="text-sm font-light text-default-900 ">
-                    <del>
-                      This line of text is meant to be treated as deleted text.
-                    </del>
-                  </p>
-                  <p className="text-sm font-light text-default-900 ">
-                    <Link href="#" className="underline">
-                      This line of text is meant to be treated as an addition to
-                      the document.
-                    </Link>
-                  </p>
-                  <p className="text-sm font-light text-default-900 ">
-                    <del>
-                      This line of text is meant to be treated as deleted text.
-                    </del>
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-          <div className="lg:col-span-2 col-span-1">
-            <Card>
-              <CardHeader className="border-b border-solid mb-6">
-                <CardTitle>Text Color</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <p className="text-sm font-light text-default ">
-                  Styling for common inline HTML5 elements.
-                </p>
-                <p className="text-sm font-light text-primary">
-                  Styling for common inline HTML5 elements.
-                </p>
-                <p className="text-sm font-light text-success">
-                  Styling for common inline HTML5 elements.
-                </p>
-                <p className="text-sm font-light text-warning">
-                  This is warning text You can archive this adding
-                  .text-warning class
-                </p>
-                <p className="text-sm font-light text-destructive">
-                  This is danger text You can archive this adding
-                  .text-danger class
-                </p>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="lg:col-span-2 col-span-1">
-            <Card>
-              <CardHeader className="border-b border-solid mb-6">
-                <CardTitle>Listing Typography</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
-                  <div>
-                    <span className="block text-default-900  font-medium leading-8 text-base mb-6">
-                      Unorder list.
-                    </span>
-                    <ul className="space-y-3 p-6 rounded-md bg-default-50 ">
-                      {lists.map((item, i) => (
-                        <li key={i} className="text-sm text-default-900 ">
-                          Lorem ipsum dolor sit amet.
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-
-                  <div>
-                    <span className="block text-default-900  font-medium leading-8 text-base mb-6">
-                      list-decimal
-                    </span>
-                    <ol className="space-y-3 p-6 rounded-md bg-default-50  lits-by-numbaring custom-list">
-                      <li className="text-sm text-default-900 ">
-                        <span> Lorem ipsum dolor sit amet.</span>
-                        <ol className="lits-by-numbaring">
-                          <li>Lorem ipsum dolor sit amet.</li>
-                        </ol>
-                      </li>
-                      <li className="text-sm text-default-900 ">
-                        <span> Lorem ipsum dolor sit amet.</span>
-                      </li>
-                      <li className="text-sm text-default-900 ">
-                        <span> Lorem ipsum dolor sit amet.</span>
-                      </li>
-                      <li className="text-sm text-default-900 ">
-                        <span> Lorem ipsum dolor sit amet.</span>
-                      </li>
-                      <li className="text-sm text-default-900 ">
-                        <span> Lorem ipsum dolor sit amet.</span>
-                      </li>
-                    </ol>
-                  </div>
-
-                  <div>
-                    <span className="block text-default-900  font-medium leading-8 text-base mb-6">
-                      Dash list
-                    </span>
-                    <ul className="space-y-3 p-6 rounded-md bg-default-50  custom-list">
-                      <li className="text-sm text-default-900 ">
-                        <span className="font-medium">
-                          {" "}
-                          Lorem ipsum dolor sit amet.
-                        </span>
-                        <ul className="lits-by-slash">
-                          <li>Lorem ipsum dolor sit amet.</li>
-                        </ul>
-                      </li>
-                      <li className="text-sm text-default-900 ">
-                        <span className="font-medium">
-                          {" "}
-                          Lorem ipsum dolor sit amet.
-                        </span>
-                        <ul className="lits-by-slash">
-                          <li>Lorem ipsum dolor sit amet.</li>
-                        </ul>
-                      </li>
-                      <li className="text-sm text-default-900 ">
-                        <span className="font-medium">
-                          {" "}
-                          Lorem ipsum dolor sit amet.
-                        </span>
-                        <ul className="lits-by-slash">
-                          <li>Lorem ipsum dolor sit amet.</li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </div>
-                  <div>
-                    <span className="block text-default-900  font-medium leading-8 text-base mb-6">
-                      Icon List 1
-                    </span>
-                    <ul className="space-y-3 p-6 rounded-md bg-default-50 ">
-                      {lists.map((item, i) => (
-                        <li
-                          key={i}
-                          className="text-sm text-default-900  flex space-x-2 items-center rtl:space-x-reverse"
-                        >
-                          <span>
-                            <Icon icon="heroicons:chevron-double-right" />
-                          </span>
-                          <span>Lorem ipsum dolor sit amet.</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div>
-                    <span className="block text-default-900  font-medium leading-8 text-base mb-6">
-                      Icon List 2
-                    </span>
-                    <ul className="space-y-3 p-6 rounded-md bg-default-50 ">
-                      {lists.map((item, i) => (
-                        <li
-                          key={i}
-                          className="text-sm text-default-900  flex space-x-2 items-center rtl:space-x-reverse"
-                        >
-                          <span>
-                            <Icon icon="heroicons:chevron-right" />
-                          </span>
-                          <span>Lorem ipsum dolor sit amet.</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div>
-                    <span className="block text-default-900  font-medium leading-8 text-base mb-6">
-                      Icon List 3
-                    </span>
-                    <ul className="space-y-3 p-6 rounded-md bg-default-50 ">
-                      {lists.map((item, i) => (
-                        <li
-                          key={i}
-                          className="text-sm text-default-900  flex space-x-2 items-center rtl:space-x-reverse"
-                        >
-                          <span className="h-[6px] w-[6px] bg-default-900 rounded-full inline-block"></span>
-                          <span>Lorem ipsum dolor sit amet.</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-          <div className="lg:col-span-2">
-            <Card>
-              <CardHeader className="border-b border-solid mb-6">
-                <CardTitle>Blockquotes</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-5">
-                <blockquote className=" italic text-xl text-default-900 ">
-                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                  Accusamus laudantium omnis fugit ducimus nulla libero
-                  temporibus corrupti non voluptatem harum?
-                  <span className="text-sm text-default-400 block mt-3">
-                    Dashcode Admin Template
-                  </span>
-                </blockquote>
-                <blockquote className=" italic text-xl border-primary-500 text-right text-default-900 ">
-                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                  Accusamus laudantium omnis fugit ducimus nulla libero
-                  temporibus corrupti non voluptatem harum?
-                  <span className="text-sm text-default-400 block mt-3">
-                    Dashcode Admin Template
-                  </span>
-                </blockquote>
-                <blockquote className=" italic text-xl border-success-500 text-center text-default-900 ">
-                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                  Accusamus laudantium omnis fugit ducimus nulla libero
-                  temporibus corrupti non voluptatem harum?
-                  <span className="text-sm text-default-400 block mt-3">
-                    Dashcode Admin Template
-                  </span>
-                </blockquote>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Typography;
diff --git a/app/[locale]/(protected)/ecommerce/backend/add-product/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/add-product/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/add-product/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/add-product/page.tsx b/app/[locale]/(protected)/ecommerce/backend/add-product/page.tsx
deleted file mode 100644
index dc2496ef..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/add-product/page.tsx
+++ /dev/null
@@ -1,490 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-
-const AddProduct = () => {
-  return (
-    <div className=" grid grid-cols-12  gap-4  rounded-lg">
-      <div className="col-span-12 md:col-span-7 space-y-4 lg:col-span-7 ">
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Information</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="h_Fullname">
-                Product Name
-              </Label>
-              <Input id="h_Fullname" type="text" placeholder="Full name" />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none">Category</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Category" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Category</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none">Brand</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Brand" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Brand</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="unit">
-                Unit
-              </Label>
-              <Input
-                id="unit"
-                type="text"
-                placeholder="Unit (e.g. KG, Pc etc)"
-              />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="weight">
-                Label Wight (in kg)
-              </Label>
-              <Input id="weight" type="text" placeholder="0.00" />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="qty">
-                Minimum Purchase Qty
-              </Label>
-              <Input id="qty" type="text" placeholder="1" />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="tags">
-                Tags
-              </Label>
-              <Input
-                id="tags"
-                type="text"
-                placeholder="Type & hit enter to add a tag"
-              />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="brcode">
-                Barcode
-              </Label>
-              <Input id="brcode" type="text" placeholder="Code" />
-            </div>
-            <div className="flex items-center flex-wrap gap-10">
-              <Label className="flex-none w-[132px] ">Refundable</Label>
-              <div className="flex-1">
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Images</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Gallery Images (600 X 600)
-              </Label>
-              <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Thumb Images (600 X 600)
-              </Label>
-              <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Variation</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[132px]">Color</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Color" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Color</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[132px]">Attributes</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Attributes" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Attributes</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[132px]">Size</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Size" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Size</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Description</CardTitle>
-          </CardHeader>
-          <CardContent className="flex">
-            <Label className="w-[130px] flex-none">Description</Label>
-            <Textarea id="pn4" placeholder="Some product description..." />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>PDF Specification</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center space-x-10 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal">
-                Add PDF File
-              </Label>
-              <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>SEO Meta Tags</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex">
-              <Label className="w-[130px]">Meta Title</Label>
-              <Input id="meta_title" type="text" placeholder="Title" />
-            </div>
-
-            <div className="flex">
-              <Label className="w-[130px]">Description</Label>
-              <Textarea
-                id="pn4"
-                placeholder="Write something for your product seo"
-              />
-            </div>
-            <div className="flex items-center ">
-              <Label className="flex-none w-[130px] ">Meta Image</Label>
-              <Input
-                className="read-only:leading-0 py-1.5 h-full ps-0"
-                type="file"
-              />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="col-span-12 md:col-span-5 space-y-4 lg:col-span-5">
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Shipping Configuration</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label>Free Shipping</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label>Flat Rate</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label>Is Product Quantity Multiply</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Low Stock Quantity Warning</CardTitle>
-          </CardHeader>
-          <CardContent className="flex items-center">
-            <Label className="w-[130px] flex-none">Quantity</Label>
-            <Input id="qty_warning" type="text" placeholder="1" />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Stock Visibility State</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Show Stock Quantity</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">
-                Show Stock With Text Only
-              </Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Hide Stock</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Cash On Delivery</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Status</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Featured</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Status</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Todays Deal</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Status</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Flash Deal</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center">
-              <Label className="w-[150px] flex-none">Category</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Category" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Category</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center">
-              <Label className="w-[150px] flex-none">Discount</Label>
-              <Input id="discount" type="text" placeholder="0" />
-            </div>
-
-            <div className="flex items-center">
-              <Label className="w-[150px] flex-none">Type</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Type" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Type</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Estimate Shipping Time</CardTitle>
-          </CardHeader>
-          <CardContent className="flex items-center">
-            <Label className="w-[150px] flex-none">LabelShipping Days</Label>
-            <Input id="shipping_days" type="text" placeholder="07" />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Estimate Shipping Tax</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex gap-4">
-              <div className="flex items-center">
-                <Label className="flex-none w-10">VAT</Label>
-                <Input
-                  className="inline-flex"
-                  id="vat"
-                  type="text"
-                  placeholder="00"
-                />
-              </div>
-              <div className="flex-1">
-                <Select>
-                  <SelectTrigger className="flex-1">
-                    <SelectValue placeholder="Flat" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Flat</SelectLabel>
-                      <SelectItem value="apple">Apple</SelectItem>
-                      <SelectItem value="banana">Banana</SelectItem>
-                      <SelectItem value="blueberry">Blueberry</SelectItem>
-                      <SelectItem value="grapes">Grapes</SelectItem>
-                      <SelectItem value="pineapple">Pineapple</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="flex gap-4">
-              <div className="flex items-center">
-                <Label className="flex-none w-10">TAX</Label>
-                <Input type="text" placeholder="00" />
-              </div>
-              <div className="flex-1">
-                <Select>
-                  <SelectTrigger className="flex-1">
-                    <SelectValue placeholder="Percent" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Percent</SelectLabel>
-                      <SelectItem value="apple">Apple</SelectItem>
-                      <SelectItem value="banana">Banana</SelectItem>
-                      <SelectItem value="blueberry">Blueberry</SelectItem>
-                      <SelectItem value="grapes">Grapes</SelectItem>
-                      <SelectItem value="pineapple">Pineapple</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="col-span-12 flex justify-end">
-        <Button>Save Product</Button>
-      </div>
-    </div>
-  );
-};
-
-export default AddProduct;
diff --git a/app/[locale]/(protected)/ecommerce/backend/customer-list/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/customer-list/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/customer-list/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/customer-list/page.tsx b/app/[locale]/(protected)/ecommerce/backend/customer-list/page.tsx
deleted file mode 100644
index b9983288..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/customer-list/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Card } from "@/components/ui/card"
-import TransactionsTable from "./transactions";
-
-const CustomerList = () => {
-  return (
-    <div>
-      Customer List
-      <Card>
-        <TransactionsTable />
-      </Card>
-    </div>
-  );
-}
-
-export default CustomerList
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/columns.tsx b/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/columns.tsx
deleted file mode 100644
index 9a48506b..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/columns.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { SquarePen, Trash2, TriangleAlert } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from '@/i18n/routing';
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-
-export type DataProps = {
-  id: string | number;
-  phone: string;
-  customer: {
-    name: string;
-    image: string;
-  };
-  date: string;
-  email: string;
-  amount: string;
-  rating: number;
-  action: React.ReactNode;
-};
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="bg-default-100"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="bg-default-100"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-
-  {
-    accessorKey: "customer",
-    header: "User Name",
-    cell: ({ row }) => {
-      const user = row.original.customer;
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <span className="text-sm text-default-600 whitespace-nowrap">
-              {user?.name ?? "Unknown User"}
-            </span>
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "phone",
-    header: "Phone",
-    cell: ({ row }) => <span>{row.getValue("phone")}</span>,
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-    cell: ({ row }) => <span>{row.getValue("email")}</span>,
-  },
-  {
-    accessorKey: "date",
-    header: "Create Date",
-    cell: ({ row }) => {
-      return <span>{row.getValue("date")}</span>;
-    },
-  },
-  {
-    accessorKey: "rating",
-    header: "Ratings",
-    cell: ({ row }) => {
-      return (
-        <Badge color="success">
-          <span>{row.getValue("rating")}</span>
-        </Badge>
-      );
-    },
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-    cell: ({ row }) => {
-      return <span> {row.getValue("amount")}</span>;
-    },
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center gap-1">
-          <Link
-            href="/utility/invoice/preview/1"
-            className="flex items-center p-2 border-b text-info hover:text-info-foreground bg-info/40 hover:bg-info duration-200 transition-all rounded-full"
-          >
-            <SquarePen className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 text-destructive bg-destructive/40 duration-200 transition-all hover:bg-destructive/80 hover:text-destructive-foreground rounded-full"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Link>
-        </div>
-      );
-    },
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/data.ts b/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/data.ts
deleted file mode 100644
index 02a0c9f8..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/data.ts
+++ /dev/null
@@ -1,653 +0,0 @@
-import { DataProps } from "./columns";
-export const data: DataProps[] = [
-  {
-    id: 1,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "3/26/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 2,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "2/6/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 3,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "9/6/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 4,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "11/7/2021",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 5,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "5/6/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 6,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "2/14/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 7,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "7/30/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 8,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "6/30/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 9,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "8/9/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 10,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "8/4/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 11,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "4/5/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 12,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "8/9/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 13,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "2/10/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 14,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "2/10/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 15,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "5/20/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 16,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "5/3/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 17,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "10/31/2021",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 18,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "1/13/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 19,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "6/14/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 20,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "10/8/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 21,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "11/17/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 22,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "4/4/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 23,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "3/21/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 24,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "6/18/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 25,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "8/15/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 26,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "4/28/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 27,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "9/6/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 28,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "9/11/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 29,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "1/27/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 30,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "9/16/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 31,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "1/8/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 32,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "11/18/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 33,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "3/30/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 34,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "11/13/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 35,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "12/7/2021",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 36,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "9/9/2021",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 37,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "2/12/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 38,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "3/6/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 39,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "7/25/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 40,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "3/2/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 41,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "12/8/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 42,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "11/22/2021",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 43,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "4/6/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 44,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "2/4/2022",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 45,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "3/30/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 46,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "11/20/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 47,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "10/24/2021",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 48,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "6/30/2022",
-    rating: 4.5,
-    action: null,
-  },
-  {
-    id: 49,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "11/16/2021",
-    rating:4.5,
-    action: null,
-  },
-  {
-    id: 50,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
-    date: "8/15/2022",
-    rating:4.5,
-    action: null,
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/index.tsx b/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/index.tsx
deleted file mode 100644
index b4a66480..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
-import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/routing';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-const TransactionsTable = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-
-
-          <Select>
-            <SelectTrigger className=" w-[150px]">
-              <SelectValue placeholder="Bulk Action" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Bulk Action</SelectLabel>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="paid">Paid</SelectItem>
-                <SelectItem value="pending">Pending</SelectItem>
-                <SelectItem value="failed">Failed</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex-none">
-          <div className="flex items-center gap-4 flex-wrap">
-            <Select>
-              <SelectTrigger className=" w-[80px]">
-                <SelectValue placeholder="Date" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Date</SelectLabel>
-                  <SelectItem value="all">All</SelectItem>
-                  <SelectItem value="paid">Paid</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="failed">Failed</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="w-full "
-            />
-          </div>
-        </div>
-      </div>
-
-      <CardContent>
-        <div className="border border-solid border-default-200 rounded-lg overflow-hidden border-t-0">
-          <Table>
-            <TableHeader className="bg-default-200">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead className="last:text-start" key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </CardContent>
-      <TablePagination table={table} />
-    </div>
-  );
-};
-export default TransactionsTable;
diff --git a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/table-pagination.tsx b/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/table-pagination.tsx
deleted file mode 100644
index fab9b075..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/table-pagination.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/edit-product/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/edit-product/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/edit-product/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/edit-product/page.tsx b/app/[locale]/(protected)/ecommerce/backend/edit-product/page.tsx
deleted file mode 100644
index 97982b81..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/edit-product/page.tsx
+++ /dev/null
@@ -1,490 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-
-const EditProduct = () => {
-  return (
-    <div className=" grid grid-cols-12  gap-4  rounded-lg">
-      <div className="col-span-12 md:col-span-7 space-y-4 lg:col-span-7 ">
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Information</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="h_Fullname">
-                Product Name
-              </Label>
-              <Input id="h_Fullname" type="text" placeholder="Full name" />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none">Category</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Category" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Category</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none">Brand</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Brand" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Brand</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="unit">
-                Unit
-              </Label>
-              <Input
-                id="unit"
-                type="text"
-                placeholder="Unit (e.g. KG, Pc etc)"
-              />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="weight">
-                Label Wight (in kg)
-              </Label>
-              <Input id="weight" type="text" placeholder="0.00" />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="qty">
-                Minimum Purchase Qty
-              </Label>
-              <Input id="qty" type="text" placeholder="1" />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="tags">
-                Tags
-              </Label>
-              <Input
-                id="tags"
-                type="text"
-                placeholder="Type & hit enter to add a tag"
-              />
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[150px] flex-none" htmlFor="brcode">
-                Barcode
-              </Label>
-              <Input id="brcode" type="text" placeholder="Code" />
-            </div>
-            <div className="flex items-center flex-wrap gap-10">
-              <Label className="flex-none w-[132px] ">Refundable</Label>
-              <div className="flex-1">
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Images</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Gallery Images (600 X 600)
-              </Label>
-              <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Thumb Images (600 X 600)
-              </Label>
-              <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Variation</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[132px]">Color</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Color" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Color</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[132px]">Attributes</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Attributes" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Attributes</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center flex-wrap">
-              <Label className="w-[132px]">Size</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Size" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Size</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Product Description</CardTitle>
-          </CardHeader>
-          <CardContent className="flex">
-            <Label className="w-[130px] flex-none">Description</Label>
-            <Textarea id="pn4" placeholder="Some product description..." />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>PDF Specification</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center space-x-10 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal">
-                Add PDF File
-              </Label>
-              <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>SEO Meta Tags</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex">
-              <Label className="w-[130px]">Meta Title</Label>
-              <Input id="meta_title" type="text" placeholder="Title" />
-            </div>
-
-            <div className="flex">
-              <Label className="w-[130px]">Description</Label>
-              <Textarea
-                id="pn4"
-                placeholder="Write something for your product seo"
-              />
-            </div>
-            <div className="flex items-center ">
-              <Label className="flex-none w-[130px] ">Meta Image</Label>
-              <Input
-                className="read-only:leading-0 py-1.5 h-full ps-0"
-                type="file"
-              />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="col-span-12 md:col-span-5 space-y-4 lg:col-span-5">
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Shipping Configuration</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label>Free Shipping</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label>Flat Rate</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label>Is Product Quantity Multiply</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Low Stock Quantity Warning</CardTitle>
-          </CardHeader>
-          <CardContent className="flex items-center">
-            <Label className="w-[130px] flex-none">Quantity</Label>
-            <Input id="qty_warning" type="text" placeholder="1" />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Stock Visibility State</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Show Stock Quantity</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">
-                Show Stock With Text Only
-              </Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Hide Stock</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Cash On Delivery</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Status</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Featured</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Status</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Todays Deal</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <Label className="text-sm font-normal">Status</Label>
-              <div>
-                <Switch color="success" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Flash Deal</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center">
-              <Label className="w-[150px] flex-none">Category</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Category" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Category</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center">
-              <Label className="w-[150px] flex-none">Discount</Label>
-              <Input id="discount" type="text" placeholder="0" />
-            </div>
-
-            <div className="flex items-center">
-              <Label className="w-[150px] flex-none">Type</Label>
-              <Select>
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="Select Type" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Type</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="blueberry">Blueberry</SelectItem>
-                    <SelectItem value="grapes">Grapes</SelectItem>
-                    <SelectItem value="pineapple">Pineapple</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Estimate Shipping Time</CardTitle>
-          </CardHeader>
-          <CardContent className="flex items-center">
-            <Label className="w-[150px] flex-none">LabelShipping Days</Label>
-            <Input id="shipping_days" type="text" placeholder="07" />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>Estimate Shipping Tax</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex gap-4">
-              <div className="flex items-center">
-                <Label className="flex-none w-10">VAT</Label>
-                <Input
-                  className="inline-flex"
-                  id="vat"
-                  type="text"
-                  placeholder="00"
-                />
-              </div>
-              <div className="flex-1">
-                <Select>
-                  <SelectTrigger className="flex-1">
-                    <SelectValue placeholder="Flat" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Flat</SelectLabel>
-                      <SelectItem value="apple">Apple</SelectItem>
-                      <SelectItem value="banana">Banana</SelectItem>
-                      <SelectItem value="blueberry">Blueberry</SelectItem>
-                      <SelectItem value="grapes">Grapes</SelectItem>
-                      <SelectItem value="pineapple">Pineapple</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="flex gap-4">
-              <div className="flex items-center">
-                <Label className="flex-none w-10">TAX</Label>
-                <Input type="text" placeholder="00" />
-              </div>
-              <div className="flex-1">
-                <Select>
-                  <SelectTrigger className="flex-1">
-                    <SelectValue placeholder="Percent" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Percent</SelectLabel>
-                      <SelectItem value="apple">Apple</SelectItem>
-                      <SelectItem value="banana">Banana</SelectItem>
-                      <SelectItem value="blueberry">Blueberry</SelectItem>
-                      <SelectItem value="grapes">Grapes</SelectItem>
-                      <SelectItem value="pineapple">Pineapple</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="col-span-12 flex justify-end">
-        <Button>Update Product</Button>
-      </div>
-    </div>
-  );
-};
-
-export default EditProduct;
diff --git a/app/[locale]/(protected)/ecommerce/backend/invoice/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/invoice/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/invoice/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/invoice/page.tsx b/app/[locale]/(protected)/ecommerce/backend/invoice/page.tsx
deleted file mode 100644
index abbeb7d3..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/invoice/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import InvoicePreviewPage from "../../../utility/invoice/preview/[id]/page";
-
-const EcomInvoice = () => {
-  return (
-    <div>
-      <InvoicePreviewPage />
-    </div>
-  );
-};
-
-export default EcomInvoice;
diff --git a/app/[locale]/(protected)/ecommerce/backend/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-details/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/order-details/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-details/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-details/page.tsx b/app/[locale]/(protected)/ecommerce/backend/order-details/page.tsx
deleted file mode 100644
index 2869635b..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-details/page.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import TotalTable from "./totaltable";
-import Logo from "@/components/logo";
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-
-const OrderDetails = () => {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Order Update</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          <div className="flex items-center flex-wrap">
-            <Label className="w-[150px] flex-none">Assign Deliver Boy:</Label>
-            <Select>
-              <SelectTrigger className="flex-1">
-                <SelectValue placeholder="Select Deliver Boy:" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Deliver Boy:</SelectLabel>
-                  <SelectItem value="apple">Apple</SelectItem>
-                  <SelectItem value="banana">Banana</SelectItem>
-                  <SelectItem value="blueberry">Blueberry</SelectItem>
-                  <SelectItem value="grapes">Grapes</SelectItem>
-                  <SelectItem value="pineapple">Pineapple</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex items-center flex-wrap">
-            <Label className="w-[150px] flex-none">Payment Status:</Label>
-            <Select>
-              <SelectTrigger className="flex-1">
-                <SelectValue placeholder="Select Payment Status" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Payment Status</SelectLabel>
-                  <SelectItem value="apple">Apple</SelectItem>
-                  <SelectItem value="banana">Banana</SelectItem>
-                  <SelectItem value="blueberry">Blueberry</SelectItem>
-                  <SelectItem value="grapes">Grapes</SelectItem>
-                  <SelectItem value="pineapple">Pineapple</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex items-center flex-wrap">
-            <Label className="w-[150px] flex-none">Delivery Status:</Label>
-            <Select>
-              <SelectTrigger className="flex-1">
-                <SelectValue placeholder="Select Delivery Status" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Delivery Status</SelectLabel>
-                  <SelectItem value="apple">Apple</SelectItem>
-                  <SelectItem value="banana">Banana</SelectItem>
-                  <SelectItem value="blueberry">Blueberry</SelectItem>
-                  <SelectItem value="grapes">Grapes</SelectItem>
-                  <SelectItem value="pineapple">Pineapple</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex items-center flex-wrap">
-            <Label className="w-[150px] flex-none">Tracking Code (optional):</Label>
-            <Select>
-              <SelectTrigger className="flex-1">
-                <SelectValue placeholder="Select Tracking Code (optional)" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Tracking Code (optional)</SelectLabel>
-                  <SelectItem value="apple">Apple</SelectItem>
-                  <SelectItem value="banana">Banana</SelectItem>
-                  <SelectItem value="blueberry">Blueberry</SelectItem>
-                  <SelectItem value="grapes">Grapes</SelectItem>
-                  <SelectItem value="pineapple">Pineapple</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </CardContent>
-      <CardHeader className="border-0">
-        <div className="flex justify-between  flex-wrap gap-4 items-center">
-          <div>
-            <span className="block text-default-900 font-medium leading-5 text-xl">
-              Bill to:
-            </span>
-
-            <div className="text-default-500 font-normal leading-5 mt-4 text-sm">
-              Annette black-500 <br />
-              4140 Parker Rd. Allentown, New <br />
-              Mexico 31134
-              <div className="flex space-x-2 mt-2 leading-[1] rtl:space-x-reverse">
-                <Icon icon="heroicons-outline:phone" />
-                <span>(252) 555-0126,(201) 555-0124</span>
-              </div>
-              <div className="mt-[6px] flex space-x-2 leading-[1] rtl:space-x-reverse">
-                <Icon icon="heroicons-outline:mail" />
-                <span>Dashcode@example.com</span>
-              </div>
-            </div>
-          </div>
-          <div className="space-y-1">
-            <h4 className="text-default-600 font-medium text-xs uppercase">
-              Order Id: 22332285 - 33221144
-            </h4>
-
-            <h4 className="text-default-600 font-medium text-xs uppercase">
-              Order Date: July 07, 2023. 09:36 AM
-            </h4>
-            <h4 className="text-default-600 font-medium text-xs uppercase">
-              Payment Method: Cash On Delivery
-            </h4>
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardContent>
-        <div className="border border-solid border-default-400 rounded-md overflow-hidden">
-          <TotalTable />
-        </div>
-        <div className="col-span-12 flex justify-end mt-10">
-          <Button variant="soft" color="default" size="md">
-            Print
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-export default OrderDetails;
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-details/totaltable.tsx b/app/[locale]/(protected)/ecommerce/backend/order-details/totaltable.tsx
deleted file mode 100644
index e9df500f..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-details/totaltable.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-const rows = [
-  {
-    item: "Headphone",
-    tax: "$0.00",
-    delivery:"home delivery",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-  {
-    item: "Headphone",
-    tax: "$0.00",
-    delivery:"home delivery",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-  {
-    item: "Headphone",
-    tax: "$0.00",
-    delivery:"home delivery",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-  {
-    item: "Headphone",
-    tax: "$0.00",
-    delivery:"home delivery",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-];
-
-const TotalTable = () => {
-  return (
-    <>
-      <table className="w-full">
-        <thead>
-          <tr>
-            <th
-              colSpan={3}
-              className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right "
-            >
-              <span className="block px-6 py-5 font-semibold">ITEM</span>
-            </th>
-            <th className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">
-                Delivery Type
-              </span>
-            </th>
-            <th className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">Quantity</span>
-            </th>
-            <th className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">Unit PRICE</span>
-            </th>
-            <th className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">Tax</span>
-            </th>
-            <th className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">TOTAL</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((data, index) => (
-            <tr
-              key={index}
-              className="border-b border-default-100 border-solid  border-0"
-            >
-              <td
-                colSpan={3}
-                className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4"
-              >
-                {data.item}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.delivery}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.qty}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.price}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.tax}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.total}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="md:flex px-6 py-6 items-center">
-        <div className="flex-1 text-default-500  text-sm">
-          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
-          sint. Velit <br />
-          officia consequat duis enim velit mollit.
-        </div>
-        <div className="flex-none min-w-[270px] space-y-3 ">
-          <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Subtotal:
-            </span>
-            <span className="text-default-900 ">$3601.50</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Tax (3.5%):
-            </span>
-            <span className="text-default-900 ">$20.50</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Shipping:
-            </span>
-            <span className="text-default-900 ">$20.50</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Coupon Discount:
-            </span>
-            <span className="text-default-900 ">$20.50</span>
-          </div>
-          <div className="flex justify-between border-solid border-t border-default-200 pt-3">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Invoice total:
-            </span>
-            <span className="text-default-900  font-bold">$3622.00</span>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default TotalTable;
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-list/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/order-list/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-list/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-list/page.tsx b/app/[locale]/(protected)/ecommerce/backend/order-list/page.tsx
deleted file mode 100644
index b2cf49ba..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-list/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Card } from "@/components/ui/card";
-import TransactionsTable from "./transactions";
-
-const OrderList = () => {
-  return (
-    <div>
-      Orders
-      <Card>
-        <TransactionsTable />
-      </Card>
-    </div>
-  );
-};
-
-export default OrderList;
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/columns.tsx b/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/columns.tsx
deleted file mode 100644
index 6c7aa9cb..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/columns.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import {
-  Download,
-  Eye,
-  Trash2,
-} from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import { Link } from '@/i18n/routing';
-
-export type DataProps = {
-  id: string | number;
-  order: number;
-  customer: {
-    name: string;
-    image: string;
-  };
-  date: string;
-  quantity: number;
-  amount: string;
-  method: string;
-  status: "paid" | "due" | "canceled";
-  action: React.ReactNode;
-};
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="bg-default-100"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="bg-default-100"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-
-  {
-    accessorKey: "order",
-    header: "Order",
-    cell: ({ row }) => <span>{row.getValue("order")}</span>,
-  },
-  {
-    accessorKey: "customer",
-    header: "Billing Name",
-    cell: ({ row }) => {
-      const user = row.original.customer;
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <Avatar className="rounded-full w-8 h-8">
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
-            </Avatar>
-            <span className="text-sm text-default-600 whitespace-nowrap">
-              {user?.name ?? "Unknown User"}
-            </span>
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "date",
-    header: "Date",
-    cell: ({ row }) => {
-      return <span>{row.getValue("date")}</span>;
-    },
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-    cell: ({ row }) => {
-      return <span>{row.getValue("amount")}</span>;
-    },
-  },
-  {
-    accessorKey: "method",
-    header: "Payment Method",
-    cell: ({ row }) => {
-
-      return <span> {row.getValue("method")}</span>;
-
-    },
-  },
-  {
-    accessorKey: "status",
-    header: "Payment Status",
-    cell: ({ row }) => {
-      const statusColors: Record<string, string> = {
-        paid: "bg-success/20 text-success",
-        due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive",
-      };
-      const status = row.getValue<string>("status");
-      const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge className={cn("rounded-full px-5", statusStyles)}>
-          {status}{" "}
-        </Badge>
-      );
-    },
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center gap-1">
-          <Link
-            href="/utility/invoice/preview/1"
-            className="flex items-center p-2 border-b text-warning hover:text-warning-foreground bg-warning/40 hover:bg-warning duration-200 transition-all rounded-full"
-          >
-            <Eye className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 border-b text-info hover:text-info-foreground bg-info/40 hover:bg-info duration-200 transition-all rounded-full"
-          >
-            <Download className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 text-destructive bg-destructive/40 duration-200 transition-all hover:bg-destructive/80 hover:text-destructive-foreground rounded-full"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Link>
-        </div>
-      );
-    },
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/data.ts b/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/data.ts
deleted file mode 100644
index 931245f0..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/data.ts
+++ /dev/null
@@ -1,703 +0,0 @@
-import { DataProps } from "./columns";
-export const data: DataProps[] = [
-  {
-    id: 1,
-    order: 951,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/26/2022",
-    quantity: 13,
-    amount: "$1779.53",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 2,
-    order: 238,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/6/2022",
-    quantity: 13,
-    amount: "$2215.78",
-    status: "due",
-    method: "Nagad",
-    action: null,
-  },
-  {
-    id: 3,
-    order: 339,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/6/2021",
-    quantity: 1,
-    amount: "$3183.60",
-    status: "due",
-    method: "Amar Pay",
-    action: null,
-  },
-  {
-    id: 4,
-    order: 365,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/7/2021",
-    quantity: 13,
-    amount: "$2587.86",
-    status: "canceled",
-    method: "G Pay",
-    action: null,
-  },
-  {
-    id: 5,
-    order: 513,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "5/6/2022",
-    quantity: 12,
-    amount: "$3840.73",
-    status: "paid",
-    method: "COD",
-    action: null,
-  },
-  {
-    id: 6,
-    order: 534,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/14/2022",
-    quantity: 12,
-    amount: "$4764.18",
-    status: "canceled",
-    method: "cod",
-    action: null,
-  },
-  {
-    id: 7,
-    order: 77,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "7/30/2022",
-    quantity: 6,
-    amount: "$2875.05",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 8,
-    order: 238,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/30/2022",
-    quantity: 9,
-    amount: "$2491.02",
-    status: "due",
-    method: "Nagad",
-    action: null,
-  },
-  {
-    id: 9,
-    order: 886,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/9/2022",
-    quantity: 8,
-    amount: "$3006.95",
-    status: "due",
-    method: "Rocket",
-    action: null,
-  },
-  {
-    id: 10,
-    order: 3,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/4/2022",
-    quantity: 12,
-    amount: "$2160.32",
-    status: "paid",
-    method: "Bank",
-    action: null,
-  },
-  {
-    id: 11,
-    order: 198,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/5/2022",
-    quantity: 8,
-    amount: "$1272.66",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 12,
-    order: 829,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/9/2022",
-    quantity: 2,
-    amount: "$4327.86",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 13,
-    order: 595,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/10/2022",
-    quantity: 11,
-    amount: "$3671.81",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 14,
-    order: 374,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/10/2022",
-    quantity: 2,
-    amount: "$3401.82",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 15,
-    order: 32,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "5/20/2022",
-    quantity: 4,
-    amount: "$2387.49",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 16,
-    order: 89,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "5/3/2022",
-    quantity: 15,
-    amount: "$4236.61",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 17,
-    order: 912,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/31/2021",
-    quantity: 11,
-    amount: "$2975.66",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 18,
-    order: 621,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/13/2022",
-    quantity: 5,
-    amount: "$4576.13",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 19,
-    order: 459,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/14/2022",
-    quantity: 5,
-    amount: "$1276.56",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 20,
-    order: 108,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/8/2021",
-    quantity: 4,
-    amount: "$1078.64",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 21,
-    order: 492,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/17/2021",
-    quantity: 9,
-    amount: "$1678.19",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 22,
-    order: 42,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/4/2022",
-    quantity: 9,
-    amount: "$1822.02",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 23,
-    order: 841,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/21/2022",
-    quantity: 5,
-    amount: "$1578.39",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 24,
-    order: 561,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/18/2022",
-    quantity: 12,
-    amount: "$2130.49",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 25,
-    order: 720,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/15/2022",
-    quantity: 8,
-    amount: "$3721.11",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 26,
-    order: 309,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/28/2022",
-    quantity: 8,
-    amount: "$4683.45",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 27,
-    order: 24,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/6/2021",
-    quantity: 7,
-    amount: "$2863.71",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 28,
-    order: 518,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/11/2021",
-    quantity: 4,
-    amount: "$3879.41",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 29,
-    order: 98,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/27/2022",
-    quantity: 5,
-    amount: "$4660.81",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 30,
-    order: 940,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/16/2021",
-    quantity: 6,
-    amount: "$4800.75",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 31,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/8/2022",
-    quantity: 1,
-    amount: "$2299.05",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 32,
-    order: 122,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/18/2021",
-    quantity: 1,
-    amount: "$3578.02",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 33,
-    order: 371,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 13,
-    amount: "$1996.06",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 34,
-    order: 296,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/13/2021",
-    quantity: 5,
-    amount: "$2749.00",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 35,
-    order: 887,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/7/2021",
-    quantity: 11,
-    amount: "$4353.01",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 36,
-    order: 30,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/9/2021",
-    quantity: 15,
-    amount: "$3252.37",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 37,
-    order: 365,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/12/2022",
-    quantity: 5,
-    amount: "$4044.10",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 38,
-    order: 649,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/6/2022",
-    quantity: 5,
-    amount: "$3859.92",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 39,
-    order: 923,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "7/25/2022",
-    quantity: 14,
-    amount: "$1652.47",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 40,
-    order: 423,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/2/2022",
-    quantity: 8,
-    amount: "$2700.12",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 41,
-    order: 703,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/8/2021",
-    quantity: 8,
-    amount: "$4508.13",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 42,
-    order: 792,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/22/2021",
-    quantity: 11,
-    amount: "$4938.04",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 43,
-    order: 400,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/6/2022",
-    quantity: 1,
-    amount: "$3471.32",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 44,
-    order: 718,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/4/2022",
-    quantity: 4,
-    amount: "$4011.60",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 45,
-    order: 970,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 15,
-    amount: "$3723.64",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 46,
-    order: 786,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/20/2021",
-    quantity: 2,
-    amount: "$2441.15",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 47,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/24/2021",
-    quantity: 11,
-    amount: "$1196.76",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 48,
-    order: 929,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/30/2022",
-    quantity: 10,
-    amount: "$3579.57",
-    status: "canceled",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 49,
-    order: 377,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/16/2021",
-    quantity: 4,
-    amount: "$2657.84",
-    status: "due",
-    method: "Bkash",
-    action: null,
-  },
-  {
-    id: 50,
-    order: 661,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/15/2022",
-    quantity: 6,
-    amount: "$2905.94",
-    status: "paid",
-    method: "Bkash",
-    action: null,
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/index.tsx b/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/index.tsx
deleted file mode 100644
index 59c13ae7..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/index.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
-import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/routing';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-const TransactionsTable = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-          <div className="inline-flex items-center border border-solid divide-x divide-default-200 divide-solid rounded-md overflow-hidden">
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              All
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Pending
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Confirm
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Processing
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Delivered
-            </Button>
-          </div>
-
-          <Select>
-            <SelectTrigger className=" w-[80px]">
-              <SelectValue placeholder="Date" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Date</SelectLabel>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="paid">Paid</SelectItem>
-                <SelectItem value="pending">Pending</SelectItem>
-                <SelectItem value="failed">Failed</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex-none">
-          <div className="flex items-center gap-4 flex-wrap">
-            <Select>
-              <SelectTrigger className=" w-[80px]">
-                <SelectValue placeholder="Date" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Date</SelectLabel>
-                  <SelectItem value="all">All</SelectItem>
-                  <SelectItem value="paid">Paid</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="failed">Failed</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="w-full "
-            />
-          </div>
-        </div>
-      </div>
-
-      <CardContent>
-        <div className="border border-solid border-default-200 rounded-lg overflow-hidden border-t-0">
-          <Table>
-            <TableHeader className="bg-default-200">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead className="last:text-start" key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </CardContent>
-      <TablePagination table={table} />
-    </div>
-  );
-};
-export default TransactionsTable;
diff --git a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/table-pagination.tsx b/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/table-pagination.tsx
deleted file mode 100644
index fab9b075..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/table-pagination.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/page.tsx b/app/[locale]/(protected)/ecommerce/backend/page.tsx
deleted file mode 100644
index 46a7c39c..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-"use client";
-import { redirect } from "@/components/navigation";
-const Backend = () => {
-  redirect("/ecommerce/backend/add-product");
-  return null;
-};
-
-export default Backend;
diff --git a/app/[locale]/(protected)/ecommerce/backend/purchase-list/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/purchase-list/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/purchase-list/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/purchase-list/page.tsx b/app/[locale]/(protected)/ecommerce/backend/purchase-list/page.tsx
deleted file mode 100644
index 516fc447..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/purchase-list/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Card } from "@/components/ui/card";
-import TransactionsTable from "./transactions";
-
-const PurchaseList = () => {
-  return (
-    <div>
-      Purchase List
-      <Card>
-        <TransactionsTable />
-      </Card>
-    </div>
-  );
-};
-
-export default PurchaseList;
diff --git a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/columns.tsx b/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/columns.tsx
deleted file mode 100644
index f897b87a..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/columns.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { SquarePen, Trash2, TriangleAlert } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from '@/i18n/routing';
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Switch } from "@/components/ui/switch";
-import Image from "next/image";
-
-export type DataProps = {
-  id: string | number;
-  product: {
-    name: string;
-    image: string;
-  };
-  category: string;
-  seller: string;
-  stock: number;
-  info: {
-    soldItems: number;
-    basePrice: string;
-    ratings: number;
-  };
-  published: boolean;
-  action: React.ReactNode;
-};
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="bg-default-100"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="bg-default-100"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-
-  {
-    accessorKey: "product",
-    header: "Product",
-    cell: ({ row }) => {
-      const product = row.original.product;
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <Image
-              src={product.image}
-              alt=""
-              height={32}
-              width={32}
-              className=" w-8 h-8"
-            />
-
-            <span className="text-sm text-default-600">
-              {product?.name ?? "Unknown User"}
-            </span>
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "category",
-    header: "Category",
-    cell: ({ row }) => <span>{row.getValue("category")}</span>,
-  },
-  {
-    accessorKey: "info",
-    header: "Info",
-    cell: ({ row }) => {
-      const info = row.original.info;
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <p>
-              <span>No of sale:</span> {info?.soldItems}
-              <br />
-              <span>Base Price:</span> {info?.basePrice}
-              <br />
-              <span>Rating:</span> {info?.ratings}
-            </p>
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "stock",
-    header: "Stock",
-    cell: ({ row }) => <span>{row.getValue("stock")}</span>,
-  },
-  {
-    accessorKey: "seller",
-    header: "Seller",
-    cell: ({ row }) => {
-      return <span>{row.getValue("seller")}</span>;
-    },
-  },
-  {
-    accessorKey: "published",
-    header: "Published",
-    cell: ({ row }) => {
-      const published = row.original.published;
-      return <Switch color="success" />;
-    },
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center gap-1">
-          <Link
-            href="/utility/invoice/preview/1"
-            className="flex items-center p-2 border-b text-info hover:text-info-foreground bg-info/40 hover:bg-info duration-200 transition-all rounded-full"
-          >
-            <SquarePen className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 text-destructive bg-destructive/40 duration-200 transition-all hover:bg-destructive/80 hover:text-destructive-foreground rounded-full"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Link>
-        </div>
-      );
-    },
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/data.ts b/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/data.ts
deleted file mode 100644
index 96ccb6fd..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/data.ts
+++ /dev/null
@@ -1,903 +0,0 @@
-import { DataProps } from "./columns";
-export const data: DataProps[] = [
-  {
-    id: 1,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 2,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 3,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 4,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 5,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 6,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 7,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 8,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 9,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 10,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 11,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 12,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 13,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 14,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 15,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 16,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 17,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 18,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 19,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 20,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 21,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 22,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 23,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 24,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 25,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 26,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 27,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 28,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 29,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 30,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 31,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 32,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 33,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 34,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 35,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 36,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 37,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 38,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 39,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 40,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 41,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 42,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 43,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 44,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 45,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 46,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 47,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 48,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 49,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-  {
-    id: 50,
-    product: {
-      name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
-      image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
-    },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
-      soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
-    },
-    stock: 1590,
-    published:true,
-    action: null,
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/index.tsx b/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/index.tsx
deleted file mode 100644
index 618c7d0b..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/index.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-
-import { CardContent } from "@/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-const TransactionsTable = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-6 border-b border-solid border-default-200">
-        <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-          Products List
-        </div>
-        <div className="flex-none">
-          <div className="flex items-center gap-4 flex-wrap">
-            <Select>
-              <SelectTrigger className=" w-[150px]">
-                <SelectValue placeholder="Bulk Action" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Bulk Action</SelectLabel>
-                  <SelectItem value="all">All</SelectItem>
-                  <SelectItem value="paid">Paid</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="failed">Failed</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Select>
-              <SelectTrigger className=" w-[80px]">
-                <SelectValue placeholder="Date" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Date</SelectLabel>
-                  <SelectItem value="all">All</SelectItem>
-                  <SelectItem value="paid">Paid</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="failed">Failed</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="w-full "
-            />
-          </div>
-        </div>
-      </div>
-
-      <CardContent className="pt-6">
-        <div className="border border-solid border-default-200 rounded-lg overflow-hidden border-t-0">
-          <Table>
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead className="last:text-start" key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </CardContent>
-      <TablePagination table={table} />
-    </div>
-  );
-};
-export default TransactionsTable;
diff --git a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/table-pagination.tsx b/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/table-pagination.tsx
deleted file mode 100644
index fab9b075..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/table-pagination.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/sellers/layout.tsx b/app/[locale]/(protected)/ecommerce/backend/sellers/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/sellers/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/backend/sellers/page.tsx b/app/[locale]/(protected)/ecommerce/backend/sellers/page.tsx
deleted file mode 100644
index bc52d622..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/sellers/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Card } from "@/components/ui/card";
-import TransactionsTable from "./transactions";
-
-const Sellers = () => {
-  return (
-    <div>
-      Sellers
-      <Card>
-        <TransactionsTable />
-      </Card>
-    </div>
-  );
-};
-
-export default Sellers;
diff --git a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/columns.tsx b/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/columns.tsx
deleted file mode 100644
index 9faa1fe1..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/columns.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { SquarePen, Trash2, TriangleAlert } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from '@/i18n/routing';
-
-export type DataProps = {
-  id: string | number;
-  phone: string;
-  seller: string;
-  date: string;
-  email: string;
-  store: string;
-  quantity: number;
-  action: React.ReactNode;
-};
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="bg-default-100"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="bg-default-100"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-
-  {
-    accessorKey: "seller",
-    header: "Billing Name",
-    cell: ({ row }) => {
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <span className="text-sm text-default-600 whitespace-nowrap">
-              {row.getValue("seller")}
-            </span>
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "phone",
-    header: "Phone",
-    cell: ({ row }) => <span>{row.getValue("phone")}</span>,
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-    cell: ({ row }) => <span>{row.getValue("email")}</span>,
-  },
-  {
-    accessorKey: "date",
-    header: "Create Date",
-    cell: ({ row }) => {
-      return <span>{row.getValue("date")}</span>;
-    },
-  },
-  {
-    accessorKey: "quantity",
-    header: "Products",
-    cell: ({ row }) => {
-      return <span>{row.getValue("quantity")}</span>;
-    },
-  },
-  {
-    accessorKey: "store",
-    header: "Store",
-    cell: ({ row }) => {
-      return <span> {row.getValue("store")}</span>;
-    },
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center gap-1">
-          <Link
-            href="/utility/invoice/preview/1"
-            className="flex items-center p-2 border-b text-info hover:text-info-foreground bg-info/40 hover:bg-info duration-200 transition-all rounded-full"
-          >
-            <SquarePen className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 border-b text-warning hover:text-warning-foreground bg-warning/40 hover:bg-warning duration-200 transition-all rounded-full"
-          >
-            <TriangleAlert className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 text-destructive bg-destructive/40 duration-200 transition-all hover:bg-destructive/80 hover:text-destructive-foreground rounded-full"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Link>
-        </div>
-      );
-    },
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/data.ts b/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/data.ts
deleted file mode 100644
index bcbc43d0..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/data.ts
+++ /dev/null
@@ -1,503 +0,0 @@
-import { DataProps } from "./columns";
-export const data: DataProps[] = [
-  {
-    id: 1,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "3/26/2022",
-    store: 'Codeshaper',
-    quantity: 13,
-    action: null,
-  },
-  {
-    id: 2,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "2/6/2022",
-    store: 'Codeshaper',
-    quantity: 13,
-    action: null,
-  },
-  {
-    id: 3,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "9/6/2021",
-    store: 'Codeshaper',
-    quantity: 1,
-    action: null,
-  },
-  {
-    id: 4,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "11/7/2021",
-    store: 'Codeshaper',
-    quantity: 13,
-    action: null,
-  },
-  {
-    id: 5,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "5/6/2022",
-    store: 'Codeshaper',
-    quantity: 12,
-    action: null,
-  },
-  {
-    id: 6,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "2/14/2022",
-    store: 'Codeshaper',
-    quantity: 12,
-    action: null,
-  },
-  {
-    id: 7,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "7/30/2022",
-    store: 'Codeshaper',
-    quantity: 6,
-    action: null,
-  },
-  {
-    id: 8,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "6/30/2022",
-    store: 'Codeshaper',
-    quantity: 9,
-    action: null,
-  },
-  {
-    id: 9,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "8/9/2022",
-    store: 'Codeshaper',
-    quantity: 8,
-    action: null,
-  },
-  {
-    id: 10,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "8/4/2022",
-    store: 'Codeshaper',
-    quantity: 12,
-    action: null,
-  },
-  {
-    id: 11,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "4/5/2022",
-    store: 'Codeshaper',
-    quantity: 8,
-    action: null,
-  },
-  {
-    id: 12,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "8/9/2022",
-    store: 'Codeshaper',
-    quantity: 2,
-    action: null,
-  },
-  {
-    id: 13,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "2/10/2022",
-    store: 'Codeshaper',
-    quantity: 11,
-    action: null,
-  },
-  {
-    id: 14,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "2/10/2022",
-    store: 'Codeshaper',
-    quantity: 2,
-    action: null,
-  },
-  {
-    id: 15,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "5/20/2022",
-    store: 'Codeshaper',
-    quantity: 4,
-    action: null,
-  },
-  {
-    id: 16,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "5/3/2022",
-    store: 'Codeshaper',
-    quantity: 15,
-    action: null,
-  },
-  {
-    id: 17,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "10/31/2021",
-    store: 'Codeshaper',
-    quantity: 11,
-    action: null,
-  },
-  {
-    id: 18,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "1/13/2022",
-    store: 'Codeshaper',
-    quantity: 5,
-    action: null,
-  },
-  {
-    id: 19,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "6/14/2022",
-    store: 'Codeshaper',
-    quantity: 5,
-    action: null,
-  },
-  {
-    id: 20,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "10/8/2021",
-    store: 'Codeshaper',
-    quantity: 4,
-    action: null,
-  },
-  {
-    id: 21,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "11/17/2021",
-    store: 'Codeshaper',
-    quantity: 9,
-    action: null,
-  },
-  {
-    id: 22,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "4/4/2022",
-    store: 'Codeshaper',
-    quantity: 9,
-    action: null,
-  },
-  {
-    id: 23,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "3/21/2022",
-    store: 'Codeshaper',
-    quantity: 5,
-    action: null,
-  },
-  {
-    id: 24,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "6/18/2022",
-    store: 'Codeshaper',
-    quantity: 12,
-    action: null,
-  },
-  {
-    id: 25,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "8/15/2022",
-    store: 'Codeshaper',
-    quantity: 8,
-    action: null,
-  },
-  {
-    id: 26,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "4/28/2022",
-    store: 'Codeshaper',
-    quantity: 8,
-    action: null,
-  },
-  {
-    id: 27,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "9/6/2021",
-    store: 'Codeshaper',
-    quantity: 7,
-    action: null,
-  },
-  {
-    id: 28,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "9/11/2021",
-    store: 'Codeshaper',
-    quantity: 4,
-    action: null,
-  },
-  {
-    id: 29,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "1/27/2022",
-    store: 'Codeshaper',
-    quantity: 5,
-    action: null,
-  },
-  {
-    id: 30,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "9/16/2021",
-    store: 'Codeshaper',
-    quantity: 6,
-    action: null,
-  },
-  {
-    id: 31,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "1/8/2022",
-    store: 'Codeshaper',
-    quantity: 1,
-    action: null,
-  },
-  {
-    id: 32,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "11/18/2021",
-    store: 'Codeshaper',
-    quantity: 1,
-    action: null,
-  },
-  {
-    id: 33,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "3/30/2022",
-    store: 'Codeshaper',
-    quantity: 13,
-    action: null,
-  },
-  {
-    id: 34,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "11/13/2021",
-    store: 'Codeshaper',
-    quantity: 5,
-    action: null,
-  },
-  {
-    id: 35,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "12/7/2021",
-    store: 'Codeshaper',
-    quantity: 11,
-    action: null,
-  },
-  {
-    id: 36,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "9/9/2021",
-    store: 'Codeshaper',
-    quantity: 15,
-    action: null,
-  },
-  {
-    id: 37,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "2/12/2022",
-    store: 'Codeshaper',
-    quantity: 5,
-    action: null,
-  },
-  {
-    id: 38,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "3/6/2022",
-    store: 'Codeshaper',
-    quantity: 5,
-    action: null,
-  },
-  {
-    id: 39,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "7/25/2022",
-    store: 'Codeshaper',
-    quantity: 14,
-    action: null,
-  },
-  {
-    id: 40,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "3/2/2022",
-    store: 'Codeshaper',
-    quantity: 8,
-    action: null,
-  },
-  {
-    id: 41,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "12/8/2021",
-    store: 'Codeshaper',
-    quantity: 8,
-    action: null,
-  },
-  {
-    id: 42,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "11/22/2021",
-    store: 'Codeshaper',
-    quantity: 11,
-    action: null,
-  },
-  {
-    id: 43,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "4/6/2022",
-    store: 'Codeshaper',
-    quantity: 1,
-    action: null,
-  },
-  {
-    id: 44,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "2/4/2022",
-    store: 'Codeshaper',
-    quantity: 4,
-    action: null,
-  },
-  {
-    id: 45,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "3/30/2022",
-    store: 'Codeshaper',
-    quantity: 15,
-    action: null,
-  },
-  {
-    id: 46,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "11/20/2021",
-    store: 'Codeshaper',
-    quantity: 2,
-    action: null,
-  },
-  {
-    id: 47,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "10/24/2021",
-    store: 'Codeshaper',
-    quantity: 11,
-    action: null,
-  },
-  {
-    id: 48,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "6/30/2022",
-    store: 'Codeshaper',
-    quantity: 10,
-    action: null,
-  },
-  {
-    id: 49,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "11/16/2021",
-    store: 'Codeshaper',
-    quantity: 4,
-    action: null,
-  },
-  {
-    id: 50,
-    seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
-    date: "8/15/2022",
-    store: 'Codeshaper',
-    quantity: 6,
-    action: null,
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/index.tsx b/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/index.tsx
deleted file mode 100644
index b4a66480..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
-import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/routing';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-const TransactionsTable = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-
-
-          <Select>
-            <SelectTrigger className=" w-[150px]">
-              <SelectValue placeholder="Bulk Action" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Bulk Action</SelectLabel>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="paid">Paid</SelectItem>
-                <SelectItem value="pending">Pending</SelectItem>
-                <SelectItem value="failed">Failed</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex-none">
-          <div className="flex items-center gap-4 flex-wrap">
-            <Select>
-              <SelectTrigger className=" w-[80px]">
-                <SelectValue placeholder="Date" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Date</SelectLabel>
-                  <SelectItem value="all">All</SelectItem>
-                  <SelectItem value="paid">Paid</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="failed">Failed</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="w-full "
-            />
-          </div>
-        </div>
-      </div>
-
-      <CardContent>
-        <div className="border border-solid border-default-200 rounded-lg overflow-hidden border-t-0">
-          <Table>
-            <TableHeader className="bg-default-200">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead className="last:text-start" key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </CardContent>
-      <TablePagination table={table} />
-    </div>
-  );
-};
-export default TransactionsTable;
diff --git a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/table-pagination.tsx b/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/table-pagination.tsx
deleted file mode 100644
index fab9b075..00000000
--- a/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/table-pagination.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/[id]/color-filter.tsx b/app/[locale]/(protected)/ecommerce/frontend/[id]/color-filter.tsx
deleted file mode 100644
index afb71eb8..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/[id]/color-filter.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-import React, { useState } from "react";
-  const colors = [
-    { code: "Black" },
-    { code: "Pink" },
-    { code: "Orange" },
-    { code: "Red" },
-    { code: "Yellow" },
-  ];
-const ColorFilter = () => {
-  const [color, setColor] = useState("Black");
-  return (
-    <div>
-      {" "}
-      <div className="mb-4">
-        <div className="pb-2 flex items-center space-x-2 rtl:space-x-reverse mb-3">
-          <p className="font-normal text-sm lg:text-base text-default-500 ">
-            Color:
-          </p>
-          <p className="font-medium text-sm lg:text-base text-default-900 ">
-            {color}
-          </p>
-        </div>
-        <div className="flex space-x-4 rtl:space-x-reverse h-6 ">
-          {colors.map((innerColor, i) => {
-            return (
-              <label key={i}>
-                <input
-                  type="radio"
-                  name="color"
-                  value={innerColor.code}
-                  onChange={() => setColor(innerColor.code)}
-                  className="hidden"
-                />
-                <div
-                  style={{ backgroundColor: innerColor.code }}
-                  className={`h-7 w-7 ${
-                    innerColor.code === color
-                      ? "ring-default-900 "
-                      : "ring-default-300"
-                  } ring-1 ring-default-400 ring-offset-2 ring-offset-default-50 cursor-pointer rounded-sm`}
-                />
-              </label>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ColorFilter;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/[id]/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/[id]/page.tsx
deleted file mode 100644
index a650f520..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/[id]/page.tsx
+++ /dev/null
@@ -1,570 +0,0 @@
-import { Alert } from "@/components/ui/alert";
-import { getProductById } from "../data";
-
-import { Icon } from "@/components/ui/icon";
-import { Badge } from "@/components/ui/badge";
-import CounterButton from "../counter-button";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import ColorFilter from "./color-filter";
-import SizeFilter from "./size-filter";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import ThumbSliderCom from "./thumb-slider";
-import ProductCounterButton from "@/components/ecommarce/product-counter-button";
-
-const ProductDetails = async ({
-  params: { id },
-}: {
-  params: { id: string };
-}) => {
-  const product = await getProductById(id);
-
-  if (!product)
-    return <Alert color="destructive"> project id is not valid</Alert>;
-
-  const lists = [
-    {
-      id: 1,
-    },
-    {
-      id: 2,
-    },
-    {
-      id: 3,
-    },
-    {
-      id: 4,
-    },
-    {
-      id: 5,
-    },
-    {
-      id: 6,
-    },
-  ];
-  const lists1 = [
-    {
-      id: 1,
-      text: "Brand : Easy",
-    },
-    {
-      id: 2,
-      text: "Material : Cotton",
-    },
-    {
-      id: 3,
-      text: "Material : Cotton",
-    },
-    {
-      id: 4,
-      text: "Pattern : Solid Color",
-    },
-    {
-      id: 5,
-      text: "Collar : Square Neck",
-    },
-    {
-      id: 6,
-      text: "Color : As given picture",
-    },
-    {
-      id: 7,
-      text: "Sleeve Length : Long Sleeve",
-    },
-  ];
-  const lists2 = [
-    {
-      id: 1,
-      text: "Plate Type : Slim",
-    },
-    {
-      id: 2,
-      text: "Sales Channel Type : E-commerce Only Sells Online",
-    },
-    {
-      id: 3,
-      text: "Material Composition : 100% Cotton",
-    },
-    {
-      id: 4,
-      text: "Size : M,L,XL",
-    },
-    {
-      id: 5,
-      text: 'M- long: 29", body: 40"',
-    },
-    {
-      id: 6,
-      text: 'L- long: 30 ", body: 42"',
-    },
-    {
-      id: 7,
-      text: 'XL- long: 31", body: 44"',
-    },
-  ];
-
-  return (
-    <div className="w-full bg-default-50  p-6 rounded-lg">
-      <div className="pb-5">
-        <div className="grid grid-cols-12  md:gap-4 md:space-y-0 space-y-4 sm:space-y-4 ">
-          <div className=" col-span-12 md:col-span-5 lg:col-span-4 space-y-4 ">
-            <ThumbSliderCom product={product} />
-          </div>
-          <div className="col-span-12 md:col-span-7 lg:col-span-8 space-y-2 ">
-            <div className="space-y-2">
-              <h1 className="text-default-900 text-xl lg:text-2xl font-medium ">
-                {product?.name}
-              </h1>
-              <p className="flex items-center text-default-900  font-normal text-sm lg:text-base gap-1.5">
-                <Icon icon="ph:star-fill" className="text-yellow-400" />
-                <Icon icon="ph:star-fill" className="text-yellow-400" />
-                <Icon icon="ph:star-fill" className="text-yellow-400" />
-                <Icon icon="ph:star-fill" className="text-yellow-400" />
-                <Icon icon="ph:star-fill" className="text-default-300/80" />
-                <span className="ltr:pl-2 rtl:pr-2 text-default-500 ">
-                  (789 reviews)
-                </span>
-              </p>
-              <div className="flex items-center gap-2">
-                <p className="font-normal text-sm lg:text-base text-default-500  ">
-                  Brand:
-                </p>
-                <p className="font-medium text-sm lg:text-base text-default-900 ">
-                  {product.brand}
-                </p>
-              </div>
-              <div className="flex items-center gap-2">
-                <p className="font-normal text-sm lg:text-base text-default-500  ">
-                  Available:
-                </p>
-                <p className="font-medium text-sm lg:text-base text-default-900 ">
-                  In Stock
-                </p>
-              </div>
-              <p className="font-normal text-sm lg:text-base text-default-500 ">
-                {product?.desc}
-              </p>
-            </div>
-            <div className="pb-1">
-              <ColorFilter />
-              <SizeFilter />
-            </div>
-            <div className="w-full border-t border-default-300 border-solid "></div>
-
-            <div className="overflow-x-auto ">
-              <div className="inline-block max-w-full align-middle">
-                <div className="overflow-hidden ">
-                  <table className="min-w-full   ">
-                    <tbody className="bg-default-50   ">
-                      <tr className="space-x-6 rtl:space-x-reverse">
-                        <td className="table-td py-2 pl-0 rtl:pr-0 font-normal text-sm lg:text-base text-default-500   ">
-                          Price:
-                        </td>
-                        <td className="table-td py-2 space-x-2">
-                          <span className="text-default-900 font-semibold	text-base lg:text-xl">
-                            ${product?.price}
-                          </span>
-                          <del className="text-default-500  font-semibold text-base lg:text-xl ">
-                            {product.oldPrice}
-                          </del>
-                          <Badge className=" font-normal text-[10px] bg-destructive text-white ">
-                            <span>40%</span>
-                          </Badge>
-                        </td>
-                      </tr>
-                      <tr className="space-x-1 rtl:space-x-reverse">
-                        <td className="table-td py-2 pl-0 rtl:pr-0 font-normal text-sm lg:text-base text-default-500   ">
-                          Quantity:
-                        </td>
-                        <td className="table-td py-2 ">
-                          <ProductCounterButton />
-                        </td>
-                      </tr>
-                      <tr className="space-x-1 rtl:space-x-reverse">
-                        <td className="table-td py-2 pl-0 rtl:pr-0 font-normal text-sm lg:text-base text-default-500   ">
-                          Total Price:
-                        </td>
-                        <td className="table-td py-2 text-default-900 font-semibold	text-base lg:text-xl ">
-                          $336
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-
-            <div className="flex gap-4 pb-5">
-              <Button size="md" variant="outline">
-                <Icon
-                  icon="eva:shopping-cart-fill"
-                  className="w-4 h-4 me-2  text-sm leading-none"
-                />
-                Add to Cart
-              </Button>
-              <Button size="md" variant="outline">
-                Buy Now
-              </Button>
-              <Button size="md" variant="outline">
-                <Icon
-                  icon="octicon:heart-16"
-                  className="w-4 h-4 text-sm leading-none"
-                />
-              </Button>
-              <Button size="md">
-                <Icon
-                  icon="eva:repeat-fill"
-                  className="w-4 h-4 text-sm leading-none"
-                />
-              </Button>
-            </div>
-            <div className="flex gap-3 ">
-              <p className="font-normal text-sm lg:text-base text-default-500 ">
-                Share to:
-              </p>
-              <div className="flex items-center gap-3 ">
-                <button
-                  type="button"
-                  className="border border-solid p-2 rounded h-8 w-8 flex justify-center items-center"
-                >
-                  <Image
-                    height={500}
-                    width={500}
-                    className="w-full h-full"
-                    src="/images/e-commerce/productDetails/gmail.svg"
-                    alt=""
-                  />
-                </button>
-                <button
-                  type="button"
-                  className="border border-solid p-2 rounded h-8 w-8 flex justify-center items-center"
-                >
-                  <Image
-                    height={500}
-                    width={500}
-                    className="w-full h-full"
-                    src="/images/e-commerce/productDetails/facebook.svg"
-                    alt=""
-                  />
-                </button>
-                <button
-                  type="button"
-                  className="border border-solid p-2 rounded h-8 w-8 flex justify-center items-center"
-                >
-                  <Image
-                    height={500}
-                    width={500}
-                    className="w-full h-full"
-                    src="/images/e-commerce/productDetails/twitter.svg"
-                    alt=""
-                  />
-                </button>
-                <button
-                  type="button"
-                  className="border border-solid p-2 rounded h-8 w-8 flex justify-center items-center"
-                >
-                  <Image
-                    height={500}
-                    width={500}
-                    className="w-full h-full"
-                    src="/images/e-commerce/productDetails/insta.svg"
-                    alt=""
-                  />
-                </button>
-                <button
-                  type="button"
-                  className="border border-solid p-2 rounded h-8 w-8 flex justify-center items-center"
-                >
-                  <Image
-                    height={500}
-                    width={500}
-                    className="w-full h-full"
-                    src="/images/e-commerce/productDetails/linkedin.svg"
-                    alt=""
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-5">
-        <div className="border border-solid border-1  rounded">
-          <Card>
-            <CardContent>
-              <Tabs defaultValue="description">
-                <TabsList className="lg:space-x-8 md:space-x-4 space-x-0 rtl:space-x-reverse">
-                  <TabsTrigger
-                    className="text-lg text-default-900 border-solid  border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:text-default data-[state=active]:shadow-none data-[state=active]:border-default-800 transition-all duration-200"
-                    value="description"
-                  >
-                    Description
-                  </TabsTrigger>
-                  <TabsTrigger
-                    className="text-lg text-default-900 border-solid  border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:text-default data-[state=active]:shadow-none data-[state=active]:border-default-800 transition-all duration-200"
-                    value="information"
-                  >
-                    Additional Information
-                  </TabsTrigger>
-                </TabsList>
-                <TabsContent value="description">
-                  <div className="text-default-600  text-sm lg:text-base font-normal">
-                    <p>
-                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                      sed diam nonumy eirmod tempor invidunt ut labore et dolore
-                      magna. Lorem ipsum dolor sit amet, consetetur sadipscing
-                      elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-                      dolore magna. Lorem ipsum dolor sit amet, consetetur
-                      sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                      ut labore et dolore magna.
-                    </p>
-                    <ul className="space-y-3 p-6 lg:ml-28 ml-14 rounded-md bg-default-white ">
-                      {lists.map((item, i) => (
-                        <li
-                          key={i}
-                          className="text-sm lg:text-base text-default-600  flex gap-2 items-center"
-                        >
-                          <span className="h-[10px] w-[10px] bg-default-900 rounded-full inline-block"></span>
-                          <span>Lorem ipsum dolor sit amet.</span>
-                        </li>
-                      ))}
-                    </ul>
-                    <p className="text-default-600  text-sm lg:text-base font-normal">
-                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                      sed diam nonumy eirmod tempor invidunt ut labore et dolore
-                      magna. Lorem ipsum dolor sit amet, consetetur sadipscing
-                      elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-                      dolore magna. Lorem ipsum dolor sit amet, consetetur
-                      sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                      ut labore et dolore magna.
-                    </p>
-                  </div>
-                </TabsContent>
-                <TabsContent value="information">
-                  <div className="text-default-600  text-sm font-normal">
-                    <div className="flex justify-between items-start pb-4">
-                      <ul className="space-y-3 rounded-md bg-trasparent  ">
-                        {lists1.map((item, i) => (
-                          <li
-                            key={i}
-                            className="text-sm lg:text-base text-default-600  flex gap-2 items-center"
-                          >
-                            <span className="h-[10px] w-[10px] bg-default-900 rounded-full inline-block"></span>
-                            <span>{item.text}</span>
-                          </li>
-                        ))}
-                      </ul>
-                      <ul className="space-y-3 rounded-md bg-trasparent ">
-                        {lists2.map((item, i) => (
-                          <li
-                            key={i}
-                            className="text-sm lg:text-base text-default-600  flex gap-2 items-center"
-                          >
-                            <span className="h-[10px] w-[10px] bg-default-900 rounded-full inline-block"></span>
-                            <span>{item.text}</span>
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                    <p className="text-default-600  text-sm lg:text-base font-normal">
-                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                      sed diam nonumy eirmod tempor invidunt ut labore et dolore
-                      magna. Lorem ipsum dolor sit amet, consetetur sadipscing
-                      elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-                      dolore magna. Lorem ipsum dolor sit amet, consetetur
-                      sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                      ut labore et dolore magna.
-                    </p>
-                  </div>
-                </TabsContent>
-              </Tabs>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="border border-solid border-1  rounded p-6">
-          <h6 className="text-default-900 pb-6 text-lg lg:text-xl">
-            Reviews & Ratings
-          </h6>
-          <div className="space-y-12">
-            <div className="bg-default-200  p-6 rounded grid grid-cols-12 	">
-              <div className="col-span-12 items-center md:col-span-6 flex gap-3 justify-center md:justify-start  order-2 md:order-1 mt-3 md:mt-0">
-                <div className="font-medium items-center flex ">
-                  <p className="text-default-900 text-base lg:text-lg">4.2</p>
-                  <p className="text-default-500  text-sm lg:text-base">/5</p>
-                </div>
-                <div className="flex items-center md:justify-start text-default-900 font-normal text-sm lg:text-base">
-                  <div className="flex items-center gap-1.5">
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-default-300/80" />
-                  </div>
-                  <div className=" text-default-500 ">(789 reviews)</div>
-                </div>
-              </div>
-              <div className="col-span-12 md:col-span-6 flex justify-center md:justify-end items-center order-1 md:order-2">
-                <button
-                  type="button"
-                  className="bg-yellow-500 text-white rounded px-6 py-3 text-sm lg:text-base"
-                >
-                  Rate this product
-                </button>
-              </div>
-            </div>
-            <div className="flex gap-3 ">
-              <Avatar>
-                <AvatarImage src="/images/e-commerce/productDetails/1.png" />
-              </Avatar>
-              <div>
-                {" "}
-                <div>
-                  <p className="text-default-900  font-medium text-sm lg:text-base pb-1">
-                    Devied Beakhum
-                  </p>
-                  <p className="text-default-500  font-normal text-xs  pb-1">
-                    08-03-2023
-                  </p>
-                  <p className="flex items-center text-default-900  font-normal text-sm lg:text-base gap-1.5 pb-3">
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                  </p>
-                  <p className="pb-4 text-sm  lg:text-base text-default-500 ">
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                    diam nonumy eirmod tempor invidunt ut labore et dolore
-                    magna. Lori ipsum dolor sit amet, consetetur sadipscing
-                    elitr, sed diam nonumy eirmod tempor invidunt.
-                  </p>
-                  <div className="flex gap-2 pb-3">
-                    <p className="font-normal text-sm lg:text-base text-default-500 ">
-                      Info:
-                    </p>
-                    <p className="font-medium text-sm lg:text-base text-success ">
-                      Verified Purchase
-                    </p>
-                  </div>
-                </div>
-                <div className="grid grid-cols-12 ">
-                  <div className="col-span-12 flex justify-end gap-4">
-                    <p className="flex items-center gap-2 ">
-                      <span className="cursor-pointer ">
-                        <Icon icon="heroicons:hand-thumb-up" />
-                      </span>
-                      <span>02</span>
-                    </p>
-                    <p className="flex items-center gap-2 ">
-                      <span className="cursor-pointer ">
-                        <Icon icon="carbon:reply" />
-                      </span>
-                      <span>00</span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex gap-3 ">
-              <Avatar>
-                <AvatarImage src="/images/e-commerce/productDetails/1.png" />
-              </Avatar>
-              <div>
-                {" "}
-                <div>
-                  <p className="text-default-900  font-medium text-sm lg:text-base pb-1">
-                    Devied Beakhum
-                  </p>
-                  <p className="text-default-500  font-normal text-xs  pb-1">
-                    08-03-2023
-                  </p>
-                  <p className="flex items-center text-default-900  font-normal text-sm lg:text-base gap-1.5 pb-3">
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                    <Icon icon="ph:star-fill" className="text-yellow-400" />
-                  </p>
-                  <p className="pb-4 text-sm lg:text-base text-default-500 ">
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                    diam nonumy eirmod tempor invidunt ut labore et dolore
-                    magna. Lori ipsum dolor sit amet, consetetur sadipscing
-                    elitr, sed diam nonumy eirmod tempor invidunt.
-                  </p>
-                  <div className="flex gap-3 pb-3">
-                    <p className="font-normal text-sm lg:text-base text-default-500 ">
-                      Info:
-                    </p>
-                    <p className="font-medium text-sm lg:text-base text-success ">
-                      Verified Purchase
-                    </p>
-                  </div>
-                </div>
-                <div className="grid grid-cols-12">
-                  <div className=" col-span-12 mb-3">
-                    <div className="flex gap-3 mb-9">
-                      <div className=" h-[90px] w-[90px] rounded bg-default-100 p-1 overflow-hidden ">
-                        <Image
-                          alt=""
-                          height={300}
-                          width={300}
-                          className="h-full w-full object-contain"
-                          src="/images/e-commerce/productDetails/1.png"
-                        />
-                      </div>
-                      <div className=" h-[90px] w-[90px] rounded bg-default-100 overflow-hidden p-1">
-                        <Image
-                          alt=""
-                          height={300}
-                          width={300}
-                          className="h-full w-full object-contain"
-                          src="/images/e-commerce/productDetails/2.png"
-                        />
-                      </div>
-                      <div className=" h-[90px] w-[90px] rounded bg-default-100 overflow-hidden p-1">
-                        <Image
-                          alt=""
-                          height={300}
-                          width={300}
-                          className="h-full w-full object-contain"
-                          src="/images/e-commerce/productDetails/3.png"
-                        />
-                      </div>
-                    </div>
-                    <div className=" max-h-[400px] max-w-[346px] rounded  bg-default-100 overflow-hidden p-1">
-                      <Image
-                        alt=""
-                        height={300}
-                        width={300}
-                        className="h-full w-full object-contain"
-                        src="/images/e-commerce/productDetails/3.png"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-span-12 flex justify-end gap-4">
-                    <p className="flex items-center gap-2 ">
-                      <span className="cursor-pointer ">
-                        <Icon icon="heroicons:hand-thumb-up" />
-                      </span>
-                      <span>02</span>
-                    </p>
-                    <p className="flex items-center gap-2 ">
-                      <span className="cursor-pointer ">
-                        <Icon icon="carbon:reply" />
-                      </span>
-                      <span>00</span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-export default ProductDetails;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/[id]/size-filter.tsx b/app/[locale]/(protected)/ecommerce/frontend/[id]/size-filter.tsx
deleted file mode 100644
index 1f2ca565..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/[id]/size-filter.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-import { useState } from "react";
-
-const sizes = [{ code: "S" }, { code: "M" }, { code: "L" }, { code: "XL" }];
-
-const SizeFilter = () => {
-  const [size, setSize] = useState("S");
-  return (
-    <div>
-      {" "}
-      <div>
-        <div className="pb-2 flex items-center space-x-2 rtl:space-x-reverse mb-3">
-          <p className="font-normal text-sm lg:text-base text-default-500 ">
-            Size:
-          </p>
-          <p className="font-medium text-base text-default-900">
-            {size}
-          </p>
-        </div>
-        <div className="flex items-center space-x-4 rtl:space-x-reverse mb-4 h-6 ">
-          {sizes.map((list, i) => {
-            return (
-              <label key={i}>
-                <input
-                  type="radio"
-                  name="color"
-                  value={list.code}
-                  onChange={() => setSize(list.code)}
-                  className="hidden h-7 w-7"
-                />
-                <div
-                  style={{ backgroundColor: list.code }}
-                  className={`h-7 w-7 ${
-                    list.code === size
-                      ? "ring-default-900"
-                      : ""
-                  } ring-1 ring-default-400 ring-offset-2 flex justify-center items-center ring-offset-default-50 cursor-pointer rounded-sm`}
-                >
-                  {list.code}
-                </div>
-              </label>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SizeFilter;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/[id]/thumb-slider.tsx b/app/[locale]/(protected)/ecommerce/frontend/[id]/thumb-slider.tsx
deleted file mode 100644
index 32aceaa4..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/[id]/thumb-slider.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-import { useState } from "react";
-
-import { Swiper, SwiperSlide } from "swiper/react";
-import { product } from "../data";
-
-import "swiper/css";
-import "swiper/css/free-mode";
-import "swiper/css/navigation";
-import "swiper/css/thumbs";
-
-import Image from "next/image";
-import { FreeMode, Navigation, Thumbs } from "swiper/modules";
-import { Swiper as SwiperType } from "swiper/types";
-
-const ThumbSliderCom = ({ product }: { product: product }) => {
-
-  const images = [
-    "/images/e-commerce/product-card/classical-black-tshirt.png",
-    "/images/e-commerce/product-card/black-t-shirt.png",
-    "/images/e-commerce/product-card/check-shirt.png",
-    "/images/e-commerce/product-card/gray-jumper.png",
-    "/images/e-commerce/product-card/gray-t-shirt.png",
-    "/images/e-commerce/product-card/pink-blazer.png",
-    "/images/e-commerce/product-card/red-t-shirt.png",
-    "/images/e-commerce/product-card/yellow-frok.png",
-    "/images/e-commerce/product-card/yellow-jumper.png",
-  ]
-
-  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
-
-
-  return (
-    <>
-      <Swiper
-        loop={true}
-        spaceBetween={10}
-        navigation={false}
-        thumbs={{ swiper: thumbsSwiper }}
-        modules={[FreeMode, Navigation, Thumbs]}
-        className="mySwiper2"
-      >
-        {images.map((image, i) => {
-          return (
-            <SwiperSlide
-              key={i}
-              className="w-full bg-default-200 dark:bg-default-900 rounded-md p-12"
-            >
-              <Image
-                width={500}
-                height={400}
-                className="h-[350px] w-full  object-contain  transition-all duration-300 group-hover:scale-105"
-                src={image}
-                alt="."
-              />
-
-            </SwiperSlide>
-          );
-        })}
-      </Swiper>
-
-      <div className="flex mt-6 gap-3 ">
-        <Swiper
-          onSwiper={setThumbsSwiper}
-          loop={true}
-          spaceBetween={10}
-          slidesPerView={4}
-          freeMode={true}
-          watchSlidesProgress={true}
-          modules={[FreeMode, Navigation, Thumbs]}
-          className="mySwiper"
-        >
-          {images.map((image, j) => {
-            return (
-              <SwiperSlide
-                key={`second_slider_${j}`}
-                className="h-[90px] w-[90px] py-3.5 px-[17px] bg-default-200 dark:bg-default-900 rounded cursor-pointer"
-              >
-                <Image
-                  width={100}
-                  height={150}
-                  className="h-20 w-full  object-contain"
-                  src={image}
-                  alt="."
-                />
-              </SwiperSlide>
-            );
-          })}
-        </Swiper>
-      </div>
-    </>
-  );
-};
-
-export default ThumbSliderCom;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/cart/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/cart/page.tsx
deleted file mode 100644
index 79664265..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/cart/page.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from "react";
-import { Icon } from "@/components/ui/icon";
-import { getProducts } from "../../data";
-import Image from "next/image";
-import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/routing';
-const CartPage = async () => {
-  const products = await getProducts();
-  const items = products.slice(0, 4);
-  return (
-    <div>
-      <div className=" space-y-7">
-        <div className="overflow-x-auto border-0">
-          <div className="inline-block min-w-full align-middle">
-            <div className="overflow-hidden  border-solid border-default-300 border rounded-md">
-              <table className="min-w-full divide-y divide-default-300 table-fixed  ">
-                <thead className="border-0">
-                  <tr>
-                    <th scope="col" className=" text-left px-3 py-3">
-                      Product
-                    </th>
-                    <th scope="col" className="  text-left py-3">
-                      Price
-                    </th>
-                    <th scope="col" className="px-3 text-left py-3">
-                      Quantity
-                    </th>
-                    <th scope="col" className=" text-left py-3">
-                      Total
-                    </th>
-                    <th scope="col" className=" text-right py-3 pe-3">
-                      Remove
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="bg-trasparent divide-default-300">
-                  {items.length > 0 ? (
-                    items?.map((item, i) => (
-                      <tr key={i}>
-                        <td className="inline-flex items-center gap-3 py-3">
-                          <div className="md:p-4 p-2 flex-none bg-default-200 dark:bg-default-900 rounded md:h-20 md:w-20 w-16 h-16 ms-3">
-                            <Image
-                              alt="product"
-                              src={item.img}
-                              width={100}
-                              height={100}
-                              className="w-full h-full object-contain"
-                            />
-                          </div>
-                          <div>
-                            <p className="text-default-900  md:text-base text-sm font-medium md:pb-2 pb-1 md:w-[280px] w-[100px] truncate">
-                              {item.name}
-                            </p>
-                            <p className="text-default-900  md:text-base text-sm font-medium">
-                              <span className="text-default-500  font-normal mr-1">
-                                Brand:
-                              </span>
-                              {item.brand}
-                            </p>
-                          </div>
-                        </td>
-                        <td className="px-3 py-3">${item.price}</td>
-                        <td className=" px-3 py-3">
-                          <div className="flex-1 h-8 w-[110px] flex border border-1 border-default-900 delay-150 ease-in-out  divide-x-[1px] rtl:divide-x-reverse text-sm font-normal divide-default-900  rounded">
-                            <button className="md:px-3 px-2 disabled:cursor-not-allowed">
-                              <Icon icon="eva:minus-fill" />
-                            </button>
-
-                            <span className="flex-1 text-xs  text-center flex items-center justify-center">
-                              0
-                            </span>
-                            <button className="md:px-3 px-2 disabled:cursor-not-allowed">
-                              <Icon icon="eva:plus-fill" />
-                            </button>
-                          </div>
-                        </td>
-                        <td className=" px-3 py-3">${item.price}</td>
-                        <td className=" text-right  px-6 py-3">
-                          <button className="bg-default-100 text-default-400 p-2.5 transition-all  mb-1.5 rounded-full hover:bg-destructive/20   hover:text-destructive duration-200 ">
-                            <Icon icon="heroicons:trash" />
-                          </button>
-                        </td>
-                      </tr>
-                    ))
-                  ) : (
-                    <tr>
-                      <td className=" text-center h-24 " colSpan={5}>
-                        {`No result's`}
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-                <tfoot className="mx-6">
-                  <tr className="border-t border-default-300 border-solid">
-                    <td className=" px-3 py-3 " colSpan={4}>
-                      <p className="md:text-base text-sm font-medium text-default-500 ">
-                        Subtotal:
-                      </p>
-                    </td>
-                    <td className=" px-6 py-3 text-right">
-                      <p className="md:text-base text-sm font-medium text-default-900 ">
-                        $200
-                      </p>
-                    </td>
-                  </tr>
-                </tfoot>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-wrap gap-2 md:mt-16 md:pb-14">
-        <div className="flex-1">
-          <Button asChild
-            variant="outline">
-            <Link href="/ecommerce/frontend">
-              <Icon icon="ion:arrow-back-outline" className="me-1" />
-              Add New Product
-            </Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild disabled>
-            <Link href="#">Go Back</Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild>
-            <Link href="/ecommerce/frontend/checkout/shipping-info"> Continue to shipping</Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CartPage;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/checkout-header.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/checkout-header.tsx
deleted file mode 100644
index 60240fad..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/checkout-header.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-import { usePathname } from "@/components/navigation";
-import { Icon } from "@/components/ui/icon";
-import { cn } from "@/lib/utils";
-
-const CheckoutHeader = () => {
-  const pathname = usePathname();
-
-  const stepsArray = [
-    {
-      step: 0,
-      icon: "mdi:cart-outline",
-      title: "My Cart",
-      href: "/ecommerce/frontend/checkout/cart",
-      active: pathname.includes("/ecommerce/frontend/checkout/cart"),
-    },
-    {
-      step: 1,
-      icon: "streamline:shipping-transfer-cart-package-box-fulfillment-cart-warehouse-shipping-delivery",
-      title: "Shipping Info",
-      href: "/ecommerce/frontend/checkout/shipping-info",
-      active: pathname.includes("/ecommerce/frontend/checkout/shipping-info"),
-    },
-    {
-      step: 2,
-      icon: "la:shipping-fast",
-      title: "Delivery Info",
-      href: "/ecommerce/frontend/checkout/delivery-info",
-      active: pathname.includes("/ecommerce/frontend/checkout/delivery-info"),
-    },
-    {
-      step: 3,
-      icon: "fluent:payment-32-regular",
-      title: "Payment",
-      href: "/ecommerce/frontend/checkout/payment",
-      active: pathname.includes("/ecommerce/frontend/checkout/payment"),
-    },
-    {
-      step: 4,
-      icon: "line-md:confirm-circle",
-      title: "Confirmation",
-      href: "/ecommerce/frontend/checkout/confirmation",
-      active: pathname.includes("/ecommerce/frontend/checkout/confirmation"),
-    },
-  ];
-
-  return (
-    <div>
-
-      <ul className="flex gap-4">
-        {stepsArray.map(({ step, active, icon, title }, index) => {
-          const isCurrentStep = active;
-          const isPastStep = stepsArray.findIndex((item) => item.active) > step;
-
-          return (
-            <li
-              key={index}
-              className={cn(
-                "flex-1 bg-default-50 items-center justify-center text-center border-solid lg:border border-default-300 rounded-t lg:border-b-8 rounded-b-lg xl:px-10 xl:py-7 lg:px-3 lg:py-6 transition-all duration-150",
-                {
-                  "border-b-success text-success": isPastStep,
-                  "lg:border-b-8 border-b-default text-default-900": isCurrentStep,
-                  "border-b-default-300 text-default-500": !isCurrentStep && !isPastStep,
-                }
-              )}
-            >
-              <div className="flex flex-col items-center justify-center space-y-3">
-                <Icon
-                  className={cn("h-8 w-8", {
-                    "text-success": isPastStep,
-                    "text-default": isCurrentStep,
-                    "text-default-500": !isCurrentStep && !isPastStep,
-                  })}
-                  icon={icon}
-                />
-                <div
-                  className={cn("", {
-                    "text-default-900": isCurrentStep,
-                    "text-success": isPastStep,
-                    "text-default-500": !isCurrentStep && !isPastStep,
-                  })}
-                >
-                  {step}.{title}
-                </div>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-export default CheckoutHeader;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/confirmation/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/confirmation/page.tsx
deleted file mode 100644
index f9b1eef4..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/confirmation/page.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import Image from "next/image";
-import { getProducts } from "../../data";
-import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/routing';
-import { Icon } from "@/components/ui/icon";
-
-const Confirmation = async () => {
-  const products = await getProducts();
-  const items = products.slice(0, 4);
-  return (
-    <div className="p-6">
-      <div className="text-center mb-8">
-        <h4 className="text-default-900  text-2xl font-medium pb-4">
-          Thank You for Your Order!
-        </h4>
-        <p className="text-default-900  text-base font-normal">
-          A copy or your order summary has been sent to
-          <span className="  text-base font-medium ml-1 cursor-pointer">
-            customer@example.com
-          </span>
-        </p>
-      </div>
-      <div className="border border-solid border-default-300 p-3 lg:p-6 rounded">
-        <p className="text-default-900  text-base font-medium pb-3 border-b border-solid border-default-300 mb-4">
-          Order Summary
-        </p>
-        <div className=" md:flex md:gap-3 lg:gap-5 space-y-3">
-          <div className="flex-1">
-            <div className="flex gap-2 lg:gap-12 ">
-              <div className=" font-medium  min-w-[110px] md:text-sm text-xs text-default-900   space-y-3 ">
-                <p>Order Date:</p>
-                <p>Name:</p>
-                <p>Email:</p>
-                <p>Shipping address:</p>
-              </div>
-              <div className="font-normal md:text-sm text-xs text-default-900   space-y-3 min-w-[110px] ">
-                <p>23-07-2023 09:53 AM</p>
-                <p>Prantik Chakraborty</p>
-                <p>customer.example@gmail.com</p>
-                <p>
-                  3947 West Side Avenue Hackensack, NJ 07601, College, United
-                  States
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="flex-1">
-            <div className="flex gap-2 lg:gap-12 ">
-              <div className=" font-medium  min-w-[110px] md:text-sm text-xs text-default-900   space-y-3 ">
-                <p>Order Status:</p>
-                <p>Total order amount:</p>
-                <p>Shipping:</p>
-                <p>Payment method:</p>
-              </div>
-              <div className=" font-normal md:text-sm text-xs text-default-900   space-y-3 min-w-[110px] ">
-                <p>Pending</p>
-                <p>$350.00</p>
-                <p>Flat shipping rate</p>
-                <p>Cash on Delivery</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="py-12 text-center lg:text-2xl text-xl font-normal text-default-900 ">
-        Order Code:{" "}
-        <span className="lg:text-2xl text-xl font-medium">
-          20230723-09532646
-        </span>
-      </div>
-      <div className="p-3 md:p-6 rounded">
-        <p className="text-default-900  text-base font-medium pb-3">
-          Order Details
-        </p>
-        <div className="bg-trasparent  space-y-7">
-          <div className="overflow-x-auto border-0">
-            <div className="inline-block min-w-full align-middle">
-              <div className="overflow-hidden ">
-                <table className="min-w-full divide-y divide-solid divide-default-300 table-fixed  ">
-                  <thead className=" border-0 border-default-00 ">
-                    <tr>
-                      <th
-                        scope="col"
-                        className=" px-3 py-3 text-default-900  font-medium lg:text-base text-sm normal-case ps-0 text-start "
-                      >
-                        Product
-                      </th>
-                      <th
-                        scope="col"
-                        className=" px-3 py-3 text-default-900  font-medium lg:text-base text-sm normal-case text-start"
-                      >
-                        Quantity
-                      </th>
-                      <th
-                        scope="col"
-                        className=" px-3 py-3 text-default-900  font-medium lg:text-base text-sm normal-case text-start"
-                      >
-                        Delivery Type
-                      </th>
-                      <th
-                        scope="col"
-                        className=" px-3 py-3 text-default-900  font-medium lg:text-base text-sm normal-case pe-0 text-start last:text-right"
-                      >
-                        Total
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-trasparent ">
-                    {items?.map((item, i) => (
-                      <tr key={i}>
-                        <td className="px-3 flex items-center gap-3 py-3 pe-0  text-start last:text-right">
-                          <div className="md:p-4 p-2 flex-none bg-default-200 dark:bg-default-800 rounded md:h-20 md:w-20 w-16 h-16 me-3">
-                            <Image
-                              className="w-full h-full object-contain"
-                              src={item.img}
-                              alt=""
-                              width={100}
-                              height={100}
-                            />
-                          </div>
-                          <div>
-                            <p className="text-default-900  lg:text-base text-sm font-normal md:pb-2 pb-1 lg:w-[380px] w-[150px] truncate">
-                              {item.name}
-                            </p>
-                          </div>
-                        </td>
-                        <td className="px-3 py-3 text-default-900  text-sm lg:text-base font-normal text-start last:text-right">
-                          1
-                        </td>
-                        <td className="px-3 py-3 text-default-900  text-sm lg:text-base font-normal text-start last:text-right">
-                          Home Delivery
-                        </td>
-                        <td className="px-3 pt-3  pe-0 text-default-900  text-sm lg:text-base font-normal text-start last:text-right">
-                          $180.00
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-                <div className="md:flex  lg:py-6 py-3  items-center justify-end border-t border-solid border-default-300 mt-3">
-                  <div className="flex-none min-w-[270px] space-y-3">
-                    <div className="space-y-3">
-                      <div className="flex justify-between">
-                        <span className="font-medium text-default-900 text-xs lg:text-sm ">
-                          Subtotal:
-                        </span>
-                        <span className="text-default-900  font-medium text-xs lg:text-sm">
-                          $total hobe
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="font-medium text-default-900 text-xs lg:text-sm ">
-                          Tax:
-                        </span>
-                        <span className="text-default-700  text-xs lg:text-sm font-normal">
-                          $00.00
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="font-medium text-default-900 text-xs lg:text-sm ">
-                          Shipping:
-                        </span>
-                        <span className="text-default-700  text-xs lg:text-sm font-normal">
-                          $00.00
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="font-medium text-default-900 text-xs lg:text-sm ">
-                          Coupon Discount:
-                        </span>
-                        <span className="text-default-700  text-xs lg:text-sm font-normal">
-                          $00.00
-                        </span>
-                      </div>
-                    </div>
-                    <div className="border-t border-solid border-default-300 ">
-                      <div className="flex justify-between pt-3">
-                        <span className="font-medium text-default-900 text-xs lg:text-sm ">
-                          Total:
-                        </span>
-                        <span className="text-default-900  text-xs lg:text-sm">
-                          $total
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-wrap gap-2 md:mt-16 md:pb-14">
-        <div className="flex-1">
-          <Button asChild variant="outline">
-            <Link href="/ecommerce/frontend">
-              <Icon icon="ion:arrow-back-outline" className="me-1" />
-              Return to Shop
-            </Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild disabled>
-            <Link href="/ecommerce/frontend/checkout/payment">Go Back</Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Confirmation;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/data.ts b/app/[locale]/(protected)/ecommerce/frontend/checkout/data.ts
deleted file mode 100644
index b386900e..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/data.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import bkash from "@/public/images/e-commerce/cart-icon/bkash.png";
-import fatoorah from "@/public/images/e-commerce/cart-icon/fatoorah.png";
-import instamojo from "@/public/images/e-commerce/cart-icon/instamojo.png";
-import iyzco from "@/public/images/e-commerce/cart-icon/iyzco.png";
-import nagad from "@/public/images/e-commerce/cart-icon/nagad.png";
-import ngenious from "@/public/images/e-commerce/cart-icon/ngenious.png";
-import payfast from "@/public/images/e-commerce/cart-icon/payfast.png";
-import payku from "@/public/images/e-commerce/cart-icon/payku.png";
-import paypal from "@/public/images/e-commerce/cart-icon/paypal.png";
-import paytm from "@/public/images/e-commerce/cart-icon/paytm.png";
-import razorpay from "@/public/images/e-commerce/cart-icon/razorpay.png";
-import ssl from "@/public/images/e-commerce/cart-icon/ssl.png";
-import stripe from "@/public/images/e-commerce/cart-icon/stripe.png";
-import truck from "@/public/images/e-commerce/cart-icon/truck.png";
-import vougepay from "@/public/images/e-commerce/cart-icon/vougepay.png";
-
-export const payments = [
-  {
-    img: bkash,
-    value: "bkash",
-  },
-  {
-    img: fatoorah,
-    value: "fatoorah",
-  },
-  {
-    img: instamojo,
-    value: "instamojo",
-  },
-  {
-    img: iyzco,
-    value: "iyzco",
-  },
-  {
-    img: nagad,
-    value: "nagad",
-  },
-  {
-    img: ngenious,
-    value: "ngenious",
-  },
-
-  {
-    img: payfast,
-    value: "payfast",
-  },
-  {
-    img: payku,
-    value: "payku",
-  },
-  {
-    img: paypal,
-    value: "paypal",
-  },
-  {
-    img: paytm,
-    value: "paytm",
-  },
-  {
-    img: razorpay,
-    value: "razorpay",
-  },
-  {
-    img: ssl,
-    value: "ssl",
-  },
-  {
-    img: stripe,
-    value: "stripe",
-  },
-  {
-    img: truck,
-    value: "truck",
-  },
-  {
-    img: vougepay,
-    value: "vougepay",
-  },
-];
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/delivery-info/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/delivery-info/page.tsx
deleted file mode 100644
index 877c8a0c..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/delivery-info/page.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React from "react";
-import { getProducts } from "../../data";
-import Image from "next/image";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/routing';
-import { Icon } from "@/components/ui/icon";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import { RadioItem } from "@radix-ui/react-dropdown-menu";
-
-const page = async () => {
-  const products = await getProducts();
-  const items = products.slice(0, 3);
-  return (
-    <div className="card   rounded-sm p-5">
-      <h3 className="text-default-800  font-semibold  text-base uppercase pb-3">
-        Your Orders
-      </h3>
-      <div className=" border border-default-300 border-solid   rounded-sm p-5 space-y-4">
-        {items?.map((item, i) => (
-          <div
-            className="flex sm:flex-col md:flex-row gap-3 items-center "
-            key={i}
-          >
-            <div className="md:p-4 p-2 flex-none bg-default-200 dark:bg-default-900 rounded md:h-20 md:w-20 w-16 h-16 rtl:ml-3">
-              <Image
-                className="w-full h-full object-contain"
-                src={item.img}
-                alt={item.name}
-                width={100}
-                height={100}
-              />
-            </div>
-            <div className="md:text-base text-sm">
-              <p className="text-default-900   font-medium md:pb-2 pb-1 line-clamp-2">
-                {item.name}
-              </p>
-              <p className="text-default-900   font-medium">
-                <span className="text-default-500   font-normal mr-1">
-                  Brand:
-                </span>
-                {item.brand}
-              </p>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className=" md:mt-10 mt-5 lg:flex lg:space-x-4 lg:space-y-0 space-y-5 items-center">
-        <p className="text-base font-medium text-default-800  flex  flex-none  ">
-          Choose Delivery Type
-        </p>
-        <RadioGroup
-          default-value="home-delivery"
-          className="md:space-x-5 md:space-y-0 space-y-3 rtl:space-x-reverse md:flex  justify-start lg:justify-end flex-1 md:text-base text-sm "
-        >
-          <Label className="inline-flex gap-2 items-center border border-default-900 dark:border-default-300  rounded py-3 lg:px-10 px-5 md:w-auto w-[200px] cursor-pointer ">
-            <RadioGroupItem
-              defaultChecked
-              id="home-delivery"
-              value="home-delivery"
-            />
-            <span className=" text-default-900 ">Home Delivery</span>
-          </Label>
-          <Label className="inline-flex gap-2 items-center border-solid border border-default-900 dark:border-default-300  rounded py-3 lg:px-10 px-5 md:w-auto w-[200px] cursor-pointer">
-            <RadioGroupItem id="Unselected" value="Unselected" />
-            <Dialog>
-              <DialogTrigger asChild>
-                <span className=" text-default-900 ">Local Pickup</span>
-              </DialogTrigger>
-              <DialogContent>
-                <div className="space-y-5 px-4">
-                  <Input
-                    id="phone No"
-                    type="text"
-                    placeholder="Enter Pickup Address"
-                    className="w-full"
-                  />
-                  <RadioGroup className="space-y-3">
-                    <div className="card border dark:border-default-700 rounded-lg p-5">
-                      <Label className="flex gap-1 items-center cursor-pointer">
-                        <RadioGroupItem
-
-                          value="B"
-                          defaultChecked
-                        />
-                        <div className="space-y-1">
-                          <p className="font-medium text-base rtl:text-right">
-                            Mohakhali DOHS
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="mi:location"
-                              className="mr-1 rtl:ml-1"
-                            />{" "}
-                            House 395, Road 29, New Area
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="solar:phone-outline"
-                              className="mr-1 rtl:ml-1"
-                            />
-                            +880123456789
-                          </p>
-                        </div>
-                      </Label>
-                    </div>
-                    <div className="card border dark:border-default-700 rounded-lg p-5">
-                      <Label className="flex gap-1 items-center cursor-pointer">
-                        <RadioGroupItem
-
-                          value="A"
-                        />
-                        <div className="space-y-1">
-                          <p className="font-medium text-base rtl:text-right">
-                            Mohakhali DOHS
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="mi:location"
-                              className="mr-1 rtl:ml-1"
-                            />{" "}
-                            House 395, Road 29, New Area
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="solar:phone-outline"
-                              className="mr-1 rtl:ml-1"
-                            />
-                            +880123456789
-                          </p>
-                        </div>
-                      </Label>
-                    </div>
-                    <div className="card border dark:border-default-700 rounded-lg p-5">
-                      <Label className="flex gap-1 items-center cursor-pointer">
-                        <RadioGroupItem
-                          value="C"
-                        />
-                        <div className="space-y-1">
-                          <p className="font-medium text-base rtl:text-right">
-                            Mohakhali DOHS
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="mi:location"
-                              className="mr-1 rtl:ml-1"
-                            />{" "}
-                            House 395, Road 29, New Area
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="solar:phone-outline"
-                              className="mr-1 rtl:ml-1"
-                            />
-                            +880123456789
-                          </p>
-                        </div>
-                      </Label>
-                    </div>
-                  </RadioGroup>
-                </div>
-              </DialogContent>
-            </Dialog>
-          </Label>
-        </RadioGroup>
-      </div>
-      <div className="flex flex-wrap gap-2 md:mt-16 md:pb-14">
-        <div className="flex-1">
-          <Button asChild variant="outline">
-            <Link href="/ecommerce/frontend">
-              <Icon icon="ion:arrow-back-outline" className="me-1" />
-              Add New Product
-            </Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild disabled>
-            <Link href="/ecommerce/frontend/checkout/shipping-info">
-              Go Back
-            </Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild>
-            <Link href="/ecommerce/frontend/checkout/payment">
-              {" "}
-              Continue to shipping
-            </Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default page;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/layout.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/layout.tsx
deleted file mode 100644
index c540e166..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/layout.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import CheckoutHeader from "./checkout-header";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const layout = ({ children }: { children: React.ReactNode }) => {
-
-  return (
-
-    <div>
-      <SiteBreadcrumb />
-      <Card>
-        <CardHeader>
-          <CheckoutHeader />
-        </CardHeader>
-        <CardContent>
-          {children}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default layout;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/page.tsx
deleted file mode 100644
index 7c5c8bf8..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/page.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/routing';
-import { Icon } from "@/components/ui/icon";
-import { Card } from "@/components/ui/card";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import PaymentCard from "./payment-card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-const page = () => {
-  return (
-    <div className="card  rounded-sm p-5">
-      <div className="grid grid-cols-12 gap-5">
-        <div className="lg:col-span-7 col-span-12">
-          <h3 className="text-default-900  font-medium  text-base  pb-3">
-            Select a Payment Option
-          </h3>
-          <Card className="card border border-solid border-default-400  rounded-sm p-5">
-            <div className="space-x-5 rtl:space-x-reverse">
-              <PaymentCard />
-            </div>
-          </Card>
-          <div className="flex items-center mt-3 space-x-2 rtl:space-x-reverse">
-            <div className="text-base text-default-500 flex items-center">
-              <Checkbox />
-              <Label className="ps-2">
-                <span>I agree to the</span>
-                <span className="text-default-900 font-medium ps-2">
-                  terms and conditions, Return Policy & Privacy Policy
-                </span>
-              </Label>
-            </div>
-          </div>
-        </div>
-        <div className="lg:col-span-5 col-span-12">
-          <h3 className="text-default-900  font-medium  text-base  pb-3">
-            Summary
-          </h3>
-          <div className="card border border-solid border-default-400 rounded-sm p-4">
-            <div>
-              <ul className="divide-y divide-default-300 pb-8">
-                <li className=" text-xs  pb-3 ">
-                  <div className="flex justify-between">
-                    <p>Product</p>
-                    <p>Total</p>
-                  </div>
-                </li>
-                <li className=" text-sm  text-default-600  py-2 ">
-                  <div className="flex justify-between gap-3 pb-1">
-                    <p>
-                      Black Tshirt
-                      <span className=" text-default-800    font-medium px-2">
-                        x
-                      </span>
-                      <span className=" text-default-800    font-medium">
-                        3
-                      </span>
-                    </p>
-                    <p className=" text-default-800    font-medium">$300</p>
-                  </div>
-                </li>
-
-                <li className=" text-xs  py-2 ">
-                  <div className="flex justify-between gap-3 ">
-                    <p className=" text-default-900    font-medium">Total</p>
-                    <p className=" text-default-800    font-medium">$200</p>
-                  </div>
-                </li>
-              </ul>
-              <InputGroup>
-                <Input
-                  type="text"
-                  placeholder="Have coupon code? Apply here "
-                />
-                <InputGroupButton>
-                  <Button size="md">Apply</Button>
-                </InputGroupButton>
-              </InputGroup>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-wrap gap-2 md:mt-16 md:pb-14">
-        <div className="flex-1">
-          <Button asChild variant="outline">
-            <Link href="/ecommerce/frontend">
-              <Icon icon="ion:arrow-back-outline" className="me-1" />
-              Add New Product
-            </Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild disabled>
-            <Link href="/ecommerce/frontend/checkout/delivery-info">
-              Go Back
-            </Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild>
-            <Link href="/ecommerce/frontend/checkout/confirmation">Submit</Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default page;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/payment-card.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/payment-card.tsx
deleted file mode 100644
index 088db876..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/payment-card.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-import Image from "next/image";
-import { payments } from "../data";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Label } from "@/components/ui/label";
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-
-const PaymentCard = () => {
-  const [selected, setSelected] = useState("bkash");
-  const handleSelect = (value: string) => {
-    setSelected(value);
-  };
-  return (
-    <div>
-      <RadioGroup
-        defaultValue={selected}
-        onValueChange={handleSelect}
-        className="flex flex-wrap gap-6 "
-      >
-        {payments.map((item) => (
-          <Label
-            className={cn(
-              "flex items-center justify-center gap-2 border border-solid border-default-400 py-3 px-3 rounded-md cursor-pointer group hover:border-primary-600 flex-col hover:text-primary-600",
-              selected === item.value &&
-                "border-primary-600 data-[state=checked]:border-primary-600 text-primary-600 "
-            )}
-            key={item.value}
-          >
-            <RadioGroupItem
-              hidden
-              id={"radio-" + item.value}
-              value={item.value}
-            />
-            <Image
-              className="w-full h-full object-contain group-hover:scale-105 transition-all duration-300"
-              src={item.img}
-              alt={item.value}
-              width={100}
-              height={100}
-            />
-            <span className="capitalize text-center">{item.value}</span>
-          </Label>
-        ))}
-      </RadioGroup>
-    </div>
-  );
-};
-
-export default PaymentCard;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/checkout/shipping-info/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/checkout/shipping-info/page.tsx
deleted file mode 100644
index cab5fcde..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/checkout/shipping-info/page.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import React from "react";
-import { Icon } from "@/components/ui/icon";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Link } from '@/i18n/routing';
-const page = () => {
-  return (
-    <div>
-      <div className="">
-        <RadioGroup className=" rounded p-5 space-y-5">
-          <Label className=" border border-default-300 border-solid rounded p-5 cursor-pointer">
-            <div className="flex  gap-2 ">
-              <RadioGroupItem defaultChecked id="no1" value="no1" />
-              <div className="flex -mt-1 gap-5">
-                <div className="  min-w-[110px] md:text-base text-sm text-default-500 space-y-1.5 ">
-                  <p>Address:</p>
-                  <p>Postal Code:</p>
-                  <p>City:</p>
-                  <p>State:</p>
-                  <p>Country:</p>
-                  <p>Phone No:</p>
-                </div>
-                <div className="  md:text-base text-sm text-default-900 space-y-1.5 ">
-                  <p>395/B Dashcode Tower, Road 29, Mohakhali DOHS</p>
-                  <p>1206</p>
-                  <p>Mohakhali</p>
-                  <p>Dhaka</p>
-                  <p>Bangladesh:</p>
-                  <p>9876543201</p>
-                </div>
-              </div>
-            </div>
-          </Label>
-          <Label className=" border border-default-300 border-solid rounded p-5 cursor-pointer">
-            <div className="flex gap-2 ">
-              <RadioGroupItem id="no2" value="no2" />
-              <div className="flex -mt-1 gap-5">
-                <div className="min-w-[110px] md:text-base text-sm text-default-500 space-y-1.5">
-                  <p>Address:</p>
-                  <p>Postal Code:</p>
-                  <p>City:</p>
-                  <p>State:</p>
-                  <p>Country:</p>
-                  <p>Phone No:</p>
-                </div>
-                <div className="  md:text-base text-sm text-default-900 space-y-1.5 ">
-                  <p>395/B Dashcode Tower, Road 29, Mohakhali DOHS</p>
-                  <p>1206</p>
-                  <p>Mohakhali</p>
-                  <p>Dhaka</p>
-                  <p>Bangladesh:</p>
-                  <p>9876543201</p>
-                </div>
-              </div>
-            </div>
-          </Label>
-        </RadioGroup>
-
-        <Dialog>
-          <DialogTrigger asChild>
-            <button className="w-full flex flex-col justify-center items-center font-normal text-default-800 p-5 space-y-3 border rounded bg-default-100 ">
-              <Icon icon="ic:round-plus" className="h-6 w-6" />
-              <span>Add New Address</span>
-            </button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Default</DialogTitle>
-            </DialogHeader>
-            <DialogDescription className="pb-8">
-              <ScrollArea className="h-[350px]">
-                <form className="space-y-4 px-3">
-                  <div className="space-y-2">
-                    <Label htmlFor="Address"> Address</Label>
-                    <Textarea id="Address" placeholder="Your Address" />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="Country"> Country</Label>
-                    <Select>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a Country" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          <SelectLabel>Country</SelectLabel>
-                          <SelectItem value="apple">Apple</SelectItem>
-                          <SelectItem value="banana">Banana</SelectItem>
-                          <SelectItem value="blueberry">Blueberry</SelectItem>
-                          <SelectItem value="grapes">Grapes</SelectItem>
-                          <SelectItem value="pineapple">Pineapple</SelectItem>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="State"> State</Label>
-                    <Select>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a State" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          <SelectLabel>State</SelectLabel>
-                          <SelectItem value="apple">Apple</SelectItem>
-                          <SelectItem value="banana">Banana</SelectItem>
-                          <SelectItem value="blueberry">Blueberry</SelectItem>
-                          <SelectItem value="grapes">Grapes</SelectItem>
-                          <SelectItem value="pineapple">Pineapple</SelectItem>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="City">City</Label>
-                    <Select>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a City" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          <SelectLabel>City</SelectLabel>
-                          <SelectItem value="apple">Apple</SelectItem>
-                          <SelectItem value="banana">Banana</SelectItem>
-                          <SelectItem value="blueberry">Blueberry</SelectItem>
-                          <SelectItem value="grapes">Grapes</SelectItem>
-                          <SelectItem value="pineapple">Pineapple</SelectItem>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="h_Fullname">Full Name</Label>
-                    <Input
-                      id="h_Fullname"
-                      type="text"
-                      placeholder="Your Postal Code"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="phone">Phone No</Label>
-                    <Input id="phone" type="text" placeholder="+880" />
-                  </div>
-                </form>
-              </ScrollArea>
-            </DialogDescription>
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="outline" color="warning">
-                  Close
-                </Button>
-              </DialogClose>
-              <DialogClose asChild>
-                <Button>Save</Button>
-              </DialogClose>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-      <div className="flex flex-wrap gap-2 md:mt-16 md:pb-14">
-        <div className="flex-1">
-          <Button asChild variant="outline">
-            <Link href="/ecommerce/frontend">
-              <Icon icon="ion:arrow-back-outline" className="me-1" />
-              Add New Product
-            </Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild disabled>
-            <Link href="/ecommerce/frontend/checkout/cart">Go Back</Link>
-          </Button>
-        </div>
-        <div className="flex-none">
-          <Button asChild>
-            <Link href="/ecommerce/frontend/checkout/delivery-info">
-              {" "}
-              Continue to shipping
-            </Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default page;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/counter-button.tsx b/app/[locale]/(protected)/ecommerce/frontend/counter-button.tsx
deleted file mode 100644
index 76acc734..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/counter-button.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client'
-import React from 'react'
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import { useTranslations } from "next-intl";
-const CounterButton = () => {
-  const t = useTranslations("EcommerceApp");
-  const [count, setCount] = React.useState<number>(1)
-  const [show, setShow] = React.useState<boolean>(false)
-
-  const handleIncreaseQuantity = () => {
-
-    if (count < 10) {
-      setCount(count + 1)
-    }
-
-  }
-  const handleDecreaseQuantity = () => {
-
-    if (count > 0) {
-      setCount(count - 1)
-
-    }
-
-  }
-  return (
-    <>
-      {!show && (
-        <Button variant="outline" fullWidth size="md" onClick={() => setShow(true)}>
-          <Icon
-            icon="heroicons:shopping-cart"
-            className="w-4 h-4 me-2 text-sm leading-none"
-          />
-          {t("add_to_cart", { defaultValue: "Add To Cart" })}
-        </Button>
-      )}
-      {show && (
-        <div className="flex gap-4 items-center ">
-          <div className="flex-1 h-8 flex border border-1 border-default-900 delay-150 ease-in-out dark:border-default-600 divide-x-[1px] rtl:divide-x-reverse text-sm font-normal divide-default-900 dark:divide-default-600 rounded">
-            <button
-              onClick={handleDecreaseQuantity}
-              type="button"
-              className="flex-none px-2 dark:text-white text-default-900 hover:bg-default-900 hover:text-white dark:hover:bg-default-700 disabled:cursor-not-allowed disabled:opacity-50 "
-            >
-              <Icon icon="eva:minus-fill" />
-            </button>
-
-            <div className="flex-1 w-[62px] text-center flex items-center justify-center">
-              {count}
-            </div>
-            <button
-
-              onClick={handleIncreaseQuantity}
-              type="button"
-              className="flex-none px-2 disabled:cursor-not-allowed disabled:opacity-50 text-default-900 hover:bg-default-900 hover:text-white dark:text-white dark:hover:bg-default-700 rtl:dark:hover:rounded-l ltr:dark:hover:rounded-r"
-            >
-              <Icon icon="eva:plus-fill" />
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default CounterButton;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/data.ts b/app/[locale]/(protected)/ecommerce/frontend/data.ts
deleted file mode 100644
index dab23712..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/data.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-export const products = [
-  {
-    id: "c06d48bf-7f35-4789-b71e-d80fee5b430t",
-    img: "/images/e-commerce/product-card/classical-black-tshirt.png",
-    category: "men",
-    name: "Classical Black T-Shirt Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt. The best cotton black branded shirt. The best cotton black branded shirt. The best cotton black branded shirt. The best cotton black branded shirt.",
-    rating: "4.8",
-    price: 489,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "apple",
-  },
-  {
-    id: "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
-    img: "/images/e-commerce/product-card/black-t-shirt.png",
-    category: "men",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 20,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "apex",
-  },
-  {
-    id: "b2c3d4e5-f6g7-8901-bcde-f23456789012",
-    img: "/images/e-commerce/product-card/check-shirt.png",
-    category: "women",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 120,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "easy",
-  },
-  {
-    id: "c3d4e5f6-g7h8-9012-cdef-345678901234",
-    img: "/images/e-commerce/product-card/gray-jumper.png",
-    category: "women",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 70,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "pixel",
-  },
-  {
-    id: "d4e5f6g7-h8i9-0123-defg-456789012345",
-    img: "/images/e-commerce/product-card/gray-t-shirt.png",
-    category: "baby",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 30,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "apex",
-  },
-  {
-    id: "e5f6g7h8-i9j0-1234-efgh-567890123456",
-    img: "/images/e-commerce/product-card/red-t-shirt.png",
-    category: "women",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 40,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "apple",
-  },
-  {
-    id: "f6g7h8i9-j0k1-2345-fghi-678901234567",
-    img: "/images/e-commerce/product-card/red-t-shirt.png",
-    category: "women",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 90,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "easy",
-  },
-  {
-    id: "g7h8i9j0-k1l2-3456-ghij-789012345678",
-    img: "/images/e-commerce/product-card/yellow-frok.png",
-    category: "women",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 80,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "pixel",
-  },
-  {
-    id: "h8i9j0k1-l2m3-4567-hijk-890123456789",
-    img: "/images/e-commerce/product-card/yellow-jumper.png",
-    category: "furniture",
-    name: "Classical Black T-Shirt",
-    subtitle: "The best cotton black branded shirt.",
-    desc: "The best cotton black branded shirt",
-    rating: "4.8",
-    price: 20,
-    oldPrice: "$700",
-    percent: "40%",
-    brand: "samsung",
-  },
-];
-export type product = (typeof products)[number];
-
-export const getProducts = async () => {
-  return products;
-};
-
-export const getProductById = async (id: string) => {
-  return products.find((product) => product.id === id);
-};
-
-
-//
-export const categories = [
-  { label: "All", value: "all", count: "9724" },
-  { label: "Men", value: "men", count: "1312" },
-  { label: "Women", value: "women", count: "3752" },
-  { label: "Child", value: "child", count: "985" },
-  { label: "Baby", value: "baby", count: "745" },
-  { label: "Footwear", value: "footwear", count: "1280" },
-  { label: "Furniture", value: "furniture", count: "820" },
-  { label: "Mobile", value: "mobile", count: "2460" },
-];
-export type category = (typeof categories)[number];
-//
-export const brands = [
-  { label: "Apple", value: "apple", count: "9724" },
-  { label: "Apex", value: "apex", count: "1312" },
-  { label: "Easy", value: "easy", count: "3752" },
-  { label: "Pixel", value: "pixel", count: "985" },
-  { label: "Samsung", value: "samsung", count: "2460" },
-];
-export type brand = (typeof brands)[number];
-//
-export const prices = [
-  {
-    label: "$0 - $199",
-    value: {
-      min: 0,
-      max: 199,
-    },
-    count: "9724",
-  },
-  {
-    label: "$200 - $449",
-    value: {
-      min: 200,
-      max: 499,
-    },
-    count: "1312",
-  },
-  {
-    label: "$450 - $599",
-    value: {
-      min: 450,
-      max: 599,
-    },
-    count: "3752",
-  },
-  {
-    label: "$600 - $799",
-    value: {
-      min: 600,
-      max: 799,
-    },
-    count: "985",
-  },
-  {
-    label: "$800 & Above",
-    value: {
-      min: 800,
-      max: 1000,
-    },
-    count: "745",
-  },
-];
-export type price = (typeof prices)[number];
-//
-export const ratings = [
-  { name: 5, value: 5, count: "9724" },
-  { name: 4, value: 4, count: "1312" },
-  { name: 3, value: 3, count: "3752" },
-  { name: 2, value: 2, count: "985" },
-  { name: 1, value: 1, count: "2460" },
-];
-export type rating = (typeof ratings)[number];
-//
-export const selectOptions = [
-  {
-    value: "option1",
-    label: "Option 1",
-  },
-  {
-    value: "option2",
-    label: "Option 2",
-  },
-  {
-    value: "option3",
-    label: "Option 3",
-  },
-];
-export type selectOption = (typeof selectOptions)[number];
-//
-export const selectCategories = [
-  {
-    value: "option1",
-    label: "Top Rated"
-  },
-  {
-    value: "option2",
-    label: "Option 2"
-  },
-  {
-    value: "option3",
-    label: "Option 3"
-  }
-];
-export type selectCategory = (typeof selectCategories)[number];
-//
-export const payments = [
-  {
-    img: "/images/e-commerce/cart-icon/bkash.png",
-    value: "bkash",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/fatoorah.png",
-    value: "fatoorah",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/iyzco.png",
-    value: "instamojo",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/iyzco.png",
-    value: "iyzco",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/nagad.png",
-    value: "nagad",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/ngenious.png",
-    value: "ngenious",
-  },
-
-  {
-    img: "/images/e-commerce/cart-icon/payfast.png",
-    value: "payfast",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/payku.png",
-    value: "payku",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/paypal.png",
-    value: "paypal",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/paytm.png",
-    value: "paytm",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/razorpay.png",
-    value: "razorpay",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/ssl.png",
-    value: "ssl",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/stripe.png",
-    value: "stripe",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/truck.png",
-    value: "truck",
-  },
-  {
-    img: "/images/e-commerce/cart-icon/vougepay.png",
-    value: "vougepay",
-  },
-];
-export type payment = (typeof payments)[number];
-
-export type EcommerceNav = {
-  label: string
-  href: string
-  active: boolean
-  icon: string
-}
-
-export function getEcommerceNav(pathname: string): EcommerceNav[] {
-  return [
-    {
-      label: 'grid view',
-      href: "/ecommerce/frontend",
-      icon: "heroicons:view-columns",
-      active: pathname === "/ecommerce/frontend",
-    },
-    {
-      label: 'list view',
-      href: "/ecommerce/frontend/list",
-      icon: "heroicons:list-bullet",
-      active: pathname === "/ecommerce/frontend/list",
-    }
-  ]
-}
-
diff --git a/app/[locale]/(protected)/ecommerce/frontend/empty.tsx b/app/[locale]/(protected)/ecommerce/frontend/empty.tsx
deleted file mode 100644
index e70f7e10..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/empty.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Rabbit } from "lucide-react";
-
-const EmptyProject = () => {
-  return (
-    <div className=" flex flex-col items-center justify-center">
-      <Rabbit
-        className=" h-[200px]  w-[200px] text-default-400 "
-        strokeWidth={1}
-      />
-      <div className=" text-sm text-default-500 text-center">No Products</div>
-    </div>
-  );
-};
-
-export default EmptyProject;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/frontend-wrapper.tsx b/app/[locale]/(protected)/ecommerce/frontend/frontend-wrapper.tsx
deleted file mode 100644
index 8881259a..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/frontend-wrapper.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client"
-import { Icon } from "@/components/ui/icon";
-import Sidebar from "./sidebar";
-import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { selectOptions, selectCategories, getEcommerceNav } from "./data";
-import { Link, usePathname } from "@/components/navigation";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-const FrontendWrapper = ({ children }: { children: React.ReactNode }) => {
-  const pathname = usePathname();
-  const menus = getEcommerceNav(pathname)
-  return (
-    <div>
-      <div className="grid grid-cols-12  gap-5">
-        <div className="lg:col-span-3  col-span-12">
-          <Sidebar />
-        </div>
-        <div className="lg:col-span-9 col-span-12">
-          <div className="md:flex mb-6 md:space-y-0 space-y-4">
-            <div className="flex-1 flex  items-center gap-3">
-              {menus?.map(({ href, active, icon }, index) => (
-                <Button
-                  key={`view-button-${index}`} asChild
-                  size="icon"
-                  variant="outline"
-                  className={cn("border border-default-400 text-default-400 hover:bg-transparent hover:text-default-400 h-11 w-11",
-                    { "text-default border-default hover:text-default hover:border-default": active }
-                  )}
-                >
-                  <Link href={href}>
-                    <Icon icon={icon} className="w-6 h-6" />
-                  </Link>
-                </Button>
-              ))}
-
-            </div>
-            <div className="flex-none sm:flex items-center gap-4 sm:space-y-0 space-y-2">
-              <div className=" flex gap-2  items-center">
-                <Label htmlFor="select" className="text-sm font-normal"> Show: </Label>
-                <Select defaultValue={selectOptions[0].value}>
-                  <SelectTrigger className="bg-transparent w-[110px] border-default-200 h-10">
-                    <SelectValue placeholder="Select Option" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {selectOptions.map((selectOption, i) => (
-                      <SelectItem key={i} value={selectOption.value}>
-                        {selectOption.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex gap-2 items-center">
-                <Label htmlFor="select" className="text-sm font-normal whitespace-nowrap">Sort by:</Label>
-                <Select>
-                  <SelectTrigger className="bg-transparent w-[110px] border-default-200 h-10">
-                    <SelectValue placeholder="Filters" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {selectCategories.map((selectCategory, i) => (
-                      <SelectItem key={i} value={selectCategory.value}>
-                        {selectCategory.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-          <div>
-            {children}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FrontendWrapper;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/layout.tsx b/app/[locale]/(protected)/ecommerce/frontend/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/list/layout.tsx b/app/[locale]/(protected)/ecommerce/frontend/list/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/list/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/list/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/list/page.tsx
deleted file mode 100644
index 83198d72..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/list/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { getProducts } from "../data";
-import EmptyProject from "../empty";
-import FrontendWrapper from "../frontend-wrapper";
-import ProductList from "./product-list";
-
-const ListPage = async () => {
-  const products = await getProducts();
-  if (products.length === 0) return <EmptyProject />;
-  return (
-    <FrontendWrapper>
-      <div className=" space-y-3 grid-cols-1 gap-5 h-max">
-        {products?.map((product, i) => (
-          <div key={`list_key_${i}`}>
-            <ProductList product={product} />
-          </div>
-        ))}
-      </div>
-    </FrontendWrapper>
-  );
-};
-
-export default ListPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/list/product-list.tsx b/app/[locale]/(protected)/ecommerce/frontend/list/product-list.tsx
deleted file mode 100644
index fa8f042f..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/list/product-list.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { product as ProductProps } from "../data";
-import { Icon } from "@/components/ui/icon";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-import { Card } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import CounterButton from "../counter-button";
-const ProductList = ({ product }: { product: ProductProps }) => {
-  return (
-    <Card className="p-3 rounded-md 2xl:flex lg:flex md:flex-none sm:flex-none group">
-      <Link href={`/ecommerce/frontend/${product.id}`}>
-        <div className=" bg-default-200 dark:bg-default-900  relative h-[259px] flex flex-col justify-center items-center rounded-md  mb-3 lg:mb-0   ltr:md:mr-0 ltr:sm:mr-0 rtl:md:ml-0 rtl:sm:ml-0 ltr:lg:mr-3 rtl:lg:ml-3">
-          <div className="h-[235px]  w-[266px] p-12">
-            <Image
-              src={product.img}
-              alt={product.name}
-              width={235}
-              height={235}
-              className="  h-full w-full  object-contain  transition-all duration-300 group-hover:scale-105"
-            />
-            {product.percent && (
-              <Badge className=" font-normal bg-destructive text-white absolute start-2  top-3">
-                {product.percent}
-              </Badge>
-            )}
-            <div className="hover-box flex flex-col invisible absolute end-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 ">
-              <div className="space-y-2">
-                <Button
-                  size="icon"
-                  className="rounded-full group/item hover:ring-offset-0 bg-default-50 hover:bg-default-50 dark:bg-default-700  hover:ring-0"
-                >
-                  <Icon
-                    icon="ph:heart-fill"
-                    className="text-default-400  group-hover/item:text-destructive "
-                  />
-                </Button>
-                <Button
-                  size="icon"
-                  className="rounded-full group/item hover:ring-offset-0 bg-default-50 hover:bg-default-50 dark:bg-default-700  hover:ring-0  "
-                >
-                  <Icon
-                    icon="ph:eye"
-                    className="text-default-400  group-hover/item:text-destructive  "
-                  />
-                </Button>
-                <Button
-                  size="icon"
-                  className="rounded-full group/item hover:ring-offset-0 bg-default-50 hover:bg-default-50 dark:bg-default-700  hover:ring-0 "
-                >
-                  <Icon
-                    icon="jam:refresh-reverse"
-                    className="text-default-400  group-hover/item:text-destructive  "
-                  />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Link>
-
-      <div>
-        <p className="text-xs	text-default-900  font-normal uppercase pb-2">
-          {product.category}
-        </p>
-        <h6 className="text-default-900  text-lg	font-medium	pb-2 w-full truncate">
-          <Link href={`/ecommerce/frontend/${product.id}`}>{product.name}</Link>
-        </h6>
-        <p className="pb-2 space-x-2 rtl:space-x-reverse">
-          <span className="text-default-900  text-lg	font-semibold ">
-            ${product.price}
-          </span>
-          <del className="text-default-500 font-semibold text-lg">
-            {product.oldPrice}
-          </del>
-        </p>
-        {product.rating && (
-          <span className="flex items-center text-default-900   font-normal text-xs space-x-[4px] rtl:space-x-reverse pb-3">
-            <Icon icon="ph:star-fill" className="text-yellow-400" />
-            <Icon icon="ph:star-fill" className="text-yellow-400" />
-            <Icon icon="ph:star-fill" className="text-yellow-400" />
-            <Icon icon="ph:star-fill" className="text-yellow-400" />
-            <span className="ltr:pl-2 rtl:pr-2">{product.rating}</span>
-          </span>
-        )}
-        <p className="text-default-500  text-sm  font-normal pb-4">
-          {product.desc}
-        </p>
-        <div className="flex gap-4 max-w-[370px]">
-          <CounterButton />
-
-
-        </div>
-      </div>
-    </Card>
-  );
-};
-
-export default ProductList;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/page.tsx
deleted file mode 100644
index 2281cec6..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getProducts } from "./data";
-import EmptyProject from "./empty";
-import ProductBox from "./product-box";
-import FrontendWrapper from "./frontend-wrapper";
-const EcommercePage = async () => {
-  const products = await getProducts();
-  if (products.length === 0) return <EmptyProject />;
-  return (
-    <FrontendWrapper>
-    <div className="grid 2xl:grid-cols-3 xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 h-max">
-      {products?.map((product, i) => (
-        <ProductBox key={`grid_key_${i}`} product={product} />
-      ))}
-    </div>
-    </FrontendWrapper>
-  );
-};
-
-export default EcommercePage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/product-box.tsx b/app/[locale]/(protected)/ecommerce/frontend/product-box.tsx
deleted file mode 100644
index 998f8250..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/product-box.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import CounterButton from "./counter-button";
-import { Link } from '@/i18n/routing';
-import Image from "next/image";
-import { Card } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import { product as ProductProps } from "./data";
-import { useTranslations } from "next-intl";
-
-const ProductBox = ({ product }: { product: ProductProps }) => {
-  const t = useTranslations("EcommerceApp");
-  return (
-    <Card className="p-4 rounded-md group">
-      <Link href={`/ecommerce/frontend/${product.id}`}>
-        <div className=" bg-default-200 dark:bg-default-900 h-[191px] flex flex-col justify-center items-center mb-3 relative rounded-md">
-          <div className="h-[146px]">
-            <Image
-              width={146}
-              height={146}
-              className="  h-full w-full  object-contain  transition-all duration-300 group-hover:scale-105"
-              src={product.img}
-              alt={product.name}
-            />
-            {product.percent && (
-              <Badge
-                color="destructive"
-                className=" absolute ltr:left-2 rtl:right-2 top-3"
-              >
-                {product.percent}
-              </Badge>
-            )}
-            <div className="hover-box flex flex-col invisible absolute ltr:right-2 rtl:left-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 ">
-              <div className="space-y-2">
-                <Button
-                  size="icon"
-                  className="rounded-full group/item hover:ring-offset-0 bg-default-50 hover:bg-default-50 dark:bg-default-700  hover:ring-0"
-                >
-                  <Icon
-                    icon="ph:heart-fill"
-                    className="text-default-400  group-hover/item:text-destructive "
-                  />
-                </Button>
-                <Button
-                  size="icon"
-                  className="rounded-full group/item hover:ring-offset-0 bg-default-50 hover:bg-default-50 dark:bg-default-700  hover:ring-0  "
-                >
-                  <Icon
-                    icon="ph:eye"
-                    className="text-default-400  group-hover/item:text-destructive  "
-                  />
-                </Button>
-                <Button
-                  size="icon"
-                  className="rounded-full group/item hover:ring-offset-0 bg-default-50 hover:bg-default-50 dark:bg-default-700  hover:ring-0 "
-                >
-                  <Icon
-                    icon="jam:refresh-reverse"
-                    className="text-default-400  group-hover/item:text-destructive  "
-                  />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Link>
-
-      <div>
-        <div className="flex justify-between items-center ">
-          <p className="text-xs	text-default-900 uppercase font-normal">
-            {product.category}
-          </p>
-          {product.rating && (
-            <span className="flex items-center text-default-900  font-normal text-xs space-x-1  rtl:space-x-reverse ">
-              <Icon icon="ph:star-fill" className="text-yellow-400" />
-              <span>{product.rating}</span>
-            </span>
-          )}
-        </div>
-        <h6 className="text-default-900 text-base	font-medium	mt-2 truncate	">
-          <Link href={`/ecommerce/frontend/${product.id}`}>{product.name}</Link>
-        </h6>
-        <p className="text-default-500  text-xs  font-normal mt-1.5">
-          {product.subtitle}
-        </p>
-        <p className="pb-4  mt-2">
-          <span className="text-default-900 text-base	font-medium	 me-2 ">
-            ${product.price}
-          </span>
-          <del className="text-default-500  font-normal text-base		">
-            {product.oldPrice}
-          </del>
-        </p>
-
-        <CounterButton />
-      </div>
-    </Card>
-  );
-};
-
-export default ProductBox;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/layout.tsx b/app/[locale]/(protected)/ecommerce/frontend/purchase-history/layout.tsx
deleted file mode 100644
index 232ab4e2..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/purchase-history/page.tsx
deleted file mode 100644
index 413bd45b..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Card } from "@/components/ui/card"
-import TransactionsTable from "./transactions"
-
-const PurchaseHistory = () => {
-  return (
-    <div>
-      Purchase History
-      <Card>
-        <TransactionsTable />
-      </Card>
-    </div>
-  );
-}
-
-export default PurchaseHistory
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/columns.tsx b/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/columns.tsx
deleted file mode 100644
index 6f1f1c87..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/columns.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import {
-  Download,
-  Eye,
-  Trash2,
-} from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import { Link } from '@/i18n/routing';
-
-export type DataProps = {
-  id: string | number;
-  order: number;
-  date: string;
-  quantity: number;
-  amount: string;
-  delivery: string;
-  status: "paid" | "due" | "canceled";
-  action: React.ReactNode;
-};
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="bg-default-100"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="bg-default-100"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-
-  {
-    accessorKey: "order",
-    header: "Order",
-    cell: ({ row }) => <span>{row.getValue("order")}</span>,
-  },
-  {
-    accessorKey: "date",
-    header: "Date",
-    cell: ({ row }) => {
-      return <span>{row.getValue("date")}</span>;
-    },
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-    cell: ({ row }) => {
-      return <span>{row.getValue("amount")}</span>;
-    },
-  },
-  {
-    accessorKey: "delivery",
-    header: "Delivery Status",
-    cell: ({ row }) => {
-
-      return <span> {row.getValue("delivery")}</span>;
-
-    },
-  },
-  {
-    accessorKey: "status",
-    header: "Payment Status",
-    cell: ({ row }) => {
-      const statusColors: Record<string, string> = {
-        paid: "bg-success/20 text-success",
-        due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive",
-      };
-      const status = row.getValue<string>("status");
-      const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge className={cn("rounded-full px-5", statusStyles)}>
-          {status}{" "}
-        </Badge>
-      );
-    },
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center gap-1">
-          <Link
-            href="/utility/invoice/preview/1"
-            className="flex items-center p-2 border-b text-warning hover:text-warning-foreground bg-warning/40 hover:bg-warning duration-200 transition-all rounded-full"
-          >
-            <Eye className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 border-b text-info hover:text-info-foreground bg-info/40 hover:bg-info duration-200 transition-all rounded-full"
-          >
-            <Download className="w-4 h-4" />
-          </Link>
-          <Link
-            href="#"
-            className="flex items-center p-2 text-destructive bg-destructive/40 duration-200 transition-all hover:bg-destructive/80 hover:text-destructive-foreground rounded-full"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Link>
-        </div>
-      );
-    },
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/data.ts b/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/data.ts
deleted file mode 100644
index 60dc62ac..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/data.ts
+++ /dev/null
@@ -1,503 +0,0 @@
-import { DataProps } from "./columns";
-export const data: DataProps[] = [
-  {
-    id: 1,
-    order: 951,
-    date: "3/26/2022",
-    quantity: 13,
-    amount: "$1779.53",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 2,
-    order: 238,
-    date: "2/6/2022",
-    quantity: 13,
-    amount: "$2215.78",
-    status: "due",
-    delivery: "pending",
-    action: null,
-  },
-  {
-    id: 3,
-    order: 339,
-    date: "9/6/2021",
-    quantity: 1,
-    amount: "$3183.60",
-    status: "due",
-    delivery: "processing",
-    action: null,
-  },
-  {
-    id: 4,
-    order: 365,
-    date: "11/7/2021",
-    quantity: 13,
-    amount: "$2587.86",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 5,
-    order: 513,
-    date: "5/6/2022",
-    quantity: 12,
-    amount: "$3840.73",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 6,
-    order: 534,
-    date: "2/14/2022",
-    quantity: 12,
-    amount: "$4764.18",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 7,
-    order: 77,
-    date: "7/30/2022",
-    quantity: 6,
-    amount: "$2875.05",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 8,
-    order: 238,
-    date: "6/30/2022",
-    quantity: 9,
-    amount: "$2491.02",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 9,
-    order: 886,
-    date: "8/9/2022",
-    quantity: 8,
-    amount: "$3006.95",
-    status: "due",
-    delivery: "Deliveredt",
-    action: null,
-  },
-  {
-    id: 10,
-    order: 3,
-    date: "8/4/2022",
-    quantity: 12,
-    amount: "$2160.32",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 11,
-    order: 198,
-    date: "4/5/2022",
-    quantity: 8,
-    amount: "$1272.66",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 12,
-    order: 829,
-    date: "8/9/2022",
-    quantity: 2,
-    amount: "$4327.86",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 13,
-    order: 595,
-    date: "2/10/2022",
-    quantity: 11,
-    amount: "$3671.81",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 14,
-    order: 374,
-    date: "2/10/2022",
-    quantity: 2,
-    amount: "$3401.82",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 15,
-    order: 32,
-    date: "5/20/2022",
-    quantity: 4,
-    amount: "$2387.49",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 16,
-    order: 89,
-    date: "5/3/2022",
-    quantity: 15,
-    amount: "$4236.61",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 17,
-    order: 912,
-    date: "10/31/2021",
-    quantity: 11,
-    amount: "$2975.66",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 18,
-    order: 621,
-    date: "1/13/2022",
-    quantity: 5,
-    amount: "$4576.13",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 19,
-    order: 459,
-    date: "6/14/2022",
-    quantity: 5,
-    amount: "$1276.56",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 20,
-    order: 108,
-    date: "10/8/2021",
-    quantity: 4,
-    amount: "$1078.64",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 21,
-    order: 492,
-    date: "11/17/2021",
-    quantity: 9,
-    amount: "$1678.19",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 22,
-    order: 42,
-    date: "4/4/2022",
-    quantity: 9,
-    amount: "$1822.02",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 23,
-    order: 841,
-    date: "3/21/2022",
-    quantity: 5,
-    amount: "$1578.39",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 24,
-    order: 561,
-    date: "6/18/2022",
-    quantity: 12,
-    amount: "$2130.49",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 25,
-    order: 720,
-    date: "8/15/2022",
-    quantity: 8,
-    amount: "$3721.11",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 26,
-    order: 309,
-    date: "4/28/2022",
-    quantity: 8,
-    amount: "$4683.45",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 27,
-    order: 24,
-    date: "9/6/2021",
-    quantity: 7,
-    amount: "$2863.71",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 28,
-    order: 518,
-    date: "9/11/2021",
-    quantity: 4,
-    amount: "$3879.41",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 29,
-    order: 98,
-    date: "1/27/2022",
-    quantity: 5,
-    amount: "$4660.81",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 30,
-    order: 940,
-    date: "9/16/2021",
-    quantity: 6,
-    amount: "$4800.75",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 31,
-    order: 925,
-    date: "1/8/2022",
-    quantity: 1,
-    amount: "$2299.05",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 32,
-    order: 122,
-    date: "11/18/2021",
-    quantity: 1,
-    amount: "$3578.02",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 33,
-    order: 371,
-    date: "3/30/2022",
-    quantity: 13,
-    amount: "$1996.06",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 34,
-    order: 296,
-    date: "11/13/2021",
-    quantity: 5,
-    amount: "$2749.00",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 35,
-    order: 887,
-    date: "12/7/2021",
-    quantity: 11,
-    amount: "$4353.01",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 36,
-    order: 30,
-    date: "9/9/2021",
-    quantity: 15,
-    amount: "$3252.37",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 37,
-    order: 365,
-    date: "2/12/2022",
-    quantity: 5,
-    amount: "$4044.10",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 38,
-    order: 649,
-    date: "3/6/2022",
-    quantity: 5,
-    amount: "$3859.92",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 39,
-    order: 923,
-    date: "7/25/2022",
-    quantity: 14,
-    amount: "$1652.47",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 40,
-    order: 423,
-    date: "3/2/2022",
-    quantity: 8,
-    amount: "$2700.12",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 41,
-    order: 703,
-    date: "12/8/2021",
-    quantity: 8,
-    amount: "$4508.13",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 42,
-    order: 792,
-    date: "11/22/2021",
-    quantity: 11,
-    amount: "$4938.04",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 43,
-    order: 400,
-    date: "4/6/2022",
-    quantity: 1,
-    amount: "$3471.32",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 44,
-    order: 718,
-    date: "2/4/2022",
-    quantity: 4,
-    amount: "$4011.60",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 45,
-    order: 970,
-    date: "3/30/2022",
-    quantity: 15,
-    amount: "$3723.64",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 46,
-    order: 786,
-    date: "11/20/2021",
-    quantity: 2,
-    amount: "$2441.15",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 47,
-    order: 925,
-    date: "10/24/2021",
-    quantity: 11,
-    amount: "$1196.76",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 48,
-    order: 929,
-    date: "6/30/2022",
-    quantity: 10,
-    amount: "$3579.57",
-    status: "canceled",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 49,
-    order: 377,
-    date: "11/16/2021",
-    quantity: 4,
-    amount: "$2657.84",
-    status: "due",
-    delivery: "Delivered",
-    action: null,
-  },
-  {
-    id: 50,
-    order: 661,
-    date: "8/15/2022",
-    quantity: 6,
-    amount: "$2905.94",
-    status: "paid",
-    delivery: "Delivered",
-    action: null,
-  },
-];
diff --git a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/index.tsx b/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/index.tsx
deleted file mode 100644
index 59c13ae7..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/index.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
-import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/routing';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-const TransactionsTable = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-          <div className="inline-flex items-center border border-solid divide-x divide-default-200 divide-solid rounded-md overflow-hidden">
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              All
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Pending
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Confirm
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Processing
-            </Button>
-            <Button
-              size="md"
-              variant="ghost"
-              color="default"
-              className="ring-0 outline-0 hover:ring-0 hover:ring-offset-0 font-normal border-default-200 rounded-none"
-            >
-              Delivered
-            </Button>
-          </div>
-
-          <Select>
-            <SelectTrigger className=" w-[80px]">
-              <SelectValue placeholder="Date" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Date</SelectLabel>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="paid">Paid</SelectItem>
-                <SelectItem value="pending">Pending</SelectItem>
-                <SelectItem value="failed">Failed</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex-none">
-          <div className="flex items-center gap-4 flex-wrap">
-            <Select>
-              <SelectTrigger className=" w-[80px]">
-                <SelectValue placeholder="Date" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Date</SelectLabel>
-                  <SelectItem value="all">All</SelectItem>
-                  <SelectItem value="paid">Paid</SelectItem>
-                  <SelectItem value="pending">Pending</SelectItem>
-                  <SelectItem value="failed">Failed</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="w-full "
-            />
-          </div>
-        </div>
-      </div>
-
-      <CardContent>
-        <div className="border border-solid border-default-200 rounded-lg overflow-hidden border-t-0">
-          <Table>
-            <TableHeader className="bg-default-200">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead className="last:text-start" key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </CardContent>
-      <TablePagination table={table} />
-    </div>
-  );
-};
-export default TransactionsTable;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/table-pagination.tsx b/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/table-pagination.tsx
deleted file mode 100644
index fab9b075..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/table-pagination.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/ecommerce/frontend/sidebar.tsx b/app/[locale]/(protected)/ecommerce/frontend/sidebar.tsx
deleted file mode 100644
index 0ce86ae6..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/sidebar.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@/components/ui/icon";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
-import { Label } from "@/components/ui/label";
-
-import { categories, brands, prices, ratings } from "./data";
-import { useTranslations } from "next-intl";
-const Sidebar = () => {
-  const t = useTranslations("EcommerceApp");
-  return (
-    <Card className="hidden lg:block">
-      <CardHeader className="pb-0">
-        <div className="relative">
-          <Icon
-            icon="heroicons:magnifying-glass"
-            className="absolute start-2 top-1/2 -translate-y-1/2 text-default-500"
-          />
-          <Input
-            type="text"
-            placeholder="Search.."
-            className="ps-7"
-            size="md"
-          />
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-6  divide-y divide-default-200  ">
-        <div className="space-y-2">
-          <div className="text-default-800  font-semibold text-xs uppercase pt-5 pb-2">
-            {t("categories", { defaultValue: "Categories" })}
-          </div>
-          {categories.map((category, i) => (
-            <div
-              key={`category_key_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
-              <div className="flex gap-3 items-center">
-                <Checkbox id={`category_key_${i}`} />
-                <Label
-                  className="text-default-800 font-normal"
-                  htmlFor={`category_key_${i}`}
-                >
-                  {category.label}
-                </Label>
-              </div>
-              <span className="text-default-500 font-semibold text-xs">
-                {category.count}
-              </span>
-            </div>
-          ))}
-
-          <button className="text-xs font-medium text-default-900 pt-1">
-            {t("view_less", { defaultValue: "View Less" })}
-          </button>
-        </div>
-        <div className="space-y-2 ltr:-ml-6 ltr:pl-6 rtl:-mr-6 rtl:pr-6">
-          <div className="text-default-800 font-semibold text-xs uppercase pt-5 pb-2">
-            {t("brands", { defaultValue: "Brands" })}
-          </div>
-          {brands.map((brand, i) => (
-            <div
-              key={`brand_key_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
-              <div className="flex gap-3 items-center">
-                <Checkbox id={`brand_key_${i}`} />
-                <Label
-                  className="text-default-800 font-normal"
-                  htmlFor={`brand_key_${i}`}
-                >
-                  {brand.label}
-                </Label>
-              </div>
-              <span className="text-default-500  text-xs">{brand.count}</span>
-            </div>
-          ))}
-          <button className="text-xs font-medium text-default-900 pt-1">
-            {t("view_less", { defaultValue: "View Less" })}
-          </button>
-        </div>
-        <div className="space-y-2 ltr:-ml-6 ltr:pl-6 rtl:-mr-6 rtl:pr-6">
-          <div className="text-default-800 font-semibold text-xs uppercase pt-5 pb-2">
-            {t("price", { defaultValue: "Price" })}
-          </div>
-          {prices.map((price, i) => (
-            <div
-              key={`price_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
-              <div className="flex gap-3 items-center">
-                <Checkbox id={`price_${i}`} />
-                <Label
-                  className="text-default-800 font-normal"
-                  htmlFor={`price_${i}`}
-                >
-                  {price.label}
-                </Label>
-              </div>
-              <span className="text-default-500  text-xs">{price.count}</span>
-            </div>
-          ))}
-        </div>
-        <div className="space-y-2 ltr:-ml-6 ltr:pl-6 rtl:-mr-6 rtl:pr-6">
-          <div className="text-default-800 font-semibold text-xs uppercase pt-5 pb-2">
-            {t("ratings", { defaultValue: "Ratings" })}
-          </div>
-          {ratings.map((rating, i) => (
-            <div
-              key={`rating_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
-              <div className="flex gap-3 items-center">
-                <Checkbox id={`rating_${i}`} />
-                <Icon
-                  icon="heroicons:star-solid"
-                  className="w-4 h-4 text-warning"
-                />
-                <span>{rating.name}</span>
-              </div>
-              <span className="text-default-500  text-xs">{rating.count}</span>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-export default Sidebar;
diff --git a/app/[locale]/(protected)/ecommerce/frontend/wishlist/page.tsx b/app/[locale]/(protected)/ecommerce/frontend/wishlist/page.tsx
deleted file mode 100644
index 9c3a6359..00000000
--- a/app/[locale]/(protected)/ecommerce/frontend/wishlist/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getProducts } from "../data";
-import EmptyProject from "../empty";
-import ProductBox from "../product-box";
-
-
-const WishList = async () => {
-  const products = await getProducts();
-  if (products.length === 0) return <EmptyProject />;
-  return (
-    <div>
-      <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 h-max">
-        {products?.map((product, i) => (
-          <ProductBox key={`grid_key_${i}`} product={product} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default WishList;
diff --git a/app/[locale]/(protected)/ecommerce/layout.tsx b/app/[locale]/(protected)/ecommerce/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/ecommerce/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/ecommerce/page.tsx b/app/[locale]/(protected)/ecommerce/page.tsx
deleted file mode 100644
index 5399f144..00000000
--- a/app/[locale]/(protected)/ecommerce/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-"use client";
-import { redirect } from "@/components/navigation";
-const Backend = () => {
-  redirect("/ecommerce/frontend");
-  return null;
-};
-
-export default Backend;
diff --git a/app/[locale]/(protected)/forms/checkbox/basic-checkbox.tsx b/app/[locale]/(protected)/forms/checkbox/basic-checkbox.tsx
deleted file mode 100644
index 28dfc284..00000000
--- a/app/[locale]/(protected)/forms/checkbox/basic-checkbox.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-
-const BasicCheckbox = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-      <div className="flex gap-3 items-center">
-        <Checkbox id="cb1" />
-        <Label htmlFor="cb1">Checked</Label>
-      </div>
-      <div className="flex gap-3 items-center">
-        <Checkbox id="cb2" defaultChecked />
-        <Label htmlFor="cb2">Unchecked</Label>
-      </div>
-      <div className="flex gap-3 items-center">
-        <Checkbox id="cb3" disabled />
-        <Label htmlFor="cb3">Unchecked Disabled</Label>
-      </div>
-      <div className="flex gap-3 items-center">
-        <Checkbox id="cb3" defaultChecked disabled />
-        <Label htmlFor="cb3">Checked Disabled</Label>
-      </div>
-    </div>
-  );
-};
-
-export default BasicCheckbox;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/checkbox/color-checkbox.tsx b/app/[locale]/(protected)/forms/checkbox/color-checkbox.tsx
deleted file mode 100644
index 4b5b4462..00000000
--- a/app/[locale]/(protected)/forms/checkbox/color-checkbox.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-
-const ColorCheckbox = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Checkbox id="default" defaultChecked />
-        <Label htmlFor="default" >Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Checkbox defaultChecked id="primary" color="primary" />
-        <Label htmlFor="primary" >Primary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Checkbox defaultChecked id="secondary" color="secondary" />
-        <Label htmlFor="secondary" >Secondary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Checkbox defaultChecked id="info" color="info" />
-        <Label htmlFor="info" >Info </Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Checkbox defaultChecked id="success" color="success" />
-        <Label htmlFor="success" >Success </Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Checkbox defaultChecked id="warning" color="warning" />
-        <Label htmlFor="warning" >Warning </Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Checkbox defaultChecked id="destructive" color="destructive" />
-        <Label htmlFor="destructive"  >Destructive </Label>
-      </div>
-
-    </div>
-  );
-};
-
-export default ColorCheckbox;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/checkbox/layout.tsx b/app/[locale]/(protected)/forms/checkbox/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/checkbox/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/checkbox/options-array.tsx b/app/[locale]/(protected)/forms/checkbox/options-array.tsx
deleted file mode 100644
index 04572de3..00000000
--- a/app/[locale]/(protected)/forms/checkbox/options-array.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client";
-
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { useState } from "react";
-interface Option {
-  value: string;
-  label: string;
-}
-
-const OptionArrayCheckbox = () => {
-  const [selected, setSelected] = useState<string[]>([]);
-  const options: Option[] = [
-    {
-      value: "orange",
-      label: "Orange",
-    },
-    {
-      value: "apple",
-      label: "Apple",
-    },
-    {
-      value: "banana",
-      label: "Banana",
-    },
-  ];
-  return (
-    <div className="space-y-5">
-      <div className="flex items-center gap-3.5 flex-wrap">
-        {options.map((option, i) => (
-          <div className="flex items-center gap-3" key={option.value}>
-            <Checkbox
-              checked={selected.includes(option.value)}
-              onCheckedChange={() => {
-                if (selected.includes(option.value)) {
-                  setSelected(selected.filter((item) => item !== option.value));
-                } else {
-                  setSelected([...selected, option.value]);
-                }
-              }}
-              id={option.value}
-            >
-
-            </Checkbox>
-            <Label htmlFor={option.value}> {option.label}</Label>
-          </div>
-        ))}
-      </div>
-
-      {selected.length > 0 && (
-        <div className="text-muted-foreground ">
-          Selected: [{selected.join(", ")}]
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default OptionArrayCheckbox;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/checkbox/page.tsx b/app/[locale]/(protected)/forms/checkbox/page.tsx
deleted file mode 100644
index f6ba5ec1..00000000
--- a/app/[locale]/(protected)/forms/checkbox/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicCheckbox from "./basic-checkbox";
-import ColorCheckbox from "./color-checkbox";
-import OptionsArrayCheckbox from "./options-array";
-import { basicCheckbox, colorCheckbox, optionsArrayCheckbox } from "./soure-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const CheckboxPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic Checkbox" code={basicCheckbox}>
-          <BasicCheckbox />
-        </Card>
-        <Card title="Color Checkbox" code={colorCheckbox}>
-          <ColorCheckbox />
-        </Card>
-        <Card title="Options Array Checkbox" code={optionsArrayCheckbox}>
-          <OptionsArrayCheckbox />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default CheckboxPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/checkbox/soure-code.ts b/app/[locale]/(protected)/forms/checkbox/soure-code.ts
deleted file mode 100644
index e17bad97..00000000
--- a/app/[locale]/(protected)/forms/checkbox/soure-code.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-export const basicCheckbox=`import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-
-const BasicCheckbox = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-      <div className="flex gap-2 items-center">
-        <Checkbox id="cb1"/>
-        <Label htmlFor="cb1">Checked</Label>
-      </div>
-      <div className="flex gap-2 items-center">
-        <Checkbox id="cb2" defaultChecked/>
-        <Label htmlFor="cb2">Unchecked</Label>
-      </div>
-      <div className="flex gap-2 items-center">
-        <Checkbox id="cb3" disabled/>
-        <Label htmlFor="cb3">Unchecked Disabled</Label>
-      </div>
-      <div className="flex gap-2 items-center">
-        <Checkbox id="cb3" defaultChecked disabled/>
-        <Label htmlFor="cb3">Checked Disabled</Label>
-      </div>
-    </div>
-  );
-};
-
-export default BasicCheckbox;`
-
-export const colorCheckbox=`import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-
-const ColorCheckbox = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-    <div className="flex items-center gap-2">
-      <Checkbox id="default" defaultChecked />
-      <Label htmlFor="default" >Default</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox defaultChecked id="primary" color="primary" />
-      <Label htmlFor="primary" >Primary</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox defaultChecked id="secondary"   color="secondary" />
-      <Label htmlFor="secondary" >Secondary</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox defaultChecked id="info"   color="info" />
-      <Label htmlFor="info" >Info </Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox defaultChecked id="success"   color="success" />
-      <Label htmlFor="success" >Success </Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox defaultChecked id="warning"   color="warning" />
-      <Label htmlFor="warning" >Warning </Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox defaultChecked id="destructive"   color="destructive" />
-      <Label htmlFor="destructive"  >Destructive </Label>
-    </div>
-
-  </div>
-  );
-};
-
-export default ColorCheckbox;`
-
-export const optionsArrayCheckbox=`"use client";
-
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { useState } from "react";
-interface Option {
-  value: string;
-  label: string;
-}
-
-const OptionArrayCheckbox = () => {
-  const [selected, setSelected] = useState<string[]>([]);
-  const options: Option[] = [
-    {
-      value: "orange",
-      label: "Orange",
-    },
-    {
-      value: "apple",
-      label: "Apple",
-    },
-    {
-      value: "banana",
-      label: "Banana",
-    },
-  ];
-  return (
-    <div className="space-y-5">
-      <div className="flex items-center gap-2.5 flex-wrap">
-        {options.map((option, i) => (
-          <div className="flex items-center gap-3" key={option.value}>
-            <Checkbox
-              checked={selected.includes(option.value)}
-              onCheckedChange={() => {
-                if (selected.includes(option.value)) {
-                  setSelected(selected.filter((item) => item !== option.value));
-                } else {
-                  setSelected([...selected, option.value]);
-                }
-              }}
-              id={option.value}
-            >
-
-            </Checkbox>
-            <Label htmlFor={option.value}> {option.label}</Label>
-          </div>
-        ))}
-      </div>
-
-      {selected.length > 0 && (
-        <div className="text-muted-foreground ">
-          Selected: [{selected.join(", ")}]
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default OptionArrayCheckbox;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/combobox/basic-combobox.tsx b/app/[locale]/(protected)/forms/combobox/basic-combobox.tsx
deleted file mode 100644
index 12ec352f..00000000
--- a/app/[locale]/(protected)/forms/combobox/basic-combobox.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-
-const frameworks = [
-  {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
-  },
-]
-
-const BasicCombobox = () => {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState("")
-
-  return (
-    <div className="flex justify-center">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className="w-[300px] justify-between"
-          >
-            {value
-              ? frameworks.find((framework) => framework.value === value)?.label
-              : "Select framework..."}
-            <ChevronsUpDown className="ms-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[300px] p-0">
-          <Command>
-            <CommandInput placeholder="Search framework..." />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map((framework) => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={(currentValue) => {
-                      setValue(currentValue === value ? "" : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        "me-2 h-4 w-4",
-                        value === framework.value ? "opacity-100" : "opacity-0"
-                      )}
-                    />
-                    {framework.label}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-export default BasicCombobox;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/combobox/layout.tsx b/app/[locale]/(protected)/forms/combobox/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/combobox/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/combobox/page.tsx b/app/[locale]/(protected)/forms/combobox/page.tsx
deleted file mode 100644
index e431db0b..00000000
--- a/app/[locale]/(protected)/forms/combobox/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicCombobox from "./basic-combobox";
-import { basicCombobox } from "./soure-code"
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const ComboboxPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Combobox Page" code={basicCombobox}>
-        <BasicCombobox />
-      </Card>
-    </div>
-  );
-};
-
-export default ComboboxPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/combobox/soure-code.ts b/app/[locale]/(protected)/forms/combobox/soure-code.ts
deleted file mode 100644
index c9798642..00000000
--- a/app/[locale]/(protected)/forms/combobox/soure-code.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-export const basicCombobox=`"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-
-const frameworks = [
-  {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
-  },
-]
-
-const BasicCombobox = () => {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState("")
-
-  return (
-    <div className="flex justify-center">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className="w-[300px] justify-between"
-          >
-            {value
-              ? frameworks.find((framework) => framework.value === value)?.label
-              : "Select framework..."}
-            <ChevronsUpDown className="ms-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[300px] p-0">
-          <Command>
-            <CommandInput placeholder="Search framework..." />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map((framework) => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={(currentValue) => {
-                      setValue(currentValue === value ? "" : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        "me-2 h-4 w-4",
-                        value === framework.value ? "opacity-100" : "opacity-0"
-                      )}
-                    />
-                    {framework.label}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-export default BasicCombobox;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/command/basic-command.tsx b/app/[locale]/(protected)/forms/command/basic-command.tsx
deleted file mode 100644
index 5301c1bc..00000000
--- a/app/[locale]/(protected)/forms/command/basic-command.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/components/ui/command"
-const BasicCommand = () => {
-  return (
-    <div className="max-w-lg mx-auto">
-      <Command className="rounded-lg border shadow-md">
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <Calendar className="me-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <Smile className="me-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <Calculator className="me-2 h-4 w-4" />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <User className="me-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <CreditCard className="me-2 h-4 w-4" />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <Settings className="me-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
-    </div>
-  );
-};
-
-export default BasicCommand;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/command/layout.tsx b/app/[locale]/(protected)/forms/command/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/command/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/command/page.tsx b/app/[locale]/(protected)/forms/command/page.tsx
deleted file mode 100644
index 2f84cd13..00000000
--- a/app/[locale]/(protected)/forms/command/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicCommand from "./basic-command";
-import { basicCommand } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const CommandPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Command" code={basicCommand}>
-        <BasicCommand />
-      </Card>
-    </div>
-  );
-};
-
-export default CommandPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/command/source-code.ts b/app/[locale]/(protected)/forms/command/source-code.ts
deleted file mode 100644
index 8ba14642..00000000
--- a/app/[locale]/(protected)/forms/command/source-code.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-export const basicCommand=`import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/components/ui/command"
-const BasicCommand = () => {
-  return (
-    <div className="max-w-lg mx-auto">
-      <Command className="rounded-lg border shadow-md">
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <Calendar className="me-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <Smile className="me-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <Calculator className="me-2 h-4 w-4" />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <User className="me-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <CreditCard className="me-2 h-4 w-4" />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <Settings className="me-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
-    </div>
-  );
-};
-
-export default BasicCommand;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/form-validation/layout.tsx b/app/[locale]/(protected)/forms/form-validation/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/form-validation/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/form-validation/multiple-types.tsx b/app/[locale]/(protected)/forms/form-validation/multiple-types.tsx
deleted file mode 100644
index 13f83e9b..00000000
--- a/app/[locale]/(protected)/forms/form-validation/multiple-types.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { toast } from "sonner";
-import { Textarea } from "@/components/ui/textarea";
-
-const schema = z.object({
-  author: z
-    .string()
-    .min(3, { message: "Author name must be at least 3 charecters." })
-    .max(8, { message: "The author's name must not exceed 8 characters." }),
-  phone: z.string().refine((value) => value.length === 11, {
-    message: "Phone number must be exactly 11 characters long.",
-  }),
-  city: z.string().min(3, { message: "Enter minimum 3 charecters" }),
-  web: z.string().url({ message: "Enter valid web address" }),
-  inputMessage: z
-    .string()
-    .max(30, { message: "Message should not be exceed 30 charecters." }),
-});
-
-const MultipleTypes = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-  });
-
-  function onSubmit(data: z.infer<typeof schema>) {
-    toast.message(JSON.stringify(data, null, 2));
-  }
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="grid  lg:grid-cols-2 gap-4">
-        <div className="flex flex-col gap-2 col-span-2 lg:col-span-1">
-          <Label
-            htmlFor="author"
-            className={cn("", {
-              "text-destructive": errors.author,
-            })}
-          >
-            Author Name
-          </Label>
-          <Input
-            type="text"
-            {...register("author")}
-            placeholder="Author name 3 to 8 charecters"
-            className={cn("", {
-              "border-destructive focus:border-destructive": errors.author,
-            })}
-          />
-          {errors.author && (
-            <p
-              className={cn("text-xs", {
-                "text-destructive": errors.author,
-              })}
-            >
-              {errors.author.message}
-            </p>
-          )}
-        </div>
-
-        <div className="flex flex-col gap-2 col-span-2 lg:col-span-1">
-          <Label
-            htmlFor="phone"
-            className={cn("", {
-              "text-destructive": errors.phone,
-            })}
-          >
-            Phone Number
-          </Label>
-          <Input
-            type="number"
-            placeholder="11 charecters phone number"
-            {...register("phone")}
-            className={cn("", {
-              "border-destructive focus:border-destructive": errors.phone,
-            })}
-          />
-          {errors.phone && (
-            <p className="text-xs text-destructive">{errors.phone.message}</p>
-          )}
-        </div>
-        <div className="flex flex-col gap-2 col-span-2 lg:col-span-1">
-          <Label
-            htmlFor="city"
-            className={cn("", {
-              "text-destructive": errors.city,
-            })}
-          >
-            City
-          </Label>
-          <Input
-            type="text"
-            placeholder="enter minimum 3 charecters"
-            {...register("city")}
-            className={cn("", {
-              "border-destructive": errors.city,
-            })}
-          />
-          {errors.city && (
-            <p className="text-xs text-destructive">{errors.city.message}</p>
-          )}
-        </div>
-
-        <div className="flex flex-col gap-2 col-span-2 lg:col-span-1">
-          <Label
-            htmlFor="web"
-            className={cn("", {
-              "text-destructive": errors.web,
-            })}
-          >
-            Web Address
-          </Label>
-          <Input
-            type="text"
-            {...register("web")}
-            placeholder="enter valid web address"
-            className={cn("", {
-              "border-destructive focus:border-destructive": errors.web,
-            })}
-          />
-          {errors.web && (
-            <p className="text-xs text-destructive">{errors.web.message}</p>
-          )}
-        </div>
-        <div className="flex flex-col gap-2 col-span-2">
-          <Label
-            htmlFor="inputMessage"
-            className={cn("", {
-              "text-destructive": errors.inputMessage,
-            })}
-          >
-            Message
-          </Label>
-          <Textarea
-            {...register("inputMessage")}
-            placeholder="type here... maximum 30 charecters"
-            id="inputMessage"
-            className={cn("", {
-              "border-destructive focus:border-destructive":
-                errors.inputMessage,
-            })}
-          />
-          {errors.inputMessage && (
-            <p className="text-xs text-destructive">
-              {errors.inputMessage.message}
-            </p>
-          )}
-        </div>
-      </div>
-      <div className="mt-4">
-        <Button type="submit">Submit</Button>
-      </div>
-    </form>
-  );
-};
-
-export default MultipleTypes;
diff --git a/app/[locale]/(protected)/forms/form-validation/page.tsx b/app/[locale]/(protected)/forms/form-validation/page.tsx
deleted file mode 100644
index 7d011782..00000000
--- a/app/[locale]/(protected)/forms/form-validation/page.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import SimpleFormValidation from "./simple-form";
-import ValidateWithTooltip from "./validate-with-tooltip";
-import ValidateRadio from "./validate-radio";
-import MultipleTypes from "./multiple-types";
-import PasswordValidation from "./passoword-validation";
-
-const FormValidation = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-2 gap-5">
-        <div className="col-span-2 lg:col-span-1">
-          <Card>
-            <CardHeader>
-              <CardTitle> Simple Form Validation</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <SimpleFormValidation/>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card>
-            <CardHeader>
-              <CardTitle> Simple Form Validation With Tooltip</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ValidateWithTooltip/>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card>
-            <CardHeader>
-              <CardTitle> Validate Radio Group</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ValidateRadio/>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card>
-            <CardHeader>
-              <CardTitle>Validate Password</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <PasswordValidation/>
-            </CardContent>
-          </Card>
-        </div>
-    
-        <div className="col-span-2">
-          <Card>
-            <CardHeader>
-              <CardTitle>Multiple Types</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <MultipleTypes/>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FormValidation;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/form-validation/passoword-validation.tsx b/app/[locale]/(protected)/forms/form-validation/passoword-validation.tsx
deleted file mode 100644
index bfcc1f95..00000000
--- a/app/[locale]/(protected)/forms/form-validation/passoword-validation.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { toast } from "sonner";
-
-const schema = z
-  .object({
-    password: z.string().min(4, { message: "Password is more than 4 characters." }),
-    confirmPassword: z
-      .string()
-      .min(6, { message: "Passwords didn't match." }),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: "Passwords do not match.",
-    path: ["confirmPassword"],
-  });
-
-const PasswordValidation = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-  });
-
-  function onSubmit(data: z.infer<typeof schema>) {
-    toast.message(JSON.stringify(data, null, 2));
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <div className="flex flex-col gap-2">
-        <Label
-          htmlFor="password"
-          className={cn("", {
-            "text-destructive": errors.password,
-          })}
-        >
-          Password
-        </Label>
-        <Input
-          type="password"
-          {...register("password")}
-          placeholder="Enter your password"
-          className={cn("", {
-            "border-destructive focus:border-destructive": errors.password,
-          })}
-        />
-        {errors.password && (
-          <p className="text-xs text-destructive">
-            {errors.password.message}
-          </p>
-        )}
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label
-          htmlFor="confirmPassword"
-          className={cn("", {
-            "text-destructive": errors.confirmPassword,
-          })}
-        >
-          Confirm Password
-        </Label>
-        <Input
-          type="password"
-          {...register("confirmPassword")}
-          placeholder="Confirm your password"
-          className={cn("", {
-            "border-destructive focus:border-destructive": errors.confirmPassword,
-          })}
-        />
-        {errors.confirmPassword && (
-          <p className="text-xs text-destructive">
-            {errors.confirmPassword.message}
-          </p>
-        )}
-      </div>
-      <div className="mt-2">
-        <Button type="submit">Submit</Button>
-      </div>
-    </form>
-  );
-};
-
-export default PasswordValidation;
diff --git a/app/[locale]/(protected)/forms/form-validation/simple-form.tsx b/app/[locale]/(protected)/forms/form-validation/simple-form.tsx
deleted file mode 100644
index 110e9bad..00000000
--- a/app/[locale]/(protected)/forms/form-validation/simple-form.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { toast } from "sonner";
-
-const schema = z.object({
-  email: z.string().email({ message: "Your email is invalid." }),
-  password: z
-    .string()
-    .min(6, { message: "Password must be at least 6 characters." }),
-});
-
-const SimpleFormValidation = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-  });
-
-  function onSubmit(data:z.infer<typeof schema>) {
-    toast.message(JSON.stringify(data, null, 2));
-  }
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <div className="flex flex-col gap-2">
-        <Label
-          htmlFor="email"
-          className={cn("", {
-            "text-destructive": errors.email,
-          })}
-        >
-          Email
-        </Label>
-        <Input
-          type="email"
-          {...register("email")}
-          placeholder="Enter your email"
-          className={cn("", {
-            "border-destructive focus:border-destructive": errors.email,
-          })}
-        />
-        {errors.email && (
-          <p
-            className={cn("text-xs", {
-              "text-destructive": errors.email,
-            })}
-          >
-            {errors.email.message}
-          </p>
-        )}
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label
-          htmlFor="password"
-          className={cn("", {
-            "text-destructive": errors.password,
-          })}
-        >
-          Password
-        </Label>
-        <Input
-          type="password"
-          {...register("password")}
-          placeholder="Enter your password"
-          className={cn("", {
-            "border-destructive focus:border-destructive": errors.password,
-          })}
-        />
-        {errors.password && (
-          <p className="text-xs text-destructive">{errors.password.message}</p>
-        )}
-      </div>
-      <div className="mt-2">
-        <Button type="submit">Submit</Button>
-      </div>
-    </form>
-  );
-};
-
-export default SimpleFormValidation;
diff --git a/app/[locale]/(protected)/forms/form-validation/validate-radio.tsx b/app/[locale]/(protected)/forms/form-validation/validate-radio.tsx
deleted file mode 100644
index c8c7a6e5..00000000
--- a/app/[locale]/(protected)/forms/form-validation/validate-radio.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Button } from "@/components/ui/button";
-import { toast } from "sonner";
-import { Label } from "@/components/ui/label";
-
-const schema = z.object({
-  message: z
-    .string()
-    .min(1, { message: "Please select a subject to display." }),
-});
-
-const ValidateRadio = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-  });
-
-  function onSubmit(data: z.infer<typeof schema>) {
-    toast.message(JSON.stringify(data, null, 2));
-  }
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <p className="text-sm mb-4 font-medium text-default-600">
-        Notify me about...
-      </p>
-      <RadioGroup {...register("message")} className="gap-4 rtl:justify-end">
-        <div className="flex gap-2 items-center">
-          <RadioGroupItem value="rad_1" id="rad_1" />
-          <Label htmlFor="rad_1"> All new messages</Label>
-        </div>
-        <div className="flex gap-2 items-center">
-          <RadioGroupItem value="rad_2" id="rad_2" />
-          <Label htmlFor="rad_2"> Direct messages and mentions</Label>
-        </div>
-
-        <div className="flex gap-2 items-center">
-          <RadioGroupItem value="rad_3" id="rad_3" />
-          <Label htmlFor="rad_3"> Nothing</Label>
-        </div>
-      </RadioGroup>
-      {errors.message && <p className="text-destructive">{errors.message.message}</p>}
-      <div>
-        <Button type="submit" className="mt-2">Submit</Button>
-      </div>
-    </form>
-  );
-};
-
-export default ValidateRadio;
diff --git a/app/[locale]/(protected)/forms/form-validation/validate-with-tooltip.tsx b/app/[locale]/(protected)/forms/form-validation/validate-with-tooltip.tsx
deleted file mode 100644
index ca345a6b..00000000
--- a/app/[locale]/(protected)/forms/form-validation/validate-with-tooltip.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { toast } from "sonner";
-
-const schema = z.object({
-  username: z
-    .string()
-    .min(5, { message: "Username must be at least 5 characters." }),
-  password: z
-    .string()
-    .min(6, { message: "Password must be at least 6 characters." }),
-});
-
-const ValidateWithTooltip = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-  });
-
-  function onSubmit(data: z.infer<typeof schema>) {
-    toast.message(JSON.stringify(data, null, 2));
-  }
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <div className="flex flex-col gap-2">
-        <Label
-          htmlFor="username"
-          className={cn("", {
-            "text-destructive": errors.username,
-          })}
-        >
-          Username
-        </Label>
-        <Input
-          type="text"
-          {...register("username")}
-          placeholder="Enter Username"
-          className={cn("", {
-            "border-destructive focus:border-destructive": errors.username,
-          })}
-        />
-        {errors.username && (
-          <div className="mt-1">
-            <span className="text-xs bg-destructive text-primary-foreground px-2 py-1 rounded-sm">
-              {errors.username.message}
-            </span>
-          </div>
-        )}
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label
-          htmlFor="password"
-          className={cn("", {
-            "text-destructive": errors.password,
-          })}
-        >
-          Password
-        </Label>
-        <Input
-          type="password"
-          placeholder="Enter password"
-          {...register("password")}
-          className={cn("", {
-            "border-destructive focus:border-destructive": errors.password,
-          })}
-        />
-
-        {errors.password && (
-          <div className="mt-1">
-            <span className="text-xs bg-destructive text-primary-foreground px-2 py-1 rounded-sm">
-              {errors.password.message}
-            </span>
-          </div>
-        )}
-      </div>
-      <div className="mt-2">
-        <Button type="submit">Submit</Button>
-      </div>
-    </form>
-  );
-};
-
-export default ValidateWithTooltip;
diff --git a/app/[locale]/(protected)/forms/input-file/basic-file-uploader.tsx b/app/[locale]/(protected)/forms/input-file/basic-file-uploader.tsx
deleted file mode 100644
index 587d530f..00000000
--- a/app/[locale]/(protected)/forms/input-file/basic-file-uploader.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-const BasicFileUploader = () => {
-  return (
-    <div className="flex flex-col gap-3">
-      <Label htmlFor="file">Upload File</Label>
-      <Input type="file" id="file"/>
-    </div>
-  );
-};
-
-export default BasicFileUploader;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-file/file-uploader-multiple.tsx b/app/[locale]/(protected)/forms/input-file/file-uploader-multiple.tsx
deleted file mode 100644
index f74c1821..00000000
--- a/app/[locale]/(protected)/forms/input-file/file-uploader-multiple.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-import { Fragment, useState } from "react";
-import { Icon } from "@iconify/react";
-import { useDropzone } from "react-dropzone";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-import { CloudUpload } from "lucide-react";
-
-interface FileWithPreview extends File {
-  preview: string;
-}
-const FileUploaderMultiple = () => {
-  const [files, setFiles] = useState<FileWithPreview[]>([]);
-
-  const { getRootProps, getInputProps } = useDropzone({
-    onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
-    },
-  });
-
-  const renderFilePreview = (file: FileWithPreview) => {
-    if (file.type.startsWith("image")) {
-      return (
-        <Image
-          width={48}
-          height={48}
-          alt={file.name}
-          src={URL.createObjectURL(file)}
-          className=" rounded border p-0.5"
-        />
-      );
-    } else {
-      return <Icon icon="tabler:file-description" />;
-    }
-  };
-
-  const handleRemoveFile = (file: FileWithPreview) => {
-    const uploadedFiles = files;
-    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-    setFiles([...filtered]);
-  };
-
-  const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
-      <div className="flex gap-3 items-center">
-        <div className="file-preview">{renderFilePreview(file)}</div>
-        <div>
-          <div className=" text-sm  text-card-foreground">{file.name}</div>
-          <div className=" text-xs font-light text-muted-foreground">
-            {Math.round(file.size / 100) / 10 > 1000 ? (
-              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
-            ) : (
-              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
-            )}
-            {" kb"}
-          </div>
-        </div>
-      </div>
-
-      <Button
-        size="icon"
-        color="destructive"
-        variant="outline"
-        className=" border-none rounded-full"
-        onClick={() => handleRemoveFile(file)}
-      >
-        <Icon icon="tabler:x" className=" h-5 w-5" />
-      </Button>
-    </div>
-  ));
-
-  const handleRemoveAllFiles = () => {
-    setFiles([]);
-  };
-
-  return (
-    <Fragment>
-      <div {...getRootProps({ className: "dropzone" })}>
-        <input {...getInputProps()} />
-        <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
-          <CloudUpload className="text-default-300 w-10 h-10" />
-          <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-            Drop files here or click to upload.
-          </h4>
-          <div className=" text-xs text-muted-foreground">
-            ( This is just a demo drop zone. Selected files are not actually
-            uploaded.)
-          </div>
-        </div>
-      </div>
-      {files.length ? (
-        <Fragment>
-          <div>{fileList}</div>
-          <div className=" flex justify-end gap-2">
-            <Button color="destructive" onClick={handleRemoveAllFiles}>
-              Remove All
-            </Button>
-            <Button>Upload Files</Button>
-          </div>
-        </Fragment>
-      ) : null}
-    </Fragment>
-  );
-};
-
-export default FileUploaderMultiple;
diff --git a/app/[locale]/(protected)/forms/input-file/file-uploader-restrictions.tsx b/app/[locale]/(protected)/forms/input-file/file-uploader-restrictions.tsx
deleted file mode 100644
index fe9654d6..00000000
--- a/app/[locale]/(protected)/forms/input-file/file-uploader-restrictions.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import { Fragment, useState } from "react";
-import { Icon } from "@iconify/react";
-import { useToast } from "@/components/ui/use-toast";
-import { useDropzone } from "react-dropzone";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-import { CloudUpload } from "lucide-react";
-
-interface FileWithPreview extends File {
-  preview: string;
-}
-const FileUploaderRestrictions = () => {
-  const [files, setFiles] = useState<FileWithPreview[]>([]);
-  const { toast } = useToast();
-  const { getRootProps, getInputProps } = useDropzone({
-    maxFiles: 2,
-    maxSize: 2000000,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".gif"],
-    },
-    onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
-    },
-    onDropRejected: () => {
-      toast({
-        color: "destructive",
-        title: "Error",
-        description: "You can only upload 2 files & maximum size of 2 MB",
-      });
-    },
-  });
-
-  const renderFilePreview = (file: FileWithPreview) => {
-    if (file.type.startsWith("image")) {
-      return (
-        <Image
-          width={48}
-          height={48}
-          alt={file.name}
-          src={URL.createObjectURL(file)}
-          className=" rounded border p-0.5"
-        />
-      );
-    } else {
-      return <Icon icon="tabler:file-description" />;
-    }
-  };
-
-  const handleRemoveFile = (file: FileWithPreview) => {
-    const uploadedFiles = files;
-    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-    setFiles([...filtered]);
-  };
-
-  const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
-      <div className="flex gap-3 items-center">
-        <div className="file-preview">{renderFilePreview(file)}</div>
-        <div>
-          <div className=" text-sm  text-card-foreground">{file.name}</div>
-          <div className=" text-xs font-light text-muted-foreground">
-            {Math.round(file.size / 100) / 10 > 1000 ? (
-              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
-            ) : (
-              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
-            )}
-            {" kb"}
-          </div>
-        </div>
-      </div>
-
-      <Button
-        size="icon"
-        color="destructive"
-        variant="outline"
-        className=" border-none rounded-full"
-        onClick={() => handleRemoveFile(file)}
-      >
-        <Icon icon="tabler:x" className=" h-5 w-5" />
-      </Button>
-    </div>
-  ));
-
-  const handleRemoveAllFiles = () => {
-    setFiles([]);
-  };
-
-  return (
-    <Fragment>
-      <div {...getRootProps({ className: "dropzone" })}>
-        <input {...getInputProps()} />
-        <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
-          <CloudUpload className="text-default-300 w-10 h-10" />
-          <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-            Drop files here or click to upload.
-          </h4>
-          <div className=" text-xs text-muted-foreground">
-            ( This is just a demo drop zone. Selected files are not actually
-            uploaded.)
-          </div>
-        </div>
-      </div>
-      {files.length ? (
-        <Fragment>
-          <div>{fileList}</div>
-          <div className=" flex justify-end gap-2">
-            <Button color="destructive" onClick={handleRemoveAllFiles}>
-              Remove All
-            </Button>
-            <Button>Upload Files</Button>
-          </div>
-        </Fragment>
-      ) : null}
-    </Fragment>
-  );
-};
-
-export default FileUploaderRestrictions;
diff --git a/app/[locale]/(protected)/forms/input-file/layout.tsx b/app/[locale]/(protected)/forms/input-file/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/input-file/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/input-file/multiple-files.tsx b/app/[locale]/(protected)/forms/input-file/multiple-files.tsx
deleted file mode 100644
index 95d89bd5..00000000
--- a/app/[locale]/(protected)/forms/input-file/multiple-files.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-const MultipleFiles = () => {
-  return (
-    <div className="flex flex-col gap-3">
-      <Label htmlFor="multiple">Upload File</Label>
-      <Input type="file" id="multiple" multiple/>
-    </div>
-  );
-};
-
-export default MultipleFiles;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-file/page.tsx b/app/[locale]/(protected)/forms/input-file/page.tsx
deleted file mode 100644
index fef87440..00000000
--- a/app/[locale]/(protected)/forms/input-file/page.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import Card from "@/components/code-snippet";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import BasicFileUploader from "./basic-file-uploader";
-import MultipleFiles from "./multiple-files";
-import UploadSingleFile from "./upload-single-file";
-import FileUploaderMultiple from "./file-uploader-multiple";
-import FileUploaderRestrictions from "./file-uploader-restrictions";
-
-const FileUploaderPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-2 gap-5">
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Basic File Uploader" code="">
-            <BasicFileUploader />
-          </Card>
-        </div>
-        <div className="col-span-2 lg:col-span-1">
-          <Card title="Multiple Files" code="">
-            <MultipleFiles />
-          </Card>
-        </div>
-        <div className="col-span-2">
-          <Card title="Upload Single File" code="">
-            <UploadSingleFile />
-          </Card>
-        </div>
-        <div className="col-span-2">
-          <Card title="Upload Multiple Files" code="">
-            <FileUploaderMultiple />
-          </Card>
-        </div>
-        <div className="col-span-2">
-          <Card title="Upload Files with Restrictions" code="">
-            <FileUploaderRestrictions />
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FileUploaderPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-file/upload-single-file.tsx b/app/[locale]/(protected)/forms/input-file/upload-single-file.tsx
deleted file mode 100644
index a22e154f..00000000
--- a/app/[locale]/(protected)/forms/input-file/upload-single-file.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import { Icon } from "@iconify/react";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-interface FileWithPreview extends File {
-  preview: string;
-}
-const UploadSingleFile = () => {
-  const [files, setFiles] = useState<FileWithPreview[]>([]);
-
-  const { getRootProps, getInputProps } = useDropzone({
-    multiple: false,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".gif"],
-    },
-    onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
-    },
-  });
-
-  const img = files.map((file) => (
-    <Image
-      key={file.name}
-      alt={file.name}
-      width={1000}
-      height={300}
-      className="w-full h-full object-cover rounded-md"
-      src={URL.createObjectURL(file)}
-    />
-  ));
-
-  const closeTheFile = () => {
-    setFiles([]);
-  };
-
-  return (
-    <div className={files.length ? "h-[300px] w-full" : ""}>
-      {files.length ? (
-        <div className="w-full h-full relative">
-          <Button
-            type="button"
-            className="absolute top-4 right-4 h-12 w-12 rounded-full bg-default-900 hover:bg-background hover:text-default-900 z-20"
-            onClick={closeTheFile}
-          >
-            <span className="text-xl">
-              <Icon icon="fa6-solid:xmark" />
-            </span>
-          </Button>
-          {img}
-        </div>
-      ) : (
-        <div {...getRootProps({ className: "dropzone" })}>
-          <input {...getInputProps()} />
-
-          <div className="w-full text-center border-dashed border border-default-200 dark:border-default-300 rounded-md py-[52px] flex items-center flex-col">
-            <CloudUpload className="text-default-300 w-10 h-10" />
-            <h4 className="text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-              Drop files here or click to upload.
-            </h4>
-            <div className="text-xs text-muted-foreground">
-              (This is just a demo drop zone. Selected files are not actually
-              uploaded.)
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default UploadSingleFile;
diff --git a/app/[locale]/(protected)/forms/input-group/basic-input-group.tsx b/app/[locale]/(protected)/forms/input-group/basic-input-group.tsx
deleted file mode 100644
index 42f79434..00000000
--- a/app/[locale]/(protected)/forms/input-group/basic-input-group.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
-import { Label } from "@/components/ui/label";
-import { Icon } from "@iconify/react";
-
-const BasicInputGroup = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupButton>
-          <Button
-            disabled
-            variant="outline"
-            size="md"
-            className="border-default-200 border-r-0"
-          >
-            <Icon icon="heroicons:at-symbol" />
-          </Button>
-        </InputGroupButton>
-        <Input
-          disabled
-          type="text"
-          placeholder="Search.."
-          className="border-l-0"
-        />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-        <Input readOnly type="text" placeholder="Search.." />
-      </InputGroup>
-      <div>
-        <Label className="mb-3" htmlFor="username5">
-          Password
-        </Label>
-        <InputGroup>
-          <Input
-            type="password"
-            placeholder="Password"
-            id="username5"
-            required
-          />
-        </InputGroup>
-      </div>
-      <InputGroup>
-        <Input type="text" placeholder="Recipent’s username" />
-        <InputGroupText>@example.com</InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>https://example.com/users/</InputGroupText>
-        <Input type="text" placeholder="Recipent’s username" />
-      </InputGroup>
-    </>
-  );
-};
-
-export default BasicInputGroup;
diff --git a/app/[locale]/(protected)/forms/input-group/checkbox-radio-group.tsx b/app/[locale]/(protected)/forms/input-group/checkbox-radio-group.tsx
deleted file mode 100644
index 13691275..00000000
--- a/app/[locale]/(protected)/forms/input-group/checkbox-radio-group.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-
-const CheckboxRadioGroup = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Checkbox color="secondary" />
-        </InputGroupText>
-
-        <Input
-          type="text"
-          placeholder="Small Radius"
-          className="h-8"
-        />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <RadioGroup defaultValue="right">
-            <RadioGroupItem color="secondary" value="right" id="r_1" />
-          </RadioGroup>
-        </InputGroupText>
-
-        <Input
-          type="text"
-          placeholder="Small Radius"
-          className="h-8"
-        />
-      </InputGroup>
-    </>
-  );
-};
-
-export default CheckboxRadioGroup;
diff --git a/app/[locale]/(protected)/forms/input-group/input-button-with-dropdown.tsx b/app/[locale]/(protected)/forms/input-group/input-button-with-dropdown.tsx
deleted file mode 100644
index 33ae485d..00000000
--- a/app/[locale]/(protected)/forms/input-group/input-button-with-dropdown.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react";
-
-const InputButtonWithDropdown = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                color="secondary"
-                size="md"
-                className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0"
-              >
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                color="secondary"
-                size="md"
-                className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-l-0"
-              >
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                color="secondary"
-                size="md"
-                className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0"
-              >
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                color="secondary"
-                size="md"
-                className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-l-0"
-              >
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputButtonWithDropdown;
diff --git a/app/[locale]/(protected)/forms/input-group/input-group-radius.tsx b/app/[locale]/(protected)/forms/input-group/input-group-radius.tsx
deleted file mode 100644
index 9f10aa73..00000000
--- a/app/[locale]/(protected)/forms/input-group/input-group-radius.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-
-import { Icon } from "@iconify/react";
-
-const InputGroupRadius = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText className="h-8">
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input
-          type="text"
-
-          placeholder="Small Radius"
-          className="h-8"
-        />
-      </InputGroup>
-
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Default Radius" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input
-          type="text"
-          placeholder="Large Radius"
-          className="h-14"
-        />
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupRadius;
diff --git a/app/[locale]/(protected)/forms/input-group/input-group-size.tsx b/app/[locale]/(protected)/forms/input-group/input-group-size.tsx
deleted file mode 100644
index 6a17e1ea..00000000
--- a/app/[locale]/(protected)/forms/input-group/input-group-size.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-import React from "react";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-
-import { Icon } from "@iconify/react";
-
-const InputGroupSize = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Small Size" className="h-8" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Default Size" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Large Size" className="h-14" />
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupSize;
diff --git a/app/[locale]/(protected)/forms/input-group/input-group-unmerged.tsx b/app/[locale]/(protected)/forms/input-group/input-group-unmerged.tsx
deleted file mode 100644
index 729ff6cf..00000000
--- a/app/[locale]/(protected)/forms/input-group/input-group-unmerged.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Icon } from "@iconify/react";
-
-const InputGroupUnmerged = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText color="info" className=" border-info-500">
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Search.." color="info" />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search" />
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>@</InputGroupText>
-        <Input type="text" placeholder="Username" />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText>@example.com</InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>https://example.com/users/</InputGroupText>
-        <Input type="text" placeholder="Recient’s username" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>$10</InputGroupText>
-        <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText>00.</InputGroupText>
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupUnmerged;
diff --git a/app/[locale]/(protected)/forms/input-group/input-groups-button.tsx b/app/[locale]/(protected)/forms/input-group/input-groups-button.tsx
deleted file mode 100644
index 590576c3..00000000
--- a/app/[locale]/(protected)/forms/input-group/input-groups-button.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
-
-const InputGroupsButton = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupButton>
-          <Button  size="md" className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0">
-            <Icon icon="heroicons:magnifying-glass" />
-          </Button>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupButton>
-          <Button size="md" className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-l-0">
-            <Icon icon="heroicons:magnifying-glass" />
-          </Button>
-        </InputGroupButton>
-      </InputGroup>
-
-      <InputGroup>
-        <InputGroupButton>
-          <Button size="md" className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0">Search</Button>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupsButton;
diff --git a/app/[locale]/(protected)/forms/input-group/layout.tsx b/app/[locale]/(protected)/forms/input-group/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/input-group/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/input-group/merged-input-group.tsx b/app/[locale]/(protected)/forms/input-group/merged-input-group.tsx
deleted file mode 100644
index 3a41bae2..00000000
--- a/app/[locale]/(protected)/forms/input-group/merged-input-group.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
-import { Icon } from "@iconify/react";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-
-const MergedInputGroup = () => {
-  return (
-    <>
-      <InputGroup merged>
-        <InputGroupText className="border-default-200">
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup merged>
-        <Input type="text" placeholder="Search" />
-        <InputGroupText className="border-default-200">
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup merged>
-        <InputGroupButton>
-          <Button
-            disabled
-            variant="outline"
-            size="md"
-            className="border-default-200 border-r-0"
-          >
-            <Icon icon="heroicons:at-symbol" />
-          </Button>
-        </InputGroupButton>
-        <Input
-          disabled
-          type="text"
-          placeholder="Search.."
-          className="border-l-0"
-        />
-      </InputGroup>
-      <InputGroup merged>
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-        <Input readOnly type="text" placeholder="Search.." />
-      </InputGroup>
-      <div>
-        <Label className="mb-3" htmlFor="username2">
-          Password
-        </Label>
-        <InputGroup>
-          <Input
-            type="password"
-            placeholder="Password"
-            id="username2"
-            required
-          />
-        </InputGroup>
-      </div>
-      <InputGroup merged>
-        <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText className=" text-sm font-normal ">
-          @example.com
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup merged>
-        <InputGroupText className=" text-sm font-normal">
-          https://example.com/users/
-        </InputGroupText>
-        <Input type="text" placeholder="Recient’s username" />
-      </InputGroup>
-    </>
-  );
-};
-
-export default MergedInputGroup;
diff --git a/app/[locale]/(protected)/forms/input-group/multiple-addons.tsx b/app/[locale]/(protected)/forms/input-group/multiple-addons.tsx
deleted file mode 100644
index d7b24a33..00000000
--- a/app/[locale]/(protected)/forms/input-group/multiple-addons.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-
-const MultipleAddons = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>$</InputGroupText>
-        <Input type="text" placeholder="100" />
-        <InputGroupText>00</InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>$</InputGroupText>
-        <Input type="text" placeholder="100" />
-        <InputGroupText>00</InputGroupText>
-      </InputGroup>
-    </>
-  );
-};
-
-export default MultipleAddons;
diff --git a/app/[locale]/(protected)/forms/input-group/page.tsx b/app/[locale]/(protected)/forms/input-group/page.tsx
deleted file mode 100644
index d75c5dbf..00000000
--- a/app/[locale]/(protected)/forms/input-group/page.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-import Card from "@/components/code-snippet";
-import InputGroupSize from "./input-group-size";
-import MergedInputGroup from "./merged-input-group";
-import InputGroupsButton from "./input-groups-button";
-import BasicInputGroup from "./basic-input-group";
-import InputGroupRadius from "./input-group-radius";
-import CheckboxRadioGroup from "./checkbox-radio-group";
-import MultipleAddons from "./multiple-addons";
-import InputButtonWithDropdown from "./input-button-with-dropdown";
-import { basicInputGroup, checkboxRadioGroup, inputButtonWithDropdown, inputGroupButtons, inputGroupRadius, inputGroupSize, mergedInputGroup, multipleAddons } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const InputGrouPpage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <Card title="Basic Input Group" code={basicInputGroup}>
-          <div className=" space-y-4">
-            <BasicInputGroup />
-          </div>
-        </Card>
-        <Card title="Merged Input Group" code={mergedInputGroup}>
-          <div className=" space-y-4">
-            <MergedInputGroup />
-          </div>
-        </Card>
-        <Card title="Input Group Radius" code={inputGroupRadius}>
-          <div className=" space-y-4">
-            <InputGroupRadius />
-          </div>
-        </Card>
-        <Card title="Input Group Size" code={inputGroupSize}>
-          <div className=" space-y-4">
-            <InputGroupSize />
-          </div>
-        </Card>
-        <Card title="Checkbox & Radio" code={checkboxRadioGroup}>
-          <div className=" space-y-4">
-            <CheckboxRadioGroup />
-          </div>
-        </Card>
-        <Card title="Multiple Addons" code={multipleAddons}>
-          <div className=" space-y-4">
-            <MultipleAddons />
-          </div>
-        </Card>
-        <Card title="Buttons Inputs" code={inputGroupButtons}>
-          <div className=" space-y-4">
-            <InputGroupsButton />
-          </div>
-        </Card>
-        <Card title="Input Groups With Buttons With Dropdown" code={inputButtonWithDropdown}>
-          <div className=" space-y-4">
-            <InputButtonWithDropdown />
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default InputGrouPpage;
diff --git a/app/[locale]/(protected)/forms/input-group/source-code.ts b/app/[locale]/(protected)/forms/input-group/source-code.ts
deleted file mode 100644
index f002d5d2..00000000
--- a/app/[locale]/(protected)/forms/input-group/source-code.ts
+++ /dev/null
@@ -1,501 +0,0 @@
-export const basicInputGroup=`"use client";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
-import { Label } from "@/components/ui/label";
-import { Icon } from "@iconify/react";
-
-const BasicInputGroup = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-        <Input type="text" placeholder="Search.."  />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupButton>
-          <Button disabled variant="outline" size="md" color="secondary">
-            <Icon icon="heroicons:at-symbol" />
-          </Button>
-        </InputGroupButton>
-        <Input disabled type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-        <Input readOnly type="text" placeholder="Search.." />
-      </InputGroup>
-      <div>
-        <Label className="mb-3" htmlFor="username5">
-          Password
-        </Label>
-        <InputGroup>
-          <Input
-            type="password"
-            placeholder="Password"
-            id="username5"
-            required
-          />
-        </InputGroup>
-      </div>
-      <InputGroup>
-        <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText>@example.com</InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>https://example.com/users/</InputGroupText>
-        <Input type="text" placeholder="Recient’s username" />
-      </InputGroup>
-    </>
-  );
-};
-
-export default BasicInputGroup;
-`
-export const checkboxRadioGroup=`"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-
-const CheckboxRadioGroup = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Checkbox color="secondary" />
-        </InputGroupText>
-
-        <Input
-          type="text"
-          radius="sm"
-          placeholder="Small Radius"
-          className="h-8"
-        />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <RadioGroup defaultValue="right">
-            <RadioGroupItem color="secondary" value="right" id="r_1" />
-          </RadioGroup>
-        </InputGroupText>
-
-        <Input
-          type="text"
-          radius="sm"
-          placeholder="Small Radius"
-          className="h-8"
-        />
-      </InputGroup>
-    </>
-  );
-};
-
-export default CheckboxRadioGroup;
-`
-
-export const inputButtonWithDropdown=`"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react";
-
-const InputButtonWithDropdown = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button color="secondary" size="md">
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button color="secondary" size="md">
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button color="secondary" size="md">
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button color="secondary" size="sm">
-                Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[196px]" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </InputGroupButton>
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputButtonWithDropdown;
-`
-
-export const inputGroupRadius=`"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-
-import { Icon } from "@iconify/react";
-
-const InputGroupRadius = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText className="h-8">
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input
-          type="text"
-          radius="sm"
-          placeholder="Small Radius"
-          className="h-8"
-        />
-      </InputGroup>
-
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" radius="lg" placeholder="Default Radius" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input
-          type="text"
-          radius="xl"
-          placeholder="Large Radius"
-          className="h-14"
-        />
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupRadius;
-`
-export const inputGroupSize=`"use client";
-import React from "react";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-
-import { Icon } from "@iconify/react";
-
-const InputGroupSize = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Small Size" className="h-8" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Default Size" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Large Size" className="h-14" />
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupSize;
-`
-export const inputGroupUnmerged=`"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Icon } from "@iconify/react";
-
-const InputGroupUnmerged = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText color="info" className=" border-info-500">
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Search.." color="info" />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search" />
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>@</InputGroupText>
-        <Input type="text" placeholder="Username" />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText>@example.com</InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>https://example.com/users/</InputGroupText>
-        <Input type="text" placeholder="Recient’s username" />
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>$10</InputGroupText>
-        <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText>00.</InputGroupText>
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupUnmerged;
-`
-export const inputGroupButtons=`"use client";
-
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
-
-const InputGroupsButton = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupButton>
-          <Button color="primary" size="md">
-            <Icon icon="heroicons:magnifying-glass" />
-          </Button>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupButton>
-          <Button size="md">
-            <Icon icon="heroicons:magnifying-glass" />
-          </Button>
-        </InputGroupButton>
-      </InputGroup>
-
-      <InputGroup>
-        <InputGroupButton>
-          <Button size="md">Search</Button>
-        </InputGroupButton>
-        <Input type="text" placeholder="Search.." />
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-      </InputGroup>
-    </>
-  );
-};
-
-export default InputGroupsButton;
-`
-export const mergedInputGroup=`"use client";
-
-import { Input } from "@/components/ui/input";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
-import { Icon } from "@iconify/react";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-
-const MergedInputGroup = () => {
-  return (
-    <>
-      <InputGroup merged>
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-        <Input type="text" placeholder="Search.." />
-      </InputGroup>
-      <InputGroup merged>
-        <Input type="text" placeholder="Search" />
-        <InputGroupText>
-          <Icon icon="heroicons:magnifying-glass" />
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup merged>
-        <InputGroupButton>
-          <Button disabled variant="outline" size="md" color="secondary">
-            <Icon icon="heroicons:at-symbol" />
-          </Button>
-        </InputGroupButton>
-        <Input disabled type="text"  placeholder="Search.." />
-      </InputGroup>
-      <InputGroup merged>
-        <InputGroupText>
-          <Icon icon="heroicons:at-symbol" />
-        </InputGroupText>
-        <Input readOnly type="text" placeholder="Search.." />
-      </InputGroup>
-      <div>
-        <Label className="mb-3" htmlFor="username2">
-          Password
-        </Label>
-        <InputGroup>
-          <Input
-            type="password"
-            placeholder="Password"
-            id="username2"
-            required
-          />
-        </InputGroup>
-      </div>
-      <InputGroup merged>
-        <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText className=" text-sm font-normal">
-          @example.com
-        </InputGroupText>
-      </InputGroup>
-      <InputGroup merged>
-        <InputGroupText className=" text-sm font-normal">
-          https://example.com/users/
-        </InputGroupText>
-        <Input type="text" placeholder="Recient’s username" />
-      </InputGroup>
-    </>
-  );
-};
-
-export default MergedInputGroup;
-`
-
-export const multipleAddons=`"use client";
-
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-
-const MultipleAddons = () => {
-  return (
-    <>
-      <InputGroup>
-        <InputGroupText>$</InputGroupText>
-        <Input type="text" placeholder="100" />
-        <InputGroupText>00</InputGroupText>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupText>$</InputGroupText>
-        <Input type="text" placeholder="100" />
-        <InputGroupText>00</InputGroupText>
-      </InputGroup>
-    </>
-  );
-};
-
-export default MultipleAddons;
-`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-layout/horizontal-form-icon.tsx b/app/[locale]/(protected)/forms/input-layout/horizontal-form-icon.tsx
deleted file mode 100644
index 58d8f62b..00000000
--- a/app/[locale]/(protected)/forms/input-layout/horizontal-form-icon.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Icon } from "@/components/ui/icon";
-
-const HorizontalFormWithIcon = () => {
-  return (
-    <form>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriFullName1" className="lg:min-w-[160px]">Full Name</Label>
-          <InputGroup merged>
-            <InputGroupText>
-              <Icon icon="mdi:user" />
-            </InputGroupText>
-            <Input type="text" placeholder="Your name" id="hriFullName1" />
-          </InputGroup>
-        </div>
-        <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriEmail1" className="lg:min-w-[160px]">Email</Label>
-          <InputGroup merged>
-            <InputGroupText>
-              <Icon icon="ic:outline-email" />
-            </InputGroupText>
-            <Input type="email" placeholder="Your email" id="hriEmail1" />
-          </InputGroup>
-        </div>
-        <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriPhone1" className="lg:min-w-[160px]">Phone</Label>
-          <InputGroup merged className="flex">
-            <InputGroupText>
-              <Icon icon="tdesign:call" />
-            </InputGroupText>
-            <Input type="number" placeholder="Type number" id="hriPhone1" />
-          </InputGroup>
-        </div>
-        <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriPassword1" className="lg:min-w-[160px]">Password</Label>
-          <InputGroup merged>
-            <InputGroupText>
-              <Icon icon="material-symbols:lock-outline" />
-            </InputGroupText>
-            <Input type="password" placeholder="Type password" id="hriPassword1" />
-            <InputGroupText>
-              <Icon icon="basil:eye-closed-solid" />
-            </InputGroupText>
-          </InputGroup>
-        </div>
-
-
-        <div className="col-span-2 lg:pl-[160px]">
-          <div className="flex lg:items-center gap-1.5">
-            <Checkbox id="term6" />
-            <Label
-              htmlFor="term6"
-              className="text-base text-muted-foreground font-normal"
-            >
-              Remember Me
-            </Label>
-          </div>
-        </div>
-        <div className="col-span-2 lg:pl-[160px]">
-          <Button type="submit">Submit</Button>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-export default HorizontalFormWithIcon;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-layout/horizontal-form.tsx b/app/[locale]/(protected)/forms/input-layout/horizontal-form.tsx
deleted file mode 100644
index b7b77ebf..00000000
--- a/app/[locale]/(protected)/forms/input-layout/horizontal-form.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
-const HorizontalForm = () => {
-  return (
-    <form>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrFullName2" className="lg:min-w-[160px]">Full Name</Label>
-          <Input type="text" placeholder="Your Name" id="hrFullName2" />
-        </div>
-        <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrEmail2" className="lg:min-w-[160px]">Email </Label>
-          <Input type="email" placeholder="Your Email" id="hrEmail2" />
-        </div>
-        <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrPhone2" className="lg:min-w-[160px]">Phone</Label>
-          <Input type="number" placeholder="Your Number" id="hrPhone2" />
-        </div>
-        <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrPassword2" className="lg:min-w-[160px]">Password</Label>
-          <Input type="password" placeholder="Your Password" id="hrPassword2" />
-        </div>
-        <div className="col-span-2 lg:pl-[160px]">
-          <div className="flex lg:items-center gap-1.5">
-            <Checkbox id="term5" />
-            <Label
-              htmlFor="term5"
-            >
-              Remember me
-            </Label>
-          </div>
-        </div>
-        <div className="col-span-2 lg:pl-[160px] mt-2">
-          <Button type="submit">Submit</Button>
-        </div>
-      </div>
-
-    </form>
-  );
-};
-
-export default HorizontalForm;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-layout/layout.tsx b/app/[locale]/(protected)/forms/input-layout/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/input-layout/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/input-layout/page.tsx b/app/[locale]/(protected)/forms/input-layout/page.tsx
deleted file mode 100644
index 9c8d6c0f..00000000
--- a/app/[locale]/(protected)/forms/input-layout/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import HorizontalForm from "./horizontal-form";
-import HorizontalFormWithIcon from "./horizontal-form-icon";
-import VerticalForm from "./vertical-form";
-import VerticalFormWithIcon from "./vertical-form-icon";
-
-const InputLayout = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
-        <Card>
-          <CardHeader>
-            <CardTitle>Horizontal Form</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <HorizontalForm />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Horizontal Form With Icon</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <HorizontalFormWithIcon />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Vertical Form</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <VerticalForm />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Vertical Form With Icon</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <VerticalFormWithIcon />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default InputLayout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-layout/vertical-form-icon.tsx b/app/[locale]/(protected)/forms/input-layout/vertical-form-icon.tsx
deleted file mode 100644
index 18630222..00000000
--- a/app/[locale]/(protected)/forms/input-layout/vertical-form-icon.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Icon } from "@/components/ui/icon";
-
-const VerticalFormWithIcon = () => {
-  return (
-    <form>
-      <div className="space-y-4">
-
-        <div className="space-y-2">
-          <Label htmlFor="viFullName3">Full Name</Label>
-          <InputGroup merged>
-            <InputGroupText>
-              <Icon icon="mdi:user" />
-            </InputGroupText>
-            <Input type="text" placeholder="Your name" id="viFullName3" />
-          </InputGroup>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="viEmail3">Email</Label>
-          <InputGroup merged>
-            <InputGroupText>
-              <Icon icon="ic:outline-email" />
-            </InputGroupText>
-            <Input type="email" placeholder="Your email" id="viEmail3" />
-          </InputGroup>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="viPhone3">Phone</Label>
-          <InputGroup merged className="flex">
-            <InputGroupText>
-              <Icon icon="tdesign:call" />
-            </InputGroupText>
-            <Input type="number" placeholder="Type number" id="viPhone3" />
-          </InputGroup>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="viPassword3">Password</Label>
-          <InputGroup merged>
-            <InputGroupText>
-              <Icon icon="material-symbols:lock-outline" />
-            </InputGroupText>
-            <Input type="password" placeholder="Type password" id="viPassword3" />
-            <InputGroupText>
-              <Icon icon="basil:eye-closed-solid" />
-            </InputGroupText>
-          </InputGroup>
-        </div>
-        <div className="col-span-2">
-          <div className="flex items-center gap-1.5">
-            <Checkbox id="term4" color="default" />
-            <Label
-              htmlFor="term4"
-              className="text-base text-muted-foreground font-normal"
-            >
-              Remember Me
-            </Label>
-          </div>
-        </div>
-        <div className="col-span-2">
-          <Button type="submit">Submit</Button>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-export default VerticalFormWithIcon;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-layout/vertical-form.tsx b/app/[locale]/(protected)/forms/input-layout/vertical-form.tsx
deleted file mode 100644
index 4ace0016..00000000
--- a/app/[locale]/(protected)/forms/input-layout/vertical-form.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client"
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
-const VerticalForm = () => {
-  return (
-    <form>
-      <div className="space-y-4">
-
-        <div className="space-y-2">
-          <Label htmlFor="fullName5">Full Name</Label>
-          <Input type="text" placeholder="Your Name" id="fullName5" />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="email5">Email</Label>
-          <Input type="email" placeholder="Your Email" id="email5" />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="phoneNumber5">Phone</Label>
-          <Input type="number" placeholder="Your Number" id="phoneNumber5" />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="password5">Password</Label>
-          <Input type="password" placeholder="Type Password" id="password5" />
-        </div>
-        <div className="flex items-center gap-1.5">
-          <Checkbox id="term3" />
-          <Label
-            htmlFor="term3"
-            className="text-base text-muted-foreground font-normal"
-          >
-            Remember Me
-          </Label>
-        </div>
-        <Button type="submit">Submit</Button>
-      </div>
-    </form>
-  );
-};
-
-export default VerticalForm;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-mask/layout.tsx b/app/[locale]/(protected)/forms/input-mask/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/input-mask/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/input-mask/page.tsx b/app/[locale]/(protected)/forms/input-mask/page.tsx
deleted file mode 100644
index 65697941..00000000
--- a/app/[locale]/(protected)/forms/input-mask/page.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import { Label } from "@/components/ui/label";
-import { CleaveInput } from "@/components/ui/cleave";
-import Card from "@/components/code-snippet";
-import {
-  InputGroup,
-  InputGroupText
-} from "@/components/ui/input-group";
-import { inputMask } from "./source-code";
-
-const InputMaskPage = () => {
-  return (
-    <div className=" space-y-5">
-      <Card title="Input Mask" code={inputMask}>
-        <div className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5">
-          <div>
-            <Label className="mb-2">Credit Card</Label>
-            <CleaveInput
-              options={{ creditCard: true }}
-              placeholder="0000 0000 0000 0000"
-            />
-          </div>
-          <div>
-            <Label className="mb-2">Credit Card</Label>
-            <InputGroup>
-              <InputGroupText>MY (+6)</InputGroupText>
-              <CleaveInput
-                placeholder="Phone Number"
-                id="phoneNumber"
-                options={{ phone: true, phoneRegionCode: "US" }}
-              />
-            </InputGroup>
-          </div>
-
-          <div>
-            <Label className="mb-2">Date</Label>
-            <CleaveInput
-              id="date"
-              options={{ date: true, datePattern: ["Y", "m", "d"] }}
-              placeholder="YYYY-MM-DD"
-            />
-          </div>
-          <div>
-            <Label className="mb-2">Time</Label>
-            <CleaveInput
-              id="time"
-              options={{ time: true, timePattern: ["h", "m", "s"] }}
-              placeholder="HH:MM:SS"
-            />
-          </div>
-          <div>
-            <Label className="mb-2">Numeral Formatting</Label>
-            <CleaveInput
-              id="nu"
-              options={{ numeral: true }}
-              placeholder="10,000"
-            />
-          </div>
-
-          <div>
-            <Label className="mb-2">Blocks</Label>
-            <CleaveInput
-              id="block"
-              options={{ blocks: [4, 3, 3], uppercase: true }}
-              placeholder="Block[1,4,7]"
-            />
-          </div>
-          <div>
-            <Label className="mb-2">Delimiters</Label>
-            <CleaveInput
-              id="delimiters"
-              options={{ delimiter: "·", blocks: [3, 3, 3], uppercase: true }}
-              placeholder="Delimiter: '.'"
-            />
-          </div>
-          <div>
-            <Label className="mb-2">Custom Delimiters</Label>
-            <CleaveInput
-              id="customDelimiter"
-              options={{
-                delimiters: [".", ".", "-"],
-                blocks: [3, 3, 3, 2],
-                uppercase: true,
-              }}
-              placeholder="Delimiter: ['.', '.', '-']"
-            />
-          </div>
-
-          <div>
-            <Label className="mb-2">Prefix</Label>
-            <CleaveInput
-              id="prefix"
-              options={{
-                prefix: "+88",
-                blocks: [3, 3, 3, 4],
-                uppercase: true,
-              }}
-              placeholder="+88"
-            />
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default InputMaskPage;
diff --git a/app/[locale]/(protected)/forms/input-mask/source-code.ts b/app/[locale]/(protected)/forms/input-mask/source-code.ts
deleted file mode 100644
index 90b076a4..00000000
--- a/app/[locale]/(protected)/forms/input-mask/source-code.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-export const inputMask = `"use client";
-import Card from "@/components/ui/card-snippet";
-import { Label } from "@/components/ui/label";
-import { CleaveInput } from "@/components/ui/cleave";
-import { Icon } from "@iconify/react";
-import {
-  InputGroup,
-  InputGroupText,
-  InputGroupButton,
-} from "@/components/ui/input-group";
-
-const InputMaskPage = () => {
-  return (
-    <div className=" space-y-5">
-      <Card title="Input Mask">
-        <div className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5">
-          <div>
-            <Label>Credit Card</Label>
-            <CleaveInput
-              options={{ creditCard: true }}
-              placeholder="0000 0000 0000 0000"
-            />
-          </div>
-          <div>
-            <Label>Credit Card</Label>
-            <InputGroup>
-              <InputGroupText>MY (+6)</InputGroupText>
-              <CleaveInput
-                placeholder="Phone Number"
-                id="phoneNumber"
-                options={{ phone: true, phoneRegionCode: "US" }}
-              />
-            </InputGroup>
-          </div>
-          <div>
-            <Label>Date</Label>
-            <CleaveInput
-              id="date"
-              options={{ date: true, datePattern: ["Y", "m", "d"] }}
-              placeholder="YYYY-MM-DD"
-            />
-          </div>
-          <div>
-            <Label>Time</Label>
-            <CleaveInput
-              id="time"
-              options={{ time: true, timePattern: ["h", "m", "s"] }}
-              placeholder="HH:MM:SS"
-            />
-          </div>
-          <div>
-            <Label>Numeral Formatting</Label>
-            <CleaveInput
-              id="nu"
-              options={{ numeral: true }}
-              placeholder="10,000"
-            />
-          </div>
-
-          <div>
-            <Label>Blocks</Label>
-            <CleaveInput
-              id="block"
-              options={{ blocks: [4, 3, 3], uppercase: true }}
-              placeholder="Block[1,4,7]"
-            />
-          </div>
-          <div>
-            <Label>Delimiters</Label>
-            <CleaveInput
-              id="delimiters"
-              options={{ delimiter: "·", blocks: [3, 3, 3], uppercase: true }}
-              placeholder="Delimiter: '.'"
-            />
-          </div>
-          <div>
-            <Label>Custom Delimiters</Label>
-            <CleaveInput
-              id="customDelimiter"
-              options={{
-                delimiters: [".", ".", "-"],
-                blocks: [3, 3, 3, 2],
-                uppercase: true,
-              }}
-              placeholder="Delimiter: ['.', '.', '-']"
-            />
-          </div>
-
-          <div>
-            <Label>prefix</Label>
-            <CleaveInput
-              id="prefix"
-              options={{
-                prefix: "+88",
-                blocks: [3, 3, 3, 4],
-                uppercase: true,
-              }}
-              placeholder="+88"
-            />
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default InputMaskPage;
-`;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-otp/basic-input.tsx b/app/[locale]/(protected)/forms/input-otp/basic-input.tsx
deleted file mode 100644
index d885be8e..00000000
--- a/app/[locale]/(protected)/forms/input-otp/basic-input.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/components/ui/input-otp";
-
-const BasicInput = () => {
-  return (
-    <div className="flex justify-center">
-      <InputOTP maxLength={6}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  );
-};
-
-export default BasicInput;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-otp/controlled-otp.tsx b/app/[locale]/(protected)/forms/input-otp/controlled-otp.tsx
deleted file mode 100644
index cd77eb69..00000000
--- a/app/[locale]/(protected)/forms/input-otp/controlled-otp.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client"
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
-import { useState } from "react";
-const ControlledOtp = () => {
-  const [value, setValue] = useState("")
-
-  return (
-    <div className="flex flex-col items-center gap-4">
-      <InputOTP
-        maxLength={6}
-        value={value}
-        onChange={(value) => setValue(value)}
-      >
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-      <div className=" text-sm">
-        {value === "" ? (
-          <>Enter your one-time password.</>
-        ) : (
-          <>You entered: {value}</>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ControlledOtp;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-otp/layout.tsx b/app/[locale]/(protected)/forms/input-otp/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/input-otp/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/input-otp/page.tsx b/app/[locale]/(protected)/forms/input-otp/page.tsx
deleted file mode 100644
index 3e0e7814..00000000
--- a/app/[locale]/(protected)/forms/input-otp/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicInput from "./basic-input";
-import PatternOtp from "./pattern-otp";
-import SeperatorOtp from "./separator-otp";
-import ControlledOtp from "./controlled-otp";
-import { basicOtp, patternOtp, separatorOtp, controlledOtp } from "./source-code"
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const InputOtp = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-2 gap-6 ">
-        <Card title="Basic Otp" code={basicOtp}>
-          <BasicInput />
-        </Card>
-        <Card title="Pattern Otp" code={patternOtp}>
-          <PatternOtp />
-        </Card>
-        <Card title="Separator Otp" code={separatorOtp}>
-          <SeperatorOtp />
-        </Card>
-        <Card title="Controlled Otp" code={controlledOtp}>
-          <ControlledOtp />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default InputOtp;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-otp/pattern-otp.tsx b/app/[locale]/(protected)/forms/input-otp/pattern-otp.tsx
deleted file mode 100644
index 4a8af3b7..00000000
--- a/app/[locale]/(protected)/forms/input-otp/pattern-otp.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client"
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
-
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
-const PatternOtp = () => {
-  return (
-    <div className="flex justify-center">
-      <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  );
-};
-
-export default PatternOtp;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-otp/separator-otp.tsx b/app/[locale]/(protected)/forms/input-otp/separator-otp.tsx
deleted file mode 100644
index f1aa23e6..00000000
--- a/app/[locale]/(protected)/forms/input-otp/separator-otp.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
-const SeperatorOtp = () => {
-  return (
-    <div className="flex justify-center">
-      <InputOTP maxLength={6} >
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP >
-    </div>
-  )
-};
-
-export default SeperatorOtp;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input-otp/source-code.ts b/app/[locale]/(protected)/forms/input-otp/source-code.ts
deleted file mode 100644
index 5a24f261..00000000
--- a/app/[locale]/(protected)/forms/input-otp/source-code.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-export const basicOtp=`import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/components/ui/input-otp";
-
-const BasicInput = () => {
-  return (
-    <div className="flex justify-center">
-      <InputOTP maxLength={6}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  );
-};
-
-export default BasicInput;`
-
-export const patternOtp=`"use client"
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
-
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
-const PatternOtp = () => {
-  return (
-    <div className="flex justify-center">
-      <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  );
-};
-
-export default PatternOtp;`
-
-export const separatorOtp=`
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
-const SeperatorOtp = () => {
-  return (
-    <div className="flex justify-center">
-      <InputOTP maxLength={6} >
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP >
-    </div>
-  )
-};
-
-export default SeperatorOtp;`
-
-export const controlledOtp=`"use client"
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
-import { useState } from "react";
-const ControlledOtp = () => {
-  const [value, setValue] = useState("")
-
-  return (
-    <div className="flex flex-col items-center gap-4">
-      <InputOTP
-        maxLength={6}
-        value={value}
-        onChange={(value) => setValue(value)}
-      >
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-      <div className=" text-sm">
-        {value === "" ? (
-          <>Enter your one-time password.</>
-        ) : (
-          <>You entered: {value}</>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ControlledOtp;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input/basic-inputs.tsx b/app/[locale]/(protected)/forms/input/basic-inputs.tsx
deleted file mode 100644
index cd7a24ce..00000000
--- a/app/[locale]/(protected)/forms/input/basic-inputs.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-
-const BasicInputs = () => {
-  return (
-    <div className="space-y-4">
-      <div className="space-y-1.5">
-        <Label htmlFor="projectName">Project Name*</Label>
-        <Input type="text" id="projectName" placeholder="Management Dashboard" />
-      </div>
-      <div className="space-y-1.5">
-        <Label >Readonly Input</Label>
-        <Input type="text" placeholder="You can't edit me" readOnly />
-      </div>
-      <div className="space-y-1.5">
-        <Label>Disabled Input</Label>
-        <Input type="text" placeholder="You can't edit me" disabled />
-      </div>
-    </div>
-  );
-};
-
-export default BasicInputs;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input/input-colors.tsx b/app/[locale]/(protected)/forms/input/input-colors.tsx
deleted file mode 100644
index cc14d5ea..00000000
--- a/app/[locale]/(protected)/forms/input/input-colors.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Input } from "@/components/ui/input";
-
-const InputColors = () => {
-  return (
-    <div className="space-y-3">
-      <Input placeholder="Default" />
-      <Input placeholder="Primary" color="primary" />
-      <Input placeholder="Secondary" color="secondary" />
-      <Input placeholder="Info" color="info" />
-      <Input placeholder="Warning" color="warning" />
-      <Input placeholder="Success" color="success" />
-      <Input placeholder="Destructive" color="destructive" />
-    </div>
-  );
-};
-
-export default InputColors;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input/input-size.tsx b/app/[locale]/(protected)/forms/input/input-size.tsx
deleted file mode 100644
index 26cd5228..00000000
--- a/app/[locale]/(protected)/forms/input/input-size.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-const InputSize = () => {
-  return (
-    <div className="space-y-2.5">
-      <div className="space-y-1.5">
-        <Label htmlFor="sm">Small</Label>
-        <Input size="sm" id="sm" placeholder="Small" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="default">Default</Label>
-        <Input id="default" placeholder="Default" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="md">Medium</Label>
-        <Input size="md" id="md" placeholder="Medium" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="lg">Large</Label>
-        <Input size="lg" id="lg" placeholder="Large" />
-      </div>
-    </div>
-  );
-};
-
-export default InputSize;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input/layout.tsx b/app/[locale]/(protected)/forms/input/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/input/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/input/page.tsx b/app/[locale]/(protected)/forms/input/page.tsx
deleted file mode 100644
index d35b880b..00000000
--- a/app/[locale]/(protected)/forms/input/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicInputs from "./basic-inputs";
-import InputColors from "./input-colors";
-import InputSize from "./input-size";
-import { basicInput, inputColors, inputSize } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const InputPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb/>
-      <div className="space-y-6">
-        <Card title="Basic Inputs" code={basicInput}>
-          <BasicInputs />
-        </Card>
-        <Card title="Color Inputs" code={inputColors}>
-          <InputColors />
-        </Card>
-        <Card title="Size" code={inputSize}>
-          <InputSize />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default InputPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/input/source-code.ts b/app/[locale]/(protected)/forms/input/source-code.ts
deleted file mode 100644
index 879e4c26..00000000
--- a/app/[locale]/(protected)/forms/input/source-code.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-export const basicInput=`import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-
-const BasicInputs = () => {
-  return (
-    <div className="space-y-4">
-      <div className="space-y-1.5">
-        <Label htmlFor="projectName">Project Name*</Label>
-        <Input type="text" id="projectName" placeholder="Management Dashboard" />
-      </div>
-      <div className="space-y-1.5">
-        <Label >Readonly Input</Label>
-        <Input type="text" placeholder="You can't edit me" readOnly />
-      </div>
-      <div className="space-y-1.5">
-        <Label>Disabled Input</Label>
-        <Input type="text" placeholder="You can't edit me" disabled />
-      </div>
-    </div>
-  );
-};
-
-export default BasicInputs;`
-
-export const inputColors=`import { Input } from "@/components/ui/input";
-
-const InputColors = () => {
-  return (
-    <div className="space-y-3">
-      <Input placeholder="Default" />
-      <Input placeholder="Primary" color="primary" />
-      <Input placeholder="Secondary" color="secondary" />
-      <Input placeholder="Info" color="info" />
-      <Input placeholder="Warning" color="warning" />
-      <Input placeholder="Success" color="success" />
-      <Input placeholder="Destructive" color="destructive" />
-    </div>
-  );
-};
-
-export default InputColors;`
-
-export const inputSize=`import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-const InputSize = () => {
-  return (
-    <div className="space-y-2.5">
-      <div className="space-y-1.5">
-        <Label htmlFor="sm">Small</Label>
-        <Input size="sm" id="sm" placeholder="Small" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="default">Default</Label>
-        <Input id="default" placeholder="Default" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="md">Medium</Label>
-        <Input size="md" id="md" placeholder="Medium" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="lg">Large</Label>
-        <Input size="lg" id="lg" placeholder="Large" />
-      </div>
-    </div>
-  );
-};
-
-export default InputSize;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/layout.tsx b/app/[locale]/(protected)/forms/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/radio/basic-radio.tsx b/app/[locale]/(protected)/forms/radio/basic-radio.tsx
deleted file mode 100644
index 77415886..00000000
--- a/app/[locale]/(protected)/forms/radio/basic-radio.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-const BasicRadio = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <RadioGroup
-        className="flex flex-wrap"
-        default-value="default"
-      >
-        <div className="flex items-center gap-2">
-          <RadioGroupItem defaultChecked id="default" value="default" />
-          <Label className="text-default-600" htmlFor="default">Default</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem id="Unselected" value="Unselected" />
-          <Label className="text-default-600" htmlFor="Unselected">Unselected</Label>
-        </div>
-      </RadioGroup>
-      <RadioGroup default-value="disabled">
-        <div className="flex items-center gap-2">
-          <RadioGroupItem disabled checked id="disabled" value="disabled" />
-          <Label className="text-default-600" htmlFor="disabled">Disabled</Label>
-        </div>
-      </RadioGroup>
-      <RadioGroup>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem
-            disabled
-            id="Unselected Disabled"
-            value="Unselected Disabled"
-          />
-          <Label className="text-default-600" htmlFor="Unselected Disabled">Unselected Disabled</Label>
-        </div>
-      </RadioGroup>
-    </div>
-  );
-};
-
-export default BasicRadio;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/radio/color-radio.tsx b/app/[locale]/(protected)/forms/radio/color-radio.tsx
deleted file mode 100644
index 14239240..00000000
--- a/app/[locale]/(protected)/forms/radio/color-radio.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-const ColorRadio = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-    <RadioGroup className="flex flex-wrap" default-value="r1">
-      <div className="flex items-center gap-2">
-        <RadioGroupItem defaultChecked id="r1" value="r1" />
-        <Label className="text-default-600" htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="primary" id="r2" value="r2" />
-        <Label className="text-default-600" htmlFor="r2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="info" id="r3" value="r3" />
-        <Label className="text-default-600" htmlFor="r3">Info</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="success" id="r4" value="r4" />
-        <Label className="text-default-600" htmlFor="r4">Success</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="warning" id="r5" value="r5" />
-        <Label className="text-default-600" htmlFor="r5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="destructive" id="r6" value="r6" />
-        <Label className="text-default-600" htmlFor="r6">Destructive</Label>
-      </div>
-    </RadioGroup>
-    </div>
-  );
-};
-
-export default ColorRadio;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/radio/layout.tsx b/app/[locale]/(protected)/forms/radio/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/radio/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/radio/page.tsx b/app/[locale]/(protected)/forms/radio/page.tsx
deleted file mode 100644
index f65c168e..00000000
--- a/app/[locale]/(protected)/forms/radio/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicRadio from "./basic-radio";
-import ColorRadio from "./color-radio";
-import SizesRadio from "./sizes-radio";
-import RadioGroupOptionsArray from "./radio-group-array";
-import { basicRadio, colorRadio, radioGroupArray, sizesRadio } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const RadioPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic Radio" code={basicRadio}>
-          <BasicRadio />
-        </Card>
-        <Card title="Color" code={colorRadio}>
-          <ColorRadio />
-        </Card>
-        <Card title="Radio Button Size" code={sizesRadio}>
-          <SizesRadio />
-        </Card>
-        <Card title="Radio Group Options Array" code={radioGroupArray}>
-          <RadioGroupOptionsArray />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default RadioPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/radio/radio-group-array.tsx b/app/[locale]/(protected)/forms/radio/radio-group-array.tsx
deleted file mode 100644
index ab870edd..00000000
--- a/app/[locale]/(protected)/forms/radio/radio-group-array.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { useState } from "react";
-
-const RadioGroupOptionsArray = () => {
-  const [selected, setSelected] = useState("Orange");
-  const handleSelect = (value: string) => {
-    setSelected(value)
-  }
-  const items = [
-    {
-      value: "Orange",
-      label: "Orange",
-    },
-    {
-      value: "Apple",
-      label: "Apple",
-    },
-    {
-      value: "Banana",
-      label: "Banana",
-    },
-  ];
-  return (
-    <div>
-      <RadioGroup 
-      defaultValue={selected}
-      onValueChange={handleSelect}
-      className="flex flex-wrap gap-6"
-      >
-        {
-          items.map((item) => (
-            <div className="flex items-center gap-2" key={item.value}>
-              <RadioGroupItem id={"radio-" + item.value} value={item.value} />
-              <Label className="text-default-600" htmlFor={"radio-" + item.value}>{item.label}</Label>
-            </div>
-          ))
-        }
-      </RadioGroup>
-      <div className="mt-5 text-sm font-medium text-default-700">
-        Selected Options: <strong className="text-default-900">{selected}</strong>
-      </div>
-    </div>
-  );
-};
-
-export default RadioGroupOptionsArray;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/radio/sizes-radio.tsx b/app/[locale]/(protected)/forms/radio/sizes-radio.tsx
deleted file mode 100644
index bc5658ab..00000000
--- a/app/[locale]/(protected)/forms/radio/sizes-radio.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-const SizesRadio = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-      <RadioGroup className="flex flex-wrap" default-value="s1">
-        <div className="flex items-center gap-2">
-          <RadioGroupItem color="success" id="s4" value="s4" />
-          <Label className="text-default-600" htmlFor="s4">Default</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem defaultChecked id="s1" value="s1" size="sm" />
-          <Label className="text-default-600" htmlFor="s1">Small Size</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem color="primary" id="s2" value="s2" size="md" />
-          <Label className="text-default-600" htmlFor="s2">Medium Size</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem color="info" id="s3" value="s3" size="lg" />
-          <Label className="text-default-600" htmlFor="s3">Large</Label>
-        </div>
-      </RadioGroup>
-    </div>
-  );
-};
-
-export default SizesRadio;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/radio/source-code.ts b/app/[locale]/(protected)/forms/radio/source-code.ts
deleted file mode 100644
index 56bd2085..00000000
--- a/app/[locale]/(protected)/forms/radio/source-code.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-export const basicRadio=`import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-const BasicRadio = () => {
-  return (
-    <div className="flex flex-wrap gap-5">
-      <RadioGroup
-        className="flex flex-wrap"
-        default-value="default"
-      >
-        <div className="flex items-center gap-2">
-          <RadioGroupItem defaultChecked id="default" value="default" />
-          <Label className="text-default-600" htmlFor="default">Default</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem id="Unselected" value="Unselected" />
-          <Label className="text-default-600" htmlFor="Unselected">Unselected</Label>
-        </div>
-      </RadioGroup>
-      <RadioGroup default-value="disabled">
-        <div className="flex items-center gap-2">
-          <RadioGroupItem disabled checked id="disabled" value="disabled" />
-          <Label className="text-default-600" htmlFor="disabled">Disabled</Label>
-        </div>
-      </RadioGroup>
-      <RadioGroup>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem
-            disabled
-            id="Unselected Disabled"
-            value="Unselected Disabled"
-          />
-          <Label className="text-default-600" htmlFor="Unselected Disabled">Unselected Disabled</Label>
-        </div>
-      </RadioGroup>
-    </div>
-  );
-};
-
-export default BasicRadio;`
-export const colorRadio=`import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-const ColorRadio = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-    <RadioGroup className="flex flex-wrap" default-value="r1">
-      <div className="flex items-center gap-2">
-        <RadioGroupItem defaultChecked id="r1" value="r1" />
-        <Label className="text-default-600" htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="primary" id="r2" value="r2" />
-        <Label className="text-default-600" htmlFor="r2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="info" id="r3" value="r3" />
-        <Label className="text-default-600" htmlFor="r3">Info</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="success" id="r4" value="r4" />
-        <Label className="text-default-600" htmlFor="r4">Success</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="warning" id="r5" value="r5" />
-        <Label className="text-default-600" htmlFor="r5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="destructive" id="r6" value="r6" />
-        <Label className="text-default-600" htmlFor="r6">Destructive</Label>
-      </div>
-    </RadioGroup>
-    </div>
-  );
-};
-
-export default ColorRadio;`
-
-export const radioGroupArray=`"use client"
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { useState } from "react";
-
-const RadioGroupOptionsArray = () => {
-  const [selected, setSelected] = useState("Orange");
-  const handleSelect = (value: string) => {
-    setSelected(value)
-  }
-  const items = [
-    {
-      value: "Orange",
-      label: "Orange",
-    },
-    {
-      value: "Apple",
-      label: "Apple",
-    },
-    {
-      value: "Banana",
-      label: "Banana",
-    },
-  ];
-  return (
-    <div>
-      <RadioGroup 
-      defaultValue={selected}
-      onValueChange={handleSelect}
-      className="flex flex-wrap gap-6"
-      >
-        {
-          items.map((item) => (
-            <div className="flex items-center gap-2" key={item.value}>
-              <RadioGroupItem id={"radio-" + item.value} value={item.value} />
-              <Label className="text-default-600" htmlFor={"radio-" + item.value}>{item.label}</Label>
-            </div>
-          ))
-        }
-      </RadioGroup>
-      <div className="mt-5 text-sm font-medium text-default-700">
-        Selected Options: <strong className="text-default-900">{selected}</strong>
-      </div>
-    </div>
-  );
-};
-
-export default RadioGroupOptionsArray;`
-
-export const sizesRadio=`import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-const SizesRadio = () => {
-  return (
-    <div className="flex flex-wrap gap-6">
-      <RadioGroup className="flex flex-wrap" default-value="s1">
-        <div className="flex items-center gap-2">
-          <RadioGroupItem color="success" id="s4" value="s4" />
-          <Label className="text-default-600" htmlFor="s4">Default</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem defaultChecked id="s1" value="s1" size="sm" />
-          <Label className="text-default-600" htmlFor="s1">Small Size</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem color="primary" id="s2" value="s2" size="md" />
-          <Label className="text-default-600" htmlFor="s2">Medium Size</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem color="info" id="s3" value="s3" size="lg" />
-          <Label className="text-default-600" htmlFor="s3">Large</Label>
-        </div>
-      </RadioGroup>
-    </div>
-  );
-};
-
-export default SizesRadio;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/react-select/basic-select.tsx b/app/[locale]/(protected)/forms/react-select/basic-select.tsx
deleted file mode 100644
index 2ab6de55..00000000
--- a/app/[locale]/(protected)/forms/react-select/basic-select.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-
-import Select from "react-select";
-const furits: { value: string, label: string }[] = [
-  { value: "chocolate", label: "Chocolate" },
-  { value: "strawberry", label: "Strawberry" },
-  { value: "vanilla", label: "Vanilla" },
-];
-
-const styles = {
-  option: (provided: any, state: any) => ({
-    ...provided,
-    fontSize: "14px",
-  }),
-};
-
-const BasicSelect = () => {
-  return (
-    <div className=" grid grid-cols-1 lg:grid-cols-2 gap-5">
-      <div>
-        <Select
-          className="react-select"
-          classNamePrefix="select"
-          defaultValue={furits[0]}
-          options={furits}
-          styles={styles}
-        />
-      </div>
-      <div>
-        <Select
-          className="react-select"
-          classNamePrefix="select"
-          defaultValue={furits[1]}
-          styles={styles}
-          name="clear"
-          options={furits}
-          isClearable
-        />
-      </div>
-      <div>
-        <Select
-          className="react-select"
-          classNamePrefix="select"
-          defaultValue={furits[2]}
-          name="loading"
-          options={furits}
-          isLoading={true}
-          isClearable={false}
-          styles={styles}
-        />
-      </div>
-      <div>
-        <Select
-          className="react-select"
-          classNamePrefix="select"
-          defaultValue={furits[3]}
-          name="disabled"
-          options={furits}
-          isDisabled={true}
-          isClearable={false}
-          styles={styles}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default BasicSelect;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/react-select/layout.tsx b/app/[locale]/(protected)/forms/react-select/layout.tsx
deleted file mode 100644
index 999bc158..00000000
--- a/app/[locale]/(protected)/forms/react-select/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const metadata = {
-  title: "Select Form",
-};
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
-
diff --git a/app/[locale]/(protected)/forms/react-select/page.tsx b/app/[locale]/(protected)/forms/react-select/page.tsx
deleted file mode 100644
index e10fb5ab..00000000
--- a/app/[locale]/(protected)/forms/react-select/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-import Card from "@/components/code-snippet";
-import ReactSelectOption from "./react-select-options";
-import BasicSelect from "./basic-select";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-
-const ReactSelectPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb/>
-    <div className="space-y-5">
-      <Card title="Basic React Select" code="">
-        <BasicSelect />
-      </Card>
-      <Card title="React Select Options" code="">
-        <ReactSelectOption />
-      </Card>
-    </div>
-    </div>
-  );
-};
-
-export default ReactSelectPage;
diff --git a/app/[locale]/(protected)/forms/react-select/react-select-options.tsx b/app/[locale]/(protected)/forms/react-select/react-select-options.tsx
deleted file mode 100644
index bc30f130..00000000
--- a/app/[locale]/(protected)/forms/react-select/react-select-options.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import Select, { GroupBase, OptionProps, components } from "react-select";
-import makeAnimated from "react-select/animated";
-import { Icon } from "@iconify/react";
-
-interface OptionType {
-  value: string;
-  label: string;
-  isFixed?: boolean;
-  icon?: string;
-}
-
-
-interface GroupedOption {
-  label: string;
-  options: OptionType[];
-}
-
-const fruits: OptionType[] = [
-  { value: "chocolate", label: "Chocolate" },
-  { value: "strawberry", label: "Strawberry" },
-  { value: "vanilla", label: "Vanilla" },
-  { value: "orange", label: "Orange" },
-  { value: "apple", label: "Apple" },
-];
-const formatGroupLabel = (data: GroupBase<OptionType>) => (
-  <div className="flex justify-between items-center">
-    <strong>
-      <span className=" text-2xl font-semibold capitalize">{data.label}</span>
-    </strong>
-    <span>{data.options.length}</span>
-  </div>
-);
-const groupedOptions: GroupedOption[] = [
-  {
-    label: "Ice Creams",
-    options: [
-      { value: "vanilla", label: "Vanilla" },
-      { value: "Dark Chocolate", label: "Dark Chocolate" },
-      { value: "chocolate", label: "Chocolate" },
-      { value: "strawberry", label: "Strawberry" },
-      { value: "salted-caramel", label: "Salted Caramel" },
-    ],
-  },
-  {
-    label: "Snacks",
-    options: [
-      { value: "Pizza", label: "Pizza" },
-      { value: "Burger", label: "Burger" },
-      { value: "Pasta", label: "Pasta" },
-      { value: "Pretzel", label: "Pretzel" },
-      { value: "Popcorn", label: "Popcorn" },
-    ],
-  },
-];
-const animatedComponents = makeAnimated();
-
-
-const styles = {
-  multiValue: (base: any, state: any) => {
-    return state.data.isFixed ? { ...base, opacity: "0.5" } : base;
-  },
-  multiValueLabel: (base: any, state: any) => {
-    return state.data.isFixed
-      ? { ...base, color: "#626262", paddingRight: 6 }
-      : base;
-  },
-  multiValueRemove: (base: any, state: any) => {
-    return state.data.isFixed ? { ...base, display: "none" } : base;
-  },
-  option: (provided: any, state: any) => ({
-    ...provided,
-    fontSize: "14px",
-  }),
-};
-const orderOptions = (values: OptionType[]) => {
-  if (values.length > 0)
-    return values
-      .filter((v) => v.isFixed)
-      .concat(values.filter((v) => !v.isFixed));
-};
-
-const iconOptions: GroupedOption[] = [
-  {
-    label: "Social Media",
-    options: [
-      {
-        value: "facebook",
-        label: "Facebook",
-        icon: "fe:facebook",
-      },
-      {
-        value: "twitter",
-        label: "Twitter",
-        icon: "fe:twitter",
-      },
-      {
-        value: "linkedin",
-        label: "Linkedin",
-        icon: "fe:linkedin",
-      },
-      {
-        value: "github",
-        label: "Github",
-        icon: "fe:github",
-      },
-      {
-        value: "instagram",
-        label: "Instagram",
-        icon: "fe:instagram",
-      },
-      {
-        value: "dribbble",
-        label: "Dribbble",
-        icon: "fe:dribbble",
-      },
-      {
-        value: "gitlab",
-        label: "Gitlab",
-        icon: "fe:gitlab",
-      },
-    ],
-  },
-  {
-    label: "File Types",
-    options: [
-      { value: "pdf", label: "PDF", icon: "fe:file" },
-      { value: "txt", label: "txt", icon: "fe:file-word" },
-      { value: "image", label: "Image", icon: "fe:file-image" },
-    ],
-  },
-  {
-    label: "Others",
-    options: [
-      { value: "figma", label: "Figma", icon: "logos:figma" },
-      { value: "chrome", label: "Chrome", icon: "logos:chrome" },
-      { value: "safari", label: "Safari", icon: "fe:globe" },
-      { value: "slack", label: "Slack", icon: "logos:slack-icon" },
-      { value: "youtube", label: "Youtube", icon: "fe:youtube" },
-    ],
-  },
-];
-
-
-const OptionComponent: React.FC<OptionProps<OptionType, boolean, GroupBase<OptionType>>> = (props) => {
-  const { data } = props;
-
-  return (
-    <components.Option {...props}>
-      <div className="flex items-center gap-2">
-        {data.icon && <Icon icon={data.icon} />}
-        {data.label}
-      </div>
-    </components.Option>
-  );
-};
-
-
-
-// start component
-const ReactSelectOption = () => {
-  const [fixedValue, setFixedValue] = useState(
-    orderOptions([fruits[0], fruits[1]])
-  );
-  const fixedOnChange = (value: any, { action, removedValue }: any) => {
-    switch (action) {
-      case "remove-value":
-      case "pop-value":
-        if (removedValue.isFixed) {
-          return;
-        }
-        break;
-      case "clear":
-        value = fruits.filter((v) => v.isFixed);
-        break;
-      default:
-        break;
-    }
-
-    value = orderOptions(value);
-    setFixedValue(value);
-  };
-
-  return (
-    <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-      <div>
-        <Select
-          isClearable={false}
-          defaultValue={[fruits[2], fruits[3]]}
-          styles={styles}
-          isMulti
-          name="colors"
-          options={fruits}
-          className="react-select"
-          classNamePrefix="select"
-        />
-      </div>
-      <div>
-        <Select
-          isClearable={false}
-          defaultValue={fruits[1]}
-          options={groupedOptions}
-          styles={styles}
-          formatGroupLabel={formatGroupLabel}
-          className="react-select"
-          classNamePrefix="select"
-        />
-      </div>
-      <div>
-        <Select
-          isClearable={false}
-          closeMenuOnSelect={false}
-          components={animatedComponents}
-          defaultValue={[fruits[4], fruits[5]]}
-          isMulti
-          options={fruits}
-          styles={styles}
-          className="react-select"
-          classNamePrefix="select"
-        />
-      </div>
-      <div>
-        <Select
-          isClearable={false}
-          value={fixedValue}
-          styles={styles}
-          isMulti
-          onChange={fixedOnChange}
-          name="furits"
-          className="react-select"
-          classNamePrefix="select"
-          options={fruits}
-        />
-      </div>
-      <div className="lg:col-span-2 col-span-1">
-        <Select
-          options={iconOptions}
-          className="react-select"
-          classNamePrefix="select"
-          components={{
-            Option: OptionComponent,
-          }}
-          styles={styles}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ReactSelectOption;
diff --git a/app/[locale]/(protected)/forms/select/basic-select.tsx b/app/[locale]/(protected)/forms/select/basic-select.tsx
deleted file mode 100644
index b46da1d3..00000000
--- a/app/[locale]/(protected)/forms/select/basic-select.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-const BasicSelect = () => {
-
-  return (
-    <div className="space-y-3.5">
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry">Blueberry</SelectItem>
-            <SelectItem value="grapes">Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <Select disabled>
-        <SelectTrigger>
-          <SelectValue placeholder="Disabled Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry">Blueberry</SelectItem>
-            <SelectItem value="grapes">Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Disabled Item" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry" disabled>Blueberry</SelectItem>
-            <SelectItem value="grapes" disabled>Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  );
-};
-
-export default BasicSelect;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/select/color-select.tsx b/app/[locale]/(protected)/forms/select/color-select.tsx
deleted file mode 100644
index 1c693963..00000000
--- a/app/[locale]/(protected)/forms/select/color-select.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-
-const ColorSelect = () => {
-  return (
-    <div className="space-y-3">
-       <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger color="primary">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger color="secondary">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="info">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="warning">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="success">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="destructive">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-
-    </div>
-  );
-};
-
-export default ColorSelect;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/select/controlled-select.tsx b/app/[locale]/(protected)/forms/select/controlled-select.tsx
deleted file mode 100644
index 747807e3..00000000
--- a/app/[locale]/(protected)/forms/select/controlled-select.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { useState } from "react";
-
-const ControlledSelect = () => {
-  const [value, setValue] = useState("");
-  const handleValueChange = (value: string) => {
-    setValue(value)
-  }
-  return (
-    <div className="space-y-3.5">
-      <Select onValueChange={handleValueChange}>
-        <SelectTrigger>
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry">Blueberry</SelectItem>
-            <SelectItem value="grapes">Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <p className="text-sm text-default-600">Selected: <strong>{value}</strong> </p>
-    </div>
-  );
-};
-
-export default ControlledSelect;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/select/layout.tsx b/app/[locale]/(protected)/forms/select/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/select/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/select/page.tsx b/app/[locale]/(protected)/forms/select/page.tsx
deleted file mode 100644
index d72f3def..00000000
--- a/app/[locale]/(protected)/forms/select/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicSelect from "./basic-select";
-import ControlledSelect from "./controlled-select";
-import ColorSelect from "./color-select";
-import SizesSelect from "./size-select";
-import SelectScrollable from "./scrollable-select";
-import { basicSelect,controlledSelect,colorSelect, sizeSelect, scrollableSelect } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const SelectPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-        <Card title="Basic Select" code={basicSelect}>
-          <BasicSelect />
-        </Card>
-        <Card title="Controlled Select" code={controlledSelect}>
-          <ControlledSelect />
-        </Card>
-        <Card title="Colors" code={colorSelect}>
-          <ColorSelect />
-        </Card>
-        <Card title="Size" code={sizeSelect}>
-          <SizesSelect />
-        </Card>
-        <Card title="Scrollable Select" code={scrollableSelect}>
-          <SelectScrollable />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default SelectPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/select/scrollable-select.tsx b/app/[locale]/(protected)/forms/select/scrollable-select.tsx
deleted file mode 100644
index 28385b76..00000000
--- a/app/[locale]/(protected)/forms/select/scrollable-select.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-const SelectScrollable = () => {
-  return (
-    <div className="flex justify-center py-10">
-      <Select>
-        <SelectTrigger className="w-[280px]">
-          <SelectValue placeholder="Select a timezone" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>North America</SelectLabel>
-            <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
-            <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
-            <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
-            <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
-            <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
-            <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Europe & Africa</SelectLabel>
-            <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-            <SelectItem value="cet">Central European Time (CET)</SelectItem>
-            <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
-            <SelectItem value="west">
-              Western European Summer Time (WEST)
-            </SelectItem>
-            <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
-            <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Asia</SelectLabel>
-            <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
-            <SelectItem value="ist">India Standard Time (IST)</SelectItem>
-            <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
-            <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
-            <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
-            <SelectItem value="ist_indonesia">
-              Indonesia Central Standard Time (WITA)
-            </SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Australia & Pacific</SelectLabel>
-            <SelectItem value="awst">
-              Australian Western Standard Time (AWST)
-            </SelectItem>
-            <SelectItem value="acst">
-              Australian Central Standard Time (ACST)
-            </SelectItem>
-            <SelectItem value="aest">
-              Australian Eastern Standard Time (AEST)
-            </SelectItem>
-            <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
-            <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>South America</SelectLabel>
-            <SelectItem value="art">Argentina Time (ART)</SelectItem>
-            <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
-            <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
-            <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-export default SelectScrollable;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/select/size-select.tsx b/app/[locale]/(protected)/forms/select/size-select.tsx
deleted file mode 100644
index cd88f0ba..00000000
--- a/app/[locale]/(protected)/forms/select/size-select.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-const SizesSelect = () => {
-
-  return (
-    <div className="space-y-4">
-      <Select>
-        <SelectTrigger size="sm">
-          <SelectValue placeholder="Small Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Default Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger size="md">
-          <SelectValue placeholder="Medium Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger size="lg">
-          <SelectValue placeholder="Large Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-    
-
-    </div>
-  );
-};
-
-export default SizesSelect;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/select/source-code.ts b/app/[locale]/(protected)/forms/select/source-code.ts
deleted file mode 100644
index cc176fee..00000000
--- a/app/[locale]/(protected)/forms/select/source-code.ts
+++ /dev/null
@@ -1,343 +0,0 @@
-export const basicSelect=`
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-const BasicSelect = () => {
-
-  return (
-    <div className="space-y-3.5">
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry">Blueberry</SelectItem>
-            <SelectItem value="grapes">Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <Select disabled>
-        <SelectTrigger>
-          <SelectValue placeholder="Disabled Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry">Blueberry</SelectItem>
-            <SelectItem value="grapes">Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Disabled Item" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry" disabled>Blueberry</SelectItem>
-            <SelectItem value="grapes" disabled>Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  );
-};
-
-export default BasicSelect;`
-
-export const controlledSelect=`"use client"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { useState } from "react";
-
-const ControlledSelect = () => {
-  const [value, setValue] = useState("");
-  const handleValueChange = (value: string) => {
-    setValue(value)
-  }
-  return (
-    <div className="space-y-3.5">
-      <Select onValueChange={handleValueChange}>
-        <SelectTrigger>
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry">Blueberry</SelectItem>
-            <SelectItem value="grapes">Grapes</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <p className="text-sm text-default-600">Selected: <strong>{value}</strong> </p>
-    </div>
-  );
-};
-
-export default ControlledSelect;`
-
-export const colorSelect=`import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-
-const ColorSelect = () => {
-  return (
-    <div className="space-y-3">
-       <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger color="primary">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger color="secondary">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="info">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="warning">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="success">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select >
-        <SelectTrigger color="destructive">
-          <SelectValue placeholder="Select a subject" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-
-    </div>
-  );
-};
-
-export default ColorSelect;`
-
-export const scrollableSelect=`
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-const SelectScrollable = () => {
-  return (
-    <div className="flex justify-center py-10">
-      <Select>
-        <SelectTrigger className="w-[280px]">
-          <SelectValue placeholder="Select a timezone" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>North America</SelectLabel>
-            <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
-            <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
-            <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
-            <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
-            <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
-            <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Europe & Africa</SelectLabel>
-            <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-            <SelectItem value="cet">Central European Time (CET)</SelectItem>
-            <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
-            <SelectItem value="west">
-              Western European Summer Time (WEST)
-            </SelectItem>
-            <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
-            <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Asia</SelectLabel>
-            <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
-            <SelectItem value="ist">India Standard Time (IST)</SelectItem>
-            <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
-            <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
-            <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
-            <SelectItem value="ist_indonesia">
-              Indonesia Central Standard Time (WITA)
-            </SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Australia & Pacific</SelectLabel>
-            <SelectItem value="awst">
-              Australian Western Standard Time (AWST)
-            </SelectItem>
-            <SelectItem value="acst">
-              Australian Central Standard Time (ACST)
-            </SelectItem>
-            <SelectItem value="aest">
-              Australian Eastern Standard Time (AEST)
-            </SelectItem>
-            <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
-            <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>South America</SelectLabel>
-            <SelectItem value="art">Argentina Time (ART)</SelectItem>
-            <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
-            <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
-            <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-export default SelectScrollable;`
-
-export const sizeSelect=`"use client"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-const SizesSelect = () => {
-
-  return (
-    <div className="space-y-4">
-      <Select>
-        <SelectTrigger size="sm">
-          <SelectValue placeholder="Small Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Default Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger size="md">
-          <SelectValue placeholder="Medium Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger size="lg">
-          <SelectValue placeholder="Large Select" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="english">English</SelectItem>
-          <SelectItem value="mathmatics">Mathmatics</SelectItem>
-          <SelectItem value="physics">Physics</SelectItem>
-          <SelectItem value="chemistry">Chemistry</SelectItem>
-          <SelectItem value="biology">Biology</SelectItem>
-        </SelectContent>
-      </Select>
-    
-
-    </div>
-  );
-};
-
-export default SizesSelect;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/slider/basic-slider.tsx b/app/[locale]/(protected)/forms/slider/basic-slider.tsx
deleted file mode 100644
index 8fee0aa8..00000000
--- a/app/[locale]/(protected)/forms/slider/basic-slider.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Slider } from '@/components/ui/slider';
-
-const BasicSlider = () => {
-  return (
-    <div className='space-y-5'>
-      <Slider defaultValue={[75]} />
-    </div>
-  );
-};
-
-export default BasicSlider;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/slider/layout.tsx b/app/[locale]/(protected)/forms/slider/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/slider/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/slider/page.tsx b/app/[locale]/(protected)/forms/slider/page.tsx
deleted file mode 100644
index 65c3a266..00000000
--- a/app/[locale]/(protected)/forms/slider/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicSlider from "./basic-slider";
-import { basicSlider } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const SliderPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Card title="Basic Slider" code={basicSlider}>
-        <BasicSlider />
-      </Card>
-    </div>
-  );
-};
-
-export default SliderPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/slider/source-code.ts b/app/[locale]/(protected)/forms/slider/source-code.ts
deleted file mode 100644
index 108bf9d9..00000000
--- a/app/[locale]/(protected)/forms/slider/source-code.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const basicSlider=`import { Slider } from '@/components/ui/slider';
-
-const BasicSlider = () => {
-  return (
-    <div className='space-y-5'>
-      <Slider defaultValue={[75]} />
-    </div>
-  );
-};
-
-export default BasicSlider;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/switch/basic-switch.tsx b/app/[locale]/(protected)/forms/switch/basic-switch.tsx
deleted file mode 100644
index 79d30a7b..00000000
--- a/app/[locale]/(protected)/forms/switch/basic-switch.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-
-const BasicSwitch = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="s1" />
-        <Label htmlFor="s1">Active Switch</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch id="s2" />
-        <Label htmlFor="s2">Inactive Switch</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch id="s3" disabled defaultChecked />
-        <Label htmlFor="s3" >Disabled Active Switch</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch id="s3" disabled/>
-        <Label htmlFor="s3" >Disabled Inactive Switch</Label>
-      </div>
-
-    </div>
-  );
-};
-
-export default BasicSwitch;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/switch/color-switch.tsx b/app/[locale]/(protected)/forms/switch/color-switch.tsx
deleted file mode 100644
index 27ab82d9..00000000
--- a/app/[locale]/(protected)/forms/switch/color-switch.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-
-const ColorSwitch = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="c1" />
-        <Label htmlFor="c1">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="primary" id="c2" />
-        <Label htmlFor="c2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="secondary" id="c3" />
-        <Label htmlFor="c3">Secondary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="info" id="c4" />
-        <Label htmlFor="c4">Info</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="warning" id="c5" />
-        <Label htmlFor="c5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="success" id="c6" />
-        <Label htmlFor="c6">Success</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="destructive" id="c7" />
-        <Label htmlFor="c7">Destructive</Label>
-      </div>
-    </div>
-  );
-};
-
-export default ColorSwitch;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/switch/layout.tsx b/app/[locale]/(protected)/forms/switch/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/switch/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/switch/page.tsx b/app/[locale]/(protected)/forms/switch/page.tsx
deleted file mode 100644
index c6e6666e..00000000
--- a/app/[locale]/(protected)/forms/switch/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicSwitch from "./basic-switch";
-import ColorSwitch from "./color-switch";
-import SwitchSize from "./switch-size";
-import SwitchWithBadge from "./switch-with-badge";
-import SwitchWithIcon from "./switch-with-icon";
-import { basicSwitch, colorSwitch, switchSize, switchWithBadge, switchWithIcon } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const SwitchPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-6">
-        <Card title="Basic Switch" code={basicSwitch}>
-          <BasicSwitch />
-        </Card>
-        <Card title="Theme Colors" code={colorSwitch}>
-          <ColorSwitch />
-        </Card>
-        <Card title="Switch Size" code={switchSize}>
-          <SwitchSize />
-        </Card>
-        <Card title="Switch With Badge" code={switchWithBadge}>
-          <SwitchWithBadge />
-        </Card>
-        <Card title="Switch With Icon" code={switchWithIcon}>
-          <SwitchWithIcon />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default SwitchPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/switch/source-code.ts b/app/[locale]/(protected)/forms/switch/source-code.ts
deleted file mode 100644
index b29a36fc..00000000
--- a/app/[locale]/(protected)/forms/switch/source-code.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-export const basicSwitch=`import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-
-const BasicSwitch = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="s1" />
-        <Label htmlFor="s1">Active Switch</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch id="s2" />
-        <Label htmlFor="s2">Inactive Switch</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch id="s3" disabled defaultChecked />
-        <Label htmlFor="s3" >Disabled Active Switch</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch id="s3" disabled/>
-        <Label htmlFor="s3" >Disabled Inactive Switch</Label>
-      </div>
-    </div>
-  );
-};
-
-export default BasicSwitch;`
-
-export const colorSwitch=`import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-
-const ColorSwitch = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="c1" />
-        <Label htmlFor="c1">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="primary" id="c2" />
-        <Label htmlFor="c2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="secondary" id="c3" />
-        <Label htmlFor="c3">Secondary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="info" id="c4" />
-        <Label htmlFor="c4">Info</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="warning" id="c5" />
-        <Label htmlFor="c5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="success" id="c6" />
-        <Label htmlFor="c6">Success</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked color="destructive" id="c7" />
-        <Label htmlFor="c7">Destructive</Label>
-      </div>
-    </div>
-  );
-};
-
-export default ColorSwitch;`
-
-export const switchSize=`import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-
-const SwitchSize = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="sm" size="sm"/>
-        <Label htmlFor="sm">Small Size</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="default" />
-        <Label htmlFor="default">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="md" size="md"/>
-        <Label htmlFor="md">Medium Size</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="lg" size="lg"/>
-        <Label htmlFor="lg">Large Size</Label>
-      </div>
-    </div>
-  );
-};
-
-export default SwitchSize;`
-
-export const switchWithBadge=`import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-const SwitchWithBadge = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          id="badge1"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge1">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="primary"
-          id="badge2"
-          startContent="On"
-          endContent="Off" />
-        <Label htmlFor="badge2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="secondary"
-          id="badge3"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge3">Secondary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="info"
-          id="badge4"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge4">Info</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="warning"
-          id="badge5"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="success"
-          id="badge6"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge6">Success</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="destructive"
-          id="badge7"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge7">Destructive</Label>
-      </div>
-    </div>
-  );
-};
-
-export default SwitchWithBadge;`
-
-export const switchWithIcon=`import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Ban, Bell, Check, Lock, LockOpen, Moon, PhoneIncoming, PhoneMissed, Sun, Volume2, VolumeX, X } from "lucide-react";
-
-const SwitchWithIcon = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          id="badge_icon1"
-          startContent={<Volume2 className="w-4 h-4" />}
-          endContent={<VolumeX className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon1">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="primary"
-          id="badge_icon2"
-          startContent={<Check className="w-4 h-4" />}
-          endContent={<X className="w-4 h-4 text-default-900" />} />
-        <Label htmlFor="badge_icon2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="secondary"
-          id="badge_icon3"
-          startContent={<Check className="w-4 h-4" />}
-          endContent={<X className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon3">Secondary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="info"
-          id="badge_icon4"
-          startContent={<PhoneIncoming className="w-4 h-4" />}
-          endContent={<PhoneMissed className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon4">Info</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="warning"
-          id="badge_icon5"
-          startContent={<Check className="w-4 h-4" />}
-          endContent={<Ban className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="success"
-          id="badge_icon6"
-          startContent={<Sun className="w-4 h-4" />}
-          endContent={<Moon className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon6">Success</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="destructive"
-          id="badge_icon7"
-          startContent={<LockOpen className="w-4 h-4" />}
-          endContent={<Lock className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon7">Destructive</Label>
-      </div>
-    </div>
-  );
-};
-
-export default SwitchWithIcon;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/switch/switch-size.tsx b/app/[locale]/(protected)/forms/switch/switch-size.tsx
deleted file mode 100644
index f4f6fd5e..00000000
--- a/app/[locale]/(protected)/forms/switch/switch-size.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-
-const SwitchSize = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="sm" size="sm"/>
-        <Label htmlFor="sm">Small Size</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="default" />
-        <Label htmlFor="default">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="md" size="md"/>
-        <Label htmlFor="md">Medium Size</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch defaultChecked id="lg" size="lg"/>
-        <Label htmlFor="lg">Large Size</Label>
-      </div>
-    
-    </div>
-  );
-};
-
-export default SwitchSize;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/switch/switch-with-badge.tsx b/app/[locale]/(protected)/forms/switch/switch-with-badge.tsx
deleted file mode 100644
index 198094ab..00000000
--- a/app/[locale]/(protected)/forms/switch/switch-with-badge.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-const SwitchWithBadge = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          id="badge1"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge1">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="primary"
-          id="badge2"
-          startContent="On"
-          endContent="Off" />
-        <Label htmlFor="badge2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="secondary"
-          id="badge3"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge3">Secondary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="info"
-          id="badge4"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge4">Info</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="warning"
-          id="badge5"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="success"
-          id="badge6"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge6">Success</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="destructive"
-          id="badge7"
-          startContent="On"
-          endContent="Off"
-        />
-        <Label htmlFor="badge7">Destructive</Label>
-      </div>
-    </div>
-  );
-};
-
-export default SwitchWithBadge;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/switch/switch-with-icon.tsx b/app/[locale]/(protected)/forms/switch/switch-with-icon.tsx
deleted file mode 100644
index 22b763b1..00000000
--- a/app/[locale]/(protected)/forms/switch/switch-with-icon.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Ban, Bell, Check, Lock, LockOpen, Moon, PhoneIncoming, PhoneMissed, Sun, Volume2, VolumeX, X } from "lucide-react";
-
-const SwitchWithIcon = () => {
-  return (
-    <div className="flex items-center gap-6 flex-wrap">
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          id="badge_icon1"
-          startContent={<Volume2 className="w-4 h-4" />}
-          endContent={<VolumeX className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon1">Default</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="primary"
-          id="badge_icon2"
-          startContent={<Check className="w-4 h-4" />}
-          endContent={<X className="w-4 h-4 text-default-900" />} />
-        <Label htmlFor="badge_icon2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="secondary"
-          id="badge_icon3"
-          startContent={<Check className="w-4 h-4" />}
-          endContent={<X className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon3">Secondary</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="info"
-          id="badge_icon4"
-          startContent={<PhoneIncoming className="w-4 h-4" />}
-          endContent={<PhoneMissed className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon4">Info</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="warning"
-          id="badge_icon5"
-          startContent={<Check className="w-4 h-4" />}
-          endContent={<Ban className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="success"
-          id="badge_icon6"
-          startContent={<Sun className="w-4 h-4" />}
-          endContent={<Moon className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon6">Success</Label>
-      </div>
-      <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="destructive"
-          id="badge_icon7"
-          startContent={<LockOpen className="w-4 h-4" />}
-          endContent={<Lock className="w-4 h-4 text-default-900" />}
-        />
-        <Label htmlFor="badge_icon7">Destructive</Label>
-      </div>
-    </div>
-  );
-};
-
-export default SwitchWithIcon;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/textarea/basic-textarea.tsx b/app/[locale]/(protected)/forms/textarea/basic-textarea.tsx
deleted file mode 100644
index 22f9b8dd..00000000
--- a/app/[locale]/(protected)/forms/textarea/basic-textarea.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-const BasicTextarea = () => {
-  return (
-    <div className="space-y-2.5">
-      <div className="space-y-1.5">
-        <Label htmlFor="basic-textarea">Basic</Label>
-        <Textarea id="basic-textarea" placeholder="Basic" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="disabled-textarea">Disabled</Label>
-        <Textarea id="disabled-textarea" placeholder="Disabled Textarea" disabled />
-      </div>
-      <div className="space-y-1.5">
-        <Label>Readonly Textarea</Label>
-        <Textarea
-          defaultValue={"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, commodi!"} readOnly={true}>
-        </Textarea>
-      </div>
-    </div>
-  );
-};
-
-export default BasicTextarea;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/textarea/colors-textarea.tsx b/app/[locale]/(protected)/forms/textarea/colors-textarea.tsx
deleted file mode 100644
index c40e18ee..00000000
--- a/app/[locale]/(protected)/forms/textarea/colors-textarea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-
-import { Textarea } from "@/components/ui/textarea";
-
-const ColorsTextarea = () => {
-  return (
-    <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-      <Textarea placeholder="Default Color..." />
-      <Textarea placeholder="Prmary Color..." color="primary" />
-      <Textarea placeholder="Secondary Color..." color="secondary" />
-      <Textarea placeholder="Info Color..." color="info" />
-      <Textarea placeholder="Warning Color..." color="warning" />
-      <Textarea placeholder="Success Color..." color="success" />
-      <Textarea placeholder="Destructive Color..." color="destructive" />
-    </div>
-  );
-};
-
-export default ColorsTextarea;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/textarea/displayed-rows.tsx b/app/[locale]/(protected)/forms/textarea/displayed-rows.tsx
deleted file mode 100644
index 3213908d..00000000
--- a/app/[locale]/(protected)/forms/textarea/displayed-rows.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-const DisplayedRows = () => {
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="rows-3">3 Rows</Label>
-        <Textarea placeholder="Type Here..." id="rows-3" rows={2} />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="rows-5">5 Rows</Label>
-        <Textarea placeholder="Type Here..." id="rows-5" rows={5} />
-      </div>
-    </div>
-  );
-};
-
-export default DisplayedRows;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/textarea/horizontal-label.tsx b/app/[locale]/(protected)/forms/textarea/horizontal-label.tsx
deleted file mode 100644
index 17634ee2..00000000
--- a/app/[locale]/(protected)/forms/textarea/horizontal-label.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-const HorizontalLabel = () => {
-  return (
-    <div className="flex flex-col md:flex-row lg:gap-10 gap-4 md:items-center">
-      <Label htmlFor="message">Your Message</Label>
-      <Textarea id="message" placeholder="Type Message..." />
-    </div>
-  );
-};
-
-export default HorizontalLabel;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/textarea/layout.tsx b/app/[locale]/(protected)/forms/textarea/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/forms/textarea/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/forms/textarea/page.tsx b/app/[locale]/(protected)/forms/textarea/page.tsx
deleted file mode 100644
index be1b89a7..00000000
--- a/app/[locale]/(protected)/forms/textarea/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Card from "@/components/code-snippet";
-import BasicTextarea from "./basic-textarea";
-import DisplayedRows from "./displayed-rows";
-import ColorsTextarea from "./colors-textarea";
-import HorizontalLabel from "./horizontal-label";
-import { basicTextarea, colorsTextarea, displayedRows, horizontalLabel } from "./source-code";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const TextareaPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb/>
-      <div className="space-y-6">
-        <Card title="Basic Textarea" code={basicTextarea}>
-          <BasicTextarea />
-        </Card>
-        <Card title="Colors Textarea" code={colorsTextarea}>
-          <ColorsTextarea />
-        </Card>
-        <Card title="Displayed Rows" code={displayedRows}>
-          <DisplayedRows />
-        </Card>
-        <Card title="Horizontal Label" code={horizontalLabel}>
-          <HorizontalLabel />
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default TextareaPage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/forms/textarea/source-code.ts b/app/[locale]/(protected)/forms/textarea/source-code.ts
deleted file mode 100644
index 52ee1f89..00000000
--- a/app/[locale]/(protected)/forms/textarea/source-code.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-export const basicTextarea=`import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-const BasicTextarea = () => {
-  return (
-    <div className="space-y-2.5">
-      <div className="space-y-1.5">
-        <Label htmlFor="basic-textarea">Basic</Label>
-        <Textarea id="basic-textarea" placeholder="Basic" />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="disabled-textarea">Disabled</Label>
-        <Textarea id="disabled-textarea" placeholder="Disabled Textarea" disabled />
-      </div>
-      <div className="space-y-1.5">
-        <Label>Readonly Textarea</Label>
-        <Textarea
-          defaultValue={"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, commodi!"} readOnly={true}>
-        </Textarea>
-      </div>
-    </div>
-  );
-};
-
-export default BasicTextarea;`
-
-export const colorsTextarea=`
-import { Textarea } from "@/components/ui/textarea";
-
-const ColorsTextarea = () => {
-  return (
-    <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-      <Textarea placeholder="Default Color..." />
-      <Textarea placeholder="Prmary Color..." color="primary" />
-      <Textarea placeholder="Secondary Color..." color="secondary" />
-      <Textarea placeholder="Info Color..." color="info" />
-      <Textarea placeholder="Warning Color..." color="warning" />
-      <Textarea placeholder="Success Color..." color="success" />
-      <Textarea placeholder="Destructive Color..." color="destructive" />
-    </div>
-  );
-};
-
-export default ColorsTextarea;`
-
-export const displayedRows=`import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-const DisplayedRows = () => {
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="rows-3">3 Rows</Label>
-        <Textarea placeholder="Type Here..." id="rows-3" rows={2} />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="rows-5">5 Rows</Label>
-        <Textarea placeholder="Type Here..." id="rows-5" rows={5} />
-      </div>
-    </div>
-  );
-};
-
-export default DisplayedRows;`
-
-export const horizontalLabel=`import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-const HorizontalLabel = () => {
-  return (
-    <div className="flex flex-col md:flex-row lg:gap-10 gap-4 md:items-center">
-      <Label htmlFor="message">Your Message</Label>
-      <Textarea id="message" placeholder="Type Message..." />
-    </div>
-  );
-};
-
-export default HorizontalLabel;`
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/basic-table-head.tsx b/app/[locale]/(protected)/table/basic-table/basic-table-head.tsx
deleted file mode 100644
index 0257c2f0..00000000
--- a/app/[locale]/(protected)/table/basic-table/basic-table-head.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { columns, tableData } from "./data";
-const BasicTableHead = () => {
-  return (
-    <Table>
-      <TableHeader className="bg-default-200 dark:bg-default-300">
-        <TableRow>
-          {
-            columns.map((column,index)=>(
-              <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
-            ))
-          }
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {tableData.map((row,index) => (
-          <TableRow key={`table-data-${index}`}>
-            <TableCell>{row.age}</TableCell>
-            <TableCell>{row.first_name}</TableCell>
-            <TableCell>{row.last_name}
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default BasicTableHead;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/basic-table.tsx b/app/[locale]/(protected)/table/basic-table/basic-table.tsx
deleted file mode 100644
index e3c6a448..00000000
--- a/app/[locale]/(protected)/table/basic-table/basic-table.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { columns, tableData } from "./data";
-const BasicTable = () => {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          {
-            columns.map((column,index)=>(
-              <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
-            ))
-          }
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {tableData.map((row,index) => (
-          <TableRow key={`table-data-${index}`}>
-            <TableCell>{row.age}</TableCell>
-            <TableCell>{row.first_name}</TableCell>
-            <TableCell>{row.last_name}</TableCell>
-      
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default BasicTable;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/bordered-table.tsx b/app/[locale]/(protected)/table/basic-table/bordered-table.tsx
deleted file mode 100644
index ffdd3c28..00000000
--- a/app/[locale]/(protected)/table/basic-table/bordered-table.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { columns, tableData } from "./data";
-const BorderedTable = () => {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          {
-            columns.map((column, index) => (
-              <TableHead
-                key={`basic-table-column-${index}`}
-                className="border border-default-100 dark:border-default-300"
-              >{column.label}</TableHead>
-            ))
-          }
-        </TableRow>
-      </TableHeader>
-      <TableBody className="[&_tr:last-child]:border">
-        {tableData.map((row, index) => (
-          <TableRow
-            key={`table-data-${index}`}
-            className="border border-default-100 dark:border-default-300"
-          >
-            <TableCell className="border border-default-100 dark:border-default-300">{row.age}</TableCell>
-            <TableCell className="border border-default-100 dark:border-default-300">{row.first_name}</TableCell>
-            <TableCell className="border border-default-100 dark:border-default-300">{row.last_name}</TableCell>
-
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default BorderedTable;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/borderless-table.tsx b/app/[locale]/(protected)/table/basic-table/borderless-table.tsx
deleted file mode 100644
index ec75984f..00000000
--- a/app/[locale]/(protected)/table/basic-table/borderless-table.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { columns, tableData } from "./data";
-const BorderlessTable = () => {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow className="border-none">
-          {
-            columns.map((column, index) => (
-              <TableHead
-                key={`basic-table-column-${index}`}>
-                {column.label}
-              </TableHead>
-            ))
-          }
-        </TableRow>
-      </TableHeader>
-      <TableBody className="border-none">
-        {tableData.map((row, index) => (
-          <TableRow
-            key={`table-data-${index}`}
-            className="border-none"
-          >
-            <TableCell>{row.age}</TableCell>
-            <TableCell>{row.first_name}</TableCell>
-            <TableCell>{row.last_name}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default BorderlessTable;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/data.ts b/app/[locale]/(protected)/table/basic-table/data.ts
deleted file mode 100644
index a86dbb41..00000000
--- a/app/[locale]/(protected)/table/basic-table/data.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-interface ColumnsProps {
-  label: string
-  field: string
-}
-interface TableDataProps {
-  id: number
-  age: number
-  first_name: string
-  last_name: string
-  email: string
-  gender: string
-  phone: string
-  occuption: string
-  img: string
-}
-
-export const columns: ColumnsProps[] = [
-  {
-    label: "Age",
-    field: "age",
-  },
-  {
-    label: "First Name",
-    field: "first_name",
-  },
-
-  {
-    label: "Email",
-    field: "email",
-  }
-];
-
-export const tableData: TableDataProps[] = [{
-  id: 1,
-  age: 82,
-  first_name: "Dorelle",
-  last_name: "Harling",
-  email: "dharling0@rediff.com",
-  gender: "Female",
-  phone: "232(152)707-0110",
-  occuption: "Financial Advisor",
-  img: "/images/users/user-1.jpg"
-},
-{
-  id: 2,
-  age: 89,
-  first_name: "Bendicty",
-  last_name: "Llewellin",
-  email: "bllewellin1@example.com",
-  gender: "Male",
-  phone: "420(169)218-1769",
-  occuption: "Marketing Assistant",
-  img: "/images/users/user-2.jpg"
-},
-{
-  id: 3,
-  age: 28,
-  first_name: "Remy",
-  last_name: "Carbry",
-  email: "rcarbry2@prlog.org",
-  gender: "Polygender",
-  phone: "86(958)204-4491",
-  occuption: "Mechanical Systems Engineer",
-  img: "/images/users/user-3.jpg"
-},
-{
-  id: 4,
-  age: 20,
-  first_name: "Bernardo",
-  last_name: "Hacun",
-  email: "bhacun3@xinhuanet.com",
-  gender: "Male",
-  phone: "86(974)709-5254",
-  occuption: "Research Assistant IV",
-  img: "/images/users/user-4.jpg"
-},
-{
-  id: 5,
-  age: 2,
-  first_name: "Emelia",
-  last_name: "Garstang",
-  email: "egarstang4@miitbeian.gov.cn",
-  gender: "Female",
-  phone: "55(644)175-6748",
-  occuption: "Business Systems Development Analyst",
-  img: "/images/users/user-5.jpg"
-},
-{
-  id: 6,
-  age: 98,
-  first_name: "Dian",
-  last_name: "Dopson",
-  email: "ddopson5@examiner.com",
-  gender: "Female",
-  phone: "51(186)560-8480",
-  occuption: "Cost Accountant",
-  img: "/images/users/user-6.jpg"
-},
-{
-  id: 7,
-  age: 17,
-  first_name: "Coretta",
-  last_name: "Ponter",
-  email: "cponter6@loc.gov",
-  gender: "Female",
-  phone: "1(941)734-6255",
-  occuption: "Budget/Accounting Analyst II",
-  img: "/images/users/user-1.jpg"
-}]
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/hoverable-table.tsx b/app/[locale]/(protected)/table/basic-table/hoverable-table.tsx
deleted file mode 100644
index 5498d95e..00000000
--- a/app/[locale]/(protected)/table/basic-table/hoverable-table.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { columns, tableData } from "./data";
-const HoverableTable = () => {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow className="bg-default-200 dark:bg-default-300">
-          {
-            columns.map((column,index)=>(
-              <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
-            ))
-          }
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {tableData.map((row,index) => (
-          <TableRow 
-          key={`table-data-${index}`}
-          className="hover:bg-default-200 dark:hover:bg-default-300"
-          >
-            <TableCell>{row.age}</TableCell>
-            <TableCell>{row.first_name}</TableCell>
-            <TableCell>{row.last_name}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default HoverableTable;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/layout.tsx b/app/[locale]/(protected)/table/basic-table/layout.tsx
deleted file mode 100644
index e0f8475b..00000000
--- a/app/[locale]/(protected)/table/basic-table/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata:Metadata ={
-  title: 'Basic Table',
-  description: 'Basic Table'
-}
-const Layout = ({children}: {children: React.ReactNode}) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-export default Layout;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/page.tsx b/app/[locale]/(protected)/table/basic-table/page.tsx
deleted file mode 100644
index 4d27b982..00000000
--- a/app/[locale]/(protected)/table/basic-table/page.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicTable from "./basic-table";
-import BasicTableHead from "./basic-table-head";
-import BorderedTable from "./bordered-table";
-import BorderlessTable from "./borderless-table";
-import StripedRows from "./striped-rows";
-import HoverableTable from "./hoverable-table";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const BasicTablePage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-        <Card>
-          <CardHeader>
-            <CardTitle>Basic Table</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <BasicTable />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Table Head</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <BasicTableHead />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Bordered Table</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <BorderedTable />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Borderless Table</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <BorderlessTable />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Striped Rows Table</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <StripedRows />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Hover Table</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <HoverableTable />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default BasicTablePage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/basic-table/striped-rows.tsx b/app/[locale]/(protected)/table/basic-table/striped-rows.tsx
deleted file mode 100644
index 1bf1f8d4..00000000
--- a/app/[locale]/(protected)/table/basic-table/striped-rows.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { columns, tableData } from "./data";
-const StripedRows = () => {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          {
-            columns.map((column,index)=>(
-              <TableHead
-               key={`basic-table-column-${index}`}
-               className="bg-default-200 dark:bg-default-300"
-               >{column.label}</TableHead>
-            ))
-          }
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {tableData.map((row,index) => (
-          <TableRow
-           key={`table-data-${index}`}
-           className="even:bg-default-200 dark:even:bg-default-300"
-           >
-            <TableCell>{row.age}</TableCell>
-            <TableCell>{row.first_name}</TableCell>
-            <TableCell>{row.last_name}</TableCell>
-      
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default StripedRows;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/react-table/example1/columns.tsx b/app/[locale]/(protected)/table/react-table/example1/columns.tsx
deleted file mode 100644
index 1c65b1d4..00000000
--- a/app/[locale]/(protected)/table/react-table/example1/columns.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"use client"
-
-import {
-  ColumnDef,
-} from "@tanstack/react-table"
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils";
-export type DataProps = {
-  id:string | number;
-  order: number;
-  customer: {
-    name: string;
-    image: string;
-  };
-  date: string;
-  quantity: number;
-  amount: string;
-  status: "paid" | "due" | "canceled";
-  action: React.ReactNode;
-}
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "id",
-    header: "id",
-    cell: ({ row }) => <span>{row.getValue("id")}</span>,
-  },
-  {
-    accessorKey: "order",
-    header: "Order",
-    cell: ({ row }) => <span>{row.getValue("order")}</span>,
-  },
-  {
-    accessorKey: "customer",
-    header: "Customer",
-    cell: ({ row }) => {
-      const user = row.original.customer;
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <Avatar
-              className="rounded-full w-8 h-8 bg-transparent hover:bg-transparent shadow-none border-none"
-            >
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
-            </Avatar>
-            <span className="text-sm text-default-600 whitespace-nowrap">
-              {user?.name ?? "Unknown User"}
-            </span>
-          </div>
-        </div>
-      )
-    }
-  },
-  {
-    accessorKey: "date",
-    header: "Date",
-    cell: ({ row }) => {
-      return (
-        <span>{row.getValue("date")}</span>
-      )
-    }
-  },
-  {
-    accessorKey: "quantity",
-    header: "Quantity",
-    cell: ({ row }) => {
-      return (
-        <span>{row.getValue("quantity")}</span>
-      )
-    }
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-    cell: ({ row }) => {
-      return (
-        <span>{row.getValue("amount")}</span>
-      )
-    }
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => {
-      const statusColors: Record<string, string> = {
-        paid: "bg-success/20 text-success",
-        due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive"
-      };
-      const status = row.getValue<string>("status");
-      const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge 
-        className={cn("rounded-full px-5",statusStyles)}
-        >{status} </Badge>
-      );
-    }
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="icon"
-              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-            >
-              <span className="sr-only">Open menu</span>
-              <MoreVertical className="h-4 w-4 text-default-800" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Eye className="w-4 h-4 me-1.5" />
-              View
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <SquarePen className="w-4 h-4 me-1.5" />
-              Edit</DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
-              <Trash2 className="w-4 h-4 me-1.5" />Delete</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    }
-  }
-]
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/react-table/example1/data.ts b/app/[locale]/(protected)/table/react-table/example1/data.ts
deleted file mode 100644
index b413807b..00000000
--- a/app/[locale]/(protected)/table/react-table/example1/data.ts
+++ /dev/null
@@ -1,654 +0,0 @@
-import { DataProps } from "./columns";
-
-export const data: DataProps[] = [
-  {
-    id: 1,
-    order: 951,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "3/26/2022",
-    quantity: 13,
-    amount: "$1779.53",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 2,
-    order: 238,
-    customer: {
-      name: "Emily Davis",
-      image: "/images/avatar/avatar-2.png",
-    },
-    date: "2/6/2022",
-    quantity: 13,
-    amount: "$2215.78",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 3,
-    order: 339,
-    customer: {
-      name: "Laura Smith",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "9/6/2021",
-    quantity: 1,
-    amount: "$3183.60",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 4,
-    order: 365,
-    customer: {
-      name: "Sarah Johnson",
-      image: "/images/avatar/avatar-2.png",
-    },
-    date: "11/7/2021",
-    quantity: 13,
-    amount: "$2587.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 5,
-    order: 513,
-    customer: {
-      name: "Rachel Brown",
-      image: "/images/avatar/avatar-3.png",
-    },
-    date: "5/6/2022",
-    quantity: 12,
-    amount: "$3840.73",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 6,
-    order: 534,
-    customer: {
-      name: "Megan Taylor",
-      image: "/images/avatar/avatar-4.png",
-    },
-    date: "2/14/2022",
-    quantity: 12,
-    amount: "$4764.18",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 7,
-    order: 77,
-    customer: {
-      name: "Sophie Clark",
-      image: "/images/avatar/avatar-5.png",
-    },
-    date: "7/30/2022",
-    quantity: 6,
-    amount: "$2875.05",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 8,
-    order: 238,
-    customer: {
-      name: "Natalie Martin",
-      image: "/images/avatar/avatar-6.png",
-    },
-    date: "6/30/2022",
-    quantity: 9,
-    amount: "$2491.02",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 9,
-    order: 886,
-    customer: {
-      name: "Hannah Lewis",
-      image: "/images/avatar/avatar-7.png",
-    },
-    date: "8/9/2022",
-    quantity: 8,
-    amount: "$3006.95",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 10,
-    order: 3,
-    customer: {
-      name: "Lisa White",
-      image: "/images/avatar/avatar-8.png",
-    },
-    date: "8/4/2022",
-    quantity: 12,
-    amount: "$2160.32",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 11,
-    order: 198,
-    customer: {
-      name: "Emma Walker",
-      image: "/images/avatar/avatar-9.png",
-    },
-    date: "4/5/2022",
-    quantity: 8,
-    amount: "$1272.66",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 12,
-    order: 829,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-10.png",
-    },
-    date: "8/9/2022",
-    quantity: 2,
-    amount: "$4327.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 13,
-    order: 595,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-11.png",
-    },
-    date: "2/10/2022",
-    quantity: 11,
-    amount: "$3671.81",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 14,
-    order: 374,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-12.png",
-    },
-    date: "2/10/2022",
-    quantity: 2,
-    amount: "$3401.82",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 15,
-    order: 32,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "5/20/2022",
-    quantity: 4,
-    amount: "$2387.49",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 16,
-    order: 89,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-2.png",
-    },
-    date: "5/3/2022",
-    quantity: 15,
-    amount: "$4236.61",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 17,
-    order: 912,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-3.png",
-    },
-    date: "10/31/2021",
-    quantity: 11,
-    amount: "$2975.66",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 18,
-    order: 621,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-4.png",
-    },
-    date: "1/13/2022",
-    quantity: 5,
-    amount: "$4576.13",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 19,
-    order: 459,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-5.png",
-    },
-    date: "6/14/2022",
-    quantity: 5,
-    amount: "$1276.56",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 20,
-    order: 108,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-6.png",
-    },
-    date: "10/8/2021",
-    quantity: 4,
-    amount: "$1078.64",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 21,
-    order: 492,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-7.png",
-    },
-    date: "11/17/2021",
-    quantity: 9,
-    amount: "$1678.19",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 22,
-    order: 42,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-8.png",
-    },
-    date: "4/4/2022",
-    quantity: 9,
-    amount: "$1822.02",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 23,
-    order: 841,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-9.png",
-    },
-    date: "3/21/2022",
-    quantity: 5,
-    amount: "$1578.39",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 24,
-    order: 561,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-10.png",
-    },
-    date: "6/18/2022",
-    quantity: 12,
-    amount: "$2130.49",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 25,
-    order: 720,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "8/15/2022",
-    quantity: 8,
-    amount: "$3721.11",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 26,
-    order: 309,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-2.png",
-    },
-    date: "4/28/2022",
-    quantity: 8,
-    amount: "$4683.45",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 27,
-    order: 24,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-3.png",
-    },
-    date: "9/6/2021",
-    quantity: 7,
-    amount: "$2863.71",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 28,
-    order: 518,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-4.png",
-    },
-    date: "9/11/2021",
-    quantity: 4,
-    amount: "$3879.41",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 29,
-    order: 98,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-5.png",
-    },
-    date: "1/27/2022",
-    quantity: 5,
-    amount: "$4660.81",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 30,
-    order: 940,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-6.png",
-    },
-    date: "9/16/2021",
-    quantity: 6,
-    amount: "$4800.75",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 31,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/8/2022",
-    quantity: 1,
-    amount: "$2299.05",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 32,
-    order: 122,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/18/2021",
-    quantity: 1,
-    amount: "$3578.02",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 33,
-    order: 371,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 13,
-    amount: "$1996.06",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 34,
-    order: 296,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/13/2021",
-    quantity: 5,
-    amount: "$2749.00",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 35,
-    order: 887,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/7/2021",
-    quantity: 11,
-    amount: "$4353.01",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 36,
-    order: 30,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/9/2021",
-    quantity: 15,
-    amount: "$3252.37",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 37,
-    order: 365,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/12/2022",
-    quantity: 5,
-    amount: "$4044.10",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 38,
-    order: 649,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/6/2022",
-    quantity: 5,
-    amount: "$3859.92",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 39,
-    order: 923,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "7/25/2022",
-    quantity: 14,
-    amount: "$1652.47",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 40,
-    order: 423,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/2/2022",
-    quantity: 8,
-    amount: "$2700.12",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 41,
-    order: 703,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/8/2021",
-    quantity: 8,
-    amount: "$4508.13",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 42,
-    order: 792,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/22/2021",
-    quantity: 11,
-    amount: "$4938.04",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 43,
-    order: 400,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/6/2022",
-    quantity: 1,
-    amount: "$3471.32",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 44,
-    order: 718,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/4/2022",
-    quantity: 4,
-    amount: "$4011.60",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 45,
-    order: 970,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 15,
-    amount: "$3723.64",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 46,
-    order: 786,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/20/2021",
-    quantity: 2,
-    amount: "$2441.15",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 47,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/24/2021",
-    quantity: 11,
-    amount: "$1196.76",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 48,
-    order: 929,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/30/2022",
-    quantity: 10,
-    amount: "$3579.57",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 49,
-    order: 377,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/16/2021",
-    quantity: 4,
-    amount: "$2657.84",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 50,
-    order: 661,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/15/2022",
-    quantity: 6,
-    amount: "$2905.94",
-    status: "paid",
-    action: null,
-  },
-];
diff --git a/app/[locale]/(protected)/table/react-table/example1/index.tsx b/app/[locale]/(protected)/table/react-table/example1/index.tsx
deleted file mode 100644
index 2bf415c1..00000000
--- a/app/[locale]/(protected)/table/react-table/example1/index.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-
-} from "@tanstack/react-table"
-import { columns } from "./columns"
-import { Input } from "@/components/ui/input"
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-
-import { data } from "./data"
-import TablePagination from "./table-pagination"
-
-const ExampleOne = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  })
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl font-medium text-default-900">
-          Order Records
-        </div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
-      </div>
-
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                  </TableHead>
-                )
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center"
-              >
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination table={table} />
-    </div>
-  )
-}
-export default ExampleOne;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/react-table/example1/table-pagination.tsx b/app/[locale]/(protected)/table/react-table/example1/table-pagination.tsx
deleted file mode 100644
index ad78cfeb..00000000
--- a/app/[locale]/(protected)/table/react-table/example1/table-pagination.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className="w-8 h-8"
-            variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/react-table/example2/columns.tsx b/app/[locale]/(protected)/table/react-table/example2/columns.tsx
deleted file mode 100644
index f19b55e3..00000000
--- a/app/[locale]/(protected)/table/react-table/example2/columns.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-"use client"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-import {
-  ColumnDef,
-} from "@tanstack/react-table"
-import { Eye, SquarePen, Trash2 } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils";
-
-export type DataProps = {
-  id: string | number;
-  order: number;
-  customer: {
-    name: string;
-    image: string;
-  };
-  date: string;
-  quantity: number;
-  amount: string;
-  status: "paid" | "due" | "canceled";
-  action: React.ReactNode;
-}
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "id",
-    header: "id",
-    cell: ({ row }) => <span>{row.getValue("id")}</span>,
-  },
-  {
-    accessorKey: "order",
-    header: "Order",
-    cell: ({ row }) => <span>{row.getValue("order")}</span>,
-  },
-  {
-    accessorKey: "customer",
-    header: "Customer",
-    cell: ({ row }) => {
-      const user = row.original.customer;
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <Avatar
-              className="rounded-full w-8 h-8 bg-transparent hover:bg-transparent shadow-none border-none"
-            >
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
-            </Avatar>
-            <span className="text-sm text-default-600 whitespace-nowrap">
-              {user?.name ?? "Unknown User"}
-            </span>
-          </div>
-        </div>
-      )
-    }
-  },
-  {
-    accessorKey: "date",
-    header: "Date",
-    cell: ({ row }) => {
-      return (
-        <span>{row.getValue("date")}</span>
-      )
-    }
-  },
-  {
-    accessorKey: "quantity",
-    header: "Quantity",
-    cell: ({ row }) => {
-      return (
-        <span>{row.getValue("quantity")}</span>
-      )
-    }
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-    cell: ({ row }) => {
-      return (
-        <span>{row.getValue("amount")}</span>
-      )
-    }
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => {
-      const statusColors: Record<string, string> = {
-        paid: "bg-success/20 text-success",
-        due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive"
-      };
-      const status = row.getValue<string>("status");
-      const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge
-          className={cn("rounded-full px-5", statusStyles)}
-        >{status} </Badge>
-      );
-    }
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Action",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center gap-2">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="w-7 h-7 ring-offset-transparent border-default-200 dark:border-default-300  text-default-400"
-                  color="secondary"
-                >
-                  <Eye className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="top">
-                <p>View</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="w-7 h-7 ring-offset-transparent border-default-200 dark:border-default-300  text-default-400"
-                  color="secondary"
-                >
-                  <SquarePen className="w-3 h-3" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="top">
-                <p>Edit</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="w-7 h-7 ring-offset-transparent border-default-200 dark:border-default-300  text-default-400"
-                  color="secondary"
-                >
-                  <Trash2 className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="top" className="bg-destructive text-destructive-foreground">
-                <p>Delete</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      )
-    }
-  }
-]
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/react-table/example2/data.ts b/app/[locale]/(protected)/table/react-table/example2/data.ts
deleted file mode 100644
index efbd602e..00000000
--- a/app/[locale]/(protected)/table/react-table/example2/data.ts
+++ /dev/null
@@ -1,655 +0,0 @@
-import { DataProps } from "./columns";
-
-export const data: DataProps[] = [
-  {
-    id: 1,
-    order: 951,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "3/26/2022",
-    quantity: 13,
-    amount: "$1779.53",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 2,
-    order: 238,
-    customer: {
-      name: "Emily Davis",
-      image: "/images/all-img/cus-1.png",
-    },
-    date: "2/6/2022",
-    quantity: 13,
-    amount: "$2215.78",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 3,
-    order: 339,
-    customer: {
-      name: "Laura Smith",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "9/6/2021",
-    quantity: 1,
-    amount: "$3183.60",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 4,
-    order: 365,
-    customer: {
-      name: "Sarah Johnson",
-      image: "/images/avatar/avatar-2.png",
-    },
-    date: "11/7/2021",
-    quantity: 13,
-    amount: "$2587.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 5,
-    order: 513,
-    customer: {
-      name: "Rachel Brown",
-      image: "/images/avatar/avatar-3.png",
-    },
-    date: "5/6/2022",
-    quantity: 12,
-    amount: "$3840.73",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 6,
-    order: 534,
-    customer: {
-      name: "Megan Taylor",
-      image: "/images/avatar/avatar-4.png",
-    },
-    date: "2/14/2022",
-    quantity: 12,
-    amount: "$4764.18",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 7,
-    order: 77,
-    customer: {
-      name: "Sophie Clark",
-      image: "/images/avatar/avatar-5.png",
-    },
-    date: "7/30/2022",
-    quantity: 6,
-    amount: "$2875.05",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 8,
-    order: 238,
-    customer: {
-      name: "Natalie Martin",
-      image: "/images/avatar/avatar-6.png",
-    },
-    date: "6/30/2022",
-    quantity: 9,
-    amount: "$2491.02",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 9,
-    order: 886,
-    customer: {
-      name: "Hannah Lewis",
-      image: "/images/avatar/avatar-7.png",
-    },
-    date: "8/9/2022",
-    quantity: 8,
-    amount: "$3006.95",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 10,
-    order: 3,
-    customer: {
-      name: "Lisa White",
-      image: "/images/avatar/avatar-8.png",
-    },
-    date: "8/4/2022",
-    quantity: 12,
-    amount: "$2160.32",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 11,
-    order: 198,
-    customer: {
-      name: "Emma Walker",
-      image: "/images/avatar/avatar-9.png",
-    },
-    date: "4/5/2022",
-    quantity: 8,
-    amount: "$1272.66",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 12,
-    order: 829,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-10.png",
-    },
-    date: "8/9/2022",
-    quantity: 2,
-    amount: "$4327.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 13,
-    order: 595,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-11.png",
-    },
-    date: "2/10/2022",
-    quantity: 11,
-    amount: "$3671.81",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 14,
-    order: 374,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-12.png",
-    },
-    date: "2/10/2022",
-    quantity: 2,
-    amount: "$3401.82",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 15,
-    order: 32,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "5/20/2022",
-    quantity: 4,
-    amount: "$2387.49",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 16,
-    order: 89,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-2.png",
-    },
-    date: "5/3/2022",
-    quantity: 15,
-    amount: "$4236.61",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 17,
-    order: 912,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-3.png",
-    },
-    date: "10/31/2021",
-    quantity: 11,
-    amount: "$2975.66",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 18,
-    order: 621,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-4.png",
-    },
-    date: "1/13/2022",
-    quantity: 5,
-    amount: "$4576.13",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 19,
-    order: 459,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-5.png",
-    },
-    date: "6/14/2022",
-    quantity: 5,
-    amount: "$1276.56",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 20,
-    order: 108,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-6.png",
-    },
-    date: "10/8/2021",
-    quantity: 4,
-    amount: "$1078.64",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 21,
-    order: 492,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-7.png",
-    },
-    date: "11/17/2021",
-    quantity: 9,
-    amount: "$1678.19",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 22,
-    order: 42,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-8.png",
-    },
-    date: "4/4/2022",
-    quantity: 9,
-    amount: "$1822.02",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 23,
-    order: 841,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-9.png",
-    },
-    date: "3/21/2022",
-    quantity: 5,
-    amount: "$1578.39",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 24,
-    order: 561,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-10.png",
-    },
-    date: "6/18/2022",
-    quantity: 12,
-    amount: "$2130.49",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 25,
-    order: 720,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-1.png",
-    },
-    date: "8/15/2022",
-    quantity: 8,
-    amount: "$3721.11",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 26,
-    order: 309,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-2.png",
-    },
-    date: "4/28/2022",
-    quantity: 8,
-    amount: "$4683.45",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 27,
-    order: 24,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-3.png",
-    },
-    date: "9/6/2021",
-    quantity: 7,
-    amount: "$2863.71",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 28,
-    order: 518,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-4.png",
-    },
-    date: "9/11/2021",
-    quantity: 4,
-    amount: "$3879.41",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 29,
-    order: 98,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-5.png",
-    },
-    date: "1/27/2022",
-    quantity: 5,
-    amount: "$4660.81",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 30,
-    order: 940,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/avatar/avatar-6.png",
-    },
-    date: "9/16/2021",
-    quantity: 6,
-    amount: "$4800.75",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 31,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/8/2022",
-    quantity: 1,
-    amount: "$2299.05",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 32,
-    order: 122,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/18/2021",
-    quantity: 1,
-    amount: "$3578.02",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 33,
-    order: 371,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 13,
-    amount: "$1996.06",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 34,
-    order: 296,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/13/2021",
-    quantity: 5,
-    amount: "$2749.00",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 35,
-    order: 887,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/7/2021",
-    quantity: 11,
-    amount: "$4353.01",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 36,
-    order: 30,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/9/2021",
-    quantity: 15,
-    amount: "$3252.37",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 37,
-    order: 365,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/12/2022",
-    quantity: 5,
-    amount: "$4044.10",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 38,
-    order: 649,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/6/2022",
-    quantity: 5,
-    amount: "$3859.92",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 39,
-    order: 923,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "7/25/2022",
-    quantity: 14,
-    amount: "$1652.47",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 40,
-    order: 423,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/2/2022",
-    quantity: 8,
-    amount: "$2700.12",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 41,
-    order: 703,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/8/2021",
-    quantity: 8,
-    amount: "$4508.13",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 42,
-    order: 792,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/22/2021",
-    quantity: 11,
-    amount: "$4938.04",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 43,
-    order: 400,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/6/2022",
-    quantity: 1,
-    amount: "$3471.32",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 44,
-    order: 718,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/4/2022",
-    quantity: 4,
-    amount: "$4011.60",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 45,
-    order: 970,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 15,
-    amount: "$3723.64",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 46,
-    order: 786,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/20/2021",
-    quantity: 2,
-    amount: "$2441.15",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 47,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/24/2021",
-    quantity: 11,
-    amount: "$1196.76",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 48,
-    order: 929,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/30/2022",
-    quantity: 10,
-    amount: "$3579.57",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 49,
-    order: 377,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/16/2021",
-    quantity: 4,
-    amount: "$2657.84",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 50,
-    order: 661,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/15/2022",
-    quantity: 6,
-    amount: "$2905.94",
-    status: "paid",
-    action: null,
-  },
-];
-
diff --git a/app/[locale]/(protected)/table/react-table/example2/index.tsx b/app/[locale]/(protected)/table/react-table/example2/index.tsx
deleted file mode 100644
index 90ec05e5..00000000
--- a/app/[locale]/(protected)/table/react-table/example2/index.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-import { columns } from "./columns"
-import { Input } from "@/components/ui/input"
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-
-import { data } from "./data"
-import TablePagination from "./table-pagination"
-
-const ExampleTwo= () => {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  })
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl font-medium text-default-900">Customer Order</div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
-            onChange={(event) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
-      </div>
-
-      <Table>
-        <TableHeader className="bg-default-200">
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                  </TableHead>
-                )
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center"
-              >
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination table={table} />
-    </div>
-  )
-}
-export default ExampleTwo;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/react-table/example2/table-pagination.tsx b/app/[locale]/(protected)/table/react-table/example2/table-pagination.tsx
deleted file mode 100644
index 46e25075..00000000
--- a/app/[locale]/(protected)/table/react-table/example2/table-pagination.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import React from 'react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-   
-       <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className="w-8 h-8"
-            variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/table/react-table/layout.tsx b/app/[locale]/(protected)/table/react-table/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/table/react-table/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/table/react-table/page.tsx b/app/[locale]/(protected)/table/react-table/page.tsx
deleted file mode 100644
index dca41b42..00000000
--- a/app/[locale]/(protected)/table/react-table/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card';
-import ExampleTwo from './example2';
-import ExampleOne from './example1';
-import SiteBreadcrumb from '@/components/site-breadcrumb';
-
-const ReactTablePage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className='space-y-6'>
-        <Card>
-          <CardContent className="p-0">
-            <ExampleOne />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-0">
-            <ExampleTwo />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default ReactTablePage;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/utility/blank-page/layout.tsx b/app/[locale]/(protected)/utility/blank-page/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/utility/blank-page/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/utility/blank-page/page.tsx b/app/[locale]/(protected)/utility/blank-page/page.tsx
deleted file mode 100644
index 0cdbbf79..00000000
--- a/app/[locale]/(protected)/utility/blank-page/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const BlankPage = () => {
-  return (
-    <div>
-      <SiteBreadcrumb/>
-      <div className="text-2xl font-medium">Blank Page</div>
-    </div>
-  )
-};
-
-export default BlankPage;
diff --git a/app/[locale]/(protected)/utility/blog/layout.tsx b/app/[locale]/(protected)/utility/blog/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/utility/blog/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/utility/blog/page.tsx b/app/[locale]/(protected)/utility/blog/page.tsx
deleted file mode 100644
index 1865406e..00000000
--- a/app/[locale]/(protected)/utility/blog/page.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import Sidebar from "./sidebar";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const BlogPage = () => {
-  return (
-    <>
-      <SiteBreadcrumb />
-      <div className="flex flex-wrap gap-5 ">
-        <div className="flex-none">
-          <div className="lg:max-w-[360px]">
-            <Sidebar />
-          </div>
-        </div>
-        <div className="flex-1">
-          <div className="grid xl:grid-cols-2 grid-cols-1 gap-5">
-            <div className="xl:col-span-2 col-span-1">
-              <Card className="overflow-hidden">
-                <div className=" h-[248px] w-full mb-6 ">
-                  <Image
-                    src="/images/all-img/post-1.png"
-                    alt=""
-                    width={300}
-                    height={300}
-                    className=" w-full h-full  object-cover"
-                  />
-                </div>
-                <CardContent>
-                  <div className="flex justify-between mb-4">
-                    <Link href="/blog-details">
-                      <span className="inline-flex leading-5 text-default-500 text-sm font-normal">
-                        <Icon
-                          icon="heroicons-outline:calendar"
-                          className="text-default-400 me-2 text-lg"
-                        />
-                        10/02/2021
-                      </span>
-                    </Link>
-                    <div className="flex space-x-4 rtl:space-x-reverse">
-                      <Link href="#">
-                        <span className="inline-flex leading-5 text-default-500 text-sm font-normal">
-                          <Icon
-                            icon="heroicons-outline:chat"
-                            className="text-default-400 me-2 text-lg"
-                          />
-                          3
-                        </span>
-                      </Link>
-                      <Link href="#">
-                        <span className="inline-flex leading-5 text-default-500 text-sm font-normal">
-                          <Icon
-                            icon="heroicons-outline:share"
-                            className="text-default-400 me-2 text-lg"
-                          />
-                          4
-                        </span>
-                      </Link>
-                    </div>
-                  </div>
-                  <h5 className=" text-default-900">
-                    <Link href="blog-details">
-                      At Healthcare you will be treated by caring
-                    </Link>
-                  </h5>
-                  <div className="text-default-700 mt-4 space-y-4">
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                      do eiusmod tempor incididunt ut labore et dolore magna
-                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                      ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet,
-                      consectetur adipiscing eli.
-                    </p>
-                    <Button variant="outline">Read more</Button>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-            <Card className="overflow-hidden">
-              <div className=" h-[248px] w-full mb-6 ">
-                <Image
-                  src="/images/all-img/post-1.png"
-                  alt=""
-                  className=" w-full h-full  object-cover"
-                  width={300}
-                  height={300}
-                />
-              </div>
-              <CardContent>
-                <div className="flex justify-between mb-4">
-                  <div>
-                    <h5 className=" text-default-900">
-                      <Link href="#">Lorem ipsum</Link>
-                    </h5>
-                  </div>
-                  <Link href="#">
-                    <span className="inline-flex leading-5 text-default-500 text-sm font-normal">
-                      <Icon
-                        icon="heroicons-outline:calendar"
-                        className="text-default-400 me-2 text-lg"
-                      />
-                      10/02/2021
-                    </span>
-                  </Link>
-                </div>
-
-                <div className="text-default-700 mt-4">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                  <div className="mt-4 space-x-4 rtl:space-x-reverse">
-                    <Link href="#" className="text-sm font-medium underline">
-                      Learn more
-                    </Link>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="overflow-hidden">
-              <div className=" h-[248px] w-full mb-6 ">
-                <Image
-                  src="/images/all-img/post-1.png"
-                  alt=""
-                  className=" w-full h-full  object-cover"
-                  width={300}
-                  height={300}
-                />
-              </div>
-              <CardContent>
-                <div className="flex justify-between mb-4">
-                  <div>
-                    <h5 className=" text-default-900">
-                      <Link href="#">Lorem ipsum</Link>
-                    </h5>
-                  </div>
-                  <Link href="#">
-                    <span className="inline-flex leading-5 text-default-500 text-sm font-normal">
-                      <Icon
-                        icon="heroicons-outline:calendar"
-                        className="text-default-400 me-2 text-lg"
-                      />
-                      10/02/2021
-                    </span>
-                  </Link>
-                </div>
-
-                <div className="text-default-700 mt-4">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                  <div className="mt-4 space-x-4 rtl:space-x-reverse">
-                    <Link href="#" className="text-sm font-medium underline">
-                      Learn more
-                    </Link>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="overflow-hidden">
-              <div className=" h-[248px] w-full mb-6 ">
-                <Image
-                  src="/images/all-img/post-1.png"
-                  alt=""
-                  className=" w-full h-full  object-cover"
-                  width={300}
-                  height={300}
-                />
-              </div>
-              <CardContent>
-                <div className="flex justify-between mb-4">
-                  <div>
-                    <h5 className=" text-default-900">
-                      <Link href="#">Lorem ipsum</Link>
-                    </h5>
-                  </div>
-                  <Link href="#">
-                    <span className="inline-flex leading-5 text-default-500 text-sm font-normal">
-                      <Icon
-                        icon="heroicons-outline:calendar"
-                        className="text-default-400 me-2 text-lg"
-                      />
-                      10/02/2021
-                    </span>
-                  </Link>
-                </div>
-
-                <div className="text-default-700 mt-4">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                  <div className="mt-4 space-x-4 rtl:space-x-reverse">
-                    <Link href="#" className="text-sm font-medium underline">
-                      Learn more
-                    </Link>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="overflow-hidden">
-              <div className=" h-[248px] w-full mb-6 ">
-                <Image
-                  src="/images/all-img/post-1.png"
-                  alt=""
-                  className=" w-full h-full  object-cover"
-                  width={300}
-                  height={300}
-                />
-              </div>
-              <CardContent>
-                <div className="flex justify-between mb-4">
-                  <div>
-                    <h5 className=" text-default-900">
-                      <Link href="#">Lorem ipsum</Link>
-                    </h5>
-                  </div>
-                  <Link href="#">
-                    <span className="inline-flex leading-5 text-default-500 text-sm font-normal">
-                      <Icon
-                        icon="heroicons-outline:calendar"
-                        className="text-default-400 me-2 text-lg"
-                      />
-                      10/02/2021
-                    </span>
-                  </Link>
-                </div>
-
-                <div className="text-default-700 mt-4">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                  <div className="mt-4 space-x-4 rtl:space-x-reverse">
-                    <Link href="#" className="text-sm font-medium underline">
-                      Learn more
-                    </Link>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default BlogPage;
diff --git a/app/[locale]/(protected)/utility/blog/sidebar.tsx b/app/[locale]/(protected)/utility/blog/sidebar.tsx
deleted file mode 100644
index b5a7a73e..00000000
--- a/app/[locale]/(protected)/utility/blog/sidebar.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import { Link } from '@/i18n/routing';
-import Image from "next/image";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-
-const category = [
-  {
-    cta: "Graphic Designer (214) ",
-  },
-  {
-    cta: "Engineering Jobs (514) ",
-  },
-  {
-    cta: "Mainframe Jobs (554)",
-  },
-  {
-    cta: "Legal Jobs (457)",
-  },
-  {
-    cta: "IT Jobs (1254) ",
-  },
-  {
-    cta: "R&D Jobs (554) ",
-  },
-  {
-    cta: "Government Jobs (350) ",
-  },
-  {
-    cta: "PSL Jobs (221)",
-  },
-];
-const tags = [
-  {
-    title: "Business",
-    link: "#",
-  },
-  {
-    title: "Consulting",
-    link: "#",
-  },
-  {
-    title: "Photographic",
-    link: "#",
-  },
-  {
-    title: "Investment",
-    link: "#",
-  },
-  {
-    title: "Camera",
-    link: "#",
-  },
-  {
-    title: "Assurance",
-    link: "#",
-  },
-  {
-    title: "Secutity",
-    link: "#",
-  },
-];
-const Sidebar = () => {
-  return (
-    <Card>
-      <CardHeader className="border-b border-solid border-default-100">
-        <InputGroup>
-          <Input
-            className="focus-visible:border-0 active:border-0 focus:border-0"
-            type="text"
-            placeholder="Search.."
-          />
-          <InputGroupButton>
-            <Button
-              size="md"
-              color="secondary"
-              className=" hover:ring-0 hover:ring-offset-0 border-0"
-            >
-              <Icon icon="heroicons:magnifying-glass" className="w-5 h-5" />
-            </Button>
-          </InputGroupButton>
-        </InputGroup>
-      </CardHeader>
-      <CardContent className="pt-4 border-b border-solid border-default-100">
-        <h4 className="text-default-700 text-xl font-medium mb-4">
-          Latest Blogs Post
-        </h4>
-        <ul className="list-item space-y-4">
-          <li>
-            <div className="flex space-x-4 rtl:space-x-reverse">
-              <div className="flex-none">
-                <div className="h-20 w-20">
-                  <Image
-                    width={300}
-                    height={300}
-                    src="/images/post/t-1.png"
-                    alt=""
-                    className="block w-full h-full rounded-md"
-                  />
-                </div>
-              </div>
-              <div className="flex-1 flex flex-col">
-                <h4 className="text-sm text-default-600 font-regular leading-5 mb-4">
-                  <Link href="#">
-                    Lorem ipsum dolor sit amet consectetur adipiscing
-                  </Link>
-                  .
-                </h4>
-                <span className="text-xs text-default-400">
-                  <Link href="#">Oct 09, 2021</Link>
-                </span>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div className="flex space-x-4 rtl:space-x-reverse">
-              <div className="flex-none">
-                <div className="h-20 w-20">
-                  <Image
-                    width={300}
-                    height={300}
-                    src="/images/post/t-2.png"
-                    alt=""
-                    className="block w-full h-full rounded-md"
-                  />
-                </div>
-              </div>
-              <div className="flex-1 flex flex-col">
-                <h4 className="text-sm text-default-600 font-regular leading-5 mb-4">
-                  <Link href="#">
-                    Lorem ipsum dolor sit amet consectetur adipiscing
-                  </Link>
-                  .
-                </h4>
-                <span className="text-xs text-default-400">
-                  <Link href="#">Oct 09, 2021</Link>
-                </span>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div className="flex space-x-4 rtl:space-x-reverse">
-              <div className="flex-none">
-                <div className="h-20 w-20">
-                  <Image
-                    width={300}
-                    height={300}
-                    src="/images/post/t-3.png"
-                    alt=""
-                    className="block w-full h-full rounded-md"
-                  />
-                </div>
-              </div>
-              <div className="flex-1 flex flex-col">
-                <h4 className="text-sm text-default-600 font-regular leading-5 mb-4">
-                  <Link href="#">
-                    Lorem ipsum dolor sit amet consectetur adipiscing
-                  </Link>
-                  .
-                </h4>
-                <span className="text-xs text-default-400">
-                  <Link href="#">Oct 09, 2021</Link>
-                </span>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </CardContent>
-      <CardContent className="pt-4 border-b border-solid border-default-100">
-        <h4 className="text-default-700 text-xl font-medium mb-4">Category</h4>
-        <ul className="list-item space-y-6">
-          {category.map((item, i) => (
-            <li key={i}>
-              <Link
-                href="#"
-                className="flex space-x-1 items-start leading-[1] text-sm text-default-700 hover:text-default-900 transition duration-150 rtl:space-x-reverse"
-              >
-                <span className="text-sm">
-                  <Icon icon="heroicons:chevron-right-solid" />
-                </span>
-                <span>{item.cta}</span>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </CardContent>
-      <CardContent className="pt-4 px-6">
-        <h4 className="text-default-700 text-xl font-medium mb-4">
-          Popular tags
-        </h4>
-        <ul className="flex flex-wrap">
-          {tags.map((item, i) => (
-            <li key={i} className="mr-2 mb-2">
-              <Link
-                href={item.link}
-                className="text-xs font-normal text-default-600 bg-default-100 dark:bg-default-600 dark:text-default-300 py-1 px-3 rounded-full hover:bg-default-900 hover:text-primary-foreground transition duration-150"
-              >
-                <span>{item.title}</span>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </CardContent>
-      <div className="mx-6 bg-default-900 dark:bg-default-50 text-primary-foreground dark:text-default rounded-xl p-6 space-y-4 mb-6">
-        <h4 className="text-xl font-medium ">Subscribe to our blog</h4>
-        <div className="text-sm">
-          Lorem ipsum dolor sit amet, consectet ur adipiscing elit.
-        </div>
-        <form action="#" className="space-y-4">
-          <Input
-            type="text"
-            placeholder="Enter your email"
-            className=" py-2 bg-transparent border-secondary focus:border-secondary placeholder:text-default-400 dark:placeholder:text-default-700"
-          />
-          <Button
-            fullWidth
-            color="secondary"
-            size="md"
-            className="hover:outline-none hover:ring-0 hover:ring-offset-0 dark:bg-white dark:text-primary-foreground"
-          >
-            Subscribe
-          </Button>
-        </form>
-      </div>
-    </Card>
-  );
-};
-
-export default Sidebar;
diff --git a/app/[locale]/(protected)/utility/faq/layout.tsx b/app/[locale]/(protected)/utility/faq/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/utility/faq/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/utility/faq/page.tsx b/app/[locale]/(protected)/utility/faq/page.tsx
deleted file mode 100644
index 2ea27eb1..00000000
--- a/app/[locale]/(protected)/utility/faq/page.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const Faq = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <Tabs defaultValue="started">
-        <div className="grid grid-cols-12 gap-6">
-          <Card className="lg:col-span-3 md:col-span-5 col-span-12 h-max">
-            <CardContent className=" p-6">
-              <TabsList className="md:flex-col gap-2 flex-wrap md:items-start justify-start">
-                <TabsTrigger
-                  value="started"
-                  className="data-[state=active]:bg-secondary  data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-start"
-                >
-                  Getting Started
-                </TabsTrigger>
-                <TabsTrigger
-                  value="privacy"
-                  className="data-[state=active]:bg-secondary  data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-start"
-                >
-                  Privacy and Security
-                </TabsTrigger>
-                <TabsTrigger
-                  value="legal"
-                  className="data-[state=active]:bg-secondary  data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-start"
-                >
-                  Legal
-                </TabsTrigger>
-              </TabsList>
-            </CardContent>
-          </Card>
-          <div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
-            <TabsContent value="started" className="mt-0">
-              <Accordion type="single" collapsible className="w-full">
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-1">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    How does Dashcode work?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-2">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    Where I can learn more about using Dashcode?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-3">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    Why Dashcode is so important?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-4">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    Where I can find Dashcode?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </TabsContent>
-            <TabsContent value="privacy" className="mt-0">
-              <Accordion type="single" collapsible className="w-full">
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-1">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    How does Dashcode work?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-2">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    Where I can learn more about using Dashcode?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </TabsContent>
-            <TabsContent value="legal" className="mt-0">
-              <Accordion type="single" collapsible className="w-full">
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-1">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    How does Dashcode work?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-2">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    Where I can learn more about using Dashcode?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-                <AccordionItem className="dark:bg-secondary bg-white" value="item-3">
-                  <AccordionTrigger className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
-                    Why Dashcode is so important?
-                  </AccordionTrigger>
-                  <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </TabsContent>
-          </div>
-        </div>
-      </Tabs>
-    </div>
-  );
-};
-
-export default Faq;
diff --git a/app/[locale]/(protected)/utility/invoice/add/layout.tsx b/app/[locale]/(protected)/utility/invoice/add/layout.tsx
deleted file mode 100644
index 4728748a..00000000
--- a/app/[locale]/(protected)/utility/invoice/add/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-
-const layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default layout;
diff --git a/app/[locale]/(protected)/utility/invoice/add/page.tsx b/app/[locale]/(protected)/utility/invoice/add/page.tsx
deleted file mode 100644
index 805f75bd..00000000
--- a/app/[locale]/(protected)/utility/invoice/add/page.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
-import Repeater from "@/components/form/repeater";
-import Picker from "./picker";
-
-const InvoiceAddPage = () => {
-  return (
-    <div>
-      <Card>
-        <CardHeader className="border-0 border-b border-default-200 border-solid">
-          <CardTitle className="text-default-900 font-medium">
-            Create new invoice
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-6">
-          <h4 className="text-default-900  text-xl mb-4">#89572935Kh</h4>
-          <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-            <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-              <div className="lg:col-span-2 col-span-1 text-default-900 text-base font-medium">
-                Recipient info
-              </div>
-              <div className="space-y-2">
-                <label htmlFor="default-picker" className=" form-label">
-                  Issued Date
-                </label>
-                <Picker />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="name1">Name</Label>
-                <Input id="name1" type="text" placeholder="Add your name" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="phone1">Phone</Label>
-                <Input id="phone1" type="text" placeholder="Add your phone" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="email1">Email</Label>
-                <Input id="email1" type="email" placeholder="Add your email" />
-              </div>
-              <div className="lg:col-span-2 col-span-1 space-y-2">
-                <Label htmlFor="address">Address</Label>
-                <Textarea id="address" is="textarea" placeholder="address" />
-              </div>
-            </div>
-            <div className="grid lg:grid-cols-2 grid-cols-1 gap-5 space-y-2">
-              <div className="lg:col-span-2 col-span-1 text-default-900 text-base  font-medium">
-                Owner info-500
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="name">Name</Label>
-                <Input id="name" type="text" placeholder="Add your name" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="phone">Phone</Label>
-                <Input id="phone" type="text" placeholder="Add your phone" />
-              </div>
-              <div className="lg:col-span-2 col-span-1">
-                <Label htmlFor="email">Email</Label>
-                <Input id="email" type="email" placeholder="Add your email" />
-              </div>
-
-              <div className="lg:col-span-2 col-span-1 space-y-2">
-                <Label htmlFor="address2">Address</Label>
-                <Textarea id="address2" is="textarea" placeholder="address" />
-              </div>
-            </div>
-          </div>
-          <div className="my-6">
-            <Repeater />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="additional-name">Additional note</Label>
-            <Textarea
-              id="additional-name"
-              placeholder="Note"
-              className="lg:w-1/2"
-            />
-          </div>
-          <div className="text-right  mt-7">
-            <Button>Save</Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default InvoiceAddPage;
diff --git a/app/[locale]/(protected)/utility/invoice/add/picker.tsx b/app/[locale]/(protected)/utility/invoice/add/picker.tsx
deleted file mode 100644
index cb65775f..00000000
--- a/app/[locale]/(protected)/utility/invoice/add/picker.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-
-const Picker = () => {
-  const [picker, setPicker] = useState<Date>(new Date());
-
-  const handleChange = (date: Date) => {
-    setPicker(date);
-  };
-  return (
-    <div>
-      <Input
-        className="form-control py-2"
-        value={picker.toISOString().substring(0, 10)}
-        onChange={(event) => handleChange(new Date(event.target.value))}
-        id="default-picker"
-        type="date"
-      />
-    </div>
-  );
-};
-
-export default Picker;
diff --git a/app/[locale]/(protected)/utility/invoice/edit/[id]/page.tsx b/app/[locale]/(protected)/utility/invoice/edit/[id]/page.tsx
deleted file mode 100644
index ff0b2cc1..00000000
--- a/app/[locale]/(protected)/utility/invoice/edit/[id]/page.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
-import Repeater from "@/components/form/repeater";
-import Picker from "./picker";
-
-const InvoiceEditPage = () => {
-  return (
-    <div>
-      <Card>
-        <CardHeader className="border-0 border-b border-default-200 border-solid">
-          <CardTitle className="text-default-900 font-medium">
-            Update invoice
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-6">
-          <h4 className="text-default-900  text-xl mb-4">#89572935Kh</h4>
-          <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-            <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
-              <div className="lg:col-span-2 col-span-1 text-default-900 text-base font-medium">
-                Recipient info
-              </div>
-              <div className="space-y-2">
-                <label htmlFor="default-picker" className=" form-label">
-                  Issued Date
-                </label>
-                <Picker />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="name1">Name</Label>
-                <Input id="name1" type="text" placeholder="Add your name" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="phone1">Phone</Label>
-                <Input id="phone1" type="text" placeholder="Add your phone" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="email1">Email</Label>
-                <Input id="email1" type="email" placeholder="Add your email" />
-              </div>
-              <div className="lg:col-span-2 col-span-1 space-y-2">
-                <Label htmlFor="address">Address</Label>
-                <Textarea id="address" is="textarea" placeholder="address" />
-              </div>
-            </div>
-            <div className="grid lg:grid-cols-2 grid-cols-1 gap-5 space-y-2">
-              <div className="lg:col-span-2 col-span-1 text-default-900 text-base  font-medium">
-                Owner info-500
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="name">Name</Label>
-                <Input id="name" type="text" placeholder="Add your name" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="phone">Phone</Label>
-                <Input id="phone" type="text" placeholder="Add your phone" />
-              </div>
-              <div className="lg:col-span-2 col-span-1">
-                <Label htmlFor="email">Email</Label>
-                <Input id="email" type="email" placeholder="Add your email" />
-              </div>
-
-              <div className="lg:col-span-2 col-span-1 space-y-2">
-                <Label htmlFor="address2">Address</Label>
-                <Textarea id="address2" is="textarea" placeholder="address" />
-              </div>
-            </div>
-          </div>
-          <div className="my-6">
-            <Repeater />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="additional-name">Additional note</Label>
-            <Textarea
-              id="additional-name"
-              placeholder="Note"
-              className="lg:w-1/2"
-            />
-          </div>
-          <div className="text-right  mt-7">
-            <Button>Save</Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default InvoiceEditPage;
diff --git a/app/[locale]/(protected)/utility/invoice/edit/[id]/picker.tsx b/app/[locale]/(protected)/utility/invoice/edit/[id]/picker.tsx
deleted file mode 100644
index cb65775f..00000000
--- a/app/[locale]/(protected)/utility/invoice/edit/[id]/picker.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-
-const Picker = () => {
-  const [picker, setPicker] = useState<Date>(new Date());
-
-  const handleChange = (date: Date) => {
-    setPicker(date);
-  };
-  return (
-    <div>
-      <Input
-        className="form-control py-2"
-        value={picker.toISOString().substring(0, 10)}
-        onChange={(event) => handleChange(new Date(event.target.value))}
-        id="default-picker"
-        type="date"
-      />
-    </div>
-  );
-};
-
-export default Picker;
diff --git a/app/[locale]/(protected)/utility/invoice/edit/layout.tsx b/app/[locale]/(protected)/utility/invoice/edit/layout.tsx
deleted file mode 100644
index 4728748a..00000000
--- a/app/[locale]/(protected)/utility/invoice/edit/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-
-const layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default layout;
diff --git a/app/[locale]/(protected)/utility/invoice/edit/page.tsx b/app/[locale]/(protected)/utility/invoice/edit/page.tsx
deleted file mode 100644
index a083b301..00000000
--- a/app/[locale]/(protected)/utility/invoice/edit/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { useRouter } from "@/components/navigation";
-
-const Edit = () => {
-  const router = useRouter();
-  router.push("/utility/invoice/edit/1");
-  return <div>Edit</div>;
-};
-
-export default Edit;
diff --git a/app/[locale]/(protected)/utility/invoice/layout.tsx b/app/[locale]/(protected)/utility/invoice/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/utility/invoice/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/utility/invoice/page.tsx b/app/[locale]/(protected)/utility/invoice/page.tsx
deleted file mode 100644
index 4203d0d2..00000000
--- a/app/[locale]/(protected)/utility/invoice/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-
-import TransactionsTable from "./transactions";
-import { Card } from "@/components/ui/card";
-
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const Invoice = () => {
-  return (
-    <div>
-      <SiteBreadcrumb/>
-      <Card>
-        <TransactionsTable />
-      </Card>
-    </div>
-  );
-};
-
-export default Invoice;
diff --git a/app/[locale]/(protected)/utility/invoice/preview/[id]/page.tsx b/app/[locale]/(protected)/utility/invoice/preview/[id]/page.tsx
deleted file mode 100644
index ab18a976..00000000
--- a/app/[locale]/(protected)/utility/invoice/preview/[id]/page.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Icon } from "@/components/ui/icon";
-import Logo from "@/components/partials/auth/logo";
-import { Button } from "@/components/ui/button";
-import TotalTable from "./totaltable";
-
-const InvoicePreviewPage = () => {
-  return (
-    <div>
-      <div className="lg:flex justify-between flex-wrap items-center mb-6">
-        <h4>title</h4>
-        <div className="flex lg:justify-end items-center flex-wrap gap-4">
-          <Button variant="soft" size="md">
-            <span className="text-lg me-2">
-              <Icon icon="heroicons:pencil-square" />
-            </span>
-            <span>Edit</span>
-          </Button>
-          <Button variant="soft" size="md">
-            <span className="text-lg me-2">
-              <Icon icon="heroicons:printer" />
-            </span>
-            <span>Print</span>
-          </Button>
-          <Button variant="soft" size="md">
-            <span className="text-lg me-2">
-              <Icon icon="heroicons:arrow-down-tray" />
-            </span>
-            <span>Download</span>
-          </Button>
-          <Button variant="soft" size="md">
-            <span className="text-lg me-2 transform -rotate-45">
-              <Icon icon="heroicons:paper-airplane" />
-            </span>
-            <span>Send invoice</span>
-          </Button>
-        </div>
-      </div>
-      <Card>
-        <CardHeader className="bg-default-100">
-          <div className="flex justify-between flex-wrap space-y-4">
-            <div>
-              <Logo />
-
-              <div className="text-default-500 font-normal leading-5 mt-4 text-sm">
-                Dashcode <br />
-                House# 339, New DOHS, Mohakhali, <br />
-                Dhaka - 1206, Bangladesh
-                <div className="flex space-x-2 mt-2 leading-[1] rtl:space-x-reverse">
-                  <Icon icon="heroicons-outline:phone" />
-                  <span>(252) 555-0126,(201) 555-0124</span>
-                </div>
-                <div className="mt-[6px] flex space-x-2 leading-[1] rtl:space-x-reverse">
-                  <Icon icon="heroicons-outline:mail" />
-                  <span>Dashcode@example.com</span>
-                </div>
-              </div>
-            </div>
-            <div>
-              <span className="block text-default-900 font-medium leading-5 text-xl">
-                Bill to:
-              </span>
-
-              <div className="text-default-500 font-normal leading-5 mt-4 text-sm">
-                Annette black-500 <br />
-                4140 Parker Rd. Allentown, New <br />
-                Mexico 31134
-                <div className="flex space-x-2 mt-2 leading-[1] rtl:space-x-reverse">
-                  <Icon icon="heroicons-outline:phone" />
-                  <span>(252) 555-0126,(201) 555-0124</span>
-                </div>
-                <div className="mt-[6px] flex space-x-2 leading-[1] rtl:space-x-reverse">
-                  <Icon icon="heroicons-outline:mail" />
-                  <span>Dashcode@example.com</span>
-                </div>
-              </div>
-            </div>
-            <div className="space-y-[2px]">
-              <span className="block text-default-900 font-medium leading-5 text-xl mb-4">
-                Invoice:
-              </span>
-              <h4 className="text-default-600 font-medium text-xs uppercase">
-                Invoice number:
-              </h4>
-              <div className="text-default-500 font-normal leading-5 text-sm">
-                #89572935Kh
-              </div>
-              <h4 className="text-default-600 font-medium text-xs uppercase">
-                date
-              </h4>
-              <div className="text-default-500 font-normal leading-5 text-sm">
-                09 December 2021
-              </div>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="max-w-[980px] mx-auto shadow-base dark:shadow-none my-8 rounded-md overflow-x-auto">
-            <TotalTable />
-          </div>
-          <div className="py-10 text-center md:text-2xl text-xl font-normal text-default-600">
-            Thank you for your purchase!
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default InvoicePreviewPage;
diff --git a/app/[locale]/(protected)/utility/invoice/preview/[id]/totaltable.tsx b/app/[locale]/(protected)/utility/invoice/preview/[id]/totaltable.tsx
deleted file mode 100644
index 5cde8a59..00000000
--- a/app/[locale]/(protected)/utility/invoice/preview/[id]/totaltable.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-const rows = [
-  {
-    item: "Headphone",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-  {
-    item: "Headphone",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-  {
-    item: "Headphone",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-  {
-    item: "Headphone",
-    qty: 2,
-    price: "$600.25",
-    total: "$1200.50",
-  },
-];
-
-const TotalTable = () => {
-  return (
-    <div>
-      <table className="w-full border-collapse table-fixed dark:border-default-500 dark:border dark:border-solid">
-        <thead>
-          <tr className="overflow-hidden">
-            <th
-              colSpan={3}
-              className="bg-default-100  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right "
-            >
-              <span className="block px-6 py-5 font-semibold">ITEM</span>
-            </th>
-            <th className="bg-default-100  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">QTY</span>
-            </th>
-            <th className="bg-default-100  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">PRICE</span>
-            </th>
-            <th className="bg-default-100  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">TOTAL</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((data, index) => (
-            <tr
-              key={index}
-              className="border-b border-default-100 border-solid  border-0"
-            >
-              <td
-                colSpan={3}
-                className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4"
-              >
-                {data.item}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.qty}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.price}
-              </td>
-              <td className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4">
-                {data.total}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="md:flex px-6 py-6 items-center">
-        <div className="flex-1 text-default-500  text-sm">
-          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
-          sint. Velit <br />
-          officia consequat duis enim velit mollit.
-        </div>
-        <div className="flex-none min-w-[270px] space-y-3">
-          <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              subtotal:
-            </span>
-            <span className="text-default-900 ">$3601.50</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              vat (3.5%):
-            </span>
-            <span className="text-default-900 ">$20.50</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Invoice total:
-            </span>
-            <span className="text-default-900  font-bold">$3622.00</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TotalTable;
diff --git a/app/[locale]/(protected)/utility/invoice/transactions/columns.tsx b/app/[locale]/(protected)/utility/invoice/transactions/columns.tsx
deleted file mode 100644
index 1674a920..00000000
--- a/app/[locale]/(protected)/utility/invoice/transactions/columns.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-
-
-import { ColumnDef } from "@tanstack/react-table";
-import { Eye, MoreVertical, SendHorizontal, SquarePen, Trash2 } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Link } from '@/i18n/routing';
-
-export type DataProps = {
-  id: string | number;
-  order: number;
-  customer: {
-    name: string;
-    image: string;
-  };
-  date: string;
-  quantity: number;
-  amount: string;
-  status: "paid" | "due" | "canceled";
-  action: React.ReactNode;
-};
-export const columns: ColumnDef<DataProps>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="bg-default-100"
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="xl:w-16">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="bg-default-100"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "id",
-    header: "id",
-    cell: ({ row }) => <span>{row.getValue("id")}</span>,
-  },
-  {
-    accessorKey: "order",
-    header: "Order",
-    cell: ({ row }) => <span>{row.getValue("order")}</span>,
-  },
-  {
-    accessorKey: "customer",
-    header: "Customer",
-    cell: ({ row }) => {
-      const user = row.original.customer;
-      return (
-        <div className="font-medium text-card-foreground/80">
-          <div className="flex gap-3 items-center">
-            <Avatar className="rounded-full w-8 h-8">
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
-            </Avatar>
-            <span className="text-sm text-default-600 whitespace-nowrap">
-              {user?.name ?? "Unknown User"}
-            </span>
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "date",
-    header: "Date",
-    cell: ({ row }) => {
-      return <span>{row.getValue("date")}</span>;
-    },
-  },
-  {
-    accessorKey: "quantity",
-    header: "Quantity",
-    cell: ({ row }) => {
-      return <span>{row.getValue("quantity")}</span>;
-    },
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-    cell: ({ row }) => {
-      return <span>{row.getValue("amount")}</span>;
-    },
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => {
-      const statusColors: Record<string, string> = {
-        paid: "bg-success/20 text-success",
-        due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive",
-      };
-      const status = row.getValue<string>("status");
-      const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge className={cn("rounded-full px-5", statusStyles)}>
-          {status}{" "}
-        </Badge>
-      );
-    },
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex justify-start">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                size="icon"
-                className="bg-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-              >
-                <span className="sr-only">Open menu</span>
-                <MoreVertical className="h-4 w-4 text-default-800" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href="#"
-                className="flex items-center p-2 border-b text-default-700 hover:bg-default duration-200 transition-all hover:text-primary-foreground rounded-none"
-              >
-                <SendHorizontal className="w-4 h-4 me-1.5" />
-                Sent
-              </Link>
-              <Link
-                href="/utility/invoice/preview/1"
-                className="flex items-center p-2 border-b text-default-700 hover:bg-default duration-200 transition-all hover:text-primary-foreground rounded-none"
-              >
-                <Eye className="w-4 h-4 me-1.5" />
-                View
-              </Link>
-              <Link
-                href="/utility/invoice/edit/1"
-                className="flex items-center p-2 border-b text-default-700 hover:bg-default duration-200 transition-all hover:text-primary-foreground rounded-none"
-              >
-                <SquarePen className="w-4 h-4 me-1.5" />
-                Edit
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center p-2 text-destructive bg-destructive/40 duration-200 transition-all hover:bg-destructive/80 hover:text-destructive-foreground rounded-none"
-              >
-                <Trash2 className="w-4 h-4 me-1.5" />
-                Delete
-              </Link>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      );
-    },
-  },
-];
diff --git a/app/[locale]/(protected)/utility/invoice/transactions/data.ts b/app/[locale]/(protected)/utility/invoice/transactions/data.ts
deleted file mode 100644
index bf50b1f3..00000000
--- a/app/[locale]/(protected)/utility/invoice/transactions/data.ts
+++ /dev/null
@@ -1,653 +0,0 @@
-import { DataProps } from "./columns";
-export const data: DataProps[] = [
-  {
-    id: 1,
-    order: 951,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/26/2022",
-    quantity: 13,
-    amount: "$1779.53",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 2,
-    order: 238,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/6/2022",
-    quantity: 13,
-    amount: "$2215.78",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 3,
-    order: 339,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/6/2021",
-    quantity: 1,
-    amount: "$3183.60",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 4,
-    order: 365,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/7/2021",
-    quantity: 13,
-    amount: "$2587.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 5,
-    order: 513,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "5/6/2022",
-    quantity: 12,
-    amount: "$3840.73",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 6,
-    order: 534,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/14/2022",
-    quantity: 12,
-    amount: "$4764.18",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 7,
-    order: 77,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "7/30/2022",
-    quantity: 6,
-    amount: "$2875.05",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 8,
-    order: 238,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/30/2022",
-    quantity: 9,
-    amount: "$2491.02",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 9,
-    order: 886,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/9/2022",
-    quantity: 8,
-    amount: "$3006.95",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 10,
-    order: 3,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/4/2022",
-    quantity: 12,
-    amount: "$2160.32",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 11,
-    order: 198,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/5/2022",
-    quantity: 8,
-    amount: "$1272.66",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 12,
-    order: 829,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/9/2022",
-    quantity: 2,
-    amount: "$4327.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 13,
-    order: 595,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/10/2022",
-    quantity: 11,
-    amount: "$3671.81",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 14,
-    order: 374,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/10/2022",
-    quantity: 2,
-    amount: "$3401.82",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 15,
-    order: 32,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "5/20/2022",
-    quantity: 4,
-    amount: "$2387.49",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 16,
-    order: 89,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "5/3/2022",
-    quantity: 15,
-    amount: "$4236.61",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 17,
-    order: 912,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/31/2021",
-    quantity: 11,
-    amount: "$2975.66",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 18,
-    order: 621,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/13/2022",
-    quantity: 5,
-    amount: "$4576.13",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 19,
-    order: 459,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/14/2022",
-    quantity: 5,
-    amount: "$1276.56",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 20,
-    order: 108,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/8/2021",
-    quantity: 4,
-    amount: "$1078.64",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 21,
-    order: 492,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/17/2021",
-    quantity: 9,
-    amount: "$1678.19",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 22,
-    order: 42,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/4/2022",
-    quantity: 9,
-    amount: "$1822.02",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 23,
-    order: 841,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/21/2022",
-    quantity: 5,
-    amount: "$1578.39",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 24,
-    order: 561,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/18/2022",
-    quantity: 12,
-    amount: "$2130.49",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 25,
-    order: 720,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/15/2022",
-    quantity: 8,
-    amount: "$3721.11",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 26,
-    order: 309,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/28/2022",
-    quantity: 8,
-    amount: "$4683.45",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 27,
-    order: 24,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/6/2021",
-    quantity: 7,
-    amount: "$2863.71",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 28,
-    order: 518,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/11/2021",
-    quantity: 4,
-    amount: "$3879.41",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 29,
-    order: 98,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/27/2022",
-    quantity: 5,
-    amount: "$4660.81",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 30,
-    order: 940,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/16/2021",
-    quantity: 6,
-    amount: "$4800.75",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 31,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "1/8/2022",
-    quantity: 1,
-    amount: "$2299.05",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 32,
-    order: 122,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/18/2021",
-    quantity: 1,
-    amount: "$3578.02",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 33,
-    order: 371,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 13,
-    amount: "$1996.06",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 34,
-    order: 296,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/13/2021",
-    quantity: 5,
-    amount: "$2749.00",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 35,
-    order: 887,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/7/2021",
-    quantity: 11,
-    amount: "$4353.01",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 36,
-    order: 30,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "9/9/2021",
-    quantity: 15,
-    amount: "$3252.37",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 37,
-    order: 365,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/12/2022",
-    quantity: 5,
-    amount: "$4044.10",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 38,
-    order: 649,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/6/2022",
-    quantity: 5,
-    amount: "$3859.92",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 39,
-    order: 923,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "7/25/2022",
-    quantity: 14,
-    amount: "$1652.47",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 40,
-    order: 423,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/2/2022",
-    quantity: 8,
-    amount: "$2700.12",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 41,
-    order: 703,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "12/8/2021",
-    quantity: 8,
-    amount: "$4508.13",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 42,
-    order: 792,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/22/2021",
-    quantity: 11,
-    amount: "$4938.04",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 43,
-    order: 400,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "4/6/2022",
-    quantity: 1,
-    amount: "$3471.32",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 44,
-    order: 718,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "2/4/2022",
-    quantity: 4,
-    amount: "$4011.60",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 45,
-    order: 970,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "3/30/2022",
-    quantity: 15,
-    amount: "$3723.64",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 46,
-    order: 786,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/20/2021",
-    quantity: 2,
-    amount: "$2441.15",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 47,
-    order: 925,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "10/24/2021",
-    quantity: 11,
-    amount: "$1196.76",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 48,
-    order: 929,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "6/30/2022",
-    quantity: 10,
-    amount: "$3579.57",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 49,
-    order: 377,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "11/16/2021",
-    quantity: 4,
-    amount: "$2657.84",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 50,
-    order: 661,
-    customer: {
-      name: "Jenny Wilson",
-      image: "/images/all-img/customer_1.png",
-    },
-    date: "8/15/2022",
-    quantity: 6,
-    amount: "$2905.94",
-    status: "paid",
-    action: null,
-  },
-];
diff --git a/app/[locale]/(protected)/utility/invoice/transactions/index.tsx b/app/[locale]/(protected)/utility/invoice/transactions/index.tsx
deleted file mode 100644
index e48b1e67..00000000
--- a/app/[locale]/(protected)/utility/invoice/transactions/index.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
-import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/routing';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import BasicCalendar from "../../../components/calendar/basic-calendar";
-import { Card } from "@/components/ui/card";
-
-const TransactionsTable = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl font-medium text-default-900">
-          Invoice
-        </div>
-        <div className="flex-none">
-          <div className="flex items-center gap-4 flex-wrap">
-            <Input
-              placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="max-w-sm "
-            />
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  size="md"
-                  rounded="sm"
-                  className="bg-white hover:ring-0 hover:ring-offset-0 dark:bg-default-900 hover:bg-default-50 font-normal text-default-600 border-default-200 border-solid border "
-                >
-                  <Calendar className="h-4 w-4 " />
-                  <span className="px-2">Select Date</span>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0 overflow-hidden bg-transparent shadow-none border-none">
-                <Card>
-                  <BasicCalendar />
-                </Card>
-              </PopoverContent>
-            </Popover>
-
-            <Button
-              size="md"
-              rounded="sm"
-              className="bg-white hover:ring-0 hover:ring-offset-0 dark:bg-default-900 hover:bg-default-50 font-normal text-default-600 border-default-200 border-solid border"
-            >
-              <Filter className="h-4 w-4" />
-              <span className="px-2">Filter</span>
-            </Button>
-            <Link
-              href="/utility/invoice/add"
-              className="hover:ring-offset-[1px] flex gap-2 items-center text-sm bg-default text-default-50 py-2 px-3 rounded-sm hover:ring-default hover:ring-2 duration-200 transition-all"
-            >
-              <Plus className="h-4 w-4" />
-              <span className="px-2">Add Record</span>
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      <Table>
-        <TableHeader className="bg-default-200 ">
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead className="last:text-start" key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id} className="h-[75px]">
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination table={table} />
-    </div>
-  );
-};
-export default TransactionsTable;
diff --git a/app/[locale]/(protected)/utility/invoice/transactions/table-pagination.tsx b/app/[locale]/(protected)/utility/invoice/transactions/table-pagination.tsx
deleted file mode 100644
index fab9b075..00000000
--- a/app/[locale]/(protected)/utility/invoice/transactions/table-pagination.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/utility/pricing/data.ts b/app/[locale]/(protected)/utility/pricing/data.ts
deleted file mode 100644
index 5a78a594..00000000
--- a/app/[locale]/(protected)/utility/pricing/data.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-export const tables = [
-  {
-    title: "Advanced",
-    price_Yearly: "$96",
-    price_Monthly: "$26",
-    button: "Buy now",
-    bg: "bg-warning",
-    img: "/images/all-img/big-shap1.png",
-  },
-  {
-    title: "Business",
-    price_Yearly: "$196",
-    price_Monthly: "$20",
-    button: "Buy now",
-    bg: "bg-info",
-    ribon: "Most popular",
-    img: "/images/all-img/big-shap2.png",
-  },
-  {
-    title: "Basic",
-    price_Yearly: "$26",
-    price_Monthly: "$16",
-    button: "Try it free",
-    bg: "bg-success",
-    img: "/images/all-img/big-shap3.png",
-  },
-  {
-    title: "Got a large team?",
-    price_Yearly: "$126",
-    price_Monthly: "$16",
-    button: "Request a quote",
-    bg: "bg-primary",
-    img: "/images/all-img/big-shap4.png",
-  },
-];
-
-export type Table = (typeof tables)[number];
-export const tables2 = [
-  {
-    title: "Advanced",
-    price_Yearly: "$96",
-    price_Monthly: "$26",
-    button: "Buy now",
-    bg: "bg-white",
-  },
-  {
-    title: "Business",
-    price_Yearly: "$196",
-    price_Monthly: "$20",
-    button: "Buy now",
-    bg: "bg-default-900",
-    ribon: "Most popular",
-  },
-  {
-    title: "Basic",
-    price_Yearly: "$26",
-    price_Monthly: "$16",
-    button: "Try it free",
-    bg: "bg-white",
-  },
-  {
-    title: "Got a large team?",
-    price_Yearly: "$126",
-    price_Monthly: "$16",
-    button: "Request a quote",
-    bg: "bg-white",
-  },
-];
-export type Table2 = (typeof tables2)[number];
diff --git a/app/[locale]/(protected)/utility/pricing/layout.tsx b/app/[locale]/(protected)/utility/pricing/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/utility/pricing/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/utility/pricing/page.tsx b/app/[locale]/(protected)/utility/pricing/page.tsx
deleted file mode 100644
index 8a172e54..00000000
--- a/app/[locale]/(protected)/utility/pricing/page.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-import { tables2, tables } from "./data";
-import { Icon } from "@/components/ui/icon";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const PricingPage = () => {
-  const [check, setCheck] = useState(true);
-  const toggle = () => {
-    setCheck(!check);
-  };
-
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-5">
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex justify-between mb-6">
-              <h4 className="text-default-900 text-xl font-medium">Packages</h4>
-              <label className="inline-flex text-sm cursor-pointer">
-                <input type="checkbox" onChange={toggle} hidden />
-                <span
-                  className={` ${
-                    check
-                      ? "bg-default-900  text-white"
-                      : "dark:text-default-700"
-                  } 
-                px-[18px] py-1 transition duration-100 rounded`}
-                >
-                  Yearly
-                </span>
-                <span
-                  className={`
-              ${
-                !check ? "bg-default-900  text-white" : " dark:text-default-700"
-              }
-                px-[18px] py-1 transition duration-100 rounded
-                `}
-                >
-                  Monthly
-                </span>
-              </label>
-            </div>
-            <div className="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
-              {tables.map((item, i) => (
-                <Card
-                  className={` ${item.bg}
-          price-table bg-opacity-[0.16]  rounded-[6px] p-6 text-default-900  relative overflow-hidden z-[1]
-          `}
-                  key={i}
-                >
-                  <div className="overlay absolute right-0 top-0 w-full h-full z-[-1]">
-                    <Image
-                      width={500}
-                      height={500}
-                      src={item.img}
-                      alt=""
-                      className="ml-auto block"
-                    />
-                  </div>
-                  {item.ribon && (
-                    <div className="text-sm font-medium bg-default-900  text-default-foreground py-2 text-center absolute -right-[43px]  top-6 px-10 transform rotate-[45deg] ">
-                      {item.ribon}
-                    </div>
-                  )}
-                  <CardContent className="p-0">
-                    <header className="mb-6">
-                      <h4 className="text-xl mb-5">{item.title}</h4>
-                      <div className="space-x-4 relative flex items-center mb-5 rtl:space-x-reverse">
-                        {check ? (
-                          <span className="text-[32px] leading-10 font-medium">
-                            {item.price_Yearly}{" "}
-                          </span>
-                        ) : (
-                          <span className="text-[32px] leading-10 font-medium">
-                            {item.price_Monthly}
-                          </span>
-                        )}
-
-                        <span className="text-xs text-warning font-medium px-3 py-1 rounded-full inline-block bg-white uppercase h-auto">
-                          Save 20%
-                        </span>
-                      </div>
-                      <p className="text-default-500  text-sm">
-                        per user/month, annually
-                      </p>
-                    </header>
-                    <div className="price-body space-y-8">
-                      <p className="text-sm leading-5 text-default-600 ">
-                        Designed for teams who need to manage complex workflows
-                        with more automation and integration.
-                      </p>
-                      <div>
-                        <Button fullWidth variant="outline">
-                          {item.button}
-                        </Button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-        <div className="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
-          {tables2.map((item, i) => (
-            <Card
-              className={`${item.bg} 
-            
-            price-table rounded-[6px] shadow-base dark:bg-default-50 p-6 text-default-900 dark:text-white relative overflow-hidden z-[1]
-            `}
-              key={i}
-            >
-              {item.ribon && (
-                <div className="text-sm font-medium bg-white dark:bg-default-700 text-default-900 dark:text-default-300 py-2 text-center absolute -right-[43px] top-6 px-10 transform  rotate-45">
-                  {item.ribon}
-                </div>
-              )}
-              <CardContent className="p-0">
-                <header className="mb-6">
-                  <h4
-                    className={` 
-             ${
-               item.bg === "bg-default-900"
-                 ? "text-default-100 dark:text-white"
-                 : "text-default-900 dark:text-white"
-             }
-             text-xl mb-5 `}
-                  >
-                    {item.title}
-                  </h4>
-                  <div
-                    className={`
-             ${
-               item.bg === "bg-default-900"
-                 ? "text-default-100 dark:text-white"
-                 : "text-default-900 dark:text-white"
-             }
-                space-x-4 relative flex items-center mb-5 rtl:space-x-reverse`}
-                  >
-                    {check ? (
-                      <span className="text-[32px] leading-10 font-medium">
-                        {item.price_Yearly}{" "}
-                      </span>
-                    ) : (
-                      <span className="text-[32px] leading-10 font-medium">
-                        {item.price_Monthly}
-                      </span>
-                    )}
-
-                    <span className="text-xs bg-warning/20 text-warning font-medium px-2 py-1 rounded-full inline-block dark:bg-default-900 uppercase h-auto">
-                      Save 20%
-                    </span>
-                  </div>
-                  <p
-                    className={` text-sm
-             ${
-               item.bg === "bg-default-900"
-                 ? "text-default-100 dark:text-white"
-                 : "text-default-500 dark:text-white"
-             }
-                `}
-                  >
-                    per user/month, annually
-                  </p>
-                </header>
-                <div className="price-body space-y-8">
-                  <p
-                    className={`
-              ${
-                item.bg === "bg-default-900"
-                  ? "text-default-100 dark:text-white"
-                  : "text-default-600 dark:text-white"
-              }
-                text-sm leading-5
-                `}
-                  >
-                    Designed for teams who need to manage complex workflows with
-                    more automation and integration.
-                  </p>
-                  <div>
-                    {item.bg === "bg-default-900" ? (
-                      <Button
-                        fullWidth
-                        className="border-default-200 border-solid border dark:bg-default-50 dark:hover:bg-default-100 dark:border-default-700 dark:text-default-700 dark:outline-0 dark:ring-0 dark:hover:ring-0 dark:hover:ring-offset-0"
-                      >
-                        {item.button}
-                      </Button>
-                    ) : (
-                      <Button
-                        fullWidth
-                        variant="outline"
-                        className="dark:border-default-700 dark:text-default-700 dark:hover:bg-default-100  "
-                      >
-                        {item.button}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PricingPage;
diff --git a/app/[locale]/(protected)/utility/profile/area-chart.tsx b/app/[locale]/(protected)/utility/profile/area-chart.tsx
deleted file mode 100644
index 690c15da..00000000
--- a/app/[locale]/(protected)/utility/profile/area-chart.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { useTheme } from "next-themes";
-import { useConfig } from "@/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-import { colors } from "@/lib/colors";
-
-
-const AreaChart = ({ height = 300 }) => {
-  const [config] = useConfig();
-
-  const { theme: mode } = useTheme();
-
-  const series = [
-    {
-      data: [90, 70, 85, 60, 80, 70, 90, 75, 60, 80],
-    },
-  ];
-  const options: any = {
-    chart: {
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: "smooth",
-      width: 4,
-    },
-    colors: [colors.primary],
-    tooltip: {
-      theme: mode === "dark" ? "dark" : "light",
-    },
-    grid: getGridConfig(),
-
-    fill: {
-      type: "gradient",
-      colors: [colors.primary],
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.3,
-        opacityTo: 0.1,
-        stops: [50, 100, 0],
-      }
-    },
-    yaxis: getYAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    },
-  };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
-};
-
-export default AreaChart;
diff --git a/app/[locale]/(protected)/utility/profile/layout.tsx b/app/[locale]/(protected)/utility/profile/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/(protected)/utility/profile/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/utility/profile/page.tsx b/app/[locale]/(protected)/utility/profile/page.tsx
deleted file mode 100644
index af639692..00000000
--- a/app/[locale]/(protected)/utility/profile/page.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { Icon } from "@/components/ui/icon";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-import AreaChart from "./area-chart";
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-const profile = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="space-y-5 ">
-        <Card className=" p-6 pb-10 md:pt-[84px] pt-10 rounded-lg  lg:flex lg:space-y-0 space-y-6 justify-between items-end relative z-[1]">
-          <div className="bg-default-900 dark:bg-default-400 absolute left-0 top-0 md:h-1/2 h-[150px] w-full z-[-1] rounded-t-lg"></div>
-          <div className="profile-box flex-none md:text-start text-center">
-            <div className="md:flex items-end md:space-x-6 rtl:space-x-reverse">
-              <div className="flex-none">
-                <div className="md:h-[186px] md:w-[186px] h-[140px] w-[140px] md:ml-0 md:mr-0 ml-auto mr-auto md:mb-0 mb-4 rounded-full ring-4 dark:ring-default-700 ring-default-50 relative">
-                  <Image
-                    width={300}
-                    height={300}
-                    src="/images/users/user-1.jpg"
-                    alt=""
-                    className="w-full h-full object-cover rounded-full"
-                  />
-                  <Link
-                    href="#"
-                    className="absolute right-2 h-8 w-8 bg-default-50 text-default-600 rounded-full shadow-sm flex flex-col items-center justify-center md:top-[140px] top-[100px]"
-                  >
-                    <Icon icon="heroicons:pencil-square" />
-                  </Link>
-                </div>
-              </div>
-              <div className="flex-1">
-                <div className="text-2xl font-medium text-default-900  mb-[3px]">
-                  Albert Flores
-                </div>
-                <div className="text-sm font-light text-default-600 ">
-                  Front End Developer
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="profile-info-500 md:flex md:text-start text-center flex-1 max-w-[516px] md:space-y-0 space-y-4">
-            <div className="flex-1">
-              <div className="text-base text-default-900  font-medium mb-1">
-                $32,400
-              </div>
-              <div className="text-sm text-default-600 font-light ">
-                Total Balance
-              </div>
-            </div>
-
-            <div className="flex-1">
-              <div className="text-base text-default-900  font-medium mb-1">
-                200
-              </div>
-              <div className="text-sm text-default-600 font-light ">
-                Board Card
-              </div>
-            </div>
-
-            <div className="flex-1">
-              <div className="text-base text-default-900 font-medium mb-1">
-                3200
-              </div>
-              <div className="text-sm text-default-600 font-light">
-                Calender Events
-              </div>
-            </div>
-          </div>
-        </Card>
-        <div className="grid grid-cols-12 gap-6">
-          <div className="lg:col-span-4 col-span-12">
-            <Card title="Info">
-              <CardHeader className="border-b">
-                <CardTitle className="text-xl font-normal">Info</CardTitle>
-              </CardHeader>
-              <CardContent className="pt-4">
-                <ul className="list space-y-8">
-                  <li className="flex space-x-3 rtl:space-x-reverse">
-                    <div className="flex-none text-2xl text-default-600 ">
-                      <Icon icon="heroicons:envelope" />
-                    </div>
-                    <div className="flex-1">
-                      <div className="uppercase text-xs text-default-500  mb-1 leading-[12px]">
-                        EMAIL
-                      </div>
-                      <a
-                        href="mailto:someone@example.com"
-                        className="text-base text-default-600 "
-                      >
-                        info@dashcode.com
-                      </a>
-                    </div>
-                  </li>
-
-                  <li className="flex space-x-3 rtl:space-x-reverse">
-                    <div className="flex-none text-2xl text-default-600 ">
-                      <Icon icon="heroicons:phone-arrow-up-right" />
-                    </div>
-                    <div className="flex-1">
-                      <div className="uppercase text-xs text-default-500  mb-1 leading-[12px]">
-                        PHONE
-                      </div>
-                      <a
-                        href="tel:0189749676767"
-                        className="text-base text-default-600 "
-                      >
-                        +1-202-555-0151
-                      </a>
-                    </div>
-                  </li>
-
-                  <li className="flex space-x-3 rtl:space-x-reverse">
-                    <div className="flex-none text-2xl text-default-600">
-                      <Icon icon="heroicons:map" />
-                    </div>
-                    <div className="flex-1">
-                      <div className="uppercase text-xs text-default-500 mb-1 leading-[12px]">
-                        LOCATION
-                      </div>
-                      <div className="text-base text-default-600 ">
-                        Home# 320/N, Road# 71/B, Mohakhali, Dhaka-1207,
-                        Bangladesh
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </CardContent>
-            </Card>
-          </div>
-          <div className="lg:col-span-8 col-span-12">
-            <Card title="Info">
-              <CardHeader className="border-b">
-                <CardTitle className="text-xl font-normal">
-                  User Overview
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="pt-4">
-                <AreaChart height={190} />
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default profile;
diff --git a/app/[locale]/(protected)/utility/settings/layout.tsx b/app/[locale]/(protected)/utility/settings/layout.tsx
deleted file mode 100644
index a490cd7d..00000000
--- a/app/[locale]/(protected)/utility/settings/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Dashcode Next Js",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/(protected)/utility/settings/page.tsx b/app/[locale]/(protected)/utility/settings/page.tsx
deleted file mode 100644
index aec323d2..00000000
--- a/app/[locale]/(protected)/utility/settings/page.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/components/ui/card";
-import { Icon } from "@/components/ui/icon";
-import { Link } from '@/i18n/routing';
-import SiteBreadcrumb from "@/components/site-breadcrumb";
-
-const settings = () => {
-  return (
-    <div>
-      <SiteBreadcrumb />
-      <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6">
-        <Card>
-          <CardHeader>
-            <div className="flex gap-3 items-center">
-              <div className="flex-none h-8 w-8 rounded-full bg-default-800  text-default-300 flex flex-col items-center justify-center text-lg">
-                <Icon icon="heroicons:building-office-2" />
-              </div>
-              <div className="flex-1 text-base text-default-900  font-medium">
-                Company Settings
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="text-default-600  text-sm">
-              Set up your company profile, add your company logo, and more
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Link
-              href="#"
-              className="inline-flex items-center gap-3 text-sm capitalize font-medium text-default-600 "
-            >
-              <span>Chnage Settings</span> <Icon icon="heroicons:arrow-right" />
-            </Link>
-          </CardFooter>
-        </Card>
-        <Card>
-          <CardHeader>
-            <div className="flex gap-3 items-center">
-              <div className="flex-none h-8 w-8 rounded-full bg-primary-500 text-default-300 flex flex-col items-center justify-center text-lg">
-                <Icon icon="heroicons:credit-card" />
-              </div>
-              <div className="flex-1 text-base text-default-900  font-medium">
-                Payment Settings
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="text-default-600  text-sm">
-              Connect your bank account to your company profile, and more
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Link
-              href="#"
-              className="inline-flex items-center gap-3 text-sm capitalize font-medium text-default-600 "
-            >
-              <span>Chnage Settings</span> <Icon icon="heroicons:arrow-right" />
-            </Link>
-          </CardFooter>
-        </Card>
-        <Card>
-          <CardHeader>
-            <div className="flex gap-3 items-center">
-              <div className="flex-none h-8 w-8 rounded-full bg-success text-white flex flex-col items-center justify-center text-lg">
-                <Icon icon="heroicons:users" />
-              </div>
-              <div className="flex-1 text-base text-default-900  font-medium">
-                Profile Settings
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="text-default-600  text-sm">
-              Connect your bank account to your company profile, and more
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Link
-              href="#"
-              className="inline-flex items-center gap-3 text-sm capitalize font-medium text-default-600 "
-            >
-              <span>Chnage Settings</span> <Icon icon="heroicons:arrow-right" />
-            </Link>
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default settings;
diff --git a/app/[locale]/auth/coming-soon/layout.tsx b/app/[locale]/auth/coming-soon/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/coming-soon/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/coming-soon/page.tsx b/app/[locale]/auth/coming-soon/page.tsx
deleted file mode 100644
index 15fa2224..00000000
--- a/app/[locale]/auth/coming-soon/page.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-
-import Logo from "@/components/partials/auth/logo";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import { Input } from "@/components/ui/input";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-
-const ComingSoonPage = () => {
-  return (
-    <div className="min-h-screen">
-      <div className="xl:absolute left-0 top-0 w-full">
-        <div className="flex flex-wrap justify-between items-center py-6 container">
-          <Link href="/" className="inline-block">
-            <Logo />
-          </Link>
-          <Button size="sm" variant="outline">
-            Contact us
-          </Button>
-        </div>
-      </div>
-      <div className="container">
-        <div className="flex justify-between flex-wrap items-center min-h-screen">
-          <div className="max-w-[500px] space-y-4 flex-1">
-            <div className="relative flex space-x-3 items-center text-2xl text-default-900 ">
-              <span className="inline-block w-[25px] bg-default-500 h-[1px]"></span>
-              <span>Coming soon</span>
-            </div>
-            <div className="xl:text-[70px] xl:leading-[70px] text-4xl font-semibold text-default-900 ">
-              Get notified when we launch
-            </div>
-            <p className="font-normal text-default-600  max-w-[400px]">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt.
-            </p>
-            <div className=" flex items-center px-3 rounded bg-default-200 dark:bg-default-800">
-              <Input
-                type="text"
-                placeholder="Enter your email"
-                className="flex-1 bg-transparent h-full block w-full py-6 placeholder:text-secondary-500 focus:border-0 text-base focus:outline-none focus:ring-0 border-none"
-              />
-              <div className="flex-none">
-                <Button type="button" className=" px-6">
-                  Notify me
-                </Button>
-              </div>
-            </div>
-            <div className="text-sm text-default-500 ">
-              *Don’t worry we will not spam you :
-            </div>
-          </div>
-          <div>
-            <Image
-              width={300}
-              height={300}
-              src="/images/svg/img-1.svg"
-              alt=""
-              className="w-full h-full"
-            />
-          </div>
-        </div>
-      </div>
-      <div className="xl:fixed bottom-0 w-full">
-        <div className="container">
-          <div className="md:flex justify-between items-center flex-wrap space-y-4 py-6">
-            <div>
-              <ul className="flex md:justify-start justify-center gap-3">
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:facebook" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:twitter" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:linkedin2" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:google" />
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <ul className="flex md:justify-start justify-center gap-3">
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500  text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Privacy policy
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500  text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Faq
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500  text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Email us
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ComingSoonPage;
diff --git a/app/[locale]/auth/forgot-password/layout.tsx b/app/[locale]/auth/forgot-password/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/forgot-password/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/forgot-password/page.tsx b/app/[locale]/auth/forgot-password/page.tsx
deleted file mode 100644
index 7aaa1ffe..00000000
--- a/app/[locale]/auth/forgot-password/page.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Link } from "@/i18n/routing";
-import ForgotPass from "@/components/partials/auth/forgot-pass";
-import Image from "next/image";
-import Logo from "@/components/partials/auth/logo";
-
-const ForgotPassPage = () => {
-  return (
-    <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
-      <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-        <div className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50">
-          <div className="max-w-[520px] pt-16 ps-20 ">
-            <Link href="/" className="mb-6 inline-block">
-              <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
-            </Link>
-          </div>
-          <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-            <Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
-          </div>
-        </div>
-        <div className="flex-1 relative dark:bg-default-100 bg-white">
-          <div className=" h-full flex flex-col ">
-            <div className="max-w-[524px] mx-auto  w-full  md:px-[42px] md:py-[44px] p-7 text-2xl text-default-900  mb-3 flex flex-col justify-center h-full">
-              <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                {/* <Link href="/">
-                  <Logo />
-                </Link> */}
-              </div>
-              <div className="text-center 2xl:mb-10 mb-5">
-                <h4 className="font-medium mb-4">Forgot Your Password?</h4>
-              </div>
-              <div className="font-normal text-base text-default-500  text-center px-2 bg-default-100 rounded py-3 mb-4 mt-10">Enter your Username and instructions will be sent to you!</div>
-
-              <ForgotPass />
-              <div className="md:max-w-[345px] mx-auto font-normal text-default-500  2xl:mt-12 mt-8 uppercase text-sm">
-                Forget It,
-                <Link href="/auth" className="text-default-900  font-medium hover:underline">
-                  Send me Back
-                </Link>
-                to The Sign In
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ForgotPassPage;
diff --git a/app/[locale]/auth/forgot-password2/layout.tsx b/app/[locale]/auth/forgot-password2/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/forgot-password2/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/forgot-password2/page.tsx b/app/[locale]/auth/forgot-password2/page.tsx
deleted file mode 100644
index fc1b2ce7..00000000
--- a/app/[locale]/auth/forgot-password2/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Link } from '@/i18n/routing';
-import ForgotPass from "@/components/partials/auth/forgot-pass";
-import Image from "next/image";
-import Copyright from "@/components/partials/auth/copyright";
-import Logo from "@/components/logo";
-
-const ForgotPass2 = () => {
-  return (
-    <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
-      <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-        <div className="flex-1 relative">
-          <div className=" h-full flex flex-col bg-default-50">
-            <div className="max-w-[524px] mx-auto  w-full  md:px-[42px] md:py-[44px] p-7 text-2xl text-default-900  mb-3 flex flex-col justify-center h-full">
-              <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                <Link href="/">
-                  <Logo />
-                </Link>
-              </div>
-              <div className="text-center 2xl:mb-10 mb-5">
-                <h4 className="font-medium mb-4">Forgot Your Password?</h4>
-                <div className="text-default-500 text-base">
-                  Reset Password with Dashcode.
-                </div>
-              </div>
-              <div className="font-normal text-base text-default-500 text-center px-2 bg-default-100  rounded py-3 mb-4 mt-10">
-                Enter your Email and instructions will be sent to you!
-              </div>
-
-              <ForgotPass />
-              <div className="md:max-w-[345px] mx-auto font-normal text-default-500 2xl:mt-12 mt-8 uppercase text-sm">
-                Forget It,
-                <Link
-                  href="/"
-                  className="text-default-900  font-medium hover:underline"
-                >
-                  Send me Back
-                </Link>
-                to The Sign In
-              </div>
-            </div>
-            <div className="text-xs font-normal text-default-500  z-[999] pb-10 text-center">
-              <Copyright />
-            </div>
-          </div>
-        </div>
-        <div
-          className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
- bg-cover bg-no-repeat bg-center"
-          style={{
-            backgroundImage: `url(/images/all-img/login-bg.png)`,
-          }}
-        >
-          <div className="flex flex-col h-full justify-center">
-            <div className="flex-1 flex flex-col justify-center items-center">
-              <Link href="/">
-                <Image
-                  height={300}
-                  width={300}
-                  src="/images/logo/logo-white.svg"
-                  alt=""
-                  className="mb-10 w-36"
-                />
-              </Link>
-            </div>
-            <div>
-              <div
-                className="text-[40px] leading-[48px] text-white
-
- max-w-[525px] mx-auto pb-20 text-center"
-              >
-                Unlock your Project
-                <span className="text-white font-bold ms-1">performance</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ForgotPass2;
diff --git a/app/[locale]/auth/forgot-password3/layout.tsx b/app/[locale]/auth/forgot-password3/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/forgot-password3/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/forgot-password3/page.tsx b/app/[locale]/auth/forgot-password3/page.tsx
deleted file mode 100644
index 49cd3a3d..00000000
--- a/app/[locale]/auth/forgot-password3/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Link } from '@/i18n/routing';
-import ForgotPass from "@/components/partials/auth/forgot-pass";
-import Logo from "@/components/logo";
-
-const ForgotPass3 = () => {
-  return (
-    <div
-      className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full bg-cover bg-no-repeat bg-center"
-      style={{
-        backgroundImage: `url(/images/all-img/login-bg.png)`,
-      }}
-    >
-      <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-        <div
-          className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
-s lg:w-1/2"
-        >
-          <div className="flex justify-center items-center min-h-screen">
-            <Link href="/" className="">
-              <Logo />
-            </Link>
-          </div>
-        </div>
-        <div className="lg:w-1/2 w-full flex flex-col items-center justify-center">
-          <div className="bg-default-50  relative h-auto  lg:mr-[150px] mr-auto p-10 md:rounded-md max-w-[520px] w-full ml-auto text-2xl text-default-900  mb-3">
-            <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-              <Link href="/">
-                <Logo />
-              </Link>
-            </div>
-            <div className="text-center 2xl:mb-10 mb-5">
-              <h4 className="font-medium mb-4">Forgot Your Password?</h4>
-              <div className="text-default-500  text-base">
-                Reset Password with Dashcode.
-              </div>
-            </div>
-            <div className="font-normal text-base text-default-500  text-center px-2 bg-default-100 rounded py-3 mb-4 mt-10">
-              Enter your Email and instructions will be sent to you!
-            </div>
-
-            <ForgotPass />
-            <div className="md:max-w-[345px] mx-auto font-normal text-default-500  2xl:mt-12 mt-8 uppercase text-sm">
-              Forget It,
-              <Link
-                href="/"
-                className="text-default-900  font-medium hover:underline"
-              >
-                Send me Back
-              </Link>
-              to The Sign In
-            </div>
-          </div>
-        </div>
-        <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-          Unlock your Project{" "}
-          <span className="text-white font-bold ms-1">performance</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ForgotPass3;
diff --git a/app/[locale]/auth/lock-screen/layout.tsx b/app/[locale]/auth/lock-screen/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/lock-screen/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/lock-screen/page.tsx b/app/[locale]/auth/lock-screen/page.tsx
deleted file mode 100644
index e3f0b6b2..00000000
--- a/app/[locale]/auth/lock-screen/page.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Link } from '@/i18n/routing';
-import Lock from "@/components/partials/auth/lock";
-import Copyright from "@/components/partials/auth/copyright";
-import Image from "next/image";
-import Logo from "@/components/partials/auth/logo";
-const LockScreen = () => {
-  return (
-    <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
-      <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-        <div
-          className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
- relative z-[1] bg-default-50 "
-        >
-          <div className="max-w-[520px] pt-20 ps-20">
-            <Link href="/" className="mb-6 inline-block">
-              <Logo />
-            </Link>
-            <h4>
-              Unlock your Project{" "}
-              <span className="text-default-800 font-bold ms-2">
-                performance
-              </span>
-            </h4>
-          </div>
-          <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-            <Image
-              width={300}
-              height={300}
-              src="/images/auth/ils1.svg"
-              alt=""
-              className="h-full w-full object-contain"
-            />
-          </div>
-        </div>
-        <div className="flex-1 relative dark:bg-default-100 bg-white">
-          <div className=" h-full flex flex-col ">
-            <div className="max-w-[524px] mx-auto  w-full  md:px-[42px] md:py-[44px] p-7 text-2xl text-default-900  mb-3 flex flex-col justify-center h-full">
-              <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                <Link href="/">
-                  <Logo />
-                </Link>
-              </div>
-              <div className="text-center mb-10">
-                <h4 className="font-medium mb-4">Lock Screen</h4>
-                <div className="text-default-500 text-base">
-                  Enter your password to unlock the screen!
-                </div>
-              </div>
-              <div className="author-bio text-center mb-8">
-                <div className="h-14 w-14 mx-auto rounded-full">
-                  <Image
-                    width={300}
-                    height={300}
-                    src="/images/all-img/user-big.png"
-                    alt=""
-                    className="w-full h-full object-cover block"
-                  />
-                </div>
-                <div className="text-default-900  text-base font-medium mt-4">
-                  Kathryn Murphy
-                </div>
-              </div>
-              <Lock />
-
-              <div className="md:max-w-[345px] mx-auto font-normal text-default-500  mt-12 uppercase text-sm">
-                Not you ? return
-                <Link
-                  href="/"
-                  className="text-default-900  font-medium hover:underline"
-                >
-                  Sign In
-                </Link>
-              </div>
-            </div>
-            <div className="text-xs font-normal text-default-500 z-[999] pb-10 text-center">
-              <Copyright />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LockScreen;
diff --git a/app/[locale]/auth/lock-screen2/layout.tsx b/app/[locale]/auth/lock-screen2/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/lock-screen2/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/lock-screen2/page.tsx b/app/[locale]/auth/lock-screen2/page.tsx
deleted file mode 100644
index 6909d3e9..00000000
--- a/app/[locale]/auth/lock-screen2/page.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Link } from '@/i18n/routing';
-import Lock from "@/components/partials/auth/lock";
-import Image from "next/image";
-import Logo from "@/components/logo";
-
-const LockScreen2 = () => {
-  return (
-    <div
-      className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full bg-cover bg-no-repeat bg-center"
-      style={{
-        backgroundImage: `url(/images/all-img/login-bg.png)`,
-      }}
-    >
-      <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-        <div
-          className=" flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
-s lg:w-1/2 lg:block hidden"
-        >
-          <div className="flex justify-center items-center min-h-screen">
-            <Link href="/" className="">
-              <Image
-                width={300}
-                height={300}
-                src="/images/logo/logo-white.svg"
-                alt=""
-                className="mb-10 w-36"
-              />
-            </Link>
-          </div>
-        </div>
-        <div className="lg:w-1/2 w-full flex flex-col items-center justify-center">
-          <div className="bg-default-50  relative h-auto  lg:mr-[150px] mr-auto p-10 md:rounded-md max-w-[520px] w-full ml-auto text-2xl text-default-900  mb-3">
-            <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-              <Link href="/">
-                <Logo />
-              </Link>
-            </div>
-            <div className="text-center 2xl:mb-10 mb-5">
-              <h4 className="font-medium mb-4">Forgot Your Password?</h4>
-              <div className="text-default-500 text-base">
-                Reset Password with Dashcode.
-              </div>
-            </div>
-            <div className="font-normal text-base text-default-500 text-center px-2 bg-default-100 rounded py-3 mb-4 mt-10">
-              Enter your Email and instructions will be sent to you!
-            </div>
-
-            <Lock />
-            <div className="md:max-w-[345px] mx-auto font-normal text-default-500 2xl:mt-12 mt-8 uppercase text-sm">
-              Forget It,
-              <Link
-                href="/login"
-                className="text-default-900  font-medium hover:underline"
-              >
-                Send me Back
-              </Link>
-              to The Sign In
-            </div>
-          </div>
-        </div>
-        <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-          Unlock your Project{" "}
-          <span className="text-white font-bold ms-1">performance</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LockScreen2;
diff --git a/app/[locale]/auth/lock-screen3/layout.tsx b/app/[locale]/auth/lock-screen3/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/lock-screen3/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/lock-screen3/page.tsx b/app/[locale]/auth/lock-screen3/page.tsx
deleted file mode 100644
index 57e38078..00000000
--- a/app/[locale]/auth/lock-screen3/page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import Lock from "@/components/partials/auth/lock";
-import { Link } from '@/i18n/routing';
-import Image from "next/image";
-import Logo from "@/components/logo";
-
-const LockScreen3 = () => {
-  return (
-    <div
-      className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full bg-cover bg-no-repeat bg-center"
-      style={{
-        backgroundImage: `url(/images/all-img/login-bg.png)`,
-      }}
-    >
-      <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-        <div
-          className="flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
-s lg:w-1/2 lg:block hidden"
-        >
-          <div className="flex justify-center items-center min-h-screen">
-            <Link href="/" className="">
-              <Image
-                height={300}
-                width={300}
-                src="/images/logo/logo-white.svg"
-                alt=""
-                className="mb-10"
-              />
-            </Link>
-          </div>
-        </div>
-        <div className="lg:w-1/2 w-full flex flex-col items-center justify-center">
-          <div className="bg-default-50  relative h-auto  lg:mr-[150px] mr-auto p-10 md:rounded-md max-w-[520px] w-full ml-auto text-2xl text-default-900  mb-3">
-            <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-              <Link href="/">
-                <Logo />
-              </Link>
-            </div>
-            <div className="text-center mb-10">
-              <h4 className="font-medium mb-4">Lock Screen</h4>
-              <div className="text-default-500 text-base">
-                Enter your password to unlock the screen!
-              </div>
-            </div>
-            <div className="author-bio text-center mt-10 mb-8">
-              <div className="h-14 w-14 mx-auto rounded-full">
-                <Image
-                  height={300}
-                  width={300}
-                  src="/images/all-img/user-big.png"
-                  alt=""
-                  className="w-full h-full object-cover block"
-                />
-              </div>
-              <div className="text-default-900  text-base font-medium mt-4">
-                Kathryn Murphy
-              </div>
-            </div>
-            <Lock />
-
-            <div className="text-sm mx-auto w-full text-center font-normal text-default-500 mt-12 uppercase">
-              Not you ? return
-              <Link
-                href="/"
-                className="text-default-900  font-medium hover:underline"
-              >
-                Sign In
-              </Link>
-            </div>
-          </div>
-        </div>
-        <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-          Unlock your Project{" "}
-          <span className="text-white font-bold ms-1">performance</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LockScreen3;
diff --git a/app/[locale]/auth/login/layout.tsx b/app/[locale]/auth/login/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/login/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/login/page.tsx b/app/[locale]/auth/login/page.tsx
deleted file mode 100644
index 640e4178..00000000
--- a/app/[locale]/auth/login/page.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Link } from '@/i18n/routing';
-import LoginForm from "@/components/partials/auth/login-form";
-import Image from "next/image";
-import Social from "@/components/partials/auth/social";
-import Copyright from "@/components/partials/auth/copyright";
-import Logo from "@/components/partials/auth/logo";
-const Login = ({ params: { locale } }: { params: { locale: string } }) => {
-  return (
-    <>
-      <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
-        <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-          <div
-            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
- relative z-[1] bg-default-50"
-          >
-            <div className="max-w-[520px] pt-20 ps-20 ">
-              <Link href="/" className="mb-6 inline-block">
-                <Logo />
-              </Link>
-              <h4>
-                Unlock your Project
-                <span className="text-default-800 font-bold ms-2">
-                  performance
-                </span>
-              </h4>
-            </div>
-            <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-              <Image
-                src="/images/auth/ils1.svg"
-                alt=""
-                width={300}
-                height={300}
-                className="mb-10 w-full h-full"
-              />
-            </div>
-          </div>
-          <div className="flex-1 relative">
-            <div className=" h-full flex flex-col  dark:bg-default-100 bg-white">
-              <div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7  mx-auto w-full text-2xl text-default-900  mb-3 h-full flex flex-col justify-center">
-                <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                  <Link href="/">
-                    <Logo />
-                  </Link>
-                </div>
-                <div className="text-center 2xl:mb-10 mb-4">
-                  <h4 className="font-medium">Sign in</h4>
-                  <div className="text-default-500 text-base">
-                    Sign in to your account to start using Dashcode
-                  </div>
-                </div>
-                <LoginForm />
-                <div className="relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
-                  <div className="absolute inline-block bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm text-default-500 font-normal">
-                    Or continue with
-                  </div>
-                </div>
-                <div className="max-w-[242px] mx-auto mt-8 w-full">
-                  <Social locale={locale} />
-                </div>
-                <div className="md:max-w-[345px] mx-auto font-normal text-default-500 mt-12 uppercase text-sm">
-                  Don’t have an account?{" "}
-                  <Link
-                    href="/auth/register"
-                    className="text-default-900  font-medium hover:underline"
-                  >
-                    Sign up
-                  </Link>
-                </div>
-              </div>
-              <div className="text-xs font-normal text-default-500  z-[999] pb-10 text-center">
-                <Copyright />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Login;
diff --git a/app/[locale]/auth/login2/layout.tsx b/app/[locale]/auth/login2/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/login2/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/login2/page.tsx b/app/[locale]/auth/login2/page.tsx
deleted file mode 100644
index fa107876..00000000
--- a/app/[locale]/auth/login2/page.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Link } from '@/i18n/routing';
-import LoginForm from "@/components/partials/auth/login-form";
-import Social from "@/components/partials/auth/social";
-import Image from "next/image";
-import Copyright from "@/components/partials/auth/copyright";
-import Logo from "@/components/logo";
-const Login2 = () => {
-  return (
-    <>
-      <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
-        <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-          <div className="flex-1 relative">
-            <div className=" h-full flex flex-col bg-default-50">
-              <div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7  mx-auto w-full text-2xl text-default-900  mb-3 h-full flex flex-col justify-center">
-                <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                  <Link href="/">
-                    <Logo />
-                  </Link>
-                </div>
-                <div className="text-center 2xl:mb-10 mb-4">
-                  <h4 className="font-medium">Sign in</h4>
-                  <div className="text-default-500  text-base">
-                    Sign in to your account to start using Dashcode
-                  </div>
-                </div>
-                <LoginForm />
-                <div className=" relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
-                  <div className=" absolute inline-block  bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm  text-default-500  font-normal ">
-                    Or continue with
-                  </div>
-                </div>
-                <div className="max-w-[242px] mx-auto mt-8 w-full">
-                  <Social locale="en" />
-                </div>
-                <div className="md:max-w-[345px] mt-6 mx-auto font-normal text-default-500 md:mt-12 uppercase text-sm">
-                  Don’t have an account?{" "}
-                  <Link
-                    href="/register"
-                    className="text-default-900  font-medium hover:underline"
-                  >
-                    Sign up
-                  </Link>
-                </div>
-              </div>
-              <div className="text-xs font-normal text-default-500 z-[999] pb-10 text-center">
-                <Copyright />
-              </div>
-            </div>
-          </div>
-          <div
-            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
- bg-cover bg-no-repeat bg-center"
-            style={{
-              backgroundImage: `url(/images/all-img/login-bg.png)`,
-            }}
-          >
-            <div className="flex flex-col h-full justify-center">
-              <div className="flex-1 flex flex-col justify-center items-center">
-                <Link href="/">
-                  <Image
-                    src="/images/logo/logo-white.svg"
-                    alt=""
-                    width={300}
-                    height={300}
-                    className="mb-10  w-36"
-                  />
-                </Link>
-              </div>
-              <div>
-                <div
-                  className="text-[40px] leading-[48px] text-white
-
- max-w-[525px] mx-auto pb-20 text-center"
-                >
-                  Unlock your Project{" "}
-                  <span className="text-white font-bold ms-1">performance</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Login2;
diff --git a/app/[locale]/auth/login3/layout.tsx b/app/[locale]/auth/login3/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/login3/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/login3/page.tsx b/app/[locale]/auth/login3/page.tsx
deleted file mode 100644
index 077bfcc1..00000000
--- a/app/[locale]/auth/login3/page.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Link } from '@/i18n/routing';
-import Social from "@/components/partials/auth/social";
-import LoginForm from "@/components/partials/auth//login-form";
-import Image from "next/image";
-import Logo from "@/components/logo";
-
-const Login3 = () => {
-  return (
-    <>
-      <div
-        className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full bg-cover bg-no-repeat bg-center"
-        style={{
-          backgroundImage: `url(/images/all-img/page-bg.png)`,
-        }}
-      >
-        <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-          <div
-            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
-s lg:w-1/2"
-          >
-            <div className="flex justify-center items-center min-h-screen">
-              <Link href="/" className="">
-                <Image
-                  src="/images/logo/logo-white.svg"
-                  alt=""
-                  width={300}
-                  height={300}
-                  className="mb-10 h-40 w-36"
-                />
-              </Link>
-            </div>
-          </div>
-          <div className="lg:w-1/2 w-full flex flex-col items-center justify-center">
-            <div className="bg-default-50  relative h-auto  lg:mr-[150px] mr-auto p-10 md:rounded-md max-w-[520px] w-full ml-auto text-2xl text-default-900  mb-3">
-              <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                <Link href="/">
-                  <Logo />
-                </Link>
-              </div>
-              <div className="text-center 2xl:mb-10 mb-5">
-                <h4 className="font-medium">Sign In</h4>
-                <div className="text-default-500  text-base">
-                  Sign in to your account to start using Dashcode
-                </div>
-              </div>
-              <LoginForm />
-              <div className=" relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
-                <div className=" absolute inline-block  bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm  text-default-500 font-normal ">
-                  Or continue with
-                </div>
-              </div>
-              <div className="max-w-[242px] mx-auto mt-8 w-full">
-                <Social locale="en" />
-              </div>
-              <div className="mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm text-center">
-                Already registered?
-                <Link
-                  href="/"
-                  className="text-default-900 font-medium hover:underline"
-                >
-                  Sign In
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-            Unlock your Project{" "}
-            <span className="text-white font-bold ms-1">performance</span>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Login3;
diff --git a/app/[locale]/auth/page.tsx b/app/[locale]/auth/page.tsx
index 48617310..4519f933 100644
--- a/app/[locale]/auth/page.tsx
+++ b/app/[locale]/auth/page.tsx
@@ -47,39 +47,8 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
           <div className="flex-1 relative">
             <div className=" h-full flex flex-col  dark:bg-default-100 bg-white">
               <div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7  mx-auto w-full text-2xl text-default-900  mb-3 h-full flex flex-col justify-center">
-                {/* <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                  <Link href="/">
-                    <Logo />
-                  </Link>
-                </div> */}
-                {/* <div className="text-left 2xl:mb-10 mb-4 mt-10">
-                  <h4 className="font-semibold text-3xl text-left">{t("logInPlease", { defaultValue: "Log In Please" })}</h4>
-                  <div className="text-default-500 text-base">
-                    {t("acc", { defaultValue: "Acc" })} <span className="text-red-500">{t("reg", { defaultValue: "Reg" })}</span>
-                  </div>
-                </div> */}
                 <LoginForm />
-                {/* <div className="relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
-                  <div className="absolute inline-block bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm text-default-500 font-normal">
-                    Or continue with
-                  </div>
-                </div> */}
-                {/* <div className="max-w-[242px] mx-auto mt-8 w-full">
-                  <Social locale={locale} />
-                </div> */}
-                {/* <div className="md:max-w-[345px] mx-auto font-normal text-default-500 mt-12 uppercase text-sm">
-                  Don’t have an account?{" "}
-                  <Link
-                    href="/auth/register"
-                    className="text-default-900  font-medium hover:underline"
-                  >
-                    Sign up
-                  </Link>
-                </div> */}
               </div>
-              {/* <div className="text-xs font-normal text-default-500  z-[999] pb-10 text-center">
-                <Copyright />
-              </div> */}
             </div>
           </div>
         </div>
diff --git a/app/[locale]/auth/register/layout.tsx b/app/[locale]/auth/register/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/register/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/register/page.tsx b/app/[locale]/auth/register/page.tsx
deleted file mode 100644
index 2268e9f0..00000000
--- a/app/[locale]/auth/register/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Link } from '@/i18n/routing';
-import RegForm from "@/components/partials/auth/reg-form";
-import Image from "next/image";
-import Copyright from "@/components/partials/auth/copyright";
-import Logo from "@/components/partials/auth/logo";
-import Social from "@/components/partials/auth/social";
-const Register = () => {
-  return (
-    <>
-      <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
-        <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-          <div
-            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
- relative z-[1] bg-default-50"
-          >
-            <div className="max-w-[520px] pt-20 ps-20">
-              <Link href="/" className="mb-6 inline-block">
-                <Logo />
-              </Link>
-
-              <h4>
-                Unlock your Project
-                <span className="text-default-800  font-bold ms-2">
-                  performance
-                </span>
-              </h4>
-            </div>
-            <div className="absolute left-0 bottom-[-130px] h-full w-full z-[-1]">
-              <Image
-                src="/images/auth/ils1.svg"
-                alt=""
-                width={300}
-                height={300}
-                className="mb-10 w-full h-full"
-              />
-            </div>
-          </div>
-          <div className="flex-1 relative dark:bg-default-100 bg-white ">
-            <div className=" h-full flex flex-col">
-              <div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7  mx-auto w-full text-2xl text-default-900  mb-3 h-full flex flex-col justify-center">
-                <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                  <Link href="/">
-                    <Logo />
-                  </Link>
-                </div>
-                <div className="text-center 2xl:mb-10 mb-5">
-                  <h4 className="font-medium">Sign up</h4>
-                  <div className="text-default-500  text-base">
-                    Create an account to start using Dashcode
-                  </div>
-                </div>
-                <RegForm />
-                <div className=" relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
-                  <div className=" absolute inline-block  bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm  text-default-500  font-normal ">
-                    Or continue with
-                  </div>
-                </div>
-                <div className="max-w-[242px] mx-auto mt-8 w-full">
-                  <Social locale={""} />
-                </div>
-                <div className="max-w-[225px] mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm">
-                  Already registered?
-                  <Link
-                    href="/login"
-                    className="text-default-900  font-medium hover:underline"
-                  >
-                    Sign In
-                  </Link>
-                </div>
-              </div>
-              <div className="text-xs font-normal text-default-500 z-[999] pb-10 text-center">
-                <Copyright />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Register;
diff --git a/app/[locale]/auth/register2/layout.tsx b/app/[locale]/auth/register2/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/register2/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/register2/page.tsx b/app/[locale]/auth/register2/page.tsx
deleted file mode 100644
index d26869fe..00000000
--- a/app/[locale]/auth/register2/page.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Link } from '@/i18n/routing';
-import RegForm from "@/components/partials/auth/reg-form";
-import Social from "@/components/partials/auth/social";
-import Image from "next/image";
-import Logo from "@/components/logo";
-
-// image import
-
-const Register2 = () => {
-  return (
-    <>
-      <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
-        <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-          <div className="flex-1 relative">
-            <div className=" h-full flex flex-col bg-default-50">
-              <div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7  mx-auto w-full text-2xl text-default-900  mb-3 h-full flex flex-col justify-center">
-                <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                  <Link href="/">
-                    <Logo />
-                  </Link>
-                </div>
-                <div className="text-center 2xl:mb-10 mb-5">
-                  <h4 className="font-medium">Sign up</h4>
-                  <div className="text-default-500  text-base">
-                    Create an account to start using Dashcode
-                  </div>
-                </div>
-                <RegForm />
-                <div className=" relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
-                  <div className=" absolute inline-block  bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm  text-default-500  font-normal ">
-                    Or continue with
-                  </div>
-                </div>
-                <div className="max-w-[242px] mx-auto mt-8 w-full">
-                  <Social locale="" />
-                </div>
-                <div className="max-w-[225px] mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm">
-                  Already registered?
-                  <Link
-                    href="/login"
-                    className="text-default-900  font-medium hover:underline"
-                  >
-                    Sign In
-                  </Link>
-                </div>
-              </div>
-              <div className="text-xs font-normal text-default-500 z-[999] pb-10 text-center">
-                Copyright 2021, Dashcode All Rights Reserved.
-              </div>
-            </div>
-          </div>
-          <div
-            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
- bg-cover bg-no-repeat bg-center"
-            style={{
-              backgroundImage: `url(/images/all-img/login-bg.png)`,
-            }}
-          >
-            <div className="flex flex-col h-full justify-center">
-              <div className="flex-1 flex flex-col justify-center items-center">
-                <Link href="/login">
-                  <Image
-                    width={300}
-                    height={300}
-                    src="/images/logo/logo-white.svg"
-                    alt=""
-                    className="mb-10 w-36"
-                  />
-                </Link>
-              </div>
-              <div>
-                <div
-                  className="text-[40px] leading-[48px] text-white
-
- max-w-[525px] mx-auto pb-20 text-center"
-                >
-                  Unlock your Project{" "}
-                  <span className="text-white font-bold ms-1">performance</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Register2;
diff --git a/app/[locale]/auth/register3/layout.tsx b/app/[locale]/auth/register3/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/register3/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/register3/page.tsx b/app/[locale]/auth/register3/page.tsx
deleted file mode 100644
index 410a4a34..00000000
--- a/app/[locale]/auth/register3/page.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Link } from '@/i18n/routing';
-import RegForm from "@/components/partials/auth/reg-form";
-import Social from "@/components/partials/auth//social";
-import Image from "next/image";
-import Logo from "@/components/logo";
-
-const Register3 = () => {
-  return (
-    <>
-      <div
-        className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full bg-cover bg-no-repeat bg-center"
-        style={{
-          backgroundImage: `url(/images/all-img/login-bg.png)`,
-        }}
-      >
-        <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-          <div
-            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
-s lg:w-1/2"
-          >
-            <div className="flex justify-center items-center min-h-screen">
-              <Link href="/" className="">
-                <Image
-                  width={300}
-                  height={300}
-                  src="/images/logo/logo-white.svg"
-                  alt=""
-                  className="mb-10 w-36"
-                />
-              </Link>
-            </div>
-          </div>
-          <div className="lg:w-1/2 w-full flex flex-col items-center justify-center">
-            <div className="bg-default-50  relative h-auto  lg:mr-[150px] mr-auto p-10 md:rounded-md max-w-[520px] w-full ml-auto text-2xl text-default-900  mb-3">
-              <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
-                <Link href="/">
-                  <Logo />
-                </Link>
-              </div>
-              <div className="text-center 2xl:mb-10 mb-5">
-                <h4 className="font-medium text-2xl text-default-900  mb-3">
-                  Sign up
-                </h4>
-                <div className="text-default-500  text-base">
-                  Create an account to start using Dashcode
-                </div>
-              </div>
-              <RegForm />
-              <div className=" relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
-                <div className=" absolute inline-block  bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm  text-default-500  font-normal ">
-                  Or continue with
-                </div>
-              </div>
-              <div className="max-w-[242px] mx-auto mt-8 w-full">
-                <Social locale="" />
-              </div>
-              <div className="max-w-[225px] mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm">
-                Already registered?
-                <Link
-                  href="/"
-                  className="text-default-900  font-medium hover:underline"
-                >
-                  Sign In
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-            Unlock your Project{" "}
-            <span className="text-white font-bold ms-1">performance</span>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Register3;
diff --git a/app/[locale]/auth/registration/page.tsx b/app/[locale]/auth/registration/page.tsx
deleted file mode 100644
index 803272da..00000000
--- a/app/[locale]/auth/registration/page.tsx
+++ /dev/null
@@ -1,1069 +0,0 @@
-"use client";
-
-import React from "react";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import Image from "next/image";
-import { close, error, loading, registerConfirm } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/routing";
-import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, requestOTP, saveInstitutes, verifyOTP } from "@/service/auth";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { useParams, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import * as Yup from "yup";
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
-import { Textarea } from "@/components/ui/textarea";
-import { Icon } from "@/components/ui/icon";
-import dynamic from "next/dynamic";
-import sanitizeHtml from "sanitize-html";
-import { useTranslations } from "next-intl";
-
-type Inputs = {
-  example: string;
-  exampleRequired: string;
-};
-
-const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
-  ssr: false,
-});
-
-const page = () => {
-  const params = useParams();
-  const [stepOneActive, setStepOneActive] = useState(true);
-  const [stepTwoActive, setStepTwoActive] = useState(false);
-  const [stepThreeActive, setStepThreeActive] = useState(false);
-  const [typePass, setTypePass] = useState("password");
-  const [typePassConf, setTypePassConf] = useState("password");
-  const searchParams = useSearchParams();
-  const [formProfile, setFormProfile] = useState(false);
-  const [journalistCertificate, setJournalistCertificate] = useState();
-  const [personilNRP, setPersonilNRP] = useState();
-  const [journalistData, setJournalistData] = useState<any>();
-  const [personilData, setPersonilData] = useState<any>();
-  const [userIdentity] = useState();
-  const [userIdentityValidate, setUserIdentityValidate] = useState("");
-  const [email, setEmail] = useState<any>();
-  const [emailValidate, setEmailValidate] = useState("");
-  const [otpValidate, setOtpValidate] = useState("");
-  const [password, setPassword] = useState("");
-  const [city, setCity] = useState([]);
-  const [isValidPassword, setIsValidPassword] = useState(false);
-  const MySwal = withReactContent(Swal);
-  const [isCustomActive, setIsCustomActive] = useState(false);
-  const [institusi, setInstitusi] = useState();
-  const [customInstituteName, setCustomInstituteName] = useState("");
-  const [institusiAddress, setInstitusiAddress] = useState<any>();
-  const [institution, setInstitution] = useState<any>([]);
-  const [province, setProvince] = useState<any>([]);
-  const router = useRouter();
-  const category = searchParams?.get("category");
-  const [districts, setDistricts] = useState([]);
-  const [, setAssociation] = useState<any>();
-  const [warningPassConf] = useState();
-  const [otpValue, setOtpValue] = useState("");
-  const t = useTranslations("LandingPage");
-
-  const [otp1, setOtp1] = useState();
-  const [otp2, setOtp2] = useState();
-  const [otp3, setOtp3] = useState();
-  const [otp4, setOtp4] = useState();
-  const [otp5, setOtp5] = useState();
-  const [otp6, setOtp6] = useState();
-
-  const nMinuteSeconds = 60;
-  const nSecondInMiliseconds = 1000;
-  const [, setRefreshTimer] = useState(false);
-
-  const [passwordType, setPasswordType] = React.useState("password");
-  const [passwordConf, setPasswordConf] = React.useState("password");
-
-  const togglePasswordType = () => {
-    setPasswordType((prevType) => (prevType === "password" ? "text" : "password"));
-    setPasswordConf((prevType) => (prevType === "same password" ? "text" : "same password"));
-  };
-
-  const validationSchema = Yup.object().shape({
-    firstName: Yup.string().required(t("nameEmpty", { defaultValue: "Name Empty" })),
-    username: Yup.string().required(t("usernameEmpty", { defaultValue: "Username Empty" })),
-    phoneNumber: Yup.string().required(t("numberEmpty", { defaultValue: "Number Empty" })),
-    address: Yup.string().required(t("addressEmpty", { defaultValue: "Address Empty" })),
-    email: Yup.string().required(t("emailEmpty", { defaultValue: "Email Empty" })),
-    provinsi: Yup.string().required(t("provinceEmpty", { defaultValue: "Province Empty" })),
-    kota: Yup.string().required(t("cityEmpty", { defaultValue: "City Empty" })),
-    kecamatan: Yup.string().required(t("subdistrictEmpty", { defaultValue: "Subdistrict Empty" })),
-    password: Yup.string().required(t("passwordEmpty", { defaultValue: "Password Empty" })),
-    passwordConf: Yup.string().required(t("confirmEmpty", { defaultValue: "Confirm Empty" })),
-  });
-
-  const formOptions = {
-    resolver: yupResolver(validationSchema),
-  };
-
-  const { register, handleSubmit, formState, setValue } = useForm<any>(formOptions);
-
-  const convertMinutesToMiliseconds = (minute: any) => minute * nMinuteSeconds * nSecondInMiliseconds;
-
-  const convertMilisecondsToHour = (miliseconds: any) => new Date(miliseconds).toISOString().slice(17, -5);
-
-  let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
-  let interval: any;
-
-  const setValUsername = (e: any) => {
-    const uname = e.replaceAll(/[^\w.-]/g, "");
-    setValue("username", uname.toLowerCase());
-  };
-
-  const setValPassword = (e: any) => {
-    setValue("password", e);
-    setPassword(e);
-  };
-
-  const setValPasswordConf = (e: any) => {
-    setPasswordConf(e);
-  };
-
-  const { errors }: any = formState;
-
-  async function save(data: any) {
-    // loading();
-    let institutionId = 1;
-
-    if (Number(category) == 6) {
-      const dataInstitution =
-        isCustomActive == true
-          ? {
-              name: customInstituteName,
-              address: institusiAddress,
-              categoryRoleId: Number(category),
-            }
-          : {
-              id: institusi,
-              address: institusiAddress,
-            };
-
-      console.log(dataInstitution);
-
-      const resInstitution = await saveInstitutes(dataInstitution);
-
-      institutionId = resInstitution?.data?.data?.id;
-      if (resInstitution?.error) {
-        error(resInstitution?.message);
-        return false;
-      }
-    }
-
-    const sanitizedFirstName = sanitizeHtml(data.firstName);
-
-    if (sanitizedFirstName == "") {
-      error("Invalid Name");
-    } else {
-      const datas = {
-        firstName: sanitizedFirstName,
-        lastName: sanitizedFirstName,
-        username: data.username,
-        phoneNumber: data.phoneNumber,
-        email,
-        address: data.address,
-        memberIdentity: userIdentity,
-        provinceId: Number(data.provinsi),
-        cityId: Number(data.kota),
-        districtId: Number(data.kecamatan),
-        password: data.password,
-        instituteId: Number(institutionId),
-        roleId: Number(category),
-      };
-
-      const response = await postRegistration(datas);
-      console.log(response);
-      if (response?.error) {
-        error(response?.message);
-        return false;
-      }
-
-      registerConfirm();
-      return false;
-    }
-  }
-
-  const handleSendOTP = async () => {
-    console.log(userIdentity, email);
-    if (Number(category) == 6) {
-      // const journalist = await handleJournalistCertificate();
-      console.log(email, journalistCertificate);
-      if (email != "" && journalistCertificate != undefined) {
-        const data = {
-          memberIdentity: journalistCertificate,
-          email,
-          category: 6,
-        };
-
-        loading();
-        const response = await requestOTP(data);
-
-        if (response?.error) {
-          error(response.message);
-          return false;
-        }
-
-        close();
-        handleJournalistCertificate();
-        setStepTwoActive(true);
-      } else {
-        console.log("identity empty");
-        setUserIdentityValidate("Nomor identitas tidak boleh kosong");
-      }
-    } else if (Number(category) == 7) {
-      console.log(email, personilNRP);
-      if (email != "" && personilNRP != undefined) {
-        const data = {
-          memberIdentity: personilNRP,
-          email,
-          category: 7,
-        };
-
-        loading();
-        const response = await requestOTP(data);
-
-        if (response?.error) {
-          error(response?.message);
-          return false;
-        }
-
-        close();
-        handleDataNRP();
-        setStepTwoActive(true);
-      } else {
-        console.log("identity empty");
-        setUserIdentityValidate("Nomor identitas tidak boleh kosong");
-      }
-    } else {
-      console.log("UMUM");
-      if (email != "") {
-        const data = {
-          memberIdentity: null,
-          email,
-          category,
-        };
-
-        loading();
-        const response = await requestOTP(data);
-
-        if (response?.error) {
-          error(response?.message);
-          return false;
-        }
-
-        close();
-        setStepTwoActive(true);
-      }
-    }
-  };
-
-  const handleJournalistCertificate = async () => {
-    const response = await getDataJournalist(journalistCertificate);
-    const data = response?.data?.data;
-    console.log(data);
-    if (data) {
-      setJournalistData(data[0]);
-    }
-
-    console.log("Data jurnalis:", data);
-    return data;
-  };
-
-  const handleTypeOTP = (event: any) => {
-    const { form } = event.target;
-    const index = [...form].indexOf(event.target);
-    form.elements[index + 1].focus();
-    event.preventDefault();
-  };
-
-  const handleResendOTP = async () => {
-    const timer = convertMilisecondsToHour(timerCount);
-
-    if (timer == "00") {
-      handleSendOTP();
-      restartTimer();
-    }
-  };
-
-  function restartTimer() {
-    setTimerCount(60_000);
-    setRefreshTimer(true);
-    startInterval();
-  }
-
-  function startInterval() {
-    interval = setInterval(() => {
-      if (timerCount == 1000 && interval) {
-        clearInterval(interval);
-        console.log("Reset");
-      }
-
-      timerCount = timerCount == 0 ? 60_000 : timerCount;
-      setTimerCount((timerCount -= nSecondInMiliseconds));
-    }, nSecondInMiliseconds);
-  }
-
-  const handleDataNRP = async () => {
-    const response = await getDataPersonil(personilNRP);
-    const data = response?.data?.data;
-    setPersonilData(data);
-    console.log("Data personil:", data);
-    return data;
-  };
-
-  const handleInstituteOption = (e: any) => {
-    if (e.target.value == "0") {
-      setIsCustomActive(true);
-    } else {
-      setIsCustomActive(false);
-      setInstitusi(e.target.value);
-    }
-  };
-
-  //   const {
-  //     register,
-  //     handleSubmit,
-  //     watch,
-  //     formState: { errors },
-  //   } = useForm<Inputs>();
-  //   const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
-  //   console.log(watch("example"));
-
-  function setDataToForm() {
-    if (Number(category) == 6 && journalistData) {
-      setValue("firstName", journalistData.journalistName);
-      setValue("memberIdentity", journalistData.certNumber);
-      const selectedProvince = province.find((o: any) => o.provName == journalistData.province?.toUpperCase());
-
-      if (selectedProvince !== undefined) {
-        setValue("provinsi", selectedProvince.id);
-      }
-    } else if (Number(category) == 7 && personilData) {
-      setValue("firstName", personilData.lastName);
-      setValue("memberIdentity", personilData.nrp);
-    }
-  }
-
-  const checkEmail = (e: any) => {
-    const regEmail = /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
-
-    if (regEmail.test(e)) {
-      setEmailValidate("");
-      setEmail(e);
-    } else {
-      setEmailValidate(t("emailValid", { defaultValue: "Email Valid" }));
-      setEmail("");
-    }
-  };
-
-  async function onSubmit(data: any) {
-    console.log("Submit");
-
-    if (isValidPassword) {
-      MySwal.fire({
-        title: "Buat akun",
-        text: "",
-        icon: "warning",
-        showCancelButton: true,
-        cancelButtonColor: "#d33",
-        confirmButtonColor: "#3085d6",
-        confirmButtonText: "Buat",
-      }).then((result) => {
-        if (result.isConfirmed) {
-          save(data);
-        }
-      });
-    } else {
-      error("Kata Sandi harus sama");
-    }
-  }
-
-  const handleIdentity = async (e: any) => {
-    const id = e;
-    console.log(id);
-    await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
-    if (Number(category) == 5) {
-      const reqId =
-        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
-      const response = await getDataByNIK(reqId, id);
-      const data = response?.data?.data_return[0];
-
-      console.log(data);
-      if (data !== undefined) {
-        setValue("firstName", data.nama_lengkap);
-        setValue("address", data.alamat);
-        const selectedProvince = province.find((o: any) => o.provName == data.prov?.toUpperCase());
-
-        if (selectedProvince !== undefined) {
-          setValue("provinsi", selectedProvince.id);
-        }
-
-        const selectedCity: any = city.find((o: any) => o.cityName == data.kab_kota?.toUpperCase());
-
-        if (selectedCity !== undefined) {
-          setValue("kota", selectedCity?.id);
-        }
-
-        const selectedDistrict: any = districts.find((o: any) => o.disName == data.kec?.toUpperCase());
-
-        if (selectedDistrict !== undefined) {
-          setValue("kecamatan", selectedDistrict?.id);
-        }
-      }
-    } else if (Number(category) == 7) {
-      const reqId =
-        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
-      const response = await getDataByNRP(reqId, id);
-      const data = response?.data?.data_return[0];
-
-      console.log("Data :", data);
-      if (data !== undefined) {
-        setValue("firstName", data.nama);
-        setValue("address", data.lokasi);
-      }
-    }
-  };
-
-  const getCity = async (e: any) => {
-    const res = await listCity(e);
-    setCity(res?.data.data);
-  };
-
-  const getDistricts = async (e: any) => {
-    const res = await listDistricts(e);
-    setDistricts(res?.data.data);
-  };
-
-  const handleVerifyOTP = async () => {
-    const otp = `${otp1}${otp2}${otp3}${otp4}${otp5}${otp6}`;
-    const dummyOtp = "123456";
-    if (email != "" && otpValue.length == 6) {
-      console.log("verify otp");
-      loading();
-      // const response = {
-      //   message: "success",
-      // };
-      const response = {
-        message: otpValue == dummyOtp ? "success" : "failed",
-      };
-
-      // const response = await verifyOTP(email, otp);
-      // if (response?.error) {
-      //   error(response?.message);
-      //   return false;
-      // }
-      close();
-      // console.log(response);
-      if (response?.message == "success") {
-        console.log("success");
-        setStepTwoActive(false);
-        setStepThreeActive(true);
-        setFormProfile(true);
-        setOtpValidate("");
-        setValue("email", email);
-        setValue("memberIdentity", userIdentity);
-        handleIdentity(userIdentity);
-        setDataToForm();
-      } else {
-        setOtpValidate("Kode OTP Tidak Valid");
-      }
-    }
-  };
-
-  useEffect(() => {
-    async function initState() {
-      if (category != undefined) {
-        const resInstiution = await listInstitusi(category);
-        const res = await listProvince();
-        setInstitution(resInstiution?.data?.data);
-        setProvince(res?.data?.data);
-      }
-    }
-
-    initState();
-  }, [category]);
-
-  useEffect(() => {
-    function initState() {
-      for (const element of institution) {
-        const { id } = element;
-
-        if (id == institusi) {
-          setInstitusiAddress(element.address);
-        }
-      }
-    }
-
-    initState();
-  }, [institusi]);
-
-  return (
-    <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
-      <div className="lg:block hidden flex-1 overflow-hidden bg-[#f7f7f7] text-[40px] leading-[48px] text-default-600 relative z-[1]">
-        <div className="max-w-[520px] pt-16 ps-20 ">
-          <Link href="/" className="mb-6 inline-block">
-            <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
-          </Link>
-        </div>
-        <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-          <Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
-        </div>
-      </div>
-
-      <form
-        className="flex-1 w-full bg-white dark:bg-slate-600"
-        onSubmit={handleSubmit(onSubmit)}
-        style={
-          Number(category) < 5
-            ? {
-                display: "none",
-              }
-            : {}
-        }
-      >
-        <div className="flex flex-col first-letter:mb-8 ">
-          <div className="flex flex-row justify-center py-10">
-            <ul className="flex flex-row items-center text-center">
-              <li>
-                <div className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
-                  <b>1</b>
-                </div>
-              </li>
-              <div className="w-16 h-1 z-[1] bg-[#f32d2d] "></div>
-              <li>
-                <div className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active bg-white border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
-                  <b>2</b>
-                </div>
-              </li>
-              <div className="w-16 h-1 bg-[#f32d2d]"></div>
-              <li>
-                <div className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] borde rounded-full ${stepThreeActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
-                  <b>3</b>
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <div className="flex flex-row ">
-            <div
-              className="px-8 my-10 gap-3"
-              style={
-                stepTwoActive && !formProfile
-                  ? {
-                      display: "none",
-                    }
-                  : {}
-              }
-            >
-              <p className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold ">{stepThreeActive ? t("userData", { defaultValue: "User Data" }) : t("registerFirst", { defaultValue: "Register First" })}</p>
-              <p className="px-0 lg:px-12 text-sm lg:text-base mt-2">
-                {t("alreadyHave", { defaultValue: "Already Have" })}{" "}
-                <Link href="/auth" className="text-red-500">
-                  <b>{t("logIn", { defaultValue: "Log In" })}</b>
-                </Link>
-              </p>
-            </div>
-            <div
-              className="px-8 lg:px-20 mb-6"
-              style={
-                !stepTwoActive || (stepOneActive && stepThreeActive)
-                  ? {
-                      display: "none",
-                    }
-                  : {}
-              }
-            >
-              <p className="text-black dark:text-white text-2xl px-0 lg:px-20 font-semibold">{t("enterOTP", { defaultValue: "Enter O T P" })}</p>
-              <p className="text-red-500 text-sm px-0 lg:px-20">{t("checkInbox", { defaultValue: "Check Inbox" })}</p>
-            </div>
-          </div>
-
-          <div className={`flex flex-col gap-3 px-8 lg:px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
-            <div
-              className="flex flex-col px-0 lg:px-8"
-              style={
-                Number(category) == 6
-                  ? {}
-                  : {
-                      display: "none",
-                    }
-              }
-            >
-              <Label htmlFor="association" className="mb-2">
-                {t("member", { defaultValue: "Member" })} <span className="text-red-500">*</span>
-              </Label>
-              <select
-                className={`py-2 px-1 rounded-md border text-sm text-slate-400  border-slate-300 bg-white dark:bg-slate-600 ${errors.association ? "block" : ""}`}
-                {...register("association")}
-                id="association"
-                onChange={(e) => setAssociation(e.target.value)}
-              >
-                <option disabled selected>
-                  {t("association", { defaultValue: "Association" })}
-                </option>
-                <option value="PWI" key="1">
-                  PWI (Persatuan Wartawan Indonesia)
-                </option>
-                <option value="IJTI" key="2">
-                  IJTI (Ikatan Jurnalis Televisi Indonesia)
-                </option>
-                <option value="PFI" key="3">
-                  PFI (Pewarta Foto Indonesia)
-                </option>
-                <option value="AJI" key="4">
-                  AJI (Asosiasi Jurnalis Indonesia)
-                </option>
-                <option value="Wartawan" key="5">
-                  {t("otherIdentity", { defaultValue: "Other Identity" })}
-                </option>
-              </select>
-              <div className="hidden w-full mt-[0.25rem] text-lg text-[#dc3545]">{errors.association?.message}</div>
-            </div>
-
-            {Number(category) == 7 ? (
-              <div className="px-0 lg:px-[34px]">
-                <label htmlFor="userIdentity" className="mb-3">
-                  <b>{t("policeNumber", { defaultValue: "Police Number" })}</b> <span className="text-red-500">*</span>
-                </label>
-                <Input className="mt-3" autoComplete="off" placeholder="Masukan Nomor Registrasi Polri Anda" type="text" onChange={(event: any) => setPersonilNRP(event.target.value)} />
-                <p className="text-red-500">{userIdentityValidate}</p>
-              </div>
-            ) : (
-              ""
-            )}
-            {Number(category) == 6 ? (
-              <div
-                className="px-0 lg:px-[34px]"
-                style={
-                  Number(category) == 6
-                    ? {}
-                    : {
-                        display: "none",
-                      }
-                }
-              >
-                <Label htmlFor="journalistCertificate">
-                  {t("journalistNumber", { defaultValue: "Journalist Number" })} <span className="text-red-500">*</span>
-                </Label>
-                <Input className="rounded-md py-3" autoComplete="off" placeholder={t("inputJournalist", { defaultValue: "Input Journalist" })} type="text" onChange={(event: any) => setJournalistCertificate(event.target.value)} />
-              </div>
-            ) : (
-              ""
-            )}
-            <div className="flex flex-col w-full px-0 lg:px-8 gap-2">
-              <label htmlFor="email">
-                <b>Email</b> <span className="text-red-500">*</span>
-              </label>
-              <Input className="w-full" autoComplete="off" placeholder={t("inputEmail", { defaultValue: "Input Email" })} type="email" onChange={(event) => checkEmail(event.target.value)} />
-              <p className="text-sm text-red-500 mt-1">{emailValidate}</p>
-            </div>
-          </div>
-
-          <div className={`flex flex-col mt-4 px-8 lg:px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}>
-            <div className="flex justify-center mb-6">
-              <InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
-                <InputOTPGroup>
-                  <InputOTPSlot index={0} onChange={(e: any) => setOtp1(e.target.value)} onKeyUp={handleTypeOTP} />
-                  <InputOTPSlot index={1} onChange={(e: any) => setOtp2(e.target.value)} onKeyUp={handleTypeOTP} />
-                </InputOTPGroup>
-                <InputOTPSeparator />
-                <InputOTPGroup>
-                  <InputOTPSlot index={2} onChange={(e: any) => setOtp3(e.target.value)} onKeyUp={handleTypeOTP} />
-                  <InputOTPSlot index={3} onChange={(e: any) => setOtp4(e.target.value)} onKeyUp={handleTypeOTP} />
-                </InputOTPGroup>
-                <InputOTPSeparator />
-                <InputOTPGroup>
-                  <InputOTPSlot index={4} onChange={(e: any) => setOtp5(e.target.value)} onKeyUp={handleTypeOTP} />
-                  <InputOTPSlot index={5} onChange={(e: any) => setOtp6(e.target.value)} onKeyUp={handleTypeOTP} />
-                </InputOTPGroup>
-              </InputOTP>
-            </div>
-            <p className="text-red-500">
-              <b>{otpValidate}</b>
-            </p>
-            <div className="flex flex-row px-0 lg:px-28 justify-between items-center my-4">
-              <a className="bg-slate-300 dark:bg-black text-center rounded-lg mr-1 w-[200px] py-2 text-base cursor-pointer" onClick={() => handleResendOTP()}>
-                {t("resending", { defaultValue: "Resending" })} ({convertMilisecondsToHour(timerCount)})
-              </a>
-              <a className="bg-red-700 w-[200px] py-2 text-center text-white rounded-lg ml-1  cursor-pointer" onClick={() => handleVerifyOTP()}>
-                {t("next", { defaultValue: "Next" })}
-              </a>
-            </div>
-          </div>
-
-          <div className={`flex flex-col px-8 lg:px-12 ${formProfile == false ? "hidden" : ""}`}>
-            <div>
-              {Number(category) == 6 || Number(category) == 7 ? (
-                <div className="px-0 lg:px-[34px]">
-                  <Label className="mb-2">
-                    {`${Number(category) == 6 ? t("journalistNumber", { defaultValue: "Journalist Number" }) : "NRP"}`}
-                    <span className="text-red-500">*</span>
-                  </Label>
-                  <Input
-                    type="text"
-                    autoComplete="off"
-                    className={`mb-3 ${errors.memberIdentity ? "block" : ""}`}
-                    {...register("memberIdentity")}
-                    placeholder={t("inputNumberIdentity", { defaultValue: "Input Number Identity" })}
-                    onChange={(e) => handleIdentity(e.target.value)}
-                    disabled
-                  />
-                  <div className="text-red-500">{errors.memberIdentity?.message}</div>
-                </div>
-              ) : (
-                ""
-              )}
-              <div className="mb-4 px-0 lg:px-[34px]">
-                <Label className="mb-2">
-                  {t("fullName", { defaultValue: "Full Name" })} <span className="text-red-500">*</span>
-                </Label>
-                <Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder={t("enterFullName", { defaultValue: "Enter Full Name" })} />
-                <div className="text-red-500">{errors.firstName?.message}</div>
-              </div>
-              <div className="mb-4 px-0 lg:px-[34px]">
-                <Label className="mb-2">
-                  Username <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  id="username"
-                  type="text"
-                  autoComplete="off"
-                  className={`${errors.username ? "block" : ""}`}
-                  placeholder={t("enterUsername", { defaultValue: "Enter Username" })}
-                  onChange={(e) => {
-                    setValUsername(e.target.value.trim());
-                  }}
-                  onPaste={(e: any) => {
-                    setValUsername(e.target.value.trim());
-                  }}
-                  onCopy={(e: any) => {
-                    setValUsername(e.target.value.trim());
-                  }}
-                />
-                <div className="text-red-500">{errors.username?.message}</div>
-              </div>
-              <div className="mb-4 px-0 lg:px-[34px]">
-                <Label className="mb-2">
-                  Email <span className="text-red-500">*</span>
-                </Label>
-                <Input type="email" autoComplete="off" className={`${errors.email ? "block" : "text-white"}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
-                <div className="text-red-500">{errors.email?.message}</div>
-              </div>
-            </div>
-            <div className="flex flex-col px-0 lg:px-[34px]">
-              <Label className="mb-2">
-                {t("number", { defaultValue: "Number" })} <span className="text-red-500">*</span>
-              </Label>
-              <Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder={t("enterNumber", { defaultValue: "Enter Number" })} />
-              <div className="text-red-500">{errors.phoneNumber?.message}</div>
-            </div>
-            <div className="mb-4 px-0 lg:px-[34px]">
-              <Label htmlFor="address" className="mb-2">
-                {t("address", { defaultValue: "Address" })} <span className="text-red-500">*</span>
-              </Label>
-              <Textarea className={` ${errors.address ? "block" : ""}`} {...register("address")} placeholder={t("insertAddress", { defaultValue: "Insert Address" })} rows={3} />
-              <div className="text-red-500">{errors.address?.message}</div>
-            </div>
-            {Number(category) == 6 ? (
-              <div className="flex flex-col gap-3 px-0 lg:px-[34px]">
-                <div className="flex flex-col mb-2">
-                  <Label htmlFor="provinsi" className="mb-2">
-                    {t("institutions", { defaultValue: "Institutions" })} <span className="text-red-500">*</span>
-                  </Label>
-                  <select className="mb-3 p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
-                    <option disabled selected>
-                      {t("selectInst", { defaultValue: "Select Inst" })}
-                    </option>
-                    {institution?.map((row: any) => (
-                      <option value={row.id} key={row.id}>
-                        {row?.name}
-                      </option>
-                    ))}
-                    <option value="0" key="0">
-                      {t("otherInst", { defaultValue: "Other Inst" })}
-                    </option>
-                  </select>
-                </div>
-                <div
-                  className="px-0 lg:px-[34px]"
-                  style={
-                    isCustomActive == false
-                      ? {
-                          display: "none",
-                        }
-                      : {}
-                  }
-                >
-                  <Label htmlFor="alamat" className="mb-2">
-                    {t("instName", { defaultValue: "Inst Name" })} <span className="text-red-500">*</span>
-                  </Label>
-                  <Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
-                </div>
-                <div>
-                  <Label htmlFor="alamat" className="mb-2">
-                    {t("instAddress", { defaultValue: "Inst Address" })} <span className="text-red-500">*</span>
-                  </Label>
-                  <Textarea className="mb-3" placeholder={t("addressInst", { defaultValue: "Address Inst" })} rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
-                </div>
-              </div>
-            ) : (
-              ""
-            )}
-            <div className="flex flex-col px-0 lg:px-[34px]">
-              <label htmlFor="provinsi" className="mb-2 ">
-                {t("province", { defaultValue: "Province" })} <span className="text-red-500">*</span>
-              </label>
-              <select
-                className={`mb-3 p-2 border rounded-md text-sm text-slate-400 border-slate-300 bg-white cursor-pointer ${errors.provinsi ? "block" : ""}`}
-                {...register("provinsi")}
-                id="provinsi"
-                name="provinsi"
-                onChange={(event) => getCity(event.target.value)}
-              >
-                <option disabled selected>
-                  {t("selectProv", { defaultValue: "Select Prov" })}
-                </option>
-                {province?.map((row: any) => (
-                  <option value={row.id} key={row.id}>
-                    {row.provName}
-                  </option>
-                ))}
-              </select>
-              <div className="text-red-500">{errors.provinsi?.message}</div>
-            </div>
-            <div className="flex flex-col px-0 lg:px-[34px]">
-              <label htmlFor="kota" className="mb-2">
-                {t("city", { defaultValue: "City" })} <span className="text-red-500">*</span>
-              </label>
-              <select
-                className={`mb-3 p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer ${errors.kota ? "block" : ""}`}
-                {...register("kota")}
-                id="kota"
-                onChange={(event) => getDistricts(event.target.value)}
-              >
-                <option disabled selected>
-                  {t("selectCity", { defaultValue: "Select City" })}
-                </option>
-                {city?.map((row: any) => (
-                  <option value={row.id} key={row.id}>
-                    {row.cityName}
-                  </option>
-                ))}
-              </select>
-              <div className="text-red-500">{errors.kota?.message}</div>
-            </div>
-            <div className="flex flex-col px-0 lg:px-[34px]">
-              <label htmlFor="kecamatan" className="mb-2">
-                {t("subdistrict", { defaultValue: "Subdistrict" })} <span className="text-red-500">*</span>
-              </label>
-              <select className={`p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
-                <option disabled selected>
-                  {t("selectSub", { defaultValue: "Select Sub" })}
-                </option>
-                {districts?.map((row: any) => (
-                  <option value={row.id} key={row.id}>
-                    {row.disName}
-                  </option>
-                ))}
-              </select>
-              <div className="text-red-500">{errors.kecamatan?.message}</div>
-            </div>
-            {/* <div className="flex flex-col">
-              <label htmlFor="password" className="mb-2">
-                <b>Kata Sandi</b> <span className="text-red-500">*</span>
-              </label>
-              <Input
-                type={typePass}
-                autoComplete="off"
-                className={` ${errors.password ? "block" : ""}`}
-                {...register("password")}
-                placeholder="Masukan Kata Sandi"
-                onChange={(e) => {
-                  setValPassword(e.target.value.trim());
-                }}
-                onPaste={(e: any) => {
-                  setValPassword(e.target.value.trim());
-                }}
-                onCopy={(e: any) => {
-                  setValPassword(e.target.value.trim());
-                }}
-                required
-              />{" "}
-              <a className={`text-black place-items-end -top-44 ${typePass == "text" ? "hidden" : ""}`} onClick={showPass}>
-                <Icon icon="fa:eye" />
-              </a>
-              <a className={`text-black ${typePass == "password" ? "hidden" : ""}`} onClick={hidePass}>
-                <Icon icon="fa:eye-slash" />
-              </a>
-              <div className="text-red-500">{errors.password?.message}</div>
-            </div> */}
-            <div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
-              <Label htmlFor="password" className="mb-2 font-medium text-default-600">
-                {t("password", { defaultValue: "Password" })} <span className="text-red-500">*</span>
-              </Label>
-              <div className="relative">
-                <Input
-                  size="lg"
-                  type={passwordType}
-                  autoComplete="off"
-                  className={` ${errors.password ? "block" : ""}`}
-                  {...register("password")}
-                  placeholder={t("inputPass", { defaultValue: "Input Pass" })}
-                  onChange={(e) => {
-                    setValPassword(e.target.value.trim());
-                  }}
-                  onPaste={(e: any) => {
-                    setValPassword(e.target.value.trim());
-                  }}
-                  onCopy={(e: any) => {
-                    setValPassword(e.target.value.trim());
-                  }}
-                  required
-                />
-                <div className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer" onClick={togglePasswordType}>
-                  {passwordType === "password" ? <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" /> : <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />}{" "}
-                </div>
-              </div>
-              {errors.password?.message && <div className="text-destructive mt-2 text-sm">{errors.password.message}</div>}
-            </div>
-            {/* <div className="flex flex-col">
-              <label htmlFor="password" className="mb-2">
-                <b>Konfirmasi Kata Sandi</b> <span className="text-red-500">*</span>
-              </label>
-              <Input
-                type={typePassConf}
-                autoComplete="off"
-                className={` ${errors.passwordConf ? "block" : ""}`}
-                {...register("passwordConf")}
-                placeholder="Masukan Kata Sandi"
-                onChange={(e) => {
-                  setValPasswordConf(e.target.value.trim());
-                }}
-                onPaste={(e: any) => {
-                  setValPasswordConf(e.target.value.trim());
-                }}
-                onCopy={(e: any) => {
-                  setValPasswordConf(e.target.value.trim());
-                }}
-                required
-              />
-              <div className="text-red-500">{warningPassConf}</div>
-              <a className={`text-black ${typePassConf == "text" ? "hidden" : ""}`} onClick={showPassConf}>
-                <Icon icon="fa:eye" />
-              </a>
-              <a className={`text-dark show-pass ${typePassConf == "password" ? "hidden" : ""}`} onClick={hidePassConf}>
-                <Icon icon="fa:eye-slash" />
-              </a>
-            </div> */}
-            <div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
-              <Label htmlFor="password" className="mb-2 font-medium text-default-600">
-                {t("confirmPass", { defaultValue: "Confirm Pass" })} <span className="text-red-500">*</span>
-              </Label>
-              <div className="relative">
-                <Input
-                  size="lg"
-                  type={passwordConf}
-                  autoComplete="off"
-                  className={` ${errors.passwordConf ? "block" : ""}`}
-                  {...register("passwordConf")}
-                  placeholder={t("samePass", { defaultValue: "Same Pass" })}
-                  onChange={(e) => {
-                    setValPasswordConf(e.target.value.trim());
-                  }}
-                  onPaste={(e: any) => {
-                    setValPasswordConf(e.target.value.trim());
-                  }}
-                  onCopy={(e: any) => {
-                    setValPasswordConf(e.target.value.trim());
-                  }}
-                  required
-                />
-                <div className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer" onClick={togglePasswordType}>
-                  {passwordConf === "same password" ? <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" /> : <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />}{" "}
-                </div>
-              </div>
-              <div className="text-red-500">{warningPassConf}</div>
-            </div>
-            <div className="form-group px-0 lg:px-[34px]">
-              <PasswordChecklist
-                rules={["minLength", "specialChar", "number", "capital", "match"]}
-                minLength={8}
-                value={password}
-                valueAgain={passwordConf}
-                onChange={(isValid: any) => {
-                  setIsValidPassword(isValid);
-                }}
-                messages={{
-                  minLength: t("passCharacter", { defaultValue: "Pass Character" }),
-                  specialChar: t("passSpecial", { defaultValue: "Pass Special" }),
-                  number: t("passNumber", { defaultValue: "Pass Number" }),
-                  capital: t("passCapital", { defaultValue: "Pass Capital" }),
-                  match: t("passSame", { defaultValue: "Pass Same" }),
-                }}
-              />
-            </div>
-          </div>
-
-          <div
-            className="flex flex-col mt-8 mb-2"
-            style={
-              (stepOneActive && !stepTwoActive) || stepThreeActive
-                ? {}
-                : {
-                    display: "none",
-                  }
-            }
-          >
-            <div className="text-center mb-2 px-[34px]">
-              <p className="text-sm lg:text-base">
-                {t("byRegis", { defaultValue: "By Regis" })} <br />{" "}
-                <a href="/privacy" target="_blank" className="text-red-500">
-                  <b>{t("terms", { defaultValue: "Terms" })}</b>
-                </a>{" "}
-                {t("and", { defaultValue: "And" })}{" "}
-                <a href="/privacy" target="_blank" className="text-red-500">
-                  <b>{t("privacy", { defaultValue: "Privacy" })}</b>
-                </a>
-              </p>
-            </div>
-            <div className={`mb-5 mt-7 px-[34px] w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
-              {/* <a className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-full" onClick={() => handleSendOTP()}> */}
-              <a
-                className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-[550px]"
-                onClick={() => {
-                  setStepOneActive(false);
-                  setStepTwoActive(true);
-                }}
-              >
-                {t("send", { defaultValue: "Send" })} OTP
-              </a>
-            </div>
-          </div>
-          <div
-            className="flex justify-center items-center mt-2 mb-4 px-[34px]"
-            style={
-              formProfile == false
-                ? {
-                    display: "none",
-                  }
-                : {}
-            }
-          >
-            <Button type="submit" className="border w-[550px] text-center bg-red-700 text-white hover:bg-white hover:text-red-700 ">
-              {t("register", { defaultValue: "Register" })}
-            </Button>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default page;
diff --git a/app/[locale]/auth/under-construction/layout.tsx b/app/[locale]/auth/under-construction/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/under-construction/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/under-construction/page.tsx b/app/[locale]/auth/under-construction/page.tsx
deleted file mode 100644
index 445257e5..00000000
--- a/app/[locale]/auth/under-construction/page.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import Logo from "@/components/partials/auth/logo";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-
-const UnderConstructionPage = () => {
-  return (
-    <div className="min-h-screen">
-      <div className="absolute left-0 top-0 w-full">
-        <div className="flex flex-wrap justify-between items-center py-6 container">
-          <div>
-            <Link href="/">
-              <Logo />
-            </Link>
-          </div>
-          <div>
-            <Button variant="outline" size="sm">
-              Contact Us
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div className="container">
-        <div className="flex justify-center flex-wrap items-center min-h-screen flex-col text-center">
-          <Image height={500} width={500} src="/images/svg/img-2.svg" alt="" />
-          <h4 className="text-3xl font-medium text-default-900  mb-2">
-            We are under maintenance.
-          </h4>
-          <p className="font-normal text-base text-default-500 ">
-            We’re making the system more awesome. <br />
-            We’ll be back shortly.
-          </p>
-        </div>
-      </div>
-      <div className="fixed bottom-0 w-full">
-        <div className="container">
-          <div className="md:flex justify-between items-center flex-wrap space-y-4 py-6">
-            <div>
-              <ul className="flex md:justify-start justify-center gap-3">
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:facebook" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:twitter" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:linkedin2" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:google" />
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <ul className="flex md:justify-start justify-center space-x-3">
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500 text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Privacy policy
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500 text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Faq
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500 text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Email us
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default UnderConstructionPage;
diff --git a/app/[locale]/auth/under-maintenance/layout.tsx b/app/[locale]/auth/under-maintenance/layout.tsx
deleted file mode 100644
index 6e956709..00000000
--- a/app/[locale]/auth/under-maintenance/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
-};
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-export default Layout;
diff --git a/app/[locale]/auth/under-maintenance/page.tsx b/app/[locale]/auth/under-maintenance/page.tsx
deleted file mode 100644
index 1210ba8e..00000000
--- a/app/[locale]/auth/under-maintenance/page.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import Logo from "@/components/partials/auth/logo";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import Image from "next/image";
-import { Link } from '@/i18n/routing';
-
-const UnderMaintenance = () => {
-  return (
-    <div className="min-h-screen">
-      <div className="absolute left-0 top-0 w-full">
-        <div className="flex flex-wrap justify-between items-center py-6 container">
-          <div>
-            <Link href="/">
-              <Logo />
-            </Link>
-          </div>
-          <div>
-            <Button variant="outline" size="sm">
-              Contact Us
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div className="container">
-        <div className="flex justify-center flex-wrap items-center min-h-screen flex-col text-center">
-          <Image height={500} width={500} src="/images/svg/img-2.svg" alt="" />
-          <h4 className="text-3xl font-medium text-default-900  mb-2">
-            We are under maintenance.
-          </h4>
-          <p className="font-normal text-base text-default-500 ">
-            We’re making the system more awesome. <br />
-            We’ll be back shortly.
-          </p>
-        </div>
-      </div>
-      <div className="fixed bottom-0 w-full">
-        <div className="container">
-          <div className="md:flex justify-between items-center flex-wrap space-y-4 py-6">
-            <div>
-              <ul className="flex md:justify-start justify-center gap-3">
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:facebook" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:twitter" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:linkedin2" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="#"
-                    className="border-default inline-block border border-solid  rounded-full hover:bg-default hover:text-default-50 duration-300 transition-all p-2"
-                  >
-                    <Icon className="h-4 w-4" icon="icomoon-free:google" />
-                  </Link>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <ul className="flex md:justify-start justify-center space-x-3">
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500 text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Privacy policy
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500 text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Faq
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-default-500 text-sm transition duration-150 hover:text-default-900"
-                  >
-                    Email us
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default UnderMaintenance;
diff --git a/components/landing-page/hero-new-satker.tsx b/components/landing-page/hero-new-satker.tsx
index 14a5a4c5..3c6571ff 100644
--- a/components/landing-page/hero-new-satker.tsx
+++ b/components/landing-page/hero-new-satker.tsx
@@ -223,24 +223,6 @@ const HeroNewSatker = (props: { group?: string }) => {
   }, []);
 
   useEffect(() => {
-    async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
-
-      try {
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-        return data;
-      } catch (error) {
-        console.error("Fetch error: ", error);
-      }
-    }
-
-    fetchCategories();
     initFetch();
   }, []);
 
diff --git a/service/http-config/http-base-service.ts b/service/http-config/http-base-service.ts
index d161e680..1886b5df 100644
--- a/service/http-config/http-base-service.ts
+++ b/service/http-config/http-base-service.ts
@@ -4,9 +4,38 @@ import Cookies from "js-cookie";
 import qs from "qs";
 import { getCsrfToken } from "../auth";
 
+// CSRF token cache
+let csrfTokenCache: string | null = null;
+let csrfTokenExpiry: number = 0;
+const CSRF_CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+
+async function getCachedCsrfToken() {
+  const now = Date.now();
+  
+  // Return cached token if still valid
+  if (csrfTokenCache && now < csrfTokenExpiry) {
+    return csrfTokenCache;
+  }
+  
+  // Fetch new token
+  try {
+    const resCsrf = await getCsrfToken();
+    const token = resCsrf?.data?.token;
+    
+    if (token) {
+      csrfTokenCache = token;
+      csrfTokenExpiry = now + CSRF_CACHE_DURATION;
+      return token;
+    }
+  } catch (error) {
+    console.error("Failed to fetch CSRF token:", error);
+  }
+  
+  return null;
+}
+
 export async function httpPost(pathUrl: any, data?: any, headers?: any,) {
-  const resCsrf = await getCsrfToken();
-  const csrfToken = resCsrf?.data?.token;
+  const csrfToken = await getCachedCsrfToken();
   const authToken = Cookies.get("access_token");
 
   const defaultHeaders = {
@@ -26,7 +55,7 @@ export async function httpPost(pathUrl: any, data?: any, headers?: any,) {
             console.log(error);
             return error.response;
         });
-    console.log("Response base svc : ", response);
+    // Remove console.log for better performance
     if (response?.status == 200 || response?.status == 201) {
         return {
             error: false,
@@ -49,7 +78,7 @@ export async function httpGet(pathUrl: any, headers: any) {
       console.log(error);
       return error.response;
     });
-  console.log("Response base svc : ", response);
+  // Remove console.log for better performance
   if (response?.status == 200 || response?.status == 201) {
     return {
       error: false,
@@ -66,8 +95,7 @@ export async function httpGet(pathUrl: any, headers: any) {
 }
 
 export async function httpPut(pathUrl: any, headers: any, data?: any) {
-  const resCsrf = await getCsrfToken();
-  const csrfToken = resCsrf?.data?.token;
+  const csrfToken = await getCachedCsrfToken();
 
   const defaultHeaders = {
     "Content-Type": "application/json",
@@ -85,7 +113,7 @@ export async function httpPut(pathUrl: any, headers: any, data?: any) {
       console.log(error);
       return error.response;
     });
-  console.log("Response base svc : ", response);
+  // Remove console.log for better performance
   if (response?.status == 200 || response?.status == 201) {
     return {
       error: false,