# Dashlyra Code Structure

## Current Frontend Architecture
- `index.html`: dashboard overview page (shared app shell).
- `analytics.html`, `cohorts.html`, `funnels.html`, `data-table.html`: analytics and data workflow pages.
- `user-management.html`, `roles-access.html`: user and access-control pages.
- `billing.html`, `invoices.html`, `dunning.html`, `coupons.html`: billing operations pages.
- `settings.html`, `form-components.html`, `widgets.html`: settings and UI kit pages.
- `login.html`, `register.html`, `forgot-password.html`, `reset-password.html`, `onboarding.html`: auth and onboarding pages.
- `404.html`, `empty-state.html`, `maintenance.html`, `docs.html`, `terms.html`, `privacy.html`: utility, in-template docs, and legal pages.
- `documentation/index.html`: ThemeForest buyer documentation entry point.
- `assets/css/base.css`: global reset + typography foundation.
- `assets/css/components.css`: reusable UI primitives and shared interaction styles.
- `src/styles/app.css`: Tailwind source layers (`@tailwind base/components/utilities`) + reusable component classes.
- `assets/css/tailwind.css`: compiled Tailwind output used by all pages.
- `tailwind.config.js`: single source-of-truth Tailwind theme/token configuration used by build scripts.
- `assets/js/toast.js`: reusable toast notification system.
- `assets/js/dashboard-app.js`: dashboard interactions (sidebar, navigation, filters, table UX, theme).
- `assets/js/onboarding-flow.js`: onboarding step navigation logic.

## Naming Conventions
- Reusable CSS primitives use `dy-` prefix (for example `dy-input`, `dy-btn-primary`, `dy-logo`).
- DOM hooks use `data-*` attributes with feature prefixes:
  - `data-view-*` for page routing
  - `data-dt-*` for data table
  - `data-um-*` for user management
  - `data-settings-*` for settings tabs
- JavaScript utility names are feature-scoped:
  - `dt*` for data table helpers
  - `um*` for user management helpers

## Marketplace Maintainability Notes
- Keep visual behavior in shared CSS files first, avoid page-level inline style systems.
- Keep Tailwind tokens centralized in `tailwind.config.js` and regenerate `assets/css/tailwind.css` after token changes.
- Keep page interaction logic in dedicated JS files instead of inline `<script>` blocks.
- Add new reusable primitives in `assets/css/components.css` before repeating long utility strings.
- Preserve existing `dy-` and `data-*` naming patterns for future pages/components.