106 lines
3.0 KiB
Markdown
106 lines
3.0 KiB
Markdown
// README - Modular Sidrah Business App Structure
|
|
|
|
## 📁 FILE STRUCTURE
|
|
|
|
```
|
|
src/
|
|
├── App.tsx (MAIN - Login + Router)
|
|
├── components/
|
|
│ ├── Sidebar.tsx (Navigation)
|
|
│ ├── Header.tsx (Page Title/Subtitle)
|
|
│ └── common.tsx (Colors, Styles, Helpers)
|
|
├── pages/
|
|
│ ├── Dashboard.tsx (Overview Page)
|
|
│ ├── incidents/
|
|
│ │ ├── IncidentForm.tsx (Submit Form)
|
|
│ │ └── IncidentsList.tsx (View All)
|
|
│ ├── ideas/
|
|
│ │ ├── IdeaForm.tsx (Submit Form)
|
|
│ │ └── IdeasList.tsx (View All)
|
|
│ ├── orders/
|
|
│ │ ├── OrderForm.tsx (Submit Form)
|
|
│ │ └── OrdersList.tsx (View All)
|
|
│ └── organizations/
|
|
│ └── OrganizationsList.tsx (View All)
|
|
├── types/
|
|
│ └── index.ts (All Interfaces)
|
|
└── utils/
|
|
└── api.ts (API Calls)
|
|
```
|
|
|
|
## 🚀 SETUP INSTRUCTIONS
|
|
|
|
### 1. Create Folder Structure
|
|
```bash
|
|
mkdir -p src/{components,pages/{incidents,ideas,orders,organizations},types,utils}
|
|
```
|
|
|
|
### 2. Copy Files to Correct Locations
|
|
|
|
**Root Level:**
|
|
- `App.tsx` → `src/App.tsx`
|
|
|
|
**Components:**
|
|
- `components_Sidebar.tsx` → `src/components/Sidebar.tsx`
|
|
- `components_Header.tsx` → `src/components/Header.tsx`
|
|
- `components_common.tsx` → `src/components/common.tsx`
|
|
|
|
**Types:**
|
|
- `types_index.ts` → `src/types/index.ts`
|
|
|
|
**Utils:**
|
|
- `utils_api.ts` → `src/utils/api.ts`
|
|
|
|
**Pages:**
|
|
- `pages_Dashboard.tsx` → `src/pages/Dashboard.tsx`
|
|
- `pages_incidents_IncidentForm.tsx` → `src/pages/incidents/IncidentForm.tsx`
|
|
- `pages_incidents_IncidentsList.tsx` → `src/pages/incidents/IncidentsList.tsx`
|
|
- `pages_ideas_IdeaForm.tsx` → `src/pages/ideas/IdeaForm.tsx`
|
|
- `pages_ideas_IdeasList.tsx` → `src/pages/ideas/IdeasList.tsx`
|
|
- `pages_orders_OrderForm.tsx` → `src/pages/orders/OrderForm.tsx`
|
|
- `pages_orders_OrdersList.tsx` → `src/pages/orders/OrdersList.tsx`
|
|
- `pages_organizations_OrganizationsList.tsx` → `src/pages/organizations/OrganizationsList.tsx`
|
|
|
|
## 📦 KEY BENEFITS
|
|
|
|
✅ **Modular** - Each page in its own file
|
|
✅ **Scalable** - Easy to add new pages
|
|
✅ **Maintainable** - Clear folder structure
|
|
✅ **Reusable** - Shared components & utilities
|
|
✅ **Type-Safe** - Centralized type definitions
|
|
✅ **Clean** - Separated concerns
|
|
|
|
## 🔧 HOW TO ADD NEW PAGE
|
|
|
|
1. Create folder: `src/pages/newfeature/`
|
|
2. Create component files:
|
|
- `NewFeatureForm.tsx`
|
|
- `NewFeatureList.tsx`
|
|
3. Import in `App.tsx`
|
|
4. Add to Sidebar navigation
|
|
5. Done! 🎉
|
|
|
|
## 📝 EDIT COLORS
|
|
|
|
Edit `src/components/common.tsx`:
|
|
```tsx
|
|
export const colors = {
|
|
primary: '#3b82f6', // Change this
|
|
secondary: '#10b981',
|
|
// ... etc
|
|
}
|
|
```
|
|
|
|
## 🔒 ENABLE ROLE RESTRICTIONS
|
|
|
|
In `src/App.tsx`, uncomment lines to enable roles:
|
|
```tsx
|
|
// const isManager = user.role === 'Manager'
|
|
// const isReadOnly = user.role === 'Auditor'
|
|
```
|
|
|
|
Then pass to page components to conditionally render.
|
|
|
|
---
|
|
|
|
**All modular, organized, production-ready!** 🚀 |