Repository navigation
Wireframes Demo 1
The Veritas Lab logo is positioned at the top left of the page, with the text "Veritas Lab" displayed to its right, forming the application's header identity. The page is split into two halves; the left half contains a card component that houses the login form, while the right half displays a decorative or illustrative background visual. Within the login card, the form is vertically stacked: the heading "Welcome Back" or equivalent sits at the top, followed by the email label and input field, then the password label and input field. Below the input fields, the "Remember Me" checkbox sits on the left and the "Forgot Password" hyperlink sits on the right, aligned on the same row. At the bottom of the card are two stacked buttons, the primary "Login" button and the secondary "Sign Up" button.
- Email input field
- Password input field
- Remember Me checkbox
- Forgot Password hyperlink
- Login button (primary action)
- Sign Up button (secondary action, redirects to Registration
- The Login button is disabled until both the email and password fields contain input.
- The email field validates for correct email format (must contain a valid domain); an inline error appears below the field on invalid format.
- The password field masks all characters by default.
- Failed login attempts display a non-specific error message such as "Invalid email or password" to avoid revealing which field is incorrect; this is a deliberate security measure.
- The "Remember Me" checkbox, when checked, persists until the session across browsers restarts using a long-lived token.
- The "Forgot Password" link navigates to a password reset flow.
- The "Sign Up" button redirects to the Registration page without triggering any login validation.
The Veritas Lab logo and wordmark appear in the top left, mirroring the Login page for visual consistency. The page follows the same two-column layout, with a registration card occupying the left half. Inside the card, the form fields are stacked vertically in the following order from top to bottom: Full Name, Email, Password, and Confirm Password each with a label directly above its input field. Below the input fields is the Terms of Service checkbox with accompanying label text. At the bottom of the card is the "Create Account" button spanning the full width of the form. An "Already have an account? Log in" link appears below the button.
- Full Name input field
- Email input field
- Password input field
- Confirm Password input field
- Terms of Service checkbox
- Create Account button (primary action)
- Log In redirect link (secondary action)
- The "Create Account" button remains disabled until all fields are filled and the Terms of Service checkbox is checked.
- The Confirm Password field validates in real time against the Password field; a mismatch displays an inline error such as "Passwords do not match" before submission is attempted.
- The Password field enforces a minimum strength requirement (e.g., at least 8 characters, one uppercase, one number); a hint or strength indicator is shown below the field.
- The Terms of Service checkbox is unchecked by default and must be explicitly checked to enable form submission.
- On successful registration, the user is redirected to the Login page with a success toast notification: "Account created successfully. Please log in."
- If the entered email is already associated with an existing account, an inline error is shown: "An account with this email already exists."
- All fields show inline validation errors on blur (when the user leaves a field), not just on form submission, to provide early feedback.
The page uses a two-column layout with a fixed sidebar on the left and a main content area on the right. The sidebar contains the full Veritas Lab logo and wordmark at the very top. Below the logo are the navigation elements, which are vertically stacked icon-and-label navigation buttons occupying the middle portion of the sidebar. At the sidebar footer is the profile element, displaying the user's avatar and name. The main content area is dominated by a large dashboard card. At the top of this card is the page title and a subheading beneath it. Below the heading is the query bar, which contains a search bar on the left, a case slider in the middle, and a case filter dropdown on the right. Below the query bar, the case cards are arranged in a responsive grid that occupies the remaining space of the card.
- Sidebar navigation buttons (navigate between system sections)
- Profile element at the sidebar footer (opens profile/settings dropdown)
- Search bar (filters case cards in real time)
- Case slider (adjusts filtering by a numeric case attribute such as priority or date range)
- Case filter dropdown (filters cases by predefined categories e.g. status, type)
- Case cards (navigate to the full Case page on click)
- The sidebar is collapsible; when collapsed, navigation labels are hidden and only icons are visible, preserving screen space.
- The profile element at the footer opens a dropdown menu with options for viewing the user profile and logging out.
- The search bar filters case cards in real time as the user types, without requiring a form submission.
- The case filter dropdown allows multi-select or single-select filtering; active filters are displayed as removable tags near the query bar.
- Filter and search states persist during the session but reset on page reload.
- Normal users have view-only access case cards are clickable for viewing but no create, edit, or delete actions are available.
- If no cases match the current filter or search query, an empty state message is displayed in the card area (e.g., "No cases found.").
- Case cards display a summary including case name, status badge, assigned investigator, and creation date.
The layout mirrors the Normal User Dashboard with the following additions. Directly below the page title and subheading, and above the query bar, is a row of case status summary cards (e.g., Open, In Progress, Closed, Total) that span the width of the dashboard card. Each status card displays the status label and a numerical count. In the top right corner of the main content area, outside the dashboard card, is the "New Case" button. The query bar replaces the case slider with a case tab bar, allowing investigators to switch between grouped case views. The rest of the layout sidebar, profile, search, filter, and case grid is identical to the Normal User Dashboard.
- Sidebar navigation buttons
- Profile element at the sidebar footer
- Case status summary cards (filter case list by selected status)
- New Case button (opens the New Case modal)
- Search bar
- Case tab bar (switches between case groupings e.g. My Cases, All Cases, Archived)
- Case filter dropdown
- Case cards
- The "New Case" button is role-gated and only rendered for users with the Investigator role; it is completely hidden from Normal Users, not merely disabled.
- Clicking a case status summary card filters the case list to show only cases matching that status; clicking the same card again clears the filter.
- The case tab bar replaces the slider control from the Normal User view; the active tab is visually underlined or highlighted.
- Investigators can view all cases in the system, while Normal Users only see cases they are associated with; this is enforced at the API level, not just the UI.
- All other search, filter, and sidebar behaviours are identical to the Normal User Dashboard.
The modal is centered both horizontally and vertically on the page. It renders as an overlay above the dimmed dashboard background. Inside the modal, the title "Create New Case" or equivalent appears at the top. Below the title is the Case Title label and its single-line input field. Beneath that is the Description label and its multi-line textarea input. At the bottom of the modal, two buttons are aligned to the right, the "Cancel" button on the left and the primary "Create Case" button on the right.
- Case Title input field (single-line text)
- Description textarea (multi-line text)
- Cancel button (dismisses modal without saving)
- Create Case button (submits form and creates the case)
- The modal renders as a full-page overlay; the background content is dimmed and entirely non-interactive while the modal is open.
- The "Create Case" button is disabled until both the Case Title and Description fields contain input.
- The Case Title field has a character limit (e.g., 100 characters); a character counter displayed below the field shows remaining characters.
- The Description text area has a recommended maximum length; a soft warning appears if the user approaches it.
- Clicking "Cancel" or clicking anywhere outside the modal boundary closes it without saving any entered data. Entered data is not preserved if the modal is reopened.
- On successful case creation, the modal closes, a success toast notification appears, and the newly created case is inserted at the top of the case list on the Dashboard.
- If case creation fails due to a server error, an error message is displayed inside the modal without closing it, allowing the user to retry.
The page retains the same sidebar layout as the Dashboard, the collapsible sidebar with logo, navigation, and profile footer on the left. The main content area on the right is divided into a header, a tab bar, and a two-column content section. The header spans the full width of the main area: on the left is the case name as the primary heading with the case description below it; on the right is the "Upload Media" button. Directly below the header is the tab bar, which spans the full width of the content area and provides navigation between the case's sub-sections. Below the tab bar, the layout splits into two columns: the larger left column contains the evidence grid, which is a responsive grid of evidence cards. The narrower right column contains two stacked cards: the Risk Assessment card at the top and the Case Details card below it.
- Sidebar navigation buttons
- Profile element at the sidebar footer
- Upload Media button (opens Upload Media modal)
- Case tab bar (switches between case sub-sections e.g. Evidence, Analysis, Details, Audit Log)
- Evidence cards (opens a detail view or preview of the selected media item)
- The "Upload Media" button is role-gated and only visible to Investigators; it is hidden entirely from Normal Users.
- The active tab in the tab bar is visually distinguished (e.g., underlined, filled background); navigating between tabs does not trigger a full page reload.
- Evidence cards in the grid display a thumbnail preview, file name, file type tag, and upload timestamp. Clicking a card opens a detail/preview view of the media item.
- The evidence grid is scrollable when the number of uploaded files exceeds the visible area; the right column (Risk Assessment and Case Details) remains fixed while the grid scrolls.
- The Risk Assessment card displays a computed or manually assigned risk level for the case; it updates dynamically as new evidence is added and analysed.
- The Case Details card displays read-only metadata: case ID, creation date, assigned investigator, and current status. These fields are not editable from this view.
- If no evidence has been uploaded yet, the evidence grid displays an empty state prompt (e.g., "No evidence uploaded. Click 'Upload Media' to get started.") this prompt is only visible to Investigators.
The modal is centered horizontally and vertically on the Case page. It renders as an overlay with the background dimmed and non-interactive. Inside the modal, the title "Upload Media" appears at the top. Below the title is the media dropbox, which occupies the majority of the modal's height and displays a dashed border with a cloud upload icon, the text "Drag and drop files here," and a secondary "Browse Files" link beneath it. When files are added, they are listed below the dropbox as file name entries with a remove icon beside each. At the bottom of the modal, two buttons are right-aligned the "Cancel" button on the left and the "Upload Media" button as the primary action on the right.
- Media dropbox (drag-and-drop target for file upload)
- Browse Files link (opens the system file picker)
- Individual file remove icons (removes a queued file before uploading)
- Cancel button (dismisses modal without uploading)
- Upload Media button (submits selected files for upload)
- The modal renders as a full-page overlay; the background is dimmed and non-interactive while it is open.
- The dropbox accepts both drag-and-drop and click-to-browse file selection methods; the two interaction methods produce the same outcome.
- Multiple files can be queued in a single modal session; each queued file appears as a list item with its name, size, and a remove icon.
- The "Upload Media" button is disabled until at least one valid file has been added to the queue.
- Clicking "Cancel" or clicking outside the modal dismisses it without uploading any queued files. The queue is not preserved if the modal is reopened.
- During upload, a progress indicator (e.g., a progress bar or spinner) is shown per file or for the batch. The "Upload Media" and "Cancel" buttons are disabled during active upload to prevent duplicate submissions.
- On successful upload, the modal closes automatically and the newly uploaded evidence items appear in the evidence grid on the Case page without a full page reload.
- If one or more files fail to upload, the modal remains open and displays per-file error messages, allowing the user to retry or remove the failed files.
Users will begin on the Login page, where they are presented with the option to either sign in using their existing account or click “Sign Up” to go to the Registration page. On the Registration page, they can enter their information, and if successful, they will be routed back to the Login page, where they can log in and proceed to the Dashboard page.
On the Dashboard page, normal users will only have the option to select a case, while investigators will have the option to create a new case. When an investigator clicks “New Case,” a modal will pop up with fields for creating a new case. After creating a case or clicking “Cancel,” the modal will close, and they will be returned to the Dashboard page.
When a user selects a case, they will be taken to the Case page, where they can view case details and navigate the case tabs. A user can click “Upload Media,” which will open a modal with a field to upload files. They can then upload the media or click “Cancel” to close the modal and return to the Case page.
