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