Add "Good Issues" and "Easy Fixes" Tab to Sidebar with TanStack Table

[ArjinAlbay]

Replace the current "Quick Wins" placeholder in the sidebar with a functional tab that displays "Good Issues" and "Easy Fixes" from GitHub repositories.

This should use TanStack Table for a professional data table experience with pagination.

Requirements

1. Convert the disabled "Quick Wins" section in the sidebar to an active collapsible section
2. Create two sub-tabs: "Good Issues" and "Easy Fixes"
3. Implement TanStack React Table with pagination (10 items per page)
4. Display GitHub issues with basic filtering and sorting
5. Follow the existing design patterns in the codebase

Folder Structure to Create

src/
  components/
    quick-wins/
      QuickWinsTable.tsx          // Main TanStack table component
      columns.ts                  // Table column definitions
      types.ts                   // TypeScript interfaces
      hooks/
        useQuickWins.ts           // Custom hook for data fetching
  stores/
    quickWins.ts                  // Zustand store for state management
  types/
    quickWins.ts                  // Type definitions

Implementation Steps

Step 1: Install Dependencies
npm install @tanstack/react-table

Step 2: Create Type Definitions
Create src/types/quickWins.ts:

export interface GitHubIssue {
  id: number
  title: string
  repository: string
  url: string
  labels: string[]
  created_at: string
  difficulty: 'easy' | 'medium'
  language: string
  stars: number
}

export interface QuickWinsState {
  goodIssues: GitHubIssue[]
  easyFixes: GitHubIssue[]
  loading: boolean
  error: string | null
}

Step 3: Create Zustand Store
Create src/stores/quickWins.ts following the pattern of existing stores like actionItems.ts.

Step 4: Create Table Columns
Create src/components/quick-wins/columns.ts with column definitions for:

• Title (with repository link)
• Labels (as badges)
• Language
• Stars
• Created date
• Difficulty badge

Step 5: Create Table Component
Create src/components/quick-wins/QuickWinsTable.tsx with:

• TanStack table implementation
• Pagination (10 items per page)
• Basic search/filter
• Loading and error states

Step 6: Create Data Hook
Create src/components/quick-wins/hooks/useQuickWins.ts for data fetching logic.

Step 7: Update Sidebar
Modify Sidebar.tsx:

• Replace the "Quick Wins" disabled collapsible
• Add active collapsible with two sub-items:
• "Good Issues"
• "Easy Fixes"
• Use Lightbulb and Wrench icons from lucide-react
• Follow the existing pattern of other sidebar items

Step 8: Create Route Page
Create page.tsx similar to the dashboard page structure.

Design Guidelines

Follow existing component patterns in dashboard
Use existing UI components from ui
Match the styling of the dashboard tabs and cards
Use the same color scheme and spacing as other sections
Add loading skeletons similar to other components

Acceptance Criteria

• - Sidebar shows active "Quick Wins" section with sub-navigation
• - Clicking leads to /quick-wins page with tabs for "Good Issues" and "Easy Fixes"
• - TanStack table displays with pagination (10 items per page)
• - Table shows: title, repository, labels, language, stars, date, difficulty
• - Loading and error states implemented
• - Responsive design matches existing components

[ArjinAlbay]

@MuslimeKaya

[ArjinAlbay]

this issue should be open for now. It will be arranged to be pulled from the API instead of mock data.

assigned @ArjinAlbay