npm package: @mmpg-soft/admin
Description: MMPG Softwares admin library
Author: MMPG Softwares
Latest version: 1.1.85

<div align="center">
    <img src="https://mmpg.xyz/images/logo.png" alt="mmpg logo">
</div>
<br>

# Introduction

### MMPG Softwares admin

MMPG Softwares admin library

# Getting started

Install the package with npm by running: `npm install @mmpg-soft/admin@latest`

# Requirements

This package requires:

- Next js
- Tailwind css
- Firebase SDK
- Firebase Admin SDK

# How to use it

In order to be able to use this package, you need to adhere to the following instructions

## tailwind.config.ts

Include the path of the package's components in your tailwind config:
`'./node_modules/@mmpg-soft/admin/dist/esm/components/**/*.{js,ts,jsx,tsx,mdx}' `

Define your colors scheme as follow:

```
colors: {
	primary: 'primary-color',
    secondary: 'secondary-color',
    accent: 'accent-color',
    text: 'text-color',
    warning: 'warning-color',
    danger: 'danger-color',
    success: 'success-color',
},
```

Define your Navbar and Sidebar size:

```
spacing: {
	'header-height': '60px',
    'sidebar-width': '250px',
},
```

So your `tailwind.config.ts` should look like this:

```
import type { Config } from 'tailwindcss';

const config: Config = {
	content: [
		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
		'./node_modules/@mmpg-soft/admin/dist/esm/components/**/*.{js,ts,jsx,tsx,mdx}',
	],
	theme: {
		extend: {
			colors: {
				primary: '#1c3773',
                secondary: '#646464',
                accent: '#337ab7',
                text: '#333333',
                warning: '#f5a623',
                danger: '#d0021b',
                success: '#28a745',
			},
			spacing: {
				'header-height': '60px',
				'sidebar-width': '250px',
			},
		},
	},
	plugins: [],
};
export default config;
```

## firebase.config.ts

In your firebase config file, define your firestore database id in the function ```setFirestoreDatabaseId("YourFirestoreDatabaseId")```

Example:
```
import { setFirestoreDatabaseId } from '@mmpg-soft/admin';
import { FirebaseOptions, getApp, getApps, initializeApp } from 'firebase/app';
import { browserLocalPersistence, getAuth } from 'firebase/auth';

export const firestoreDatabaseId =
	process.env.NEXT_PUBLIC_FIREBASE_DATABASE_ID || '(default)';

export const firebaseConfig = {
	apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
	authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
	projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
	storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
	messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
	appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
	measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

export const initFirebaseApp = (config: FirebaseOptions) => {
	setFirestoreDatabaseId(firestoreDatabaseId);

	const firebaseApp = getApps().length > 0 ? getApp() : initializeApp(config);
	const firebaseAuth = getAuth(firebaseApp);

	firebaseAuth.setPersistence(browserLocalPersistence);

	return firebaseApp;
};
```

## app/layout.tsx

In your `app/layout.tsx` add the `initFirebaseApp()`:

```
import { initFirebaseApp } from '@/config/firebase';

initFirebaseApp();

function Layout({ children }: any) {
  ...
}
```

After fullfilling all the prerequesties, you can start using all the package features.