WMS Product Details - Angular 21 Components

Sistema de gestión de almacén (WMS) con componentes standalone de Angular 21 y Tailwind CSS. Interfaz completamente responsive para móvil, tablet y desktop.

🚀 Características

• ✨ Angular 21 - Última versión con control flow syntax (@if, @for)
• 🎯 Componentes Standalone - Arquitectura moderna sin módulos
• 📱 Responsive Design - Optimizado para móvil, tablet y desktop
• 🎨 Tailwind CSS - Estilos utilitarios modernos
• 🔄 Interactivo - Tabs, menús y acciones completamente funcionales
• 🎯 Independiente - Cada componente puede usarse por separado

📦 Componentes Incluidos

1. SidebarComponent - Menú lateral con navegación responsiva y hamburguesa
2. TopBarComponent - Barra superior con breadcrumbs y acciones de usuario
3. TabsMenuComponent - Menú de pestañas interactivo (Inventory, Sales, etc.)
4. ActionBarComponent - Barra de búsqueda, paginación y botones de acción
5. StockCardComponent - Tarjetas de estado de inventario
6. ProductInfoSectionComponent - Secciones de detalles del producto

🛠️ Instalación

1. Crear proyecto Angular

# Instalar Angular CLI (si no lo tienes)
npm install -g @angular/cli

# Crear nuevo proyecto
ng new wms-product-details --routing --style=css
cd wms-product-details

2. Instalar Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

3. Configurar Tailwind

Actualiza tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Configurar estilos globales

Actualiza src/styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #191919;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #3E3E3E;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #595959;
}

5. Copiar componentes

Copia todos los componentes de la carpeta components/ a src/app/components/:

src/app/components/
├── sidebar/
│   ├── sidebar.component.ts
│   ├── sidebar.component.html
│   └── sidebar.component.css
├── top-bar/
│   ├── top-bar.component.ts
│   ├── top-bar.component.html
│   └── top-bar.component.css
├── tabs-menu/
│   ├── tabs-menu.component.ts
│   ├── tabs-menu.component.html
│   └── tabs-menu.component.css
├── action-bar/
│   ├── action-bar.component.ts
│   ├── action-bar.component.html
│   └── action-bar.component.css
├── stock-card/
│   ├── stock-card.component.ts
│   ├── stock-card.component.html
│   └── stock-card.component.css
└── product-info-section/
    ├── product-info-section.component.ts
    ├── product-info-section.component.html
    └── product-info-section.component.css

6. Actualizar App Component

Reemplaza src/app/app.component.ts, src/app/app.component.html y src/app/app.component.css con los archivos proporcionados.

7. Ejecutar la aplicación

ng serve

Abre tu navegador en http://localhost:4200

📱 Características Responsive

Móvil (< 640px)

• Sidebar colapsable con menú hamburguesa
• Tabs solo con iconos
• Botones de acción compactos (solo iconos)
• Grid de stock cards en 2 columnas
• Menú desplegable para acciones secundarias

Tablet (640px - 1024px)

• Tabs con iconos + texto corto
• Botones con iconos + texto
• Grid de stock cards en 3 columnas
• Sidebar fijo visible

Desktop (> 1024px)

• Sidebar fijo siempre visible
• Tabs con iconos + texto completo
• Todos los botones visibles con texto
• Grid de stock cards en 5 columnas
• Layout optimizado para pantallas grandes

🎨 Paleta de Colores

/* Backgrounds */
#141414 - Fondo principal
#1E1E1E - Fondo sidebar/cards
#2C2C2C - Fondo secondary
#3E3E3E - Bordes/hover

/* Primary */
#00D5C0 - Accent turquesa

/* Status */
#22C55E - Success (verde)
#FACC15 - Warning (amarillo)
#EF4444 - Danger (rojo)

🔧 Personalización

Usar componentes individualmente

import { SidebarComponent } from './components/sidebar/sidebar.component';

@Component({
  selector: 'app-my-page',
  standalone: true,
  imports: [SidebarComponent],
  template: `
    <app-sidebar [isOpen]="true" (closeEvent)="handleClose()"></app-sidebar>
  `
})
export class MyPageComponent {
  handleClose() {
    console.log('Sidebar closed');
  }
}

Pasar datos a componentes

// Stock Card
<app-stock-card 
  title="On Hand" 
  pieces="13,500" 
  cases="5,000" 
  color="success">
</app-stock-card>

// Product Info Section
<app-product-info-section 
  title="Unit Details" 
  [fields]="unitDetailsFields" 
  [columns]="4">
</app-product-info-section>

📝 Estructura del Proyecto

wms-product-details/
├── src/
│   ├── app/
│   │   ├── components/      # Todos los componentes
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── app.component.css
│   ├── styles.css          # Estilos globales + Tailwind
│   └── main.ts
├── tailwind.config.js
└── package.json

🚀 Scripts Disponibles

# Desarrollo
ng serve

# Build de producción
ng build

# Tests
ng test

# Linting
ng lint

📄 Licencia

MIT

👤 Autor

quantumpod

• GitHub: @quantumpod
• Email: almeidaalexis@gmail.com

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

⭐ Agradecimientos

Desarrollado con Claude Sonnet 4.5