[REFACTOR] resolve merge conflict

package.json

@@ -27,7 +27,8 @@
     "react-moment": "^0.9.7",
     "react-number-format": "^4.4.1",
     "react-promise-tracker": "^2.1.0",
-    "react-toastify": "^7.0.3"
+    "react-toastify": "^7.0.3",
+    "reactstrap": "^8.9.0"
   },
   "scripts": {
     "start": "cross-env REACT_APP_BASE_URL=http://localhost:8000 parcel public/index.html",

src/__test__/bank/EditBank.test.js

@@ -15,6 +15,7 @@ test("Test edit bank renders", async () => {
       JSON.stringify({
         id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
         bank_name: "bca",
+        bank_code_number: "222",
         bank_account_number: "1234456",
         bank_account_name: "test bca",
       })
@@ -31,6 +32,8 @@ test("Test edit bank renders", async () => {
   await waitFor(() => getByTestId("edit-bank"));
   const name_bank = getByTestId("name-bank-input");
   expect(name_bank.value).toEqual("bca");
+  const code_bank = getByTestId("code-number-input");
+  expect(code_bank.value).toEqual("222");
   expect(fetch.mock.calls.length).toEqual(1);
   await act(async () => {
     await fireEvent.input(name_bank, { target: { value: "test" } });
@@ -47,6 +50,7 @@ test("Test edit bank error", async () => {
       JSON.stringify({
         id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
         bank_name: "bca",
+        bank_code_number: "222",
         bank_account_number: "1234456",
         bank_account_name: "test bca",
       })
@@ -63,6 +67,8 @@ test("Test edit bank error", async () => {
   await waitFor(() => getByTestId("edit-bank"));
   const name_bank = getByTestId("name-bank-input");
   expect(name_bank.value).toEqual("bca");
+  const code_bank = getByTestId("code-number-input");
+  expect(code_bank.value).toEqual("222");
   expect(fetch.mock.calls.length).toEqual(1);
   await act(async () => {
     await fireEvent.input(name_bank, { target: { value: "test" } });
@@ -96,5 +102,5 @@ test("Test edit bank required marks", async () => {
   expect(waitBank.textContent).toContain("Fetching data..");
   await waitFor(() => getByTestId("edit-bank"));
   const formBank = getByTestId("form-bank");
-  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor rekening*", "Nama pemilik rekening*");
+  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor kode bank*", "Nomor rekening*", "Nama pemilik rekening*");
 });
\ No newline at end of file

src/__test__/bank/ListBank.test.js

@@ -20,12 +20,14 @@ test("Test List Bank", async () => {
         {
           id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
           bank_name: "bca",
+          bank_code_number: "222",
           bank_account_number: "1234456",
           bank_account_name: "test bca",
         },
         {
           id: "3e7974da-47fb-47ed-a83c-525e237a8c41",
           bank_name: "bca1",
+          bank_code_number: "333",
           bank_account_number: "1234456",
           bank_account_name: "test bca",
         },
@@ -40,5 +42,8 @@ test("Test List Bank", async () => {
   await waitFor(() => getByTestId("tableList"));
   const data = getByTestId("tableList");
   expect(data.textContent).toContain("bca");
+  expect(data.textContent).toContain("222");
+  expect(data.textContent).toContain("bca1");
+  expect(data.textContent).toContain("333");
   expect(fetch.mock.calls.length).toEqual(1);
 });

src/__test__/bank/TambahBank.test.js

@@ -15,9 +15,13 @@ test("Test tambah bank renders", async () => {
     </AuthContext.Provider>
   );
   const name_bank = getByTestId("name-bank-input");
+  const code_bank = getByTestId("code-number-input");
   await act(async () => {
     await fireEvent.input(name_bank, { target: { value: "test" } });
   });
+  await act(async () => {
+    await fireEvent.input(code_bank, { target: { value: "222" } });
+  });
   await act(async () => {
     await fireEvent.submit(getByTestId("submit-bank"));
   });
@@ -31,5 +35,5 @@ test("Test tambah bank required marks", async () => {
     </AuthContext.Provider>
   );
   const formBank = getByTestId("tambah-bank");
-  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor rekening*", "Nama pemilik rekening*");
+  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor kode bank*", "Nomor rekening*", "Nama pemilik rekening*");
 });
\ No newline at end of file

src/index.js

 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
 import App from "./App";
 
+
 ReactDOM.render(<App />, document.getElementById("root"));

src/page/bank/EditBank.jsx

@@ -26,6 +26,7 @@ const EditBank = ({ idBank }) => {
   const onSubmit = (data) => {
     const formData = new FormData();
     formData.append("bank_name", data["bank_name"]);
+    formData.append("bank_code_number", data["bank_code_number"]);
     formData.append("bank_account_number", data["bank_account_number"]);
     formData.append("bank_account_name", data["bank_account_name"]);
     send(formData);

src/page/bank/FormBank.jsx

-import React from "react";
-import { useForm } from "react-hook-form";
-import {
-  ErrorDiv,
-  RowInput,
-  InputForm,
-  LabelInput,
-  InputSubmitForm,
-} from "../../component/html/html";
-import { css } from "@emotion/core";
-
-const FormBank = ({ onSubmit, initialData = null }) => {
-  const { register, handleSubmit, errors } = useForm({
-    defaultValues:
-      initialData !== null
-        ? {
-            bank_name: initialData["bank_name"],
-            bank_account_number: initialData["bank_account_number"],
-            bank_account_name: initialData["bank_account_name"],
-          }
-        : {},
-  });
-  return (
-    <form
-      data-testid="form-bank"
-      onSubmit={handleSubmit(onSubmit)}
-      css={css`
-        display: flex;
-        flex-direction: column;
-      `}
-    >
-      <div
-      css={css`
-        font-size: 15px;
-        color:red;
-      `}>
-        * Perlu diisi
-      </div>
-      <RowInput>
-        <LabelInput htmlFor="bank_name">Nama bank
-        <span css={css`color:red`}>*</span></LabelInput>
-        <InputForm
-          data-testid="name-bank-input"
-          name="bank_name"
-          ref={register({ required: true })}
-        />
-        {errors.bank_name && <ErrorDiv>Nama bank tidak boleh kosong</ErrorDiv>}
-      </RowInput>
-      <RowInput>
-        <LabelInput htmlFor="account_number">Nomor rekening
-        <span css={css`color:red`}>*</span></LabelInput>
-        <InputForm
-          data-testid="account-number-input"
-          name="bank_account_number"
-          ref={register({ required: true })}
-        />
-        {errors.bank_account_number && (
-          <ErrorDiv>Nomor rekening tidak boleh kosong</ErrorDiv>
-        )}
-      </RowInput>
-      <RowInput>
-        <LabelInput htmlFor="account_name">Nama pemilik rekening
-        <span css={css`color:red`}>*</span></LabelInput>
-        <InputForm
-          data-testid="account-name-input"
-          name="bank_account_name"
-          ref={register({ required: true })}
-        />
-        {errors.bank_account_name && (
-          <ErrorDiv>Nama pemilik rekening tidak boleh kosong</ErrorDiv>
-        )}
-      </RowInput>
-
-      <RowInput>
-        <InputSubmitForm
-          type="submit"
-          data-testid="submit-bank"
-          value="SUBMIT"
-          css={css`
-            height: 100%;
-          `}
-        />
-      </RowInput>
-    </form>
-  );
-};
-
-export default FormBank;
+import React from "react";
+import { useForm } from "react-hook-form";
+import {
+  ErrorDiv,
+  RowInput,
+  InputForm,
+  LabelInput,
+  InputSubmitForm,
+} from "../../component/html/html";
+import { css } from "@emotion/core";
+
+const FormBank = ({ onSubmit, initialData = null }) => {
+  const { register, handleSubmit, errors } = useForm({
+    defaultValues:
+      initialData !== null
+        ? {
+            bank_name: initialData["bank_name"],
+            bank_code_number: initialData["bank_code_number"],
+            bank_account_number: initialData["bank_account_number"],
+            bank_account_name: initialData["bank_account_name"],
+          }
+        : {},
+  });
+  return (
+    <form
+      data-testid="form-bank"
+      onSubmit={handleSubmit(onSubmit)}
+      css={css`
+        display: flex;
+        flex-direction: column;
+      `}
+    >
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
+      <RowInput>
+        <LabelInput htmlFor="bank_name">Nama bank
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="name-bank-input"
+          name="bank_name"
+          ref={register({ required: true })}
+        />
+        {errors.bank_name && <ErrorDiv>Nama bank tidak boleh kosong</ErrorDiv>}
+      </RowInput>
+      <RowInput>
+        <LabelInput htmlFor="code_number">Nomor kode bank
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="code-number-input"
+          name="bank_code_number"
+          ref={register({ required: true })}
+        />
+        {errors.bank_code_number && (
+          <ErrorDiv>Nomor kode bank tidak boleh kosong</ErrorDiv>
+        )}
+      </RowInput>
+      <RowInput>
+        <LabelInput htmlFor="account_number">Nomor rekening
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="account-number-input"
+          name="bank_account_number"
+          ref={register({ required: true })}
+        />
+        {errors.bank_account_number && (
+          <ErrorDiv>Nomor rekening tidak boleh kosong</ErrorDiv>
+        )}
+      </RowInput>
+      <RowInput>
+        <LabelInput htmlFor="account_name">Nama pemilik rekening
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="account-name-input"
+          name="bank_account_name"
+          ref={register({ required: true })}
+        />
+        {errors.bank_account_name && (
+          <ErrorDiv>Nama pemilik rekening tidak boleh kosong</ErrorDiv>
+        )}
+      </RowInput>
+      <RowInput>
+        <InputSubmitForm
+          type="submit"
+          data-testid="submit-bank"
+          value="SUBMIT"
+          css={css`
+            height: 100%;
+          `}
+        />
+      </RowInput>
+    </form>
+  );
+};
+
+export default FormBank;

src/page/bank/ListBank.jsx

@@ -11,6 +11,7 @@ const ListBank = () => {
     keyValuePairs: [
       ["id", "id"],
       ["bank_name", "Nama Bank"],
+      ["bank_code_number", "Nomor Kode Bank"],
       ["bank_account_number", "Nomor Rekening"],
       ["bank_account_name", "Nama Pemilik Rekening"],
     ],

src/page/bank/TambahBank.jsx

@@ -15,12 +15,9 @@ const TambahBank = () => {
   const onSubmit = (data) => {
     const formData = new FormData();
     formData.append("bank_name", data["bank_name"]);
+    formData.append("bank_code_number", data["bank_code_number"]);
     formData.append("bank_account_number", data["bank_account_number"]);
     formData.append("bank_account_name", data["bank_account_name"]);
-    console.log(data);
-    for (let pair in formData.entries()){
-      console.log(pair[0] + ' ' + pair[1]);
-    }
     send(formData);
   };
   return (

src/page/pengguna/DetailPengguna.jsx

@@ -155,98 +155,116 @@ const DetailPengguna = ({ userId }) => {
             {user.username}
           </div>
         </div>
-        <div
-          className="profile"
+        
+        <div className="detailProfile"
+          css={css`
+              background-color: #F2F2F2;
+              border-radius: 15px;
+              padding: 0.5rem 1rem 0.5rem 1rem;
+              margin: 1rem 0 1rem 0;
+          `}>
+          <div 
+            css={css`
+              font-style: normal;
+              font-weight: 300;
+              font-size: 30px;
+              line-height: 44px;
+              border-bottom: 1px solid #C4C4C4;
+              padding-left: 1rem;
+            `}>
+          Detail Profile</div>
+          
+          <div
+          data-testid="detail-profile-test"
+          className="profileDesc"
           css={css`
             font-style: normal;
             font-weight: 300;
-            font-size: 36px;
-            line-height: 44px;
-            margin-top: 1rem;
-          `}
-        >
-          Profil
-        </div>
-        <div
-          className="row mt-2"
-          css={css`
-            margin-top: 1rem;
-            margin-bottom: 1rem;
-          `}
-        >
-          <div className="col-sm-2">
-            <img
-              alt={user.username}
-              className="img-fluid"
-              src={user.profile_picture}
-              css={css`
-                object-fit: cover;
-                width: 150px;
-                height: 150px;
-              `}
-            />
-          </div>
-          <div data-testid="profile" className="col-sm-10">
-            <div
-              css={css`
-                margin-top: 1rem;
-              `}
-            >
-              <PersonIcon style={{ fontSize: 20, color: "FFC80A" }} />
-              <div
-                css={css`
-                  display: inline;
-                  margin-left: 2rem;
-                  font-style: normal;
-                  font-weight: normal;
-                  font-size: 18px;
-                  line-height: 22px;
-                `}
-              >
-                {user.username}
+            font-size: 18px;
+            padding: 1rem;
+          `}>
+          
+            <div className="row" >
+            
+              <div className="col-3" css={css`display: flex; align-items: center;`}>            
+                <PersonIcon style={{ fontSize: 20, color: "FFC80A" }} />
+                <div
+                  css={css`
+                    display: inline;
+                    margin-left: 1rem;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-size: 18px;
+                  `}
+                >
+                  Nama:
+                </div>
+              </div>
+
+              <div className="col-9" 
+                css={css` 
+                font-style: normal;
+                font-weight: normal;
+                `}>
+                {user.full_name}
               </div>
             </div>
-            <div
-              css={css`
-                margin-top: 1rem;
-              `}
-            >
-              <PhoneIcon style={{ fontSize: 20, color: "FFC80A" }} />
+          
+            <div className="row" >
+                
+              <div className="col-3" css={css`display: flex; `}>            
+              <PhoneIcon style={{ fontSize: 23, color: "FFC80A" }} />
               <div
                 css={css`
                   display: inline;
-                  margin-left: 2rem;
+                  margin-left: 1rem;
                   font-style: normal;
                   font-weight: normal;
                   font-size: 18px;
-                  line-height: 22px;
                 `}
               >
+                Nomor HP:
+              </div></div>
+              <div className="col-9" 
+                css={css`
+                font-style: normal;
+                font-weight: normal;`}>
                 {user.phone_number}
               </div>
             </div>
-            <div
-              css={css`
-                margin-top: 1rem;
-              `}
-            >
-              <LocationOnIcon style={{ fontSize: 20, color: "FFC80A" }} />
-              <div
+
+            <div className="row" >
+                
+              <div className="col-3" css={css`display: flex; `}>            
+                <LocationOnIcon style={{ fontSize: 23, color: "FFC80A"}} />
+                <div
+                  css={css`
+                    display: inline;
+                    margin-left: 1rem;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-size: 18px;
+                  `}
+                >
+                  Alamat:
+                </div>
+              </div>
+              <div className="col-9" 
                 css={css`
-                  display: inline;
-                  margin-left: 2rem;
-                  font-style: normal;
-                  font-weight: normal;
-                  font-size: 18px;
-                  line-height: 22px;
-                `}
-              >
+                font-style: normal;
+                font-weight: normal;`}>
                 {user.address}, RT {user.neighborhood}, RW {user.hamlet},
                 Kelurahan {user.urban_village}, Kecamatan {user.sub_district}
               </div>
             </div>
+
+
+
+
           </div>
+
         </div>
+        
         <div
           css={css`
             font-style: normal;

src/page/transaksi/DetailTransaksi.jsx

@@ -3,8 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
 import { css } from "@emotion/core";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import PhoneIcon from "@material-ui/icons/Phone";
-import PhotoIcon from "@material-ui/icons/Photo";
-import ContactsIcon from "@material-ui/icons/Contacts";
+import ImageIcon from '@material-ui/icons/Image';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
 import { Link, navigate } from "@reach/router";
 import PersonIcon from "@material-ui/icons/Person";
 import Table from "@material-ui/core/Table";
@@ -23,9 +23,12 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import FormStatus from "./FormStatus";
+import { Container, Row, Col } from 'reactstrap';
 import "moment-timezone";
 import Moment from "react-moment";
 
+
+
 const DetailTransaksi = ({ idTransaksi }) => {
   const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`;
   const [transaction, error] = useFetchSingleData(url);
@@ -62,7 +65,6 @@ const DetailTransaksi = ({ idTransaksi }) => {
         margin: 2rem 3rem 3rem 3rem;
         flex-direction: column;
         justify-content: space-around;
-        height: 125vh;
       `}
     >
       {error && <ErrorDiv>Something error</ErrorDiv>}
@@ -93,129 +95,225 @@ const DetailTransaksi = ({ idTransaksi }) => {
           KELOLA TRANSAKSI
         </div>
       </div>
-      <div
-        css={css`
-          font-size: 1.5rem;
-          display: flex;
-          align-content: space-between;
-        `}
-      >
-        <div
-          css={css`
-            display: flex;
-          `}
-        >
-          <div
+      <br></br><br></br>
+      <Container>
+        <Row style={{paddingBottom:8}}>
+          <Col md="4">
+            <div
+                css={css`
+                  margin-right: 1rem;
+                  font-size: 1.5rem;
+                  display: flex;
+                  align-content: space-between;
+                  font-weight: bold;
+                `}
+              >
+                Kode Transaksi 
+            </div>
+          </Col>
+          <Col md="3">
+            <div
+                css={css`
+                  margin-right: 1rem;
+                  font-size: 1.5rem;
+                  display: flex;
+                  align-content: space-between;
+                  font-weight: bold;
+                `}
+              >
+                <div>: {transaction.transaction_number}</div>
+            </div>
+          </Col>
+          <Col md="5">
+          {transaction.transaction_status !== "005" &&
+            transaction.transaction_status !== "006" &&
+            transaction.transaction_status !== "007" && (
+              <FormStatus
+                {...{
+                  idTransaksi,
+                  defaultStatus: transaction.transaction_status,