created list view interface
This commit is contained in:
parent
88e96f261a
commit
66f35d64c3
128
src/components/Expenses/CreateExpense.jsx
Normal file
128
src/components/Expenses/CreateExpense.jsx
Normal file
@ -0,0 +1,128 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { ExpenseSchema } from "./ExpenseSchema";
|
||||
|
||||
const CreateExpense = () => {
|
||||
const {} = useForm({
|
||||
resolver: zodResolver(ExpenseSchema),
|
||||
defaultValues: {
|
||||
projectId: "",
|
||||
expensesTypeId: "",
|
||||
paymentModeId: "",
|
||||
paidById: "",
|
||||
transactionDate: "",
|
||||
transactionId: "",
|
||||
description: "",
|
||||
location: "",
|
||||
supplerName: "",
|
||||
amount: "",
|
||||
noOfPersons: "",
|
||||
statusId: "",
|
||||
billAttachments: [],
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div class="container p-3">
|
||||
<p class="fw-bold m-0">Create New Expense</p>
|
||||
<form id="expenseForm">
|
||||
<div class="row my-2">
|
||||
<div class="col-md-6">
|
||||
<label for="projectId">Select Project</label>
|
||||
<select class="form-select form-select-sm" id="projectId" required>
|
||||
<option value="">-- Select Project --</option>
|
||||
<option value="project1">Project A</option>
|
||||
<option value="project2">Project B</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="expensesTypeId">Expense Type</label>
|
||||
<select class="form-select form-select-sm" id="expensesTypeId" required>
|
||||
<option value="">-- Select Type --</option>
|
||||
<option value="type1">Travel</option>
|
||||
<option value="type2">Meal</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<div class="col-md-6">
|
||||
<label for="paymentModeId">Payment Mode</label>
|
||||
<select class="form-select form-select-sm" id="paymentModeId" required>
|
||||
<option value="">-- Select Payment Mode --</option>
|
||||
<option value="cash">Cash</option>
|
||||
<option value="card">Card</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="paidById">Paid By</label>
|
||||
<input type="text" id="paidById" class="form-control form-control-sm" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<div class="col-md-6">
|
||||
<label for="transactionDate">Transaction Date</label>
|
||||
<input type="date" id="transactionDate" class="form-control form-control-sm" placeholder="DD-MM-YYYY" required />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="amount">Amount</label>
|
||||
<input type="number" id="amount" class="form-control form-control-sm" min="1" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<div class="col-md-6">
|
||||
<label for="noOfPersons">No. of Persons</label>
|
||||
<input type="number" id="noOfPersons" class="form-control form-control-sm" min="1" required />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="statusId">Status</label>
|
||||
<select class="form-select form-select-sm" id="statusId" required>
|
||||
<option value="">-- Select Status --</option>
|
||||
<option value="approved">Approved</option>
|
||||
<option value="pending">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<div class="col-md-6">
|
||||
<label for="location">Location</label>
|
||||
<input type="text" id="location" class="form-control form-control-sm" required />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="supplerName">Supplier Name</label>
|
||||
<input type="text" id="supplerName" class="form-control form-control-sm" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<div class="col-md-12">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" class="form-control form-control-sm" rows="2" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<div class="col-md-12">
|
||||
<label for="billAttachments">Upload Bill (PDF, JPG, PNG, max 5MB)</label>
|
||||
<input type="file" id="billAttachments" class="form-control form-control-sm"
|
||||
accept=".pdf,.jpg,.jpeg,.png" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-center gap-2"> <button type="submit" class="btn btn-primary btn-sm mt-3">Submit</button>
|
||||
<button type="submit" class="btn btn-secondary btn-sm mt-3">Cancel</button></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateExpense;
|
||||
@ -1,91 +0,0 @@
|
||||
import { z } from "zod";
|
||||
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||
const ALLOWED_TYPES = [
|
||||
"application/pdf",
|
||||
"image/png",
|
||||
"image/jpg",
|
||||
"image/jpeg",
|
||||
];
|
||||
|
||||
|
||||
export const ExpenseSchema = (expenseTypes) => {
|
||||
return z
|
||||
.object({
|
||||
projectId: z.string().min(1, { message: "Project is required" }),
|
||||
expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
|
||||
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
||||
paidById: z.string().min(1, { message: "Employee name is required" }),
|
||||
transactionDate: z.string().min(1, { message: "Date is required" }),
|
||||
transactionId: z.string().optional(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
location: z.string().min(1, { message: "Location is required" }),
|
||||
supplerName: z.string().min(1, { message: "Supplier name is required" }),
|
||||
amount: z
|
||||
.coerce
|
||||
.number({ invalid_type_error: "Amount is required and must be a number" })
|
||||
.min(1, "Amount must be Enter")
|
||||
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
|
||||
message: "Amount must have at most 2 decimal places",
|
||||
}),
|
||||
noOfPersons: z.coerce
|
||||
.number()
|
||||
.optional(),
|
||||
billAttachments: z
|
||||
.array(
|
||||
z.object({
|
||||
fileName: z.string().min(1, { message: "Filename is required" }),
|
||||
base64Data: z.string().nullable(),
|
||||
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
|
||||
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
||||
}),
|
||||
documentId:z.string().optional(),
|
||||
fileSize: z.number().max(MAX_FILE_SIZE, {
|
||||
message: "File size must be less than or equal to 5MB",
|
||||
}),
|
||||
description: z.string().optional(),
|
||||
isActive:z.boolean().default(true)
|
||||
})
|
||||
)
|
||||
.nonempty({ message: "At least one file attachment is required" }),
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
return !data.projectId || (data.paidById && data.paidById.trim() !== "");
|
||||
},
|
||||
{
|
||||
message: "Please select who paid (employee)",
|
||||
path: ["paidById"],
|
||||
}
|
||||
)
|
||||
.superRefine((data, ctx) => {
|
||||
const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
|
||||
if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "No. of Persons is required and must be at least 1",
|
||||
path: ["noOfPersons"],
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const defaultExpense = {
|
||||
projectId: "",
|
||||
expensesTypeId: "",
|
||||
paymentModeId: "",
|
||||
paidById: "",
|
||||
transactionDate: "",
|
||||
transactionId: "",
|
||||
description: "",
|
||||
location: "",
|
||||
supplerName: "",
|
||||
amount: "",
|
||||
noOfPersons: "",
|
||||
billAttachments: [],
|
||||
}
|
||||
|
||||
export const ActionSchema = z.object({
|
||||
comment : z.string().min(1,{message:"Please leave comment"}),
|
||||
selectedStatus: z.string().min(1, { message: "Please select a status" }),
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user