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/app/page.tsx b/apps/gacha/src/app/page.tsx index eefefed..6cac5b2 100644 --- a/apps/gacha/src/app/page.tsx +++ b/apps/gacha/src/app/page.tsx @@ -1,9 +1,9 @@ import { ArrowDownOutlined } from '@ant-design/icons'; import { Button } from '@imphnen-frontend-service/ui/atoms'; -import { ModalsGacha } from '@imphnen-frontend-service/ui/organisms'; +import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules'; import { cn } from '@imphnen-frontend-service/utils'; import { FC, Fragment, ReactElement, useEffect, useState } from 'react'; -import { createPortal } from 'react-dom'; +import { Link } from 'react-router'; interface GachaItemProps { src: string; @@ -14,7 +14,6 @@ interface GachaItemProps { export const Components: FC = (): ReactElement => { // Pinjem const [showModal, setShowModal] = useState(false); - // const scrollToRoulette = () => { const rouletteSection = document.getElementById('roulette'); @@ -222,16 +221,58 @@ export const Components: FC = (): ReactElement => {
{/**Izin pake untuk debug modals gacha */} -
-

Debug : Test Modals Gacha

- -
- {showModal && createPortal( - , - document.body - )} + + setShowModal(false)} + > + + +

+ Login +

+ + + + + +

+ Lupa Password? +

+ + + + +
+

Belum punya akun?

+ + Daftar disini + +
+ + {/**Izin pake untuk debug modals gacha */} ); 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/index.ts b/libs/ui/src/molecules/index.ts index 2dd96d6..7349f9a 100644 --- a/libs/ui/src/molecules/index.ts +++ b/libs/ui/src/molecules/index.ts @@ -1,4 +1,5 @@ export * from "./forgot-step"; export * from "./otp-form"; export * from './input-form'; -export * from './pagination'; \ No newline at end of file +export * from './pagination'; +export * from './modal/modal'; 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/molecules/modal/index.tsx b/libs/ui/src/molecules/modal/index.tsx new file mode 100644 index 0000000..2f0d9ba --- /dev/null +++ b/libs/ui/src/molecules/modal/index.tsx @@ -0,0 +1,190 @@ +import { CloseOutlined } from '@ant-design/icons'; +import { cn } from '@imphnen-frontend-service/utils'; +import React, { useEffect, useMemo, useCallback } from 'react'; +import { createPortal } from 'react-dom'; + +interface ModalProps { + isOpen: boolean; + onClose: () => void; + children: React.ReactNode; + className?: string; + overlayClassName?: string; + closeButtonClassName?: string; + disableEscapeKeyDown?: boolean; + 'aria-label'?: string; + 'aria-labelledby'?: string; + 'aria-describedby'?: string; +} + +const Modal = ({ + isOpen, + onClose, + children, + className, + overlayClassName, + closeButtonClassName, + disableEscapeKeyDown = false, + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + 'aria-describedby': ariaDescribedBy, +}: ModalProps) => { + const handleEscapeKey = useCallback( + (event: KeyboardEvent) => { + if (event.key === 'Escape' && isOpen && !disableEscapeKeyDown) { + onClose(); + } + }, + [isOpen, onClose, disableEscapeKeyDown] + ); + + useEffect(() => { + if (isOpen) { + document.body.style.overflow = 'hidden'; + window.addEventListener('keydown', handleEscapeKey); + } else { + document.body.style.overflow = ''; + } + + return () => { + document.body.style.overflow = ''; + window.removeEventListener('keydown', handleEscapeKey); + }; + }, [isOpen, handleEscapeKey]); + + const modalNode = useMemo(() => document.createElement('div'), []); + + useEffect(() => { + document.body.appendChild(modalNode); + return () => { + document.body.removeChild(modalNode); + }; + }, [modalNode]); + + if (!isOpen) return null; + + return createPortal( +
+
+
+ {children} + +
+
, + modalNode + ); +}; + +interface ModalHeaderProps { + className?: string; + children: React.ReactNode; +} + +const ModalHeader = ({ className, children }: ModalHeaderProps) => ( +
+ {children} +
+); + +interface ModalContentProps { + className?: string; + children: React.ReactNode; +} + +const ModalContent = ({ className, children }: ModalContentProps) => ( +
{children}
+); + +interface ModalFooterProps { + className?: string; + children: React.ReactNode; +} + +const ModalFooter = ({ className, children }: ModalFooterProps) => ( +
+ {children} +
+); + +interface ModalTitleProps { + className?: string; + children: React.ReactNode; + id?: string; +} + +const ModalTitle = ({ className, children, id }: ModalTitleProps) => ( +

+ {children} +

+); + +interface ModalDescriptionProps { + className?: string; + children: React.ReactNode; + id?: string; +} + +const ModalDescription = ({ + className, + children, + id, +}: ModalDescriptionProps) => ( +

+ {children} +

+); + +Modal.Header = ModalHeader; +Modal.Content = ModalContent; +Modal.Footer = ModalFooter; +Modal.Title = ModalTitle; +Modal.Description = ModalDescription; + +export { Modal }; +export type { + ModalProps, + ModalHeaderProps, + ModalContentProps, + ModalFooterProps, + ModalTitleProps, + ModalDescriptionProps, +}; diff --git a/libs/ui/src/molecules/modal/modal.spec.tsx b/libs/ui/src/molecules/modal/modal.spec.tsx new file mode 100644 index 0000000..d4bf088 --- /dev/null +++ b/libs/ui/src/molecules/modal/modal.spec.tsx @@ -0,0 +1,106 @@ +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { Modal } from './modal'; +import { vi } from 'vitest'; + +describe('Modal Component', () => { + const defaultProps = { + isOpen: true, + onClose: vi.fn(), + children:
Modal Content
, + }; + + afterEach(() => { + vi.clearAllMocks(); + }); + + it('renders when isOpen is true', () => { + render(); + expect(screen.getByText('Modal Content')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); + expect(screen.getByLabelText('Close modal')).toBeInTheDocument(); + }); + + it('does not render when isOpen is false', () => { + render(); + expect(screen.queryByText('Modal Content')).not.toBeInTheDocument(); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); + }); + + it('calls onClose when close button is clicked', async () => { + render(); + fireEvent.click(screen.getByLabelText('Close modal')); + await waitFor(() => expect(defaultProps.onClose).toHaveBeenCalledTimes(1)); + }); + + it('calls onClose when overlay is clicked', async () => { + render(); + fireEvent.click(screen.getByRole('presentation')); + await waitFor(() => expect(defaultProps.onClose).toHaveBeenCalledTimes(1)); + }); + + it('closes on Escape key press when disableEscapeKeyDown is false', async () => { + render(); + fireEvent.keyDown(window, { key: 'Escape' }); + await waitFor(() => expect(defaultProps.onClose).toHaveBeenCalledTimes(1)); + }); + + it('does not close on Escape key press when disableEscapeKeyDown is true', async () => { + render(); + fireEvent.keyDown(window, { key: 'Escape' }); + await waitFor(() => expect(defaultProps.onClose).not.toHaveBeenCalled()); + }); + + it('renders sub-components correctly', () => { + render( + + + Modal Title + Modal Description + + Modal Content + + + + + ); + + expect(screen.getByText('Modal Title')).toBeInTheDocument(); + expect(screen.getByText('Modal Description')).toBeInTheDocument(); + expect(screen.getByText('Modal Content')).toBeInTheDocument(); + expect(screen.getByText('Footer Button')).toBeInTheDocument(); + }); + + it('applies custom classNames', () => { + render( + + ); + expect(screen.getByRole('dialog')).toHaveClass('custom-modal'); + expect(screen.getByRole('presentation')).toHaveClass('custom-overlay'); + expect(screen.getByLabelText('Close modal')).toHaveClass('custom-close'); + }); + + it('sets ARIA attributes correctly', () => { + render( + + + Title + Description + + + ); + const modal = screen.getByRole('dialog'); + expect(modal).toHaveAttribute('aria-label', 'Test Modal'); + expect(modal).toHaveAttribute('aria-labelledby', 'modal-title'); + expect(modal).toHaveAttribute('aria-describedby', 'modal-desc'); + }); +}); diff --git a/libs/ui/src/molecules/modal/modal.stories.tsx b/libs/ui/src/molecules/modal/modal.stories.tsx new file mode 100644 index 0000000..c3ea08a --- /dev/null +++ b/libs/ui/src/molecules/modal/modal.stories.tsx @@ -0,0 +1,84 @@ +import { Modal } from './modal'; +import { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + title: 'Components/Modal', + component: Modal, + argTypes: { + isOpen: { control: 'boolean' }, + onClose: { action: 'closed' }, + className: { control: 'text' }, + overlayClassName: { control: 'text' }, + closeButtonClassName: { control: 'text' }, + disableEscapeKeyDown: { control: 'boolean' }, + 'aria-label': { control: 'text' }, + 'aria-labelledby': { control: 'text' }, + 'aria-describedby': { control: 'text' }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + onClose: () => { + console.log('Modal closed'); + }, + children: ( + <> + + Modal Title + + This is a simple modal description. + + + This is the main content of the modal. + + + + + + ), + }, +}; + +export const CustomClasses: Story = { + args: { + ...Default.args, + className: 'bg-red-100', + overlayClassName: 'bg-opacity-50', + closeButtonClassName: 'text-red-500', + }, +}; + +export const NoEscapeClose: Story = { + args: { + ...Default.args, + disableEscapeKeyDown: true, + }, +}; + +export const WithAria: Story = { + args: { + ...Default.args, + 'aria-label': 'Custom Modal', + 'aria-labelledby': 'modal-title', + 'aria-describedby': 'modal-desc', + children: ( + <> + + Modal Title + + This is a modal with ARIA attributes. + + + Modal content here. + + ), + }, +}; diff --git a/libs/ui/src/molecules/modal/modal.tsx b/libs/ui/src/molecules/modal/modal.tsx new file mode 100644 index 0000000..2f0d9ba --- /dev/null +++ b/libs/ui/src/molecules/modal/modal.tsx @@ -0,0 +1,190 @@ +import { CloseOutlined } from '@ant-design/icons'; +import { cn } from '@imphnen-frontend-service/utils'; +import React, { useEffect, useMemo, useCallback } from 'react'; +import { createPortal } from 'react-dom'; + +interface ModalProps { + isOpen: boolean; + onClose: () => void; + children: React.ReactNode; + className?: string; + overlayClassName?: string; + closeButtonClassName?: string; + disableEscapeKeyDown?: boolean; + 'aria-label'?: string; + 'aria-labelledby'?: string; + 'aria-describedby'?: string; +} + +const Modal = ({ + isOpen, + onClose, + children, + className, + overlayClassName, + closeButtonClassName, + disableEscapeKeyDown = false, + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + 'aria-describedby': ariaDescribedBy, +}: ModalProps) => { + const handleEscapeKey = useCallback( + (event: KeyboardEvent) => { + if (event.key === 'Escape' && isOpen && !disableEscapeKeyDown) { + onClose(); + } + }, + [isOpen, onClose, disableEscapeKeyDown] + ); + + useEffect(() => { + if (isOpen) { + document.body.style.overflow = 'hidden'; + window.addEventListener('keydown', handleEscapeKey); + } else { + document.body.style.overflow = ''; + } + + return () => { + document.body.style.overflow = ''; + window.removeEventListener('keydown', handleEscapeKey); + }; + }, [isOpen, handleEscapeKey]); + + const modalNode = useMemo(() => document.createElement('div'), []); + + useEffect(() => { + document.body.appendChild(modalNode); + return () => { + document.body.removeChild(modalNode); + }; + }, [modalNode]); + + if (!isOpen) return null; + + return createPortal( +
+
+
+ {children} + +
+
, + modalNode + ); +}; + +interface ModalHeaderProps { + className?: string; + children: React.ReactNode; +} + +const ModalHeader = ({ className, children }: ModalHeaderProps) => ( +
+ {children} +
+); + +interface ModalContentProps { + className?: string; + children: React.ReactNode; +} + +const ModalContent = ({ className, children }: ModalContentProps) => ( +
{children}
+); + +interface ModalFooterProps { + className?: string; + children: React.ReactNode; +} + +const ModalFooter = ({ className, children }: ModalFooterProps) => ( +
+ {children} +
+); + +interface ModalTitleProps { + className?: string; + children: React.ReactNode; + id?: string; +} + +const ModalTitle = ({ className, children, id }: ModalTitleProps) => ( +

+ {children} +

+); + +interface ModalDescriptionProps { + className?: string; + children: React.ReactNode; + id?: string; +} + +const ModalDescription = ({ + className, + children, + id, +}: ModalDescriptionProps) => ( +

+ {children} +

+); + +Modal.Header = ModalHeader; +Modal.Content = ModalContent; +Modal.Footer = ModalFooter; +Modal.Title = ModalTitle; +Modal.Description = ModalDescription; + +export { Modal }; +export type { + ModalProps, + ModalHeaderProps, + ModalContentProps, + ModalFooterProps, + ModalTitleProps, + ModalDescriptionProps, +}; 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 b94d45a..b8af5de 100644 --- a/libs/ui/src/organisms/index.ts +++ b/libs/ui/src/organisms/index.ts @@ -3,3 +3,4 @@ export * from "./modals-gacha"; export * from "./auth-banner"; 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”. +

+
+ +
+ + + + +
+ +
+ ), + }, +}; diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx index e6822e7..f431833 100644 --- a/libs/ui/src/organisms/navbar/navbar.tsx +++ b/libs/ui/src/organisms/navbar/navbar.tsx @@ -40,6 +40,14 @@ export const Navbar: FC = (): ReactElement => { Merch Gacha +
  • + +
    • )}