Initial commit - Master Admin UI

.github/instructions/Project Instructions Syscom Master Admin UI.instructions.md

@@ -0,0 +1,145 @@
+# Project Instructions: Syscom Master Admin UI
+
+This project is an Angular 21 SaaS Master Admin UI using the Ynex Tailwind Angular theme.
+
+## Core Rules
+
+- Use Angular 21 latest features.
+- Use standalone components only.
+- Do not use NgModules.
+- Use signals where suitable.
+- Use strict TypeScript.
+- Use lazy-loaded feature routes.
+- Use environment-based API URLs.
+- Keep components clean and small.
+- Keep services separate from UI components.
+- Do not modify unrelated files.
+- Do not break existing working functionality.
+
+## Theme Rules
+
+The Ynex Tailwind theme is already copied into the project.
+
+Before creating any UI:
+
+1. Search existing theme files first.
+2. Reuse existing theme components and classes.
+3. Match the exact Ynex design.
+4. Do not create custom UI if theme equivalent exists.
+5. Do not add large custom CSS.
+6. Prefer theme cards, buttons, dropdowns, forms, tables, tabs, modals, badges, alerts, pagination, breadcrumbs, icons and wizards.
+
+Use existing folders like:
+
+- `src/app/@spk`
+- `src/app/components`
+- `src/app/shared`
+- `public/assets`
+- `src/styles.scss`
+
+## Strict Ynex Theme Reuse Policy
+
+The Ynex folder is the single source of truth for UI implementation.
+
+Treat the folder `Ynex` as the authoritative reference for:
+
+- UI design
+- HTML structure
+- component structure
+- Tailwind classes
+- SCSS/CSS classes
+- spacing
+- typography
+- colors
+- cards
+- forms
+- inputs
+- dropdowns
+- tables
+- buttons
+- modals
+- dialogs
+- tabs
+- accordions
+- steppers
+- wizards
+- badges
+- alerts
+- pagination
+- breadcrumbs
+- page headers
+- navigation
+- sidebar
+- topbar
+- loaders
+- empty states
+- icons
+- responsive behavior
+
+Before creating or modifying any application UI:
+
+1. Search the Ynex folder first.
+2. Find the closest existing Ynex page, component, or UI pattern.
+3. Inspect its actual source files.
+4. Reuse or adapt the exact HTML structure and theme classes from that implementation.
+5. Add only the Angular bindings and business logic required by the application.
+
+Do not design UI from scratch.
+Do not create custom UI when an equivalent Ynex implementation exists.
+
+Source priority for UI work:
+
+1. `Ynex/src/app`
+2. `src/app/@spk`
+3. `src/app/components`
+4. `src/app/shared`
+
+Do not create a new reusable UI component when an equivalent implementation already exists in Ynex or the application.
+
+For every new UI screen or component, provide a short implementation analysis before coding:
+
+1. Requirement understanding
+2. Ynex files/pages inspected
+3. Closest matching Ynex page/component
+4. Reusable `@spk` components found
+5. Existing application components that can be reused
+6. Exact HTML/theme pattern that will be followed
+7. Files to create or modify
+8. Whether any custom CSS is required and why
+
+Custom CSS and SCSS are not allowed by default. Reuse existing theme classes whenever possible.
+
+## Architecture Rules
+
+Use this structure:
+
+```txt
+src/app/core
+├── auth
+├── guards
+├── interceptors
+├── services
+├── models
+└── config
+
+src/app/shared
+├── components
+├── directives
+├── pipes
+└── utils
+
+src/app/layout
+├── app-shell
+├── sidebar
+├── topbar
+└── breadcrumb
+
+src/app/features
+├── global-masters
+├── users
+├── tenants
+├── billing
+├── localization
+├── theming
+├── platform
+└── monitoring