This Next.js application parses CSV timecard data, groups entries by agent and date, and displays them in an interactive table.
If you're new to development, you'll need to install Node.js and npm (Node Package Manager) first. You can download them from https://nodejs.org/.
Once you have Node.js and npm installed, follow these steps:
- Clone the repository:
git clone https://github.com/your-username/your-repository.git(Replace https://github.com/your-username/your-repository.git with the actual repository URL.)
- Navigate to the project directory:
cd your-repository(Replace your-repository with the name of the cloned directory.)
- Install dependencies:
npm install- Run the development server:
npm run dev-
Open in browser: Navigate to http://localhost:3000 in your browser.
-
Paste CSV Data: Paste your timecard data in CSV format into the textarea and click "Process CSV".
- Parses timecard data from CSV input.
- Groups entries by agent and date.
- Displays entries in a sortable table.
- Provides separate tabs for each agent.
- Highlights logons, logoffs, and auxiliary reasons.
- Calculates and displays durations.
- New: Improved error handling for CSV parsing.
- New: Enhanced user interface with
Comboboxfor agent selection.
- Next.js
- React
- TypeScript
- Tailwind CSS
- date-fns (for date formatting)
- Papa Parse (for CSV parsing)
- Lodash (for utility functions)
src/app: Contains the main application logic and pages.page.tsx: Renders the TimecardView component.
src/components: Reusable UI components.TimeCardView.tsx: Core component for processing and displaying timecard data.ui/tabs.tsx: Provides the tabbed interface.
src/lib: Utility functions and helpers.public: Static assets.
Contributions are welcome! Please open an issue or submit a pull request.
MIT