add HistoryPage

.env.development

@@ -10,3 +10,4 @@ REACT_APP_MEDIA_API_ENDPOINT=http://localhost
 REACT_APP_LOG_API_ENDPOINT=http://localhost:8000
 REACT_APP_WS_ENDPOINT=ws://10.43.95.70:15674/ws
 REACT_APP_CDN_ENDPOINT=http://localhost:9000/public
+REACT_APP_HISTORY_API_ENDPOINT=http://localhost/

.env.production

@@ -8,3 +8,4 @@ REACT_APP_MEDIA_API_ENDPOINT=https://api.oda.digital
 REACT_APP_LOG_API_ENDPOINT=https://api.oda.digital
 REACT_APP_WS_ENDPOINT=wss://api.oda.digital/ws
 REACT_APP_CDN_ENDPOINT=https://api.oda.digital/images
+REACT_APP_HISTORY_API_ENDPOINT=https://api.oda.digital/

package.json

@@ -6,6 +6,7 @@
     "@ant-design/icons": "^5.3.7",
     "@glidejs/glide": "^3.6.0",
     "@google-cloud/text-to-speech": "^5.0.0",
+    "@opendonationassistant/oda-history-service-client": "^0.1.0",
     "@stomp/stompjs": "^7.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/components/ConfigurationPage/ConfigurationPage.tsx

@@ -18,7 +18,6 @@ import { PaymentAlertsWidgetSettings } from "./widgetsettings/PaymentAlertsWidge
 import { PlayerInfoWidgetSettings } from "./widgetsettings/PlayerInfoWidgetSettings";
 import { ReelWidgetSettings } from "./widgetsettings/ReelWidgetSettings";
 import { DonationGoalWidgetSettings } from "./widgetsettings/DonationGoalWidgetSettings";
-import { DefaultWidgetProperty } from "./widgetproperties/WidgetProperty";
 import { ConfigProvider, theme } from "antd";
 
 const backgroundColor = (

src/components/ConfigurationPage/css/Toolbar.css

@@ -3,6 +3,7 @@
   height: 100%;
   width: 200px;
   border-right: 1px solid #674afd;
+  box-shadow: inset -5px 0 5px 0px rgba(0, 0, 0, 0.5);
 }
 
 .toolbar .material-symbols-sharp {
@@ -11,26 +12,29 @@
 
 .toolbar-button {
 	background: none;
-  color: white;
+  color: rgb(120, 133, 189);
   border: none;
   font-family: Roboto;
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
   padding-left: 10px;
-  margin-top: 10px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   width: 100%;
   text-align: left;
 }
 
 .toolbar-button:hover {
 	background: #111529;
+  color: white;
+  box-shadow: inset 0 0 10px 2px rgba(104, 74, 255, 0.5);
 }
 
 .toolbar-button.active {
   background: #684aff;
+  color: white;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
 }
 
 .toolbar-title {

src/components/ConfigurationPage/css/WidgetSettings.css

@@ -3,7 +3,10 @@
 :root {
   --oda-main-border: 1px solid #674afd;
   --oda-main-text-color: white;
+  --oda-secondary-text-color: rgba(220, 220, 220, 0.9);
   --oda-main-font-family: Play;
+  --oda-label-background-color: #151a33;
+  --oda-btn-background-color: #151a33;
 }
 
 .oda-btn-default {
@@ -210,7 +213,7 @@
 }
 
 .textarea-popup-container {
-  width:700px!important;
+  width: 700px !important;
 }
 .textarea-container {
   width: 100%;
@@ -329,10 +332,6 @@ div.payment-alert-image-preview {
   padding-left: 8px;
 }
 
-.payment-alert-image-preview.selected {
-  /* border: 8px solid red; */
-}
-
 .payment-alert-image-preview:hover {
   cursor: pointer;
 }
@@ -441,3 +440,98 @@ div.payment-alert-image-preview {
   font-weight: 900;
   color: white;
 }
+
+.configuration-container .ant-table {
+  border: var(--oda-main-border);
+}
+
+.configuration-container .ant-pagination .ant-pagination-item-active {
+  border: var(--oda-main-border);
+  background-color: #684aff;
+  color: white !important;
+  box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.9);
+  border-radius: 3px;
+}
+
+.configuration-container .ant-pagination .ant-pagination-item {
+  color: white;
+}
+
+.configuration-container .ant-pagination .ant-pagination-item-link {
+  color: white;
+}
+
+.configuration-container .ant-pagination .ant-pagination-item-link:hover {
+  color: white;
+}
+
+.configuration-container
+  .ant-descriptions
+  .ant-descriptions-item-container
+  .ant-descriptions-item-label {
+  /* background-color: var(--oda-label-background-color); */
+  margin-right: 10px;
+  color: black;
+  font-weight: 900;
+}
+
+.configuration-container
+  .ant-descriptions
+  .ant-descriptions-item-container
+  .ant-descriptions-item-label::after {
+  display: none;
+}
+
+.configuration-container .ant-list-split .ant-list-item {
+  background-color: #151a33;
+  padding: 4px 15px;
+  border-radius: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.9);
+}
+
+/* .configuration-container .ant-list-split .ant-list-item:hover { */
+/*   box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.6); */
+/*   cursor: pointer; */
+/* } */
+
+.configuration-container .ant-list .ant-list-item .ant-list-item-meta-title {
+  color: white;
+  font-size: 24px;
+}
+
+.configuration-container .ant-list .ant-list-item .material-symbols-sharp {
+  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.9);
+  color: #684aff;
+}
+
+.configuration-container
+  .ant-list
+  .ant-list-item
+  .ant-list-item-meta-title
+  span.material-symbols-sharp {
+  color: var(--oda-secondary-text-color);
+}
+
+.configuration-container
+  .ant-list
+  .ant-list-item
+  .ant-list-item-meta-title
+  .material-symbols-sharp {
+  vertical-align: middle;
+  margin-right: 10px;
+  color: black;
+}
+
+.configuration-container .ant-descriptions-item-content {
+  color: white;
+}
+
+.configuration-container
+  .ant-pagination-options
+  .ant-select
+  .ant-select-selector {
+  border: var(--oda-main-border);
+  background-color: var(--oda-btn-background-color);
+}

src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx

@@ -135,12 +135,13 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
               if (!this.widgetId) {
                 return;
               }
-              updateConfig(this.widgetId, this.name, e);
+              const updated = structuredClone(goal);
+              updated.requiredAmount.major = e ?? 0;
+              this.updateGoal(updateConfig, updated, index);
             }}
           />
         </div>
         <div
-          // style={{ borderBottom: "1px solid #674afd" }}
           className="widget-settings-item"
         >
           <label

src/index.tsx

@@ -26,6 +26,8 @@ import PlayerPopup from "./components/PlayerPopup/PlayerPopup";
 import ReelWidget from "./pages/Reel/ReelWidget";
 import { WidgetData } from "./types/WidgetData";
 import DonationGoal from "./components/DonationGoal/DonationGoal";
+import HistoryPage from "./pages/History/HistoryPage";
+import { ConfigProvider, theme } from "antd";
 
 async function widgetSettingsLoader({
   params,
@@ -75,7 +77,12 @@ const router = createBrowserRouter([
   },
   {
     path: "/configuration/payment-page",
-    element: <PaymentPageConfigComponent/>,
+    element: <PaymentPageConfigComponent />,
+    loader: widgetSettingsLoader,
+  },
+  {
+    path: "/configuration/history-page",
+    element: <HistoryPage />,
     loader: widgetSettingsLoader,
   },
   {
@@ -137,5 +144,16 @@ const router = createBrowserRouter([
 const rootElement = document.getElementById("root");
 if (rootElement) {
   const root = ReactDOM.createRoot(rootElement);
-  root.render(<RouterProvider router={router} />);
+  root.render(
+    <ConfigProvider
+      theme={{
+        token: {
+          borderRadius: 8,
+        },
+        algorithm: theme.darkAlgorithm,
+      }}
+    >
+      <RouterProvider router={router} />
+    </ConfigProvider>,
+  );
 }

src/pages/History/HistoryPage.module.css

@@ -0,0 +1,25 @@
+.pagecontainer {
+  margin-left: 250px;
+  margin-right: 50px;
+  margin-top: 50px;
+}
+
+.little {
+  font-size:16px;
+  color: rgb(120, 133, 189);
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.timestamp{
+  justify-self: flex-end;
+  text-align: right;
+  flex: 1 0 auto;
+  color: rgb(120, 133, 189);
+}
+
+.title{
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+}