Financial Dashboard Template

Modern financial dashboard built with Next.js 15, React 19, featuring multi-language support, authentication, and interactive widgets.

Key Features

• Internationalization: English & Arabic support with next-intl
• Authentication: Custom Redux-based auth with JWT tokens
• Drag & Drop: Interactive dashboard widgets with @dnd-kit
• Charts & Analytics: Data visualization with Recharts
• Dark/Light Mode: Theme switching with system detection
• Responsive Design: Works on all devices
• Redux State: Centralized state management

Technical Stack

Core Technologies:

• Next.js 15.3.4 with App Router & Turbopack
• React 19.0.0 with modern features
• TypeScript 5 for type safety
• Tailwind CSS 4 utility framework

Key Libraries:

• UI: Radix UI, Lucide React, Framer Motion
• State: Redux Toolkit, React Redux
• Forms: React Hook Form, Zod validation
• Auth: bcryptjs, jsonwebtoken, localStorage
• i18n: next-intl with routing
• Charts: Recharts, @tanstack/react-table
• DnD: @dnd-kit suite (core, sortable, modifiers)
• Dates: react-day-picker, date-fns
• Utils: clsx, tailwind-merge, class-variance-authority

Components Overview

Dashboard Widgets:

• DashboardGrid - Main layout with draggable widgets
• BarChartWidget, StatisticsChart - Financial data visualization
• SmartInvestPanel - Investment tracking
• TransactionsPanel - Recent transactions
• WorldMapWidget - Geographic data
• CardSection - Credit card management

Core Features:

• Analytics: RevenueChart, CategoryChart
• Transactions: Table with filtering, add/export dialogs
• Authentication: LoginForm, social buttons, route protection
• Layout: Header with notifications, i18n sidebar
• UI Library: 36+ reusable components (buttons, forms, tables, etc.)

Getting Started

Installation:

1. Download ZIP file and extract
2. Run npm install or yarn install
3. Run npm run dev or yarn dev
4. Open http://localhost:3000

Pre-configured files:

• next.config.js - Next.js with Turbopack & SVG handling
• tailwind.config.mjs - Tailwind CSS v4 setup
• messages/ - English & Arabic translations
• All TypeScript, ESLint, and component configs included

Customization

Theme System:

• CSS custom properties for light/dark themes
• RTL support for Arabic
• Tailwind integration with component variants

Adding New Pages:

1. Create src/app/[locale]/dashboard/your-page/page.tsx
2. Add navigation in src/components/layout/Sidebar/config.tsx
3. Add translations in messages/en.json and messages/ar.json

Internationalization:

• Update src/i18n/routing.ts for new languages
• Create message files in messages/ folder

Performance & Architecture

Optimizations:

• Next.js 15 with Turbopack for fast builds
• Automatic code splitting and lazy loading
• SVG optimization with @svgr/webpack

Project Structure:

Browser Support: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Scripts: dev, build, start, lint, type-check, build:analyze