feat: implement product management with CRUD operations and responsive table

[omchouhan778]

Greptile Summary

This PR implements a complete product management feature with CRUD operations, responsive tables, and client-side state management. The implementation adds two new routes (/dashboard/product/list and /dashboard/product/add) with reusable components for adding, editing, and deleting products.

Key Changes:

• Added product schema with Zod validation for data integrity
• Implemented AddProductDialog component with file upload support using FileReader API
• Created reusable table columns with inline edit/delete actions using shadcn/ui dialogs
• Built product list page with local state management and sample data
• Enhanced use-data-table-instance hook with version tracking for proper re-rendering on row selection changes
• Added Product menu item to sidebar navigation

Issues Found:

• Critical: finance/page.tsx has missing function name causing syntax error
• Critical: sidebar-items.ts has incorrect URL format (missing leading slash) that will break routing
• Unused import in columns.tsx should be removed

Confidence Score: 2/5

• This PR contains critical syntax errors that will cause runtime failures
• The missing function name in finance/page.tsx will cause a syntax error preventing the page from loading, and the malformed URL in sidebar-items.ts will break navigation to the product section. These are blocking issues that must be fixed before merge.
• src/app/(main)/dashboard/finance/page.tsx and src/navigation/sidebar/sidebar-items.ts require immediate fixes

Important Files Changed

Filename	Overview
src/app/(main)/dashboard/product/_components/columns.tsx	created table columns with inline edit/delete actions, has unused import
src/app/(main)/dashboard/product/list/page.tsx	product list page with local state management and CRUD operations
src/navigation/sidebar/sidebar-items.ts	added product menu item with subitems, has URL format issue
src/app/(main)/dashboard/finance/page.tsx	function name was removed, causing syntax error

Sequence Diagram

sequenceDiagram
    participant User
    participant ListPage as Product List Page
    participant Dialog as Add Product Dialog
    participant Table as Product Table
    participant LocalState as React State

    User->>ListPage: Navigate to /dashboard/product/list
    ListPage->>LocalState: Initialize with sample products
    ListPage->>Table: Render with product data
    Table->>User: Display products with pagination

    User->>Dialog: Click "Add Product" button
    Dialog->>User: Show form dialog
    User->>Dialog: Fill form & submit
    Dialog->>ListPage: Call handleAdd(data)
    ListPage->>LocalState: Add new product with Date.now() ID
    LocalState->>Table: Re-render with updated data
    Table->>User: Show new product in table

    User->>Table: Click Edit icon
    Table->>User: Show edit dialog
    User->>Table: Update & submit
    Table->>ListPage: Call handleEdit(id, data)
    ListPage->>LocalState: Update product by ID
    LocalState->>Table: Re-render with updated data
    Table->>User: Show updated product

    User->>Table: Click Delete icon
    Table->>User: Show confirmation dialog
    User->>Table: Confirm deletion
    Table->>ListPage: Call handleDelete(id)
    ListPage->>LocalState: Filter out product by ID
    LocalState->>Table: Re-render without deleted product
    Table->>User: Show updated list

Loading

[greptile-apps]

_{9 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

syntax: unused import

Suggested change

import { imageOptimizer } from "next/dist/server/image-optimizer";

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/app/(main)/dashboard/product/_components/columns.tsx
Line: 40:40

Comment:
**syntax:** unused import

```suggestion
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

syntax: function name is missing

Suggested change

	export default function () {
	export default function FinancePage() {

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/app/(main)/dashboard/finance/page.tsx
Line: 12:12

Comment:
**syntax:** function name is missing

```suggestion
export default function FinancePage() {
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

[arhamkhnz]

Thanks for the PR.

Please fix all Greptile comments. Also revert the finance page changes, PR should be limited to the product feature only.

Remove the newTab option from sidebar-items, opening product pages in a new tab is not needed.

Lastly, make sure the UI and overall experience makes sense. Right now it is just a basic data table with products and a simple add product form on the add product page, which does not feel very useful, and the modal action buttons are not working.

Once these are resolved, we can review again.

[omchouhan778]

Hi Arham, Thanks for the detailed review and feedback. I understand the concerns and will address all of them. I’ll fix the Greptile comments, revert the finance page changes, and limit the PR strictly to the product feature. I’ll also remove the "newTab" option from the sidebar items. Additionally, I’ll work on improving the product UI/UX to make it more meaningful and ensure the modal action buttons function correctly. Once these updates are completed, I’ll push the changes and request a re-review. Thanks for your guidance. Best regards, OM

…

On Thu, 8 Jan, 2026, 9:41 am Arham Khan, ***@***.***> wrote: *arhamkhnz* left a comment (arhamkhnz/next-shadcn-admin-dashboard#34) <#34 (comment)> Thanks for the PR. Please fix all Greptile comments. Also revert the finance page changes, PR should be limited to the product feature only. Remove the newTab option from sidebar-items, opening product pages in a new tab is not needed. Lastly, make sure the UI and overall experience makes sense. Right now it is just a basic data table with products and a simple add product form on the add product page, which does not feel very useful, and the modal action buttons are not working. Once these are resolved, we can review again. — Reply to this email directly, view it on GitHub <#34 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2Y2Q3YNEBBGVVOZTQJ5M3L4FXKIFAVCNFSM6AAAAACQ7OGD66VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTOMRRG44TOOJVHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>