diff --git a/apps/backoffice/public/chibi-delete.webp b/apps/backoffice/public/chibi-delete.webp new file mode 100644 index 0000000..c61886e Binary files /dev/null and b/apps/backoffice/public/chibi-delete.webp differ diff --git a/apps/backoffice/public/gacha-clip.png b/apps/backoffice/public/gacha-clip.png deleted file mode 100644 index 9fe05c0..0000000 Binary files a/apps/backoffice/public/gacha-clip.png and /dev/null differ diff --git a/apps/backoffice/public/gacha-clip.webp b/apps/backoffice/public/gacha-clip.webp new file mode 100644 index 0000000..65f37d3 Binary files /dev/null and b/apps/backoffice/public/gacha-clip.webp differ diff --git a/apps/backoffice/public/gacha.png b/apps/backoffice/public/gacha.png deleted file mode 100644 index 04a57c3..0000000 Binary files a/apps/backoffice/public/gacha.png and /dev/null differ diff --git a/apps/backoffice/public/gacha.webp b/apps/backoffice/public/gacha.webp new file mode 100644 index 0000000..b41964e Binary files /dev/null and b/apps/backoffice/public/gacha.webp differ diff --git a/apps/backoffice/src/app/accounts/layout.tsx b/apps/backoffice/src/app/accounts/layout.tsx index 5d2c643..a770c99 100644 --- a/apps/backoffice/src/app/accounts/layout.tsx +++ b/apps/backoffice/src/app/accounts/layout.tsx @@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
-
+
diff --git a/apps/backoffice/src/app/accounts/page.tsx b/apps/backoffice/src/app/accounts/page.tsx index 5191e88..404b462 100644 --- a/apps/backoffice/src/app/accounts/page.tsx +++ b/apps/backoffice/src/app/accounts/page.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { FC, ReactElement } from 'react'; +import { FC, ReactElement, useState } from 'react'; import { FilterOutlined, SearchOutlined, EditOutlined, } from '@ant-design/icons'; import { Button, Input } from '@imphnen-frontend-service/ui/atoms'; -import { DataTable } from '@imphnen-frontend-service/ui/organisms'; +import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms'; import { ColumnDef, @@ -32,7 +32,7 @@ const mockData: Account[] = Array.from({ length: 90 }, (_, i) => ({ name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap', email: 'fullname23@gmail.com', phone: '081904423804', - address: 'Jl. Pantai Cibaduyut Indonesia', + address: 'Jl. Pantai Cibaduyut Indah', })); const columns: ColumnDef[] = [ @@ -100,6 +100,7 @@ export const Components: FC = (): ReactElement => { }); const [rowSelection, setRowSelection] = React.useState({}); + const [showFilter, setShowFilter] = useState(false); const table = useReactTable({ data: mockData, @@ -120,7 +121,7 @@ export const Components: FC = (): ReactElement => { return (
{/* Header */} -
+

Data Akun

@@ -138,15 +139,23 @@ export const Components: FC = (): ReactElement => {
- +
+ + {showFilter && ( +
+ setShowFilter(false)} /> +
+ )} +
{/* Table */} diff --git a/apps/backoffice/src/app/dashboard/layout.tsx b/apps/backoffice/src/app/dashboard/layout.tsx index 5d2c643..a770c99 100644 --- a/apps/backoffice/src/app/dashboard/layout.tsx +++ b/apps/backoffice/src/app/dashboard/layout.tsx @@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
-
+
diff --git a/apps/backoffice/src/app/dashboard/page.tsx b/apps/backoffice/src/app/dashboard/page.tsx index d1f76c6..2567e8c 100644 --- a/apps/backoffice/src/app/dashboard/page.tsx +++ b/apps/backoffice/src/app/dashboard/page.tsx @@ -1,4 +1,10 @@ -import { ArrowDownOutlined, PlusOutlined } from '@ant-design/icons'; +import { + PlusOutlined, + ReloadOutlined, + UsergroupAddOutlined, + UsergroupDeleteOutlined, + UserSwitchOutlined, +} from '@ant-design/icons'; import { Button } from '@imphnen-frontend-service/ui/atoms'; import { FC, ReactElement } from 'react'; @@ -6,7 +12,7 @@ export const Components: FC = (): ReactElement => { return (
{/* Dashboard Header */} -
+

Dashboard

@@ -18,23 +24,51 @@ export const Components: FC = (): ReactElement => { Summary
- {/* Summary Cards */} - {[1, 2, 3, 4].map((item) => ( -
-
- -
-
-

1000

-

- Total Participants -

-
+ {/* Participants */} +
+
+
- ))} +
+

1000

+

Participants

+
+
+ + {/* Roll and Reroll */} +
+
+ +
+
+

1000

+

+ Roll and Reroll +

+
+
+ + {/* Redeem */} +
+
+ +
+
+

1000

+

Redeem

+
+
+ + {/* Inactive Users */} +
+
+ +
+
+

1000

+

Inactive Users

+
+
@@ -78,7 +112,7 @@ export const Components: FC = (): ReactElement => { @@ -87,7 +121,7 @@ export const Components: FC = (): ReactElement => { {/* Lebih baik gunakan gambar yang sudah di-clip dengan size height: 78px daripada hard-code object-position dan margin */} Lanyard IMPHNEN @@ -99,7 +133,7 @@ export const Components: FC = (): ReactElement => { {/* Right-side illustration */} diff --git a/apps/backoffice/src/app/prizes/layout.tsx b/apps/backoffice/src/app/prizes/layout.tsx new file mode 100644 index 0000000..a770c99 --- /dev/null +++ b/apps/backoffice/src/app/prizes/layout.tsx @@ -0,0 +1,18 @@ +import { FC, ReactElement } from 'react'; +import { Outlet } from 'react-router-dom'; +import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms'; + +export const AppLayout: FC = (): ReactElement => { + return ( +
+
+ +
+ +
+
+
+ ); +}; + +export default AppLayout; diff --git a/apps/backoffice/src/app/prizes/page.tsx b/apps/backoffice/src/app/prizes/page.tsx new file mode 100644 index 0000000..f7828c4 --- /dev/null +++ b/apps/backoffice/src/app/prizes/page.tsx @@ -0,0 +1,232 @@ +import * as React from 'react'; + +import { FC, ReactElement, useState } from 'react'; +import { + FilterOutlined, + SearchOutlined, + AuditOutlined, +} from '@ant-design/icons'; +import { Button, Input } from '@imphnen-frontend-service/ui/atoms'; +import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms'; + +import { + ColumnDef, + getCoreRowModel, + getPaginationRowModel, + PaginationState, + useReactTable, + RowSelectionState, +} from '@tanstack/react-table'; + +type Status = 'valid' | 'invalid' | 'unchecked'; + +interface Prize { + id: number; + name: string; + orderValid: Status; + items: string; + address: string; + status: Status; +} + +const items = [ + 'Sertifikat + Laminating', + 'Lanyard + ID Card', + 'Pin', + 'Sticker Isi 3', + 'Sticker Isi 5', + 'Gelang Karet', +]; + +// Mock data for transactions +const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({ + id: i + 1, + name: 'Nama Lengkap', + orderValid: (i % 3 === 0 + ? 'invalid' + : i % 5 === 0 + ? 'unchecked' + : 'valid') as Status, + items: items[i % items.length], + address: 'Jl. Pantai Cibaduyut Indah', + status: (i % 3 === 0 + ? 'unchecked' + : i % 5 === 0 + ? 'invalid' + : 'valid') as Status, +})); + +const columns: ColumnDef[] = [ + { + id: 'select', + header: ({ table }) => ( + + ), + cell: ({ row }) => ( + + ), + }, + { + header: 'No', + accessorKey: 'id', + }, + { + header: 'Nama Lengkap', + accessorKey: 'name', + }, + { + header: 'Order Valid?', + accessorKey: 'orderValid', + cell: ({ row }) => { + const status = row.original.orderValid; + const statusColors: Record = { + valid: 'bg-success-200 text-success-500', + invalid: 'bg-danger-200 text-danger-500', + unchecked: 'bg-warning-200 text-warning-900', + }; + const statusText: Record = { + valid: 'Valid', + invalid: 'Invalid', + unchecked: 'Unchecked', + }; + return ( +
+ {statusText[status]} +
+ ); + }, + }, + { + header: 'Items', + accessorKey: 'items', + }, + { + header: 'Alamat Pengiriman', + accessorKey: 'address', + }, + { + header: 'Status', + accessorKey: 'status', + cell: ({ row }) => { + const status = row.original.status; + const statusColors: Record = { + valid: 'bg-success-200 text-success-500', + invalid: 'bg-danger-200 text-danger-500', + unchecked: 'bg-warning-200 text-warning-900', + }; + const statusText: Record = { + valid: 'Valid', + invalid: 'Invalid', + unchecked: 'Unchecked', + }; + return ( +
+ {statusText[status]} +
+ ); + }, + }, + { + header: 'Action', + cell: ({ row }) => ( + + ), + }, +]; + +export const Components: FC = (): ReactElement => { + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 9, + }); + + const [rowSelection, setRowSelection] = React.useState({}); + const [showFilter, setShowFilter] = useState(false); + + const table = useReactTable({ + data: mockData, + columns, + state: { + pagination, + rowSelection, + }, + enableRowSelection: true, + onRowSelectionChange: setRowSelection, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + onPaginationChange: setPagination, + pageCount: Math.ceil(mockData.length / pagination.pageSize), + manualPagination: false, + }); + + return ( +
+ {/* Header */} +
+

Data Pengiriman Hadiah

+
+ + {/* Account Table Section */} +
+ {/* Search and Filter */} +
+
+ +
+ +
+
+ +
+ + {showFilter && ( +
+ setShowFilter(false)} /> +
+ )} +
+
+ + {/* Table */} + +
+
+ ); +}; + +export default Components; diff --git a/apps/backoffice/src/app/transactions/layout.tsx b/apps/backoffice/src/app/transactions/layout.tsx index 5d2c643..a770c99 100644 --- a/apps/backoffice/src/app/transactions/layout.tsx +++ b/apps/backoffice/src/app/transactions/layout.tsx @@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
-
+
diff --git a/apps/backoffice/src/app/transactions/page.tsx b/apps/backoffice/src/app/transactions/page.tsx index fb8428f..a03b161 100644 --- a/apps/backoffice/src/app/transactions/page.tsx +++ b/apps/backoffice/src/app/transactions/page.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; - -import { FC, ReactElement } from 'react'; +import { FC, ReactElement, useState } from 'react'; import { FilterOutlined, SearchOutlined, AuditOutlined, } from '@ant-design/icons'; import { Button, Input } from '@imphnen-frontend-service/ui/atoms'; -import { DataTable } from '@imphnen-frontend-service/ui/organisms'; +import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms'; import { ColumnDef, @@ -39,7 +38,7 @@ const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({ : 'valid') as TransactionStatus, })); -const columns: ColumnDef[] = [ +const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( @@ -77,9 +76,9 @@ const columns: ColumnDef[] = [ cell: ({ row }) => { const status = row.original.status; const statusColors: Record = { - valid: 'bg-success-500 text-white', - invalid: 'bg-danger-500 text-white', - unchecked: 'bg-yellow-400 text-black', + valid: 'bg-success-200 text-success-500', + invalid: 'bg-danger-200 text-danger-500', + unchecked: 'bg-warning-200 text-warning-900', }; const statusText: Record = { valid: 'Valid', @@ -88,7 +87,7 @@ const columns: ColumnDef[] = [ }; return (
{statusText[status]}
@@ -120,6 +119,7 @@ export const Components: FC = (): ReactElement => { }); const [rowSelection, setRowSelection] = React.useState({}); + const [showFilter, setShowFilter] = useState(false); const table = useReactTable({ data: mockTransactions, @@ -140,7 +140,7 @@ export const Components: FC = (): ReactElement => { return (
{/* Header */} -
+

Validasi Transaksi

@@ -158,14 +158,22 @@ export const Components: FC = (): ReactElement => {
- +
+ + {showFilter && ( +
+ setShowFilter(false)} /> +
+ )} +
{/* Table */} diff --git a/apps/backoffice/src/index.css b/apps/backoffice/src/index.css index b92b6ea..a477593 100644 --- a/apps/backoffice/src/index.css +++ b/apps/backoffice/src/index.css @@ -17,14 +17,14 @@ --color-neutral-50: #f6f6f6; --color-neutral-100: #e7e7e7; - --color-neutral-200: #d0d0d0; - --color-neutral-300: #b7b7b7; - --color-neutral-400: #9f9f9f; - --color-neutral-500: #7e7e7e; + --color-neutral-200: #d1d1d1; + --color-neutral-300: #b0b0b0; + --color-neutral-400: #888888; + --color-neutral-500: #6d6d6d; --color-neutral-600: #5d5d5d; - --color-neutral-700: #4a4a4a; - --color-neutral-800: #3a3a3a; - --color-neutral-900: #2f2f2f; + --color-neutral-700: #4f4f4f; + --color-neutral-800: #454545; + --color-neutral-900: #3d3d3d; --color-neutral-950: #2b2b2b; --color-success-100: #e0fbd8; diff --git a/apps/gacha/src/index.css b/apps/gacha/src/index.css index b92b6ea..a477593 100644 --- a/apps/gacha/src/index.css +++ b/apps/gacha/src/index.css @@ -17,14 +17,14 @@ --color-neutral-50: #f6f6f6; --color-neutral-100: #e7e7e7; - --color-neutral-200: #d0d0d0; - --color-neutral-300: #b7b7b7; - --color-neutral-400: #9f9f9f; - --color-neutral-500: #7e7e7e; + --color-neutral-200: #d1d1d1; + --color-neutral-300: #b0b0b0; + --color-neutral-400: #888888; + --color-neutral-500: #6d6d6d; --color-neutral-600: #5d5d5d; - --color-neutral-700: #4a4a4a; - --color-neutral-800: #3a3a3a; - --color-neutral-900: #2f2f2f; + --color-neutral-700: #4f4f4f; + --color-neutral-800: #454545; + --color-neutral-900: #3d3d3d; --color-neutral-950: #2b2b2b; --color-success-100: #e0fbd8; diff --git a/libs/ui/.storybook/main.ts b/libs/ui/.storybook/main.ts index 6b4496c..0b23e83 100644 --- a/libs/ui/.storybook/main.ts +++ b/libs/ui/.storybook/main.ts @@ -11,6 +11,10 @@ const config: StorybookConfig = { }, }, }, + staticDirs: [ + '../../../apps/backoffice/public', + '../../../apps/gacha/public', + '../../../apps/dimentorin/public', ], }; export default config; diff --git a/libs/ui/src/atoms/button/button.tsx b/libs/ui/src/atoms/button/button.tsx index 39483e5..dc831b5 100644 --- a/libs/ui/src/atoms/button/button.tsx +++ b/libs/ui/src/atoms/button/button.tsx @@ -51,7 +51,7 @@ export const Button: FC = ({ ...rest }): ReactElement => { const mergedClassName = cn( - 'inline-flex items-center justify-center font-[600] rounded-lg px-[16px] py-[10px]', + 'inline-flex items-center justify-center font-[600] rounded-md px-[16px] py-[10px]', 'transition-colors duration-200 cursor-pointer', sizeClasses[size], variantClasses[variant], diff --git a/libs/ui/src/atoms/input/input.tsx b/libs/ui/src/atoms/input/input.tsx index a20ed2d..72f8575 100644 --- a/libs/ui/src/atoms/input/input.tsx +++ b/libs/ui/src/atoms/input/input.tsx @@ -45,7 +45,7 @@ export const Input: FC = ({ }; const mergedClassName = cn( - 'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70', + 'px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70', sizeClasses[size].textSize, disabled && disabledClass, className diff --git a/libs/ui/src/index.css b/libs/ui/src/index.css index b92b6ea..a477593 100644 --- a/libs/ui/src/index.css +++ b/libs/ui/src/index.css @@ -17,14 +17,14 @@ --color-neutral-50: #f6f6f6; --color-neutral-100: #e7e7e7; - --color-neutral-200: #d0d0d0; - --color-neutral-300: #b7b7b7; - --color-neutral-400: #9f9f9f; - --color-neutral-500: #7e7e7e; + --color-neutral-200: #d1d1d1; + --color-neutral-300: #b0b0b0; + --color-neutral-400: #888888; + --color-neutral-500: #6d6d6d; --color-neutral-600: #5d5d5d; - --color-neutral-700: #4a4a4a; - --color-neutral-800: #3a3a3a; - --color-neutral-900: #2f2f2f; + --color-neutral-700: #4f4f4f; + --color-neutral-800: #454545; + --color-neutral-900: #3d3d3d; --color-neutral-950: #2b2b2b; --color-success-100: #e0fbd8; diff --git a/libs/ui/src/molecules/input-form/input-form.stories.tsx b/libs/ui/src/molecules/input-form/input-form.stories.tsx index 024805a..eae33dc 100644 --- a/libs/ui/src/molecules/input-form/input-form.stories.tsx +++ b/libs/ui/src/molecules/input-form/input-form.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { InputForm } from './input-form'; const meta = { - title: 'Molecules/InputForm', + title: 'Molecules/Input Form', component: InputForm, parameters: { layout: 'centered', diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx index b1aa794..c8b77ec 100644 --- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx +++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx @@ -1,6 +1,7 @@ import { AppstoreOutlined, AuditOutlined, + InboxOutlined, LogoutOutlined, UserOutlined, } from '@ant-design/icons'; @@ -56,6 +57,18 @@ export const BackofficeSidebar: FC = (): ReactElement => { Validasi Transaksi + + + + Data Pengiriman Hadiah +
diff --git a/libs/ui/src/organisms/datatable/datatable.tsx b/libs/ui/src/organisms/datatable/datatable.tsx index dddbcf5..0a52130 100644 --- a/libs/ui/src/organisms/datatable/datatable.tsx +++ b/libs/ui/src/organisms/datatable/datatable.tsx @@ -5,6 +5,7 @@ import { getPaginationRowModel, flexRender, ColumnDef, + Table, } from '@tanstack/react-table'; import { Pagination } from '../../molecules'; @@ -13,6 +14,7 @@ import React from 'react'; interface DataTableProps { data: T[]; columns: ColumnDef[]; + table: Table; pageSize?: number; } @@ -47,7 +49,7 @@ export const DataTable = ({ {headerGroup.headers.map((header) => ( {header.isPlaceholder ? null @@ -60,7 +62,7 @@ export const DataTable = ({ ))} - + {table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell, index) => ( diff --git a/libs/ui/src/organisms/filter/filter.stories.tsx b/libs/ui/src/organisms/filter/filter.stories.tsx new file mode 100644 index 0000000..9f9a7b2 --- /dev/null +++ b/libs/ui/src/organisms/filter/filter.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Filter } from './filter'; + +const meta: Meta = { + title: 'Organisms/Filter', + component: Filter, + tags: ['autodocs'], + parameters: { + backgrounds: { + default: 'neutral', + values: [{ name: 'neutral', value: '#e7e7e7' }], + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/libs/ui/src/organisms/filter/filter.tsx b/libs/ui/src/organisms/filter/filter.tsx new file mode 100644 index 0000000..268a36c --- /dev/null +++ b/libs/ui/src/organisms/filter/filter.tsx @@ -0,0 +1,89 @@ +import { CloseOutlined } from '@ant-design/icons'; +import { useState } from 'react'; + +interface RadioProps { + checked?: boolean; + disabled?: boolean; + id: string; + label?: string; + name: string; + value: string; + onChange?: (e: React.ChangeEvent) => void; +} + +const Radio = ({ + checked, + disabled, + id, + label, + name, + value, + onChange, +}: RadioProps) => ( +
+
+ +
+
+ +
+); + +interface FilterProps { + onClose?: () => void; +} + +export const Filter = ({ onClose }: FilterProps) => { + const [selectedStatus, setSelectedStatus] = useState('delivered'); + + const handleStatusChange = (e: React.ChangeEvent) => { + setSelectedStatus(e.target.value); + }; + + return ( +
+
+ Filters + +
+
+ Status +
+ + +
+
+ ); +}; + +export default Filter; diff --git a/libs/ui/src/organisms/filter/index.ts b/libs/ui/src/organisms/filter/index.ts new file mode 100644 index 0000000..009bf07 --- /dev/null +++ b/libs/ui/src/organisms/filter/index.ts @@ -0,0 +1 @@ +export * from './filter'; diff --git a/libs/ui/src/organisms/index.ts b/libs/ui/src/organisms/index.ts index 168bd45..f43e18d 100644 --- a/libs/ui/src/organisms/index.ts +++ b/libs/ui/src/organisms/index.ts @@ -2,3 +2,4 @@ export * from './navbar'; export * from './modals-gacha'; export * from './backoffice-sidebar' export * from './datatable' +export * from './filter' diff --git a/libs/ui/src/organisms/modal-backoffice/index.ts b/libs/ui/src/organisms/modal-backoffice/index.ts new file mode 100644 index 0000000..47fe845 --- /dev/null +++ b/libs/ui/src/organisms/modal-backoffice/index.ts @@ -0,0 +1 @@ +export * from './modal-backoffice'; diff --git a/libs/ui/src/organisms/modal-backoffice/modal-backoffice.tsx b/libs/ui/src/organisms/modal-backoffice/modal-backoffice.tsx new file mode 100644 index 0000000..5c9ba0d --- /dev/null +++ b/libs/ui/src/organisms/modal-backoffice/modal-backoffice.tsx @@ -0,0 +1,25 @@ +import { ReactElement, ReactNode } from 'react'; + +interface ModalBackofficeProps { + children: ReactNode; + className?: string; +} + +export const ModalBackoffice = ({ + children, + className, + ...rest +}: ModalBackofficeProps): ReactElement => { + return ( +
+ {children} +
+ ); +}; + +export default ModalBackoffice; diff --git a/libs/ui/src/organisms/modal-backoffice/modal.stories.tsx b/libs/ui/src/organisms/modal-backoffice/modal.stories.tsx new file mode 100644 index 0000000..2eb38e1 --- /dev/null +++ b/libs/ui/src/organisms/modal-backoffice/modal.stories.tsx @@ -0,0 +1,373 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ModalBackoffice } from './modal-backoffice'; +import { InputForm } from '../../molecules'; +import { Button } from '../../atoms'; + +const meta: Meta = { + title: 'Organisms/Modal Backoffice', + component: ModalBackoffice, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + // isOpen: true, + // onClose: () => console.log('Modal closed'), + // title: 'Sample Modal', + children: ( + <> +

+ Modal Title +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repellat + rerum doloremque dolorem fugit architecto eos blanditiis ratione + facere? Esse dolores inventore deleniti. Dicta voluptatem dolore vel + quia amet dolorem? +

+
+ + ), + }, +}; + +export const TambahItemGacha: Story = { + args: { + children: ( +
+
+

+ Tambah Item Gacha +

+

+ Lengkapi detail di bawah ini untuk menambahkan item gacha +

+
+
+ + + +
+ +
+ ), + }, +}; + +export const TambahItem: Story = { + args: { + children: ( +
+
+

+ Tambah Item +

+

+ Apakah kamu yakin ingin +
menambahkan item ini? +

+
+
+ + +
+
+ ), + }, +}; + +export const EditItemGacha: Story = { + args: { + children: ( +
+
+

+ Edit Item Gacha +

+

+ Silakan mengubah detail dari item yang diperlukan +

+
+
+ + + +
+ +
+ ), + }, +}; + +export const UpdateItem: Story = { + args: { + children: ( +
+
+

+ Update Item +

+

+ Apakah kamu yakin dengan +
perubahan yang dilakukan? +

+
+
+ + +
+
+ ), + }, +}; + +export const DeleteItem: Story = { + args: { + children: ( +
+ Delete item? +
+

+ Delete Item +

+

+ Apakah kamu yakin untuk menghapus item ini? +

+
+
+ + +
+
+ ), + }, +}; + +export const EditDataAkun: Story = { + args: { + children: ( +
+

+ Edit Data Akun +

+ +
+ + + + +
+ +
+ ), + }, +}; + +export const UpdateDataAkun: Story = { + args: { + children: ( +
+
+

+ Update Data +

+

+ Apakah kamu yakin dengan +
perubahan yang dilakukan? +

+
+
+ + +
+
+ ), + }, +}; + +export const ValidasiTransaksi: Story = { + args: { + children: ( +
+

+ Validasi Transaksi +

+ + +
+ + +
+
+ ), + }, +}; + +export const ProsesDelivery: Story = { + args: { + children: ( +
+
+

+ Delivery Process +

+ +

+ Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika + sudah ubah status menjadi “Delivered”. +

+
+ +
+ + + + +
+ +
+ ), + }, +};