**AI Frontend Generation Prompt for Admin Manuscript Draft Management (v0)****Project Context:**This project is a comprehensive web-based publishing management application. It consists of a main author portal and a separate, dedicated Admin Panel. Both frontends are built with Next.js, interacting with a Laravel 10 backend. The Admin Panel focuses on efficient management of publishing workflows, including user, manuscript, finance, and content management.**Frontend Tech Stack:**Next.js (App Router), TypeScript, React, TanStack Query for data fetching, Jotai/Zustand for state management, ShadCN UI for accessible React primitives, and Tailwind CSS for utility-first styling. React Hook Form with Zod for form management.**Visual Style & Design Principles:**The application adheres to a clean, modern, and professional aesthetic.* **Design Principles**: Clarity over cleverness, progressive disclosure, consistent patterns, immediate feedback, and accessible by default. Mobile-first design is crucial.* **Color Palette**: Primary: `#0064D3`, Secondary: `#64748b`, Accent: `#F7E51F`, Success: `#22c55e`, Warning: `#eab308`, Error: `#ef4444`, Neutral: `#f1f5f9`, `#334155`.* **Typography**: Primary font: Inter, sans-serif. Secondary font: system-ui, sans-serif. Monospace: Fira Mono, monospace.* **Iconography**: Use icons from Lucide or Heroicons.* **Spacing & Layout**: Utilize a 12-column responsive grid system with Tailwind's default spacing scale.* **Responsiveness**: The design must be mobile-first. Layouts should adapt gracefully: sidebars collapse to drawers on mobile, cards stack vertically, top navigation becomes a hamburger menu, and tables should transform into more digestible list views on smaller screens. Larger tap targets are required for touch interfaces.* **Animations**: Subtle and purposeful motion (150-300ms transitions) for button feedback, stepper transitions, dialog/modal fade/scale, and toast notifications.* **Performance**: Implement skeleton loading states for all asynchronous data fetching to improve perceived performance.---**1. High-Level Goal:**Create a responsive Admin Panel page for Manuscript Draft Management, displaying a filterable and sortable list of manuscripts with an action for direct follow-up via WhatsApp, incorporating mock data, skeleton loading, and robust error handling via modals.**2. Detailed, Step-by-Step Instructions:**1. **Create New Page Component**: Generate a new Next.js page component for the Admin Panel's Manuscript Draft Management. The file path should follow Next.js App Router conventions, e.g., `nasmedia_admin/src/app/dashboard/drafts/page.tsx`.2. **Layout Integration**: Implement a responsive layout for this page. On desktop, it should integrate with a persistent sidebar navigation. On mobile, the sidebar should collapse into a drawer or be accessible via a hamburger menu.3. **Data Fetching with TanStack Query**: * Set up TanStack Query to manage data fetching for the manuscript list. * Initially, fetch data from a mock source. * Implement a skeleton loading component (using `shadcn/ui` skeleton) that displays while the manuscript data is being fetched.4. **Manuscript List Table**: * Display the fetched manuscripts in a `shadcn/ui` Table component. * The table should include the following columns: * `Judul Buku` (Book Title) * `Kategori` (Category) * `Rencana Waktu Terbit` (Planned Publication Time) * `Jumlah Siswa/Mahasiswa Diampu` (Number of Students/Lecturers Mentored) * `Estimasi Jumlah Buku Terjual` (Estimated Books Sold) * `Status Isi Naskah` (Content Status - display progress for each part, e.g., "Kata Pengantar: Completed, Bab I: In Progress, etc." or a percentage completion) * `Informasi Penulis Tambahan` (Additional Author Info - e.g., Author Name, Email, WhatsApp) * `Status Dokumen Legal Digital` (Digital Legal Document Status - e.g., MoU, Contract, Terms & Conditions, Originality Letter status) * `Status` (Current Manuscript Status: Draft, Submitted, In Review, Revision, Accepted, Published, Rejected) * `Aksi` (Actions: Follow up via WhatsApp) * Ensure the table is responsive, potentially transforming into a card-list view on smaller screens.5. **Filtering and Sorting**: * Add filtering controls above the table for: `Judul Buku`, `Kategori`, `Rencana Waktu Terbit`, `Jumlah Siswa/Mahasiswa Diampu`, `Estimasi Jumlah Buku Terjual`, `Status Isi Naskah`, `Informasi Penulis Tambahan`, and `Status Dokumen Legal Digital`. * Implement client-side sorting for `Judul Buku` and `Rencana Waktu Terbit` columns.6. **Action Buttons**: * For each manuscript row, provide a `shadcn/ui` Button component for "Follow up via WhatsApp". * Clicking this button should open a new tab/window with a WhatsApp chat link pre-filled with the author's WhatsApp number and a default message (e.g., `https://wa.me/{whatsapp_number}?text=Halo%20{author_name}, kami ingin menanyakan progres naskah Anda: {manuscript_title}.`).7. **Error Handling Modals**: * Implement a centralized error handling mechanism. Any API errors or client-side errors should be displayed in a `shadcn/ui` Dialog/Modal. * The modal content must be in human-readable Indonesian, without technical terms, error codes, or stack traces. * If the error is unknown or generic, display the default message: "Maaf, terjadi kesalahan pada sistem. Silakan coba lagi nanti." * Ensure the modal has a consistent design, is dismissible by the user, and does not block access to other features after being closed.8. **State Management**: Use Jotai or Zustand for any global state management required (e.g., filter values, loading states, user session if needed).9. **Mock Data Generation**: Create a file `nasmedia_admin/src/lib/mock/manuscripts.ts` that exports a TypeScript interface for `Manuscript` and an array of `mockManuscripts` (at least 5-10 diverse entries) and `mockEditors`. Ensure the `Manuscript` interface and mock data align with the `Naskah` and `Pengguna` entities in `docs/ERD_Nasmedia.id.md`, specifically including `nomor_whatsapp` in `author_info`.10. **API Integration Skeleton**: Create placeholder functions within `nasmedia_admin/src/lib/api/` (e.g., `fetchManuscripts`) that initially use the mock data but are structured to easily switch to actual API calls to the Laravel backend. These functions should handle loading and error states.**3. Code Examples, Data Structures & Constraints:*** **Mock Data Structure (`nasmedia_admin/src/lib/mock/manuscripts.ts`):** ```typescript export type ManuscriptStatus = "Draft" | "Submitted" | "In Review" | "Revision" | "Accepted" | "Published" | "Rejected" | "Pengiriman" | "Selesai"; export type ContentPartStatus = "pending" | "in_progress" | "completed"; export interface Manuscript { id: string; title: string; category: string; planned_publication_time: string; // YYYY-MM-DD students_mentored: number; estimated_books_sold: number; content_progress: { kata_pengantar: ContentPartStatus; daftar_isi: ContentPartStatus; bab_i: ContentPartStatus; bab_ii: ContentPartStatus; bab_iii: ContentPartStatus; bab_iv: ContentPartStatus; kesimpulan: ContentPartStatus; daftar_pustaka: ContentPartStatus; glossarium: ContentPartStatus; indeks: ContentPartStatus; [key: string]: ContentPartStatus; // For additional chapters }; author_info: { name: string; email: string; whatsapp: string; // From ERD: Pengguna.nomor_whatsapp }; legal_documents_status: { mou: boolean; contract: boolean; terms_conditions: boolean; originality_letter: boolean; }; status: ManuscriptStatus; current_editor: { id: string; name: string } | null; // Still useful for displaying who is assigned, even if not assignable from this page created_at: string; // ISO 8601 string } export const mockManuscripts: Manuscript[] = [ { id: "manuscript-1", title: "Panduan Lengkap Next.js untuk Pemula", category: "Teknologi", planned_publication_time: "2025-12-15", students_mentored: 200, estimated_books_sold: 7500, content_progress: { kata_pengantar: "completed", daftar_isi: "completed", bab_i: "completed", bab_ii: "completed", bab_iii: "completed", bab_iv: "in_progress", kesimpulan: "pending", daftar_pustaka: "pending", glossarium: "pending", indeks: "pending", }, author_info: { name: "Budi Santoso", email: "budi.santoso@example.com", whatsapp: "6281211112222", // Example WhatsApp number }, legal_documents_status: { mou: true, contract: true, terms_conditions: true, originality_letter: true, }, status: "Submitted", current_editor: null, created_at: "2025-07-01T09:30:00Z", }, { id: "manuscript-2", title: "Resep Masakan Nusantara Modern", category: "Kuliner", planned_publication_time: "2026-01-20", students_mentored: 0, estimated_books_sold: 12000, content_progress: { kata_pengantar: "completed", daftar_isi: "completed", bab_i: "completed", bab_ii: "completed", bab_iii: "completed", bab_iv: "completed", kesimpulan: "completed", daftar_pustaka: "completed", glossarium: "completed", indeks: "completed", }, author_info: { name: "Siti Aminah", email: "siti.aminah@example.com", whatsapp: "6281333334444", }, legal_documents_status: { mou: true, contract: true, terms_conditions: true, originality_letter: true, }, status: "Accepted", current_editor: { id: "editor-1", name: "Dewi Lestari" }, created_at: "2025-06-25T14:00:00Z", }, { id: "manuscript-3", title: "Sejarah Peradaban Kuno", category: "Sejarah", planned_publication_time: "2025-11-01", students_mentored: 50, estimated_books_sold: 3000, content_progress: { kata_pengantar: "completed", daftar_isi: "completed", bab_i: "completed", bab_ii: "in_progress", bab_iii: "pending", bab_iv: "pending", kesimpulan: "pending", daftar_pustaka: "pending", glossarium: "pending", indeks: "pending", }, author_info: { name: "Agus Wijaya", email: "agus.wijaya@example.com", whatsapp: "6281555556666", }, legal_documents_status: { mou: true, contract: true, terms_conditions: true, originality_letter: false, // Missing originality letter }, status: "Draft", current_editor: null, created_at: "2025-07-05T11:45:00Z", }, { id: "manuscript-4", title: "Dasar-Dasar Desain Grafis", category: "Desain", planned_publication_time: "2026-03-10", students_mentored: 120, estimated_books_sold: 6000, content_progress: { kata_pengantar: "completed", daftar_isi: "completed", bab_i: "completed", bab_ii: "completed", bab_iii: "completed", bab_iv: "completed", kesimpulan: "completed", daftar_pustaka: "completed", glossarium: "completed", indeks: "completed", }, author_info: { name: "Rina Fitri", email: "rina.fitri@example.com", whatsapp: "6281777778888", }, legal_documents_status: { mou: true, contract: true, terms_conditions: true, originality_letter: true, }, status: "Published", current_editor: { id: "editor-2", name: "Andi Pratama" }, created_at: "2025-05-01T16:00:00Z", }, { id: "manuscript-5", title: "Pengantar Ekonomi Makro", category: "Ekonomi", planned_publication_time: "2025-10-01", students_mentored: 300, estimated_books_sold: 9000, content_progress: { kata_pengantar: "completed", daftar_isi: "completed", bab_i: "completed", bab_ii: "completed", bab_iii: "completed", bab_iv: "completed", kesimpulan: "completed", daftar_pustaka: "completed", glossarium: "completed", indeks: "completed", }, author_info: { name: "Dewi Kusuma", email: "dewi.kusuma@example.com", whatsapp: "6281999990000", }, legal_documents_status: { mou: true, contract: true, terms_conditions: true, originality_letter: true, }, status: "In Review", current_editor: { id: "editor-3", name: "Citra Kirana" }, created_at: "2025-06-10T10:00:00Z", }, ]; export const mockEditors = [ { id: "editor-1", name: "Dewi Lestari" }, { id: "editor-2", name: "Andi Pratama" }, { id: "editor-3", name: "Citra Kirana" }, { id: "editor-4", name: "Fajar Nugraha" }, ]; ```* **API Response Structure (Error Example):** ```json { "message": "Terjadi kesalahan validasi.", "errors": { "field_name": ["Pesan error untuk field ini."] } } ``` or for general errors: ```json { "message": "Terjadi kesalahan pada server." } ```* **Frontend Error Handling Constraint**: All error messages displayed to the user must be in human-readable Indonesian, without exposing technical details, error codes, or stack traces. A default message "Maaf, terjadi kesalahan pada sistem. Silakan coba lagi nanti." should be used for unhandled or generic errors.**4. Define a Strict Scope:**You should create a new page component for the Admin Panel's Manuscript Draft Management (e.g., `nasmedia_admin/src/app/dashboard/drafts/page.tsx` or similar, following Next.js app router conventions). You should also create a mock data file (e.g., `nasmedia_admin/src/lib/mock/manuscripts.ts`). Do NOT alter any other existing files or components unless they are directly related to the new page's functionality (e.g., adding a navigation link in an existing layout component, if necessary, but prioritize creating new files)