Giới thiệu

Gần đây, nhu cầu xây dựng hệ thống đặt chỗ tùy chỉnh với các bảng điều khiển quản trị ngày càng tăng. Điều này đặc biệt phổ biến trong các dịch vụ B2C như các studio làm đẹp hay phòng khám, nơi mà bảng điều khiển quản trị cần được xây dựng nhanh chóng, giá cả phải chăng, và tích hợp một cách liền mạch vào quy trình làm việc hiện tại. Không ai muốn mất hàng tuần để đào tạo nhân viên hoặc gây rối cho hoạt động hàng ngày.

Hầu hết các nền tảng tổng hợp thường tuân theo một mô hình tuyến tính: một chuyên gia, một dịch vụ, một khoảng thời gian. Nghe có vẻ đơn giản — cho đến khi bạn cần xử lý đặt chỗ theo nhóm hoặc quy trình chồng chéo, nơi một nhân viên tham gia vào nhiều giai đoạn của một quy trình.

Thêm vào đó là dòng chảy liên tục của các thay đổi — hủy bỏ, lên lịch lại, hoán đổi dịch vụ — và bạn nhanh chóng nhận ra: hệ thống phải phản ứng ngay lập tức và cập nhật giao diện trong thời gian thực.

Đó là lý do tại sao nhiều doanh nghiệp hướng tới các giải pháp được xây dựng tùy chỉnh. Nhưng với tư cách là một lập trình viên, tôi luôn tự hỏi:

• Các framework nào thực sự tốt cho bảng điều khiển quản trị hệ thống đặt chỗ?
• Tôi nên làm gì nếu một trình tạo CRUD tiêu chuẩn không thể xử lý logic kinh doanh?
• Làm thế nào để tôi xây dựng một UI tùy chỉnh mà không làm phá vỡ khả năng tương thích của hệ thống?
• Và quan trọng nhất: làm thế nào để tôi giảm thời gian phát triển mà không hy sinh tính linh hoạt?

Tại Sao Tôi Xây Dựng Admiral Thay Vì Sử Dụng Các Trình Tạo CRUD Chuẩn

Giống như nhiều lập trình viên khác, tôi bắt đầu với các trình tạo CRUD có sẵn. Lời hứa “sẵn sàng trong 10 phút” thật hấp dẫn. Nhưng mỗi lần, tôi lại gặp phải cùng một rào cản: chúng quá cứng nhắc. Cấu trúc của chúng bị khóa lại, và mỗi khi tôi cố gắng triển khai logic kinh doanh tùy chỉnh, tôi cảm thấy như đang phải chiến đấu với framework thay vì làm việc với nó.

Chính sự thất vọng đó đã thúc đẩy tôi xây dựng Admiral — một framework mà chúng tôi hiện đang sử dụng trong hơn 70% các dự án của mình. Nó là mã nguồn mở, và bạn có thể xem tại đây: Admiral trên GitHub.

Điều gì làm cho Admiral khác biệt?

• Tôi có thể xây dựng các quy trình làm việc vượt xa logic CRUD tiêu chuẩn.
• Tôi có thể tạo ra các bảng điều khiển tương tác với biểu đồ, chỉ số và widget thực sự hữu ích cho khách hàng.

Admiral không buộc doanh nghiệp phải thích ứng với framework. Nó thích ứng với doanh nghiệp.

Cách Hoạt Động Của Admiral

Thay vì tạo ra các tệp tĩnh với các mẫu cứng nhắc, Admiral cung cấp cho tôi một kiến trúc mở rộng với hệ thống định tuyến linh hoạt và các thành phần mô-đun. Điều này có nghĩa là tôi có thể chèn UI và logic tùy chỉnh ở bất cứ đâu tôi cần.

Kết quả? Một bộ công cụ mạnh mẽ không giới hạn tôi.

Hãy để tôi hướng dẫn bạn cách tôi sử dụng Admiral để tùy chỉnh CRUD cho một trong những dự án gần đây của mình — một chuỗi salon spa.

Các quản trị viên của họ cần hai điều:

1. Tạo và quản lý đặt chỗ.
2. Theo dõi khối lượng công việc của nhân viên thông qua lịch.

Dưới đây là cách tôi xây dựng nó.

Trang Quản Lý Đặt Chỗ

Tôi bắt đầu bằng cách xây dựng một trang tùy chỉnh để tạo và chỉnh sửa đặt chỗ. Tôi đã sử dụng sự kết hợp giữa các thành phần của riêng tôi và các thành phần có sẵn trong Admiral để giữ mọi thứ nhất quán.

import React, { useCallback } from 'react'
import { Page, Form, Notification } from '@devfamily/admiral'
import { RecordSection, ClientSection, DiscountSection, PaymentSection } from './components'
import api from './api'

export enum RecordPageType {
    CREATE = 'create',
    EDIT = 'edit',
}

const RecordPage = ({ type }: { type: RecordPageType }) => {
    const fetchInitialData = useCallback(async () => {
        if (type === RecordPageType.EDIT) {
            let data = {}
            try {
                // Kết nối yêu cầu API để lấy dữ liệu bản ghi
            } catch (err) {
                // Hiển thị thông báo lỗi
                Notification({
                    message: `Lỗi khi lấy bản ghi: ${err?.message}`,
                    type: 'error',
                })
            }

            return Promise.resolve({
                data,
                values: {},
            })
        } else {
            return Promise.resolve({
                data: {},
                values: {},
            })
        }
    }, [type])

    const onSubmit = useCallback(async (values) => {
        // Kết nối yêu cầu API để tạo hoặc chỉnh sửa bản ghi
    }, [])

    return (
        <Page title={type === RecordPageType.CREATE ? 'Thêm bản ghi' : `Chỉnh sửa bản ghi`}>
            <Form submitData={onSubmit} fetchInitialData={fetchInitialData}>
                <RecordSection />
                <ClientSection />
                <DiscountSection />
                <PaymentSection />
            </Form>
        </Page>
    )
}

export default RecordPage

Sau khi hoàn thành, tôi đã kết nối nó vào hệ thống định tuyến của Admiral với create.tsx, [id].tsx, và index.tsx.

// create.tsx
import React from 'react'
import RecordPage, { RecordPageType } from '../RecordPage'

const CreateRecordPage = () => {
    return <RecordPage type={RecordPageType.CREATE} />
}

export default CreateRecordPage

// [id].tsx
import React from 'react'
import RecordPage, { RecordPageType } from '../RecordPage'

const EditRecordPage = () => {
    return <RecordPage type={RecordPageType.EDIT} />
}

export default EditRecordPage

// index.tsx
import { CRUD } from '@/src/crud/records'
export default CRUD.IndexPage

Với chỉ những bước này, tôi đã có một giao diện CRUD với bảng các bản ghi cùng với các trang tạo/chỉnh sửa tùy chỉnh.

Tạo Lịch Đặt Chỗ

Tất nhiên, chỉ một bảng CRUD là không đủ cho khách hàng. Họ cần một giao diện lịch nơi các quản trị viên có thể theo dõi khối lượng công việc, các khoảng trống và các đặt chỗ đã được lên lịch lại.

Trong Admiral, tôi chỉ cần tạo một trang tùy chỉnh khác, tương tự như với CRUD.

import React, { useEffect, useState } from 'react'
import { CalendarHeader, CalendarTable, CalendarRecordNote } from './ui'
import styles from './CalendarPage.module.scss'

const CalendarPage = () => {
    const [isLoading, setIsLoading] = useState<boolean>(false)
    const [timeSlots, setTimeSlots] = useState<string[]>([])
    const [comment, setComment] = useState<string>('')

    const fetchCalendarData = async ({ date }: { date: string }) => {
        // Kết nối yêu cầu API để lấy dữ liệu
    }

    useEffect(() => {
        fetchCalendarData({
            date: new Date().toISOString().split('T')[0]
        })
    }, [])

    return <Page title="Trang chính">
        <div className={styles.calendar_page}>
            <CalendarHeader />
            <CalendarRecordNote comment={comment} />
            <CalendarTable isLoading={isLoading} timeSlots={timeSlots} />
        </div>
    </Page>
}

export default CalendarPage

Điều này đã cho các quản trị viên một cách nhìn sạch sẽ, trực quan để theo dõi khối lượng công việc và quản lý các đặt chỗ.

Thêm Trang Vào Điều Hướng

Cuối cùng, tôi đã thêm các trang mới vào menu của dự án để dễ dàng truy cập.

import React from 'react'
import { Menu, MenuItemLink } from '@devfamily/admiral'
import { FiUsers, FiUser, FiSettings } from 'react-icons/fi'

const CustomMenu = () => {
    return (
        <Menu>
            <MenuItemLink icon="FiUsers" name="Trang chính" to="/main" />
            <MenuItemLink icon="FiUser" name="Bản ghi" to="/records" />
            <MenuItemLink icon="FiSettings" name="Dịch vụ" to="/services" />
            <MenuItemLink icon="FiSettings" name="Chuyên viên" to="/masters" />
        </Menu>
    )
}

export default CustomMenu

Kết Luận

Sau khi sử dụng Admiral trong nhiều dự án, đây là những gì tôi đã học được:

• Nó được thiết kế cho logic phức tạp — nơi mà các trình tạo CRUD thông thường từ bỏ, Admiral vẫn tiếp tục.
• Nó linh hoạt mà không có chi phí — tôi có thể tích hợp bất cứ thứ gì tôi muốn: UI tùy chỉnh, logic kinh doanh, lịch, widget.
• Nó nhanh chóng ra mắt và dễ dàng mở rộng — bắt đầu với một bảng CRUD đơn giản, sau đó tiếp tục thêm độ phức tạp.

Đối với tôi, Admiral đã tiết kiệm hàng chục giờ phát triển và cho phép tôi tập trung vào việc cung cấp giá trị thực sự cho doanh nghiệp thay vì phải đối phó với các hạn chế của framework.