# Pembaharuan Menu Produk pada SMH - \[02 MAY 2024]

Halo, Kawan Simpli!\
\
Ada kabar yang perlu kamu tahu, nih!\
Kini, terdapat pembaharuan menu Produk pada SMH dengan perubahan tampilan menjadi lebih lengkap dan jelas untuk memudahkan user dalam memaksimalkan pendataan produk.

> <mark style="color:green;">**What's Changed?**</mark>
>
> 1. <mark style="color:purple;">**Daftar Produk**</mark>
>
>    Terdapat penambahan data dan informasi pada menu Daftar Produk seperti filter dan kolom tabel yang lebih lengkap.
>
> 2. <mark style="color:purple;">**Impor dan Ekspor**</mark>\
>    Terdapat pembaharuan template.
>
> 3. <mark style="color:purple;">**Buat dan Ubah Produk**</mark>\
>    Terdapat penambahan gambar produk, input merek, input supplier, dan juga input tinggi, panjang, lebar, dan berat yang sudah support angka desimal serta pembaharuan pada validasi form di bagian unit dan penyesuaian tampilan popup tambah produk baru dari menu Sales Order.
>
> 4. <mark style="color:purple;">**Detail Produk**</mark>\
>    Terdapat pembaharuan pada jumlah informasi yang ditampilkan (seperti Brand dan Supplier) dan juga penambahan gambar produk yang bisa klik untuk memunculkan popup gambar.
>
> <mark style="color:blue;">**What's New?**</mark>
>
> 5. Saat ini telah support tampilan pada mobile.

<table data-view="cards"><thead><tr><th></th><th align="center"></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td></td><td align="center"><strong>Daftar Produk</strong></td><td></td><td><a href="#id-1.-daftar-produk">#id-1.-daftar-produk</a></td></tr><tr><td></td><td align="center"><strong>Impor dan Ekspor</strong></td><td></td><td><a href="#id-2.-impor-dan-ekspor">#id-2.-impor-dan-ekspor</a></td></tr><tr><td></td><td align="center"><strong>Buat dan Ubah Produk</strong></td><td></td><td><a href="#id-3.-buat-dan-ubah-produk">#id-3.-buat-dan-ubah-produk</a></td></tr><tr><td></td><td align="center"><strong>Detail Produk</strong></td><td></td><td><a href="#id-4.-detail-produk">#id-4.-detail-produk</a></td></tr><tr><td></td><td align="center"><strong>Tampilan Mobile</strong></td><td></td><td><a href="#id-5.-tampilan-mobile">#id-5.-tampilan-mobile</a></td></tr></tbody></table>

## 1. Daftar Produk

Terdapat penambahan data dan informasi pada menu Daftar Produk seperti filter dan kolom tabel yang lebih lengkap.

* <mark style="color:blue;background-color:blue;">**Filter**</mark>
  * <mark style="color:red;">**Sebelum**</mark> : filter hanya terdiri dari filter divisi, kategori, aktif, dan pajak. Menu filter jg menjadi 1 button tersendiri.<br>

    <figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2F1RkyfZZ39mvicngSWbAF%2Fimage.png?alt=media&#x26;token=441aa156-7120-4820-84e6-34e9a25b81e6" alt=""><figcaption></figcaption></figure>
  * <mark style="color:green;">**Sesudah**</mark>: filter terdiri dari filter brand, divisi, kategori, supplier, pajak dan status. <br>

    <figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FS0vhZLoE7sUVYybXcgi5%2Fimage.png?alt=media&#x26;token=b3f580d7-b2b4-4cba-a00f-d4657ebb0a7a" alt=""><figcaption></figcaption></figure>
* <mark style="color:blue;background-color:blue;">**Kolom Tabel**</mark>
  * <mark style="color:red;">**Sebelum**</mark>**:** kolom tabel terdiri dari nomor, kode, nama, partner id, harga jual, divisi, pajak, status active, dan action untuk ubah dan hapus.

    <figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FWyJOTXVNczIniQ6JZwST%2Fimage.png?alt=media&#x26;token=5d2b06d2-2a5c-45f2-9498-44d946ac986b" alt=""><figcaption></figcaption></figure>

  * <mark style="color:green;">**Sesudah**</mark> : kolom tabel terdiri dari nomor, kode, partner id, harga jual, kategori, supplier, unit name (terkecil), pajak dan action untuk modifikasi kolom tabel jika ada yang ingin ditambah atau disembunyikan.&#x20;

    <figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2F8qxZu7I1biYDaSiPCpUI%2Fimage.png?alt=media&#x26;token=d4f5698e-c927-49ed-9085-63a0cc7657af" alt=""><figcaption></figcaption></figure>

    User dapat memodifikasi kolom sesuai data yang telah disediakan seperti: kode, produk, partner id, harga jual, brand, divisi, kategori, supplier, unit, pajak, dan status.![](https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FZmA5l25rm3Kyzk3relml%2Fimage.png?alt=media\&token=3ee491de-526a-4c8b-b58c-a38b65218aea)

## 2. Impor dan Ekspor

Pada bagian impor dan ekspor terdapat perubahan berupa data yang dapat diimpor dan ekspor, sekaligus contoh template import yang sudah diupdate.

* <mark style="color:red;">**Sebelum**</mark> : \
  \- tombol impor dan ekspor berada pada button Pengaturan dan terpisah seperti Ekspor ke csv, Ekspor ke Excel, Ekspor PriceList, Impor Data Baru, Impor Update Data.<br>

  <figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FR5DpERkrhiu7HvEqsKD9%2Fimage.png?alt=media&#x26;token=bfe88107-fd1a-4282-a13a-f617a365d3a1" alt=""><figcaption></figcaption></figure>

  \
  \- Pop up saat impor, template dapat diunduh dengan klik **Download**.

<figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FAJRtaaEBGkq7ACbWOzgT%2Fimage.png?alt=media&#x26;token=dd22dd7e-88a4-4be8-85e5-2853d21e3ba5" alt="" width="375"><figcaption></figcaption></figure>

* <mark style="color:green;">**Sesudah**</mark> : \
  \- tombol impor dan ekspor telah berada pada daftar produk dan berdiri sendiri. Tombil Ekspor telah disediakan pilihan CSV atau Excel.<br>

  <figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FxoGdq4yJQnwh80b2ZOUy%2Fimage.png?alt=media&#x26;token=c0742ad2-65cc-42eb-be34-f9ecccc5ebc2" alt=""><figcaption></figcaption></figure>

  \
  \-  pop up saat impor, template dapat diunduh pada tiap tab yang telah disediakan seperti Tab Impor Data Baru, dan Impor Update Data pilih **Unduh templat kosong disini.**<br>

<figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2F77MhfAlLUg9hbcAvwgh8%2Fimage.png?alt=media&#x26;token=2744e510-beee-4882-9c9a-4780a0c9e4da" alt="" width="375"><figcaption></figcaption></figure>

## 3. Buat dan Ubah Produk

Terdapat penambahan gambar produk, input merek, input supplier, dan juga input tinggi, panjang, lebar, dan berat yang sudah support angka desimal serta pembaharuan pada validasi form di bagian unit.

* <mark style="color:red;">**Sebelum**</mark> : data produk yang dapat diisi adalah kode, status aktif, nama, divisi, kategori, deskripsi, panjang, lebar, tinggi, berat, harga beli, harga jual, pajak, dan detail unit.

<figure><img src="https://lh7-us.googleusercontent.com/YgkyjrhL_dgdW0p7nHM3tDXq9LFSboUctzv-W_Zr6nukF-x7YTSH-wlQJxLtD0et2HRl9msK7NEFL8d3sDICMw5V0dKUFVlRsF8MIvznad5SlnP4uQag9VeYidpD2cV_3PfeRl6pGPhmvFqr8WwmjCc" alt=""><figcaption></figcaption></figure>

* <mark style="color:green;">**Sesudah**</mark> : data produk yang dapat diisi adalah gambar produk, kode, status, nama, deskripsi, panjang, lebar, tinggi, berat, brand, divisi, kategori, supplier, harga beli, harga jual, pajak, dan detail unit.<br>

  <figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FzivGKIcYL3XeRywbAfwr%2Fimage.png?alt=media&#x26;token=3653f9c6-ef66-4f0b-bb73-fb9213f388ca" alt=""><figcaption></figcaption></figure>

Selain itu, tampilan pada popup tambah produk di menu Sales Order juga ikut berubah menyesuaikan perubahan yang terjadi di produk.

* <mark style="color:red;">**Sebelum**</mark> :&#x20;

  <figure><img src="https://lh7-us.googleusercontent.com/NVUbm4ePw1jQ-fLMsvbSFBQn82jFvtk3y_fL4-kEm5AVhgLGkoByy71tgtQyLL_PZIfIU9UzFo08shbKlOHFctkx7r8ObGYfcetQWMtuxOxWAaii3P4tnY1U3y1H-yWmt-VuYbruNY1jM8tjSExZugQ" alt="" width="375"><figcaption></figcaption></figure>

* <mark style="color:green;">**Sesudah**</mark>:&#x20;

  <figure><img src="https://lh7-us.googleusercontent.com/GiYF1c2H-u6oS0KasYKXSMMAqcYW5UB2apPcOed_apEs5HWJR6I8dCTElhyBYAl7zlMy9TO2xUluub5Nd8Z_EhMxfL9ft7B3Qa3Zbho9MY0VbaFOzNgrmt_rF2gdz_-QifzlzhEgqls0GwCQHb8Rpjo" alt="" width="375"><figcaption></figcaption></figure>

## 4. Detail Produk

Terdapat pembaharuan pada jumlah informasi yang ditampilkan (seperti Brand dan Supplier) dan juga penambahan gambar produk yang bisa klik untuk memunculkan popup gambar.

* <mark style="color:red;">**Sebelum**</mark> :&#x20;

  <figure><img src="https://lh7-us.googleusercontent.com/5gUocJRHLylC_zsEgfqV6A7YIE9TCv698RGeAVeQwf2wlUD3mj0Ti9kNu-YZDWn8jP6TiCNNALPFyhX2V76RGl6G5wG2m1vNge18RBUz51A9rcz6rZ2KSdeXLDh26EJFQP4OGIHIyjcId4wmXJspON4" alt=""><figcaption></figcaption></figure>

* <mark style="color:green;">**Sesudah**</mark> : <br>

  <figure><img src="https://lh7-us.googleusercontent.com/rU4BoozT_AIcVmjY5X5tHarXYVXxe8WLSJN0rKBoZFKv0JnIa0Ga07VvtS8P-_ccN0X4kuxs77_BcKkcxac6CD0_1PuzSiv7uwLwAHSuzG0NPr1lNRkvG4r7_foCSPg3XIB_Qhm_fJ5-E8UgLSYmH2g" alt=""><figcaption></figcaption></figure>

## 5. Tampilan Mobile

Saat ini tampilan web SMH telah disesuaikan dengan mode mobile seperti contoh berikut.&#x20;

![](https://lh7-us.googleusercontent.com/02Kt4fCi-TIIlaXB7Pi0CvP530Nfu9tHp1Ot-2jFigIdmUuohER_zsN21XX-uiVmi7mUEJAP79P_o6FQHEqAtUogy8V2DVbOoygrUa9aVHNn6uSvEFK4UmBwWO22h66B8Is6qygY2SplkJul4oCn9JE)

***

Selamat mencoba, Kawan Simpli!

<figure><img src="https://2844923736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOSQCfcS0Gg4MdBScldLm%2Fuploads%2FsycL4zk4RPiEqts9BYRx%2Fimage.png?alt=media&#x26;token=3c957576-f680-4c88-99b7-4265372d0d1a" alt="" width="164"><figcaption><p>Salam Hangat<br>- Androsim -</p></figcaption></figure>
