UI/UX Tasks Specification

Organizational Knowledge Platform

Overview
This document specifies all pages and interface requirements for the 12 modules of the
Organizational Knowledge Platform.

Design Guidelines
• Responsive Design: Mobile, tablet, and desktop support
• RTL Support: Full Arabic language support with RTL layout
• Admin Panel Template: Use a standard admin dashboard template
• Color Scheme: No specific colors - use template defaults
• Icons: Use consistent icon set (Font Awesome or similar)

Database-Driven Input Fields and Table Columns

All input fields and table columns are derived from the 22-table database schema:

Core Tables:

1. `organizations` - Tenant root entity

2. `users` - User accounts with role, department associations
3. `departments` - Organizational departments with hierarchy
4. `notes` - Markdown notes with versioning
5. `note_versions` - Note history
6. `note_links` - Bidirectional note links
7. `tags` - Content categorization
8. `note_tags` - Note-tag many-to-many
9. `files` - Uploaded files with metadata
10. `folders` - File folder hierarchy
11. `projects` - Project documentation
12. `search_index` - Search index table
13. `handovers` - Knowledge handover workflow
14. `documents` - Document lifecycle management
15. `approvals` - Approval workflow
16. `audit_logs` - Activity logging
17. `notifications` - User notifications
18. `system_configs` - Configuration settings
19. `languages` - Language definitions
20. `translated_content` - Multilingual content
21. `auth_sessions` - Session management
22. `confidentiality_levels` - Access control levels
__________________________________________________

Module 1: User Authentication & Authorization

1.1 Login Page

Purpose: User authentication entry point

Header: "Login - Organizational Knowledge Platform"

Input Fields (derived from `users`, `auth_sessions`):

• Email (text input, required - maps to `[Link]`)

• Password (password input, required - maps to `users.password_hash`)

Buttons:

• "Login" (primary button)

• "Forgot Password?" (link)

Additional Elements:

• "Login with Active Directory" option

• Language selector (English/Arabic)
• Organization context is automatically determined from user's account

Procedures:

• Successful login → Create `auth_sessions` record → Redirect to dashboard

• Failed login → Show error message
• Password reset → Navigate to reset password page

1.2 Reset Password Page

Purpose: Password recovery

Header: "Reset Password"

Input Fields (derived from `users`):

• Email (text input, required - maps to `[Link]`)

• New Password (password input, required - maps to `users.password_hash`)
• Confirm Password (password input, required - maps to `users.password_hash`)

Buttons:

• "Send Reset Link" (primary button)

• "Back to Login" (secondary button)
Procedures:

• Request reset link → Email sent

• Submit new password → Update `users.password_hash`, invalidate sessions

1.3 Change Password Page

Purpose: Password change for authenticated users

Header: "Change Password"

Input Fields (derived from `users`):

• Current Password (password input, required - maps to `users.password_hash`)

• New Password (password input, required - maps to `users.password_hash`)
• Confirm New Password (password input, required - maps to `users.password_hash`)

Buttons:

• "Change Password" (primary button)

• "Cancel" (secondary button)

Procedures:

• Change password → Update `users.password_hash`, invalidate all sessions except

current

1.4 User List Page (Organization Admin)

Purpose: Manage users within organization

Header: "Users - Organization Management"

Table Columns (derived from `users` table):

• User Avatar/Name (from `[Link]`)

• Email (from `[Link]`)
• Role (from `[Link]`)
• Department (from `[Link]` via `users.organization_id`)
• Status (Active/Inactive based on `users.active_directory_id` presence)
• Last Login (from `users.last_login`)
• Actions

Actions/Procedures (per row with icons):

• View (eye icon) → Opens user details modal with full `users` record data
• Edit (pencil icon) → Opens edit user form with all `users` fields
• Disable/Enable (power icon) → Toggle user status in `users` record
• Reset Password (refresh icon) → Trigger password reset, logs in `audit_logs`
• Delete (trash icon) → Soft delete `users` record
Filters (based on `users` and `departments` tables):

• Role dropdown (select from `[Link]` values)

• Department dropdown (select from `[Link]` where
`departments.organization_id` = current org)
• Status dropdown (Active/Inactive/All)
• Search bar (search `[Link]`, `[Link]`)

Buttons:

• "Add User" (primary button, creates `users` record)

• "Export Users" (secondary button)
• "Import Users" (secondary button)

Pagination: Default 20 items per page

1.5 Create User Page (Organization Admin)

Purpose: Create new user within organization

Header: "Create User"

Input Fields (based on `users` table):

• Name (text input, maps to `[Link]`)

• Email (text input, required, maps to `[Link]` - must be unique)
• Role (dropdown, maps to `[Link]` - default: 'Contributor')
• Active Directory ID (text input, optional, maps to `users.active_directory_id`)

Auto-filled Fields:

• Organization ID (hidden field, maps to `users.organization_id` - auto-populated from

current session organization)

Buttons:

• "Create User" (primary button, creates `users` record)

• "Cancel" (secondary button)

Procedures:

• Create user → Insert `users` record with organization_id from session, hash
password with bcrypt
1.6 Edit User Page (Organization Admin)
Purpose: Edit existing user details

Header: "Edit User - [User Name]"

Input Fields (based on `users` table):

• Name (text input, maps to `[Link]`)

• Email (text input, maps to `[Link]` - must be unique)
• Role (dropdown, maps to `[Link]`)
• Active Directory ID (text input, maps to `users.active_directory_id`)

Auto-filled Fields:

• Organization ID (hidden field, maps to `users.organization_id` - from existing user

record)

Buttons:

• "Save Changes" (primary button, updates `users` record)

• "Cancel" (secondary button)

Procedures:

• Save → Update `users` record, log action in `audit_logs`

1.7 User Profile Page

Purpose: View and edit current user's profile information

Header: "My Profile"

View Mode:

• User Avatar
• Name (from `[Link]`)
• Email (from `[Link]`)
• Role (from `[Link]`)
• Department (from `[Link]` via `users.organization_id`)
• Organization (from `[Link]`)
• Active Directory ID (from `users.active_directory_id` - if applicable)
• Last Login (from `users.last_login`)
• Created At (from `users.created_at`)

Buttons:

• "Edit Profile" (primary button)

• "Reset Password" (secondary button)
Edit Mode (same fields as above, editable):

• Name (text input, maps to `[Link]`)

• Email (text input, maps to `[Link]` - must be unique)
• Department (dropdown, maps to `users.department_id` if added to schema)
• Profile Picture (file upload)

Reset Password Modal (within Profile Page):

• Current Password (password input, maps to `users.password_hash`)

• New Password (password input, maps to `users.password_hash`)
• Confirm New Password (password input, maps to `users.password_hash`)

Procedures:

• Edit profile → Update `users` record

• Reset password → Update `users.password_hash`, invalidate all sessions except
current

__________________________________________________

2.1 Knowledge Vault Dashboard

Purpose: Main entry point for note management

Header: "Knowledge Vault"

Sidebar:

• Notes (list of all notes from `notes` table)

• Tags (clickable tags from `tags` table)
• Projects (projects from `projects` table)
• Recent Notes (from `notes` table, ordered by `updated_at`)
• Templates

Main Content Area:

• Notes grid/list view toggle

• Search bar
• Filter dropdowns

Buttons:

• "New Note" (primary button, creates `notes` record)

• "Create from Template" (secondary button)
• "Graph View" (icon button)
• "Export All" (secondary button)
Procedures:

• Click note → Opens note editor with `notes` content

• Click tag → Filters notes by `note_tags` association
• Click template → Opens note creation with template data

2.2 Note Editor (Split View)

Purpose: Create and edit markdown notes

Layout: Split-view (editor left, preview right)

Editor Panel:

• Markdown text area (full screen capable)

• Toolbar with formatting buttons
• Auto-save indicator
• Save button

Preview Panel:

• Rendered markdown
• Backlinks section (from `note_links` where `target_note_id` = current note)
• Related notes

Buttons:

• "Save" (primary button, creates `note_versions` record)

• "Preview Mode" toggle
• "Fullscreen Mode" toggle
• "Export" dropdown (Markdown, PDF)
• "Back to Dashboard" (secondary button)

Input Fields (based on `notes` table):

• Note Title (text input, maps to `[Link]`)

• Content (markdown textarea, maps to `[Link]`)
• Tags (multi-select autocomplete, maps to `[Link]` via `note_tags`)
• Owner (hidden, maps to `notes.owner_id` = current user)
• Organization (hidden, maps to `notes.organization_id` = current org)

Procedures:

• Auto-save every 30 seconds → Update `notes.updated_at`

• Save → Create `notes` record (or update) + create `note_versions` record
• Export → Download note content
• Click backlink → Navigate to linked `notes` record
2.3 Note List Page
Purpose: Browse all notes

Header: "All Notes"

Table Columns (derived from `notes` table):

• Title (from `[Link]`)

• Owner (from `[Link]` via `notes.owner_id`)
• Last Modified (from `notes.updated_at`)
• Tags (from `[Link]` via `note_tags` join)
• Actions

Grid View Items:

• Note title (from `[Link]`)

• First line preview (from `[Link]`)
• Tags (from `[Link]`)
• Last modified date (from `notes.updated_at`)

Filters (based on `notes` and related tables):

• Search bar (search `[Link]`, `[Link]` via `search_index`)

• Tags (multi-select from `tags` table)
• Owner dropdown (from `users` table)
• Date range picker (on `notes.updated_at`)
• Project dropdown (via `projects` table)
• Department dropdown (via `users` department)

Buttons:

• "New Note" (primary button, creates `notes` record)

• "Create from Template" (secondary button)
• "Graph View" (icon button)
• "Export Search Results" (secondary button)

Pagination: Default 20 items per page (from `notes` table)

Module 3: File Management

3.1 File Explorer Dashboard

Purpose: Main file management interface

Header: "File Management"

Sidebar:

• Folders (tree view from `folders` table)

• Recent Files (from `files` table, ordered by `upload_date`)
• My Uploads (from `files` table where `owner_id` = current user)
• Shared With Me
• Trash (files with `deleted_at` set)

Main Content:

• Breadcrumb navigation
• File/folder grid/list view toggle
• Upload button

Grid Items (from `files` and `folders` tables):

• Icon (folder/file type)

• Name (from `[Link]` or `[Link]`)
• Size (from `[Link]`)
• Modified Date (from `files.upload_date`)
• Owner (from `[Link]` via `files.owner_id`)

List View Columns (from `files` table):

• Name (from `[Link]`)

• Type (from `files.file_type`)
• Size (from `[Link]`)
• Modified Date (from `files.upload_date`)
• Owner (from `[Link]` via `files.owner_id`)
• Actions

Buttons:

• "Upload File" (primary button)

• "Upload Folder" (secondary button)
• "New Folder" (secondary button, creates `folders` record)
• "Search Files" (icon button)
• "View Mode Toggle" (grid/list)
Filters (based on `files` table):

• Search bar (search `[Link]`, `[Link]` via `search_index`)

• File type dropdown (from `files.file_type`)
• Date range picker (on `files.upload_date`)
• Owner dropdown (from `users` table)
• Department dropdown (from `departments` via `files.department_id`)
• Project dropdown (from `projects` via `files.project_id`)

Procedures (per file item):

• Click file → Opens preview panel with `files.file_path`

• Click folder → Navigate into folder (using `[Link]`)
• Hover actions: Download, Share, Rename, Delete
• Right-click menu: All actions

Pagination: Default 24 items per page (from `files` table)

3.2 Upload File Page

Purpose: Upload individual or multiple files

Header: "Upload Files"

Main Content:

• Drag and drop zone

• "Browse Files" button
• File list (after selection)

File List Columns:

• File Name
• Size
• Status (Queued/Uploading/Completed/Failed)
• Progress Bar
• Actions

Metadata Form (after file selection, based on `files` table):

• Title (text input, required - maps to `[Link]`)

• Description (textarea - maps to `[Link]`)
• Tags (multi-select autocomplete - maps to `tags` table)
• Department (dropdown - maps to `files.department_id` → `[Link]`)
• Project (dropdown - maps to `files.project_id` → `[Link]`)
• Classification (dropdown: Document, Image, Video, Source Code, Project, Report,
Template - maps to `[Link]`)
• Confidentiality Level (dropdown - maps to `files.confidentiality_level` →
`confidentiality_levels.id`)
Buttons:

• "Start Upload" (primary button)

• "Cancel All" (secondary button)
• "Upload" (primary button per file in list)

Procedures:

• Upload → Create `files` record + update `search_index`

3.3 File Preview Panel

Purpose: Preview file content without download

Header: File name (from `[Link]`)

Preview Area:

• Image preview (for images)

• PDF viewer (for PDFs)
• Office document viewer
• Text/code viewer (for text files and source code)
• "Cannot preview" message (for unsupported formats)

Actions:

• Download button (from `files.file_path`)

• Share button
• Edit metadata button (opens edit form with `files` fields)
• Open in new tab button
• Close preview (X button)

File Details Tab (from `files` table):

• Title, Description, Tags

• Owner (from `users` table), Upload Date (from `files.upload_date`)
• Size (from `[Link]`), Type (from `files.file_type`), Classification (from
`[Link]`)
• Department (from `departments` table), Project (from `projects` table)
• Confidentiality Level (from `confidentiality_levels` table)
• Version history
3.4 Folder Create Page
Purpose: Create new folders

Header: "Create Folder"

Input Fields (based on `folders` table):

• Folder Name (text input, required - maps to `[Link]`)

• Parent Folder (dropdown, auto-detects current folder - maps to `folders.parent_id`)
• Description (textarea)
• Department (dropdown - maps to `folders.department_id` → `[Link]`)
• Project (dropdown - maps to `folders.project_id` → `[Link]`)

Buttons:

• "Create Folder" (primary button, creates `folders` record)

• "Cancel" (secondary button)

__________________________________________________

Module 4: Search Engine

4.1 Search Page

Purpose: Global search interface

Header: "Search"

Search Bar:

• Large search input

• Search button
• Advanced search toggle

Filters Sidebar (based on `search_index` table):

• Department (multi-select from `departments` via `search_index.department_id`)

• Project (multi-select from `projects` via `search_index.project_id`)
• File Type (multi-select from `search_index.entity_type`)
• Date Range (picker on `search_index.updated_at`)
• Owner (multi-select from `users` via associated entities)
• Confidentiality Level (multi-select from `search_index.confidentiality_level`)

Results Area:

• Results count display

• Sort dropdown (Relevance, Date, Title, Size)
• Result cards/rows
Result Card/Row (from `search_index` and related tables):

• Title (from `search_index.title`)

• Snippet with highlighted terms (from `search_index.content`)
• Content type badge (from `search_index.entity_type`)
• Owner (from `users` table)
• Last Modified date (from `search_index.updated_at`)
• Department tag (from `departments` table)
• Project tag (from `projects` table)

Procedures:

• Click result → Navigate to content (based on `search_index.entity_type` and

`search_index.entity_id`)
• Click owner → Filter by owner
• Click department → Filter by department
• Click tag → Filter by tag

Pagination: Default 20 results per page (from `search_index` table)

4.2 Advanced Search Page

Purpose: Complex search with boolean operators

Header: "Advanced Search"

Search Fields:

• All of these words (text input)

• Exact phrase (text input)
• Any of these words (text input)
• None of these words (text input)

Additional Filters:

• Date range (on `search_index.updated_at`)

• File types (from `search_index.entity_type`)
• Departments (from `departments` table)
• Projects (from `projects` table)
• Owners (from `users` table)
• Confidentiality levels (from `confidentiality_levels` table)

Buttons:

• "Search" (primary button, queries `search_index`)

• "Clear" (secondary button)
• "Save Search" (secondary button)
__________________________________________________

Module 5: Knowledge Handover

5.1 Handover Dashboard

Purpose: Overview of handover activities

Header: "Knowledge Handover"

Cards:

• Handovers Initiated (count from `handovers` table)

• Handovers Pending Approval (count where `[Link]` = 'pending')
• Handovers Completed (count where `[Link]` = 'completed')

Tabs:

• Initiated Handovers (from `handovers` where `departing_user_id` = current user)

• Pending Approval (from `handovers` where `approved_by_id` IS NULL)
• Completed Handovers (from `handovers` where `completed_at` IS NOT NULL)

Table Columns (derived from `handovers` table):

• Employee Name (from `[Link]` via `departing_user_id`)

• Handover Date (from `handovers.created_at`)
• Status (from `[Link]`)
• Content Count (calculated from linked notes/files/projects)
• Approver (from `[Link]` via `approved_by_id`)
• Actions

Actions/Procedures (per row):

• View Details (eye icon) → Opens handover report with `handovers` data
• Edit (pencil icon) → Opens edit handover form
• Cancel (X icon) → Update `[Link]` = 'cancelled'
• Approve (checkmark icon) → Update `[Link]` = 'approved', set
`approved_by_id`
• Reject (X icon) → Update `[Link]` = 'rejected'

Buttons:

• "Initiate Handover" (primary button, creates `handovers` record)

5.2 Initiate Handover Page
Purpose: Create new handover request

Header: "Initiate Knowledge Handover"

Steps Wizard:

23. Select Departing Employee

24. Select Receiving Employee
25. Select Content to Transfer
26. Review and Confirm

Step 1 - Departing Employee:

• Employee search dropdown (from `users` table, maps to

`handovers.departing_user_id`)

Step 2 - Receiving Employee:

• Employee search dropdown (from `users` table, maps to

`handovers.receiving_user_id`)

Step 3 - Content Selection:

• Projects checklist (from `projects` table)

• Files checklist (from `files` table)
• Notes checklist (from `notes` table)
• Select All/None buttons
• Filter by date range
• Filter by department

Step 4 - Review:

• Summary table of all selected content

• Conflict detection display
• Terms and conditions checkbox

Buttons:

• "Next" (primary button, per step)

• "Submit Handover" (primary button, creates `handovers` record)
• "Cancel" (secondary button)
5.3 Handover Report Page
Purpose: View detailed handover content

Header: "Handover Report - [Employee Name]"

Sections:

• Overview (from `handovers` record, departing user from `users` table)

• Projects (from `projects` table, filtered by handover scope)
• Files (from `files` table, filtered by handover scope)
• Notes (from `notes` table, filtered by handover scope)
• Content Statistics (total count, size, etc.)

Actions:

• Export Report (PDF/Excel)

• Print
• Download All Files (zip)

Procedures:

• Click project → Navigate to `projects` record

• Click file → Opens file preview from `files` table
• Click note → Opens note from `notes` table

5.4 Conflict Resolution Page

Purpose: Resolve duplicate content conflicts

Header: "Conflict Resolution"

Conflict Groups:

• Each conflict group shows:

• Original content (left side, from `notes` or `files` table)
• Incoming content (right side)
• Resolution options (radio buttons or dropdown)
• Overwrite Original
• Rename Incoming
• Merge Contents
• Skip

Buttons:

• "Resolve All" (primary button)

• "Skip All" (secondary button)
• "Export Conflicts" (secondary button)
__________________________________________________

Module 6: Document Lifecycle Management

6.1 Document Dashboard

Purpose: Document management overview

Header: "Document Lifecycle"

Tabs:

• My Documents (from `documents` where `owner_id` = current user)

• Drafts (from `documents` where `status` = 'draft')
• For Review (from `documents` with pending `approvals`)
• Approved (from `documents` where `status` = 'approved')
• Archived (from `documents` where `status` = 'archived')

Table Columns (derived from `documents` table):

• Document Title (from `[Link]`)

• Owner (from `[Link]` via `documents.owner_id`)
• Status Badge (from `[Link]`: draft, review, approved, archived)
• Last Modified (from `documents.updated_at`)
• Due Date (if applicable, from approval deadlines)
• Actions

Status Badges:

• Draft (gray - `[Link]` = 'draft')

• For Review (yellow - `[Link]` = 'review')
• Approved (green - `[Link]` = 'approved')
• Archived (grayed, red text - `[Link]` = 'archived')

Buttons:

• "Create Document" (primary button, creates `documents` record)

• "Import Document" (secondary button)

Filters (based on `documents` table):

• Search bar (search `[Link]`, `[Link]`)

• Status dropdown (from `[Link]` values)
• Owner dropdown (from `users` table)
• Date range (on `documents.updated_at`)
• Department dropdown (from `documents.owner_id` department)
• Project dropdown (from `documents.project_id` if added)
Procedures (per row):

• Click title → Opens document viewer/editor with `[Link]`

• Hover actions: Edit, Share, Export, Delete

6.2 Document Creator

Purpose: Create new documents

Header: "Create Document"

Steps:

27. Select Template

28. Edit Content
29. Set Metadata
30. Submit for Review (optional)

Step 1 - Template Selection:

• Template grid with thumbnails

• Search templates
• Category filters

Step 2 - Content Editor:

• Markdown editor
• Title input (maps to `[Link]`)
• Preview toggle

Step 3 - Metadata (based on `documents` table):

• Department dropdown (maps to `documents.department_id` → `[Link]`)

• Project dropdown (maps to `documents.project_id` → `[Link]`)
• Tags (multi-select - maps to `tags` table via `note_tags` pattern)
• Classification dropdown (maps to `[Link]`)
• Confidentiality Level (maps to `documents.confidentiality_level` →
`confidentiality_levels.id`)

Step 4 - Review Workflow (based on `approvals` table):

• Assign reviewers (multi-select from `users` table, creates `approvals` records)

• Set review deadline
• Add optional notes

Buttons:

• "Next" (primary button)

• "Save Draft" (secondary button, creates `documents` record)
• "Submit for Review" (primary button, creates `documents` + `approvals` records)
6.3 Document Reviewer Panel
Purpose: Review and approve documents

Header: "Document Review - [Document Title]"

Layout:

• Document viewer (left, displays `[Link]`)

• Review panel (right)

Document Viewer:

• Markdown/HTML rendering
• Version selector (from `[Link]`)
• Print button
• Export button

Review Panel (based on `approvals` table):

• Status indicator (from `[Link]`)

• Reviewer list (from `approvals` table)
• Comments section:
• Comment input (rich text - maps to `[Link]`)
• Comment list with replies
• Add Comment button
• Approval buttons:
• Approve (green - updates `[Link]` = 'approved', sets
`documents.approved_at`)
• Request Changes (yellow - updates `[Link]` = 'draft')
• Reject (red - updates `[Link]` = 'archived')
• Deadline timer (if applicable)
• Version history selector

Procedures:

• Approve → Update `[Link]`, create `approvals` record

• Request Changes → Update `[Link]` = 'draft'
• Reject → Archive document
Module 7: Audit & Activity Logging

7.1 Audit Logs Dashboard

Purpose: View system activity

Header: "Audit Logs"

Filters Sidebar (based on `audit_logs` table):

• Date Range Picker (on `audit_logs.timestamp`)

• User Search (multi-select from `users` via `audit_logs.user_id`)
• Operation Type (multi-select from `audit_logs.action_type`: CREATE, READ,
UPDATE, DELETE, APPROVE, DOWNLOAD, UPLOAD, EDIT)
• Entity Type (multi-select from `audit_logs.entity_type`: Note, File, User, Project, etc.)
• Department (multi-select from `departments` via associated entities)
• Organization (multi-select for super admin from `organizations`)

Actions Bar:

• Export button (CSV, Excel, PDF)

• Refresh button
• Filter applied count

Table Columns (derived from `audit_logs` table):

• Timestamp (from `audit_logs.timestamp`)

• User (avatar + name from `users` via `audit_logs.user_id`)
• Operation Type (color-coded from `audit_logs.action_type`)
• Entity Type (from `audit_logs.entity_type`)
• Entity Name (from associated entity table)
• Details (from `audit_logs.additional_data`)
• IP Address (from `audit_logs.ip_address`)
• Organization (from `audit_logs.organization_id`)

Details Modal (click details link, shows `audit_logs.additional_data`):

• Full operation details

• Before/After values (for updates)
• Request headers (if applicable)
• Response code

Buttons:

• "Export Logs" (primary button)

• "Download Report" (secondary button)

Pagination: Default 20 items per page (from `audit_logs` table)

7.2 User Activity Page
Purpose: View specific user's activity

Header: "User Activity - [User Name]"

Activity Timeline (from `audit_logs` table):

• Date grouping
• Activity items with icons:
• Upload (cloud upload icon - `action_type` = 'UPLOAD')
• Edit (pencil icon - `action_type` = 'UPDATE')
• Delete (trash icon - `action_type` = 'DELETE')
• Download (download icon - `action_type` = 'DOWNLOAD')
• Approve (checkmark icon - `action_type` = 'APPROVE')
• Login (lock icon - `action_type` = 'LOGIN')

Summary Cards (from `audit_logs`):

• Total Activities (count of `audit_logs` for user)

• Uploads Count (where `action_type` = 'UPLOAD')
• Edits Count (where `action_type` = 'UPDATE')
• Downloads Count (where `action_type` = 'DOWNLOAD')
• Last Active Date (max `audit_logs.timestamp`)

Filters:

• Date range (on `audit_logs.timestamp`)

• Operation type (from `audit_logs.action_type`)
• Entity type (from `audit_logs.entity_type`)

Buttons:

• "Export User Activity" (primary button)

Module 8: Knowledge Graph

8.1 Knowledge Graph Page

Purpose: Visual graph of note relationships

Header: "Knowledge Graph"

Graph Canvas:

• Interactive node/edge visualization

• Zoom controls
• Pan functionality
• Search box

Nodes (from `notes` table):

• Circle/shape representation
• Note title on hover (from `[Link]`)
• Connection count badge (from `note_links` count)
• Color-coded by type (notes, files, projects)

Edges (from `note_links` table):

• Lines connecting nodes

• Directional arrows
• Bidirectional edges for backlinks

Sidebar:

• Filter by:
• Tags (from `tags` table via `note_tags`)
• Departments (from `departments` via `users`)
• Projects (from `projects` table)
• Date Range (on `notes.updated_at`)
• Node count display (count from `notes` table)
• Edge count display (count from `note_links` table)

Actions:

• Click node → Open note (from `notes` table)

• Drag node → Reposition
• Double-click node → Center and expand
• Search node → Highlight and focus
Buttons:

• "Export Graph" (PNG, SVG, JSON)

• "Reset Layout"
• "Collapse All"
• "Expand All"

8.2 Graph Statistics Page

Purpose: Graph metrics and analysis

Header: "Graph Statistics"

Metrics Cards:

• Total Nodes (count from `notes` table)

• Total Edges (count from `note_links` table)
• Average Connections per Node (calculated from `note_links` count / `notes` count)
• Most Connected Nodes (from `note_links` grouped by `source_note_id` or
`target_note_id`)
• Graph Density (calculated metric)

Charts:

• Link distribution histogram

• Node type breakdown pie chart
• Connection strength heatmap
• Growth over time line chart

Export Buttons:

• "Export Statistics" (PDF, Excel, CSV)

• "Export Graph Data" (JSON, from `notes` and `note_links` tables)
Module 9: Notifications

9.1 Notification Center

Purpose: In-app notifications

Header: "Notifications"

Tabs:

• All (unread + read from `notifications` table)

• Unread (count where `notifications.is_read` = FALSE)
• Read (where `notifications.is_read` = TRUE)
• Archived (archived notifications)

Notification Card (from `notifications` table):

• Avatar (sender from `users` table via `notifications.user_id`)

• Sender name (from `[Link]`)
• Notification type icon (from `[Link]`)
• Message preview (from `[Link]`)
• Timestamp (from `notifications.created_at`)
• Read status indicator (from `notifications.is_read`)
• Mark as read button
• Archive button
• Delete button

Notification Categories (from `[Link]`):

• Handover requests
• Approval requests
• Security alerts
• System updates
• Mentions

Actions:

• Click notification → Navigate to content (based on `notifications.related_entity_id`)

• Mark all as read button
• Archive all button
• Clear all button

Settings:

• Notification preferences link

Pagination: Infinite scroll or 20 per page (from `notifications` table)

9.2 Notification Settings Page
Purpose: Configure notification preferences

Header: "Notification Settings"

Tabs:

• Email Notifications
• In-App Notifications
• Frequency

Email Notifications (from `system_configs` for email settings):

• Enable/Disable toggle
• Category toggles:
• Handover requests
• Approval requests
• Security alerts
• System updates
• Weekly digest
• Monthly summary

In-App Notifications:

• Enable/Disable toggle
• Category toggles (same as above)

Frequency Settings:

• Immediate
• Daily digest
• Weekly summary
• Never (except security)

Buttons:

• "Save Preferences" (primary button, updates `system_configs`)

Module 10: Reporting & Analytics

10.1 Analytics Dashboard

Purpose: System analytics overview

Header: "Analytics & Reports"

Tabs:

• Overview
• User Activity
• File Statistics
• Search Analytics
• Content Usage

Overview Tab:

• Key metrics cards (calculated from multiple tables):

• Total Users (count from `users`)
• DAU/MAU (from `audit_logs` and `auth_sessions`)
• Total Notes (count from `notes`)
• Total Files (count from `files`)
• Storage Used (sum from `[Link]`)
• Active Projects (count from `projects`)
• Charts:
• Activity over time (from `audit_logs`)
• User growth (from `users.created_at`)
• Content creation (from `notes.created_at`, `files.upload_date`)
• Search trends (from `search_index`)

User Activity Tab:

• Top active users table (from `audit_logs`)

• Activity heatmap
• Department breakdown (from `departments`)
• Role distribution (from `[Link]`)

File Statistics Tab:

• Storage usage breakdown (from `[Link]`)

• File type distribution (from `files.file_type`)
• Largest files list (from `files`, ordered by `size`)
• Upload trends (from `files.upload_date`)
Search Analytics Tab:

• Top search terms (from `search_index`)

• Zero-result searches (count from `audit_logs` where `action_type` = 'SEARCH' and
results = 0)
• Click-through rates (from search analytics)
• Search trends (from `search_index`)

Content Usage Tab:

• Most viewed content (from `audit_logs` where `action_type` = 'READ')

• Most downloaded files (from `audit_logs` where `action_type` = 'DOWNLOAD')
• Popular notes (from `notes` with high view counts)
• Stale content alerts (notes/files with no activity > 90 days)

Date Range Selector:

• Today, This Week, This Month, This Year

• Custom date range picker (on relevant timestamp fields)

Buttons:

• "Export Report" (PDF, Excel, CSV)

• "Schedule Report" (secondary button)

10.2 Audit Report Page

Purpose: Detailed audit compliance report

Header: "Audit Report"

Filters (based on `audit_logs` table):

• Date range (on `audit_logs.timestamp`)

• User (multi-select from `users` via `audit_logs.user_id`)
• Operation type (multi-select from `audit_logs.action_type`)
• Entity type (multi-select from `audit_logs.entity_type`)
• Department (from `departments` via associated entities)

Export Options:

• CSV (for Excel)

• PDF (formatted report)
• JSON (raw data)
• XML
Buttons:

• "Generate Report" (primary button, queries `audit_logs`)

• "Export Selected" (secondary button)

__________________________________________________

Module 11: System Configuration

11.1 Organization Settings Page

Purpose: Configure organization-specific settings

Header: "Organization Settings"

Tabs:

• General
• Branding
• Security
• Templates
• Notifications
• Integrations

General Tab (from `system_configs` and `organizations` tables):

• Organization Name (text input, from `[Link]`)

• Domain (text input, read-only, from `[Link]`)
• Default Language (dropdown: English, Arabic - maps to `[Link]`)
• Default Department (dropdown, from `departments` table)
• Storage Quota (number input with GB - maps to `system_configs` key =
'storage_quota')
• File Size Limit (number input with MB - maps to `system_configs` key =
'file_size_limit')

Branding Tab (from `system_configs`):

• Logo upload (drag & drop, stores file path in `system_configs`)

• Logo preview
• Primary Color picker (maps to `system_configs` key = 'primary_color')
• Secondary Color picker (maps to `system_configs` key = 'secondary_color')
• Show Organization Name toggle (maps to `system_configs` key = 'show_org_name')
Security Tab (from `system_configs` and `users`):

• Password Policy (from `system_configs`):

• Minimum Length (number)
• Require Special Characters (toggle)
• Require Numbers (toggle)
• Require Uppercase (toggle)
• Session Timeout (number, minutes - maps to `system_configs` key =
'session_timeout')
• Two-Factor Authentication (toggle - maps to `system_configs` key = '2fa_enabled')
• Failed Login Attempt Limit (number - maps to `system_configs` key =
'failed_login_limit`)
• Account Lockout Duration (number, minutes - maps to `system_configs` key =
'lockout_duration')

Templates Tab:

• Template management (see 2.4 Template Management)

• Default template selector (maps to `system_configs` key = 'default_template')

Notifications Tab (from `system_configs`):

• Email notifications enable/disable (maps to `system_configs` key =

'email_notifications_enabled')
• Default notification preferences (maps to `system_configs` key =
'default_notification_preferences')
• SMTP settings (advanced, maps to `system_configs` key = 'smtp_*')

Buttons:

• "Save Changes" (primary button, updates `system_configs` records)

11.2 User Role Management Page

Purpose: Manage user roles and permissions

Header: "User Roles & Permissions"

Tabs:

• Roles
• Permissions Matrix
• Assign Roles
Roles Tab (from `[Link]` values):

• Role list (predefined: Viewer, Contributor, Reviewer, Organization Admin, Knowledge

Manager, Project Manager)
• Edit role button
• Delete role button (if custom)
• Clone role button

Role Edit Modal:

• Role Name (text input)

• Description (textarea)
• Permission checkboxes (per module and action, stored in `system_configs` or
separate roles table)

Permissions Matrix Tab:

• Table: Users × Modules × Permissions

• Filter by role
• Filter by module
• Select all/none buttons

Assign Roles Tab:

• Search users (from `users` table)

• Department filter (from `departments` table)
• Role dropdown (from `[Link]` values)
• Assign button per user (updates `[Link]`)
• Bulk assign dropdown

Buttons:

• "Add Custom Role" (primary button)

11.3 Department Management Page

Purpose: Manage organizational departments

Header: "Department Management"

Department Tree View (from `departments` table):

• Parent department with nested children

• Expand/collapse icons
• Department card per item:
• Department Name (from `[Link]`)
• Manager (avatar + name from `users` table via `departments.manager_id` if added)
• Member Count (count of `users` where `users.department_id` = `[Link]`)
• Actions
Actions (per department):

• Edit (pencil icon)

• Add Sub-department (plus icon)
• Delete (trash icon)
• Transfer Department (move icon)

Buttons:

• "Add Department" (primary button, creates `departments` record)

• "Import Departments" (secondary button)

Add/Edit Department Modal (based on `departments` table):

• Department Name (text input, required - maps to `[Link]`)

• Parent Department (dropdown, root for top-level - maps to `departments.parent_id`)
• Manager (user search, required - maps to `departments.manager_id` → `[Link]`)
• Description (textarea)
• Department Code (text input, auto-generated)
• Color tag (color picker)

__________________________________________________

Module 12: Internationalization

12.1 Language Settings Page

Purpose: Configure language preferences

Header: "Language Settings"

Current Language Display:

• Language selector (from `languages` table: English, Arabic)

• Language indicator (from `[Link]`: EN/AR)

User Language Settings (from `system_configs`):

• Language preference (dropdown from `[Link]` - maps to `system_configs`

key = 'language')
• Auto-detect from browser (toggle - maps to `system_configs` key =
'auto_detect_language')
• Default language for organization (dropdown, admin only - maps to `system_configs`
key = 'default_language')

Buttons:

• "Save Preferences" (primary button, updates `system_configs`)

• "Reset to Default" (secondary button)
12.2 Translation Management Page (Admin)
Purpose: Manage multilingual content

Header: "Translation Management"

Tabs:

• Translatable Content
• Translation Queue
• Translation History

Translatable Content Tab (from `translated_content` table):

• Content list (from `translated_content` joined with source tables)

• Source language text (from `translated_content.content`)
• Target language text (from `translated_content.content` with different `language_id`)
• Translation status indicator
• Edit translation button

Translation Queue Tab (from `translated_content`):

• Pending translations list

• Priority sort
• Translate button per item
• Skip button

Translation History Tab (from `translated_content`):

• History table:
• Content ID (from `translated_content.entity_id`)
• Source Language (from `[Link]`)
• Target Language (from `[Link]`)
• Translator (from `[Link]` via `translated_content.translated_by_id`)
• Timestamp (from `translated_content.created_at`)
• Status

Translation Editor Modal:

• Source text (left, read-only)

• Translation input (right, rich text)
• Suggestion memory panel
• Save button
• Preview button
Buttons:

• "Export Translations" (JSON, Excel, CSV)

• "Import Translations" (secondary button)
• "Bulk Translate" (secondary button)

12.3 RTL Preview Page

Purpose: Verify RTL layout

Header: "RTL Layout Preview"

Split View:

• LTR preview (left)

• RTL preview (right)
• Toggle buttons for common pages

Pages to Preview:

• Login
• Dashboard
• Note Editor
• File Explorer
• Search
• Settings

Checks:

• Text alignment
• Button order
• Icon direction
• Table column order
• Form label positioning

Actions:

• Screenshot comparison button

• Export RTL CSS button
Database Schema Reference
All input fields and table columns are derived from the 22-table database schema:

31. organizations - Tenant root entity

32. users - User accounts with role, department associations
33. departments - Organizational departments with hierarchy
34. notes - Markdown notes with versioning
35. note_versions - Note history
36. note_links - Bidirectional note links
37. tags - Content categorization
38. note_tags - Note-tag many-to-many
39. files - Uploaded files with metadata
40. folders - File folder hierarchy
41. projects - Project documentation
42. search_index - Search index table
43. handovers - Knowledge handover workflow
44. documents - Document lifecycle management
45. approvals - Approval workflow
46. audit_logs - Activity logging
47. notifications - User notifications
48. system_configs - Configuration settings
49. languages - Language definitions
50. translated_content - Multilingual content
51. auth_sessions - Session management
52. confidentiality_levels - Access control levels

__________________________________________________

Next Steps
After UI/UX design is complete, the frontend team can implement:

53. UI Components - Build React components based on page specifications

54. RTL Implementation - Ensure full Arabic RTL support
55. Form Validation - Implement validation for all input fields
56. Table Sorting/Pagination - Implement data table functionality
57. API Integration - Connect frontend to Laravel RESTful API endpoints
58. Testing - Test all page flows and user scenarios