Updated documentation layout

docs/docs/docs/introduction.md

@@ -0,0 +1,42 @@
+---
+id: introduction
+title: Introduction
+slug: /
+---
+
+Talawa Admin is the web based administrative dashboard for the Talawa mobile app.
+
+## Core Features
+
+Talawa Admin has many core features that are explained in the sections below.
+
+### Admin Dashboard
+
+- Dashboard Provides Overview about the Admin's Organization.
+- Displays Statistics like number of Members, Admins, Blocked Users & Membership Requests, etc.
+
+### `People` Page
+
+- This shows the list of people who have joined the organization.
+- Admins can also approve membership requests from here and can also set the members permissions.
+
+### `Events` Page
+
+- These shows list of active `Events` in the organization.
+- Admins can also post new events from this page.
+
+### `Contributions` Page
+
+- These shows a list of Members of `Contributors` who've donated to the Organization.
+- Donations can be made from `Talawa` app and can be recurring or One time.
+
+### `Posts` Page
+
+- Shows a list of Posts posted within an Organization along with their likes and comments.
+- Posts are posted by Members from the `Talawa` App.
+- Admins can decide whether to keep or delete those posts.
+
+### `Plugins` Page
+
+- Contains `Plugin Store` from which the Admin can decide the features for the `Talawa` Mobile App.
+- Admins can `Install` or `Uninstall` the Plugins and can also see the list of installed plugins separately.

docs/docs/docs/plugins/implementing-plugins-example.md

@@ -0,0 +1,101 @@
+---
+id: implementing-plugins-example
+title: Plugin Examples
+---
+
+:::note
+Pre-Requisites :
+
+1. [Plugin Architecture ](./plugin-architecture.md)
+2. [Implementing Plugins](./implementing-plugins.md)
+
+:::
+
+Previously we've seen an technical overview of how we can implement plugins for our features.
+
+Now let's see how we can implement a Donation feature as plugin and seeing it in actions. But before that let's take a look at the donation code.
+
+```js
+            CustomListTile(
+                key: homeModel!.keySPDonateUs,
+                index: 2,
+                type: TileType.option,
+                option: Options(
+                    icon: Icon(
+                    Icons.monetization_on,
+                    color: Theme.of(context)
+                    .colorScheme
+                    .primary,
+                    size: 30,
+                ),
+                title: AppLocalizations.of(context)!
+                .strictTranslate('Donate  Us'),
+                subtitle: AppLocalizations.of(context)!
+                    .strictTranslate(
+                    'Help us to develop for you',
+                    ),
+                ),
+                onTapOption: () => donate(context, model),
+                )
+```
+
+To see the entire file go [here](https://github.com/Palisadoesfoundation/talawa/blob/2a14faa4363ca26426fb2f9a8b39082c08e6597b/lib/views/after_auth_screens/profile/profile_page.dart)
+
+It is a simple list option that says " Donate Us " and upon clicking that you get dialog with text "Help us to develop for you" for doing the payment.
+
+Now let's follow the steps.
+
+## 1. Plugin Registration
+
+- Go to the `Plugin Store` and click on the `Add New` button.
+- Give the name as <strong> `Donation` </strong>
+- You add your information for `Creator Name` and `Description` fields.
+- Your plugin should be at visible the store.
+
+let's wrap our widget with the `TalawaPluginProvider` widget as it comes in the type `B` of plugin
+
+## 2. Plugin Creation
+
+- Wrap the donation code with the `TalawaPluginProvider` widget as a `child` property.
+- Add <strong> `Donation` </strong> to `pluginName` property.
+
+This is how the code will look like
+
+```js
+    TalawaPluginProvider(
+         pluginName: "Donation",
+         visible: true,
+         child: Column(
+            children: [
+            CustomListTile(
+                key: homeModel!.keySPDonateUs,
+                index: 2,
+                type: TileType.option,
+                option: Options(
+                icon: Icon(
+                Icons.monetization_on,
+                color: Theme.of(context)
+                .colorScheme
+                .primary,
+                size: 30,
+            ),
+         title: AppLocalizations.of(context)!
+         .strictTranslate('Donate  Us'),
+         subtitle: AppLocalizations.of(context)!
+         .strictTranslate(
+         'Help us to develop for you',
+                        ),
+                    ),
+         onTapOption: () => donate(context, model),
+               ),
+            ],
+         ),
+    )
+
+```
+
+---
+
+Congrats! you've successfully converted your feature to a plugin. Now you can  install/uninstall  `Donation`  plugin from the  `Plugin Store`  of the  [Talawa Admin](https://github.com/PalisadoesFoundation/talawa-admin) to see the plugin UI becoming visible if it's installed for that organization otherwise hidden.
+
+For development purposes to see the plugin even if it's uninstalled you can set the `serverVisible` property to `true`

docs/docs/docs/plugins/implementing-plugins.md

@@ -0,0 +1,116 @@
+---
+id: implementing-plugins
+title: Plugin Implementation
+---
+
+Plugins are existing features that are wrapped with some special logic or widgets to make them controllable.
+
+Plugin are activated from Plugin store of the Admin panel
+
+To implement features as plugins or to convert existing features into plugins, follow the below steps
+
+## Technical Overview of the Steps to Implement features as plugins
+
+### 1. Plugin Registration
+
+- Plugins have to be registered first before even they are created from the Plugin store in the `Talawa Admin` portal. This can be done by developer by creating an account in the admin portal and going to `Plugin Store`.
+- Plugin Store can be accessed from navbar
+
+![Plugin Store Option in Navbar](/img/docs/plugin/plugin-store-navbar.PNG)
+
+- Once entered in store , you will see a list of available plugins
+
+![Plugin Store Sample Image](/img/docs/plugin/store.PNG)
+
+- Click on the `Add New` Button
+- Enter the Details of the New Plugin and Click on `Create`.
+
+:::caution
+
+The `Name` of plugin provided is very important and will be used for later steps.
+Make sure to use unique names with trailing spaces.
+
+:::
+
+In next step we'll see how to create plugins
+
+### 2. Plugin Creation
+
+Based on where the feature UI is there are currently 2 ways to implement your features as plugins. Let's call them type A and B features for now.
+
+![Plugin Store Option in Navbar](/img/docs/plugin/plugin-types.PNG)
+
+#### A. Feature that are located in the bottom navigation bar
+
+- For the features in the navbar we have maintained a list of them in [main_scree.dart](https://github.com/PalisadoesFoundation/talawa/blob/develop/lib/views/main_screen.dart) file.It has detailed comments to help you understand the operations.
+
+- `renderBottomNavBarPlugins` method combines current features and plugins in navbar and generates an array containing `navBarItems` and `navbarClasses` and then it is returned to `children` property of the navbar UI code.
+- Let's understand some important variables before understanding the process of conversion.
+
+:::caution
+
+The `Name` of property provided to any of the below variables should the exactly same for that feature only without any trailing spaces. Duplicate or Existing plugin names shouldn't be used keep the application consistent and predictable.
+
+:::
+
+1. `navBarItems`
+   - Type `[ BottomNavigationBarItem() ]`
+   - contains list of `BottomNavigationBarItem` widget to show `icon` and `text` to the navbar options.
+   - if your feature is not a plugin it should be added to this array.
+2. `navBarClasses`
+   - Type `[Widgets]`
+   - Array that contains the Widgets to be rendered on the navbar
+3. `navNameClasses`
+   - Type ` Map<dynamic, dynamic>`
+   - Maps the feature names with their proper Icons and Widgets (named as `class`) used in navbar.
+4. `navNameIcon`
+   - Type `Map<String, Widgets>`
+   - Contains a key value pair of the feature name in the navbar and it's corresponding plugin.
+
+#### B. Other Features
+
+- `TalawaPluginProvider` is Flutter widget that is used here . The Source can be viewed [here](https://github.com/PalisadoesFoundation/talawa/blob/develop/lib/plugins/talawa_plugin_provider.dart)
+- Here's the basic use of `TalawaPluginProvider` with `Text()` widget.Let's discuss it's properties
+
+```js
+    const TalawaPluginProvider(child: Text("Demo") ,
+        visible: true,
+        pluginName: "My Plugin"
+    );
+```
+
+1. `child`
+
+   - Type `Widget?`
+   - It can be any flutter UI widget like `Container()`, `Text()`, `Row()`,etc. For example if your features is encapsulated within an `Container()` widget then wrap that widget into the `TalawaPluginProvider` .
+
+2. `visible`
+
+   - Type `Boolean`
+   - True if plugin is Installed and plugin will be visible, Otherwise false hence plugin is hidden.
+
+3. `pluginName`
+   - Type `String`
+   - Contains the name of the plugin. Make sure that the name provided here should match with the plugin name registered on the store from the
+     [Step 1 A ](#a-feature-that-are-located-in-the-bottom-navigation-bar)
+   - For example. If plugin stored on the store as `Members List` then here exactly enter `Members List` without any trialing spaces.
+
+<u>
+
+#### Additional properties : [For Development Purpose Only]
+
+</u>
+
+4. `serverVisible`
+
+   - Type `Boolean`
+   - True will make all plugins visible if set to `true` otherwise `false` won't change anything.
+   - This property is accessible for the developers only as it can be only set during development phase. We can see that it is defined in build method of the widget.
+
+   ```js
+        Widget build(BuildContext context) {
+           var serverVisible = false;
+           serverVisible = checkFromPluginList();
+           return serverVisible || visible ? child! : Container();
+       }
+   ```

docs/docs/docs/plugins/plugin-architecture.md

@@ -0,0 +1,69 @@
+---
+id: plugin-architecture
+title: Plugin Architecture
+---
+
+# Plugin Architecture
+
+Plugin Architecture provides talawa projects an ability to control latent [Talawa Mobile App](https://docs.talawa.io/docs/developers/talawa/talawa-introduction) features from the [Talawa Admin](https://docs.talawa.io/docs/developers/talawa-admin/talawa-admin-introduction) Web Portal.
+
+<!-- The Talawa API detects the existence of the plugin and the Mobile App will display new capabilities. -->
+
+## Plugin
+
+A Plugin is a feature in Talawa Mobile App that is controlled by the Admins of that organization. By having the control admins can decide the accessibility of that feature for the organization members.
+
+Programmatically the logic of this Plugin is stored in the mobile app but it's inaccessible to the users until the admin of the organization installs that plugin.
+
+You first have to be register the Plugins from the `Plugin store` in order to install them from the Talawa Admin.
+
+## High Level Overview of Plugin Architecture
+
+Let's discuss the role of the different apps to make the plugin architecture work.
+
+### Talawa Admin
+
+Admin Provides `Plugin Store` where has the following functionalities:
+
+- Ability to install or uninstall the plugins.
+- Ability to Toggle list of installed and available plugins.
+- Ability to Search the plugin using SearchBar (provided on the right) .
+
+#### Example
+
+![Plugin Store Sample Image](/img/docs/plugin/store.PNG)
+
+### Talawa API
+
+It is a nodeJS API that is used to interface with the database containing list of the plugins with their different attributes.
+
+A sample Plugin Model can have the below properties.
+
+```js
+Plugin : {
+    pluginName: String, // plugin name
+    pluginCreatedBy: String, // name of the creator
+    pluginDesc : String, // description
+    pluginInstallStatus : Boolean, // TRUE if installed otherwise FALSE
+    installedOrgs : [ID] // a list containing ID of the organization who have installed the plugin
+}
+```
+
+### Talawa
+
+Plugin in the mobile App are mainly focused for the features on the navbar.but other functionalities can also be implemented as plugins using the `TalawaPluginProvider` Flutter Widget.  
+![Talawa Mobile App ](/img/docs/plugin/talawa.PNG)
+
+## Plugin Store
+
+## Installing and Uninstalling Plugins
+
+The Following video showcases process of installing the plugin. We are uninstalling `Events` feature from the talawa app.
+
+:::note
+
+Admin portal and Talawa app must be of same organizations
+
+:::
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/dsbh03N9wYo" title="Talawa Admin Plugin Demo - 2023" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>