Faktanya: 77% pemimpin bisnis di Indonesia melihat AI sebagai peluang pertumbuhan utama di manufaktur.
Namun, laporan IBM juga mencatat hanya 11% organisasi manufaktur di Asia Pasifik yang berada pada tingkat kematangan AI yang lebih tinggi.
Artinya: ada kesenjangan besar antara optimisme dan eksekusi teknis. Di sinilah peran developer seperti kita.
Pertanyaannya bukan lagi "apakah manufaktur butuh AI?", tapi "bagaimana cara membangun sistem prediktif yang ringan, aman, dan siap produksi dengan stack modern?"
Adopsi AI di manufaktur Indonesia terus tumbuh. Fokus utamanya ada pada manajemen inventaris, peramalan permintaan, dan pemrosesan data. Sementara itu, penelitian dari ScienceDirect baru-baru ini membuktikan bahwa algoritma machine learning mampu mencapai akurasi lebih dari 87% untuk memprediksi waktu produksi, dengan error rata-rata kurang dari satu hari.
Nah, bagaimana jika kita menggabungkan keduanya?
Membangun sebuah sistem yang bisa menghitung estimasi harga dan waktu produksi untuk bisnis konveksi. Bukan sekadar kalkulator biasa, tapi sebuah sistem yang:
- Melakukan validasi input secara ketat.
- Mendukung multi-role (admin, customer service, klien).
- Menjaga keamanan data dengan Row Level Security (RLS) Supabase.
Kenapa topik ini penting?
Karena sebagian besar pelaku UMKM konveksi masih menggunakan cara manual (Excel, WA, atau bahkan kalkulator fisik) untuk menghitung pesanan. Akibatnya, prediksi lead time produksi sering meleset, harga jual tidak konsisten, dan klien besar ragu untuk percaya. Dengan sistem ini, kita tidak hanya membantu UMKM, tapi juga membangun fondasi digital yang kokoh.
Mari kita bedah studi kasusnya.
1. Arsitektur Sistem: Next.js Sebagai Tulang Punggung
Setiap sistem yang baik dimulai dari arsitektur yang jelas. Di proyek ini, kita menggunakan:
- Next.js (App Router) sebagai full-stack framework.
- Supabase untuk autentikasi, database PostgreSQL, dan RLS.
- TypeScript untuk type safety yang ketat.
- Tailwind CSS untuk UI yang cepat.
Catatan: Pilihan stack ini bukan tanpa alasan. Kombinasi Next.js + Supabase sudah menjadi favorit banyak indie developer karena kemudahan deployment dan skalabilitasnya.
1.1. Struktur Folder yang Disarankan
├── app/
│ ├── (auth)/
│ ├── (dashboard)/
│ │ ├── admin/
│ │ ├── cs/
│ │ └── client/
│ ├── api/
│ │ ├── estimate/
│ │ └── production/
│ └── layout.tsx
├── components/
├── lib/
│ ├── supabase/
│ └── validations/
├── types/
└── middleware.ts
1.2. Mengapa Middleware Penting?
Di middleware.ts, kita bisa melakukan validasi akses sebelum halaman dirender. Ini mencegah user yang tidak memiliki role tertentu mengakses route admin atau cs.
// middleware.ts
export async function middleware(req: NextRequest) {
const supabase = createMiddlewareClient(req);
const { data: { user } } = await supabase.auth.getUser();
if (!user) return NextResponse.redirect(new URL('/login', req.url));
const { data: profile } = await supabase
.from('profiles')
.select('role')
.eq('id', user.id)
.single();
if (req.nextUrl.pathname.startsWith('/admin') && profile?.role !== 'admin') {
return NextResponse.redirect(new URL('/unauthorized', req.url));
}
return NextResponse.next();
}
Dengan pola ini, validasi role sudah terjadi di level request, bukan hanya di UI.
2. Tabel Database dan Skema Relasi
Setelah arsitektur siap, kita perlu merancang skema database.
Berikut adalah tabel-tabel utama yang dibutuhkan:
2.1. Tabel products
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | uuid | Primary key |
| name | text | Nama produk (contoh: "Baju Gamis Dewasa") |
| base_price | integer | Harga dasar per unit (dalam rupiah) |
| production_time_days | integer | Waktu produksi standar (hari) |
| category | text | Kategori (gamis, jersey, seragam, dll) |
2.2. Tabel orders
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | uuid | Primary key |
| client_id | uuid | Foreign key ke profiles
|
| product_id | uuid | Foreign key ke products
|
| quantity | integer | Jumlah pesanan |
| estimated_price | integer | Hasil kalkulasi harga akhir |
| estimated_lead_time | integer | Hasil prediksi lead time produksi |
| status | text | pending, approved, production, done |
| created_at | timestamp | Waktu order dibuat |
2.3. Tabel profiles
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | uuid | Primary key (sama dengan auth.users) |
| full_name | text | Nama lengkap |
| role | text | admin, cs, client |
| company_name | text | Nama perusahaan (untuk klien korporat) |
2.4. Row Level Security (RLS) yang Wajib Diterapkan
-- Client hanya bisa melihat order miliknya sendiri
CREATE POLICY "Client can view own orders"
ON orders FOR SELECT
USING (auth.uid() = client_id);
-- Admin bisa melihat semua order
CREATE POLICY "Admin can view all orders"
ON orders FOR SELECT
USING (EXISTS (
SELECT 1 FROM profiles
WHERE profiles.id = auth.uid()
AND profiles.role = 'admin'
));
Dengan RLS, keamanan data tidak perlu diatur ulang di level aplikasi. Supabase menjamin bahwa user hanya bisa mengakses data yang menjadi haknya.
3. Skema Validasi Input dengan Zod
Salah satu aspek terpenting dalam estimator harga adalah validasi input. Jangan sampai user memasukkan angka negatif atau jumlah yang tidak masuk akal.
3.1. Contoh Schema Validasi
// lib/validations/estimate.schema.ts
import { z } from 'zod';
export const EstimateSchema = z.object({
productId: z.string().uuid(),
quantity: z.number()
.int()
.positive('Jumlah harus lebih dari 0')
.max(10000, 'Maksimal 10.000 pcs per order'),
urgent: z.boolean().default(false),
notes: z.string().max(500).optional(),
});
export type EstimateInput = z.infer<typeof EstimateSchema>;
3.2. Penerapan di Server Action
// app/api/estimate/route.ts
import { EstimateSchema } from '@/lib/validations/estimate.schema';
export async function POST(req: Request) {
const body = await req.json();
const result = EstimateSchema.safeParse(body);
if (!result.success) {
return Response.json({ errors: result.error.format() }, { status: 400 });
}
const { productId, quantity, urgent } = result.data;
// Lanjut ke logika perhitungan...
}
Dengan pendekatan ini, validasi input dilakukan di level API/server, sehingga tidak ada celah bagi user nakal yang mencoba memanipulasi frontend.
4. Logika Estimasi Harga dan Lead Time
Ini adalah inti dari seluruh sistem. Logika estimasi tidak boleh asal-asalan. Kita perlu mempertimbangkan berbagai faktor:
4.1. Faktor yang Mempengaruhi Harga
| Variabel | Bobot | Penjelasan |
|---|---|---|
| Base price produk | 60% | Harga dasar dari database |
| Quantity multiplier | 20% | Semakin banyak, semakin murah per unit |
| Urgent fee | 15% | Tambahan biaya untuk pesanan kilat |
| Custom design fee | 5% | Jika ada desain khusus |
4.2. Menghitung Prediksi Lead Time Produksi
function calculateLeadTime(
baseDays: number,
quantity: number,
urgent: boolean,
queueLength: number
): number {
let leadTime = baseDays;
// Faktor quantity: setiap 100 pcs tambah 0.5 hari
leadTime += Math.floor(quantity / 100) * 0.5;
// Faktor antrian produksi
leadTime += queueLength * 0.3;
// Jika urgent, kurangi 20% waktu
if (urgent) {
leadTime = leadTime * 0.8;
}
return Math.ceil(leadTime);
}
Penelitian dari ScienceDirect menunjukkan bahwa algoritma Random Forest (RF) memberikan hasil prediksi terbaik untuk mixed manufacturing orders. Meskipun contoh kita sederhana, di dunia nyata kita bisa mengintegrasikan model machine learning yang lebih canggih untuk meningkatkan akurasi prediksi lead time produksi.
4.3. Menyimpan Hasil Estimasi ke Database
const { data: estimate, error } = await supabase
.from('orders')
.insert({
client_id: userId,
product_id: productId,
quantity: quantity,
estimated_price: finalPrice,
estimated_lead_time: predictedLeadTime,
status: 'pending'
})
.select()
.single();
5. Tabel Perbandingan: Manual vs Sistem Otomatis
| Aspek | Manual (Excel/WA) | Sistem Next.js + Supabase |
|---|---|---|
| Kecepatan hitung harga | 3–5 menit per order | < 1 detik |
| Akurasi prediksi lead time | ± 3–5 hari error | ± 0.5–1 hari error |
| Validasi input | Tidak ada, rawan human error | Zod schema, 100% terjamin |
| Keamanan data | File Excel tersebar | RLS + JWT authentication |
| Multi-role support | Harus manual copy file | Role-based middleware otomatis |
| Tracking pesanan | WA chat history | Dashboard real-time |
Dari tabel di atas, jelas bahwa sistem berbasis Next.js dan Supabase bukan hanya mempercepat, tapi juga menghilangkan risiko yang biasa terjadi pada proses manual.
6. HowTo: Langkah-Langkah Implementasi dari Nol
Berikut adalah panduan langkah demi langkah untuk mereplikasi sistem ini.
Step 1: Setup Proyek Next.js
npx create-next-app@latest konveksi-estimator --typescript --tailwind --app
cd konveksi-estimator
Step 2: Install Dependencies
npm install @supabase/supabase-js @supabase/ssr zod
Step 3: Buat Proyek Supabase
- Buka supabase.com
- Buat proyek baru di region terdekat (Singapura atau Jakarta)
- Catat
SUPABASE_URLdanSUPABASE_ANON_KEY
Step 4: Buat Tabel dan RLS
Jalankan SQL berikut di Supabase SQL Editor:
-- Buat tabel profiles
CREATE TABLE profiles (
id UUID REFERENCES auth.users PRIMARY KEY,
full_name TEXT,
role TEXT DEFAULT 'client',
company_name TEXT
);
-- Buat tabel products (isi dengan data produk konveksi Anda)
CREATE TABLE products (...);
-- Buat tabel orders (...);
-- Aktifkan RLS
ALTER TABLE orders ENABLE ROW LEVEL SECURITY;
-- Buat policy seperti contoh di bab 2.4
Step 5: Implementasi Middleware dan Server Actions
Ikuti pola yang sudah dijelaskan di bab 1.2 dan 3.2.
Step 6: Integrasi dengan Frontend
// app/dashboard/client/estimate-form.tsx
'use client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { EstimateSchema } from '@/lib/validations/estimate.schema';
export function EstimateForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: zodResolver(EstimateSchema)
});
const onSubmit = async (data) => {
const response = await fetch('/api/estimate', {
method: 'POST',
body: JSON.stringify(data)
});
// Handle response...
};
return (/* Form UI */);
}
Step 7: Deploy ke Vercel
npx vercel --prod
Pastikan environment variables (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY) sudah diatur di dashboard Vercel.
7. FAQ Seputar Estimator Konveksi dengan Next.js & Supabase
Q: Apakah sistem ini bisa menangani ribuan order sekaligus?
A: Ya. Supabase menggunakan PostgreSQL yang mampu menangani hingga jutaan baris data. Dengan indexing yang tepat, query tetap cepat.
Q: Bagaimana jika klien meminta revisi desain di tengah proses produksi?
A: Tambahkan tabel revisions yang terhubung ke orders. Gunakan status revision_requested dan hitung ulang prediksi lead time produksi berdasarkan kompleksitas revisi.
Q: Apakah aman jika menggunakan Supabase anon key di frontend?
A: Dengan RLS, anon key tidak berbahaya karena user hanya bisa mengakses data sesuai dengan policy yang sudah ditentukan. Pastikan Anda tidak pernah memberikan service_role key ke frontend.
Q: Bagaimana cara mengintegrasikan dengan pembayaran?
A: Gunakan Stripe atau Midtrans. Buat webhook yang akan mengubah status order dari pending menjadi approved setelah pembayaran berhasil.
Q: Apakah harus menggunakan Next.js? Bisa pakai framework lain?
A: Bisa. Prinsip validasi input, RLS, dan logika estimasi bisa diadaptasi ke Laravel, Django, atau Express. Tapi Next.js + Supabase adalah stack paling efisien untuk solo developer.
8. Tabel Ceklis Kesiapan Sistem Produksi
| Komponen | Status | Prioritas | Keterangan |
|---|---|---|---|
| Database schema dengan foreign key | ☐ Belum | 🔴 High | Wajib untuk relasi order → client → product |
| RLS policy untuk setiap tabel | ☐ Belum | 🔴 High | Keamanan data #1 |
| Middleware validasi role | ☐ Belum | 🔴 High | Cegah akses tidak sah |
| Validasi input dengan Zod | ☐ Belum | 🟡 Medium | Minimal di API endpoint |
| Prediksi lead time produksi dengan faktor antrian | ☐ Belum | 🟡 Medium | Fitur utama estimator |
| Logika harga dinamis (quantity multiplier, urgent fee) | ☐ Belum | 🟡 Medium | Inti bisnis |
| Dashboard admin untuk monitoring order | ☐ Belum | 🟢 Low | Bisa ditambahkan di fase 2 |
| Export laporan ke Excel/PDF | ☐ Belum | 🟢 Low | Fitur tambahan |
💡 Kutipan dari Catherine Lian, General Manager dan Technology Leader IBM ASEAN:
“Only a few have successfully achieved full integration or integrated AI into their core business strategies.”
Artinya: Hanya sedikit yang berhasil mencapai integrasi penuh atau mengintegrasikan AI ke dalam strategi inti bisnis mereka.Penjelasan: Catherine Lian adalah pemimpin teknologi untuk kawasan ASEAN di IBM. Beliau mengamati langsung adopsi AI di berbagai sektor, termasuk manufaktur. Dalam konteks artikel ini, kutipan di atas menjadi pengingat bahwa membangun fitur prediktif terpisah tidak cukup. Yang lebih penting adalah bagaimana kita mengintegrasikan prediksi lead time produksi secara mulus ke dalam alur kerja sehari-hari — dari input pesanan, kalkulasi otomatis, hingga notifikasi ke tim produksi. Tanpa integrasi, sistem hanya akan menjadi alat tambahan yang diabaikan.
Menutup Artikel: Dari Kalkulator Sederhana Menuju Sistem Prediktif yang Andal
Sebagai penutup, penting untuk diingat bahwa membangun estimator harga dan lead time untuk industri konveksi bukanlah sekadar proyek akhir pekan yang bisa asal jadi. Ada tiga fondasi yang tidak bisa ditawar: validasi input yang ketat (menggunakan Zod atau library serupa), manajemen role yang aman (melalui middleware dan RLS), serta logika prediksi yang terukur (dengan mempertimbangkan antrian, kompleksitas produk, dan faktor urgensi).
Demikianlah, sistem yang kita bangun bersama di artikel ini bukan hanya tentang kode. Ini tentang bagaimana developer dapat membawa efisiensi industri ke level berikutnya. Sebuah konveksi di Karawang yang menggunakan sistem ini (seperti CV Mitra Mandiri Design) bisa memangkas waktu kalkulasi dari menit menjadi milidetik, sekaligus menghilangkan risiko kesalahan hitung yang selama ini sering terjadi.
Pada akhirnya, prediksi lead time produksi yang akurat bukan lagi ilmu perkiraan. Ini adalah ilmu terapan yang bisa kita bangun, uji, dan iterasi bersama komunitas.
Butuh inspirasi arsitektur untuk proyek serupa? Simak artikel populer di DEV Community:
➡️ Build a Powerful CRUD App with Supabase and Next.js – Full Guide
Atau, lihat langsung studi kasus nyata dari konveksi yang sudah menerapkan sistem ini di konveksikarawang.co.id. Siapa tahu, proyek Anda berikutnya bisa menjadi bagian dari transformasi digital manufaktur Indonesia.
Top comments (0)