Tasks table by nabeel-workspace · Pull Request #3 · nabeel-workspace/betterdash

nabeel-workspace · 2025-12-29T22:24:18Z

Summary by CodeRabbit

New Features
- Complete task management system with create, edit, and delete operations
- Bulk update capabilities for task status and priority
- CSV import functionality for batch task creation
- Task labeling and filtering features
- Enhanced sorting and pagination controls
UI/UX Improvements
- Skeleton loading screens for improved perceived performance
- Toast notifications for operation feedback
- Better error handling and user communication

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Introduces a new Task model in the Prisma schema and corresponding Zod validation schemas. Implements server actions for creating, updating, and deleting tasks using Prisma. Updates the task mutation drawer to use these actions and provide user feedback with toast notifications.

Adds optional className, thClassName, and tdClassName properties to the ColumnMeta interface in @tanstack/react-table, enabling custom styling for table columns.

Introduces @tanstack/react-query for data fetching and caching. Refactors the tasks table to use server-side pagination, sorting, and filtering via new getTasksFn and seedTasksFn server actions. Adds a unique 'code' field to tasks, updates Prisma schema and Zod schema, and updates UI to display and filter by task code. Wraps the app in QueryClientProvider for react-query support.

Applied authenticatedMiddleware to all task server actions for security. Enhanced task label update and delete flows with optimistic UI updates and toast notifications. Updated UI components to use task code instead of ID in dialogs and ensured query invalidation after mutations for up-to-date task lists.

Added the suppressHydrationWarning prop to elements in NavUser, ProfileDropdown, and the root HTML element to address hydration mismatches between server and client rendering. This helps prevent React hydration warnings for user-specific data rendered on the server.

Implemented server actions and UI logic for bulk updating status/priority and deleting multiple tasks. Updated the data table bulk actions and multi-delete dialog to use react-query mutations and server functions for improved feedback and state management.

Implemented CSV export for selected tasks and CSV import dialog with validation and feedback. Added new server actions for importing and exporting tasks, including schema validation and code generation logic. Updated task schema to support import, and improved code generation for task creation and seeding to ensure unique codes.

vercel · 2025-12-29T22:24:22Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
betterdash	Ready	Preview, Comment	Dec 29, 2025 10:24pm

netlify · 2025-12-29T22:24:26Z

❌ Deploy Preview for betterdash failed.

Name	Link
🔨 Latest commit	`e0c8fd8`
🔍 Latest deploy log	https://app.netlify.com/projects/betterdash/deploys/6952ff954f4da70008c4a47a

coderabbitai · 2025-12-29T22:24:26Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This pull request introduces a comprehensive task management system powered by React Query. It adds a Prisma Task model, creates nine server actions for CRUD and bulk operations, refactors task components to fetch data from the server instead of props, integrates React Query for state management and cache invalidation, and adds new validation schemas and import capabilities.

Changes

Cohort / File(s)	Summary
Infrastructure & Dependencies `package.json`, `src/routes/__root.tsx`	Added `@tanstack/react-query` dependency (^5.90.12). Wrapped root app with QueryClientProvider to enable React Query throughout the app.
Database Schema `prisma/schema.prisma`, `src/features/tasks/data/schema.ts`	Added new Prisma Task model with fields id, code (unique), title, status, label, priority, timestamps. Extended Task schema with required `code` field; introduced `createTaskSchema`, `CreateTask` type, and `importTaskSchema` for validation.
Server Actions `src/features/tasks/server/actions.ts`	Implemented nine server action handlers: `createTaskFn`, `updateTaskFn`, `deleteTaskFn`, `deleteTasksFn`, `updateTasksFn`, `getTasksByIdsFn`, `importTasksFn`, `getTasksFn`, `seedTasksFn`. All include authentication, validation, and Prisma persistence. Features sequential TASK-XXXX code generation and bulk operations support.
Task Table & Data Fetching `src/features/tasks/components/tasks-table.tsx`, `src/features/tasks/index.tsx`	Refactored TasksTable from prop-based to React Query-driven: uses `useQuery` with route-based search params for pagination, sorting, and filtering. Removed static `data` prop, added skeleton loading UI and conditional seed button.
Task CRUD Operations `src/features/tasks/components/tasks-mutate-drawer.tsx`, `src/features/tasks/components/tasks-dialogs.tsx`	Introduced mutation-based create/update flow in drawer with async toast feedback and button disable state. Implemented delete workflow in dialogs using `deleteTaskFn` with query invalidation and success/error toasts. Switched task identification from id to code in UI.
Bulk & Multi-row Operations `src/features/tasks/components/data-table-bulk-actions.tsx`, `src/features/tasks/components/data-table-row-actions.tsx`, `src/features/tasks/components/tasks-multi-delete-dialog.tsx`	Added bulk status/priority updates via `updateTasksFn`, bulk export with CSV generation, and label editing mutations. Introduced route-based query invalidation for ['tasks', search]. Multi-delete replaced sleep-based waiting with actual mutation flow.
Task Import `src/features/tasks/components/tasks-import-dialog.tsx`	Implemented CSV import with stricter file validation (MIME type and extension checks), FileReader parsing, field filtering, and batch import mutation. Shows loading state and async toast feedback during import.
UI & Display Updates `src/features/tasks/components/tasks-columns.tsx`, `src/components/layout/nav-user.tsx`, `src/components/profile-dropdown.tsx`	Changed Task column accessor from 'id' to 'code' with width adjustment. Added `suppressHydrationWarning` to AvatarFallback and name/email elements in two nav/profile components to suppress SSR hydration mismatch warnings.
Route & Type Definitions `src/routes/_authenticated/tasks/index.tsx`, `src/types/react-table.d.ts`	Added optional `sort` parameter (array of sort objects) to tasks route search schema. Extended react-table ColumnMeta interface with optional styling properties: `className`, `thClassName`, `tdClassName`.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~55 minutes

Poem

🐰 Hop, hop! With queries in our cache,
React bounds with speed so fast,
Tasks stored in schemas neat and true,
Mutations dance—create, delete, renew!
Codes sequential, like carrots in a row,
Our little warren is ready to grow! 🥕

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5313db8 and e0c8fd8.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (18)

package.json
prisma/schema.prisma
src/components/layout/nav-user.tsx
src/components/profile-dropdown.tsx
src/features/tasks/components/data-table-bulk-actions.tsx
src/features/tasks/components/data-table-row-actions.tsx
src/features/tasks/components/tasks-columns.tsx
src/features/tasks/components/tasks-dialogs.tsx
src/features/tasks/components/tasks-import-dialog.tsx
src/features/tasks/components/tasks-multi-delete-dialog.tsx
src/features/tasks/components/tasks-mutate-drawer.tsx
src/features/tasks/components/tasks-table.tsx
src/features/tasks/data/schema.ts
src/features/tasks/index.tsx
src/features/tasks/server/actions.ts
src/routes/__root.tsx
src/routes/_authenticated/tasks/index.tsx
src/types/react-table.d.ts

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai · 2025-12-29T22:25:19Z

Note

Docstrings generation - SUCCESS
Generated docstrings for this pull request at #4

@nabeel-workspace

Docstrings generation was requested by @nabeel-workspace. * #3 (comment) The following files were modified: * `src/components/layout/nav-user.tsx` * `src/components/profile-dropdown.tsx` * `src/features/tasks/components/data-table-bulk-actions.tsx` * `src/features/tasks/components/data-table-row-actions.tsx` * `src/features/tasks/components/tasks-dialogs.tsx` * `src/features/tasks/components/tasks-import-dialog.tsx` * `src/features/tasks/components/tasks-multi-delete-dialog.tsx` * `src/features/tasks/components/tasks-mutate-drawer.tsx` * `src/features/tasks/components/tasks-table.tsx` * `src/features/tasks/index.tsx` * `src/routes/__root.tsx`

nabeel-workspace added 7 commits December 25, 2025 01:20

Extend ColumnMeta interface for custom class names

dc727d8

Adds optional className, thClassName, and tdClassName properties to the ColumnMeta interface in @tanstack/react-table, enabling custom styling for table columns.

nabeel-workspace merged commit 9ed301b into main Dec 29, 2025
2 of 4 checks passed

coderabbitai bot mentioned this pull request Dec 29, 2025

📝 Add docstrings to tasks-table #4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tasks table#3

Tasks table#3
nabeel-workspace merged 7 commits intomainfrom
tasks-table

nabeel-workspace commented Dec 29, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Dec 29, 2025

Uh oh!

netlify bot commented Dec 29, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 29, 2025 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Uh oh!

coderabbitai bot commented Dec 29, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

nabeel-workspace commented Dec 29, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel bot commented Dec 29, 2025

Uh oh!

netlify bot commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for betterdash failed.

Uh oh!

coderabbitai bot commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Uh oh!

coderabbitai bot commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

nabeel-workspace commented Dec 29, 2025 •

edited by coderabbitai bot

Loading

netlify bot commented Dec 29, 2025 •

edited

Loading

coderabbitai bot commented Dec 29, 2025 •

edited

Loading

coderabbitai bot commented Dec 29, 2025 •

edited

Loading