// import React from 'react'; import AppLayout from '@/layouts/app-layout' import { type BreadcrumbItem } from '@/types'; import { Head, useForm, Link, usePage } from '@inertiajs/react'; import { toast } from 'sonner'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button' import { ArrowLeft, LoaderCircle, Save, Info } from 'lucide-react' import { Material } from '@/types/material'; import React, { useState } from 'react'; import { Select, SelectContent, SelectTrigger, SelectValue, SelectItem } from '@/components/ui/select'; import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"; import { Unit } from '@/types/unit'; import DatePicker from '@/components/ui/date-picker'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Ingredients', href: route('apps.materials.index'), }, { title: 'Create Ingredient', href: '#', }, ]; interface EditProps { material: Material; units: Unit[]; [key: string]: unknown; } export default function Create() { const { material, units } = usePage().props; const { data, setData, errors, processing, post, reset } = useForm({ name: material.name, unit_id: material.unit_id.toString(), expired_at: material.initial_stock.expired_at, initial_qty: material.initial_stock.quantity, minimum_qty: material.minimum_qty, price: material.price, unit_2: 0, _method: 'put' }); const [totalUnit, setTotalUnit] = useState(0); const [perUnitVolume, setPerUnitVolume] = useState(0); const [totalPrice, setTotalPrice] = useState(0); const storeData = (e: React.FormEvent) => { e.preventDefault(); post(route('apps.materials.update', material.id), { onSuccess: () => { toast('Data has been saved.') reset() }, }); } return (
Edit Ingredient This form for edit ingredient
setData('name', e.target.value)} placeholder="Input ingredient name" />

{errors.name}

{errors.unit_id}

setData('initial_qty', parseInt(e.target.value))} placeholder='Input ingredient initial qty' />

{errors.initial_qty}

setData('minimum_qty', parseInt(e.target.value))} placeholder='Input ingredient minimum qty' />

{errors.minimum_qty}

setData('price', parseInt(e.target.value))} placeholder='Input ingredient price' />

{errors.price}

setData('expired_at', e)} label="Select Expired at" />

{errors.price}

{/* Kalkulator Total Qty dan Harga per Satuan Terkecil */}
{/* Input Fields */}
{/* Jumlah Unit 1 */}
setTotalUnit(Number(e.target.value))} placeholder="Contoh: 2" className="text-sm" />
{/* Isi Unit 1 */}
setPerUnitVolume(Number(e.target.value))} placeholder="Contoh: 10" className="text-sm" />
{/* Isi Unit 2 */}
setData('unit_2', Number(e.target.value))} placeholder="Contoh: 12" className="text-sm" />
{/* Harga Total */}
setTotalPrice(Number(e.target.value))} placeholder="Contoh: 100000" className="text-sm" />
{/* Hasil dan Rumus (Side by side) */}
{/* Hasil */}

๐Ÿ“ฆ Hasil Perhitungan

{totalUnit > 0 && perUnitVolume > 0 && totalPrice > 0 ? ( <>
Total Qty: {totalUnit * perUnitVolume * (data.unit_2 || 1)}
Harga per Qty: Rp {( totalPrice / (totalUnit * perUnitVolume * (data.unit_2 || 1)) ).toFixed(2)}
) : (
- Belum ada hasil
)}
{/* Rumus */}

๐Ÿ”Ž Rumus Perhitungan

  • Total Qty = Unit1 ร— Isi Unit1 ร— Isi Unit2 (jika ada)
  • Harga per Qty = Harga Total รท Total Qty
{/* Tombol */}
) }