import GeneralHeader from '@admin/components/general-header'; import NoteAddModal from '@admin/components/modals/note-add-modal'; import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'; import { Badge } from '@admin/components/ui/badge'; import { Button } from '@admin/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu'; import { Input } from '@admin/components/ui/input'; import { mockNotes } from '@admin/data/static'; import AppLayout from '@admin/layouts/app-layout'; import { cn } from '@admin/lib/utils'; import type { PaginatedData } from '@admin/types'; import { Head } from '@inertiajs/react'; import { CalendarIcon, EditIcon, Heart, Notebook, Plus, Trash2 } from 'lucide-react'; import { ReactNode, useState } from 'react'; export interface Note { id: string; title: string; description: string; date: string; tag: 'Personal' | 'Work' | 'Social' | 'Important' | 'High'; people: string[]; bullets: string[]; favorites?: boolean; color?: string; } const tagColors = { Personal: 'bg-blue-100 text-blue-800 border-blue-200', Work: 'bg-orange-100 text-orange-800 border-orange-200', Social: 'bg-purple-100 text-purple-800 border-purple-200', Important: 'bg-red-100 text-red-800 border-red-200', High: 'bg-red-100 text-red-800 border-red-200', }; const tagCounts = { Team: 18, Update: 22, Low: 16, Medium: 5, High: 2, }; type ActiveTab = 'all' | 'favorites' | 'chats' | 'trash'; function Index() { const [searchQuery, setSearchQuery] = useState(''); const [activeTab, setActiveTab] = useState('all'); const [isAddNoteModalOpen, setIsAddNoteModalOpen] = useState(false); const [modalMode, setModalMode] = useState<'add' | 'edit'>('add'); const [notes, setNotes] = useState(mockNotes); const [editingNote, setEditingNote] = useState(null); const getFilteredTasks = () => { let filtered = mockNotes; switch (activeTab) { case 'favorites': filtered = mockNotes.filter((note) => note.favorites); break; case 'chats': default: filtered = mockNotes; break; } if (searchQuery) { filtered = filtered.filter( (note) => note.title.toLowerCase().includes(searchQuery.toLowerCase()) || note.description.toLowerCase().includes(searchQuery.toLowerCase()), ); } return filtered; }; const filteredNotes = getFilteredTasks(); // Create a client-side paginatedData object for the DataTable const perPage = 10; const currentPage = 1; const total = filteredNotes.length; const lastPage = Math.max(1, Math.ceil(total / perPage)); const paginatedData: PaginatedData = { data: filteredNotes.slice((currentPage - 1) * perPage, currentPage * perPage), queryParams: { page: currentPage, per_page: perPage }, meta: { from: total === 0 ? 0 : (currentPage - 1) * perPage + 1, to: Math.min(total, currentPage * perPage), total: total, current_page: currentPage, last_page: lastPage, }, links: { prev: currentPage > 1 ? 'prev' : null, next: currentPage < lastPage ? 'next' : null, }, userSummary: [], }; return (

{/* Mobile: compact dropdown for small screens */}

setActiveTab('all')} >

All Tasks

setActiveTab('chats')} > Chats

setActiveTab('trash')} >

🗑️

Trash

Tags

{Object.entries(tagCounts).map(([tag, count]) => (

{tag} {count}

))}

{/* Sidebar */}

{/* Header */}

setSearchQuery(e.target.value)} />

{/* Navigation */}

setActiveTab('chats')} >

Chats

setActiveTab('trash')} >

🗑️

Trash

{/* Tags */}

Tags

{Object.entries(tagCounts).map(([tag, count]) => (

{tag} {count}

))}

{/* Notes Grid */}

{filteredNotes.map((note) => (

{/* Card Header */}

{note.tag}

{ setEditingNote(note); setModalMode('edit'); setIsAddNoteModalOpen(true); }} />

{/* Card Content */}

{note.title}

{/* Bullet Points */}

{note.bullets.map((bullet, index) => (

{bullet}

))}

{/* Description */}

{note.description}

{/* Card Footer */}

{note.date}

{note.people.slice(0, 2).map((person, index) => ( U ))} {note.people.length > 2 && ( +{note.people.length - 2} )}

))}

{/* Add / Edit Note Modal */} { setIsAddNoteModalOpen(open); if (!open) { setEditingNote(null); setModalMode('add'); } }} mode={modalMode} initialNote={editingNote || undefined} onSubmit={(payload: any) => { if (modalMode === 'add') { const id = String(Date.now()); setNotes((s) => [ { id, title: payload.title || 'Untitled', description: payload.description || '', date: payload.date ? new Date(payload.date).toDateString() : new Date().toDateString(), tag: (payload.tag as any) || 'Personal', people: [], bullets: [], favorites: false, color: '#60a5fa', }, ...s, ]); } else if (modalMode === 'edit' && payload.id) { setNotes((s) => s.map((n) => n.id === payload.id ? { ...n, ...payload, date: payload.date ? new Date(payload.date).toDateString() : n.date } : n, ), ); } }} />

); } Index.layout = (page: ReactNode) => ( {page} ); export default Index;