[V0_FILE]typescriptreact:file="procurement-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Trash2, Save, Calculator } from "lucide-react" import { Badge } from "@/components/ui/badge" interface ProductLineItem { isfree: boolean subprodid: number qty: number uomid: number curid: string cstrs: number mfgdt: string xprdt: string shelftyp: number shelflf: string dstrreqid: string rmrk: string } export default function ProcurementForm() { const [formData, setFormData] = useState({ brid: "", prcmtdt: new Date().toISOString().split("T")[0], supid: "", bilno: "", bildt: new Date().toISOString().split("T")[0], bilrs: 0, vatrs: 0, disrs: 0, payrs: 0, mstrreqid: "", crtdby: "", }) const [productItems, setProductItems] = useState([ { isfree: false, subprodid: 0, qty: 0, uomid: 0, curid: "NPR", cstrs: 0, mfgdt: new Date().toISOString().split("T")[0], xprdt: new Date().toISOString().split("T")[0], shelftyp: 0, shelflf: "", dstrreqid: "", rmrk: "", }, ]) const addProductItem = () => { setProductItems([ ...productItems, { isfree: false, subprodid: 0, qty: 0, uomid: 0, curid: "NPR", cstrs: 0, mfgdt: new Date().toISOString().split("T")[0], xprdt: new Date().toISOString().split("T")[0], shelftyp: 0, shelflf: "", dstrreqid: "", rmrk: "", }, ]) } const removeProductItem = (index: number) => { if (productItems.length > 1) { setProductItems(productItems.filter((_, i) => i !== index)) } } const updateProductItem = (index: number, field: keyof ProductLineItem, value: any) => { const updatedItems = [...productItems] updatedItems[index] = { ...updatedItems[index], [field]: value } setProductItems(updatedItems) } const calculateTotals = () => { const subtotal = productItems.reduce((sum, item) => sum + item.qty * item.cstrs, 0) const totalAfterDiscount = subtotal - formData.disrs const totalWithVAT = totalAfterDiscount + formData.vatrs return { subtotal, totalAfterDiscount, totalWithVAT } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const payload = { ...formData, isfree: productItems.map((item) => item.isfree), subprodid: productItems.map((item) => item.subprodid), qty: productItems.map((item) => item.qty), uomid: productItems.map((item) => item.uomid), curid: productItems.map((item) => item.curid), cstrs: productItems.map((item) => item.cstrs), mfgdt: productItems.map((item) => item.mfgdt), xprdt: productItems.map((item) => item.xprdt), shelftyp: productItems.map((item) => item.shelftyp), shelflf: productItems.map((item) => item.shelflf), dstrreqid: productItems.map((item) => item.dstrreqid), rmrk: productItems.map((item) => item.rmrk), } console.log("Submitting payload:", payload) // Here you would make the API call to your endpoint // const response = await fetch('https://invv2.amadiconepal.com.np/inv/api/v1.0/Procument/add-procurement', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify(payload) // }) } const totals = calculateTotals() return (

Purchase Bill Entry

Create a new procurement entry

Items: {productItems.length}

{/* Bill Header Information */} Bill Information Enter the basic bill and supplier information

Branch ID * setFormData({ ...formData, brid: e.target.value })} placeholder="Enter branch ID" required />

Supplier ID * setFormData({ ...formData, supid: e.target.value })} placeholder="Enter supplier ID" required />

Bill Number * setFormData({ ...formData, bilno: e.target.value })} placeholder="Enter bill number" required />

Procurement Date setFormData({ ...formData, prcmtdt: e.target.value })} />

Bill Date setFormData({ ...formData, bildt: e.target.value })} />

Master Request ID setFormData({ ...formData, mstrreqid: e.target.value })} placeholder="Enter master request ID" />

{/* Financial Details */} Financial Details Enter bill amounts and financial information

Bill Amount (Rs.) setFormData({ ...formData, bilrs: Number.parseFloat(e.target.value) || 0 })} placeholder="0.00" />

Discount (Rs.) setFormData({ ...formData, disrs: Number.parseFloat(e.target.value) || 0 })} placeholder="0.00" />

VAT Amount (Rs.) setFormData({ ...formData, vatrs: Number.parseFloat(e.target.value) || 0 })} placeholder="0.00" />

Payment Amount (Rs.) setFormData({ ...formData, payrs: Number.parseFloat(e.target.value) || 0 })} placeholder="0.00" />

{/* Product Line Items */}

Product Line Items Add products and their details for this procurement

{productItems.map((item, index) => (

Item #{index + 1}

{productItems.length > 1 && ( )}

Product ID updateProductItem(index, "subprodid", Number.parseInt(e.target.value) || 0)} placeholder="Product ID" />

Quantity updateProductItem(index, "qty", Number.parseInt(e.target.value) || 0)} placeholder="Quantity" />

Unit Cost (Rs.) updateProductItem(index, "cstrs", Number.parseFloat(e.target.value) || 0)} placeholder="0.00" />

Total

UOM ID updateProductItem(index, "uomid", Number.parseInt(e.target.value) || 0)} placeholder="Unit of Measure ID" />

Currency

Manufacturing Date updateProductItem(index, "mfgdt", e.target.value)} />

Expiry Date updateProductItem(index, "xprdt", e.target.value)} />

Shelf Type updateProductItem(index, "shelftyp", Number.parseInt(e.target.value) || 0)} placeholder="Shelf type ID" />

Shelf Life updateProductItem(index, "shelflf", e.target.value)} placeholder="Shelf life description" />

Distribution Request ID updateProductItem(index, "dstrreqid", e.target.value)} placeholder="Distribution request ID" />

updateProductItem(index, "isfree", checked)} /> Free Item

Remarks

updateProductItem(index, "rmrk", e.target.value)}
                    placeholder="Enter any remarks for this item"
                    rows={2}
                  />
                </div>
              </div>
            ))}
          </CardContent>
        </Card>

{/* Summary */}
        <Card>
          <CardHeader>
            <CardTitle>Bill Summary</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
              <div className="flex justify-between">
                <span>Subtotal:</span>
                <span>Rs. {totals.subtotal.toFixed(2)}</span>
              </div>
              <div className="flex justify-between">
                <span>After Discount:</span>
                <span>Rs. {totals.totalAfterDiscount.toFixed(2)}</span>
              </div>
              <div className="flex justify-between font-semibold">
                <span>Total with VAT:</span>
                <span>Rs. {totals.totalWithVAT.toFixed(2)}</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Additional Information */}
        <Card>
          <CardHeader>
            <CardTitle>Additional Information</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <Label htmlFor="crtdby">Created By</Label>
              <Input
                id="crtdby"
                value={formData.crtdby}
                onChange={(e) => setFormData({ ...formData, crtdby: e.target.value })}
                placeholder="Enter creator name/ID"
              />
            </div>
          </CardContent>
        </Card>

{/* Submit Button */}
        <div className="flex justify-end space-x-4">
          <Button type="button" variant="outline">
            Save as Draft
          </Button>
          <Button type="submit" className="min-w-32">
            <Save className="h-4 w-4 mr-2" />
            Submit Bill
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import ProcurementForm from "../procurement-form"

export default function Page() {
  return (
    <div>
      <ProcurementForm />
    </div>
  )
}</article></body></html>