Skip to main content

​
Overview

Your user profile in Hive contains your personal information, contact details, and settings. Keeping your profile up-to-date helps your team recognize and contact you easily.

​
Viewing Your Profile

Access your profile by:
  1. Clicking your avatar or name in the top navigation bar
  2. Selecting Profile from the dropdown menu
Your profile displays:
  • Profile photo or auto-generated initials avatar
  • Full name and username
  • Job title and ID number
  • Email address
  • User role
  • Last access timestamp

​
Profile Fields

​
User Information

Your profile contains the following fields from the usuarios table:
FieldDescriptionEditable
nombre_usuarioYour unique username for login✓
nombre_completoYour full name (shown to team members)✓
cedulaID number or employee ID✓
puestoJob title or position✓
correoEmail address for notifications✓
rolUser role (administrador, usuario, etc.)Admin only
foto_urlProfile photo storage path✓
Your username must be unique across the organization. The system will notify you if you try to use a username that’s already taken.

​
Editing Your Profile

​
Update Basic Information

1

Open profile editor

Navigate to your profile page and click Edit Profile.
2

Modify fields

Update any of the editable fields:
  • Full Name (nombre_completo)
  • Username (nombre_usuario)
  • Job Title (puesto)
  • ID Number (cedula)
  • Email (correo)
3

Save changes

Click Save to update your profile. Changes are saved to the database and synced across all sessions.
Changing your username will affect how you log in. Make sure to remember your new username for future logins.

​
Field Validation

Hive validates profile fields before saving:
  • Email: Must be a valid email format and unique in the system
  • Username: Must be unique and contain only alphanumeric characters
  • Cedula: Must be unique if provided (some organizations require this)
If validation fails, you’ll see inline error messages next to the affected fields: 
// Field validation example
const { usernameTaken, emailTaken, cedulaTaken } = 
  await checkUniqueUserFields({ username, email, cedula });

if (usernameTaken) {
  setFieldError('username', 'Este nombre de usuario ya existe');
}

​
Profile Photos

​
Avatar System

Hive uses an intelligent avatar system:
  1. Custom Photo - If you upload a photo, it’s displayed from Supabase Storage
  2. Initials Avatar - If no photo exists, an auto-generated SVG avatar with your initials is shown
Initials avatars:
  • Use the first letters of your nombre_completo
  • Have a color generated from your name (consistent across sessions)
  • Are created locally (no network requests, zero bandwidth cost)

​
Uploading a Profile Photo

1

Select photo file

In your profile editor, click Choose File or the photo upload button.
2

Choose image

Select an image file from your device. Supported formats:
  • JPEG/JPG
  • PNG
  • WebP
  • SVG
3

Upload

Click Upload Image to start the upload process.
4

Automatic processing

The system will:
  • Validate file size (max 3 MB)
  • Validate file type
  • Upload to Supabase Storage bucket profile-pics
  • Update your foto_url field
  • Refresh your avatar across the app
For best results, use a square image (1:1 aspect ratio) at least 200x200 pixels. The system will display it at various sizes across the interface.

​
Upload Implementation

Profile photos are handled by the uploadProfileImage.js utility: 
import { uploadProfileImageWithValidation } from './utils/uploadProfileImage.js';

// Upload validates size and type automatically
const { ok, url, path } = await uploadProfileImageWithValidation(file);

if (ok) {
  // Photo URL is stored in usuarios.foto_url
  // Path format: {uid}/{uid}-Profile.{ext}
  console.log('Photo uploaded:', path);
}

​
Photo Storage

Profile photos are stored in Supabase Storage:
  • Bucket: profile-pics
  • Path format: {user_id}/{user_id}-Profile.{extension}
  • Access: Public URLs for team visibility
  • Size limit: 3 MB per file
  • Upsert behavior: Uploading a new photo replaces the old one
The system stores the relative path (e.g., abc123/abc123-Profile.jpg) in your foto_url field. The full public URL is generated on-demand by getUserAvatarUrl().

​
Removing Your Photo

To remove your profile photo:
  1. Clear the foto_url field or set it to "Foto por defecto"
  2. Save your profile
  3. The system will automatically display your initials avatar instead

​
Updating Password and Email

​
Change Your Password

Password changes are handled through Supabase Auth and require re-authentication.
To change your password:
  1. Contact your system administrator for a password reset link
  2. Or use the “Forgot Password” feature if email is configured
  3. Follow the secure link sent to your email
  4. Set your new password

​
Update Your Email

Changing your email address affects both:
  • Login credentials (if you log in with email)
  • Notification delivery (where system alerts are sent)
1

Update in profile

Edit your profile and change the correo field to your new email.
2

Verify uniqueness

The system checks that the new email isn’t already used by another user.
3

Save and verify

Save your changes. Depending on your organization’s settings, you may need to verify the new email address.

​
Profile Visibility Settings

​
Team Visibility

All team members can see:
  • Your name and username
  • Your profile photo or initials
  • Your job title
  • Your online/offline status (if presence tracking is enabled)
Private information (only visible to you and admins):
  • Your email address (unless shared with team)
  • Your ID number (cedula)
  • Your role and permissions

​
Presence Status

Your profile includes a presence_state field that shows:
  • Online - Currently active in the app
  • Offline - Not currently using the app
  • Last seen - Timestamp of your last activity
This is tracked automatically through ultimo_acceso timestamps and real-time presence updates.
Presence is updated via the Supabase Realtime system and background ping operations. No action is required on your part.

​
Admin Profile Management

If you’re an administrator, you can:
  • Edit other users’ profiles
  • Change user roles (rol field)
  • Deactivate/activate accounts
  • Reset passwords
  • Upload photos on behalf of users
Admin features are accessed through the People view in the main navigation.

​
Syncing Profile Changes

​
Real-time Updates

When you update your profile:
  1. Changes are saved to the usuarios table in Supabase
  2. Your local cache (localStorage.fullUser) is updated
  3. The UI refreshes automatically:
    • Sidebar displays updated name
    • Navigation bar shows new photo
    • Task assignments reflect new information

​
Cross-session Sync

If you’re logged in on multiple devices or tabs:
  • Profile changes may take a few moments to sync
  • Refresh the page to see the latest changes immediately
  • Real-time subscriptions will push updates automatically

​
Troubleshooting

​
Profile photo not updating

Your browser may be caching the old image. Hard refresh (Ctrl+F5 or Cmd+Shift+R) to clear it.
Ensure your image is under 3 MB and in a supported format (JPEG, PNG, WebP, SVG).
Check the browser console for errors. The upload function should log success messages.

​
Changes not saving

  • Check permissions: Ensure you have edit access to your profile
  • Validate fields: Look for red error messages indicating validation failures
  • Network issues: Check your internet connection
  • Session expired: Log out and back in to refresh your session

​
Duplicate username error

If you see “Este nombre de usuario ya existe”:
  1. Try a different username
  2. Contact your admin if you believe there’s an error
  3. Check for typos or special characters
Usernames are case-sensitive and must be unique across the entire organization.

​
API Reference

​
Update User Profile

// Update user fields in the database
const { error } = await supabase
  .from('usuarios')
  .update({
    nombre_completo: 'John Doe',
    puesto: 'Senior Developer',
    correo: '[email protected]'
  })
  .eq('id', userId);

​
Upload Profile Image

import { uploadProfileImageWithValidation } from './utils/uploadProfileImage.js';

try {
  const { ok, url, path } = await uploadProfileImageWithValidation(file);
  if (ok) {
    console.log('Upload successful:', url);
  }
} catch (error) {
  console.error('Upload failed:', error.message);
}

Authentication

Learn about login, sessions, and security

Notifications

Configure how you receive alerts and updates

Team Management

View and manage team members

User Roles

Understand roles and permissions

Build docs developers (and LLMs) love

Get started for freeTalk to us