Metronic Module

Metronic Provider Portal Module Creator

This skill helps you create production-ready modules for the Providr Provider Portal using the Metronic Tailwind React theme with established patterns and conventions.

Quick Start

When creating a new module, you will:

1. Follow the established file structure patterns
2. Use Metronic theme components and layouts
3. Integrate with Shadcn UI component library
4. Apply consistent naming conventions
5. Implement responsive design with dark mode support

Documentation Structure

This skill is organized into focused reference documents:

📁 Patterns & Structure

• File structure patterns
• Directory organization
• Naming conventions
• Barrel exports
• Module creation checklist

🎨 Components & UI

• Layout components (Container, Toolbar, etc.)
• Common component patterns (Cards, Buttons, Badges)
• Data tables with DataGrid
• Forms with Formik + Yup validation
• Dialogs and modals
• Dropdown menus
• KeenIcons usage

🎨 Styling Conventions

• Tailwind CSS patterns
• Metronic-specific classes
• Dark mode implementation
• Responsive design breakpoints
• Color system and theming

🔌 API Integration

• React Query patterns
• Data layer components
• Error handling
• Loading states

🛣️ Routing & Menu

• Route configuration
• Protected routes
• Sidebar menu setup
• Permission-based access

📦 Templates

Ready-to-use component templates:

• page-template.tsx - Main page component
• content-template.tsx - Content wrapper
• form-template.tsx - Form with validation
• table-template.tsx - Data table component

📚 Examples

Complete working examples:

• Full module implementation
• Real-world use cases

Tech Stack

Core Technologies

• Theme: Metronic (Tailwind CSS version)
• CSS Framework: Tailwind CSS v3.4.14
• Component Library: Shadcn UI (Radix UI primitives)
• Icons: KeenIcons (ki-filled, ki-outline, ki-duotone, ki-solid)
• Layout: Demo1 (sidebar + fixed header)
• TypeScript: Fully typed components

Libraries & Tools

• UI Components: Shadcn UI in src/components/ui/
• Charts: ApexCharts
• Forms: Formik + Yup validation
• Notifications: Sonner + Notistack
• Data Tables: TanStack React Table (DataGrid)
• State Management: React Query (server state) + Context API (UI state)

Best Practices

1. TypeScript First - Always use TypeScript with proper type definitions
2. Component Reuse - Use existing Shadcn UI components, don't create custom ones
3. Follow Patterns - Reference similar modules (incidents, service-offerings) in the codebase
4. Dark Mode - Always implement dark mode with Tailwind dark: classes
5. Responsive Design - Test on mobile, tablet, and desktop viewports
6. Loading & Error States - Handle all data states properly
7. Accessibility - Use semantic HTML and ARIA attributes
8. Icons - Use only KeenIcons, not other icon libraries
9. Absolute Imports - Use @/ for project-relative imports
10. Permissions - Implement role-based access control where needed

Quick Reference: Component Imports

// Layout
import { Container } from '@/components/Container';
import { Toolbar, ToolbarHeading, ToolbarActions } from '@/layouts/demo1';

// UI Components
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardBody } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Dialog, DialogContent } from '@/components/ui/dialog';

// Icons
import { KeenIcon } from '@/components/keenicons';

// Data & Forms
import { DataGrid } from '@/components/data-grid';
import { Formik, Form, Field } from 'formik';
import { useQuery, useMutation } from '@tanstack/react-query';

Workflow

When asked to create a new module:

1. Understand Requirements

   • What is the module's purpose?
   • What data does it handle?
   • What permissions are needed?

2. Review Patterns

   • Check patterns.md for structure
   • Look at existing similar modules in the codebase

3. Build Components

   • Use templates from templates/
   • Follow examples in components.md
   • Apply styling from styling.md

4. Add Integration

   • Implement data layer per api-integration.md
   • Configure routes per routing-menu.md

5. Finalize

   • Test responsive design
   • Verify dark mode
   • Check permissions
   • Add to navigation menu

Getting Help

• For file structure questions → See patterns.md
• For UI component usage → See components.md
• For styling help → See styling.md
• For data fetching → See api-integration.md
• For routing setup → See routing-menu.md
• For ready-to-use code → See templates/
• For complete examples → See examples/

Remember: Always check existing modules in the codebase for real-world reference implementations before creating new patterns.