WorkTap Admin Portal

A React Admin portal for managing Firebase Firestore data with authentication.

Features

• 🔐 Firebase Email/Password Authentication
• 📊 View and manage Employees collection
• 🏢 View and manage Employers collection
• ✏️ Edit existing documents
• 🗑️ Delete documents with confirmation
• 📱 Responsive Material-UI interface

Setup Instructions

1. Configure Firebase Credentials

You need to add your Firebase project credentials to the .env file:

1. Go to your Firebase Console
2. Select your project
3. Go to Project Settings (gear icon) → General
4. Scroll down to "Your apps" section
5. If you don't have a web app, click "Add app" and select the web platform
6. Copy the Firebase configuration values

Edit the .env file and replace the empty values:

VITE_FIREBASE_API_KEY=your_actual_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

2. Enable Authentication in Firebase

1. In Firebase Console, go to Authentication → Sign-in method
2. Enable "Email/Password" provider
3. Create an admin user account in Authentication → Users → Add user

3. Set Up Firestore Rules (Optional)

Make sure your Firestore rules allow authenticated users to read/write:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Installation

Install the application dependencies by running:

npm install

Development

Start the application in development mode by running:

npm run dev

The app will be available at http://localhost:5173

Production

Build the application in production mode by running:

npm run build

Usage

Login

Use the email and password of the admin user you created in Firebase Authentication.

Managing Collections

Employees Collection

• View all employees in a table
• Click any row to edit
• Edit fields: name, email, position, department, phone
• Delete employees using the delete button

Employers Collection

• View all employers in a table
• Click any row to edit
• Edit fields: companyName, email, industry, contactPerson, phone, address
• Delete employers using the delete button

Document Structure

The admin portal expects the following document structures:

Employees Collection

{
  name: string
  email: string
  position?: string
  department?: string
  phone?: string
  createdAt?: Date
}

Employers Collection

{
  companyName: string
  email: string
  industry?: string
  contactPerson?: string
  phone?: string
  address?: string
  createdAt?: Date
}

Customization

Adding More Fields

If your Firestore documents have additional fields:

1. Edit src/resources/employees/EmployeeList.tsx or EmployerList.tsx to add columns
2. Edit src/resources/employees/EmployeeEdit.tsx or EmployerEdit.tsx to add form fields

Example - Adding a field to EmployeeList:

<TextField source="yourNewField" />

Example - Adding a field to EmployeeEdit:

<TextInput source="yourNewField" />

Available Field Types

• TextField - Display text
• EmailField - Display email with mailto link
• DateField - Display formatted dates
• BooleanField - Display checkboxes
• NumberField - Display numbers
• TextInput - Text input field
• NumberInput - Number input field
• DateInput - Date picker
• BooleanInput - Checkbox input

Tech Stack

• React 19
• React-Admin 5.12
• Material-UI 7
• Firebase SDK
• TypeScript
• Vite

Troubleshooting

"No user found" error

• Make sure you've created a user in Firebase Authentication
• Verify the email/password are correct

"Permission denied" error

• Check your Firestore security rules
• Ensure authenticated users have read/write access

Fields not showing

• Verify the field names match your Firestore document structure
• Check browser console for errors

Build warnings about chunk size

• This is normal for React-Admin apps
• For production, consider code splitting if needed