# Task 10: Add Hierarchy Indicators

**Task ID**: TASK-010 | **Story**: [STORY-003](sprint_1_story_3.md) | **Sprint**: [Sprint 1](sprint_1.md)
**Estimated Hours**: 2h | **Assignee**: Frontend Developer 1 | **Priority**: P1 | **Status**: Not Started

## Task Description
Add visual indicators on Kanban cards to show Epic/Story/Task hierarchy relationships.

## Implementation

### Update KanbanCard.tsx (1.5h)
```typescript
export const KanbanCard: React.FC<{ item: Epic | Story | Task }> = ({ item }) => {
  const getTypeIcon = () => {
    switch (item.type) {
      case 'Epic': return <span className="text-purple-600">📊</span>;
      case 'Story': return <span className="text-blue-600">📝</span>;
      case 'Task': return <span className="text-green-600">✓</span>;
    }
  };

  const renderParentBreadcrumb = () => {
    if (item.type === 'Story' && item.parentEpic) {
      return (
        <div className="text-xs text-gray-500 flex items-center gap-1">
          <span>📊</span>
          <span>{item.parentEpic.title}</span>
        </div>
      );
    }
    if (item.type === 'Task' && item.parentStory) {
      return (
        <div className="text-xs text-gray-500 flex items-center gap-1">
          <span>📝</span>
          <span>{item.parentStory.title}</span>
        </div>
      );
    }
    return null;
  };

  const renderChildCount = () => {
    if (item.childCount > 0) {
      return (
        <span className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded">
          {item.childCount} {item.type === 'Epic' ? 'stories' : 'tasks'}
        </span>
      );
    }
    return null;
  };

  return (
    <div className="kanban-card border rounded p-3 bg-white shadow-sm hover:shadow-md">
      <div className="flex items-center justify-between mb-2">
        {getTypeIcon()}
        {renderChildCount()}
      </div>

      {renderParentBreadcrumb()}

      <h3 className="font-semibold text-sm mt-2">{item.title}</h3>
      <p className="text-xs text-gray-600 mt-1">{item.description}</p>
    </div>
  );
};
```

### Add CSS styles (30 min)
```css
.kanban-card {
  min-height: 100px;
  transition: all 0.2s ease;
}

.kanban-card:hover {
  transform: translateY(-2px);
}

.hierarchy-breadcrumb {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.child-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background-color: #dbeafe;
  color: #1e40af;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}
```

## Acceptance Criteria
- [ ] Type icons displayed (Epic/Story/Task)
- [ ] Parent breadcrumb visible on child items
- [ ] Child count badge shown
- [ ] Hover effects working
- [ ] Responsive on mobile

## Deliverables
1. Updated KanbanCard.tsx
2. CSS styles
3. Unit tests (5+ tests)

**Status**: Not Started | **Created**: 2025-11-04