✨ Add S3 Accounting Dashboard

package.json

@@ -41,6 +41,7 @@
     "query-string": "^6.12.1",
     "react": "^16.8.3",
     "react-app-rewire-postcss": "^3.0.2",
+    "react-charts": "^2.0.0-beta.7",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datasheet": "^1.4.1",
     "react-dom": "^16.8.3",
@@ -49,6 +50,7 @@
     "react-editor-js": "^1.9.0",
     "react-helmet": "^5.2.1",
     "react-hot-loader": "^4.3.12",
+    "react-icons": "^4.3.1",
     "react-markdown": "^4.2.2",
     "react-modal": "^3.8.1",
     "react-router-dom": "^5.2.0",

src/App.css

@@ -44,6 +44,10 @@ body {
     margin-top: 0px !important;
 }
 
+.mt--10 {
+    margin-top: -10px !important;
+}
+
 .mr-0 {
     margin-right: 0px !important;
 }
@@ -342,6 +346,10 @@ body {
     color: #676767 !important;
 }
 
+.text-dark-grey {
+    color: #5e5e5e !important;
+}
+
 .text-black {
     color: #000000 !important;
 }
@@ -542,6 +550,14 @@ body {
     height: 38px !important;
 }
 
+.h-24 {
+    height: 24px !important;
+}
+
+.h-220 {
+    height: 220px !important;
+}
+
 .small-inline {
     display: inline-block;
     padding-top: 10px;

src/common/dateUtils.js

@@ -1,5 +1,5 @@
 // Reformat time to the "DD MMM YYYY" format like "12 Aug 2019"
-export const longDate = (date) => {
+export const longDate = date => {
   var mydate = new Date(date);
   var month = [
     'Jan',
@@ -19,7 +19,7 @@ export const longDate = (date) => {
   return str;
 };
 
-export const toYearMonthDay = (isoDate) => {
+export const toYearMonthDay = isoDate => {
   /*
    * Convert ISO8601 UTC datetime string to local datetime and format as
    * yyyy-mm-dd date string.
@@ -39,3 +39,34 @@ export const toYearMonthDay = (isoDate) => {
   }
   return date;
 };
+
+// Reformat time to the date and time format
+export const dateTime = date => {
+  var mydate = new Date(date);
+  var month = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sept',
+    'Oct',
+    'Nov',
+    'Dec',
+  ][mydate.getMonth()];
+  const weekday = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  var str =
+    weekday[mydate.getDay()] +
+    ', ' +
+    month +
+    ' ' +
+    mydate.getUTCDate() +
+    ', ' +
+    mydate.getFullYear() +
+    ', ' +
+    mydate.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+  return str;
+};

src/common/enums.js

@@ -667,6 +667,7 @@ export const permissionIcon = {
   validationresultset: 'code',
   datatemplate: 'file excel',
   organization: 'group',
+  storageanalysis: 'box',
 };
 
 // Icon color for different permissions

src/components/Header/Header.js

@@ -277,6 +277,12 @@ const Header = ({location}) => {
                   <Label content="beta" color="blue" attached="bottom right" />
                 </Menu.Item>
               )}
+              {hasPermission(profile, 'view_settings') && (
+                <Menu.Item as={Nav} to="/s3-accounting">
+                  S3 Accounting
+                  <Label content="beta" color="blue" attached="bottom right" />
+                </Menu.Item>
+              )}
               <Menu.Menu position="right">
                 {hasPermission(profile, 'add_referraltoken') && (
                   <AddUserButton profile={profile} />

src/documents/utilities.js

@@ -1,6 +1,7 @@
-import {KF_STUDY_API} from '../common/globals';
 import * as stringSimilarity from 'string-similarity';
 
+import {KF_STUDY_API} from '../common/globals';
+
 // Compare date of file versions based on their createdAt time. (Latest first)
 export const dateCompare = (version1, version2) => {
   return new Date(version2.node.createdAt) - new Date(version1.node.createdAt);

src/routes/index.js

@@ -51,6 +51,7 @@ import {
   TemplatesView,
 } from '../admin/views';
 import ReleaseRoutes from '../releases/routes';
+import S3AccountingRoutes from '../s3Accounting/routes';
 import TrackedRoute from './TrackedRoute';
 
 const Routes = () => (
@@ -74,6 +75,7 @@ const Routes = () => (
         <PrivateRoute exact path="/" component={StudyListView} />
         <PrivateRoute exact path="/study" component={StudyListView} />
         <ReleaseRoutes path="/releases" />
+        <S3AccountingRoutes path="/s3-accounting" />
         <TrackedRoute
           path="/welcome"
           component={WelcomeView}