Implement Quick Actions functionality on Financials page (Monthly Report Download, Tax Settings)
This commit is contained in:
CycroftX
172
src/features/financials/components/TaxSettingsSheet.tsx
Normal file
172
src/features/financials/components/TaxSettingsSheet.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import { Loader2, Landmark } from "lucide-react";
|
||||
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const taxSettingsSchema = z.object({
|
||||
gstNumber: z.string().min(15, "GST Number must be 15 characters").max(15, "GST Number must be 15 characters"),
|
||||
panNumber: z.string().min(10, "PAN Number must be 10 characters").max(10, "PAN Number must be 10 characters"),
|
||||
platformFeePercentage: z.string().regex(/^\d+(\.\d{1,2})?$/, "Must be a valid percentage"),
|
||||
taxPercentage: z.string().regex(/^\d+(\.\d{1,2})?$/, "Must be a valid percentage"),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof taxSettingsSchema>;
|
||||
|
||||
interface TaxSettingsSheetProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function TaxSettingsSheet({ open, onOpenChange }: TaxSettingsSheetProps) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(taxSettingsSchema),
|
||||
defaultValues: {
|
||||
gstNumber: "27AAAAA0000A1Z5",
|
||||
panNumber: "AAAAA0000A",
|
||||
platformFeePercentage: "12",
|
||||
taxPercentage: "18",
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(data: FormValues) {
|
||||
setIsSubmitting(true);
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
console.log("Tax settings updated:", data);
|
||||
toast.success("Tax settings updated successfully");
|
||||
|
||||
setIsSubmitting(false);
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="w-[400px] sm:w-[540px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Tax & Platform Settings</SheetTitle>
|
||||
<SheetDescription>
|
||||
Configure platform fees and tax details.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mt-6">
|
||||
|
||||
<div className="bg-secondary/20 p-4 rounded-lg flex items-start gap-4 mb-6">
|
||||
<Landmark className="h-6 w-6 text-primary mt-1" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground">Global Settings</h4>
|
||||
<p className="text-sm text-muted-foreground">These settings apply to all new events and transactions by default.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="platformFeePercentage"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Default Platform Fee (%)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="12" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Percentage of ticket sales taken as platform revenue.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="taxPercentage"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Govt. Tax (GST) (%)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="18" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Applicable GST on platform fees.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gstNumber"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Company GSTIN</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="27AAAAA0000A1Z5" {...field} className="uppercase" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="panNumber"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Company PAN</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="AAAAA0000A" {...field} className="uppercase" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting} className="bg-primary text-primary-foreground">
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Updating...
|
||||
</>
|
||||
) : (
|
||||
"Save Changes"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user