feat: slicing modal for backoffice 'data pengiriman hadiah' page
This commit is contained in:
Hafid Nur
@@ -0,0 +1,71 @@
|
|||||||
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||||
|
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
|
||||||
|
|
||||||
|
interface IModalProcessDelivery {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onProcessDelivery?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ModalProcessDelivery = ({ isOpen, onClose }: IModalProcessDelivery) => {
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
disableEscapeKeyDown={true}
|
||||||
|
>
|
||||||
|
<Modal.Header>
|
||||||
|
<h2 className="text-p1 font-semibold text-primary-500 mb-3">
|
||||||
|
Delivery Process
|
||||||
|
</h2>
|
||||||
|
<p className="text-p3 text-neutral-400">
|
||||||
|
Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika
|
||||||
|
sudah ubah status menjadi “Delivered”.
|
||||||
|
</p>
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Content className="flex flex-col gap-8">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<InputForm
|
||||||
|
label="Nama Lengkap"
|
||||||
|
type="text"
|
||||||
|
placeholder="Masukkan Nama Lengkap"
|
||||||
|
value="Ahmad Wiyana"
|
||||||
|
size="lg"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<InputForm
|
||||||
|
label="Item yang didapatkan"
|
||||||
|
type="text"
|
||||||
|
placeholder="Masukkan Nama Item"
|
||||||
|
value="Lanyard + ID Card"
|
||||||
|
size="lg"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<InputForm
|
||||||
|
label="Alamat Pengiriman"
|
||||||
|
type="text"
|
||||||
|
placeholder="Masukkan Alamat Pengiriman"
|
||||||
|
value="Jl. Pantai Cibaduyut Indah"
|
||||||
|
size="lg"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<InputForm
|
||||||
|
label="Status"
|
||||||
|
type="text"
|
||||||
|
placeholder="Isi Status Pengiriman"
|
||||||
|
value="Lanyard + ID Card"
|
||||||
|
size="lg"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button variant="primary" size="lg" className="w-full">
|
||||||
|
Proses Pengiriman
|
||||||
|
</Button>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalProcessDelivery;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import { FC, ReactElement, useState } from 'react';
|
import { FC, Fragment, ReactElement, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
FilterOutlined,
|
FilterOutlined,
|
||||||
SearchOutlined,
|
SearchOutlined,
|
||||||
@@ -17,13 +17,15 @@ import {
|
|||||||
useReactTable,
|
useReactTable,
|
||||||
RowSelectionState,
|
RowSelectionState,
|
||||||
} from '@tanstack/react-table';
|
} from '@tanstack/react-table';
|
||||||
|
import ModalProcessDelivery from './_components/modal-process-item';
|
||||||
|
|
||||||
type Status = 'valid' | 'invalid' | 'unchecked';
|
type OrderValid = 'valid' | 'invalid' | 'unchecked';
|
||||||
|
type Status = 'undelivered' | 'delivered';
|
||||||
|
|
||||||
interface Prize {
|
interface Prize {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
orderValid: Status;
|
orderValid: OrderValid;
|
||||||
items: string;
|
items: string;
|
||||||
address: string;
|
address: string;
|
||||||
status: Status;
|
status: Status;
|
||||||
@@ -46,119 +48,16 @@ const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
|
|||||||
? 'invalid'
|
? 'invalid'
|
||||||
: i % 5 === 0
|
: i % 5 === 0
|
||||||
? 'unchecked'
|
? 'unchecked'
|
||||||
: 'valid') as Status,
|
: 'valid') as OrderValid,
|
||||||
items: items[i % items.length],
|
items: items[i % items.length],
|
||||||
address: 'Jl. Pantai Cibaduyut Indah',
|
address: 'Jl. Pantai Cibaduyut Indah',
|
||||||
status: (i % 3 === 0
|
status: (i % 3 === 0 ? 'undelivered' : 'delivered') as Status,
|
||||||
? 'unchecked'
|
|
||||||
: i % 5 === 0
|
|
||||||
? 'invalid'
|
|
||||||
: 'valid') as Status,
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const columns: ColumnDef<Prize>[] = [
|
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
header: ({ table }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={table.getIsAllRowsSelected()}
|
|
||||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'No',
|
|
||||||
accessorKey: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Nama Lengkap',
|
|
||||||
accessorKey: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Order Valid?',
|
|
||||||
accessorKey: 'orderValid',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.orderValid;
|
|
||||||
const statusColors: Record<Status, string> = {
|
|
||||||
valid: 'bg-success-200 text-success-500',
|
|
||||||
invalid: 'bg-danger-200 text-danger-500',
|
|
||||||
unchecked: 'bg-warning-200 text-warning-900',
|
|
||||||
};
|
|
||||||
const statusText: Record<Status, string> = {
|
|
||||||
valid: 'Valid',
|
|
||||||
invalid: 'Invalid',
|
|
||||||
unchecked: 'Unchecked',
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
|
||||||
>
|
|
||||||
{statusText[status]}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Items',
|
|
||||||
accessorKey: 'items',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Alamat Pengiriman',
|
|
||||||
accessorKey: 'address',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Status',
|
|
||||||
accessorKey: 'status',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.status;
|
|
||||||
const statusColors: Record<Status, string> = {
|
|
||||||
valid: 'bg-success-200 text-success-500',
|
|
||||||
invalid: 'bg-danger-200 text-danger-500',
|
|
||||||
unchecked: 'bg-warning-200 text-warning-900',
|
|
||||||
};
|
|
||||||
const statusText: Record<Status, string> = {
|
|
||||||
valid: 'Valid',
|
|
||||||
invalid: 'Invalid',
|
|
||||||
unchecked: 'Unchecked',
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
|
||||||
>
|
|
||||||
{statusText[status]}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Action',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
// handleUpdate(row.id);
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 w-full"
|
|
||||||
>
|
|
||||||
<AuditOutlined className="text-[16px]" /> Process
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const Components: FC = (): ReactElement => {
|
export const Components: FC = (): ReactElement => {
|
||||||
|
const [showModalProcessDelivery, setShowModalProcessDelivery] =
|
||||||
|
useState(false);
|
||||||
|
|
||||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||||
pageIndex: 0,
|
pageIndex: 0,
|
||||||
pageSize: 9,
|
pageSize: 9,
|
||||||
@@ -167,6 +66,105 @@ export const Components: FC = (): ReactElement => {
|
|||||||
const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
|
const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
|
||||||
const [showFilter, setShowFilter] = useState(false);
|
const [showFilter, setShowFilter] = useState(false);
|
||||||
|
|
||||||
|
const columns: ColumnDef<Prize>[] = [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => (
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="rounded"
|
||||||
|
checked={table.getIsAllRowsSelected()}
|
||||||
|
onChange={table.getToggleAllRowsSelectedHandler()}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="rounded"
|
||||||
|
checked={row.getIsSelected()}
|
||||||
|
onChange={row.getToggleSelectedHandler()}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'No',
|
||||||
|
accessorKey: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Nama Lengkap',
|
||||||
|
accessorKey: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Order Valid?',
|
||||||
|
accessorKey: 'orderValid',
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const status = row.original.orderValid;
|
||||||
|
const statusColors: Record<OrderValid, string> = {
|
||||||
|
valid: 'bg-success-200 text-success-500',
|
||||||
|
invalid: 'bg-danger-200 text-danger-500',
|
||||||
|
unchecked: 'bg-warning-200 text-warning-900',
|
||||||
|
};
|
||||||
|
const statusText: Record<OrderValid, string> = {
|
||||||
|
valid: 'Valid',
|
||||||
|
invalid: 'Invalid',
|
||||||
|
unchecked: 'Unchecked',
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
||||||
|
>
|
||||||
|
{statusText[status]}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Items',
|
||||||
|
accessorKey: 'items',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Alamat Pengiriman',
|
||||||
|
accessorKey: 'address',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Status',
|
||||||
|
accessorKey: 'status',
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const status = row.original.status;
|
||||||
|
const statusColors: Record<Status, string> = {
|
||||||
|
delivered: 'bg-success-200 text-success-500',
|
||||||
|
undelivered: 'bg-danger-200 text-danger-500',
|
||||||
|
};
|
||||||
|
const statusText: Record<Status, string> = {
|
||||||
|
delivered: 'Delivered',
|
||||||
|
undelivered: 'Undelivered',
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
||||||
|
>
|
||||||
|
{statusText[status]}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Action',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
size="sm"
|
||||||
|
onClick={(e) => {
|
||||||
|
setShowModalProcessDelivery(true);
|
||||||
|
}}
|
||||||
|
className="flex items-center gap-2 w-full"
|
||||||
|
>
|
||||||
|
<AuditOutlined className="text-[16px]" /> Process
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const table = useReactTable({
|
const table = useReactTable({
|
||||||
data: mockData,
|
data: mockData,
|
||||||
columns,
|
columns,
|
||||||
@@ -184,48 +182,56 @@ export const Components: FC = (): ReactElement => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
|
<Fragment>
|
||||||
{/* Header */}
|
<main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
|
||||||
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
{/* Header */}
|
||||||
<h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
|
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||||
</header>
|
<h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
|
||||||
|
</header>
|
||||||
{/* Account Table Section */}
|
{/* Account Table Section */}
|
||||||
<section className="flex flex-col gap-6 p-8 bg-white rounded-md">
|
<section className="flex flex-col gap-6 p-8 bg-white rounded-md">
|
||||||
{/* Search and Filter */}
|
{/* Search and Filter */}
|
||||||
<div className="flex justify-between items-center gap-8 mb-2">
|
<div className="flex justify-between items-center gap-8 mb-2">
|
||||||
<div className="relative w-full">
|
<div className="relative w-full">
|
||||||
<Input
|
<Input
|
||||||
placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
|
placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
|
||||||
className="pl-12 w-full max-h-full"
|
className="pl-12 w-full max-h-full"
|
||||||
/>
|
/>
|
||||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
||||||
<SearchOutlined />
|
<SearchOutlined />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
size="md"
|
||||||
|
className="flex items-center gap-3"
|
||||||
|
onClick={() => setShowFilter(!showFilter)}
|
||||||
|
>
|
||||||
|
<FilterOutlined />
|
||||||
|
Filters
|
||||||
|
</Button>
|
||||||
|
{showFilter && (
|
||||||
|
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
|
||||||
|
<Filter onClose={() => setShowFilter(false)} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Table */}
|
||||||
|
<DataTable data={mockData} columns={columns} table={table} />
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
<div className="relative">
|
{/* Modal Process Delivery */}
|
||||||
<Button
|
<ModalProcessDelivery
|
||||||
variant="primary"
|
isOpen={showModalProcessDelivery}
|
||||||
size="md"
|
onClose={() => setShowModalProcessDelivery(false)}
|
||||||
className="flex items-center gap-3"
|
onProcessDelivery={() => {
|
||||||
onClick={() => setShowFilter(!showFilter)}
|
console.log('Item added');
|
||||||
>
|
}}
|
||||||
<FilterOutlined />
|
/>
|
||||||
Filters
|
</Fragment>
|
||||||
</Button>
|
|
||||||
{showFilter && (
|
|
||||||
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
|
|
||||||
<Filter onClose={() => setShowFilter(false)} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Table */}
|
|
||||||
<DataTable data={mockData} columns={columns} table={table} />
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user