Remix

Make your own version of Sira HR Structure

Edit the prompt below and generate a customized version in seconds.

Original by Mustafa199412 Saad

Describe your app

أريد تصميم صفحتي Departments و Branches لمنصة HR SaaS اسمها Sira HR.
مهم جداً:
أريد UI/UX بمستوى Premium Enterprise SaaS احترافي جداً، وليس Admin Template تقليدي أو تصميم AI عام.

سأستخدم هذا التصميم لاحقاً داخل تطبيق موجود فعلياً، لذلك المطلوب Frontend Design فقط.

======================
==================
DESIGN DIRECTION
========================================

هوية Sira:

- Dark Teal
- Blue
- White
ة معلومات مناسبة لنظ- خلفية فاتحة ونظيفة
- Borders خفيفة
- Shadows ناعمة جداً
- Rounded corners احترافية
- Typography واضحة وحديثة
- كثا
فام HR احترافي
- بدون gradients مبالغ بها
- بدون cards ضخمة
- بدون مساحات فارغة كبيرة
- بدون عناصر زخرفية غير ضرورية

أريد التصميم بمستوى عالمي مشابه لمنتجات Enterprise SaaS الحديثة.

Desktop first.

دعم كامل:
Arabic RTL
English LTR

========================================
IMPORTANT DESIGN RULE
========================================

Departments وBranches جزء 
من:

Employee Management
- Employees
- Import / Export
- Departments
- Branches

لكن لا أريد منك تصميم Sidebar أو Dashboard أو أي صفحات أخرى.

صمم فقط CONTENT AREA للصفحتين.

========================================
ilters بشكل com1 — DEPARTMENTS
========================================

أريد صفحة Departments احترافية لإدارة الهيكل التنظيمي للشركة.

Page Header:
- العنوان: الأقسام
- وصف مختصر
- إجمالي عدد الأقسام
- زر: إضافة قسم

ثم Search + 
Fpact.

أريد طريقة عرض احترافية للأقسام وقابلة للتوسع إذا الشركة لديها عشرات أو مئات الأقسام.

المعلومات المهمة لكل Department:

- Department Name
- Arabic Name
- Department Manager
- Parent Department إذا موجود
- Number of Employees
قليدي قبيح.

صمم طريقة حديثة ومرتبة لإظ- Branch / Branches إذا النظام يستخدمها
- Status
- Actions

أريد Hierarchy واضحة للأقسام الفرعية.

مثال:

Finance
   ├── Accounting
   └── Treasury

Operations
   ├── Restaurant Operations
   └── Logistics

لا أريد Tree قديمة أو شكل 
تهار Parent / Sub-departments.

أضف:

- Search
- Status Filter
- Branch Filter إذا مناسب
- Expand / Collapse للـsub-departments
- Pagination عند الحاجة
- Empty State
- Loading State

========================================
ADD / EDIT DEPARTMENT
========================================

صمم Dialog احترافي لإضافة وتعديل القسم.

استخدم حقول منطقية مثل:

- Department Name
- Arabic Name
- Parent Department
- Manager
- Branch / Branches
- Status

لا تضف business features غير ضرورية.

الـForm يجب أن يكون بسيطاً وسريعاً وليس كبيراً.

========================================
2 — BRANCHES
إذا موجود
- Number of Employees
- Number========================================

صمم صفحة Branches بنفس Design System.

Page Header:
- العنوان: الفروع
- وصف مختصر
- إجمالي عدد الفروع
- زر: إضافة فرع

أريد عرض الفروع بطريقة احترافية وقابلة للتوسع.

المعلومات الأساسية:

- Branch Name
- Arabic Name
- Branch Code
- Location
- Branch Manager
  of Departments إذا مناسب
- Status
- Actions

يمكن استخدام Table/List أو تصميم Hybrid احترافي إذا كان أفضل.

لا تستخدم Cards ضخمة لكل فرع.

========================================
ADD / EDIT BRANCH
========================================

صمم Dialog احترافي لإضافة وتعديل الفرع.

مثل:

- Branch Name
- Arabic Name
- Branch Code
- Location
 names
- - Manager
- Status

رتب الحقول بشكل واضح ومضغوط.

========================================
UX DETAILS
========================================

اهتم جداً بـ:

- Visual hierarchy
- Alignment
- Spacing
- Row height
- Hover states
- Active states
- Status badges
- Actions menu
- Search
- Filters
- Empty states
- Loading skeletons
- Long Arabi
cResponsive behavior
- RTL details

الجداول لا أريدها شكل HTML Table تقليدي.

أريد refined Enterprise Data Table.

========================================
VERY IMPORTANT
========================================

لا تصمم Dashboard.
لا تصمم Executive.
لا تصمم Employees.
لا تصمم Import/Export.
لا تصمم Sidebar.

فقط:

1. Departments
2. Add/Edit Department
 مشروعي الأ3. Branches
4. Add/Edit Branch

أريد Concept واحد فقط لكل صفحة.

لا تعطيني 3 variations.

QUALITY OVER QUANTITY.

أريد التصميم النهائي polished جداً من أول محاولة، بمستوى Production-ready Enterprise HR SaaS.

استخدم realistic sample data حتى أستطيع تقييم التصميم بصرياً.

وفي النهاية أريد أن أستطيع تصدير/تحميل كود React + TypeScript للتصميم حتى أنقله إل
ىساسي.

Free to use. No credit card required.