Skip to content

Comments

feat: implement team management features and UI components#102

Merged
iamitprakash merged 4 commits intodevelopfrom
feat/add-view-team-dashboard
Jul 13, 2025
Merged

feat: implement team management features and UI components#102
iamitprakash merged 4 commits intodevelopfrom
feat/add-view-team-dashboard

Conversation

@AnujChhikara
Copy link
Contributor

@AnujChhikara AnujChhikara commented Jul 13, 2025

Date: 13 July 2025

Developer Name: @AnujChhikara


Issue Ticket Number

Description

  • Added new components for team management, including TeamActivity, TeamMembers, TeamTask, and TeamSearch.
  • Enhanced AppSidebar to include dynamic team links and actions.
  • Introduced UnderConstruction component for future pages.
  • Implemented a table for team members with dropdown actions for admin users.

Documentation Updated?

  • Yes
  • No

Under Feature Flag

  • Yes
  • No

Database Changes

  • Yes
  • No

Breaking Changes

  • Yes
  • No

Development Tested?

  • Yes
  • No

Screenshots

Screenshot 1
chrome_EdEYBCxhPp.mp4

Test Coverage

Screenshot 1

Additional Notes

Description by Korbit AI

What change is being made?

Implement comprehensive team management features and UI components, including tasks, activities, and member management for the team page, add a placeholder 'under construction' component, update navigation to accommodate team management, and modify the sidebar with a dummy dataset for team navigation links.

Why are these changes being made?

These changes enhance the team's ability to manage tasks, track activities, and organize team members through a cleaner and more interactive frontend interface. Dummy data is used for development purposes until backend integration is completed, enabling testing of navigation and user workflows. The upgraded UI components and navigation features improve user engagement and prepare the application for future backend connectivity.

Is this description stale? Ask me to generate a new description by commenting /korbit-generate-pr-description

- Removed output option from Next.js configuration.
- Updated global styles to remove outlines and box shadows for a cleaner look.
- Added new components for team management, including TeamActivity, TeamMembers, TeamTask, and TeamSearch.
- Enhanced AppSidebar to include dynamic team links and actions.
- Integrated collapsible functionality in NavMain for better navigation.
- Introduced UnderConstruction component for future pages.
- Created TeamActivityCard for displaying team activities.
- Implemented a table for team members with dropdown actions for admin users.
@coderabbitai
Copy link

coderabbitai bot commented Jul 13, 2025

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Summary by CodeRabbit

  • New Features

    • Introduced a team page with tabbed navigation for Tasks, Activities, and Members.
    • Added components for displaying team activities, members, and tasks.
    • Enhanced sidebar navigation with collapsible submenus and dynamic team sub-items.
    • Added an "Under Construction" page component.
    • Implemented a team search bar with context-aware actions.
  • Style

    • Updated global styles to remove outlines and box shadows from all elements.
  • Refactor

    • Sidebar and navigation components now support nested, collapsible menus.
  • Chores

    • Removed the static export setting from the Next.js configuration.

Walkthrough

This update introduces a new team page with a tabbed interface, adds several new React components for team activities, members, and tasks, and enhances the sidebar and main navigation to support nested and collapsible menu items. It also applies global CSS changes and updates the Next.js configuration.

Changes

File(s) Change Summary
app/globals.css Added global rules to remove outlines and box-shadows from all elements.
next.config.ts Removed output: 'export' from Next.js config.
app/teams/[id]/page.tsx Added a new team page with a tabbed interface and dynamic content rendering.
components/UnderConstruction.tsx Introduced an UnderConstruction component with icon and message.
components/app-sidebar.tsx Enhanced "Teams" menu with nested sub-items and updated icon; added dummy team data for demonstration.
components/nav-main.tsx Refactored navigation to support collapsible submenus and optional icons; updated function signature.
components/teams/TeamAcitvityCard.tsx Added TeamActivityCard component for displaying individual activity details.
components/teams/TeamActivity.tsx Added TeamActivity component rendering a list of activities using TeamActivityCard.
components/teams/TeamMember.tsx Added TeamMembers component displaying a table of team members with actions.
components/teams/TeamSearch.tsx Added TeamSearch component for searching/filtering with conditional action buttons.
components/teams/TeamTask.tsx Added TeamTask component fetching and displaying tasks using a dashboard table.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TeamPage
    participant TeamSearch
    participant TeamTask
    participant TeamActivity
    participant TeamMembers

    User->>TeamPage: Navigates to team page
    TeamPage->>User: Renders tab triggers (Tasks, Activities, Members)
    User->>TeamPage: Selects a tab
    TeamPage->>TeamSearch: Renders search/filter bar (with tab context)
    alt Tasks Tab
        TeamPage->>TeamTask: Renders tasks table
    else Activities Tab
        TeamPage->>TeamActivity: Renders activities list
    else Members Tab
        TeamPage->>TeamMembers: Renders members table
    end
Loading
sequenceDiagram
    participant User
    participant AppSidebar
    participant NavMain

    User->>AppSidebar: Opens sidebar
    AppSidebar->>NavMain: Passes navigation items (with nested teams)
    NavMain->>User: Renders collapsible menu with teams and sub-items
    User->>NavMain: Expands/collapses teams submenu
    NavMain->>User: Shows teams list and actions (Create, Join)
Loading

Suggested reviewers

  • yesyash

Poem

In the land of code where teams now play,
Tabs and menus guide the way.
Members, tasks, and activities bloom,
In sidebar gardens, there’s always more room.
Outlines and shadows, now gone from the scene—
A sleeker new look for every screen!
🐇✨


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 14

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c00d0b1 and c40c2da.

📒 Files selected for processing (11)
  • app/globals.css (1 hunks)
  • app/teams/[id]/page.tsx (1 hunks)
  • components/UnderConstruction.tsx (1 hunks)
  • components/app-sidebar.tsx (2 hunks)
  • components/nav-main.tsx (1 hunks)
  • components/teams/TeamAcitvityCard.tsx (1 hunks)
  • components/teams/TeamActivity.tsx (1 hunks)
  • components/teams/TeamMember.tsx (1 hunks)
  • components/teams/TeamSearch.tsx (1 hunks)
  • components/teams/TeamTask.tsx (1 hunks)
  • next.config.ts (0 hunks)
💤 Files with no reviewable changes (1)
  • next.config.ts
🧰 Additional context used
🧠 Learnings (1)
app/globals.css (2)
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#81
File: components/ui/dialog.tsx:46-48
Timestamp: 2025-07-10T16:15:32.947Z
Learning: outline-hidden is a valid utility class in Tailwind CSS v4 that hides the default browser focus outline while preserving accessibility in forced colors mode. It applies `outline: 2px solid transparent; outline-offset: 2px;` and is the recommended replacement for outline-none from v3 to maintain accessibility behavior.
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#81
File: components/ui/dialog.tsx:46-48
Timestamp: 2025-07-10T16:15:32.947Z
Learning: outline-hidden is a valid utility class in Tailwind CSS v4 and is the recommended way to hide the default browser outline, replacing the previous outline-none utility.
🧬 Code Graph Analysis (6)
components/teams/TeamTask.tsx (3)
lib/api/tasks/tasks.api.ts (1)
  • tasksApi (4-29)
components/dashboard/DashboardTasksTable.tsx (1)
  • DashboardTasksTable (22-157)
components/dashboard/DashboardTasksTableTabs.tsx (1)
  • DashboardTasksTableTabs (17-87)
components/teams/TeamMember.tsx (3)
components/ui/table.tsx (6)
  • Table (91-91)
  • TableHeader (91-91)
  • TableRow (91-91)
  • TableHead (91-91)
  • TableBody (91-91)
  • TableCell (91-91)
components/ui/avatar.tsx (2)
  • Avatar (47-47)
  • AvatarFallback (47-47)
components/ui/dropdown-menu.tsx (4)
  • DropdownMenu (213-213)
  • DropdownMenuTrigger (215-215)
  • DropdownMenuContent (216-216)
  • DropdownMenuItem (219-219)
app/teams/[id]/page.tsx (2)
components/teams/TeamActivity.tsx (1)
  • TeamActivity (50-57)
components/teams/TeamMember.tsx (1)
  • TeamMembers (48-96)
components/teams/TeamSearch.tsx (2)
components/ui/input.tsx (1)
  • Input (22-22)
components/ui/button.tsx (1)
  • Button (49-49)
components/teams/TeamActivity.tsx (1)
components/teams/TeamAcitvityCard.tsx (1)
  • TeamActivityCard (12-37)
components/nav-main.tsx (2)
components/ui/sidebar.tsx (6)
  • SidebarMenu (680-680)
  • SidebarMenuItem (684-684)
  • SidebarMenuButton (683-683)
  • SidebarMenuSub (686-686)
  • SidebarMenuSubItem (688-688)
  • SidebarMenuSubButton (687-687)
components/ui/collapsible.tsx (3)
  • Collapsible (21-21)
  • CollapsibleTrigger (21-21)
  • CollapsibleContent (21-21)
🪛 Biome (1.9.4)
components/UnderConstruction.tsx

[error] 7-7: Alternative text title element cannot be empty

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

(lint/a11y/noSvgWithoutTitle)

components/teams/TeamMember.tsx

[error] 79-79: Provide an explicit type prop for the button element.

The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset

(lint/a11y/useButtonType)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build-and-test (22.x)
🔇 Additional comments (4)
app/teams/[id]/page.tsx (1)

3-3: Import path is correct – no changes needed.

The file components/teams/TeamMember.tsx exports the TeamMembers component, so importing { TeamMembers } from @/components/teams/TeamMember is accurate.

components/app-sidebar.tsx (1)

41-56: Well-structured nested navigation implementation.

The integration with the enhanced NavMain component looks good. The combination of dynamic team data mapping with static action items provides a clean user experience.

components/teams/TeamSearch.tsx (1)

25-31: Clean conditional rendering logic.

The activeTab-based conditional rendering is well-structured and easy to follow.

components/nav-main.tsx (1)

30-75: Excellent implementation of collapsible navigation.

The enhancement to support nested menu items is well-structured:

  • Clean separation between simple and complex navigation items
  • Proper use of collapsible components with state management
  • Good UX with defaultOpen based on isActive status
  • Smooth chevron rotation animation
  • Type-safe implementation with optional properties

Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Status
Functionality Non-filtered Task Query ▹ view
Performance Inefficient Dynamic Menu Generation ▹ view
Documentation Unclear TODO Comment Purpose ▹ view ✅ Fix detected
Error Handling Missing Query State Handling ▹ view ✅ Fix detected
Design Inappropriate component dependencies ▹ view
Design Component functionality doesn't match its name ▹ view
Functionality Static Search Placeholder Text ▹ view
Design Unconstrained String Enum Type ▹ view ✅ Fix detected
Design Complex Conditional Rendering Logic ▹ view
Design Repetitive Style Configuration ▹ view
Files scanned
File Path Reviewed
next.config.ts
components/teams/TeamTask.tsx
components/UnderConstruction.tsx
components/teams/TeamAcitvityCard.tsx
components/teams/TeamSearch.tsx
components/app-sidebar.tsx
components/teams/TeamActivity.tsx
app/teams/[id]/page.tsx
components/nav-main.tsx
components/teams/TeamMember.tsx

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

anuj-flx added 3 commits July 13, 2025 18:05
- Removed outline and box-shadow styles from global CSS for a cleaner look.
- Replaced TeamSearch with TeamDashboardHeader in the team page for improved navigation.
- Added TeamActivityCard component for displaying team activities.
- Updated TeamMembers component to use unique IDs for keys and improved button styling.
- Enhanced TeamTask component with loading and error states for better user experience.
- Updated TODO comments for clarity on future API integrations.
@iamitprakash iamitprakash merged commit 0b10fd3 into develop Jul 13, 2025
3 checks passed
@iamitprakash iamitprakash deleted the feat/add-view-team-dashboard branch July 13, 2025 16:49
prakashchoudhary07 added a commit that referenced this pull request Jul 13, 2025
prakashchoudhary07 added a commit that referenced this pull request Jul 13, 2025
@coderabbitai coderabbitai bot mentioned this pull request Jul 27, 2025
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants