Announcement Management System
Complete guide for organization announcement management. Select a topic below to get started.
System Overview
Learn about the system features, user roles, and permissions.
Accessing the System
How to login and navigate to the announcement module.
Announcement View
Understanding the announcement interface and table layout.
Creating Announcements
How to create new announcements with date and time settings.
Editing Announcements
How to modify existing announcements.
Deleting Announcements
Process for removing announcements from the system.
Timezone Management
Handling timezone differences in announcement scheduling.
Redux State Management
Understanding the state management architecture.
API Integration
Backend API endpoints and data flow.
Troubleshooting
Solutions to common issues and problems.
System Overview
The Announcement Management System enables organizations to create, manage, and display time-sensitive announcements to users with proper scheduling and timezone handling.
Key Features
🌍 Multi-timezone Support
Automatic timezone detection and conversion for accurate scheduling.
📅 Date & Time Scheduling
Set precise start and end times for announcements.
📱 Responsive Design
Optimized for both desktop and mobile devices.
🎨 Dark/Light Mode
Theme support for better user experience.
🔄 Real-time Updates
Immediate UI updates after CRUD operations.
⏱️ Live Time Display
Current time display with user's timezone.
Technical Architecture
1
Frontend Framework
- React component-based UI library
- Redux for state management
- Day.js for date/time manipulation
- React DatePicker for date selection
- Lucide React for icons
2
State Management
- Redux Store for centralized state management
- Announcement Slice for dedicated state
- Async Thunks for API operations
- Loading States for better UX
3
Data Flow
- User actions trigger Redux actions
- Async thunks handle API calls
- Responses update Redux state
- Components re-render with updated state
Component Structure
Main Component Features:
- Receives organizationId and darkMode props
- Manages local state for form data
- Handles edit and delete operations
- Manages popup states for creation/editing
- Handles timezone detection and conversion
Accessing the Announcement System
How to access and navigate the announcement management interface.
1
System Entry Point
- Access through main application navigation
- Navigate to Announcements section
- System requires organization ID for data isolation
- Announcements load automatically on access
2
Component Initialization
- Component receives organization ID as parameter
- Optional dark mode theme support
- Automatically fetches existing announcements
- Sets up timezone detection and current time display
Note: The system automatically detects the user's timezone and displays all times in their local timezone, while storing times in UTC in the database.
Announcement View Interface
Understanding the announcement management interface and table layout.
Main Interface Components
1
Header Section
- Current time display in user's timezone
- Add button (yellow circular with plus icon)
- Loading and error status messages
- Real-time clock updates every second
2
Announcements Table
- Message column showing announcement content
- Start Time column with formatted local time
- End Time column with formatted local time
- Actions column with edit and delete buttons
Table Columns Description
| Column | Description | Data Format |
|---|---|---|
| Message | The announcement content text | Plain text |
| Start Time | When the announcement becomes active | YYYY-MM-DD HH:mm:ss (local time) |
| End Time | When the announcement expires | YYYY-MM-DD HH:mm:ss (local time) |
| Actions | Edit (pencil) and Delete (trash) buttons | Interactive buttons |
Empty State
When no announcements exist, the table displays:
- Large envelope icon (📭)
- "No announcements found" message
- Prompt to create the first announcement
Creating Announcements
How to create new announcements with proper scheduling and timezone handling.
Creating Process
1
Open Creation Panel
- Click the yellow circular "+" button in header
- Right-side panel slides in with creation form
- Form header shows "Create New Announcement"
- All fields start empty and ready for input
2
Fill Announcement Message
- Enter announcement text in message textarea
- Field is required (cannot be empty)
- Use clear and concise messaging
- Consider audience and purpose
3
Set Start Date
- Use date picker or type YYYY-MM-DD format
- Calendar icon available for selection
- Field is required
- Cannot select past dates
4
Set End Date
- Use date picker or type YYYY-MM-DD format
- Field is required
- Must be equal to or after start date
- Cannot select past dates
5
Set Start Time
- Use time input field (HH:MM format)
- Field is required
- Consider timezone implications
- Ensure logical time sequence
6
Set End Time
- Use time input field (HH:MM format)
- Field is required
- Should be after start time
- Consider announcement duration
7
Submit Announcement
- Click green "Create" button at bottom
- System validates all required fields
- Dates and times convert to UTC for storage
- Loading overlay appears during processing
Data Processing Steps
1
Date/Time Combination
- Combine selected date and time values
- Create complete datetime strings
- Handle missing or incomplete data
2
UTC Conversion
- Convert local datetime to UTC
- Use standardized UTC format
- Store in database as UTC
3
Payload Preparation
- Include announcement message
- Add organization ID
- Include UTC start and end times
- Prepare for API submission
Success: After successful creation, the panel closes, success message appears, and the new announcement is immediately visible in the table.
Editing Announcements
How to modify existing announcements.
Editing Process
1
Initiate Edit
- Locate announcement to edit in table
- Click blue pencil icon in Actions column
- Edit panel slides in from right
- Panel header shows "Edit Announcement"
- Form pre-populated with existing data
2
Data Pre-population
- Message field populated from existing data
- Start date extracted from stored UTC time
- End date extracted from stored UTC time
- Start time converted to local time display
- End time converted to local time display
3
Modify Fields
- Edit any field as needed
- Same validation rules as creation
- All fields remain required
- Date restrictions still apply
4
Save Changes
- Click green "Update" button
- System performs validation checks
- Dates/times converted to UTC
- Update action dispatched to Redux
Note: The editing process uses the same form validation and data processing logic as creation, ensuring consistency across both operations.
Deleting Announcements
Process for removing announcements from the system.
Deletion Process
1
Initiate Delete
- Locate announcement to delete in table
- Click red trash icon in Actions column
- Confirmation dialog appears immediately
- Dialog shows deletion confirmation message
2
Confirmation Dialog
- Cancel button (gray) - closes without action
- Delete button (red) - proceeds with deletion
- Semi-transparent overlay prevents accidental clicks
- Clear confirmation message displayed
3
Execute Deletion
- Click red "Delete" button in dialog
- Delete action dispatched immediately
- Announcement removed from database
- UI updates to reflect deletion
Deletion State Management
1
State Variables
- deleteId - stores ID of announcement to delete
- showDeleteConfirm - controls confirmation dialog visibility
- Manages deletion confirmation flow
2
Delete Button Handler
- Sets announcement ID for deletion
- Shows confirmation dialog
- Prevents accidental deletions
Important: Deletion is permanent and cannot be undone. Always double-check before confirming deletion.
Timezone Management
Handling timezone differences in announcement scheduling and display.
Timezone Architecture
1
Timezone Detection
- Automatic detection using browser Intl API
- Fallback to Australia timezone if detection fails
- Timezone preference can be saved locally
- Real-time detection on component load
2
Current Time Display
- Live clock showing current time in user's timezone
- Updates every second for accuracy
- Format: "YYYY-MM-DD HH:mm:ss (Timezone)"
- Displayed as badge in header section
3
UTC Storage & Local Display
- All times stored in UTC in database
- Automatic conversion to local time for display
- Conversion happens during data fetching
- Ensures consistent behavior across timezones
Date/Time Processing Flow
User Input (Local Time)
YYYY-MM-DD HH:MM
YYYY-MM-DD HH:MM
↓
Combine & Convert to UTC
UTC Conversion
UTC Conversion
↓
Storage
UTC in Database
UTC in Database
↓
Retrieval & Conversion
Local Time Conversion
Local Time Conversion
↓
Display
Local Time for User
Local Time for User
Benefits:
- Users always see times in their local timezone
- Database stores consistent UTC times
- Automatic handling of daylight saving time
- No manual timezone calculations needed
Redux State Management
Understanding the state management architecture for announcements.
Redux Slice Structure
1
State Structure
- items - array of announcement objects
- loading - boolean indicating API call status
- error - string containing error message if any
2
Redux Actions
- fetchAnnouncements - get all announcements
- createAnnouncement - add new announcement
- updateAnnouncement - modify existing announcement
- deleteAnnouncement - remove announcement
- clearAnnouncementError - clear error state
Async Thunk Operations
1
Data Flow for CRUD Operations
- Component dispatches async thunk
- Redux sets loading state to true
- API makes HTTP request to backend
- Response returns data or error
- Redux updates state with response
- Component re-renders with new state
2
Loading State Management
- Loading state triggers UI indicators
- Prevents duplicate submissions
- Provides visual feedback to users
- Automatically managed by Redux
Error Handling
1
Error State Management
- Errors stored in Redux state
- Displayed in UI with appropriate styling
- Can be manually cleared when needed
- Automatically cleared on successful operations
API Integration
Backend API endpoints and data flow for announcement management.
API Endpoints
| Endpoint | Method | Purpose | Parameters |
|---|---|---|---|
| /api/announcements | GET | Fetch announcements for organization | organizationId |
| /api/announcements | POST | Create new announcement | announcement object |
| /api/announcements/{id} | PUT | Update existing announcement | id, announcement object |
| /api/announcements/{id} | DELETE | Delete announcement | id |
Data Models
1
Announcement Object Structure
- id - unique identifier
- message - announcement content
- startTime - UTC start datetime
- endTime - UTC end datetime
- organizationId - organization identifier
- createdAt - creation timestamp
- updatedAt - last update timestamp
2
Create/Update Payload
- message - required string
- startTime - required UTC datetime string
- endTime - required UTC datetime string
- organizationId - required string
Error Responses
| HTTP Status | Scenario | Response |
|---|---|---|
| 200 | Success | Requested data or success message |
| 400 | Bad Request | Validation errors or missing fields |
| 401 | Unauthorized | Authentication required |
| 403 | Forbidden | Insufficient permissions |
| 404 | Not Found | Resource doesn't exist |
| 500 | Server Error | Internal server error |
Troubleshooting Guide
Solutions to common issues and problems you may encounter.
Common Issues
Issue 1: Announcements Not Loading
Possible Causes:
- Network connectivity issues
- Invalid organization ID
- API server down or unreachable
- Authentication/authorization problems
Solutions:
- Check internet connection
- Verify organization ID is correct
- Check browser console for API errors
- Refresh the page (F5)
- Contact system administrator
Issue 2: Cannot Create/Edit Announcements
Possible Causes:
- Required fields missing
- Invalid date/time format
- End date before start date
- API validation errors
Solutions:
- Fill all required fields (marked with *)
- Use date picker instead of manual entry
- Ensure end date/time is after start
- Check error message for specific issues
Issue 3: Timezone Display Issues
Possible Causes:
- Browser timezone detection failed
- Daylight saving time transitions
- Server timezone misconfiguration
Solutions:
- Check if browser supports timezone detection
- Verify system clock is correct
- Contact admin for server timezone check
- Use UTC for critical time-sensitive announcements
Issue 4: Form Submission Stuck
Possible Causes:
- Slow network connection
- Large announcement message
- API timeout
- Browser performance issues
Solutions:
- Wait for operation to complete (loading indicator)
- Check network speed
- Reduce announcement message length
- Refresh page and try again
- Clear browser cache
Error Message Reference
| Error Scenario | Possible Cause | Solution |
|---|---|---|
| "Network Error" | API unreachable | Check internet connection and API status |
| "Unauthorized" | Session expired or invalid credentials | Re-login to application |
| "Validation Failed" | Missing or invalid form data | Check all required fields are filled correctly |
| "Date in past" | Start/end date before current date | Select future dates only |
| "End before start" | End date/time before start | Adjust dates/times so end is after start |
Developer Tools
For Technical Support:
- Browser Console - check for JavaScript errors (F12)
- Network Tab - monitor API requests and responses
- Redux DevTools - inspect application state
- Local Storage - check for stored preferences
Contact Support
When to Contact Support:
- Persistent errors after trying solutions
- System performance issues
- Feature requests or enhancements
- Data corruption or loss
Information to Provide:
- Browser and version
- Operating system
- Steps to reproduce the issue
- Error messages (screenshot if possible)
- Network conditions