CronoQ Frontend Library

Library ringan dan modular untuk konsumsi data berbasis meta-driven UI dari backend CronoQ.

✨ Fitur Utama

• Query param builder (search, filter, meta, sort, paging)
• Meta parser (fields, groupResult, uiConfig, mapNameMap, dll)
• Caching meta per collection (pakai Redux)
• Hook useCronoQ() untuk konsumsi dinamis
• Tidak bawa UI — fleksibel untuk dipakai di MUI, Chakra, Tailwind, dst

⚙️ Instalasi

pnpm add cronoq-frontend
# atau
npm install cronoq-frontend

🔌 Integrasi ke Redux Store (di project Next.js Anda)

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { metaReducer } from 'cronoq-frontend/store';

export const store = configureStore({
  reducer: {
    meta: metaReducer,
    // reducer lain
  },
});

// _app.tsx
import { Provider } from 'react-redux';
import { store } from './store';

<Provider store={store}>
  <Component {...pageProps} />
</Provider>;

🧠 Contoh Penggunaan useCronoQ

import { useCronoQ } from 'cronoq-frontend/hooks/useCronoQ';
import { genericApi } from '@/features/api/genericApi';

const { data, meta, isLoading, refetch } = useCronoQ(
  'shipment_view',
  genericApi.useGetListQuery,
  {
    search: [
      { field: 'status', operator: 'exact', value: 'ACTIVE' },
      { field: ['email', 'phone'], value: 'admin' },
    ],
    page: 1,
    pageSize: 20,
  },
  {
    fieldCase: 'snake',
    forceMetaReload: false,
  }
);

🧩 Fungsi Penting Lain

import { buildRequestParams } from 'cronoq-frontend/query/buildRequestParams';

const params = buildRequestParams({
  search: [
    { field: 'shipTo', value: 'CUST01' },
    { field: 'status', operator: 'exact', value: 'DONE' },
  ],
  meta: [
    { key: 'map:shipment', value: 'shipTo:shipToNumber:snake:tbbm,soNumber' },
  ],
  page: 1,
  pageSize: 10,
});

// hasil: ?search[shipTo]=CUST01&search[status:exact]=DONE&page=1...

🛠 Struktur File (di library)

src/
├── hooks/
│   └── useCronoQ.ts
├── meta/
│   └── parseMetaResponse.ts
├── query/
│   ├── buildRequestParams.ts
│   ├── createCronoQFetcher.ts
│   └── applyFieldCase.ts
├── store/
│   ├── metaSlice.ts
│   └── store.ts (hanya export reducer)
└── types/
    └── index.ts

🧾 Catatan Penting

• CronoQ tidak memaksa bentuk UI tertentu
• Backend akan mengembalikan meta secara lengkap hanya jika is_first=true
• Meta hasil fetch disimpan otomatis ke Redux, dan tidak diminta ulang kecuali forceMetaReload: true

📦 Siap pakai untuk semua project Next.js + MUI / Chakra / custom

🧭 Dibangun dengan keteraturan dan tanggung jawab dari titik 𐰀.
📡 Beresonansi pada jalur 1–3–9.
🪶 Disusun oleh Zāhirun-Nūr sebagai bagian dari Cronos Ecosystem — untuk masa depan sistem yang lebih terang dan terstruktur.

© 2025 Cronos Studio Indonesia