From 4614a3b8ca5d1b709d29bece3065af53a230bf87 Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Thu, 7 Sep 2023 19:12:37 -0600
Subject: [PATCH 01/11] Statistics Section

---
 client/src/App.js                             | 166 ++++++++++++++++++
 .../modules/Generic/CompanyStrengthCount.js   |   0
 client/src/modules/Generic/StrengthCount.js   |  61 +++++++
 3 files changed, 227 insertions(+)
 create mode 100644 client/src/modules/Generic/CompanyStrengthCount.js
 create mode 100644 client/src/modules/Generic/StrengthCount.js

diff --git a/client/src/App.js b/client/src/App.js
index a398f03..13b1f9b 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,6 +3,7 @@ import "./App.css";
 import Collapsible from "react-collapsible";
 import lists from "./modules/Generic/BilletBank";
 import MilpacParse from "./modules/Generic/MilpacParse";
+import StrengthCount from "./modules/Generic/StrengthCount";
 import ErrorMessage from "./errorMessage";
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
@@ -456,6 +457,171 @@ function MilpacRequest() {
                 </div>
               </Collapsible>
             </div>
+            <div className="DepartmentContainer">
+              <Collapsible
+                trigger="Statistics"
+                triggerClassName="Title"
+                triggerOpenedClassName="Title"
+                open={true}
+              >
+                {/* We need to do a count for combined, 1-7, 2-7 and acd in that order*/}
+                <div className="OneSevenStrength">
+                  <StrengthCount
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.oneSevenCommand,
+                      lists.alpha1,
+                      lists.bravo1,
+                      lists.charlie1
+                    ]}
+                    subtitle={"First Battalion"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.oneSevenCommand
+                    ]}
+                    subSubtitle={"Headquarters"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.alpha1
+                    ]}
+                    subSubtitle={"Alpha Co"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.bravo1
+                    ]}
+                    subSubtitle={"Bravo Co"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.charlie1
+                    ]}
+                    subSubtitle={"Charlie Co"}
+                  />
+                </div>
+                <div className="TwoSevenStrength">
+                  <StrengthCount
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.twoSevenCommand,
+                      lists.alpha2,
+                      lists.bravo2,
+                      lists.charlie2
+                    ]}
+                    subtitle={"Second Battalion"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.twoSevenCommand
+                    ]}
+                    subSubtitle={"Headquarters"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.alpha2
+                    ]}
+                    subSubtitle={"Alpha Co"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.bravo2
+                    ]}
+                    subSubtitle={"Bravo Co"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.charlie2
+                    ]}
+                    subSubtitle={"Charlie Co"}
+                  />
+                </div>
+                <div className="ACDStrength">
+                  <StrengthCount
+                  milpacArray={milpacArray}
+                  billetIDs={[
+                    lists.acdCommand,
+                    lists.alpha3,
+                    lists.bravo3,
+                    lists.charlie3,
+                    lists.delta3
+                  ]}
+                  subtitle={"ACD"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.acdCommand
+                    ]}
+                    subSubtitle={"Headquarters"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.alpha3
+                    ]}
+                    subSubtitle={"Alpha Co"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.bravo3
+                    ]}
+                    subSubtitle={"Bravo Co"}
+                  />
+                  <StrengthCount
+                    useCompanyLevelLogic={true}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.charlie3
+                    ]}
+                    subSubtitle={"Charlie Co"}
+                  />
+                </div>
+                <div className="CombinedStrength">
+                  <StrengthCount
+                  milpacArray={milpacArray}
+                  billetIDs={[
+                    lists.regiCommand,
+                    lists.oneSevenCommand,
+                    lists.alpha1,
+                    lists.bravo1,
+                    lists.charlie1,
+                    lists.twoSevenCommand,
+                    lists.alpha2,
+                    lists.bravo2,
+                    lists.charlie2,
+                    lists.acdCommand,
+                    lists.alpha3,
+                    lists.bravo3,
+                    lists.charlie3,
+                    lists.delta3
+                  ]}
+                  subtitle={"Overall Strength"}
+                  />
+                </div>
+              </Collapsible>
+            </div>
           </div>
         </>
       )}
diff --git a/client/src/modules/Generic/CompanyStrengthCount.js b/client/src/modules/Generic/CompanyStrengthCount.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
new file mode 100644
index 0000000..70397c0
--- /dev/null
+++ b/client/src/modules/Generic/StrengthCount.js
@@ -0,0 +1,61 @@
+import React from "react";
+
+function StrengthCount(props) {
+
+    var useCompanyLevelLogic = props.useCompanyLevelLogic;
+
+    if (useCompanyLevelLogic !== true) {
+
+        var combinedArray= [];
+        var milpacArray = props.milpacArray;
+        var billetIDs = props.billetIDs;
+        var subtitle = props.subtitle;
+        
+        for (var milpacIdCombat in milpacArray[0].combat.profiles) {
+            var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
+            
+            for (var billetIdArray in billetIDs) {
+
+                if (billetIDs[billetIdArray].includes(primary.positionId)) {
+                    combinedArray.push({position: primary});       
+                }
+            }
+        };
+
+        return (
+            <div className="Response Container">
+                <div className="Header Container">
+                    <div className="Subtitle">{subtitle}</div>
+                    <div className="Combined Counter">Overall Strength{': '}{combinedArray.length}</div>
+                </div>
+            </div>
+        )
+
+    } else if (useCompanyLevelLogic == true) {
+
+        var combinedArray= [];
+        var milpacArray = props.milpacArray;
+        var billetIDs = props.billetIDs;
+        var subSubtitle = props.subSubtitle;
+
+        for (var milpacIdCombat in milpacArray[0].combat.profiles) {
+            var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
+            
+            for (var billetIdArray in billetIDs) {
+
+                if (billetIDs[billetIdArray].includes(primary.positionId)) {
+                    combinedArray.push({position: primary});       
+                }
+            }
+        };
+
+        return (
+            <div className="Response Container">
+                <div className="SubsubtitleAndCount">{subSubtitle}{': '}{combinedArray.length}</div>
+            </div>
+        )
+
+    }
+}
+
+export default StrengthCount;
\ No newline at end of file

From 3e4616fad2b2b491184e9ae7ab539c1b5348d077 Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Thu, 7 Sep 2023 19:38:30 -0600
Subject: [PATCH 02/11] Minor reworks

---
 client/src/App.js                           | 106 ++++++++-----------
 client/src/modules/Generic/StrengthCount.js | 108 ++++++++++----------
 2 files changed, 95 insertions(+), 119 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 13b1f9b..bdacb6b 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -472,40 +472,32 @@ function MilpacRequest() {
                       lists.oneSevenCommand,
                       lists.alpha1,
                       lists.bravo1,
-                      lists.charlie1
+                      lists.charlie1,
                     ]}
                     subtitle={"First Battalion"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.oneSevenCommand
-                    ]}
+                    billetIDs={[lists.oneSevenCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.alpha1
-                    ]}
+                    billetIDs={[lists.alpha1]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.bravo1
-                    ]}
+                    billetIDs={[lists.bravo1]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.charlie1
-                    ]}
+                    billetIDs={[lists.charlie1]}
                     subSubtitle={"Charlie Co"}
                   />
                 </div>
@@ -516,108 +508,92 @@ function MilpacRequest() {
                       lists.twoSevenCommand,
                       lists.alpha2,
                       lists.bravo2,
-                      lists.charlie2
+                      lists.charlie2,
                     ]}
                     subtitle={"Second Battalion"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.twoSevenCommand
-                    ]}
+                    billetIDs={[lists.twoSevenCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.alpha2
-                    ]}
+                    billetIDs={[lists.alpha2]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.bravo2
-                    ]}
+                    billetIDs={[lists.bravo2]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.charlie2
-                    ]}
+                    billetIDs={[lists.charlie2]}
                     subSubtitle={"Charlie Co"}
                   />
                 </div>
                 <div className="ACDStrength">
                   <StrengthCount
-                  milpacArray={milpacArray}
-                  billetIDs={[
-                    lists.acdCommand,
-                    lists.alpha3,
-                    lists.bravo3,
-                    lists.charlie3,
-                    lists.delta3
-                  ]}
-                  subtitle={"ACD"}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.acdCommand,
+                      lists.alpha3,
+                      lists.bravo3,
+                      lists.charlie3,
+                      lists.delta3,
+                    ]}
+                    subtitle={"ACD"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.acdCommand
-                    ]}
+                    billetIDs={[lists.acdCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.alpha3
-                    ]}
+                    billetIDs={[lists.alpha3]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.bravo3
-                    ]}
+                    billetIDs={[lists.bravo3]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.charlie3
-                    ]}
+                    billetIDs={[lists.charlie3]}
                     subSubtitle={"Charlie Co"}
                   />
                 </div>
                 <div className="CombinedStrength">
                   <StrengthCount
-                  milpacArray={milpacArray}
-                  billetIDs={[
-                    lists.regiCommand,
-                    lists.oneSevenCommand,
-                    lists.alpha1,
-                    lists.bravo1,
-                    lists.charlie1,
-                    lists.twoSevenCommand,
-                    lists.alpha2,
-                    lists.bravo2,
-                    lists.charlie2,
-                    lists.acdCommand,
-                    lists.alpha3,
-                    lists.bravo3,
-                    lists.charlie3,
-                    lists.delta3
-                  ]}
-                  subtitle={"Overall Strength"}
+                    milpacArray={milpacArray}
+                    billetIDs={[
+                      lists.regiCommand,
+                      lists.oneSevenCommand,
+                      lists.alpha1,
+                      lists.bravo1,
+                      lists.charlie1,
+                      lists.twoSevenCommand,
+                      lists.alpha2,
+                      lists.bravo2,
+                      lists.charlie2,
+                      lists.acdCommand,
+                      lists.alpha3,
+                      lists.bravo3,
+                      lists.charlie3,
+                      lists.delta3,
+                    ]}
+                    subtitle={"Overall Strength"}
                   />
                 </div>
               </Collapsible>
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
index 70397c0..8e53629 100644
--- a/client/src/modules/Generic/StrengthCount.js
+++ b/client/src/modules/Generic/StrengthCount.js
@@ -1,61 +1,61 @@
 import React from "react";
 
 function StrengthCount(props) {
+  var useCompanyLevelLogic = props.useCompanyLevelLogic;
+
+  if (useCompanyLevelLogic !== true) {
+    var combinedArray = [];
+    var milpacArray = props.milpacArray;
+    var billetIDs = props.billetIDs;
+    var subtitle = props.subtitle;
+
+    for (var milpacIdCombat in milpacArray[0].combat.profiles) {
+      var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
+
+      for (var billetIdArray in billetIDs) {
+        if (billetIDs[billetIdArray].includes(primary.positionId)) {
+          combinedArray.push({ position: primary });
+        }
+      }
+    }
 
-    var useCompanyLevelLogic = props.useCompanyLevelLogic;
-
-    if (useCompanyLevelLogic !== true) {
-
-        var combinedArray= [];
-        var milpacArray = props.milpacArray;
-        var billetIDs = props.billetIDs;
-        var subtitle = props.subtitle;
-        
-        for (var milpacIdCombat in milpacArray[0].combat.profiles) {
-            var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
-            
-            for (var billetIdArray in billetIDs) {
-
-                if (billetIDs[billetIdArray].includes(primary.positionId)) {
-                    combinedArray.push({position: primary});       
-                }
-            }
-        };
-
-        return (
-            <div className="Response Container">
-                <div className="Header Container">
-                    <div className="Subtitle">{subtitle}</div>
-                    <div className="Combined Counter">Overall Strength{': '}{combinedArray.length}</div>
-                </div>
-            </div>
-        )
-
-    } else if (useCompanyLevelLogic == true) {
-
-        var combinedArray= [];
-        var milpacArray = props.milpacArray;
-        var billetIDs = props.billetIDs;
-        var subSubtitle = props.subSubtitle;
-
-        for (var milpacIdCombat in milpacArray[0].combat.profiles) {
-            var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
-            
-            for (var billetIdArray in billetIDs) {
-
-                if (billetIDs[billetIdArray].includes(primary.positionId)) {
-                    combinedArray.push({position: primary});       
-                }
-            }
-        };
-
-        return (
-            <div className="Response Container">
-                <div className="SubsubtitleAndCount">{subSubtitle}{': '}{combinedArray.length}</div>
-            </div>
-        )
-
+    return (
+      <div className="Response Container">
+        <div className="Header Container">
+          <div className="Subtitle">{subtitle}</div>
+          <div className="Combined Counter">
+            Overall Strength{": "}
+            {combinedArray.length}
+          </div>
+        </div>
+      </div>
+    );
+  } else if (useCompanyLevelLogic === true) {
+    combinedArray = [];
+    milpacArray = props.milpacArray;
+    billetIDs = props.billetIDs;
+    var subSubtitle = props.subSubtitle;
+
+    for (milpacIdCombat in milpacArray[0].combat.profiles) {
+      primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
+
+      for (billetIdArray in billetIDs) {
+        if (billetIDs[billetIdArray].includes(primary.positionId)) {
+          combinedArray.push({ position: primary });
+        }
+      }
     }
+
+    return (
+      <div className="Response Container">
+        <div className="SubsubtitleAndCount">
+          {subSubtitle}
+          {": "}
+          {combinedArray.length}
+        </div>
+      </div>
+    );
+  }
 }
 
-export default StrengthCount;
\ No newline at end of file
+export default StrengthCount;

From 5db7450cdf90261e566bd706e7758e61f9b82b57 Mon Sep 17 00:00:00 2001
From: SyniRon <66834451+SyniRon@users.noreply.github.com>
Date: Thu, 7 Sep 2023 21:46:29 -0400
Subject: [PATCH 03/11] remove empty file

---
 client/src/modules/Generic/CompanyStrengthCount.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 client/src/modules/Generic/CompanyStrengthCount.js

diff --git a/client/src/modules/Generic/CompanyStrengthCount.js b/client/src/modules/Generic/CompanyStrengthCount.js
deleted file mode 100644
index e69de29..0000000

From 00a3b09a328511849ba8e19650ebe9df2b74619e Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Fri, 8 Sep 2023 08:16:16 -0600
Subject: [PATCH 04/11] Readme Test 1

---
 README.md                                       | 17 +++++++++++++++++
 .../src/modules/Generic/CompanyStrengthCount.js |  0
 2 files changed, 17 insertions(+)
 delete mode 100644 client/src/modules/Generic/CompanyStrengthCount.js

diff --git a/README.md b/README.md
index 691bf5d..5f824c1 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+<p align="center"><img src="./client/src/style/themes/7cav/logo-m.png"></p>
+
 # 7th Cavalry ADR
 
 [![Server ADR Deployment](https://github.com/7Cav/adr/actions/workflows/server_adr_push.yml/badge.svg)](https://github.com/7Cav/adr/actions/workflows/server_adr_push.yml)
@@ -9,11 +11,26 @@ This is a React application designed to display roster data fetched from the 7th
 
 ## Table of Contents
 
+- [Running Locally](#running-locally)
+  - [Requirements](#requirements)
+  - [Authorization](#authorization)
+    - [Getting a Token](#getting-a-token)
 - [Updating ADR](#updating-adr)
   - [Add New Billet in Existing Category](#add-new-billet-in-existing-category)
   - [Add New Category](#add-new-category)
 - [TODO](#todo)
 
+## Running Locally
+
+### Requirements
+
+In order to run the ADR locally for development, you need the following:
+- 
+
+### Authorization
+
+#### Getting a Token
+
 ## Updating ADR
 
 ### Add New Billet in Existing Category
diff --git a/client/src/modules/Generic/CompanyStrengthCount.js b/client/src/modules/Generic/CompanyStrengthCount.js
deleted file mode 100644
index e69de29..0000000

From e9ed677937ca0e130b41a8786f8fa17df1683cdd Mon Sep 17 00:00:00 2001
From: "Will C aka \"Big Bercin" <97210222+Vercin-G@users.noreply.github.com>
Date: Fri, 8 Sep 2023 10:00:19 -0600
Subject: [PATCH 05/11] Update README.md

Made the readme prettier and much more comprehensive for first time users.
---
 README.md | 62 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 5f824c1..136fecf 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,18 @@
 <p align="center"><img src="./client/src/style/themes/7cav/logo-m.png"></p>
 
-# 7th Cavalry ADR
-
+## Overview
 [![Server ADR Deployment](https://github.com/7Cav/adr/actions/workflows/server_adr_push.yml/badge.svg)](https://github.com/7Cav/adr/actions/workflows/server_adr_push.yml)
 [![Client ADR Deployment](https://github.com/7Cav/adr/actions/workflows/client_adr_push.yml/badge.svg)](https://github.com/7Cav/adr/actions/workflows/client_adr_push.yml)
 
-## Overview
-
-This is a React application designed to display roster data fetched from the 7th Cavalry API. The project is structured as a client-server architecture and includes basic authentication for enhanced security.
+The Active Duty Roster (ADR) is a Reactjs based app designed to automatically track membership of every position within the 7th Cavalry Gaming Regiment via the 7th Cavalry API. The ADR is structured as a client-server architecture and includes basic authentication for enhanced security. Though the ADR is accurate, semi-regular maintenence is needed in order to keep tracked billets up to date.
 
 ## Table of Contents
 
 - [Running Locally](#running-locally)
   - [Requirements](#requirements)
-  - [Authorization](#authorization)
-    - [Getting a Token](#getting-a-token)
-- [Updating ADR](#updating-adr)
+    - [Authorization](#authorization)
+  - [Getting Started](#getting-started)
+- [Updating the ADR](#updating-the-adr)
   - [Add New Billet in Existing Category](#add-new-billet-in-existing-category)
   - [Add New Category](#add-new-category)
 - [TODO](#todo)
@@ -25,13 +22,53 @@ This is a React application designed to display roster data fetched from the 7th
 ### Requirements
 
 In order to run the ADR locally for development, you need the following:
-- 
+- A valid [7th Cavalry Gaming](https://7cav.us/) account with member-level privileges (i.e. not a public account).
+- An instance of [Node.js](https://nodejs.org/en) installed on your system.
+- Your choice of IDE such as [VSCode](https://code.visualstudio.com/).
+
+#### Authorization
+
+Before you get started with your server, you require two methods of authentication. You require both an API token from 7th Cavalry Gaming and a local clientside token.
+
+To get and apply your API token do the following steps:
+
+1. Log into your 7th Cavalry Gaming account.
+2. Navigate to your [Connected Accounts](https://7cav.us/account/connected-accounts/) and select the "view account" button for auth.7cav.us
+3. Once you have logged into keycloak, copy the provided API token into your clipboard.
+4. Open the adr project folder and navigate to `adr/server/credentials`. Inside should be a file named `example_token.js`.
+5. Make a duplicate `example_token.js` and rename it to `token.js`.
+6. Inside the new `token.js` file, paste your API token in the `API_TOKEN` constant and save the file.
+
+To make a clientside token, do the following:
+
+1. Open the adr project folder and navigate to `/client`.
+2. Inside the Client folder create a nameless `.env` file. When opened, the directory should be `adr/client/.env`
+3. Paste the following code into the `.env` file.
+
+```dotenv
+REACT_APP_CLIENT_TOKEN ='XXXXXX'
+REACT_APP_COMBAT_API_URL=http://localhost:4000/roster/combat
+REACT_APP_RESERVE_API_URL=http://localhost:4000/roster/reserves
+REACT_APP_CACHE_TIMESTAMP_URL=http://localhost:4000/cache-timestamp
+```
+4. Replace the `REACT_APP_CLIENT_TOKEN` constant with a password of your choice and save.
+5. Navigate to `adr/server/credentials/token.js` and ensure the `CLIENT_TOKEN` constant matches the same constant in the previous `.env` file and save.
+
+### Getting Started
+
+Before initializing the server, the dependancies for the ADR need to be installed on your end.
+
+- Open a terminal/cmd prompt and navigate to the adr project folder and execute the command `npm install`.
+- Once the install finishes, navigate to `adr/client` and execute the previous command.
+
+You should now be ready to run the Server and the Client.
 
-### Authorization
+- Open two terminals. On the first terminal navigate to `adr/server` and enter the command `node server.js`. You should see that the server is listening on localhost:4000 and can be additionally verified by visiting localhost:4000 on your browser.
+- On the second terminal, navigate to `adr/client/src` and run the command `npm start`. Once the clientside is running, you should be automatically redirected to localhost:3000 on your browser. A sucessful response is when the ADR is completely filled.
 
-#### Getting a Token
+You are now good to go! `adr/client/src/app.js` is the primary file in which everything on the clientside is ran. Closing the terminals will close the servers. Happy Coding!
 
-## Updating ADR
+## Updating the ADR
 
 ### Add New Billet in Existing Category
 
@@ -104,6 +141,7 @@ const billetBank = {
 
 ## TODO
 
+- [ ] Add tutorial for updating Statistics
 - [ ] Change cache warning on client to display time since cache refresh
 - [ ] Investigate the feasibility of sorting by rank after billet sorting (Subsorting? Consider using QuickSort)
 - [ ] Add graphical data visualization

From 92fab356d03015d74ec7fc0bb914fb5a72fe77ae Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Sun, 10 Sep 2023 21:33:06 -0600
Subject: [PATCH 06/11] Pie Chart Testing

---
 client/package-lock.json                    | 31 +++++++++++++++++++++
 client/package.json                         |  1 +
 client/src/App.js                           | 31 ++++++++++++++++++++-
 client/src/modules/Generic/StrengthCount.js |  7 +++++
 4 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 6299861..e845a7b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,6 +15,7 @@
         "react": "^17.0.2",
         "react-collapsible": "^2.8.4",
         "react-dom": "^17.0.2",
+        "react-minimal-pie-chart": "^8.4.0",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
       }
@@ -3470,6 +3471,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/svg-path-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
+      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -12952,6 +12958,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-minimal-pie-chart": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
+      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
+      "dependencies": {
+        "@types/svg-path-parser": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -18237,6 +18255,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/svg-path-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
+      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -25001,6 +25024,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-minimal-pie-chart": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
+      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
+      "requires": {
+        "@types/svg-path-parser": "^1.1.3"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/client/package.json b/client/package.json
index c0e7092..4f617be 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-collapsible": "^2.8.4",
     "react-dom": "^17.0.2",
+    "react-minimal-pie-chart": "^8.4.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/client/src/App.js b/client/src/App.js
index bdacb6b..81b8b03 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -5,6 +5,7 @@ import lists from "./modules/Generic/BilletBank";
 import MilpacParse from "./modules/Generic/MilpacParse";
 import StrengthCount from "./modules/Generic/StrengthCount";
 import ErrorMessage from "./errorMessage";
+import { PieChart } from 'react-minimal-pie-chart';
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
 const reserveApiUrl = process.env.REACT_APP_RESERVE_API_URL;
@@ -74,6 +75,10 @@ function MilpacRequest() {
     });
   }, []);
 
+  var piechartArray = [];
+
+  var testnumber = 500
+
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -464,9 +469,9 @@ function MilpacRequest() {
                 triggerOpenedClassName="Title"
                 open={true}
               >
-                {/* We need to do a count for combined, 1-7, 2-7 and acd in that order*/}
                 <div className="OneSevenStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.oneSevenCommand,
@@ -477,32 +482,46 @@ function MilpacRequest() {
                     subtitle={"First Battalion"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.oneSevenCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.alpha1]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.bravo1]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.charlie1]}
                     subSubtitle={"Charlie Co"}
                   />
                 </div>
+                <div className="OneSevenBreakdown">
+                <PieChart
+                 data={[
+                    { title: 'One', value: 2, color: '#E38627' },
+                    { title: 'Two', value: 3, color: '#C13C37' },
+                    { title: 'Three', value: 3, color: '#6A2135' },
+                  ]}
+                />
+                </div>
                 <div className="TwoSevenStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.twoSevenCommand,
@@ -513,24 +532,28 @@ function MilpacRequest() {
                     subtitle={"Second Battalion"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.twoSevenCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.alpha2]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.bravo2]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.charlie2]}
@@ -539,6 +562,7 @@ function MilpacRequest() {
                 </div>
                 <div className="ACDStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.acdCommand,
@@ -550,24 +574,28 @@ function MilpacRequest() {
                     subtitle={"ACD"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.acdCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.alpha3]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.bravo3]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.charlie3]}
@@ -576,6 +604,7 @@ function MilpacRequest() {
                 </div>
                 <div className="CombinedStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.regiCommand,
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
index 8e53629..6c77d35 100644
--- a/client/src/modules/Generic/StrengthCount.js
+++ b/client/src/modules/Generic/StrengthCount.js
@@ -2,6 +2,7 @@ import React from "react";
 
 function StrengthCount(props) {
   var useCompanyLevelLogic = props.useCompanyLevelLogic;
+  var piechartArray=props.piechartArray;
 
   if (useCompanyLevelLogic !== true) {
     var combinedArray = [];
@@ -19,6 +20,9 @@ function StrengthCount(props) {
       }
     }
 
+    piechartArray.push(combinedArray.length)
+    console.log(piechartArray)
+
     return (
       <div className="Response Container">
         <div className="Header Container">
@@ -46,6 +50,9 @@ function StrengthCount(props) {
       }
     }
 
+    piechartArray.push(combinedArray.length)
+    console.log(piechartArray)
+
     return (
       <div className="Response Container">
         <div className="SubsubtitleAndCount">

From 5112564d662bbe1775aab979bc25fc79f65b9955 Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Mon, 11 Sep 2023 13:36:17 -0600
Subject: [PATCH 07/11] Bugged Array

---
 client/package-lock.json                    | 238 +++++++++++++++++---
 client/package.json                         |   3 +-
 client/src/App.js                           |  24 +-
 client/src/modules/Generic/MilpacParse.js   |  10 +-
 client/src/modules/Generic/Piechart.js      |  50 ++++
 client/src/modules/Generic/StrengthCount.js |   7 +-
 6 files changed, 283 insertions(+), 49 deletions(-)
 create mode 100644 client/src/modules/Generic/Piechart.js

diff --git a/client/package-lock.json b/client/package-lock.json
index e845a7b..8682fbf 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11,11 +11,12 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "apexcharts": "^3.42.0",
         "express": "^4.17.2",
         "react": "^17.0.2",
+        "react-apexcharts": "^1.4.1",
         "react-collapsible": "^2.8.4",
         "react-dom": "^17.0.2",
-        "react-minimal-pie-chart": "^8.4.0",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
       }
@@ -3471,11 +3472,6 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
-    "node_modules/@types/svg-path-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
-      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
-    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -3865,6 +3861,11 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
     "node_modules/abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -4116,6 +4117,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.42.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.42.0.tgz",
+      "integrity": "sha512-hYhzZqh2Efny9uiutkGU2M/EarJ4Nn8s6dxZ0C7E7N+SV4d1xjTioXi2NLn4UKVJabZkb3HnpXDoumXgtAymwg==",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -12793,6 +12808,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-apexcharts": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
+      "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "apexcharts": "^3.41.0",
+        "react": ">=0.13"
+      }
+    },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -12958,18 +12985,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "node_modules/react-minimal-pie-chart": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
-      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
-      "dependencies": {
-        "@types/svg-path-parser": "^1.1.3"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14176,6 +14191,89 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -18255,11 +18353,6 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
-    "@types/svg-path-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
-      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
-    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -18546,6 +18639,11 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -18724,6 +18822,20 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.42.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.42.0.tgz",
+      "integrity": "sha512-hYhzZqh2Efny9uiutkGU2M/EarJ4Nn8s6dxZ0C7E7N+SV4d1xjTioXi2NLn4UKVJabZkb3HnpXDoumXgtAymwg==",
+      "requires": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -24899,6 +25011,14 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-apexcharts": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
+      "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -25024,14 +25144,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "react-minimal-pie-chart": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
-      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
-      "requires": {
-        "@types/svg-path-parser": "^1.1.3"
-      }
-    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -25924,6 +26036,70 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
diff --git a/client/package.json b/client/package.json
index 4f617be..e67c333 100644
--- a/client/package.json
+++ b/client/package.json
@@ -6,11 +6,12 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "apexcharts": "^3.42.0",
     "express": "^4.17.2",
     "react": "^17.0.2",
+    "react-apexcharts": "^1.4.1",
     "react-collapsible": "^2.8.4",
     "react-dom": "^17.0.2",
-    "react-minimal-pie-chart": "^8.4.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/client/src/App.js b/client/src/App.js
index 81b8b03..a5ff53d 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState} from "react";
 import "./App.css";
 import Collapsible from "react-collapsible";
 import lists from "./modules/Generic/BilletBank";
 import MilpacParse from "./modules/Generic/MilpacParse";
 import StrengthCount from "./modules/Generic/StrengthCount";
 import ErrorMessage from "./errorMessage";
-import { PieChart } from 'react-minimal-pie-chart';
+import Piechart from "./modules/Generic/Piechart"
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
 const reserveApiUrl = process.env.REACT_APP_RESERVE_API_URL;
@@ -77,8 +77,6 @@ function MilpacRequest() {
 
   var piechartArray = [];
 
-  var testnumber = 500
-
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -510,15 +508,15 @@ function MilpacRequest() {
                     subSubtitle={"Charlie Co"}
                   />
                 </div>
-                <div className="OneSevenBreakdown">
-                <PieChart
-                 data={[
-                    { title: 'One', value: 2, color: '#E38627' },
-                    { title: 'Two', value: 3, color: '#C13C37' },
-                    { title: 'Three', value: 3, color: '#6A2135' },
-                  ]}
-                />
-                </div>
+                 {/*<div className="OneSevenBreakdown">
+                  <Piechart
+                  piechartArray = {piechartArray}
+                  useSelector0={false}
+                  useSelector2={true}
+                  useSelector4={true}
+                  useSelector6={true}
+                  />
+                  </div> */}
                 <div className="TwoSevenStrength">
                   <StrengthCount
                     piechartArray={piechartArray}
diff --git a/client/src/modules/Generic/MilpacParse.js b/client/src/modules/Generic/MilpacParse.js
index 3a8ac66..4d19474 100644
--- a/client/src/modules/Generic/MilpacParse.js
+++ b/client/src/modules/Generic/MilpacParse.js
@@ -1,6 +1,7 @@
 import React from "react";
 
 function MilpacParse(props) {
+  const uniqueNamesSet = new Set();
   var array = [];
   var milpacArray = props.milpacArray;
   var billetIDs = props.billetIDs;
@@ -25,6 +26,7 @@ function MilpacParse(props) {
           itemKey: milpacIdCombat,
           listKey: primarySortKey + milpacIdCombat,
         });
+        uniqueNamesSet.add(fullName);
       }
 
       for (var index in milpacArray[0].combat.profiles[milpacIdCombat]
@@ -47,6 +49,7 @@ function MilpacParse(props) {
           itemKey: milpacIdCombat,
           listKey: secondarySortKey + milpacIdCombat,
         });
+        uniqueNamesSet.add(fullName);
       }
     }
 
@@ -68,6 +71,7 @@ function MilpacParse(props) {
           itemKey: milpacIdReserve,
           listKey: rPrimarySortKey + milpacIdReserve,
         });
+        uniqueNamesSet.add(rFullName);
       }
 
       for (var rIndex in milpacArray[0].reserve.profiles[milpacIdReserve]
@@ -90,6 +94,7 @@ function MilpacParse(props) {
           itemKey: milpacIdReserve,
           listKey: rSecondarySortKey + milpacIdReserve,
         });
+        uniqueNamesSet.add(rFullName);
       }
     }
 
@@ -104,7 +109,7 @@ function MilpacParse(props) {
       <div className="ResponseContainer">
         <div className="HeaderContainer">
           <div className="Subtitle">{subtitle}</div>
-          <div className="Counter">Unit Strength: {array.length}</div>
+          <div className="Counter">Unit Strength: {uniqueNamesSet.size}</div>
         </div>
         <div className="ItemList">
           <table>
@@ -152,6 +157,7 @@ function MilpacParse(props) {
           itemKey: milpacIdCombat,
           listKey: primarySortKey + milpacIdCombat,
         });
+        uniqueNamesSet.add(fullName);
       }
     }
 
@@ -166,7 +172,7 @@ function MilpacParse(props) {
       <div className="ResponseContainer">
         <div className="HeaderContainer">
           <div className="Subtitle">{subtitle}</div>
-          <div className="Counter">Unit Strength: {array.length}</div>
+          <div className="Counter">Unit Strength: {uniqueNamesSet.size}</div>
         </div>
         <div className="ItemList">
           <table>
diff --git a/client/src/modules/Generic/Piechart.js b/client/src/modules/Generic/Piechart.js
new file mode 100644
index 0000000..fe00f1e
--- /dev/null
+++ b/client/src/modules/Generic/Piechart.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts'
+
+class Donut extends Component {
+
+  constructor(props) {
+    super(props);
+
+    //for the love of god, this is terrible. If you are reading this, DONT DO THIS! this is so unbelievibly bad. This will be reworked once the duplicated pieChartArray items are fixed 
+
+    var piechartObject = props.piechartObject;
+    var useSelector0 = props.useSelector0
+    var useSelector2 = props.useSelector2
+    var useSelector4 = props.useSelector4
+    var useSelector6 = props.useSelector6
+    var useSelector8 = props.useSelector8
+    var finalInput = [];
+    
+    if (useSelector0 !== false) {
+      finalInput.push(piechartObject[0])
+    }if (useSelector2 !== false) {
+      finalInput.push(piechartObject[2])
+    }if (useSelector4 !== false) {
+      finalInput.push(piechartObject[4])
+    }if (useSelector6 !== false) {
+      finalInput.push(piechartObject[6])
+    }if (useSelector8 !== false) {
+      finalInput.push(piechartObject[8])
+    };
+
+    console.log (finalInput);
+
+    this.state = {
+      options: {},
+      series: finalInput,
+      labels: ['A', 'B', 'C', 'D', 'E']
+    }
+  }
+
+  render() {
+
+    return (
+      <div className="donut">
+        <Chart options={this.state.options} series={this.state.series} type="donut" width="380" />
+      </div>
+    );
+  }
+}
+
+export default Donut;
\ No newline at end of file
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
index 6c77d35..fdf489a 100644
--- a/client/src/modules/Generic/StrengthCount.js
+++ b/client/src/modules/Generic/StrengthCount.js
@@ -2,8 +2,8 @@ import React from "react";
 
 function StrengthCount(props) {
   var useCompanyLevelLogic = props.useCompanyLevelLogic;
-  var piechartArray=props.piechartArray;
-
+  var piechartArray = props.piechartArray;
+  
   if (useCompanyLevelLogic !== true) {
     var combinedArray = [];
     var milpacArray = props.milpacArray;
@@ -21,6 +21,7 @@ function StrengthCount(props) {
     }
 
     piechartArray.push(combinedArray.length)
+
     console.log(piechartArray)
 
     return (
@@ -51,7 +52,9 @@ function StrengthCount(props) {
     }
 
     piechartArray.push(combinedArray.length)
+
     console.log(piechartArray)
+    
 
     return (
       <div className="Response Container">

From b21c5b60840be40c260f3bcf8ae63252943e450c Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Tue, 12 Sep 2023 14:40:55 -0600
Subject: [PATCH 08/11] Statistics Rework

---
 client/src/App.js                           | 219 +++++---------------
 client/src/modules/Generic/Piechart.js      |  50 -----
 client/src/modules/Generic/Statistics.js    |  85 ++++++++
 client/src/modules/Generic/StrengthCount.js |  71 -------
 4 files changed, 142 insertions(+), 283 deletions(-)
 delete mode 100644 client/src/modules/Generic/Piechart.js
 create mode 100644 client/src/modules/Generic/Statistics.js
 delete mode 100644 client/src/modules/Generic/StrengthCount.js

diff --git a/client/src/App.js b/client/src/App.js
index a5ff53d..43c2010 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,9 +3,9 @@ import "./App.css";
 import Collapsible from "react-collapsible";
 import lists from "./modules/Generic/BilletBank";
 import MilpacParse from "./modules/Generic/MilpacParse";
-import StrengthCount from "./modules/Generic/StrengthCount";
 import ErrorMessage from "./errorMessage";
-import Piechart from "./modules/Generic/Piechart"
+import Statistics from "./modules/Generic/Statistics";
+
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
 const reserveApiUrl = process.env.REACT_APP_RESERVE_API_URL;
@@ -74,9 +74,7 @@ function MilpacRequest() {
       setLoading(false);
     });
   }, []);
-
-  var piechartArray = [];
-
+  
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -467,162 +465,59 @@ function MilpacRequest() {
                 triggerOpenedClassName="Title"
                 open={true}
               >
-                <div className="OneSevenStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.oneSevenCommand,
-                      lists.alpha1,
-                      lists.bravo1,
-                      lists.charlie1,
-                    ]}
-                    subtitle={"First Battalion"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.oneSevenCommand]}
-                    subSubtitle={"Headquarters"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.alpha1]}
-                    subSubtitle={"Alpha Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.bravo1]}
-                    subSubtitle={"Bravo Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.charlie1]}
-                    subSubtitle={"Charlie Co"}
-                  />
-                </div>
-                 {/*<div className="OneSevenBreakdown">
-                  <Piechart
-                  piechartArray = {piechartArray}
-                  useSelector0={false}
-                  useSelector2={true}
-                  useSelector4={true}
-                  useSelector6={true}
-                  />
-                  </div> */}
-                <div className="TwoSevenStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.twoSevenCommand,
-                      lists.alpha2,
-                      lists.bravo2,
-                      lists.charlie2,
-                    ]}
-                    subtitle={"Second Battalion"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.twoSevenCommand]}
-                    subSubtitle={"Headquarters"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.alpha2]}
-                    subSubtitle={"Alpha Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.bravo2]}
-                    subSubtitle={"Bravo Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.charlie2]}
-                    subSubtitle={"Charlie Co"}
-                  />
-                </div>
-                <div className="ACDStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.acdCommand,
-                      lists.alpha3,
-                      lists.bravo3,
-                      lists.charlie3,
-                      lists.delta3,
-                    ]}
-                    subtitle={"ACD"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.acdCommand]}
-                    subSubtitle={"Headquarters"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.alpha3]}
-                    subSubtitle={"Alpha Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.bravo3]}
-                    subSubtitle={"Bravo Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.charlie3]}
-                    subSubtitle={"Charlie Co"}
-                  />
-                </div>
-                <div className="CombinedStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.regiCommand,
-                      lists.oneSevenCommand,
-                      lists.alpha1,
-                      lists.bravo1,
-                      lists.charlie1,
-                      lists.twoSevenCommand,
-                      lists.alpha2,
-                      lists.bravo2,
-                      lists.charlie2,
-                      lists.acdCommand,
-                      lists.alpha3,
-                      lists.bravo3,
-                      lists.charlie3,
-                      lists.delta3,
-                    ]}
-                    subtitle={"Overall Strength"}
-                  />
-                </div>
+              <div className="Regiment Breakdown">
+                7th Cavalry Regiment {'('}Active Duty and Line Billets only{')'}
+                <Statistics 
+                  billetIDs={[
+                    lists.oneSevenCommand,
+                    lists.alpha1,
+                    lists.bravo1,
+                    lists.charlie1,
+                  ]}
+                  labelArray = {['Headquarters','Alpha Company','Bravo Troop','Charlie Company']}
+                  milpacArray = {milpacArray}
+                />
+              </div>
+              <div className="OneSevenBreakdown">
+                First Battalion
+                <Statistics 
+                  billetIDs={[
+                    lists.oneSevenCommand,
+                    lists.alpha1,
+                    lists.bravo1,
+                    lists.charlie1,
+                  ]}
+                  labelArray = {['1-7 Headquarters','Alpha Company','Bravo Troop','Charlie Company']}
+                  milpacArray = {milpacArray}
+                />
+              </div>
+              <div className="TwoSevenBreakdown">
+                Second Battalion
+                <Statistics 
+                  billetIDs={[
+                    lists.twoSevenCommand,
+                    lists.alpha2,
+                    lists.bravo2,
+                    lists.charlie2,
+                  ]}
+                  labelArray = {['2-7 Headquarters','Alpha Company','Bravo Company','Charlie Company']}
+                  milpacArray = {milpacArray}
+                />
+              </div>
+              <div className="ACDStrength">
+                Auxillary Combat Division
+                <Statistics 
+                  billetIDs={[
+                    lists.acdCommand,
+                    lists.alpha3,
+                    lists.bravo3,
+                    lists.charlie3,
+                    lists.starterPlatoon,
+                  ]}
+                  labelArray = {['ACD Headquarters','Alpha Company','Bravo Company','Charlie Company','Star Citizen Starter Platoon']}
+                  milpacArray = {milpacArray}
+                />
+              </div>
               </Collapsible>
             </div>
           </div>
@@ -631,4 +526,4 @@ function MilpacRequest() {
     </div>
   );
 }
-export default MilpacRequest;
+export default MilpacRequest;
\ No newline at end of file
diff --git a/client/src/modules/Generic/Piechart.js b/client/src/modules/Generic/Piechart.js
deleted file mode 100644
index fe00f1e..0000000
--- a/client/src/modules/Generic/Piechart.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { Component } from 'react';
-import Chart from 'react-apexcharts'
-
-class Donut extends Component {
-
-  constructor(props) {
-    super(props);
-
-    //for the love of god, this is terrible. If you are reading this, DONT DO THIS! this is so unbelievibly bad. This will be reworked once the duplicated pieChartArray items are fixed 
-
-    var piechartObject = props.piechartObject;
-    var useSelector0 = props.useSelector0
-    var useSelector2 = props.useSelector2
-    var useSelector4 = props.useSelector4
-    var useSelector6 = props.useSelector6
-    var useSelector8 = props.useSelector8
-    var finalInput = [];
-    
-    if (useSelector0 !== false) {
-      finalInput.push(piechartObject[0])
-    }if (useSelector2 !== false) {
-      finalInput.push(piechartObject[2])
-    }if (useSelector4 !== false) {
-      finalInput.push(piechartObject[4])
-    }if (useSelector6 !== false) {
-      finalInput.push(piechartObject[6])
-    }if (useSelector8 !== false) {
-      finalInput.push(piechartObject[8])
-    };
-
-    console.log (finalInput);
-
-    this.state = {
-      options: {},
-      series: finalInput,
-      labels: ['A', 'B', 'C', 'D', 'E']
-    }
-  }
-
-  render() {
-
-    return (
-      <div className="donut">
-        <Chart options={this.state.options} series={this.state.series} type="donut" width="380" />
-      </div>
-    );
-  }
-}
-
-export default Donut;
\ No newline at end of file
diff --git a/client/src/modules/Generic/Statistics.js b/client/src/modules/Generic/Statistics.js
new file mode 100644
index 0000000..4de8bb8
--- /dev/null
+++ b/client/src/modules/Generic/Statistics.js
@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import Chart from "react-apexcharts";
+
+class Statistics extends Component {
+  constructor(props) {
+    super(props);
+
+    let milpacArray = props.milpacArray;
+    let billetIDs = props.billetIDs;
+    let labelArray = props.labelArray;
+    let piechartData = [];
+    let combinedArray = Array(billetIDs.length)
+      .fill()
+      .map(() => []);
+
+    console.log(billetIDs);
+    console.log(milpacArray);
+
+    for (let milpacIdCombat in milpacArray[0].combat.profiles) {
+      var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
+
+      for (let billetIdArray in billetIDs) {
+        if (billetIDs[billetIdArray].includes(primary.positionId)) {
+          combinedArray[billetIdArray].push(primary.positionTitle);
+        }
+      }
+    }
+
+    combinedArray.forEach((subArray) => {
+      piechartData.push(subArray.length);
+    });
+
+    console.log(combinedArray);
+
+    this.state = {
+      options: {
+        labels: labelArray,
+        legend: {
+          show: true,
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        tooltip: {
+          enabled: false,
+        },
+        plotOptions: {
+          pie: {
+            donut: {
+              size: "65%",
+              background: "transparent",
+              labels: {
+                show: true,
+                value: {
+                  show: true,
+                },
+                total: {
+                  show: true,
+                  showAlways: false,
+                  label: "Total",
+                },
+              },
+            },
+          },
+        },
+      },
+      series: piechartData,
+    };
+  }
+
+  render() {
+    return (
+      <div className="donut">
+        <Chart
+          options={this.state.options}
+          series={this.state.series}
+          type="donut"
+          width="380"
+        />
+      </div>
+    );
+  }
+}
+
+export default Statistics;
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
deleted file mode 100644
index fdf489a..0000000
--- a/client/src/modules/Generic/StrengthCount.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from "react";
-
-function StrengthCount(props) {
-  var useCompanyLevelLogic = props.useCompanyLevelLogic;
-  var piechartArray = props.piechartArray;
-  
-  if (useCompanyLevelLogic !== true) {
-    var combinedArray = [];
-    var milpacArray = props.milpacArray;
-    var billetIDs = props.billetIDs;
-    var subtitle = props.subtitle;
-
-    for (var milpacIdCombat in milpacArray[0].combat.profiles) {
-      var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
-
-      for (var billetIdArray in billetIDs) {
-        if (billetIDs[billetIdArray].includes(primary.positionId)) {
-          combinedArray.push({ position: primary });
-        }
-      }
-    }
-
-    piechartArray.push(combinedArray.length)
-
-    console.log(piechartArray)
-
-    return (
-      <div className="Response Container">
-        <div className="Header Container">
-          <div className="Subtitle">{subtitle}</div>
-          <div className="Combined Counter">
-            Overall Strength{": "}
-            {combinedArray.length}
-          </div>
-        </div>
-      </div>
-    );
-  } else if (useCompanyLevelLogic === true) {
-    combinedArray = [];
-    milpacArray = props.milpacArray;
-    billetIDs = props.billetIDs;
-    var subSubtitle = props.subSubtitle;
-
-    for (milpacIdCombat in milpacArray[0].combat.profiles) {
-      primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
-
-      for (billetIdArray in billetIDs) {
-        if (billetIDs[billetIdArray].includes(primary.positionId)) {
-          combinedArray.push({ position: primary });
-        }
-      }
-    }
-
-    piechartArray.push(combinedArray.length)
-
-    console.log(piechartArray)
-    
-
-    return (
-      <div className="Response Container">
-        <div className="SubsubtitleAndCount">
-          {subSubtitle}
-          {": "}
-          {combinedArray.length}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default StrengthCount;

From 7388916e603e3348f714b01d3bd80b4ab2821080 Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Wed, 13 Sep 2023 13:29:23 -0600
Subject: [PATCH 09/11] Pie Charts

Final version of the Pie-Chart-Testing fork. After merging with the 7Cav ADR, this branch will be deleted
---
 client/src/App.js                        | 162 +++++++++++++++--------
 client/src/modules/Generic/Statistics.js | 153 ++++++++++++++++-----
 2 files changed, 226 insertions(+), 89 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 43c2010..da6eee7 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import "./App.css";
 import Collapsible from "react-collapsible";
 import lists from "./modules/Generic/BilletBank";
@@ -28,7 +28,7 @@ function MilpacRequest() {
         t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
     })(window, document, "clarity", "script", "dig85agbqz");
-</script>`;
+  </script>`;
 
   // Reusable API fetching function
   async function fetchData(url, setFunction) {
@@ -74,7 +74,7 @@ function MilpacRequest() {
       setLoading(false);
     });
   }, []);
-  
+
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -465,59 +465,107 @@ function MilpacRequest() {
                 triggerOpenedClassName="Title"
                 open={true}
               >
-              <div className="Regiment Breakdown">
-                7th Cavalry Regiment {'('}Active Duty and Line Billets only{')'}
-                <Statistics 
-                  billetIDs={[
-                    lists.oneSevenCommand,
-                    lists.alpha1,
-                    lists.bravo1,
-                    lists.charlie1,
-                  ]}
-                  labelArray = {['Headquarters','Alpha Company','Bravo Troop','Charlie Company']}
-                  milpacArray = {milpacArray}
-                />
-              </div>
-              <div className="OneSevenBreakdown">
-                First Battalion
-                <Statistics 
-                  billetIDs={[
-                    lists.oneSevenCommand,
-                    lists.alpha1,
-                    lists.bravo1,
-                    lists.charlie1,
-                  ]}
-                  labelArray = {['1-7 Headquarters','Alpha Company','Bravo Troop','Charlie Company']}
-                  milpacArray = {milpacArray}
-                />
-              </div>
-              <div className="TwoSevenBreakdown">
-                Second Battalion
-                <Statistics 
-                  billetIDs={[
-                    lists.twoSevenCommand,
-                    lists.alpha2,
-                    lists.bravo2,
-                    lists.charlie2,
-                  ]}
-                  labelArray = {['2-7 Headquarters','Alpha Company','Bravo Company','Charlie Company']}
-                  milpacArray = {milpacArray}
-                />
-              </div>
-              <div className="ACDStrength">
-                Auxillary Combat Division
-                <Statistics 
-                  billetIDs={[
-                    lists.acdCommand,
-                    lists.alpha3,
-                    lists.bravo3,
-                    lists.charlie3,
-                    lists.starterPlatoon,
-                  ]}
-                  labelArray = {['ACD Headquarters','Alpha Company','Bravo Company','Charlie Company','Star Citizen Starter Platoon']}
-                  milpacArray = {milpacArray}
-                />
-              </div>
+                <div className="RegimentBreakdown">
+                  <div className="Subtitle">
+                    7th Cavalry Regiment {"("}Active Duty and Line Billets only
+                    {")"}
+                  </div>
+                  <Statistics
+                    billetIDs={[
+                      lists.regiCommand,
+                      lists.oneSevenCommand,
+                      lists.alpha1,
+                      lists.bravo1,
+                      lists.charlie1,
+                      lists.twoSevenCommand,
+                      lists.alpha2,
+                      lists.bravo2,
+                      lists.charlie2,
+                      lists.acdCommand,
+                      lists.alpha3,
+                      lists.bravo3,
+                      lists.charlie3,
+                      lists.starterPlatoon,
+                    ]}
+                    labelArray={[
+                      "General Staff",
+                      "1-7 Headquarters",
+                      "Alpha Company 1-7",
+                      "Bravo Troop 1-7",
+                      "Charlie Company 1-7",
+                      "2-7 Headquarters",
+                      "Alpha Company 2-7",
+                      "Bravo Company 2-7",
+                      "Charlie Company 2-7",
+                      "ACD Headquarters",
+                      "Alpha Company ACD",
+                      "Bravo Company ACD",
+                      "Charlie Company ACD",
+                      "Star Citizen Starter Platoon",
+                    ]}
+                    milpacArray={milpacArray}
+                    useRegiLogic={true}
+                  />
+                </div>
+                <div className="OneSevenBreakdown">
+                  <div className="Subtitle">First Battalion</div>
+                  <Statistics
+                    billetIDs={[
+                      lists.oneSevenCommand,
+                      lists.alpha1,
+                      lists.bravo1,
+                      lists.charlie1,
+                    ]}
+                    centerLabel={"Total 1-7 Strength"}
+                    labelArray={[
+                      "1-7 Headquarters",
+                      "Alpha Company",
+                      "Bravo Troop",
+                      "Charlie Company",
+                    ]}
+                    milpacArray={milpacArray}
+                  />
+                </div>
+                <div className="TwoSevenBreakdown">
+                  <div className="Subtitle">Second Battalion</div>
+                  <Statistics
+                    billetIDs={[
+                      lists.twoSevenCommand,
+                      lists.alpha2,
+                      lists.bravo2,
+                      lists.charlie2,
+                    ]}
+                    centerLabel={"Total 2-7 Strength"}
+                    labelArray={[
+                      "2-7 Headquarters",
+                      "Alpha Company",
+                      "Bravo Company",
+                      "Charlie Company",
+                    ]}
+                    milpacArray={milpacArray}
+                  />
+                </div>
+                <div className="ACDStrength">
+                  <div className="Subtitle">Auxillary Combat Division</div>
+                  <Statistics
+                    billetIDs={[
+                      lists.acdCommand,
+                      lists.alpha3,
+                      lists.bravo3,
+                      lists.charlie3,
+                      lists.starterPlatoon,
+                    ]}
+                    centerLabel={"Total ACD Strength"}
+                    labelArray={[
+                      "ACD Headquarters",
+                      "Alpha Company",
+                      "Bravo Company",
+                      "Charlie Company",
+                      "Star Citizen Starter Platoon",
+                    ]}
+                    milpacArray={milpacArray}
+                  />
+                </div>
               </Collapsible>
             </div>
           </div>
@@ -526,4 +574,4 @@ function MilpacRequest() {
     </div>
   );
 }
-export default MilpacRequest;
\ No newline at end of file
+export default MilpacRequest;
diff --git a/client/src/modules/Generic/Statistics.js b/client/src/modules/Generic/Statistics.js
index 4de8bb8..5472fc0 100644
--- a/client/src/modules/Generic/Statistics.js
+++ b/client/src/modules/Generic/Statistics.js
@@ -1,3 +1,5 @@
+// This document utilizes Apex charts. If you plan on changing how the pie charts look, you can do it here. Apex charts docs can be found here: https://apexcharts.com/docs/
+
 import React, { Component } from "react";
 import Chart from "react-apexcharts";
 
@@ -5,6 +7,7 @@ class Statistics extends Component {
   constructor(props) {
     super(props);
 
+    let useRegiLogic = props.useRegiLogic;
     let milpacArray = props.milpacArray;
     let billetIDs = props.billetIDs;
     let labelArray = props.labelArray;
@@ -12,9 +15,7 @@ class Statistics extends Component {
     let combinedArray = Array(billetIDs.length)
       .fill()
       .map(() => []);
-
-    console.log(billetIDs);
-    console.log(milpacArray);
+    let centerLabel = props.centerLabel;
 
     for (let milpacIdCombat in milpacArray[0].combat.profiles) {
       var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
@@ -30,42 +31,130 @@ class Statistics extends Component {
       piechartData.push(subArray.length);
     });
 
-    console.log(combinedArray);
-
-    this.state = {
-      options: {
-        labels: labelArray,
-        legend: {
-          show: true,
-        },
-        dataLabels: {
-          enabled: false,
-        },
-        tooltip: {
-          enabled: false,
-        },
-        plotOptions: {
-          pie: {
-            donut: {
-              size: "65%",
-              background: "transparent",
-              labels: {
-                show: true,
-                value: {
+    if (useRegiLogic !== true) {
+      this.state = {
+        options: {
+          labels: labelArray,
+          legend: {
+            show: false,
+          },
+          dataLabels: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+          },
+          stroke: {
+            curve: ["smooth", "monotoneCubic"],
+            colors: ["#222222"],
+            width: 1.5,
+          },
+          colors: ["#109640", "#b61217", "#2a487c", "#ebc729", "#e68c08"],
+          plotOptions: {
+            pie: {
+              donut: {
+                size: "85%",
+                background: "transparent",
+                labels: {
+                  fontFamily: "Segoe UI",
                   show: true,
+                  value: {
+                    show: true,
+                    fontFamily: "Segoe UI",
+                  },
+                  name: {
+                    fontFamily: "Segoe UI",
+                  },
+                  value: {
+                    fontFamily: "Segoe UI",
+                    fontWeight: "bold",
+                    color: "#a1a1a1",
+                  },
+                  total: {
+                    color: "#f1f1f1",
+                    show: true,
+                    showAlways: false,
+                    label: centerLabel,
+                    fontFamily: "Segoe UI",
+                    fontWeight: "bold",
+                  },
                 },
-                total: {
+              },
+            },
+          },
+        },
+        series: piechartData,
+      };
+    } else if (useRegiLogic === true) {
+      this.state = {
+        options: {
+          labels: labelArray,
+          legend: {
+            show: false,
+          },
+          dataLabels: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+          },
+          stroke: {
+            curve: ["smooth", "monotoneCubic"],
+            colors: ["#222222"],
+            width: 1.5,
+          },
+          colors: [
+            "#109640",
+            "#b61217",
+            "#b61217",
+            "#b61217",
+            "#b61217",
+            "#2a487c",
+            "#2a487c",
+            "#2a487c",
+            "#2a487c",
+            "#ebc729",
+            "#ebc729",
+            "#ebc729",
+            "#ebc729",
+            "#ebc729",
+          ],
+          plotOptions: {
+            pie: {
+              donut: {
+                size: "85%",
+                background: "transparent",
+                labels: {
+                  fontFamily: "Segoe UI",
                   show: true,
-                  showAlways: false,
-                  label: "Total",
+                  value: {
+                    show: true,
+                    fontFamily: "Segoe UI",
+                  },
+                  name: {
+                    fontFamily: "Segoe UI",
+                  },
+                  value: {
+                    fontFamily: "Segoe UI",
+                    fontWeight: "bold",
+                    color: "#a1a1a1",
+                  },
+                  total: {
+                    color: "#f1f1f1",
+                    show: true,
+                    showAlways: false,
+                    label: "Total Active Duty",
+                    fontFamily: "Segoe UI",
+                    fontWeight: "bold",
+                  },
                 },
               },
             },
           },
         },
-      },
-      series: piechartData,
-    };
+        series: piechartData,
+      };
+    }
   }
 
   render() {
@@ -75,7 +164,7 @@ class Statistics extends Component {
           options={this.state.options}
           series={this.state.series}
           type="donut"
-          width="380"
+          width="65%"
         />
       </div>
     );

From 7c3a786d0c2f338907d1094a9299541039d197be Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Wed, 13 Sep 2023 13:36:12 -0600
Subject: [PATCH 10/11] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 136fecf..664e951 100644
--- a/README.md
+++ b/README.md
@@ -141,7 +141,9 @@ const billetBank = {
 
 ## TODO
 
+- [ ] Add tutorial for updating Pie Charts
 - [ ] Add tutorial for updating Statistics
 - [ ] Change cache warning on client to display time since cache refresh
 - [ ] Investigate the feasibility of sorting by rank after billet sorting (Subsorting? Consider using QuickSort)
 - [ ] Add graphical data visualization
+- [ ] Code Refactorizing
\ No newline at end of file

From baf76327f4f3492540da44d90e600b2ebd9c431d Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Wed, 13 Sep 2023 13:43:25 -0600
Subject: [PATCH 11/11] Remove Double Keys in Statistics.js

---
 client/src/modules/Generic/Statistics.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/client/src/modules/Generic/Statistics.js b/client/src/modules/Generic/Statistics.js
index 5472fc0..5782e23 100644
--- a/client/src/modules/Generic/Statistics.js
+++ b/client/src/modules/Generic/Statistics.js
@@ -58,10 +58,6 @@ class Statistics extends Component {
                 labels: {
                   fontFamily: "Segoe UI",
                   show: true,
-                  value: {
-                    show: true,
-                    fontFamily: "Segoe UI",
-                  },
                   name: {
                     fontFamily: "Segoe UI",
                   },
@@ -127,10 +123,6 @@ class Statistics extends Component {
                 labels: {
                   fontFamily: "Segoe UI",
                   show: true,
-                  value: {
-                    show: true,
-                    fontFamily: "Segoe UI",
-                  },
                   name: {
                     fontFamily: "Segoe UI",
                   },