📊 Sales Analytics Dashboard

A clean, high-performance dashboard for visualizing and exploring sales data with cursor-based pagination.

---

📌 Table of Contents

• Overview
• Key Features
• Tech Stack
• Architecture & Decisions
• Getting Started
• Project Structure
• Performance Optimizations

---

🔎 Overview

This dashboard interacts with a Sales API to authenticate users, fetch transaction data, apply real-time filters, and visualize sales trends over time.

The main challenge of this build was handling Cursor-Based Pagination (before/after tokens) and crafting a smooth Next/Previous navigation experience without re-fetching stale data.

---

✨ Key Features

1. 🔍 Advanced Filtering

• Date filtering with Start and End range
• Minimum price search
• Email and Phone filtering
• Instant data refresh on filter updates

2. 📈 Data Visualization

• Interactive time-series Area Chart (Recharts)
• Responsive design across all screen sizes

3. ⚡ Smart Pagination

• Before/After cursor-based API navigation
• History Stack to solve the Previous Page problem
• No stale data or repeated requests

4. 📊 Interactive Data Table

• Server-side sorting (Date + Price)
• Loading skeletons for smooth UX

5. 💾 Caching & State Management

• React Query for server state management
• Instant back navigation using caching

---

🛠 Tech Stack

Category	Technology	Purpose
Framework	Next.js 14	App structure & routing
Styling	Tailwind CSS	Responsive UI design
State / Async	React Query	Data fetching, caching
Charting	Recharts	Sales trend visualization
Animation	Framer Motion	Visual transitions
Icons	Lucide React	Clean SVG icons

---

🧠 Architecture & Decisions

Why React Query?

• Prevents duplicate requests
• Caches each page for instant back navigation
• Provides isLoading / isFetching for better UX

Pagination Problem & Solution

The Sales API uses before/after cursor-based pagination, which makes navigating backwards difficult.

Solution:

• A Navigation History Stack stores previous cursors.
• Next → Push current cursor
• Previous → Pop cursor from history
• Ensures smooth and accurate page navigation

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation Steps

git clone https://github.com/Umair505/Sales-Dashboard cd sales-dashboard npm install npm run dev

yaml Copy code

Open ➝ http://localhost:3000

---

Usage

Once the development server is running, you can interact with the Sales Dashboard:

1. Access the Dashboard: Open http://localhost:3000 in your web browser.
2. View Sales Overview: The main page (src/app/page.js) displays an initial overview of sales data, including charts and a table.
3. Filter Data: Use the Filter Bar at the top (src/components/dashboard/FilterBar.jsx) to refine the displayed sales data. You can filter by:
   • Date range (start and end dates)
   • Minimum price
   • Customer email
   • Customer phone number
   • Sort order (ascending/descending)
4. Analyze Charts: The Sales Chart (src/components/dashboard/SalesChart.jsx) will dynamically update to visualize sales trends based on your applied filters.
5. Explore Table Details: The Sales Table (src/components/dashboard/SalesTable.jsx) provides detailed records. You can:
   • Sort columns by clicking on their headers.
   • Navigate through pages using the pagination controls.
6. Real-time Updates: The dashboard utilizes TanStack React Query to efficiently fetch and update data, providing a near real-time experience.

Project Structure

The project follows a standard Next.js application structure with clear separation of concerns:

.
├── public/                 # Static assets (images, fonts)
├── src/                    # Main application source code
│   ├── app/                # Next.js App Router root layout and pages
│   │   ├── favicon.ico     # Site favicon
│   │   ├── globals.css     # Global stylesheets
│   │   ├── layout.js       # Root layout, global providers (QueryProvider, Toaster)
│   │   └── page.js         # Main dashboard page component
│   ├── components/         # Reusable React components
│   │   ├── dashboard/      # Components specific to the dashboard view
│   │   │   ├── FilterBar.jsx   # UI for filtering sales data
│   │   │   ├── SalesChart.jsx  # Chart visualization of sales data
│   │   │   └── SalesTable.jsx  # Table display of sales records
│   │   ├── providers/      # Context providers for global state
│   │   │   └── QueryProvider.jsx # TanStack React Query context
│   │   └── ui/             # Reusable UI primitives (buttons, input, cards, etc.)
│   ├── hooks/              # Custom React hooks
│   │   └── useSalesData.js # Hook for fetching and managing sales data
│   └── lib/                # Utility functions
│       └── utils.js        # General utility functions (e.g., for Tailwind CSS class merging)
├── .eslintrc.mjs           # ESLint configuration
├── jsconfig.json           # JavaScript configuration for VS Code
├── next.config.mjs         # Next.js configuration
├── package.json            # Project dependencies and scripts
├── postcss.config.mjs      # PostCSS configuration (for Tailwind CSS)
└── README.md               # Project README file

Contributing

Contributions are welcome! If you'd like to improve this project, please follow these steps:

1. Fork the repository.
2. Clone your forked repository: git clone https://github.com/YOUR_USERNAME/Sales-Dashboard.git
3. Create a new branch: git checkout -b feature/your-feature-name
4. Make your changes.
5. Commit your changes: git commit -m "feat: Add new feature"
6. Push to the branch: git push origin feature/your-feature-name
7. Open a Pull Request against the main branch of the original repository.

Please ensure your code adheres to the project's coding standards and includes appropriate tests if applicable.