Data Tables & CRUD Forms
Relevant source files
The following files were used as context for generating this wiki page:
The NEXUS platform utilizes a centralized system for managing digital assets through data-driven tables and modal-based CRUD (Create, Read, Update, Delete) forms. This system is responsible for handling the lifecycle of accounts, email addresses, and free trial tracking, ensuring that users can efficiently organize their digital command center with a consistent glassmorphic UI.
The architecture relies on React-based functional components on the frontend, which interact with a Python-based REST API. All CRUD operations are protected by JWT authentication, ensuring user isolation for all stored records.
Sources: test_result.md:59-105, frontend/src/App.js:14-87
Data Presentation Layer
The presentation of data in NEXUS is handled by a set of modular UI components and specialized grid layouts that adapt to the specific type of asset being managed.
Table UI Components
The project includes a dedicated table utility module that provides a standard structure for tabular data. These components are built using React's forwardRef to allow for direct DOM access when necessary.
| Component | Description |
|---|---|
Table | The root container that provides a responsive, overflow-auto wrapper. |
TableHeader | Defines the <thead> section with standardized border styling. |
TableBody | The container for data rows. |
TableRow | Individual rows with hover state transitions and selection styling. |
TableHead | Header cells with specific alignment and font weight configurations. |
TableCell | Standard data cells with padding and alignment logic. |
Sources: frontend/src/components/ui/table.jsx:5-65
Grid-Based List Views
While the system supports standard tables, the primary interface for Accounts, Emails, and Trials uses a glass-card grid layout for enhanced visual hierarchy.
- Account Vault: Displays platform details, costs, and status indicators in a responsive grid.
- Email Management: Lists addresses with purpose-based color coding (e.g., Personal, Work, Trials).
- Trial Tracker: Focuses on countdown dates and cancellation statuses.
Sources: frontend/src/App.js:348-413, frontend/src/App.css:561-680
CRUD Form Architecture
NEXUS implements CRUD operations through modal overlays (modal-overlay) that contain context-specific forms. These forms utilize controlled components to manage state and communicate with the backend via Axios.
Common Form Lifecycle
The following diagram illustrates the standard data flow for creating or updating a record within the NEXUS system.
The logic for handling form visibility and submission is centralized within the parent components (e.g., Accounts, Emails, Trials).
Sources: frontend/src/App.js:415-571, frontend/src/App.js:682-735
Implementation Details: Account Form
The AccountForm is the most complex CRUD component, handling nested data structures and various input types including text, select, and checkboxes.
// Example state management for Account CRUD
const [formData, setFormData] = useState({
platform_name: account?.platform_name || '',
platform_url: account?.platform_url || '',
username: account?.username || '',
email_used: account?.email_used || '',
password: account?.password || '',
platform_category: account?.platform_category || 'OTHER',
subscription_type: account?.subscription_type || 'FREE',
monthly_cost: account?.monthly_cost || 0,
two_fa_enabled: account?.two_fa_enabled || false,
auto_renewal: account?.auto_renewal || false,
notes: account?.notes || ''
});
Sources: frontend/src/App.js:487-500
API Integration & Data Models
The frontend CRUD forms map directly to backend endpoints defined in the server logic. The backend_test.py suite confirms these structures.
Account Model Fields
| Field | Type | Description |
|---|---|---|
platform_name | String | Name of the service (e.g., Netflix) |
platform_url | String | URL of the service |
username | String | Login identifier |
email_used | String | Email associated with the account |
password | String | Encrypted password storage |
subscription_type | Enum | Options: FREE, TRIAL, PAID |
monthly_cost | Decimal | Recurring cost of the subscription |
two_fa_enabled | Boolean | Security status indicator |
Sources: backend_test.py:186-198, frontend/src/App.js:487-505
Email & Trial Models
- Email Model: Tracks
email_address,provider,purpose(Personal, Work, Trials, etc.), andsecurity_status. - Trial Model: Tracks
platform,start_date,end_date,trial_length_days, andis_cancelledstatus.
Sources: backend_test.py:108-115, backend_test.py:270-281
Backend Endpoint Map
The following sequence diagram shows the communication between the UI and the API during a resource deletion.
Styling and Aesthetic
The CRUD forms and data tables leverage a "Cyberpunk" aesthetic defined in App.css. Key visual elements include:
- Glassmorphism: Forms use
backdrop-filter: blur(20px)and semi-transparent backgrounds (var(--glass-bg)). - Cyber Inputs: Styled with neon borders (
--electric-blue) upon focus. - Interactive Rows: Table rows and cards feature hover transitions and subtle glow effects (
--shadow-glow).
Sources: frontend/src/App.css:91-130, frontend/src/App.css:168-185
Conclusion
The Data Tables and CRUD Forms in NEXUS provide a robust framework for managing digital assets. By combining modular React components for forms with a standardized backend API, the system ensures data integrity and user isolation. The visual consistency provided by the glassmorphic styling and Tailwind-based table components creates a seamless experience for tracking accounts and subscriptions.