MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feat/backoffice-login

Browse Source
This commit is contained in:
Hafid Nur
2025-04-03 15:45:23 +07:00
parent fe1928e8ef f8f796e071
commit f87dc4c782
9 changed files with 89 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+4
View File
@@ -46,4 +46,8 @@ vitest.config.*.timestamp*
storybook-static storybook-static
.env .env
.env.prod
.env.develop
.env.staging
apps/backoffice/src/app/accounts/_components/modal-edit-account.tsx
+5 -5
View File
@@ -1,5 +1,5 @@
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules'; import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
import { useState } from 'react'; import { useState } from 'react';
interface IModalEditAccount { interface IModalEditAccount {
@@ -63,7 +63,7 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
</Modal.Header> </Modal.Header>
<Modal.Content className="flex flex-col gap-8"> <Modal.Content className="flex flex-col gap-8">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<InputForm <InputField
label="Nama Lengkap" label="Nama Lengkap"
type="text" type="text"
placeholder="Masukkan Nama Lengkap" placeholder="Masukkan Nama Lengkap"
@@ -72,7 +72,7 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
size="lg" size="lg"
className="w-full" className="w-full"
/> />
<InputForm <InputField
label="Email" label="Email"
type="text" type="text"
placeholder="Masukkan Email" placeholder="Masukkan Email"
@@ -81,7 +81,7 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
size="lg" size="lg"
className="w-full" className="w-full"
/> />
<InputForm <InputField
label="Nomor Telepon" label="Nomor Telepon"
type="text" type="text"
placeholder="Masukkan Nomor Telepon" placeholder="Masukkan Nomor Telepon"
@@ -90,7 +90,7 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
size="lg" size="lg"
className="w-full" className="w-full"
/> />
<InputForm <InputField
label="Alamat" label="Alamat"
type="text" type="text"
placeholder="Masukkan Alamat" placeholder="Masukkan Alamat"
apps/backoffice/src/app/dashboard/_components/modal-add-item.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules'; import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
interface IModalAddItem { interface IModalAddItem {
isOpen: boolean; isOpen: boolean;
@@ -58,21 +58,21 @@ const StepOne = ({ nextStep }: IStepOneProps) => (
</Modal.Header> </Modal.Header>
<Modal.Content className="flex flex-col gap-8"> <Modal.Content className="flex flex-col gap-8">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<InputForm <InputField
label="Nama Hadiah" label="Nama Hadiah"
type="text" type="text"
placeholder="Masukkan Nama Hadiah" placeholder="Masukkan Nama Hadiah"
size="lg" size="lg"
className="w-full" className="w-full"
/> />
<InputForm <InputField
label="Chance Rate" label="Chance Rate"
type="text" type="text"
placeholder="Masukkan Chance Rate" placeholder="Masukkan Chance Rate"
size="lg" size="lg"
className="w-full" className="w-full"
/> />
<InputForm <InputField
label="Foto Barang" label="Foto Barang"
type="file" type="file"
placeholder=".jpg, .jpeg, atau .png" placeholder=".jpg, .jpeg, atau .png"
apps/backoffice/src/app/dashboard/_components/modal-edit-item.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules'; import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
interface IModalEditItem { interface IModalEditItem {
isOpen: boolean; isOpen: boolean;
@@ -58,21 +58,21 @@ const StepOne = ({ nextStep }: IStepOneProps) => (
</Modal.Header> </Modal.Header>
<Modal.Content className="flex flex-col gap-8"> <Modal.Content className="flex flex-col gap-8">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<InputForm <InputField
label="Nama Hadiah" label="Nama Hadiah"
type="text" type="text"
placeholder="Masukkan Nama Hadiah" placeholder="Masukkan Nama Hadiah"
size="lg" size="lg"
className="w-full" className="w-full"
/> />
<InputForm <InputField
label="Chance Rate" label="Chance Rate"
type="text" type="text"
placeholder="Masukkan Chance Rate" placeholder="Masukkan Chance Rate"
size="lg" size="lg"
className="w-full" className="w-full"
/> />
<InputForm <InputField
label="Foto Barang" label="Foto Barang"
type="file" type="file"
placeholder=".jpg, .jpeg, atau .png" placeholder=".jpg, .jpeg, atau .png"
apps/backoffice/src/app/page.tsx
+16 -24
View File
@@ -1,8 +1,7 @@
import { FC, ReactElement, useState } from 'react'; import { FC, ReactElement, useState } from 'react';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm } from '@imphnen-frontend-service/ui/molecules'; import { InputField } from '@imphnen-frontend-service/ui/molecules';
import { postLogin } from '@imphnen-frontend-service/service';
export const Components: FC = (): ReactElement => { export const Components: FC = (): ReactElement => {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -34,28 +33,21 @@ export const Components: FC = (): ReactElement => {
<h1 className="text-primary-500 text-p1 font-semibold"> <h1 className="text-primary-500 text-p1 font-semibold">
Welcome to IMPHNEN Backoffice Welcome to IMPHNEN Backoffice
</h1> </h1>
<form onSubmit={handleLogin} className="flex flex-col gap-8"> <InputField
<InputForm label="Email"
label="Email" placeholder="Masukkan Email"
placeholder="Masukkan Email" type="email"
type="email" size="lg"
size="lg" className="w-full"
className="w-full" />
value={email} <InputField
onChange={(e) => setEmail(e.target.value)} label="Password"
autoFocus placeholder="Masukkan password"
/> type="password"
<InputForm size="lg"
label="Password" className="w-full"
placeholder="Masukkan password" />
type="password" <Button onClick={() => navigate('/dashboard')}>Login</Button>
size="lg"
className="w-full"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit">Login</Button>
</form>
</div> </div>
</div> </div>
); );
apps/backoffice/src/app/prizes/_components/modal-process-item.tsx
+5 -5
View File
@@ -1,5 +1,5 @@
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules'; import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
interface IModalProcessDelivery { interface IModalProcessDelivery {
isOpen: boolean; isOpen: boolean;
@@ -30,7 +30,7 @@ const ModalProcessDelivery = ({
</Modal.Header> </Modal.Header>
<Modal.Content className="flex flex-col gap-8"> <Modal.Content className="flex flex-col gap-8">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<InputForm <InputField
label="Nama Lengkap" label="Nama Lengkap"
type="text" type="text"
placeholder="Masukkan Nama Lengkap" placeholder="Masukkan Nama Lengkap"
@@ -39,7 +39,7 @@ const ModalProcessDelivery = ({
className="w-full" className="w-full"
readOnly readOnly
/> />
<InputForm <InputField
label="Item yang didapatkan" label="Item yang didapatkan"
type="text" type="text"
placeholder="Masukkan Nama Item" placeholder="Masukkan Nama Item"
@@ -48,7 +48,7 @@ const ModalProcessDelivery = ({
className="w-full" className="w-full"
readOnly readOnly
/> />
<InputForm <InputField
label="Alamat Pengiriman" label="Alamat Pengiriman"
type="text" type="text"
placeholder="Masukkan Alamat Pengiriman" placeholder="Masukkan Alamat Pengiriman"
@@ -57,7 +57,7 @@ const ModalProcessDelivery = ({
className="w-full" className="w-full"
readOnly readOnly
/> />
<InputForm <InputField
label="Status" label="Status"
type="text" type="text"
placeholder="Isi Status Pengiriman" placeholder="Isi Status Pengiriman"
apps/backoffice/src/app/transactions/_components/modal-validate.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules'; import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
interface IModalValidate { interface IModalValidate {
isOpen: boolean; isOpen: boolean;
@@ -27,7 +27,7 @@ const ModalValidate = ({
</h2> </h2>
</Modal.Header> </Modal.Header>
<Modal.Content className="flex flex-col gap-8"> <Modal.Content className="flex flex-col gap-8">
<InputForm <InputField
label="Nomor Transaksi" label="Nomor Transaksi"
type="text" type="text"
placeholder="Masukkan Nomor Transaksi" placeholder="Masukkan Nomor Transaksi"
apps/dimentorin/src/app/auth/login/page.tsx
+48 -20
View File
@@ -1,45 +1,73 @@
import { FC, ReactElement } from 'react'; import { FC, ReactElement } from 'react';
import { LoginBanner } from "@imphnen-frontend-service/ui/organisms" import { LoginBanner } from '@imphnen-frontend-service/ui/organisms';
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import { InputForm } from '@imphnen-frontend-service/ui/molecules'; import { InputField } from '@imphnen-frontend-service/ui/molecules';
export const Components: FC = (): ReactElement => { export const Components: FC = (): ReactElement => {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const error = searchParams.get("error"); // Ambil nilai ?error= const error = searchParams.get('error'); // Ambil nilai ?error=
return ( return (
<div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'> <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
<div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'> <div className="bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
<LoginBanner /> <LoginBanner />
<div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'> <div className="border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center">
<div className='w-[404px]'> <div className="w-[404px]">
<h2 className='text-4xl font-semibold text-primary-500 text-center mb-2'>Hallo Minna-san</h2> <h2 className="text-4xl font-semibold text-primary-500 text-center mb-2">
<h5 className='text-xl font-medium text-primary-500 text-center'>Welcome to Dimentorin by IMPHNEN</h5> Hallo Minna-san
<InputForm label='Email' error={error ? error : undefined} size='lg' className='w-full' placeholder='Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)' /> </h2>
<InputForm label="password" error={error ? error : undefined} className='w-full' size='lg' type='password' placeholder='Masukkan password rahasiamu!' /> <h5 className="text-xl font-medium text-primary-500 text-center">
<div className='flex justify-end my-5'> Welcome to Dimentorin by IMPHNEN
<a href="/auth/forgot" className='text-primary-500 font-medium'>Lupa Password ?</a> </h5>
<InputField
label="Email"
error={error ? error : undefined}
size="lg"
className="w-full"
placeholder="Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
/>
<InputField
label="password"
error={error ? error : undefined}
className="w-full"
size="lg"
type="password"
placeholder="Masukkan password rahasiamu!"
/>
<div className="flex justify-end my-5">
<a href="/auth/forgot" className="text-primary-500 font-medium">
Lupa Password ?
</a>
</div> </div>
<Button className='w-full'>Enter Isekai</Button> <Button className="w-full">Enter Isekai</Button>
<div className='flex my-3 gap-3 justify-center'> <div className="flex my-3 gap-3 justify-center">
<h5>Belum Punya akun ?</h5> <h5>Belum Punya akun ?</h5>
<a href="/auth/register" className='text-primary-500 font-medium'>Daftar Disini</a> <a href="/auth/register" className="text-primary-500 font-medium">
Daftar Disini
</a>
</div> </div>
<div className="flex items-center w-full"> <div className="flex items-center w-full">
<div className="flex-grow border-t border-blue-400 opacity-50"></div> <div className="flex-grow border-t border-blue-400 opacity-50"></div>
<span className="px-3 text-blue-400">Or</span> <span className="px-3 text-blue-400">Or</span>
<div className="flex-grow border-t border-blue-400 opacity-50"></div> <div className="flex-grow border-t border-blue-400 opacity-50"></div>
</div> </div>
<Button className='w-full my-3 text-gray-500 gap-2' variant='secondary'> <Button
className="w-full my-3 text-gray-500 gap-2"
variant="secondary"
>
<p>Log In With Google</p> <p>Log In With Google</p>
<img src="/image/33978ce5bed2da9bf9d73acad802182a.webp" alt="Google Icon" width={24}/> <img
src="/image/33978ce5bed2da9bf9d73acad802182a.webp"
alt="Google Icon"
width={24}
/>
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default Components; export default Components;
libs/ui/src/molecules/input-field/input-field.spec.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import { InputField } from './input-field'; import { InputField } from './input-field';
describe('InputForm Component', () => { describe('InputField Component', () => {
it('renders correctly with disabled prop', () => { it('renders correctly with disabled prop', () => {
render(<InputField label="Test Label" disabled={true} />); render(<InputField label="Test Label" disabled={true} />);