Asana Task Reporting Dashboard

This is a Next.js project bootstrapped with create-next-app, designed to provide a reporting dashboard for tasks managed in Asana.

It allows users to visualize and filter Asana tasks based on various criteria.

Features

• Authentication: Secure access to the dashboard (details likely in src/lib/auth.js and src/pages/api/auth.js).
• Task Dashboard (/dashboard): The main interface for viewing task data.
  • Task Filtering: Filter tasks by Brand, Asset Type, Requester, Assignee(s), Task Type(s), Date Range, and Completion Status using the FilterPanel.
  • Task Summary: Displays a high-level overview of the current task set (TaskSummary).
  • Data Visualization: Includes various charts to analyze task distribution and trends:
    • Task Completion Status
    • Tasks by Deadline
    • Tasks by Brand
    • Tasks by Assignee
    • Tasks by Asset Type
    • Tasks by Requester
    • Task Creation & Completion Trend (Line Chart)
  • Interactive Charts: Click on charts to view them in a larger modal window (ChartModal).
  • Task Table: A detailed table (TaskTable) showing filtered tasks.
• Backend API (/api/tasks):
  • Fetches task data (likely interacts with the Asana API).
  • Provides distinct values for filter dropdowns.
  • Handles filtering logic based on query parameters.

Tech Stack

• Next.js (React Framework with Pages Router)
• React
• Tailwind CSS
• Chart.js (or similar charting library used within components) - Assumption, verify if needed
• Node.js (for backend API routes)

Project Structure Highlights

/src
├── components/      # Reusable React components (FilterPanel, TaskTable, Charts, etc.)
├── lib/             # Utility functions, authentication logic (e.g., auth.js)
├── pages/           # Next.js pages and API routes
│   ├── api/         # API endpoints (auth.js, tasks.js)
│   ├── _app.js      # Custom App component
│   ├── dashboard.js # Main dashboard page
│   └── index.js     # Landing/Login page (potentially)
├── styles/          # Global styles
public/              # Static assets

Getting Started

First, set up your environment variables. You will likely need credentials for Asana and potentially authentication secrets. Create a .env.local file based on .env.example (if one exists) or the required variables mentioned in the API/lib files.

Then, run the development server:

npm install
npm run dev
# or
yarn install
yarn dev
# or
pnpm install
pnpm dev
# or
bun install
bun dev

Open http://localhost:3000 with your browser to see the result. Access the dashboard via /dashboard after logging in.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.