Pbi 6 riwayat transaksi

README.md

@@ -9,6 +9,7 @@
 ## Kontributor
 
 Kelompok: ppl?
+
 - Lia Yuliana - 1806141271
 - Nabila Ayu Dewanti - 1806205312
 - Nurul Srianda Putri - 1806205602
@@ -17,4 +18,65 @@ Kelompok: ppl?
 
 ## Deskripsi Proyek
 
-Proyek ini ditujukan untuk pengembangan tampilan web pada platform hukum (legal) untuk UMKM
\ No newline at end of file
+Proyek ini ditujukan untuk pengembangan tampilan web pada platform hukum (legal)
+untuk UMKM
+
+## Prasyarat untuk menjalankan proyek di lokal
+
+Untuk menjalankan proyek di lokal, pastikan Anda memiliki prasyarat sebagai
+berikut ini:
+
+- `Node.js`
+- `npm` dengan versi >= 12.0.0
+
+## Menjalankan Proyek di Lokal
+
+Untuk menjalankan proyek di lokal, lakukan hal ini:
+
+1. _Clone_ sumber kode
+
+```bash
+git clone https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2021/DD/justika-pengembangan-platform-untuk-umkm/justika-umkm-legal-frontend.git
+```
+
+2. Masuk ke direktori sumber kode
+
+```bash
+cd justika-umkm-legal-frontend
+```
+
+3. Lakukan instalasi proyek
+
+```bash
+npm install
+```
+
+4. Jalankan program
+
+```bash
+npm start
+```
+
+Aplikasi web dapat dibuka dengan port 3000
+
+## Menjalankan functional test di lokal
+
+Untuk menjalankan test beserta coverage di lokal, lakukan hal berikut ini:
+
+```bash
+npm run test:coverage
+```
+
+## Menjalankan Integration test di lokal
+
+Untuk menjalankan integration test di lokal, lakukan hal berikut ini:
+
+```bash
+npm run cypress:open
+```
+
+Anda juga perlu menyalakan program, jalankan perintah ini:
+
+```bash
+npm start
+```

cypress/fixtures/riwayat.json

+{
+  "highest_count": 10,
+  "overall_total": 14,
+  "next": "http://localhost:8000/api/v1/riwayat/?limit=3&offset=3",
+  "previous": null,
+  "results": [
+    {
+      "id": 1,
+      "nama_usaha": "PT. Cimol Sejahtera",
+      "status_entitas": "PT",
+      "alamat": "JL. Kencana",
+      "barang_jasa": "Cimol",
+      "jumlah_karyawan": "11-50",
+      "kode_kbli": "01234",
+      "catatan": "Test Catatan",
+      "user": 1,
+      "status": "Waiting for Payment",
+      "type": "Iumk"
+    },
+    {
+      "id": 2,
+      "nama_usaha": "CV. Mie Sejahtera",
+      "status_entitas": "CV",
+      "alamat": "JL. Mawar",
+      "barang_jasa": "Mie",
+      "jumlah_karyawan": "11-50",
+      "kode_kbli": "56789",
+      "catatan": "Test Catatan",
+      "user": 1,
+      "status": "Waiting for Process",
+      "type": "Iumk"
+    },
+    {
+      "id": 1,
+      "nama_usaha": "PT. Cimol Sejahtera",
+      "status_entitas": "PT",
+      "alamat": "JL. Kencana",
+      "barang_jasa": "Cimol",
+      "jumlah_karyawan": "11-50",
+      "kode_kbli": "01234",
+      "catatan": "Test Catatan",
+      "user": 1,
+      "status": "Clarification",
+      "type": "PTModel"
+    },
+    {
+      "id": 2,
+      "nama_usaha": "CV. Mie Sejahtera",
+      "status_entitas": "CV",
+      "alamat": "JL. Mawar",
+      "barang_jasa": "Mie",
+      "jumlah_karyawan": "11-50",
+      "kode_kbli": "56789",
+      "catatan": "Test Catatan",
+      "user": 1,
+      "status": "Done",
+      "type": "PTModel"
+    }
+  ]
+}

cypress/integration/riwayat.spec.js

+import '../support/commands'
+
+describe('Riwayat Page', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '**/api/v1/riwayat/?status=null', {
+      fixture: 'riwayat.json',
+    }).as('getAllRiwayat')
+    cy.login()
+    cy.visit('/riwayat')
+  })
+
+  it('should have correct response body', () => {
+    cy.wait('@getAllRiwayat')
+      .its('response')
+      .should('have.property', 'body')
+      .then((body) => {
+        expect(body).to.have.property('highest_count')
+        expect(body).to.have.property('overall_total')
+        expect(body).to.have.property('next')
+        expect(body).to.have.property('previous')
+        expect(body).to.have.property('results')
+      })
+  })
+})

src/App.js

@@ -4,6 +4,7 @@ import Login from './components/Autentikasi/Login'
 import FormPendirianPT from './pages/FormPendirianPT'
 import FormIUMK from './pages/formiumk'
 import {Router} from '@reach/router'
+import Riwayat from './pages/riwayat'
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
         <Login path="/login" />
         <FormPendirianPT path="/form-pt" />
         <FormIUMK path="/form-iumk" />
+        <Riwayat path="/riwayat" />
       </Router>
     </div>
   )

src/assets/add-icon.svg

+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="33" cy="33" r="33" fill="#F9F9F9"/>
+<line x1="33.5" y1="19" x2="33.5" y2="49" stroke="#2B50CB" stroke-width="4"/>
+<line x1="48" y1="34.5" x2="18" y2="34.5" stroke="#2B50CB" stroke-width="4"/>
+</svg>

src/components/Autentikasi/Login.js

@@ -112,7 +112,8 @@ const Login = () => {
                   Email
                 </label>
                 <input
-                  className="px-4 py-2.5 border-2 border-grey rounded-lg"
+                  className={`px-4 py-2.5 border-2 border-grey rounded-lg
+                  ${errors.email ? `bg-pink-100` : ``}`}
                   type="text"
                   id="email"
                   required
@@ -163,7 +164,8 @@ const Login = () => {
                 </label>
                 <div className="pr-2 border-2 border-grey flex flex-row bg-white rounded-lg">
                   <input
-                    className="w-11/12 px-4 py-2.5 flex-row rounded-lg"
+                    className={`w-11/12 px-4 py-2.5 flex-row rounded-lg
+                    ${errors.password ? `bg-pink-100` : ``}`}
                     type={maskPassword ? 'password' : 'text'}
                     data-testid="password-input"
                     id="password"
@@ -223,7 +225,21 @@ const Login = () => {
           </div>
         </div>
       )}
-      <Toaster />
+      <Toaster
+        toastOptions={{
+          icon: '',
+          style: {
+            background: '#FF3333',
+            borderRadius: '0',
+            padding: '21px',
+            color: 'white',
+            margin: '0',
+            width: '100vw',
+            fontFamily: 'Lato',
+            fontWeight: '700',
+          },
+        }}
+      />
     </div>
   )
 }

src/components/Card/CardPesanan.js

+import React from 'react'
+import PropTypes from 'prop-types'
+
+const CardPesanan = ({kode, type, nama, harga, waktu, status, index}) => {
+  return (
+    <div
+      className="flex flex-col justify-between bg-white shadow-lg mt-6 px-4 lg:px-6 py-3 rounded-lg mr-4 w-96"
+      data-testid={`card-riwayat-${index}`}
+    >
+      <div>
+        <div className="mb-3">
+          <p className="reguler-text">{kode}</p>
+          <p className="heading-3">
+            {type == 'PTModel' ? 'Pendirian' : 'Perizinan IUMK'} {nama}
+          </p>
+        </div>
+      </div>
+
+      <div className="items-end">
+        <div className="flex flex-row justify-between">
+          <div>
+            <p className="medium-text">Harga</p>
+            <p className="medium-text font-bold">{harga}</p>
+          </div>
+          <div>
+            <p className="medium-text">Estimasi Pengerjaan</p>
+            <p className="medium-text font-bold">
+              {status == 'Done' ? '-' : `${waktu} hari`}
+            </p>
+          </div>
+        </div>
+        <div className="mt-8">
+          <p
+            className={`small-text font-bold items-end text-center float-right rounded-2xl w-28 py-2
+                                    ${
+                                      status == 'Clarification'
+                                        ? `bg-yellow-100`
+                                        : status == 'Waiting for Payment'
+                                        ? `bg-blue-200`
+                                        : status == 'Working Process'
+                                        ? `bg-yellow-400`
+                                        : `bg-gray-300`
+                                    }`}
+          >
+            {status}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+CardPesanan.propTypes = {
+  kode: PropTypes.number,
+  type: PropTypes.string,
+  nama: PropTypes.string,
+  harga: PropTypes.string,
+  waktu: PropTypes.string,
+  status: PropTypes.string,
+  index: PropTypes.number,
+}
+
+export default CardPesanan

src/components/Card/CardPesanan.test.js

+import {render, screen} from '@testing-library/react'
+import CardPesanan from './CardPesanan'
+
+let data = {
+  kode: 1,
+  nama: 'PT ABC',
+  harga: 'Rp8,500,000',
+  waktu: '19',
+  status: 'Waiting for Payment',
+}
+
+test('renders CardPesanan Element with PTModel type', () => {
+  render(
+    <CardPesanan
+      kode={data.kode}
+      type={'PTModel'}
+      nama={data.nama}
+      harga={data.harga}
+      waktu={data.waktu}
+      status={data.status}
+    />,
+  )
+
+  const kodeElement = screen.getByText('1')
+  const typeElement = screen.getByText(/Pendirian/i)
+  const namaElement = screen.getByText(/PT ABC/i)
+  const hargaElement = screen.getByText(/Rp8,500,000/i)
+  const waktuElement = screen.getByText(/19 hari/i)
+  const statusElement = screen.getByText(/Waiting for Payment/i)
+
+  expect(kodeElement).toBeInTheDocument()
+  expect(typeElement).toBeInTheDocument()
+  expect(namaElement).toBeInTheDocument()
+  expect(hargaElement).toBeInTheDocument()
+  expect(waktuElement).toBeInTheDocument()
+  expect(statusElement).toBeInTheDocument()
+})
+
+test('renders CardPesanan with Iumk type', () => {
+  render(
+    <CardPesanan
+      kode={data.kode}
+      type={'Iumk'}
+      nama={data.nama}
+      harga={data.harga}
+      waktu={data.waktu}
+      status={data.status}
+    />,
+  )
+
+  const typeElement = screen.getByText(/Perizinan IUMK/i)
+
+  expect(typeElement).toBeInTheDocument()
+})
+
+test('renders CardPesanan with Clarification status', () => {
+  render(
+    <CardPesanan
+      kode={data.kode}
+      type={'Iumk'}
+      nama={data.nama}
+      harga={data.harga}
+      waktu={data.waktu}
+      status={'Clarification'}
+    />,
+  )
+
+  const statusElement = screen.getByText(/Clarification/i)
+
+  expect(statusElement).toBeInTheDocument()
+})
+
+test('renders CardPesanan with Working Process status', () => {
+  render(
+    <CardPesanan
+      kode={data.kode}
+      type={'Iumk'}
+      nama={data.nama}
+      harga={data.harga}
+      waktu={data.waktu}
+      status={'Working Process'}
+    />,
+  )
+
+  const statusElement = screen.getByText(/Working Process/i)
+
+  expect(statusElement).toBeInTheDocument()
+})
+
+test('renders CardPesanan with Done status', () => {
+  render(
+    <CardPesanan
+      kode={data.kode}
+      type={'Iumk'}
+      nama={data.nama}
+      harga={data.harga}
+      waktu={data.waktu}
+      status={'Done'}
+    />,
+  )
+
+  const statusElement = screen.getByText(/Done/i)
+
+  expect(statusElement).toBeInTheDocument()
+})

src/components/Card/CardProyekBaru.js

+import React, {useState} from 'react'
+import AddIcon from '../../assets/add-icon.svg'
+import ModalCreatePB from '../Modal/ModalCreatePB'
+
+const CardProyekBaru = () => {
+  const [show, setShow] = useState(false)
+  const showModal = () => {
+    setShow(true)
+  }
+  const hideModal = () => {
+    setShow(false)
+  }
+
+  return (
+    <div
+      className="bg-grey flex flex-col justify-between items-center mt-6 px-4 lg:px-6 py-3 rounded-lg mr-4 w-96"
+      data-testid="cardpb"
+    >
+      <ModalCreatePB show={show} handleClose={hideModal} />
+      <button onClick={showModal} data-testid="cardpb-button">
+        <img
+          className="flex flex-row items-end justify-between pt-4"
+          data-testid="cardpb-add-icon"
+          src={AddIcon}
+        ></img>
+      </button>
+      <p
+        className="heading-3 text-popblue pt-3 text-center pb-4"
+        data-testid="cardpb-text"
+      >
+        Proyek Baru
+      </p>
+    </div>
+  )
+}
+export default CardProyekBaru

src/components/Card/CardProyekBaru.test.js

+import {render, screen, fireEvent} from '@testing-library/react'
+import CardProyekBaru from './CardProyekBaru'
+
+test('renders Card Proyek Baru Element', () => {
+  render(<CardProyekBaru />)
+
+  expect(screen.getByTestId('cardpb-add-icon')).toBeInTheDocument()
+  expect(screen.getByTestId('cardpb-text')).toBeInTheDocument()
+})
+
+test('show Modal Create PB', async () => {
+  render(<CardProyekBaru />)
+
+  const addButton = screen.getByTestId('cardpb-button')
+  fireEvent.click(addButton)
+
+  const showModal = screen.getByTestId('modalpb')
+  expect(showModal).toBeVisible()
+})
+
+test('close Modal Create PB', async () => {
+  render(<CardProyekBaru />)
+
+  const addButton = screen.getByTestId('cardpb-button')
+  fireEvent.click(addButton)
+
+  const closeButton = screen.getByTestId('modalpb-close')
+  fireEvent.click(closeButton)
+
+  const cardPB = screen.getByTestId('cardpb')
+  expect(cardPB).toBeVisible()
+})

src/components/FormIUMK/FormIUMK1.js

@@ -11,7 +11,7 @@ const FormIUMK1 = ({
 }) => {
   return (
     <form
-      className="px-4"
+      className="px-0 md:px-4"
       data-testid="form-iumk-1"
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -37,7 +37,8 @@ const FormIUMK1 = ({
           Nama atau Calon Nama Usaha<span className="text-popred">*</span>
         </label>
         <input
-          className="px-2 py-2.5 w-full border-2 border-gray-200 rounded"
+          className={`px-2 py-2.5 w-full border-2 border-gray-200 rounded
+          ${errors.nama ? `bg-pink-100` : ``}`}
           type="text"
           id="nama"
           data-testid="form-1-nama-field"
@@ -146,7 +147,8 @@ const FormIUMK1 = ({
           Alamat<span className="text-popred">*</span>
         </label>
         <input
-          className="px-2 py-2.5 w-full border-2 border-gray-200 rounded"
+          className={`px-2 py-2.5 w-full border-2 border-gray-200 rounded
+          ${errors.alamat ? `bg-pink-100` : ``}`}
           type="text"
           id="alamat"
           data-testid="form-1-alamat-field"
@@ -171,7 +173,8 @@ const FormIUMK1 = ({
           <span className="text-popred">*</span>
         </label>
         <input
-          className="px-2 py-2.5 w-full border-2 border-gray-200 rounded"
+          className={`px-2 py-2.5 w-full border-2 border-gray-200 rounded
+          ${errors.barangJasa ? `bg-pink-100` : ``}`}
           type="text"
           id="barang-jasa"
           data-testid="form-1-barang-jasa-field"

src/components/FormIUMK/FormIUMK2.js

@@ -12,7 +12,7 @@ const FormIUMK2 = ({
 }) => {
   return (
     <form
-      className="bg-white flex flex-col px-4"
+      className="bg-white flex flex-col px-0 md:px-4"
       data-testid="form-iumk-2"
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -53,7 +53,8 @@ const FormIUMK2 = ({
             <span className="medium-text text-black ml-1">(opsional)</span>
           </label>
           <input
-            className="md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded"
+            className={`md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded
+            ${errors.kbli ? `bg-pink-100` : ``}`}
             placeholder="Tulis Kode KBLI disini"
             id="kode-klbi"
             name="kbli"

src/components/FormIUMK/FormIUMK3.js

@@ -36,7 +36,7 @@ const FormIUMK3 = ({data, onSubmit, handleSubmit, konstan, setValue}) => {
   return (
     <div>
       <form
-        className="px-4"
+        className="px-0 md:px-4"
         data-testid="form-iumk-3"
         onSubmit={handleSubmit(onSubmit)}
       >

src/components/FormIUMK/FormIUMK3.test.js

@@ -26,7 +26,12 @@ test('renders FormIUMK3 Element', () => {
 
   const store = makeTestStore()
   testRender(
-    <FormIUMK3 data={data} konstan={konstan} handleSubmit={handleSubmit} onSubmit={onSubmit} />,
+    <FormIUMK3
+      data={data}
+      konstan={konstan}
+      handleSubmit={handleSubmit}
+      onSubmit={onSubmit}
+    />,
     {store},
   )
   expect(screen.getByTestId('form-iumk-3')).toBeInTheDocument()
@@ -85,7 +90,12 @@ test('renders FormIUMK3 Element with catatan', () => {
   }
   const store = makeTestStore()
   testRender(
-    <FormIUMK3 data={data} konstan={konstan} handleSubmit={handleSubmit} onSubmit={onSubmit} />,
+    <FormIUMK3
+      data={data}
+      konstan={konstan}
+      handleSubmit={handleSubmit}
+      onSubmit={onSubmit}
+    />,
     {store},
   )
   expect(screen.getByTestId('form-iumk-3')).toBeInTheDocument()

src/components/Modal/ModalCreatePB.js

+import React from 'react'
+import PTIcon from '../../assets/pt.svg'
+import UMKMIcon from '../../assets/umkm.svg'
+import CloseIcon from '../../assets/x.svg'
+import PropTypes from 'prop-types'
+import {Link} from '@reach/router'
+
+const ModalCreatePB = ({handleClose, show, children}) => {
+  const showHideModalCreatePB = show
+    ? 'fixed top-0 left-0 w-full h-full bg-black bg-opacity-60 block z-50'
+    : 'fixed top-0 left-0 w-full h-full bg-black bg-opacity-60 hidden'
+
+  return (
+    <div className={showHideModalCreatePB} data-testid="modalpb">
+      <section className="fixed transform -translate-y-2/4 -translate-x-2/4 top-2/4 left-2/4">
+        {children}
+        <div className=" divide-y flex flex-col bg-white items-center rounded-xl pt-7 pb-8 px-8 shadow-lg ">
+          <div className="grid grid-cols-3 flex flex-row pb-4">
+            <div></div>
+            <p className="heading-2" data-testid="modalpb-title">
+              Proyek Baru
+            </p>
+            <button
+              className="flex place-self-end"
+              data-testid="modalpb-close"
+              type="button"
+              onClick={handleClose}
+            >
+              <img src={CloseIcon}></img>
+            </button>