sre-dashboard-components/README.md

SRE Dashboard components for AKS management

# @components/sre-dashboard

A collection of React components for SRE (Site Reliability Engineering) dashboards, specifically designed for AKS (Azure Kubernetes Service) management.

## Installation

```bash
# Using npm
npm install @components/sre-dashboard

# Using Bun
bun add @components/sre-dashboard

# Using yarn
yarn add @components/sre-dashboard
```

## Prerequisites

This package requires the following peer dependencies to be installed in your project:

### Core Dependencies
- React 18+
- React DOM 18+

### UI Component Dependencies
You need to install these shadcn/ui components in your project:

```bash
# Using npm
npx shadcn@latest add sidebar card badge collapsible dropdown-menu select tabs table tooltip button separator avatar drawer input label checkbox

# Using Bun
bunx shadcn@latest add sidebar card badge collapsible dropdown-menu select tabs table tooltip button separator avatar drawer input label checkbox
```

### Other Dependencies
```bash
# Using npm
npm install @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @tabler/icons-react @tanstack/react-table lucide-react next-themes recharts sonner vaul zod

# Using Bun
bun add @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @tabler/icons-react @tanstack/react-table lucide-react next-themes recharts sonner vaul zod
```

## Usage

```tsx
import { AppSidebar, SectionCards, DataTable } from '@components/sre-dashboard';

function App() {
  return (
    <div>
      <AppSidebar />
      <SectionCards />
      <DataTable />
    </div>
  );
}
```

## Important Notes

- This package exports source TypeScript/JSX files directly
- You must have the required UI components installed in your project
- The components expect the UI components to be available at `@/components/ui/*` paths
- Make sure your project has the proper path mapping configured in your build tool

## Components

- **AppSidebar**: Main navigation sidebar for SRE dashboard
- **SectionCards**: Dashboard metrics cards
- **DataTable**: Advanced data table with sorting and filtering
- **ChartAreaInteractive**: Interactive charts for data visualization
- **NavMain**: Main navigation component
- **NavProjects**: Projects navigation
- **NavUser**: User profile navigation
- **TeamSwitcher**: Team switching component
- **SiteHeader**: Site header component

## License

MIT