-
-
-
-
-
-
- (
- setEndDate(date as Date)}
- initialFocus
- />
- )}
+
+ {
+ console.log("Date selected:", newDate);
+ setDate(newDate);
+ if (newDate?.from && newDate?.to) {
+ setIsDatePickerOpen(false);
+ }
+ }}
+ numberOfMonths={1}
+ className="rounded-md border"
/>
diff --git a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
index 2dadb124..96719606 100644
--- a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
+++ b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
@@ -54,7 +54,6 @@ import { useRouter, useSearchParams } from "next/navigation";
import TablePagination from "@/components/table/table-pagination";
import columns from "./columns";
import { getPlanningSentPagination } from "@/service/planning/planning";
-import search from "@/app/[locale]/(protected)/app/chat/components/search";
import { CardHeader, CardTitle } from "@/components/ui/card";
import { useTranslations } from "next-intl";
import useTableColumns from "./columns";
diff --git a/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx b/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
index ad649f48..dfbfc559 100644
--- a/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
+++ b/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
@@ -11,7 +11,6 @@ import {
import { DockIcon, ImageIcon, MicIcon, YoutubeIcon } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import React from "react";
-import search from "../../../app/chat/components/search";
import { useTranslations } from "next-intl";
type StatusFilter = string[];
diff --git a/app/[locale]/auth/forgot-password/layout.tsx b/app/[locale]/auth/forgot-password/layout.tsx
new file mode 100644
index 00000000..2d394e06
--- /dev/null
+++ b/app/[locale]/auth/forgot-password/layout.tsx
@@ -0,0 +1,11 @@
+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;
\ No newline at end of file
diff --git a/app/[locale]/auth/forgot-password/page.tsx b/app/[locale]/auth/forgot-password/page.tsx
new file mode 100644
index 00000000..06636a14
--- /dev/null
+++ b/app/[locale]/auth/forgot-password/page.tsx
@@ -0,0 +1,48 @@
+import { Link } from "@/i18n/routing";
+import ForgotPass from "@/components/partials/auth/forgot-pass";
+import Image from "next/image";
+
+const ForgotPassPage = () => {
+ return (
+
+
+
+
+
+
+
+ {/*
+
+ */}
+
+
+
Forgot Your Password?
+
+
Enter your Username and instructions will be sent to you!
+
+
+
+ Forget It,
+
+ Send me Back
+
+ to The Sign In
+
+
+
+
+
+
+ );
+};
+
+export default ForgotPassPage;
diff --git a/components/auth/identity-form.tsx b/components/auth/identity-form.tsx
index 6adf6fef..a6493082 100644
--- a/components/auth/identity-form.tsx
+++ b/components/auth/identity-form.tsx
@@ -105,9 +105,7 @@ export const IdentityForm: React.FC
= ({
{t("member", { defaultValue: "Member" })} *
- {errors.association && (
+ {/* {errors.association && (
{errors.association.message}
- )}
+ )} */}
diff --git a/components/auth/profile-form.tsx b/components/auth/profile-form.tsx
index e5c48afe..cf9c5d19 100644
--- a/components/auth/profile-form.tsx
+++ b/components/auth/profile-form.tsx
@@ -122,6 +122,7 @@ export const ProfileForm: React.FC
= ({
}
const instituteData: InstituteData = {
+ id: "0",
name: customInstituteName,
address: instituteAddress,
};
@@ -159,7 +160,7 @@ export const ProfileForm: React.FC = ({
- {institutes.map((institute) => (
+ {institutes?.map((institute) => (
diff --git a/components/form/content/task-ta/video-update-form.tsx b/components/form/content/task-ta/video-update-form.tsx
index c1ebd894..93716f82 100644
--- a/components/form/content/task-ta/video-update-form.tsx
+++ b/components/form/content/task-ta/video-update-form.tsx
@@ -48,7 +48,6 @@ import "swiper/css/thumbs";
import "swiper/css";
import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { files } from "@/app/[locale]/(protected)/app/projects/[id]/data";
import { useDropzone } from "react-dropzone";
import Image from "next/image";
import { Icon } from "@iconify/react/dist/iconify.js";
diff --git a/components/form/content/video-update-form.tsx b/components/form/content/video-update-form.tsx
index 6c50ecf3..3810fbe7 100644
--- a/components/form/content/video-update-form.tsx
+++ b/components/form/content/video-update-form.tsx
@@ -48,7 +48,6 @@ import "swiper/css/thumbs";
import "swiper/css";
import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { files } from "@/app/[locale]/(protected)/app/projects/[id]/data";
import { useDropzone } from "react-dropzone";
import Image from "next/image";
import { Icon } from "@iconify/react/dist/iconify.js";
diff --git a/components/form/shared/form-checkbox.tsx b/components/form/shared/form-checkbox.tsx
new file mode 100644
index 00000000..736556df
--- /dev/null
+++ b/components/form/shared/form-checkbox.tsx
@@ -0,0 +1,244 @@
+/**
+ * FormCheckbox Component
+ *
+ * A reusable checkbox component that handles:
+ * - Single checkbox
+ * - Checkbox groups
+ * - Label
+ * - Controller (react-hook-form)
+ * - Error handling
+ *
+ * This component reduces code duplication for checkbox fields across forms.
+ */
+
+import React from 'react';
+import { Control, Controller, FieldError, FieldPath, FieldValues } from 'react-hook-form';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface CheckboxOption {
+ value: string | number;
+ label: string;
+ disabled?: boolean;
+}
+
+export interface FormCheckboxProps<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath
+> {
+ // Form control
+ control: Control;
+ name: TName;
+
+ // Field configuration
+ label?: string;
+ required?: boolean;
+
+ // Checkbox configuration
+ single?: boolean; // Single checkbox vs checkbox group
+ options?: CheckboxOption[]; // For checkbox groups
+
+ // Styling
+ className?: string;
+ labelClassName?: string;
+ checkboxClassName?: string;
+ errorClassName?: string;
+ groupClassName?: string;
+
+ // Layout
+ layout?: 'horizontal' | 'vertical';
+ columns?: number; // For grid layout
+
+ // Validation
+ validation?: {
+ required?: boolean | string;
+ };
+
+ // Additional props
+ disabled?: boolean;
+ size?: 'sm' | 'md' | 'lg';
+
+ // Custom render functions
+ renderOption?: (option: CheckboxOption, checked: boolean, onChange: (checked: boolean) => void) => React.ReactElement;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function FormCheckbox<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath
+>({
+ control,
+ name,
+ label,
+ required = false,
+ single = false,
+ options = [],
+ className = '',
+ labelClassName = '',
+ checkboxClassName = '',
+ errorClassName = '',
+ groupClassName = '',
+ layout = 'horizontal',
+ columns = 1,
+ validation,
+ disabled = false,
+ size = 'md',
+ renderOption,
+}: FormCheckboxProps) {
+
+ // =============================================================================
+ // HELPER FUNCTIONS
+ // =============================================================================
+
+ const getCheckboxSize = (size: 'sm' | 'md' | 'lg') => {
+ switch (size) {
+ case 'sm':
+ return 'h-4 w-4';
+ case 'lg':
+ return 'h-6 w-6';
+ default:
+ return 'h-5 w-5';
+ }
+ };
+
+ const getGroupLayout = () => {
+ if (layout === 'vertical') {
+ return 'flex flex-col gap-2';
+ }
+
+ if (columns > 1) {
+ return `grid grid-cols-${columns} gap-2`;
+ }
+
+ return 'flex flex-wrap gap-4';
+ };
+
+ // =============================================================================
+ // RENDER FUNCTIONS
+ // =============================================================================
+
+ const renderSingleCheckbox = (field: any, fieldState: { error?: FieldError }) => (
+
+
+
+
+ );
+
+ const renderCheckboxGroup = (field: any, fieldState: { error?: FieldError }) => {
+ const selectedValues = field.value || [];
+
+ const handleOptionChange = (optionValue: string | number, checked: boolean) => {
+ const newValues = checked
+ ? [...selectedValues, optionValue]
+ : selectedValues.filter((value: any) => value !== optionValue);
+ field.onChange(newValues);
+ };
+
+ const renderDefaultOption = (option: CheckboxOption) => {
+ const checked = selectedValues.includes(option.value);
+
+ if (renderOption) {
+ return renderOption(option, checked, (checked) => handleOptionChange(option.value, checked));
+ }
+
+ return (
+
+ handleOptionChange(option.value, checked as boolean)}
+ disabled={disabled || option.disabled}
+ className={getCheckboxSize(size)}
+ />
+
+
+ );
+ };
+
+ return (
+
+ {options.map(renderDefaultOption)}
+
+ );
+ };
+
+ // =============================================================================
+ // MAIN RENDER
+ // =============================================================================
+
+ return (
+
+ {/* Group Label */}
+ {label && !single && (
+
+ )}
+
+ {/* Controller */}
+
(
+
+ {single ?
+ renderSingleCheckbox(field, fieldState) :
+ renderCheckboxGroup(field, fieldState)
+ }
+
+ {/* Error Message */}
+ {fieldState.error && (
+
+ {fieldState.error.message}
+
+ )}
+
+
+
Form Components Demo
+
+ Examples of using the new reusable form components
+
+
+
+
+
+ {/* Form Data Display */}
+
+ Current Form Data
+
+ {JSON.stringify(form.watch(), null, 2)}
+
+
+
+ {/* Label */}
+ {label && (
+
+ )}
+
+ {/* Controller */}
+
{
+ const selectedDate = field.value;
+
+ return (
+
+
+
+ {renderTrigger ?
+ renderTrigger({ field, fieldState, selectedDate, placeholder }) :
+ renderDefaultTrigger(field, fieldState, selectedDate, placeholder)
+ }
+
+
+
+
+
+
+
+ {/* Error Message */}
+ {fieldState.error && (
+
+ {fieldState.error.message}
+
+ )}
+
+ {/* Label */}
+ {label && (
+
+ )}
+
+ {/* Controller */}
+
(
+
+ {renderField(field, fieldState)}
+
+ {/* Error Message */}
+ {fieldState.error && (
+
+ {fieldState.error.message}
+
+ )}
+
+ {children}
+
+ );
+}
+
+// =============================================================================
+// GRID ITEM COMPONENT
+// =============================================================================
+
+export interface FormGridItemProps {
+ // Span configuration
+ span?: 1 | 2 | 3 | 4 | 6 | 12;
+ sm?: 1 | 2 | 3 | 4 | 6 | 12;
+ md?: 1 | 2 | 3 | 4 | 6 | 12;
+ lg?: 1 | 2 | 3 | 4 | 6 | 12;
+ xl?: 1 | 2 | 3 | 4 | 6 | 12;
+
+ // Alignment
+ align?: 'start' | 'center' | 'end' | 'stretch';
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+ // Styling
+ className?: string;
+
+ // Children
+ children: React.ReactNode;
+}
+
+export function FormGridItem({
+ span = 1,
+ sm,
+ md,
+ lg,
+ xl,
+ align,
+ justify,
+ className = '',
+ children,
+}: FormGridItemProps) {
+
+ const getSpan = (span: number) => {
+ return `col-span-${span}`;
+ };
+
+ const getResponsiveSpan = () => {
+ const classes = [getSpan(span)];
+
+ if (sm) classes.push(`sm:col-span-${sm}`);
+ if (md) classes.push(`md:col-span-${md}`);
+ if (lg) classes.push(`lg:col-span-${lg}`);
+ if (xl) classes.push(`xl:col-span-${xl}`);
+
+ return classes.join(' ');
+ };
+
+ const getAlign = (align: 'start' | 'center' | 'end' | 'stretch') => {
+ switch (align) {
+ case 'center':
+ return 'self-center';
+ case 'end':
+ return 'self-end';
+ case 'stretch':
+ return 'self-stretch';
+ default:
+ return 'self-start';
+ }
+ };
+
+ const getJustify = (justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly') => {
+ switch (justify) {
+ case 'center':
+ return 'justify-self-center';
+ case 'end':
+ return 'justify-self-end';
+ case 'between':
+ return 'justify-self-stretch';
+ case 'around':
+ return 'justify-self-stretch';
+ case 'evenly':
+ return 'justify-self-stretch';
+ default:
+ return 'justify-self-start';
+ }
+ };
+
+ const itemClasses = cn(
+ getResponsiveSpan(),
+ align && getAlign(align),
+ justify && getJustify(justify),
+ className
+ );
+
+ return (
+
+ {children}
+
+ );
+}
+
+export default FormGrid;
\ No newline at end of file
diff --git a/components/form/shared/form-radio.tsx b/components/form/shared/form-radio.tsx
new file mode 100644
index 00000000..6a14a4c2
--- /dev/null
+++ b/components/form/shared/form-radio.tsx
@@ -0,0 +1,210 @@
+/**
+ * FormRadio Component
+ *
+ * A reusable radio button component that handles:
+ * - Radio button groups
+ * - Label
+ * - Controller (react-hook-form)
+ * - Error handling
+ *
+ * This component reduces code duplication for radio button fields across forms.
+ */
+
+import React from 'react';
+import { Control, Controller, FieldError, FieldPath, FieldValues } from 'react-hook-form';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { cn } from '@/lib/utils';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface RadioOption {
+ value: string | number;
+ label: string;
+ disabled?: boolean;
+}
+
+export interface FormRadioProps<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath
+> {
+ // Form control
+ control: Control;
+ name: TName;
+
+ // Field configuration
+ label?: string;
+ required?: boolean;
+
+ // Radio configuration
+ options: RadioOption[];
+
+ // Styling
+ className?: string;
+ labelClassName?: string;
+ radioClassName?: string;
+ errorClassName?: string;
+ groupClassName?: string;
+
+ // Layout
+ layout?: 'horizontal' | 'vertical';
+ columns?: number; // For grid layout
+
+ // Validation
+ validation?: {
+ required?: boolean | string;
+ };
+
+ // Additional props
+ disabled?: boolean;
+ size?: 'sm' | 'md' | 'lg';
+
+ // Custom render functions
+ renderOption?: (option: RadioOption, checked: boolean, onChange: (value: string) => void) => React.ReactElement;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function FormRadio<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath
+>({
+ control,
+ name,
+ label,
+ required = false,
+ options,
+ className = '',
+ labelClassName = '',
+ radioClassName = '',
+ errorClassName = '',
+ groupClassName = '',
+ layout = 'horizontal',
+ columns = 1,
+ validation,
+ disabled = false,
+ size = 'md',
+ renderOption,
+}: FormRadioProps) {
+
+ // =============================================================================
+ // HELPER FUNCTIONS
+ // =============================================================================
+
+ const getRadioSize = (size: 'sm' | 'md' | 'lg') => {
+ switch (size) {
+ case 'sm':
+ return 'h-4 w-4';
+ case 'lg':
+ return 'h-6 w-6';
+ default:
+ return 'h-5 w-5';
+ }
+ };
+
+ const getGroupLayout = () => {
+ if (layout === 'vertical') {
+ return 'flex flex-col gap-2';
+ }
+
+ if (columns > 1) {
+ return `grid grid-cols-${columns} gap-2`;
+ }
+
+ return 'flex flex-wrap gap-3';
+ };
+
+ // =============================================================================
+ // RENDER FUNCTIONS
+ // =============================================================================
+
+ const renderDefaultOption = (option: RadioOption, checked: boolean, onChange: (value: string) => void) => {
+ if (renderOption) {
+ return renderOption(option, checked, onChange);
+ }
+
+ return (
+
+
+
+
+ );
+ };
+
+ // =============================================================================
+ // MAIN RENDER
+ // =============================================================================
+
+ return (
+
+ {/* Group Label */}
+ {label && (
+
+ )}
+
+ {/* Controller */}
+
(
+
+
+ {options.map((option) =>
+ renderDefaultOption(
+ option,
+ field.value === String(option.value),
+ field.onChange
+ )
+ )}
+
+
+ {/* Error Message */}
+ {fieldState.error && (
+
+ {fieldState.error.message}
+
+ )}
+
+
+ {title && (
+
+ {collapsible && (
+
+ )}
+
+
+ {title}
+
+
+ )}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+ {actions && (
+
+ {actions}
+
+ )}
+
+ {children}
+
+ );
+ };
+
+ // =============================================================================
+ // MAIN RENDER
+ // =============================================================================
+
+ const sectionContent = (
+
+ {renderHeader()}
+ {renderContent()}
+
+ );
+
+ // Wrap in Card for default variant
+ if (variant === 'default') {
+ return {sectionContent};
+ }
+
+ return sectionContent;
+}
+
+export default FormSection;
\ No newline at end of file
diff --git a/components/form/shared/form-select.tsx b/components/form/shared/form-select.tsx
new file mode 100644
index 00000000..f3b2f26c
--- /dev/null
+++ b/components/form/shared/form-select.tsx
@@ -0,0 +1,215 @@
+/**
+ * FormSelect Component
+ *
+ * A reusable select/dropdown component that handles:
+ * - Label
+ * - Controller (react-hook-form)
+ * - Select with options
+ * - Error handling
+ * - Loading states
+ *
+ * This component reduces code duplication for select fields across forms.
+ */
+
+import React from 'react';
+import { Control, Controller, FieldError, FieldPath, FieldValues } from 'react-hook-form';
+import { Label } from '@/components/ui/label';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface SelectOption {
+ value: string | number;
+ label: string;
+ disabled?: boolean;
+}
+
+export interface FormSelectProps<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath
+> {
+ // Form control
+ control: Control;
+ name: TName;
+
+ // Field configuration
+ label?: string;
+ placeholder?: string;
+ required?: boolean;
+
+ // Options
+ options: SelectOption[];
+
+ // Styling
+ className?: string;
+ labelClassName?: string;
+ selectClassName?: string;
+ errorClassName?: string;
+
+ // Validation
+ validation?: {
+ required?: boolean | string;
+ };
+
+ // Additional props
+ disabled?: boolean;
+ size?: 'sm' | 'md' | 'lg';
+ loading?: boolean;
+
+ // Custom render functions
+ renderOption?: (option: SelectOption) => React.ReactElement;
+ renderTrigger?: (props: {
+ field: any;
+ fieldState: { error?: FieldError };
+ }) => React.ReactElement;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function FormSelect<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath
+>({
+ control,
+ name,
+ label,
+ placeholder = 'Select an option',
+ required = false,
+ options,
+ className = '',
+ labelClassName = '',
+ selectClassName = '',
+ errorClassName = '',
+ validation,
+ disabled = false,
+ size = 'md',
+ loading = false,
+ renderOption,
+ renderTrigger,
+}: FormSelectProps) {
+
+ // =============================================================================
+ // HELPER FUNCTIONS
+ // =============================================================================
+
+ const getSelectSize = (size: 'sm' | 'md' | 'lg') => {
+ switch (size) {
+ case 'sm':
+ return 'h-8 text-sm';
+ case 'lg':
+ return 'h-12 text-base';
+ default:
+ return 'h-10 text-sm';
+ }
+ };
+
+ // =============================================================================
+ // RENDER FUNCTIONS
+ // =============================================================================
+
+ const renderDefaultOption = (option: SelectOption) => (
+
+ {option.label}
+
+ );
+
+ const renderDefaultTrigger = (field: any, fieldState: { error?: FieldError }) => (
+
+
+
+ );
+
+ // =============================================================================
+ // MAIN RENDER
+ // =============================================================================
+
+ return (
+
+ {/* Label */}
+ {label && (
+
+ )}
+
+ {/* Controller */}
+
(
+
+
+
+ {/* Error Message */}
+ {fieldState.error && (
+
+ {fieldState.error.message}
+
+ )}
+