buatkan tampilan homepage dan fetching API

Fitur Sidebar:

1. Tambahkan tombol '+' untuk membuat board baru. Saat diklik, muncul form untuk mengisi nama board.
2. Setelah nama diisi dan disimpan, board baru akan muncul dengan nama tersebut.
3. Setiap board memiliki dua tabel: "TODO" dan "COMPLETED".

Tabel TODO:

1. Fitur "Add Item":
o Saat tombol "Add Item" diklik, muncul form untuk mengisi nama task.
o Form ini harus mengirimkan 'name_task' sebagai form-data ke endpoint '/task'.
o Setelah task dibuat, tambahkan baris baru di tabel TODO.
o Simpan 'user_email' dari response JSON untuk penggunaan selanjutnya.
2. Kolom "Person":
o Terdapat tombol '+' di kolom ini.
o Saat diklik, muncul form dengan tiga field:

a. Nama email (harus dalam format email yang valid)

b. Role (dropdown: manager, employee)

c. Edit role (opsional, untuk mengubah tampilan nama role)

o Setelah disimpan, icon person muncul di kolom.
o Hover pada icon menampilkan detail email dan role.
o Catatan: Nilai 'edit role' hanya untuk tampilan, data yang dikirim ke API tetap menggunakan role default.
3. Penambahan Person Otomatis:
o Untuk 'user_email' yang disimpan sebelumnya, ketika menekan add item dan mengisi nama task, dan muncul baris kolom di table TODO, pada kolom person otomatis terdapat sebuah icon, dengan deskripsi user_email tersebut dan role nya owner.

4. Tombol Save:
o Tambahkan tombol "Save" di setiap baris.
o Saat diklik, kirim data sebagai multipart/form-data dengan metode PUT ke 'http://127.0.0.1:8080/task/<task_id>'.
5. Form-data untuk setiap kolom:

a. Name Task: name_task

b. Planning Description: planning_description

c. Planning File: planning_file

d. Planning Due Date: planning_due_date

e. Planning Status: planning_status (nilai: Approved, Not_Approved)

f. Priority: priority (nilai: Low, Medium, High)

g. Project File: project_file h. Project Comment: project_comment

i. Project Status: project_status (nilai: Done, Working, Undone)

j. Project Due Date: project_due_date Untuk kolom Person:

o Jika role manager: kirim form-data 'manager' dengan nilai nama_email.
o Jika role employee: kirim form-data 'employee' dengan nilai nama_email.
6. Validasi Akses:

a. Kolom yang hanya bisa diubah oleh owner:

o Planning Description, Planning Due Date, Planning Status
o Project Status, Project Due Date
o Penambahan person dengan role manager

b. Kolom yang hanya bisa diubah oleh manager:

o Planning File, Priority
o Penambahan person dengan role employee

c. Kolom yang hanya bisa diubah oleh employee:

o Project File, Project Comment

Jika user tidak memiliki akses, tangkap error "Only for owner" (jika kolom untuk owner di isi oleh manager atau employe), "Only for manager" (jika kolom untuk manager di isi oleh owner atau employee, "Only for employee" (jika kolom untuk employee di isi oleh owner atau manager. dan tampilkan sebagai alert.

7. Fitur Upload File:
o Implementasikan upload multiple file untuk Planning File dan Project File.
o Kirim file satu per satu ke backend meskipun ada banyak file.
o Jika file sudah ada, tangkap error "File already exist" dan tampilkan sebagai alert.
o Tampilkan nama file dari response (planning_file.file_name atau project_file.file_name).
o URL file dari response (planning_file.file_url atau project_file.file_url).
8. Dropdown untuk Status dan Priority:
o Planning Status: Approved, NotApproved
o Project Status: Done, Working, Undone
o Priority: Low, Medium, High
9. Logika Status:
o Jika Planning Status diubah menjadi "Approved", otomatis set Project Status menjadi "Working".
o Jika Planning Status diubah menjadi "Not Approved", otomatis set Project Status menjadi "Undone".
10. Manajemen Akses Board:
o Saat menambahkan person sebagai manager atau employee, berikan akses ke board tersebut.
o Simpan board_id untuk setiap user yang ditambahkan (bisa melalui cookie, atau local storage).
o Ketika user login, gunakan board_id untuk melakukan request ke '/board/<board_id>'.
o Request ini akan menampilkan board dan tasks yang relevan untuk user tersebut.



11. Fitur Delete untuk Person dan File: a. Tombol Delete:
• Tambahkan tombol delete pada setiap icon di kolom person.
• Tambahkan tombol delete untuk setiap file di kolom Planning File dan Project File.
b. Endpoint Delete:
• Delete Manager: DELETE http://127.0.0.1:8080/task/<task_id>/manager/<manager_id>
• Delete Employee: DELETE http://127.0.0.1:8080/task/<task_id>/employee/<employee_id>
• Delete Planning File: DELETE http://127.0.0.1:8080/task/<task_id>/planning_file/<file_id>
• Delete Project File: DELETE http://127.0.0.1:8080/task/<task_id>/project_file/<file_id>
c. Aturan Delete:
• Manager: Hanya bisa dihapus oleh owner. Jika dihapus oleh selain owner, tampilkan error "Only for owner".
• Employee: Hanya bisa dihapus oleh manager. Jika dihapus oleh selain manager, tampilkan error "Only for manager".
• Planning File: Hanya bisa dihapus oleh manager. Jika dihapus oleh selain manager, tampilkan error "Only for manager".
• Project File: Hanya bisa dihapus oleh employee. Jika dihapus oleh selain employee, tampilkan error "Only for employee".
d. Efek Domino Penghapusan:
• Jika semua manager dihapus:
 Semua employee akan terhapus secara otomatis.
 Semua planning file akan terhapus.
 Semua project file akan terhapus.
• Jika semua employee dihapus:
 Semua project file akan terhapus secara otomatis

Tabel COMPLETED:

1. Perpindahan Task:
o Jika Planning Status "Approved" dan Project Status "Done", pindahkan baris dari TODO ke COMPLETED.
2. Tombol "Move to TODO":
o Tambahkan tombol ini di setiap baris tabel COMPLETED.
o Saat diklik, pindahkan data kembali ke tabel TODO.
o Otomatis ubah Planning Status menjadi "Not Approved" dan Project Status menjadi "Undone".