'use client';
import Breadcrumb from '@/components/ui/pages/dashboard/Breadcrumb';
import Container from '@/components/ui/pages/dashboard/common/Container';
import { useSidebar } from '@/components/contexts/SidebarContext';
import { BiHomeSmile } from 'react-icons/bi';
import React, { useState, useMemo, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useSelector } from 'react-redux';
import { RootState } from '@/components/store';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import {
useGetDiaries,
useGetStudentSubjects,
useGetDiaryCategories,
useGetSchoolSettings,
} from '@/lib/api/student/queryHooks';
import type { DiaryStudentEntry } from '@/lib/api/student/functions';
import { useTranslate } from '@/components/hooks/useTranslate';
/**
* My Diary Page Component
*
* Displays student diary entries with filtering by category and subject,
* and sorting by positive/negative or new/old.
* Initially shows all data without filters, with default sort as 'new'.
*/
export default function MyDiaryPage() {
const translate = useTranslate();
const { collapsed } = useSidebar();
const router = useRouter();
// Fetch school settings to check for feature access
const { data: schoolSettings, isLoading: isLoadingSettings } =
useGetSchoolSettings();
// Check feature permission and redirect if disabled
useEffect(() => {
// Skip check while loading
if (isLoadingSettings || !schoolSettings?.data) return;
const enabledFeatures = schoolSettings.data.features || {};
const isFeatureEnabled = (featureName: string) => {
if (!enabledFeatures || Object.keys(enabledFeatures).length === 0) {
return true;
}
return Object.values(enabledFeatures).some(
(feature) =>
typeof feature === 'string' &&
feature.toLowerCase() === featureName.toLowerCase(),
);
};
if (!isFeatureEnabled('Student Management')) {
router.push('/student/dashboard');
}
}, [schoolSettings, isLoadingSettings, router]);
// Get student user from Redux store to access student ID
const user = useSelector((state: RootState) => state.studentAuth.user);
// Breadcrumb navigation items
const breadcrumbItems = [
{
label: translate('home'),
href: '/student/dashboard',
icon: ,
},
{
label: translate('myDiary'),
href: '/student/diary',
},
];
// Filter state - initially show all data
// 'all' means no filter applied (don't pass parameter to API)
const [category, setCategory] = useState('all');
const [subject, setSubject] = useState('all');
// Sort state - default is 'new' as per requirements
const [sortBy, setSortBy] = useState('new');
// Fetch subjects from the dedicated subjects API
// This provides all available subjects for the student (core + elective)
const { data: subjectsData } = useGetStudentSubjects();
// Extract and combine all subjects (core + elective) for the dropdown
// Show all subjects including both core and elective, even if names are duplicated
const subjects = useMemo(() => {
if (!subjectsData) {
return [];
}
// Combine core and elective subjects
// Show all subjects separately, not just unique ones by name
const allSubjects = [
...(subjectsData.core_subjects || []),
...(subjectsData.elective_subjects || []),
];
// Map all subjects to include class_subject_id, name, and name_with_type
// Use name_with_type as the unique identifier since it includes the type
const subjectsList = allSubjects
.filter((subj) => subj && subj.name) // Filter out any null/undefined subjects
.map((subj) => ({
id: subj.id,
name: subj.name,
name_with_type: subj.name_with_type,
}));
// Return sorted array of all subjects by name_with_type
// This will show both core and elective subjects separately
return subjectsList.sort((a, b) =>
a.name_with_type.localeCompare(b.name_with_type),
);
}, [subjectsData]);
// Prepare API request parameters for filtered data
// Convert filter state to API parameters
const apiParams = useMemo(() => {
// Map sortBy state to API sort values
// 'newest' -> 'new', 'oldest' -> 'old', 'positive' -> 'positive', 'negative' -> 'negative'
let sortValue: 'positive' | 'negative' | 'new' | 'old' = 'new';
if (sortBy === 'old') {
sortValue = 'old';
} else if (sortBy === 'positive') {
sortValue = 'positive';
} else if (sortBy === 'negative') {
sortValue = 'negative';
} else {
sortValue = 'new'; // Default to 'new'
}
// Build API parameters
// Only include subject_id and diary_category_id if not 'all'
const params: {
student_id: number;
sort: 'positive' | 'negative' | 'new' | 'old';
subject_id?: number | null;
diary_category_id?: number | null;
} = {
student_id: user?.id || 0,
sort: sortValue,
};
// Add subject_id only if a specific subject is selected
// Subject value is now name_with_type, so we need to find the matching subject and get its class_subject_id
if (subject !== 'all') {
// Find the subject by name_with_type from the subjects list
const selectedSubject = subjects.find(
(s) => s.name_with_type === subject,
);
if (selectedSubject) {
// Use class_subject_id for filtering (this is what the API expects)
params.subject_id = selectedSubject.id;
} else {
// Fallback: try finding by name if name_with_type lookup fails
const subjectByName = subjects.find((s) => s.name === subject);
if (subjectByName) {
params.subject_id = subjectByName.id;
} else {
// Final fallback: try parsing as ID
const subjectId = parseInt(subject, 10);
if (!isNaN(subjectId)) {
params.subject_id = subjectId;
}
}
}
} else {
// 'all' means don't pass subject_id (or pass empty string)
params.subject_id = null;
}
// Add diary_category_id only if a specific category is selected
if (category !== 'all') {
const categoryId = parseInt(category, 10);
if (!isNaN(categoryId)) {
params.diary_category_id = categoryId;
}
} else {
// 'all' means don't pass diary_category_id (or pass empty string)
params.diary_category_id = null;
}
return params;
}, [category, subject, sortBy, user?.id, subjects]);
// Fetch filtered diaries from API using the hook
const { data: diariesData, isLoading, error } = useGetDiaries(apiParams);
// Extract diary entries from API response
// API returns data.data array of student objects, each with diary_student array
// We need to flatten all diary_student entries from all students
const diaryEntries = useMemo(() => {
if (!diariesData?.data?.data) {
return [];
}
// Flatten all diary_student arrays from all student objects
const allEntries: DiaryStudentEntry[] = [];
diariesData.data.data.forEach((student) => {
if (student.diary_student && Array.isArray(student.diary_student)) {
allEntries.push(...student.diary_student);
}
});
return allEntries;
}, [diariesData]);
// Fetch diary categories from the dedicated categories API
// This provides all available categories for the dropdown
const { data: categoriesData } = useGetDiaryCategories();
// Extract categories from API response for the dropdown
// Show all categories (both active and deleted) and sort by name
const categories = useMemo(() => {
if (!categoriesData?.data) {
return [];
}
// Show all categories from API (both active and deleted)
// Map all categories to the format needed for dropdown
const allCategories = categoriesData.data.map((cat) => ({
id: cat.id,
name: cat.name,
type: cat.type,
}));
// Return sorted array of all categories by name
return allCategories.sort((a, b) => a.name.localeCompare(b.name));
}, [categoriesData]);
// Calculate positive and negative counts from the currently displayed diary entries
// Count entries based on diary_category.type
// Count entries that are currently being displayed (filtered/sorted)
// This way counts reflect what the user is actually seeing
const { positiveCount, negativeCount } = useMemo(() => {
let positive = 0;
let negative = 0;
// Count from the currently displayed diary entries (filtered/sorted)
// This ensures counts match what's actually shown on the page
diaryEntries.forEach((entry) => {
const cat = entry.diary?.diary_category;
// Count all entries by category type, regardless of deleted_at status
if (cat && cat.type) {
const categoryType = cat.type;
if (categoryType === 'positive') {
positive++;
} else if (categoryType === 'negative') {
negative++;
}
}
});
return { positiveCount: positive, negativeCount: negative };
}, [diaryEntries]);
// Format date for display
// API returns date in "DD-MM-YYYY 00:00" format and created_at/updated_at in "DD-MM-YYYY HH:mm" format
const formatDate = (dateString: string, timeString?: string) => {
// Use the date from diary.date and time from created_at or updated_at
if (timeString) {
// Extract time part from timeString (format: "DD-MM-YYYY HH:mm")
const timeMatch = timeString.match(/\s(\d{2}:\d{2})/);
if (timeMatch) {
return `${dateString}, ${timeMatch[1]}`;
}
}
// Fallback to just the date
return dateString;
};
return (
{/* Breadcrumb */}