Autotask API Integration Dashboard

A modern Next.js application for interacting with the Autotask PSA REST API, built with React, TypeScript, shadcn/ui, and Tailwind CSS.

Features

• Dashboard Overview - View tickets, tasks, and company information
• Ticket Management - List, filter, and manage support tickets
• Task Tracking - Monitor and update project tasks
• Company Selector - Filter data by company
• Resource Management - Filter by assigned resources
• Modern UI - Beautiful interface built with shadcn/ui components
• Dark Mode Support - Automatic dark/light theme
• Real-time Updates - Fetch latest data from Autotask API
• Secure Authentication - API credentials stored in environment variables

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• Icons: Lucide React
• Date Handling: date-fns
• API Integration: Native fetch with custom client

Prerequisites

Before you begin, ensure you have:

1. Node.js 18+ installed
2. Autotask API credentials:
   • API Username (format: apiuser@YOURDOMAIN.COM)
   • API Secret/Password
   • API Integration Code
   • API Base URL (e.g., https://webservices1.autotask.net/atservicesrest/v1.0)

Installation

1. Clone the repository and navigate to the app directory:

cd /Users/lorentz/projects/PSA-Utils/autotask-app

2. Install dependencies:

npm install

3. Create a .env.local file in the root directory:

# Autotask API Configuration
AUTOTASK_API_URL=https://webservices1.autotask.net/atservicesrest/v1.0
AUTOTASK_USERNAME=your-api-username@yourdomain.com
AUTOTASK_SECRET=your-api-password
AUTOTASK_API_INTEGRATION_CODE=your-tracking-code

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser

Project Structure

autotask-app/
├── app/
│   ├── api/              # API route handlers
│   │   ├── tickets/      # Ticket endpoints
│   │   ├── tasks/        # Task endpoints
│   │   ├── companies/    # Company endpoints
│   │   ├── resources/    # Resource endpoints
│   │   └── picklists/    # Picklist endpoints
│   └── page.tsx          # Main dashboard page
├── components/
│   ├── tickets/          # Ticket-related components
│   ├── tasks/            # Task-related components
│   ├── companies/        # Company-related components
│   └── ui/               # shadcn/ui components
├── lib/
│   ├── services/         # API client and services
│   │   ├── autotask-client.ts
│   │   └── autotask-factory.ts
│   ├── types/            # TypeScript type definitions
│   │   └── autotask.ts
│   └── hooks/            # Custom React hooks
│       └── use-api.ts
└── public/               # Static assets

API Endpoints

The application provides the following API routes:

• GET /api/tickets - Fetch tickets (with optional filters)
• POST /api/tickets - Create a new ticket
• GET /api/tasks - Fetch tasks (with optional filters)
• POST /api/tasks - Create a new task
• GET /api/companies - Fetch all active companies
• GET /api/resources - Fetch resources/users
• GET /api/picklists - Fetch picklist values for dropdowns

Key Features Implementation

Rate Limiting

The API client includes built-in rate limiting (10 requests/second) to comply with Autotask API limits.

Error Handling

Comprehensive error handling with user-friendly error messages and retry capabilities.

Type Safety

Full TypeScript support with detailed type definitions for all Autotask entities.

Responsive Design

Mobile-friendly interface that works on all device sizes.

Development

Adding New Features

1. New API Endpoints: Add route handlers in app/api/
2. New Components: Create components in components/
3. New Entity Types: Update types in lib/types/autotask.ts
4. New API Methods: Extend lib/services/autotask-client.ts

Testing

Run the development server and test with your Autotask sandbox environment:

npm run dev

Building for Production

npm run build
npm start

Security Considerations

• Never commit .env.local or any file containing API credentials
• Use environment variables for all sensitive configuration
• Implement proper authentication for production deployment
• Consider adding user authentication layer
• Use HTTPS in production

Common Issues & Solutions

API Connection Issues

• Verify your API credentials are correct
• Check the API URL matches your Autotask zone
• Ensure your API user has appropriate permissions

Rate Limiting

• The client automatically handles rate limiting
• If you encounter 429 errors, the client will retry

CORS Issues

• API routes act as a proxy to avoid CORS issues
• All Autotask API calls go through Next.js API routes

Future Enhancements

• Add Redis caching for improved performance
• Implement real-time updates with WebSockets
• Add attachment upload functionality
• Create ticket/task editing forms
• Add user authentication and session management
• Implement advanced search and filtering
• Add data export functionality
• Create dashboard widgets and analytics

Contributing

Feel free to submit issues and enhancement requests!

License

This project is for internal use. Please refer to your organization's policies.

Support

For issues related to:

• Autotask API: Consult the Autotask REST API Documentation
• Application Issues: Create an issue in this repository

---

Built with ❤️ using Next.js, React, and shadcn/ui