summaryrefslogtreecommitdiff
path: root/src/lib/address/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/address/components')
-rw-r--r--src/lib/address/components/Addresses.jsx125
-rw-r--r--src/lib/address/components/CreateAddress.jsx237
-rw-r--r--src/lib/address/components/EditAddress.jsx237
3 files changed, 314 insertions, 285 deletions
diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index 3ac06b6c..a2adecb1 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -4,13 +4,15 @@ import useAuth from '@/core/hooks/useAuth'
import { getItemAddress, updateItemAddress } from '@/core/utils/address'
import { useRouter } from 'next/router'
import useAddresses from '../hooks/useAddresses'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
const Addresses = () => {
const router = useRouter()
const { select = null } = router.query
- const auth = useAuth()
const { addresses } = useAddresses()
- const selectedAdress = getItemAddress(select || '')
+ const selectedAddress = getItemAddress(select || '')
const changeSelectedAddress = (id) => {
if (!select) return
updateItemAddress(select, id)
@@ -26,43 +28,96 @@ const Addresses = () => {
}
return (
- <div className='p-4'>
- <div className='text-right'>
- <Link href='/my/address/create'>Tambah Alamat</Link>
- </div>
+ <>
+ <MobileView>
+ <div className='p-4'>
+ <div className='text-right'>
+ <Link href='/my/address/create'>Tambah Alamat</Link>
+ </div>
+
+ <div className='grid gap-y-4 mt-4'>
+ {addresses.data?.map((address, index) => {
+ const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+ return (
+ <AddressCard
+ key={index}
+ address={address}
+ type={type}
+ changeSelectedAddress={changeSelectedAddress}
+ selectedAddress={selectedAddress}
+ select={select}
+ />
+ )
+ })}
+ </div>
+ </div>
+ </MobileView>
- <div className='grid gap-y-4 mt-4'>
- {addresses.data?.map((address, index) => {
- let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
- return (
- <div
- key={index}
- className={
- 'p-4 rounded-md border ' +
- (selectedAdress && selectedAdress == address.id
- ? 'border-gray_r-7 bg-gray_r-4'
- : 'border-gray_r-7')
- }
- >
- <div onClick={() => changeSelectedAddress(address.id)}>
- <div className='flex gap-x-2'>
- <div className='badge-red'>{type}</div>
- {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
- </div>
- <p className='font-medium mt-2'>{address.name}</p>
- {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
- <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
- </div>
- <Link
- href={`/my/address/${address.id}/edit`}
- className='btn-light bg-white mt-3 w-full !text-gray_r-11'
- >
- Ubah Alamat
+ <DesktopView>
+ <div className='container mx-auto flex py-10'>
+ <div className='w-3/12 pr-4'>
+ <Menu />
+ </div>
+ <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+ <div className='flex items-center mb-6'>
+ <h1 className='text-title-sm font-semibold'>Daftar Alamat</h1>
+ <Link href='/my/address/create' className='btn-solid-red py-2 px-3 text-gray_r-1 h-fit ml-auto'>
+ Tambah Alamat
</Link>
</div>
- )
- })}
+
+ <div className='grid grid-cols-2 gap-4'>
+ {addresses.data?.map((address, index) => {
+ const type =
+ address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+ return (
+ <AddressCard
+ key={index}
+ address={address}
+ type={type}
+ changeSelectedAddress={changeSelectedAddress}
+ selectedAddress={selectedAddress}
+ select={select}
+ />
+ )
+ })}
+ </div>
+ </div>
+ </div>
+ </DesktopView>
+ </>
+ )
+}
+
+const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
+ const auth = useAuth()
+
+ return (
+ <div
+ className={`p-4 rounded-md border
+ ${
+ (selectedAddress && selectedAddress == address.id
+ ? 'border-gray_r-7 bg-gray_r-4'
+ : 'border-gray_r-7') +
+ ' ' +
+ (select && 'cursor-pointer hover:bg-gray_r-4 transition')
+ }`}
+ >
+ <div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}>
+ <div className='flex gap-x-2'>
+ <div className='badge-red'>{type}</div>
+ {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
+ </div>
+ <p className='font-medium mt-2'>{address.name}</p>
+ {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
+ <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
</div>
+ <Link
+ href={`/my/address/${address.id}/edit`}
+ className='btn-light bg-white mt-3 w-full !text-gray_r-11'
+ >
+ Ubah Alamat
+ </Link>
</div>
)
}
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 849b4c01..475d8548 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react'
import createAddressApi from '../api/createAddressApi'
import { toast } from 'react-hot-toast'
import { yupResolver } from '@hookform/resolvers/yup'
+import Menu from '@/lib/auth/components/Menu'
const CreateAddress = () => {
const auth = useAuth()
@@ -88,133 +89,119 @@ const CreateAddress = () => {
}
return (
- <form
- className='p-4 flex flex-col gap-y-4'
- onSubmit={handleSubmit(onSubmitHandler)}
- >
- <div>
- <label className='form-label mb-2'>Label Alamat</label>
- <Controller
- name='type'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- isSearchable={false}
- options={types}
- />
- )}
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+ <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+ <div className='hidden md:block w-3/12 pr-4'>
+ <Menu />
</div>
-
- <div>
- <label className='form-label mb-2'>Nama</label>
- <input
- {...register('name')}
- placeholder='John Doe'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Email</label>
- <input
- {...register('email')}
- placeholder='contoh@email.com'
- type='email'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Mobile</label>
- <input
- {...register('mobile')}
- placeholder='08xxxxxxxx'
- type='tel'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Alamat</label>
- <input
- {...register('street')}
- placeholder='Jl. Bandengan Utara 85A'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Kode Pos</label>
- <input
- {...register('zip')}
- placeholder='10100'
- type='number'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Kota</label>
- <Controller
- name='city'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={cities}
- />
- )}
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Kecamatan</label>
- <Controller
- name='district'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={districts}
- disabled={!watchCity}
- />
- )}
- />
- </div>
-
- <div>
- <label className='form-label mb-2'>Kelurahan</label>
- <Controller
- name='subDistrict'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={subDistricts}
- disabled={!watchDistrict}
- />
- )}
- />
+ <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+ <form onSubmit={handleSubmit(onSubmitHandler)}>
+ <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+ <div>
+ <label className='form-label mb-2'>Label Alamat</label>
+ <Controller
+ name='type'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} isSearchable={false} options={types} />
+ )}
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Nama</label>
+ <input
+ {...register('name')}
+ placeholder='John Doe'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Email</label>
+ <input
+ {...register('email')}
+ placeholder='contoh@email.com'
+ type='email'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Mobile</label>
+ <input
+ {...register('mobile')}
+ placeholder='08xxxxxxxx'
+ type='tel'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Alamat</label>
+ <input
+ {...register('street')}
+ placeholder='Jl. Bandengan Utara 85A'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kode Pos</label>
+ <input
+ {...register('zip')}
+ placeholder='10100'
+ type='number'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kota</label>
+ <Controller
+ name='city'
+ control={control}
+ render={(props) => <HookFormSelect {...props} options={cities} />}
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kecamatan</label>
+ <Controller
+ name='district'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+ )}
+ />
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kelurahan</label>
+ <Controller
+ name='subDistrict'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
+ )}
+ />
+ </div>
+ </div>
+
+ <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+ Simpan
+ </button>
+ </form>
</div>
-
- <button
- type='submit'
- className='btn-yellow mt-2 w-full'
- >
- Simpan
- </button>
- </form>
+ </div>
)
}
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index a832edbc..d754cbd9 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -9,6 +9,7 @@ import subDistrictApi from '../api/subDistrictApi'
import editAddressApi from '../api/editAddressApi'
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
import { toast } from 'react-hot-toast'
+import Menu from '@/lib/auth/components/Menu'
const EditAddress = ({ id, defaultValues }) => {
const router = useRouter()
@@ -102,133 +103,119 @@ const EditAddress = ({ id, defaultValues }) => {
}
return (
- <form
- className='p-4 flex flex-col gap-y-4'
- onSubmit={handleSubmit(onSubmitHandler)}
- >
- <div>
- <label className='form-label mb-2'>Label Alamat</label>
- <Controller
- name='type'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- isSearchable={false}
- options={types}
- />
- )}
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+ <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+ <div className='hidden md:block w-3/12 pr-4'>
+ <Menu />
</div>
-
- <div>
- <label className='form-label mb-2'>Nama</label>
- <input
- {...register('name')}
- placeholder='John Doe'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Email</label>
- <input
- {...register('email')}
- placeholder='johndoe@example.com'
- type='email'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Mobile</label>
- <input
- {...register('mobile')}
- placeholder='08xxxxxxxx'
- type='tel'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Alamat</label>
- <input
- {...register('street')}
- placeholder='Jl. Bandengan Utara 85A'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Kode Pos</label>
- <input
- {...register('zip')}
- placeholder='10100'
- type='number'
- className='form-input'
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Kota</label>
- <Controller
- name='city'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={cities}
- />
- )}
- />
- <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
- </div>
-
- <div>
- <label className='form-label mb-2'>Kecamatan</label>
- <Controller
- name='district'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={districts}
- disabled={!watchCity}
- />
- )}
- />
- </div>
-
- <div>
- <label className='form-label mb-2'>Kelurahan</label>
- <Controller
- name='subDistrict'
- control={control}
- render={(props) => (
- <HookFormSelect
- {...props}
- options={subDistricts}
- disabled={!watchDistrict}
- />
- )}
- />
+ <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+ <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>Ubah Alamat</h1>
+ <form onSubmit={handleSubmit(onSubmitHandler)}>
+ <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+ <div>
+ <label className='form-label mb-2'>Label Alamat</label>
+ <Controller
+ name='type'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} isSearchable={false} options={types} />
+ )}
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Nama</label>
+ <input
+ {...register('name')}
+ placeholder='John Doe'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Email</label>
+ <input
+ {...register('email')}
+ placeholder='johndoe@example.com'
+ type='email'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Mobile</label>
+ <input
+ {...register('mobile')}
+ placeholder='08xxxxxxxx'
+ type='tel'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Alamat</label>
+ <input
+ {...register('street')}
+ placeholder='Jl. Bandengan Utara 85A'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kode Pos</label>
+ <input
+ {...register('zip')}
+ placeholder='10100'
+ type='number'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kota</label>
+ <Controller
+ name='city'
+ control={control}
+ render={(props) => <HookFormSelect {...props} options={cities} />}
+ />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kecamatan</label>
+ <Controller
+ name='district'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+ )}
+ />
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Kelurahan</label>
+ <Controller
+ name='subDistrict'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
+ )}
+ />
+ </div>
+ </div>
+ <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+ Simpan
+ </button>
+ </form>
</div>
-
- <button
- type='submit'
- className='btn-yellow mt-2 w-full'
- >
- Simpan
- </button>
- </form>
+ </div>
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 07:46:01 +0000