Generate a Next.js application for an admin panel.

Overall Project Context:

This project is a comprehensive publishing management web application. This specific application is a separate Next.js admin panel designed for publishers to efficiently manage publishing workflows.

• Frontend Framework: Next.js

• Language: TypeScript

• State Management: Zustand

• Styling: Tailwind CSS

• UI Framework/Components: Shadcn UI (using Radix UI primitives), @tabler/icons-react (icons), recharts (charts), sonner (toasts), vaul (drawer component)

• Form Management: react-hook-form with @hookform/resolvers and zod for validation

• Data Fetching: TanStack Query (as implied by common Next.js patterns with Zustand for state management)

• Drag and Drop: @dnd-kit/core, @dnd-kit/modifiers, @dnd-kit/sortable, @dnd-kit/utilities

• Table Management: @tanstack/react-table

• Date Handling: date-fns

• Carousel: embla-carousel-autoplay, embla-carousel-react

• Styling Utilities: class-variance-authority, clsx, tailwind-merge, tailwindcss-animate

• HTTP Client: axios

• Routing/Navigation: next-themes, nextjs-toploader, nuqs

• Error Monitoring: @sentry/nextjs

• Other UI/Utility Libraries: cmdk, input-otp, kbar, match-sorter, motion, react-day-picker, react-dropzone, react-resizable-panels, react-responsive, sharp, sort-by, uuid.

Design Principles & Visuals:

Adhere to the following design principles:

• Clarity over cleverness: Prioritize clear communication.

• Progressive disclosure: Show only what's needed, when it's needed.

• Consistent patterns: Use familiar UI patterns throughout.

• Immediate feedback: Every action should have a clear, immediate response.

• Accessible by default: Design for all users from the start.

Color Palette (for reference, use Tailwind CSS equivalents where possible):

• 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 Font: Fira Mono, monospace

• Apply the specified type scale for H1, H2, H3, Body, Small.

Iconography:

• Use icons from Lucide or Heroicons libraries, ensuring consistent style and size with accessible labels.

Spacing & Layout:

• Utilize a 12-column responsive grid system (Tailwind grid).

• Apply Tailwind spacing scale (4, 8, 16, 24, 32, etc.) for consistent spacing.

Application Structure & Routing (Admin Panel Pages):

The admin panel should include the following main pages and their respective basic routing structure:

1. /auth/login: Admin Login Page

2. /dashboard/authors: Author Management Page

3. /dashboard/authors/[id]: Author Detail Page

4. /dashboard/manuscripts: Manuscript Management Page (for submitted manuscripts)

5. /dashboard/manuscripts/[id]: Submitted Manuscript Detail Page

6. /dashboard/drafts: Draft Manuscript Monitoring Page (for author's drafts)

7. /dashboard/drafts/[id]: Draft Manuscript Detail Page

8. /dashboard/finance: Financial Management Page

9. /dashboard/content: Content Management Page (including teaching materials upload)

10. /dashboard/overview: Dashboard Statistics Page

11. /dashboard/admin-accounts: Admin Account Management Page (for Superadmin to manage Editor accounts)

12. /dashboard/settings: System Settings / Configuration Page (for third-party integrations like WooCommerce and Xendit)

Navigation Structure:

Implement a persistent side menu navigation that allows easy access to all the main dashboard pages (from Author Management to System Settings). The login page should be separate from the dashboard layout.

Core Layout Structure (Dashboard):

The dashboard layout should mimic the structure found in nasmedia_fe/src/app/dashboard/layout.tsx. This means:

• The entire dashboard content should be wrapped by a KBar component.

• Inside KBar, there should be a SidebarProvider component.

• An AppSidebar component should be rendered as the main sidebar.

• The main content area should be enclosed within a SidebarInset component.

• A Header component should be present at the top of the main content area, followed by the page-specific content (children).

Component Generation Instructions (Scaffolding):

For each of the listed pages, generate a basic page structure with a placeholder for content. Focus on creating the main layout, routing, and a persistent sidebar for navigation within the dashboard, adhering to the Core Layout Structure described above. Do not implement detailed UI elements or complex logic for individual features yet, only the page shells.

Critical Constraints & UI/UX Guidelines:

• Error Handling: All frontend errors must be displayed using a modal with human-readable messages in Bahasa Indonesia. Avoid technical terms, error codes, or stack traces in user-facing messages. If an unknown error occurs, display a default message: "Maaf, terjadi kesalahan pada sistem. Silakan coba lagi nanti."

• API Interaction: All operations within this admin panel must always access the backend Express.js proxy. Do not attempt direct Supabase access from the admin frontend.

• UI Consistency: Ensure a consistent design and layout for error modals across the application.

• Accessibility: Design and implement the UI to meet WCAG 2.1 AA compliance. Ensure proper color contrast, visible focus indicators, keyboard navigation, and screen reader support.

• Responsiveness: Implement responsive design based on the following breakpoints:

  • Mobile: 0px - 639px

  • Tablet: 640px - 1023px

  • Desktop: 1024px - 1439px

  • Wide: 1440px - onwards

  Adapt layouts (e.g., sidebar collapses to drawer on mobile, cards stack vertically) and navigation (top nav becomes hamburger menu on mobile) accordingly.