Vixicon IDD Platform Prototype

A high‑fidelity, modern SaaS prototype for Intellectual & Developmental Disabilities (IDD) providers. Built with React 18, TypeScript, Vite, and a premium glassmorphism UI.

✨ Features

• Dashboard with animated stat cards, revenue trend line chart, and live activity feed.
• Compliance, Workforce, Billing, Analytics, Family Portal, Marketplace modules – each with rich interactive charts (line, bar, pie) powered by Recharts.
• Professional branding – custom SVG logo system, gradient background, glass‑styled cards, micro‑interactions, and dark‑mode support.
• Reusable UI components – Card, StatCard, Toast, Loading, Tooltip, DataTable.
• Mock data for rapid prototyping; no external APIs required.
• Responsive layout with a sticky sidebar, header navigation, and smooth page transitions.

🚀 Getting Started

# Clone the repo
git clone https://github.com/your-org/vixicon-prototype.git
cd vixicon-prototype

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:5173 in your browser.

📦 Build

npm run build   # production bundle

🎨 Design System

• Theme – src/styles/theme.css defines gradients, glass‑morphism tokens, shadows, and dark‑mode variables.
• Global styles – src/styles/global.css adds animated gradient background, custom scrollbars, and utility classes.
• Components – All UI components use the design tokens for consistent look and feel.

📁 Project Structure

src/
├─ assets/            # SVG logo variants
├─ components/        # Card, StatCard, Toast, Loading, Tooltip, DataTable
├─ layout/            # Header, Sidebar, MainLayout
├─ pages/             # Dashboard, Compliance, Workforce, Billing, Analytics, FamilyPortal, Marketplace, Settings, Help
├─ styles/            # theme.css, global.css
├─ data/mockData.ts   # Mocked data for charts & tables
├─ App.tsx            # Router configuration
└─ main.tsx           # Entry point

🛠️ Development Notes

• Charts – Powered by recharts. Add new visualizations by importing chart components and feeding them data from mockData.ts.
• Routing – Uses react-router-dom. Add new pages by creating a component in src/pages and adding a route in App.tsx.
• State – Simple local state with React hooks; for larger data flows consider Context or Zustand.

🤝 Contributing

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/awesome-ui).
3. Make your changes and ensure the app builds.
4. Submit a pull request with a clear description.

📜 License

MIT – feel free to use, modify, and share.

---

Built with love for Vixicon – a compliance‑first, premium SaaS solution.