[WIP] Task review app - added modal components, updated /stats endpoint

mephisto/client/review_app/client/package.json

@@ -6,6 +6,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "bootstrap": "^5.3.1",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",

mephisto/client/review_app/client/src/App/App.tsx

@@ -7,7 +7,6 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min';
 import HomePage from 'pages/HomePage/HomePage';
-import QualificationsPage from 'pages/QualificationsPage/QualificationsPage';
 import TaskPage from 'pages/TaskPage/TaskPage';
 import TasksPage from 'pages/TasksPage/TasksPage';
 import * as React from 'react';
@@ -23,7 +22,6 @@ function App() {
         <Route path={urls.client.home} element={<HomePage />} />
         <Route path={urls.client.task(':id')} element={<TaskPage />} />
         <Route path={urls.client.tasks} element={<TasksPage />} />
-        <Route path={urls.client.qualifications} element={<QualificationsPage />} />
       </Routes>
     </div>
   );

mephisto/client/review_app/client/src/pages/QualificationsPage/QualificationsPage.css → mephisto/client/review_app/client/src/consts/review.ts

@@ -5,6 +5,8 @@
  */
 
 
-.qualifications {
-
-}
+export const ReviewType = {
+  APPROVE: "approve",
+  REJECT: "reject",
+  SOFT_REJECT: "soft-reject",
+};

mephisto/client/review_app/client/src/pages/TaskPage/Header/Header.css

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.task-header {
+  max-width: 100%;
+  margin: 0;
+  background-color: rgba(236, 218, 223, 0.3);
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.task-header .logo {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.task-header .logo img {
+  max-width: 100%;
+}
+
+.task-header .table tr {
+  border: transparent;
+}
+
+.task-header .table tr.total td {
+  color: #a6a6a6;
+}
+
+.task-header .table th, .task-header .table td {
+  background: transparent;
+  line-height: 0.8;
+}
+
+.task-header .table .title b {
+  display: inline-block;
+  line-height: 2;
+  border-bottom: 1px solid grey;
+}

mephisto/client/review_app/client/src/pages/TaskPage/Header/Header.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { Col, Container, Row, Table } from 'react-bootstrap';
+import logo from 'static/images/logo.svg';
+import './Header.css';
+
+
+function Header() {
+  return <Container className={'task-header'}>
+    <Row>
+      <Col className={"logo"} sm={3}>
+        <img src={logo} alt="logo" />
+      </Col>
+      <Col>
+        <Table className={'table'} responsive={"sm"} bordered={false}>
+          <thead>
+            <tr>
+              <th></th>
+              <th className={"title text-secondary"}><b>Reviewed</b></th>
+              <th className={"title text-success"}><b>Approved</b></th>
+              <th className={"title text-warning"}><b>Soft-Rejected</b></th>
+              <th className={"title text-danger"}><b>Rejected</b></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>worker</td>
+              <td><b>15</b>/25</td>
+              <td><b>16</b> (80%)</td>
+              <td><b>1</b> (5%)</td>
+              <td><b>3</b> (15%)</td>
+            </tr>
+            <tr className={"total"}>
+              <td>Total</td>
+              <td><b>64</b>/256</td>
+              <td><b>186</b> (78%)</td>
+              <td><b>23</b> (7%)</td>
+              <td><b>56</b> (17%)</td>
+            </tr>
+          </tbody>
+        </Table>
+      </Col>
+    </Row>
+  </Container>;
+}
+
+
+export default Header;

mephisto/client/review_app/client/src/pages/TaskPage/ModalForm/ModalForm.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.review-form >* input,
+.review-form >* select,
+.review-form >* textarea {
+  border: 1px solid black;
+}
+
+.review-form .second-line {
+  margin-top: 10px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  padding-left: 25px;
+}