From 84c4f7ca737f726c049e3279dd09924e25982032 Mon Sep 17 00:00:00 2001 From: tanyar09 Date: Wed, 3 Dec 2025 16:12:34 -0500 Subject: [PATCH] feat: Enhance Help page with new user management and photo review features This commit updates the Help page to include new sections for managing user accounts and reviewing user-reported photos. It introduces detailed guidance on handling user uploads, tag suggestions, and user roles within the application. The layout has been improved for better organization, and additional tips have been added to assist users in navigating the new features. Documentation has been updated to reflect these changes. --- frontend/src/pages/Help.tsx | 1259 +++++++++++++++++++++++++++++------ 1 file changed, 1069 insertions(+), 190 deletions(-) diff --git a/frontend/src/pages/Help.tsx b/frontend/src/pages/Help.tsx index b9a1268..c678b30 100644 --- a/frontend/src/pages/Help.tsx +++ b/frontend/src/pages/Help.tsx @@ -1,9 +1,31 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' -type PageId = 'overview' | 'scan' | 'process' | 'identify' | 'auto-match' | 'search' | 'modify' | 'tags' | 'faces-maintenance' +type PageId = 'overview' | 'scan' | 'process' | 'identify' | 'auto-match' | 'search' | 'modify' | 'tags' | 'faces-maintenance' | 'user-identified-faces' | 'user-reported-photos' | 'user-tagged-photos' | 'user-uploaded-photos' | 'users' + +const HELP_PAGE_STORAGE_KEY = 'help_current_page' export default function Help() { - const [currentPage, setCurrentPage] = useState('overview') + // Load saved page from sessionStorage on mount, default to 'overview' + const [currentPage, setCurrentPage] = useState(() => { + try { + const saved = sessionStorage.getItem(HELP_PAGE_STORAGE_KEY) + if (saved && ['overview', 'scan', 'process', 'identify', 'auto-match', 'search', 'modify', 'tags', 'faces-maintenance', 'user-identified-faces', 'user-reported-photos', 'user-tagged-photos', 'user-uploaded-photos', 'users'].includes(saved)) { + return saved as PageId + } + } catch (error) { + console.error('Error loading help page from sessionStorage:', error) + } + return 'overview' + }) + + // Save current page to sessionStorage whenever it changes + useEffect(() => { + try { + sessionStorage.setItem(HELP_PAGE_STORAGE_KEY, currentPage) + } catch (error) { + console.error('Error saving help page to sessionStorage:', error) + } + }, [currentPage]) const renderPageContent = () => { switch (currentPage) { @@ -25,6 +47,16 @@ export default function Help() { return setCurrentPage('overview')} /> case 'faces-maintenance': return setCurrentPage('overview')} /> + case 'user-identified-faces': + return setCurrentPage('overview')} /> + case 'user-reported-photos': + return setCurrentPage('overview')} /> + case 'user-tagged-photos': + return setCurrentPage('overview')} /> + case 'user-uploaded-photos': + return setCurrentPage('overview')} /> + case 'users': + return setCurrentPage('overview')} /> default: return } @@ -38,7 +70,7 @@ export default function Help() { } function NavigationOverview({ onPageClick }: { onPageClick: (page: PageId) => void }) { - const navItems = [ + const mainNavItems = [ { id: 'scan' as PageId, icon: '🗂️', label: 'Scan', description: 'Import photos from folders or upload files' }, { id: 'process' as PageId, icon: '⚙️', label: 'Process', description: 'Detect and process faces in photos' }, { id: 'identify' as PageId, icon: '👤', label: 'Identify', description: 'Manually identify people in faces' }, @@ -46,7 +78,15 @@ function NavigationOverview({ onPageClick }: { onPageClick: (page: PageId) => vo { id: 'search' as PageId, icon: '🔍', label: 'Search', description: 'Search and filter photos' }, { id: 'modify' as PageId, icon: '✏️', label: 'Modify', description: 'Edit person information' }, { id: 'tags' as PageId, icon: '🏷️', label: 'Tags', description: 'Tag photos and manage photo tags' }, - { id: 'faces-maintenance' as PageId, icon: '🔧', label: 'Faces Maintenance', description: 'Manage face data' }, + ] + + const maintenanceNavItems = [ + { id: 'faces-maintenance' as PageId, icon: '🔧', label: 'Faces', description: 'Remove unwanted faces from the database (under Maintenance tab)' }, + { id: 'user-identified-faces' as PageId, icon: '✅', label: 'User Identified Faces', description: 'Approve or deny face identifications made by users (under Maintenance tab)' }, + { id: 'user-reported-photos' as PageId, icon: '🚨', label: 'User Reported Photos', description: 'Review and manage photos reported by users (under Maintenance tab)' }, + { id: 'user-tagged-photos' as PageId, icon: '🏷️', label: 'User Tagged Photos', description: 'Approve or deny tags suggested by users (under Maintenance tab)' }, + { id: 'user-uploaded-photos' as PageId, icon: '📤', label: 'User Uploaded Photos', description: 'Approve or reject photos uploaded by users (under Maintenance tab)' }, + { id: 'users' as PageId, icon: '👥', label: 'Users', description: 'Manage backend users, frontend users, and roles (under Maintenance tab)' }, ] return ( @@ -55,23 +95,50 @@ function NavigationOverview({ onPageClick }: { onPageClick: (page: PageId) => vo

The application uses a left sidebar navigation with the following pages. Click on any page to learn more about it:

-
- {navItems.map((item) => ( -
- → - - ))} + → + + ))} + + + +
+

Maintenance Tab

+

These pages are located under the Maintenance tab in the navigation sidebar:

+
+ {maintenanceNavItems.map((item) => ( + + ))} +
) @@ -106,10 +173,10 @@ function ScanPageHelp({ onBack }: { onBack: () => void }) {

Features

  • Folder Selection: Browse and select folders containing photos
    • -
  • Recursive Scanning: Option to scan subfolders recursively (enabled by default)
    • +
  • Recursive Scanning: Option to scan subdirectories recursively (enabled by default)
  • Duplicate Detection: Automatically detects and skips duplicate photos
  • Real-time Progress: Live progress tracking during import
    • -
  • EXIF Extraction: Automatically extracts date taken and metadata
    • +
@@ -118,7 +185,7 @@ function ScanPageHelp({ onBack }: { onBack: () => void }) {
  1. Click "Browse Folder" button
  2. Select a folder containing photos
    3. -
  3. Toggle "Recursive" if you want to include subfolders (enabled by default)
    4. +
  4. Toggle "Subdirectories recursively" if you want to include subfolders (enabled by default)
  5. Click "Start Scan" button
  6. Monitor progress in the progress bar
  7. View results (photos added, existing photos skipped)
    8. @@ -127,19 +194,12 @@ function ScanPageHelp({ onBack }: { onBack: () => void }) {

    What Happens

      -
    • Photos are copied to data/uploads directory
      • -
    • EXIF metadata is extracted (date taken, orientation, etc.)
      • -
    • Duplicate detection by checksum
      • +
    • Photos are added to database
    • Faces are NOT detected yet (use Process page for that)
    -
    -

    Tips

    -
      -
    • Large folders may take time - be patient!
      • -
    -
    +
) @@ -155,9 +215,7 @@ function ProcessPageHelp({ onBack }: { onBack: () => void }) {

Features

-
    -
  • Face detection method used - retinaface - Best accuracy, medium speed
    • -
  • Face recognition model used - ArcFace - Best accuracy, medium speed
    • +
    • Batch Size: Configure how many photos to process at once
    • Real-time Progress: Live progress tracking
    • Job Cancellation: Stop processing if needed
      • @@ -166,7 +224,7 @@ function ProcessPageHelp({ onBack }: { onBack: () => void }) {

      How to Use

        -
      1. Optionally set Batch Size (leave empty for default)
        2. +
      2. Optionally set Batch Size - the amount of photos to process (leave empty to process all unprocessed photos)
      3. Click "Start Processing" button
      4. Monitor progress:
          @@ -181,10 +239,8 @@ function ProcessPageHelp({ onBack }: { onBack: () => void }) {

          What Happens

            -
          • DeepFace analyzes each unprocessed photo
            • -
          • Faces are detected and located
            • -
          • 512-dimensional face encodings are generated
            • -
          • Face metadata is stored (confidence, quality, location)
            • +
          • Each unprocessed photo is analyzed
            • +
          • Faces are detected and located
          • Photos are marked as processed
          @@ -205,68 +261,116 @@ function IdentifyPageHelp({ onBack }: { onBack: () => void }) {

          Purpose

          -

          Manually identify people in detected faces

          +

          Identify people in photos and videos. This page has two tabs: "Identify Faces" for identifying people through detected faces, and "Identify People in Videos" for directly identifying people in video files.

          +
          -

          Features

          -
            -
          • Face Navigation: Browse through unidentified faces
            • -
          • Person Creation: Create new person records
            • -
          • Similar Faces Panel: View similar faces for comparison
            • -
          • Confidence Display: See match confidence percentages
            • -
          • Date Filtering: Filter faces by date taken or processed
            • -
          • Unique Faces Filter: Hide duplicate faces of same person
            • -
          • Face Information: View face metadata (confidence, quality, detector/model)
            • -
          -
          -
          -

          How to Use

          -
          -

          Basic Identification:

          +

          Tab 1: Identify Faces

          +
          +

          Features:

          +
            +
          • Face Navigation: Browse through unidentified faces using Prev/Next buttons
            • +
          • Filters: Filter by date taken, tags
            • +
          • Unique Faces Only: Hide similar faces (faces with 60%+ similarity to others)
            • +
          • Batch Size: Control how many faces to load at once
            • +
          • Similar Faces Panel: View and identify multiple similar faces at once
            • + + +
          +
          + +
          +

          How to Identify Faces:

            -
          1. Navigate to Identify page
            2. -
          2. View the current face on the left panel
            3. -
          3. Select existing person from the drop down list or create new person below
            4. -
          4. Enter person information: +
          5. Navigate to Identify page (you'll be on the "Identify Faces" tab by default)
            6. +
          6. Optionally adjust filters:
              -
            • First Name (required)
              • -
            • Last Name (required)
              • -
            • Middle Name (optional)
              • -
            • Maiden Name (optional)
              • -
            • Date of Birth (required)
              • +
            • Click "Filters" to expand filter options
              • +
            • Set date range, minimum quality, or select tags
              • +
            • Choose sort order (Quality, Date Taken, or Date Processed)
              • +
            • Click "Apply Filters" to load faces
            7. -
          7. Click "Identify" button to identify the face
            8. +
          8. Toggle "Unique faces only" checkbox to hide duplicate faces (recommended)
            9. +
          9. View the current face on the left panel
            10. +
          10. Choose how to identify: +
              +
            • Select existing person: Choose from the dropdown at the top
              • +
            • Create new person: Enter First Name, Last Name (required), Middle Name, Maiden Name, and Date of Birth (optional)
              • +
            +
            11. +
          11. Optionally use similar faces: +
              +
            • Check "Compare with similar faces" to see similar faces on the right
              • +
            • Check boxes next to similar faces you want to identify together
              • +
            • All selected faces will be identified to the same person
              • +
            +
            12. +
          12. Click "Identify" button to save the identification
            13. +
          13. Use "Refresh" button to reload faces and start from the beginning
          -
          -

          Using Similar Faces:

          -
            -
          1. Toggle "Compare" checkbox to show similar faces
            2. -
          2. View similar faces in the right panel
            3. -
          3. See confidence percentages (color-coded)
            4. -
          4. Select similar faces to bulk identify with the current left face
            5. -
          5. Click "Identify" button to bulk identify left and all selected on the right faces to that person.
            6. -
          + +
          +

          Confidence Colors (Similar Faces):

          +
            +
          • 🟢 80%+ = Very High (Almost Certain)
            • +
          • 🟡 70%+ = High (Likely Match)
            • +
          • 🟠 60%+ = Medium (Possible Match)
            • +
          • 🔴 50%+ = Low (Questionable)
            • +
          • ⚫ <50% = Very Low (Unlikely)
            • +
          +
          -

          Confidence Colors

          -
            -
          • 🟢 80%+ = Very High (Almost Certain)
            • -
          • 🟡 70%+ = High (Likely Match)
            • -
          • 🟠 60%+ = Medium (Possible Match)
            • -
          • 🔴 50%+ = Low (Questionable)
            • -
          • ⚫ <50% = Very Low (Unlikely)
            • -
          +

          Tab 2: Identify People in Videos

          +
          +

          Features:

          +
            +
          • Video List: Browse all videos in your collection
            • +
          • Filters: Filter by date range, person name, and whether videos have identified people
            • +
          • Video Player: Watch videos directly in the browser
            • +
          • Multiple People: Each video can have multiple people identified
            • +
          • People Management: View and remove people from videos
            • +
          +
          + +
          +

          How to Identify People in Videos:

          +
            +
          1. Click the "Identify People in Videos" tab
            2. +
          2. Optionally use filters to find specific videos: +
              +
            • Click "Filters" to expand filter options
              • +
            • Enter folder path, date range, person name, or filter by whether videos have people
              • +
            • Videos will automatically reload when filters change
              • +
            +
            3. +
          3. Select a video from the list on the left
            4. +
          4. The video will play in the right panel, and you'll see a list of currently identified people
            5. +
          5. To add a person: +
              +
            • Select existing person: Choose from the "Existing Person" dropdown
              • +
            • Create new person: Enter First Name and Last Name (required), plus optional Middle Name, Maiden Name, and Date of Birth
              • +
            +
            6. +
          6. Click "Add Person to Video" button
            7. +
          7. To remove a person: Click "Remove" button next to their name in the identified people list
            8. +
          +
          +

          Tips

            -
          • Use similar faces to identify groups of photos
            • -
          • Date filtering helps focus on specific time periods
            • -
          • Unique faces filter reduces clutter
            • -
          • Confidence scores help prioritize identification
            • +
          • Use the "Unique faces only" filter to reduce duplicate faces when identifying photos
            • +
          • Use similar faces panel to identify multiple faces at once
            • +
          • Date filtering helps focus on specific time periods or events
            • +
          • Tag filtering lets you identify faces only from photos with specific tags
            • +
          • Click on face images to open the full photo in a new window
            • +
          • For videos, you can identify multiple people in the same video
            • +
          @@ -280,54 +384,81 @@ function AutoMatchPageHelp({ onBack }: { onBack: () => void }) {

          Purpose

          -

          Automatically match unidentified faces to identified people

          +

          Automatically match unidentified faces to previously identified people, with options for automatic matching or manual review

          Features

            -
          • Person-Centric View: Shows identified person on left, matches on right
            • -
          • Checkbox Selection: Select which faces to identify
            • -
          • Confidence Display: Color-coded match confidence
            • -
          • Batch Identification: Identify multiple faces at once
            • -
          • Navigation: Move between different people
            • +
          • Automatic Matching: Run auto-match to automatically identify faces that meet quality criteria
            • +
          • Manual Review: Review and approve matches one person at a time
            • +
          • Person Search: Search for specific people by last name
            • +
          • Person-Centric View: Shows identified person on left, potential matches on right
            • +
          • Match Confidence: Color-coded confidence percentages for each match
            • +
          • Bulk Selection: Select all or clear all matches at once
            • +
          • Refresh: Reload the list of people and matches

          How to Use

          -

          Automatic Match Workflow:

          +

          Automatic Matching:

          1. Navigate to Auto-Match page
            2. -
          2. Click Run Auto-Match button
            3. -
          3. All unidentified faces will be matched to identified faces based on the following criteria: +
          4. Click "🚀 Run Auto-Match" button
            5. +
          5. The system will automatically match unidentified faces to identified people based on:
            • Similarity higher than 70%
            • Picture quality higher than 50%
            • Profile faces are excluded for better accuracy
            6. +
          6. A summary will show how many faces were auto-matched
            7. +
          7. Auto-matched faces are immediately identified - no manual review needed
          +
          -

          Manual Match Workflow:

          +

          Manual Review Workflow:

          1. Navigate to Auto-Match page
            2. -
          2. Faces load automatically on page load
            3. -
          3. View identified person on the left panel
            4. -
          4. View matching unidentified faces on the right panel
            5. -
          5. Check boxes next to faces you want to identify
            6. -
          6. Click "Save changes for [Person Name]" button
            7. -
          7. Use "Next" and "Back" buttons to navigate between people
            8. +
          8. People with potential matches will load automatically
            9. + +
          9. View the identified person on the left panel (with their reference photo)
            10. +
          10. View potential matches on the right panel
            11. +
          11. Review each match: +
              +
            • Check the confidence percentage (shown as a colored badge)
              • +
            • Click on face thumbnails to see the full photo
              • +
            • Check boxes next to faces you want to identify to this person
              • +
            +
            12. +
          12. Use "☑️ Select All" or "☐ Clear All" to quickly select/deselect all matches
            13. +
          13. Click "💾 Save changes for [Person Name]" button to save your selections
            14. +
          14. Use "⏮️ Back" and "⏭️ Next" buttons (or Prev/Next in the person panel) to navigate between people
            15. +
          15. Use the search box to find specific people by last name
          + +
          +

          Understanding Match Confidence:

          +
            +
          • Green badge (70%+): High confidence - usually accurate matches
            • +
          • Yellow badge (60-69%): Medium confidence - review carefully
            • +
          • Orange badge (<60%): Low confidence - review very carefully
            • +
          +

          Tips

            -
          • Review matches carefully before saving
            • -
          • Use confidence scores to guide decisions
            • -
          • You can correct mistakes by going back and unchecking
            • -
          • High confidence matches (>70%) are usually accurate
            • +
          • Start with "Run Auto-Match" to automatically identify high-confidence matches - this saves a lot of time!
            • +
          • After auto-matching, use manual review for any remaining matches that need your attention
            • +
          • Click on face thumbnails to see the full photo - this helps verify matches
            • +
          • High confidence matches (70%+) are usually accurate, but always verify if unsure
            • +
          • Use the search box to quickly find specific people instead of navigating through the list
            • +
          • If you make a mistake, you can go back and uncheck faces, then save again
            • +
          • Use "Refresh" if you've identified faces elsewhere and want to see updated match lists
            • +
          • After auto-matching, navigate to Modify People page, to view and unmatch any wrongly identified faces
          @@ -341,40 +472,105 @@ function SearchPageHelp({ onBack }: { onBack: () => void }) {

          Purpose

          -

          Search and filter photos by various criteria

          +

          Search and filter photos by various criteria, manage favorites, tag photos, and view photos in a full-screen viewer

          +
          +
          +

          Search Types

          +

          Choose from these search types:

          +
            +
          • Search photos by name: Find photos containing specific people
            • +
          • Search photos by date: Find photos taken within a date range
            • +
          • Search photos by tags: Find photos with specific tags
            • +
          • Photos without faces: Find photos that have no detected faces
            • +
          • Photos without tags: Find photos that have no tags assigned
            • +
          • Search processed photos: Find photos that have been processed for faces
            • +
          • Search un-processed photos: Find photos that haven't been processed yet
            • +
          • Favorite photos: View all your favorite photos
            • +

          Features

            -
          • People Filter: Filter by identified people
            • -
          • Date Filter: Filter by date taken or date added
            • -
          • Tag Filter: Filter by photo tags
            • -
          • Folder Filter: Filter by source folder
            • -
          • Photo Grid: Virtualized grid of matching photos
            • -
          • Pagination: Navigate through search results
            • -
          • Select All: Select all photos in current results
            • +
          • Media Type Filter: Filter to show only photos, only videos, or both
            • +
          • Tag Matching: When searching by tags, choose "ANY" (photos with any tag) or "ALL" (photos with all selected tags)
            • +
          • Photo Selection: Select individual photos or use "Select all" to select all results
            • +
          • Favorites Management: Add or remove photos from your favorites
            • +
          • Bulk Tagging: Tag multiple photos at once
            • +
          • Photo Deletion: Delete selected photos (requires permission)
            • +
          • Photo Viewer: View all search results in a full-screen slideshow
            • +
          • Sorting: Sort results by person, tags, processed status, path, or date taken
            • +
          • Open Folder: Click the folder icon to open the photo's folder in your file manager

          How to Use

          -

          Basic Search:

          -
            -
          1. Navigate to Search page
            2. -
          2. Use filter dropdowns to set criteria
            3. -
          3. Click "Search" or filters apply automatically
            4. -
          4. View matching photos in the grid
            5. -
          5. Click on photos to view details
            6. -
          6. Use "Select All" to select all photos in results
            7. -
          7. Use "Tag selected photos" to tag multiple photos at once
            8. -
          +
          +

          Searching for Photos:

          +
            +
          1. Navigate to Search page
            2. +
          2. Select a search type from the dropdown
            3. +
          3. Enter search criteria based on the search type: +
              +
            • By name: Enter person name(s), separated by commas (e.g., "John, Jane, Bob")
              • +
            • By date: Enter "From date" and/or "To date"
              • +
            • By tags: Select one or more tags (hold Ctrl/Cmd to select multiple), choose "ANY" or "ALL" match mode
              • +
            • Other types: No additional input needed - just select the type
              • +
            +
            4. +
          4. Optionally set media type filter (All, Photos, or Videos)
            5. +
          5. Click "Search" button
            6. +
          6. View results in the table below
            7. +
          +
          + +
          +

          Working with Search Results:

          +
            +
          1. Click checkboxes to select individual photos
            2. +
          2. Use "Select all" to select all photos in current results
            3. +
          3. Use "Unselect All" to clear selection
            4. +
          4. Click on a photo path to open the photo in a new window
            5. +
          5. Click the folder icon (📁) to open the photo's folder in your file manager
            6. +
          6. Click the star icon (⭐) to toggle favorite status for individual photos
            7. +
          7. Click column headers to sort results
            8. +
          +
          + +
          +

          Bulk Actions on Selected Photos:

          +
            +
          1. Select one or more photos using checkboxes
            2. +
          2. Choose an action: +
              +
            • Tag selected photos: Opens a dialog to add or remove tags from all selected photos
              • +
            • ⭐ (Star icon): Add selected photos to favorites (or remove if viewing favorites)
              • +
            • 🗑 Delete selected: Permanently delete selected photos (requires permission, cannot be undone)
              • +
            • ▶ Play photos: Opens all search results in a full-screen photo viewer
              • +
            +
            3. +
          +
          + +
          +

          Using the Photo Viewer:

          +
            +
          1. Click "▶ Play photos" button to open the full-screen viewer
            2. +
          2. If you have photos selected, the viewer will start with the first selected photo
            3. +
          3. Use arrow keys or on-screen buttons to navigate between photos
            4. +
          4. Press Escape or click the X button to close the viewer
            5. +
          +

          Tips

            -
          • Combine filters for precise searches
            • -
          • Use date ranges to find photos from specific periods
            • -
          • Tag filtering helps find themed photos
            • -
          • People filter is most useful after identification
            • +
          • When searching by name, you can enter multiple names separated by commas to find photos with any of those people
            • +
          • Use "ANY" tag matching to find photos with at least one of the selected tags
            • +
          • Use "ALL" tag matching to find photos that have all selected tags
            • +
          • Favorite photos are personal to each user - your favorites won't affect other users
            • +
          • Sorting helps organize large result sets - click column headers to change sort order
            • +
          • The photo viewer loads all search results, so it works great for browsing through large collections
            • +
          • Deleting photos is permanent - make sure you really want to delete before confirming
          @@ -388,33 +584,114 @@ function ModifyPageHelp({ onBack }: { onBack: () => void }) {

          Purpose

          -

          Edit person information and manage person records

          +

          Edit person information, view and remove incorrect identifications

          Features

            -
          • Person Selection: Choose person to edit
            • +
          • Person Search: Search for people by last name or maiden name
            • +
          • Person List: View all people with face and video counts
          • Information Editing: Update names and date of birth
            • -
          • Face Management: View and manage person's faces
            • -
          • Person Deletion: Remove person records (with confirmation)
            • +
          • Face Management: View all faces linked to a person, select and unmatch faces
            • +
          • Video Management: View all videos linked to a person, remove people from videos
            • +
          • Bulk Operations: Select and unmatch multiple faces or videos at once
            • +
          • Person Deletion: Remove person records completely (with confirmation)
            • +
          • Resizable Panels: Adjust the width of the people list panel by dragging the divider

          How to Use

          -

          Editing Person Information:

          -
            -
          1. Navigate to Modify page
            2. -
          2. Select person from dropdown
            3. -
          3. Edit information fields (First Name, Last Name, Middle Name, Maiden Name, Date of Birth)
            4. -
          4. Click "Save Changes" button
            5. -
          +
          +

          Finding and Selecting a Person:

          +
            +
          1. Navigate to Modify page
            2. +
          2. Optionally search for a person by entering their last name or maiden name in the search box
            3. +
          3. Click "Search" to filter the list, or "Clear" to show all people
            4. +
          4. Click on a person's name in the left panel to select them
            5. +
          5. The person's faces and videos will load in the right panels
            6. +
          +
          + +
          +

          Editing Person Information:

          +
            +
          1. Select a person from the list
            2. +
          2. Click the edit icon (✏️) next to their name
            3. +
          3. In the dialog, update any fields: +
              +
            • First Name (required)
              • +
            • Last Name (required)
              • +
            • Middle Name (optional)
              • +
            • Maiden Name (optional)
              • +
            • Date of Birth (optional)
              • +
            +
            4. +
          4. Click "Save" to update the information
            5. +
          +
          + +
          +

          Managing Faces:

          +
            +
          1. Select a person to view their faces
            2. +
          2. Faces are shown in a grid - click on a face thumbnail to open the full photo
            3. +
          3. To unmatch a single face: Check the box next to the face, then click "Unmatch Selected"
            4. +
          4. To unmatch multiple faces: +
              +
            • Use "Select All" to select all faces, or check individual boxes
              • +
            • Click "Unmatch Selected" button
              • +
            • Confirm the unmatch action
              • +
            +
            5. +
          5. Click the expand/collapse button (▼/▶) next to "Faces" to show or hide the faces panel
            6. +
          +
          + +
          +

          Managing Videos:

          +
            +
          1. Select a person to view their videos
            2. +
          2. Videos are shown in a list with filename and date taken
            3. +
          3. To remove a person from a single video: Click "Unmatch" next to the video
            4. +
          4. To remove a person from multiple videos: +
              +
            • Check boxes next to videos you want to unmatch
              • +
            • Click "Unmatch Selected" button
              • +
            • Confirm the unmatch action
              • +
            +
            5. +
          5. Click the expand/collapse button (▼/▶) next to "Videos" to show or hide the videos panel
            6. +
          +
          + +
          +

          Deleting a Person:

          +
            +
          1. Select a person from the list
            2. +
          2. Click the delete icon (🗑️) next to their name
            3. +
          3. Read the warning message carefully - this will: +
              +
            • Unlink all faces from this person
              • +
            • Remove all video linkages
              • +
            • Delete all person encodings
              • +
            • Permanently delete the person record
              • +
            +
            4. +
          4. Click "Delete" to confirm, or "Cancel" to abort
            5. +
          5. ⚠️ Warning: This action cannot be undone!
            6. +
          +

          Tips

            -
          • Use this to correct mistakes in identification
            • -
          • Update names if you learn more information
            • -
          • Be careful with deletion - it's permanent
            • +
          • Use the search function to quickly find people by last name or maiden name
            • +
          • You can resize the people panel by dragging the divider between panels
            • +
          • Collapse the Faces or Videos panels if you don't need to see them - saves screen space
            • +
          • Unmatching faces/videos doesn't delete them - it just removes the link to the person
            • +
          • After unmatching, faces will appear as unidentified again in the Identify page
            • +
          • Person deletion is permanent - make absolutely sure before confirming
            • +
          • Click on face thumbnails to see the full photo and verify it's the right person
          @@ -428,42 +705,93 @@ function TagsPageHelp({ onBack }: { onBack: () => void }) {

          Purpose

          -

          Manage photo tags and tag-photo relationships

          +

          Manage photo tags, assign tags to photos individually or in bulk, and identify faces from tagged photos

          Features

            -
          • Tag List: View all existing tags
            • -
          • Tag Creation: Create new tags
            • -
          • Tag Editing: Edit tag names
            • -
          • Tag Deletion: Remove tags
            • -
          • Photo-Tag Linkage: Assign tags to photos
            • +
          • View Modes: Switch between List view (table) and Icons view (thumbnail grid)
            • +
          • Folder Grouping: Photos are organized by folder - expand/collapse folders to see photos
            • +
          • Photo Selection: Select individual photos or entire folders at once
            • +
          • Tag Management: Create, edit, and delete tags
            • +
          • Multiple Tagging Methods: Tag individual photos, all photos in a folder, or multiple selected photos
            • +
          • Identify Faces: Open Identify page with faces from selected photos

          How to Use

          -

          Creating Tags:

          -
            -
          1. Navigate to Tags page
            2. -
          2. Click "Manage Tags" button
            3. -
          3. Enter new tag name
            4. -
          4. Click "Add tag" button
            5. -
          -

          Assigning Tags to Photos:

          -
            -
          • Select photos from Tags page (or from Search page)
            • -
          • Tags can be assigned to multiple photos at once by selecting multiple photos and clicking "Tag Selected Photos" button
            • -
          • Tags can be assigned to all photos in a specific folder at once by clicking the linkage icon next to the folder name
            • -
          • Tags can be assigned to a single photo by clicking the linkage icon on the right of each photo
            • -
          +
          +

          Managing Tags:

          +
            +
          1. Click "Manage Tags" button at the top
            2. +
          2. To create a tag: Enter tag name in the input field and click "Add tag"
            3. +
          3. To edit a tag: Click "Edit" next to the tag, change the name, and click "Save"
            4. +
          4. To delete tags: Check boxes next to tags you want to delete, then click "Delete selected tags"
            5. +
          5. Note: Tags are case-insensitive - "Vacation" and "vacation" are treated as the same tag
            6. +
          +
          + +
          +

          Selecting Photos:

          +
            +
          1. Use the checkbox in the table header to select/deselect all photos
            2. +
          2. Use the checkbox next to a folder name to select/deselect all photos in that folder
            3. +
          3. Click individual photo checkboxes to select specific photos
            4. +
          4. Click "Clear Selected" to clear all selections
            5. +
          +
          + +
          +

          Tagging Photos:

          +

          There are three ways to tag photos:

          +
            +
          1. Tag Individual Photo: +
              +
            • Click the tag icon (🏷️) next to a photo
              • +
            • In the dialog, select an existing tag from the dropdown or enter a new tag name
              • +
            • Click "Add" to add the tag
              • +
            • To remove tags: Check boxes next to tags you want to remove, then click "Remove selected tags"
              • +
            +
            2. +
          2. Tag All Photos in a Folder: +
              +
            • Click the tag icon (🏷️) next to a folder name
              • +
            • In the dialog, select or enter a tag name
              • +
            • Click "Add" to tag all photos in that folder
              • +
            +
            3. +
          3. Tag Multiple Selected Photos: +
              +
            • Select multiple photos using checkboxes
              • +
            • Click "Tag Selected Photos" button at the top
              • +
            • In the dialog, select or enter a tag name
              • +
            • Click "Add" to tag all selected photos
              • +
            • To remove tags: Check boxes next to common tags (tags present in all selected photos), then click "Remove selected tags"
              • +
            +
            4. +
          +
          + +
          +

          Identifying Faces from Photos:

          +
            +
          1. Select one or more photos that have been processed and contain faces
            2. +
          2. Click "👤 Identify Faces" button at the top
            3. +
          3. The Identify page will open in a new tab, showing only faces from the selected photos
            4. +
          4. Note: Only processed photos with unidentified faces will be included
            5. +
          +

          Tips

            -
          • Use descriptive tag names
            • -
          • Create tags for events, locations, themes
            • -
          • Tags help organize and find photos later
            • -
          • Note: Tags are case insensitive!
            • +
          • Use descriptive tag names like "Vacation 2024", "Family Reunion", "Birthday Party"
            • +
          • Folder-level tagging is great for organizing photos by event or location
            • +
          • Tags are case-insensitive, so "vacation" and "Vacation" are the same
            • +
          • Use the Icons view to see photo thumbnails - helpful for visual identification
            • +
          • Use the List view for detailed information about each photo
            • +
          • You can identify faces directly from the Tags page - no need to go to Search first
            • +
          • When removing tags from multiple photos, only tags that exist in ALL selected photos will be shown
          @@ -473,43 +801,594 @@ function TagsPageHelp({ onBack }: { onBack: () => void }) { function FacesMaintenancePageHelp({ onBack }: { onBack: () => void }) { return ( - +
          +
          +

          + Location: This page is located under the Maintenance tab in the navigation sidebar. +

          +

          Purpose

          -

          Remove unwanted faces - mainly due to low quality face detections

          +

          Remove unwanted faces from the database, primarily low-quality face detections or false positives

          Features

            -
          • Face List: View all faces in database
            • -
          • Face Filtering: Filter quality
            • -
          • Face Deletion: Remove unwanted faces
            • -
          • Bulk Operations: Perform actions on multiple faces
            • +
          • Quality Filtering: Filter faces by quality range using two sliders (min and max)
            • +
          • Batch Size: Control how many faces to load at once
            • +
          • Face List: View all faces with thumbnails, person names, file paths, and quality scores
            • +
          • Sorting: Sort faces by person name or quality score
            • +
          • Bulk Selection: Select all faces or individual faces
            • +
          • Bulk Deletion: Delete multiple faces at once
            • +
          • Photo Preview: Click on face thumbnails to see the full photo

          How to Use

          -

          Viewing Faces:

          -
            -
          1. Navigate to Faces Maintenance page
            2. -
          2. View list of all faces
            3. -
          3. See face thumbnails and metadata
            4. -
          4. Filter faces by quality (delete faces with low quality)
            5. -
          -

          Deleting Faces:

          -
            -
          • Select faces to delete
            • -
          • Click "Delete Selected" button
            • -
          • Confirm deletion
            • -
          • ⚠️ Warning: Deletion is permanent
            • -
          +
          +

          Filtering Faces by Quality:

          +
            +
          1. Navigate to Faces Maintenance page
            2. +
          2. Use the "Quality Range" sliders to set minimum and maximum quality values
            3. +
          3. The faces list will automatically update to show only faces within that quality range
            4. +
          4. For example, set min to 0% and max to 45% to see only low-quality faces
            5. +
          5. Adjust "Batch Size" if you want to load more or fewer faces at once
            6. +
          +
          + +
          +

          Selecting Faces:

          +
            +
          1. Check individual boxes next to faces you want to delete
            2. +
          2. Or click "Select All" to select all faces currently shown
            3. +
          3. Click "Unselect All" to clear your selection
            4. +
          4. The number of selected faces is shown at the top
            5. +
          +
          + +
          +

          Deleting Faces:

          +
            +
          1. Select one or more faces using checkboxes
            2. +
          2. Click "Delete Selected" button
            3. +
          3. Review the confirmation dialog - it shows how many faces will be deleted
            4. +
          4. Click "Delete" to confirm, or "Cancel" to abort
            5. +
          5. ⚠️ Warning: Deletion is permanent and cannot be undone!
            6. +
          6. After deletion, the face list will automatically refresh
            7. +
          +
          + +
          +

          Sorting and Viewing:

          +
            +
          • Click column headers to sort by "Person Name" or "Quality"
            • +
          • Click again to reverse the sort order
            • +
          • Click on face thumbnails to open the full photo in a new window
            • +
          • This helps verify that a face detection is correct before deleting
            • +
          +

          Tips

            -
          • Remove low-quality face detections
            • -
          • Regular maintenance keeps database clean
            • +
          • Start with a quality range filter (e.g., 0-45%) to focus on low-quality faces first
            • +
          • Click on face thumbnails to verify they're actually faces before deleting
            • +
          • Unidentified faces are easier to delete - identified faces should be reviewed more carefully
            • +
          • Use sorting to group faces by person or quality for easier review
            • +
          • Regular maintenance helps keep your database clean and improves search/identification accuracy
            • +
          • If you're unsure about a face, leave it - you can always come back later
            • +
          • Deleting a face doesn't delete the photo - only the face detection record is removed
            • +
          +
          +
          +           + ) +} + +function UserIdentifiedFacesPageHelp({ onBack }: { onBack: () => void }) { + return ( + +
          +
          +

          + Location: This page is located under the Maintenance tab in the navigation sidebar. +

          +
          +
          +

          Purpose

          +

          Review and approve or deny face identifications made by users. When users identify faces in the frontend, their identifications require admin approval before being applied to the main database.

          +
          +
          +

          Features

          +
            +
          • Pending Identifications List: View all face identifications submitted by users
            • +
          • Face Preview: See the face thumbnail and click to view the full photo
            • +
          • User Information: See which user submitted each identification
            • +
          • Person Details: View the person name and date of birth that the user entered
            • +
          • Status Filtering: Filter by pending, approved, or denied status
            • +
          • Include Denied: Option to view previously denied identifications
            • +
          • Bulk Decisions: Approve or deny multiple identifications at once
            • +
          • Identification Report: View statistics about user identifications
            • +
          • Database Cleanup: Delete denied records (admin only)
            • +
          +
          +
          +

          How to Use

          +
          +

          Reviewing Identifications:

          +
            +
          1. Navigate to Maintenance tab, then click "User Identified Faces"
            2. +
          2. View the list of pending identifications
            3. +
          3. For each identification: +
              +
            • Click on the face thumbnail to see the full photo
              • +
            • Review the person name and date of birth entered by the user
              • +
            • Check which user submitted the identification
              • +
            +
            4. +
          4. Make a decision for each identification: +
              +
            • Check "Approve" to accept the identification (creates person if needed, links face to person)
              • +
            • Check "Deny" to reject the identification
              • +
            +
            5. +
          5. Click "Submit Decisions" button to process all selected decisions
            6. +
          6. View the summary showing how many were approved and denied
            7. +
          +
          + +
          +

          Viewing Reports:

          +
            +
          1. Click the report button (if available) to view identification statistics
            2. +
          2. Optionally set date range filters
            3. +
          3. View total users, total faces identified, and per-user statistics
            4. +
          +
          + +
          +

          Filtering and Cleanup:

          +
            +
          • Check "Include denied" to see previously denied identifications
            • +
          • Use "Clear Database" (admin only) to delete all denied records
            • +
          +
          +
          +
          +

          What Happens

          +
            +
          • When Approved: The face is linked to the person (creates person if doesn't exist), person encoding is created, and status is updated to 'approved'
            • +
          • When Denied: The status is updated to 'denied' in the database, but the face remains unidentified
            • +
          • Approved identifications are immediately applied to the main database
            • +
          +
          +
          +

          Tips

          +
            +
          • Click on face thumbnails to see the full photo - this helps verify the identification is correct
            • +
          • Review the person name carefully - if a person with that name already exists, the face will be linked to them
            • +
          • You can approve or deny multiple identifications at once by checking boxes and clicking "Submit Decisions"
            • +
          • Denied identifications can be viewed later by checking "Include denied"
            • +
          • Use the identification report to track user activity and identify patterns
            • +
          +
          +
          +           + ) +} + +function UserReportedPhotosPageHelp({ onBack }: { onBack: () => void }) { + return ( + +
          +
          +

          + Location: This page is located under the Maintenance tab in the navigation sidebar. +

          +
          +
          +

          Purpose

          +

          Review photos that users have reported as inappropriate or problematic. Decide whether to keep the photos in the collection or remove them permanently.

          +
          +
          +

          Features

          +
            +
          • Reported Photos List: View all photos reported by users
            • +
          • Photo Preview: Click on photo thumbnails to view full-size images or videos
            • +
          • Report Details: See who reported the photo, when it was reported, and any comments
            • +
          • Status Filtering: Filter by pending, reviewed, or dismissed status
            • +
          • Review Decisions: Choose to keep or remove each reported photo
            • +
          • Review Notes: Add notes about your decision for record-keeping
            • +
          • Bulk Decisions: Make decisions on multiple photos at once
            • +
          • Database Cleanup: Delete kept/removed records from temporary database(admin only)
            • +
          +
          +
          +

          How to Use

          +
          +

          Reviewing Reported Photos:

          +
            +
          1. Navigate to Maintenance tab, then click "User Reported Photos"
            2. +
          2. View the list of reported photos
            3. +
          3. For each photo: +
              +
            • Click on the photo thumbnail to view the full image or video
              • +
            • Read the report comment (if provided by the user)
              • +
            • Review who reported it and when
              • +
            +
            4. +
          4. Make a decision: +
              +
            • Check "Keep" if the photo is appropriate and should remain in the collection
              • +
            • Check "Remove" if the photo should be permanently deleted
              • +
            +
            5. +
          5. Optionally add review notes explaining your decision
            6. +
          6. Click "Submit Decisions" to process all selected decisions
            7. +
          7. View the summary showing how many were kept and removed
            8. +
          +
          + +
          +

          Filtering:

          +
            +
          • Use the status dropdown to filter by pending, reviewed, or dismissed
            • +
          • Reviewed and dismissed photos are shown with reduced opacity
            • +
          +
          +
          +
          +

          What Happens

          +
            +
          • When Kept: The photo remains in the database, status is updated to 'reviewed'
            • +
          • When Removed: The photo is permanently deleted from the database, along with all associated faces, encodings, and tags - this cannot be undone!
            • +
          • Review notes are saved for record-keeping
            • +
          +
          +
          +

          ⚠️ Important Warnings

          +
            +
          • Removing photos is permanent! This deletes the photo file, all detected faces, encodings, and tags
            • +
          • Always review the full photo before making a removal decision
            • +
          • Consider the user's report comment carefully
            • +
          • Use review notes to document your reasoning for future reference
            • +
          +
          +
          +

          Tips

          +
            +
          • Always click on photo thumbnails to view the full image before making a decision
            • +
          • Read the report comment to understand why the user reported it
            • +
          • Add review notes to document your decision - helpful for future reference
            • +
          • You can make decisions on multiple photos at once by checking boxes and clicking "Submit Decisions"
            • +
          • Use the status filter to focus on pending reports that need attention
            • +
          • Use "Clear Database" (admin only) to clean up old reviewed records
            • +
          +
          +
          +           + ) +} + +function UserTaggedPhotosPageHelp({ onBack }: { onBack: () => void }) { + return ( + +
          +
          +

          + Location: This page is located under the Maintenance tab in the navigation sidebar. +

          +
          +
          +

          Purpose

          +

          Review tags that users have suggested for photos. Approve tags to add them to photos, or deny tags that are inappropriate or incorrect.

          +
          +
          +

          Features

          +
            +
          • Pending Linkages List: View all tag suggestions submitted by users
            • +
          • Photo Preview: Click on photo thumbnails to view full-size images or videos
            • +
          • Tag Information: See the proposed tag name and whether it's a new tag or existing tag
            • +
          • Current Tags: View tags already assigned to the photo
            • +
          • User Information: See which user suggested each tag
            • +
          • Status Filtering: Filter by pending, approved, or denied status
            • +
          • Sorting: Sort by photo, tag, submitted by, submitted at, or status
            • +
          • Bulk Selection: Select all to approve or deny at once
            • +
          • Database Cleanup: Delete approved/denied records from temporary danatase(admin only)
            • +
          +
          +
          +

          How to Use

          +
          +

          Reviewing Tag Suggestions:

          +
            +
          1. Navigate to Maintenance tab, then click "User Tagged Photos"
            2. +
          2. View the list of pending tag linkages
            3. +
          3. For each suggestion: +
              +
            • Click on the photo thumbnail to view the full image or video
              • +
            • Review the proposed tag name
              • +
            • Check if it's a new tag (yellow badge) or existing tag (green badge with ID)
              • +
            • See what tags are already on the photo
              • +
            • Review any notes provided by the user
              • +
            +
            4. +
          4. Make a decision: +
              +
            • Check "Approve" to add the tag to the photo (creates tag if it's new)
              • +
            • Check "Deny" to reject the tag suggestion
              • +
            +
            5. +
          5. Click "Submit Decisions" to process all selected decisions
            6. +
          6. View the summary showing how many were approved, denied, and how many new tags were created
            7. +
          +
          + +
          +

          Bulk Operations:

          +
            +
          • Use "Select All to Approve" to approve all pending suggestions
            • +
          • Use "Select All to Deny" to deny all pending suggestions
            • +
          • You can still review and change individual decisions before submitting
            • +
          +
          + +
          +

          Filtering and Sorting:

          +
            +
          • Use the status dropdown to filter by pending, approved, or denied
            • +
          • Click column headers to sort by different criteria
            • +
          • Click again to reverse the sort order
            • +
          +
          +
          +
          +

          What Happens

          +
            +
          • When Approved: The tag is created (if new) or linked to the photo (if existing), and the linkage is created in the database
            • +
          • When Denied: The status is updated to 'denied' but no tag is added
            • +
          • New tags are automatically created when approved
            • +
          • Tags are case-insensitive - "Vacation" and "vacation" are treated as the same tag
            • +
          +
          +
          +

          Tips

          +
            +
          • Click on photo thumbnails to see the full image - this helps verify if the tag is appropriate
            • +
          • Check existing tags to avoid duplicates or conflicting tags
            • +
          • New tags (yellow badge) will be created when approved - make sure the tag name is appropriate
            • +
          • Existing tags (green badge) will be linked to the photo - verify it makes sense
            • +
          • Use bulk selection for quick approval of many similar suggestions
            • +
          • Review user notes if provided - they may explain why the tag was suggested
            • +
          • Use sorting to group similar tags together for easier review
            • +
          +
          +
          +           + ) +} + +function UserUploadedPhotosPageHelp({ onBack }: { onBack: () => void }) { + return ( + +
          +
          +

          + Location: This page is located under the Maintenance tab in the navigation sidebar. +

          +
          +
          +

          Purpose

          +

          Review photos and videos that users have uploaded. Approve uploads to add them to the main collection, or reject them if they don't meet your standards.

          +
          +
          +

          Features

          +
            +
          • Pending Photos List: View all photos and videos uploaded by users
            • +
          • Photo/Video Preview: Click on thumbnails to view full-size images or play videos
            • +
          • File Information: See filename, file size, and media type
            • +
          • User Information: See which user uploaded each file
            • +
          • Status Filtering: Filter by pending, approved, or rejected status
            • +
          • Sorting: Sort by photo, uploaded by, file info, submitted at, or status
            • +
          • Bulk Selection: Select all to approve or reject at once
            • +
          • Rejection Reasons: Add reasons when rejecting photos (optional)
            • +
          • Bulk Rejection Reason: Apply the same rejection reason to multiple photos
            • +
          • File Cleanup: Delete files from temporary space of approved/rejected photos/videos(admin only)
            • +
          • Database Cleanup: Delete records from temporary database of approved/rejected photos/videos (admin only)
            • +
          +
          +
          +

          How to Use

          +
          +

          Reviewing Uploaded Photos:

          +
            +
          1. Navigate to Maintenance tab, then click "User Uploaded Photos"
            2. +
          2. View the list of pending uploads
            3. +
          3. For each upload: +
              +
            • Click on the thumbnail to view the full image or play the video
              • +
            • Review the filename, file size, and media type
              • +
            • Check which user uploaded it and when
              • +
            +
            4. +
          4. Make a decision: +
              +
            • Check "Approve" to add the photo/video to the main collection (copies file, imports to database)
              • +
            • Check "Reject" to decline the upload (optionally add a rejection reason)
              • +
            +
            5. +
          5. If rejecting, optionally enter a rejection reason (can be applied to multiple photos using bulk rejection reason)
            6. +
          6. Click "Submit Decisions" to process all selected decisions
            7. +
          7. View the summary showing how many were approved and rejected
            8. +
          +
          + +
          +

          Bulk Operations:

          +
            +
          • Use "Select All to Approve" to approve all pending uploads
            • +
          • Use "Select All to Reject" to reject all pending uploads
            • +
          • Enter a bulk rejection reason to apply the same reason to all rejected photos
            • +
          • You can still review and change individual decisions before submitting
            • +
          +
          + +
          +

          Cleanup Operations (Admin Only):

          +
            +
          • Use "Cleanup Files" to delete files from temporary space for approved/rejected photos
            • +
          • Use "Clear Database" to delete records from the temporary database for approved/rejected photos
            • +
          • These operations help free up storage space after reviewing uploads
            • +
          +
          +
          +
          +

          What Happens

          +
            +
          • When Approved: The file is copied from the upload directory to main photo storage, imported into the database (like a scan), and status is updated to 'approved'
            • +
          • When Rejected: The status is updated to 'rejected' with optional rejection reason, the file remains in the upload directory
            • +
          • Approved photos are immediately available in the main collection and can be processed for faces
            • +
          • Duplicate detection works the same as regular scans - duplicates are skipped
            • +
          +
          +
          +

          Tips

          +
            +
          • Always click on thumbnails to view the full image or video before making a decision
            • +
          • Check file sizes - very large files may take time to process
            • +
          • Use rejection reasons to provide feedback to users about why uploads were rejected
            • +
          • Use bulk rejection reason to quickly apply the same reason to multiple rejections
            • +
          • You can approve or reject multiple uploads at once for efficiency
            • +
          • Use sorting to organize uploads by user, date, or file type
            • +
          • After approving, photos will need to be processed (Process page) to detect faces
            • +
          • Use cleanup operations periodically to free up storage space
            • +
          +
          +
          +           + ) +} + +function UsersPageHelp({ onBack }: { onBack: () => void }) { + return ( + +
          +
          +

          + Location: This page is located under the Maintenance tab in the navigation sidebar. +

          +
          +
          +

          Purpose

          +

          Manage user accounts for both the current system and the Photos Viewer web application. Create users, edit their information, assign roles, and manage permissions.

          +
          +
          +

          Features

          +
            +
          • Three Tabs: Backend Users, Frontend Users, and Manage Roles
            • +
          • Backend Users: Manage users for the current system and thier access
            • +
          • Frontend Users: Manage users for the Photos Viewer web application (their login accounts)
            • +
          • Manage Roles: Configure permissions for different user roles for current system(admin only)
            • +
          • User Creation: Create new users with required information
            • +
          • User Editing: Update user information, passwords, roles, and permissions
            • +
          • User Deletion: Remove users from the system (with restrictions)
            • +
          • Filtering: Filter backend users by status (active/inactive) and role
            • +
          • Sorting: Sort users by various criteria (username, email, name, status, role, dates)
            • +
          • Frontend Permission: Grant backend users access to the Photos Viewer web application
            • +
          +
          +
          +

          How to Use

          +
          +

          Backend Users Tab:

          +
            +
          1. Navigate to Maintenance tab, then click "Users"
            2. +
          2. You'll be on the "Backend Users" tab by default
            3. +
          3. To create a user: +
              +
            • Click "+ Add User" button
              • +
            • Enter username, password (min 6 characters), email, and full name
              • +
            • Select a role from the dropdown (Admin, Manager, Moderator, Reviewer, Editor, Importer, Viewer)
              • +
            • Check "Active" to make the user active
              • +
            • Optionally check "Give the user Frontend permission" to create a matching frontend account
              • +
            • Click "Create"
              • +
            +
            4. +
          4. To edit a user: +
              +
            • Click "Edit" next to the user
              • +
            • Update email, full name, password (optional), status, or role
              • +
            • Optionally grant frontend permission if the user doesn't have a frontend account
              • +
            • Click "Save"
              • +
            +
            5. +
          5. To delete a user: Click "Delete" next to the user (users who identified faces cannot be deleted)
            6. +
          6. Use filters to show only active/inactive users or specific roles
            7. +
          7. Click column headers to sort users
            8. +
          +
          + +
          +

          Frontend Users Tab:

          +
            +
          1. Click the "Front End Users" tab
            2. +
          2. To create a frontend user: +
              +
            • Click "+ Add User" button
              • +
            • Enter email, name, and password (min 6 characters)
              • +
            • Select role (Admin or User)
              • +
            • Check "Grant write access" if the user should be able to upload/identify/tag
              • +
            • Click "Create"
              • +
            +
            3. +
          3. To edit a frontend user: +
              +
            • Click "Edit" next to the user
              • +
            • Update email, name, role, or write access
              • +
            • Click "Save"
              • +
            +
            4. +
          4. To delete a frontend user: Click "Delete" next to the user
            5. +
          5. Click column headers to sort users
            6. +
          +
          + +
          +

          Manage Roles Tab (for users for current system):

          +
            +
          1. Click the "Manage Roles" tab (only visible if you have permission)
            2. +
          2. View the permissions matrix showing which roles have access to which features
            3. +
          3. Check or uncheck boxes to grant or revoke permissions for specific roles
            4. +
          4. Click "Save Changes" to apply your modifications
            5. +
          5. Click "Reset" to revert to the last saved state
            6. +
          +
          +
          +
          +

          Current System User Roles

          +
            +
          • Admin: Full system access
            • +
          • Manager: Administrative privileges
            • +
          • Moderator: Can review user submissions
            • +
          • Reviewer: Can review and approve content
            • +
          • Editor: Can edit content
            • +
          • Importer: Can import photos
            • +
          • Viewer: Read-only access
            • +
          +
          +
          +

          Tips

          +
            +
          • Backend users and frontend users are separate - a user can have both accounts
            • +
          • Use "Give the user Frontend permission" when creating/editing backend users to automatically create a matching frontend account
            • +
          • Passwords must be at least 6 characters long
            • +
          • Usernames and emails must be unique (case-insensitive)
            • +
          • Users who have identified faces cannot be deleted - set them inactive instead
            • +
          • Use filters to quickly find specific users or roles
            • +
          • Use sorting to organize users by different criteria
            • +
          • Role permissions can be customized in the "Manage Roles" tab (admin only)
            • +
          • Frontend users need write access to upload photos, identify faces, or tag photos