Package Exports

firebase-admin-panel
firebase-admin-panel/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (firebase-admin-panel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Firebase Admin Panel Package

A customizable React admin panel for managing Firebase collections. This package allows you to use default components or provide your own custom components.

Installation

To install the package, run:

npm install firebase-admin-panel

Usage

Note: Make sure to setup the database and storage in your firestore and update any necessary rules

Basic Usage with Default Components

In your index.js file, pass the firebaseConfig and collectionStructure to the AdminPage component.

import React from "react";
import ReactDOM from "react-dom";
import { AdminPage } from "firebase-admin-panel";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const collectionStructure = {
  bookings: {
    endDate: "date",
    id: "string",
    name: "string",
    phone: "number",
    roomId: { type: "docRef", collection: "rooms" },
    startDate: "date",
  },
  rooms: {
    number: "number",
    type: "string",
  },
};

ReactDOM.render(
  <React.StrictMode>
    <AdminPage
      firebaseConfig={firebaseConfig}
      collectionStructure={collectionStructure}
    />
  </React.StrictMode>,
  document.getElementById("root")
);

make sure to update your indedx.html to add the following line

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- add this line -->
    <div id="modal-root"></div>
  </body>
</html>

for the collection structure the available types are:

number
string
date
array
{ type: "docRef", collection: "collectionName" }
{ type: "docRef array", collection: "collectionName" }

Usage with Custom Components

You can provide your own custom components for CollectionList, DocumentTable, Modal, and DocumentForm. Below are barebones templates for each custom component.

import React from "react";

const CustomCollectionList = ({
  onSelectCollection,
  collections,
  className = "",
  itemClassName = "",
}) => {
  return (
    <div className={`p-4 bg-purple-800 text-white rounded-lg ${className}`}>
      <h2 className="text-lg font-semibold mb-4">My Custom Collections</h2>
      {collections.length > 0 ? (
        <ul>
          {collections.map((collection) => (
            <li
              key={collection}
              onClick={() => onSelectCollection(collection)}
              className={`cursor-pointer p-2 hover:bg-purple-700 rounded-md ${itemClassName}`}
            >
              {collection}
            </li>
          ))}
        </ul>
      ) : (
        <p>No collections found.</p>
      )}
    </div>
  );
};

export default CustomCollectionList;

import React from "react";
import { useDocuments, deleteDocument, Timestamp } from "firebase-admin-panel";

const CustomDocumentTable = ({
  collectionName,
  onEdit,
  onAdd,
  tableClassName = "",
  rowClassName = "",
  cellClassName = "",
  buttonClassName = "",
  schema,
}) => {
  const { documents } = useDocuments(collectionName);

  const handleDelete = async (id) => {
    await deleteDocument(collectionName, id);
  };

  const getColumns = () => {
    if (!schema) return [];
    return Object.keys(schema);
  };

  const columns = getColumns();

  const formatValue = (key, value) => {
    if (Array.isArray(value)) {
      return value.join(", ");
    } else if (schema[key] === "image") {
      return <img src={value} alt={key} className="h-[30px] object-cover" />;
    } else if (value instanceof Timestamp) {
      return value.toDate().toISOString().split("T")[0];
    } else {
      return value;
    }
  };

  return (
    <div className="table-wrapper w-full border-collapse">
      <h2 className="text-xl font-bold mb-4">{collectionName}</h2>
      <button
        onClick={() => onAdd(schema)}
        className={`bg-green-500 text-white py-2 px-4 rounded mb-4 ${buttonClassName}`}
      >
        Add New Document
      </button>
      <table className={`w-full table-auto ${tableClassName}`}>
        <thead>
          <tr>
            {columns.map((column) => (
              <th
                key={column}
                className={`border px-4 py-2 text-left ${cellClassName}`}
              >
                {column}
              </th>
            ))}
            <th className={`px-4 py-2 w-32 text-center ${cellClassName}`}>
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          {documents.map((doc) => (
            <tr key={doc.id} className={`hover:bg-gray-100 ${rowClassName}`}>
              {columns.map((column) => (
                <td
                  key={column}
                  className={`border px-4 py-2 ${cellClassName}`}
                >
                  {formatValue(column, doc[column])}
                </td>
              ))}
              <td
                className={`border px-4 py-2 w-60 text-center ${cellClassName}`}
              >
                <div className="flex items-center justify-center">
                  <button
                    onClick={() => onEdit(doc)}
                    className={`bg-blue-500 text-white py-1 px-2 rounded w-[50%] ${buttonClassName}`}
                  >
                    Edit
                  </button>
                  <button
                    onClick={() => handleDelete(doc.id)}
                    className={`bg-red-500 text-white py-1 px-2 rounded w-[50%] ${buttonClassName}`}
                  >
                    Delete
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default CustomDocumentTable;

import React from "react";
import ReactDOM from "react-dom";

const CustomModal = ({ children, onClose }) => {
  return ReactDOM.createPortal(
    <div className="fixed inset-0 flex items-start justify-center bg-red-500 bg-opacity-50 overflow-y-scroll">
      <div className="bg-white p-4 rounded-lg shadow-lg w-[30vw]">
        {children}
        <button
          onClick={onClose}
          className="mt-4 bg-red-700 text-white py-2 px-4 rounded"
        >
          Close
        </button>
      </div>
    </div>,
    document.getElementById("modal-root")
  );
};

export default CustomModal;

import React, { useState, useEffect } from "react";
import CreatableSelect from "react-select/creatable";
import {
  addDocument,
  updateDocument,
  getCollectionDocuments,
} from "firebase-admin-panel";
import { uploadImage } from "firebase-admin-panel";
import { Timestamp } from "firebase/firestore";

const CustomDocumentForm = ({
  collectionName,
  docToEdit,
  onSave,
  schema,
  formClassName = "",
  inputClassName = "",
  labelClassName = "",
  buttonClassName = "",
}) => {
  const [formData, setFormData] = useState({});
  const [file, setFile] = useState(null);
  const [docRefOptions, setDocRefOptions] = useState({});

  useEffect(() => {
    if (docToEdit) {
      const initialData = { ...docToEdit };
      Object.keys(initialData).forEach((key) => {
        if (initialData[key] instanceof Timestamp) {
          initialData[key] = initialData[key]
            .toDate()
            .toISOString()
            .split("T")[0];
        } else if (Array.isArray(initialData[key])) {
          initialData[key] = initialData[key].map((value) => ({
            label: value,
            value: value,
          }));
        }
      });
      setFormData(initialData);
    } else {
      const initialData = {};
      Object.keys(schema).forEach((key) => {
        initialData[key] =
          schema[key].type === "array" || schema[key].type === "docRef array"
            ? []
            : "";
      });
      setFormData(initialData);
    }
  }, [docToEdit, schema]);

  useEffect(() => {
    const fetchDocRefOptions = async () => {
      const options = {};
      for (const key in schema) {
        if (
          schema[key].type === "docRef" ||
          schema[key].type === "docRef array"
        ) {
          const docs = await getCollectionDocuments(schema[key].collection);
          options[key] = docs.map((doc) => ({ label: doc.id, value: doc.id }));
        }
      }
      setDocRefOptions(options);
    };

    fetchDocRefOptions();
  }, [schema]);

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSelectChange = (selectedOptions, key) => {
    setFormData({
      ...formData,
      [key]: selectedOptions,
    });
  };

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  function getKeyByValue(object, value) {
    for (let prop in object) {
      if (object.hasOwnProperty(prop)) {
        if (object[prop] === value) return prop;
      }
    }
  }
  const handleSubmit = async (e) => {
    e.preventDefault();
    let tempDataToSave = { ...formData };
    let dataToSave = tempDataToSave;
    if (
      tempDataToSave &&
      tempDataToSave.tags &&
      tempDataToSave.tags.length > 0
    ) {
      tempDataToSave.tags?.forEach((e, index) => {
        dataToSave.tags[index] = e.value;
      });
    }

    if (file) {
      const imageUrl = await uploadImage(
        file,
        `${collectionName}/${file.name}`
      );
      dataToSave[getKeyByValue(schema, "image")] = imageUrl; // Assuming imageUrl is a field in your schema
    }

    Object.keys(dataToSave).forEach((key) => {
      if (schema[key] && schema[key].type === "timestamp" && dataToSave[key]) {
        dataToSave[key] = Timestamp.fromDate(new Date(dataToSave[key]));
      } else if (
        (schema[key] && schema[key].type === "array") ||
        (schema[key] && schema[key].type === "docRef array")
      ) {
        dataToSave[key] = dataToSave[key].map((option) => option.value);
      }
    });

    if (docToEdit) {
      await updateDocument(collectionName, docToEdit.id, dataToSave);
    } else {
      await addDocument(collectionName, dataToSave);
    }
    onSave();
  };

  const getInputType = (type) => {
    switch (type) {
      case "string":
        return "text";
      case "number":
        return "number";
      case "date":
        return "date";
      case "image":
        return "file";
      case "docRef":
      case "docRef array":
        return "select";
      default:
        return "text";
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className={`mt-4 p-4 border border-gray-300 bg-white ${formClassName}`}
    >
      {Object.keys(schema).map((key) => (
        <div key={key} className="mb-4">
          <label className={`block font-bold ${labelClassName}`}>{key}</label>
          {schema[key] === "image" ? (
            <input
              type="file"
              name={key}
              onChange={handleFileChange}
              className={`w-full p-2 my-2 border border-gray-300 rounded ${inputClassName}`}
            />
          ) : schema[key] === "array" || schema[key].type === "docRef array" ? (
            <CreatableSelect
              isMulti
              name={key}
              value={formData[key]}
              onChange={(selectedOptions) =>
                handleSelectChange(selectedOptions, key)
              }
              className="basic-multi-select"
              classNamePrefix="select"
              formatCreateLabel={(inputValue) => `Add "${inputValue}"`}
              options={
                schema[key].type === "docRef array" ? docRefOptions[key] : []
              }
            />
          ) : schema[key].type === "docRef" ? (
            <select
              name={key}
              value={formData[key]}
              onChange={handleChange}
              className={`w-full p-2 my-2 border border-gray-300 rounded ${inputClassName}`}
            >
              {docRefOptions[key] &&
                docRefOptions[key].map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
            </select>
          ) : (
            <input
              type={getInputType(schema[key])}
              name={key}
              value={formData[key]}
              onChange={handleChange}
              className={`w-full p-2 my-2 border border-gray-300 rounded ${inputClassName}`}
            />
          )}
        </div>
      ))}
      <button
        type="submit"
        className={`bg-blue-500 text-white py-2 px-4 rounded ${buttonClassName}`}
      >
        {docToEdit ? "Update" : "Add"} Document
      </button>
      <button
        type="button"
        onClick={onSave}
        className={`bg-red-500 text-white py-2 px-4 rounded ml-2 ${buttonClassName}`}
      >
        Cancel
      </button>
    </form>
  );
};

export default CustomDocumentForm;

index.js for example

import React from "react";
import ReactDOM from "react-dom";
import { AdminPage } from "firebase-admin-panel";
import CustomCollectionList from "./components/CustomCollectionList";
import CustomDocumentTable from "./components/CustomDocumentTable";
import CustomModal from "./components/CustomModal";
import CustomDocumentForm from "./components/CustomDocumentForm";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const collectionStructure = {
  bookings: {
    endDate: "date",
    id: "string",
    name: "string",
    phone: "number",
    roomId: { type: "docRef", collection: "rooms" },
    startDate: "date",
  },
  rooms: {
    number: "number",
    type: "string",
  },
};

ReactDOM.render(
  <React.StrictMode>
    <AdminPage
      firebaseConfig={firebaseConfig}
      collectionStructure={collectionStructure}
      CustomCollectionList={CustomCollectionList}
      CustomDocumentTable={CustomDocumentTable}
      CustomModal={CustomModal}
      CustomDocumentForm={CustomDocumentForm}
    />
  </React.StrictMode>,
  document.getElementById("root")
);