import React from 'react';

import { AppProvider, FormProvider, MainCard, RHFTextField, StanstackTable } from '@libeyondea/base-cms';
import { useForm } from 'react-hook-form';

function App() {
    const methods = useForm();

    return (
        <AppProvider>
            <MainCard>
                <FormProvider methods={methods}>
                    <RHFTextField name="title" label="Tiêu đề" />
                </FormProvider>
                <StanstackTable data={[]} columns={[]} />
            </MainCard>
        </AppProvider>
    );
}

export default App;

import { axiosInstance } from '@libeyondea/base-cms';

// Sử dụng axios instance đã được cấu hình
const response = await axiosInstance.get('/api/users');

import { generateColorPalette, getContrastColor } from '@libeyondea/base-cms';

const colors = generateColorPalette('#1976d2');
const contrastColor = getContrastColor('#ffffff');

import { formatDate, formatDateTime, formatTime } from '@libeyondea/base-cms';

const formattedDate = formatDate(new Date());
const formattedTime = formatTime(new Date());
const formattedDateTime = formatDateTime(new Date());

import { formatCurrency, formatNumber, formatPhone } from '@libeyondea/base-cms';

const currency = formatCurrency(1000000); // "1,000,000 VND"
const number = formatNumber(1234.56); // "1,234.56"
const phone = formatPhone('0123456789'); // "0123 456 789"

import { getCookie, removeCookie, setCookie } from '@libeyondea/base-cms';

setCookie('token', 'abc123', 7); // 7 ngày
const token = getCookie('token');
removeCookie('token');

import { useStateValue } from '@libeyondea/base-cms';

function MyComponent() {
    const { state, dispatch } = useStateValue();

    return <div>{state.user?.name}</div>;
}

import { useAudioPlayer } from '@libeyondea/base-cms';

function AudioComponent() {
    const { play, pause, stop, isPlaying } = useAudioPlayer('/audio/sound.mp3');

    return (
        <div>
            <button onClick={play}>Play</button>
            <button onClick={pause}>Pause</button>
            <button onClick={stop}>Stop</button>
        </div>
    );
}

import { AppProvider, createCustomTheme } from '@libeyondea/base-cms';

const customTheme = createCustomTheme('light');

function App() {
    return <AppProvider customTheme={customTheme}>{/* Your app content */}</AppProvider>;
}

import { getThemeSpacing, themeValues } from '@libeyondea/base-cms';

const spacing = getThemeSpacing(2); // "16px"
const borderRadius = themeValues.borderRadius.medium; // 12

import { REQUIRED_MESSAGE, STATUS_CONSTANT, USER_CONSTANT, WEEK_DAYS } from '@libeyondea/base-cms';

// Sử dụng constants
const message = REQUIRED_MESSAGE; // "Trường này là bắt buộc"
const users = USER_CONSTANT; // [{ id: 0, name: 'Quản trị viên' }, ...]
const statuses = STATUS_CONSTANT; // [{ id: 0, name: 'Không hoạt động' }, ...]
const days = WEEK_DAYS; // [{ id: '0', name: 'CN' }, ...]

import { BaseService } from '@libeyondea/base-cms';

class UserService extends BaseService {
    constructor() {
        super('/users');
    }

    async getUsers() {
        return this.get('/');
    }

    async createUser(data: any) {
        return this.post('/', data);
    }
}

const userService = new UserService();

import React from 'react';

import { yupResolver } from '@hookform/resolvers/yup';
import { AppProvider, FormProvider, MainCard, RHFDatePicker, RHFPhone, RHFSelect, RHFTextField } from '@libeyondea/base-cms';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object({
    name: yup.string().required('Tên là bắt buộc'),
    email: yup.string().email('Email không hợp lệ').required('Email là bắt buộc'),
    phone: yup.string().required('Số điện thoại là bắt buộc'),
    birthDate: yup.date().required('Ngày sinh là bắt buộc'),
    role: yup.number().required('Vai trò là bắt buộc')
});

function RegisterForm() {
    const methods = useForm({
        resolver: yupResolver(schema),
        defaultValues: {
            name: '',
            email: '',
            phone: '',
            birthDate: null,
            role: 0
        }
    });

    const onSubmit = (data: any) => {
        console.log(data);
    };

    return (
        <AppProvider>
            <MainCard title="Đăng ký người dùng">
                <FormProvider methods={methods} onSubmit={onSubmit}>
                    <RHFTextField name="name" label="Họ và tên" />
                    <RHFTextField name="email" label="Email" type="email" />
                    <RHFPhone name="phone" label="Số điện thoại" />
                    <RHFDatePicker name="birthDate" label="Ngày sinh" />
                    <RHFSelect name="role" label="Vai trò" options={USER_CONSTANT} />
                    <button type="submit">Đăng ký</button>
                </FormProvider>
            </MainCard>
        </AppProvider>
    );
}

import React from 'react';

import { AppProvider, MainCard, StanstackTable } from '@libeyondea/base-cms';

const columns = [
    {
        accessorKey: 'id',
        header: 'ID'
    },
    {
        accessorKey: 'name',
        header: 'Tên'
    },
    {
        accessorKey: 'email',
        header: 'Email'
    },
    {
        accessorKey: 'status',
        header: 'Trạng thái',
        cell: ({ getValue }: any) => <StatusChip status={getValue() === 1 ? 'active' : 'inactive'} label={getValue() === 1 ? 'Hoạt động' : 'Không hoạt động'} />
    }
];

const data = [
    { id: 1, name: 'Nguyễn Văn A', email: 'a@example.com', status: 1 },
    { id: 2, name: 'Trần Thị B', email: 'b@example.com', status: 0 }
];

function UserTable() {
    return (
        <AppProvider>
            <MainCard title="Danh sách người dùng">
                <StanstackTable data={data} columns={columns} enablePagination enableSorting enableFiltering />
            </MainCard>
        </AppProvider>
    );
}