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:
- Follow the established file structure patterns
- Use Metronic theme components and layouts
- Integrate with Shadcn UI component library
- Apply consistent naming conventions
- 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 componentcontent-template.tsx- Content wrapperform-template.tsx- Form with validationtable-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
- TypeScript First - Always use TypeScript with proper type definitions
- Component Reuse - Use existing Shadcn UI components, don't create custom ones
- Follow Patterns - Reference similar modules (incidents, service-offerings) in the codebase
- Dark Mode - Always implement dark mode with Tailwind
dark:classes - Responsive Design - Test on mobile, tablet, and desktop viewports
- Loading & Error States - Handle all data states properly
- Accessibility - Use semantic HTML and ARIA attributes
- Icons - Use only KeenIcons, not other icon libraries
- Absolute Imports - Use
@/for project-relative imports - 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:
- Understand Requirements
- What is the module's purpose? - What data does it handle? - What permissions are needed?
- Review Patterns
- Check patterns.md for structure - Look at existing similar modules in the codebase
- Build Components
- Use templates from templates/ - Follow examples in components.md - Apply styling from styling.md
- Add Integration
- Implement data layer per api-integration.md - Configure routes per routing-menu.md
- 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.