fix(services): Update hooks to handle variable pricing fields

- Add ServiceInput interface for create/update operations
- Transform variable pricing fields in useServices query
- Handle deposit_amount and deposit_percent in mutations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/hooks/useServices.ts

@@ -24,6 +24,12 @@ export const useServices = () => {
         description: s.description || '',
         displayOrder: s.display_order ?? 0,
         photos: s.photos || [],
+        // Variable pricing fields
+        variable_pricing: s.variable_pricing ?? false,
+        deposit_amount: s.deposit_amount ? parseFloat(s.deposit_amount) : null,
+        deposit_percent: s.deposit_percent ? parseFloat(s.deposit_percent) : null,
+        requires_saved_payment_method: s.requires_saved_payment_method ?? false,
+        deposit_display: s.deposit_display || null,
       }));
     },
     retry: false, // Don't retry on 404 - endpoint may not exist yet
@@ -54,6 +60,18 @@ export const useService = (id: string) => {
   });
 };
 
+// Input type for creating/updating services (not all Service fields required)
+interface ServiceInput {
+  name: string;
+  durationMinutes: number;
+  price: number;
+  description?: string;
+  photos?: string[];
+  variable_pricing?: boolean;
+  deposit_amount?: number | null;
+  deposit_percent?: number | null;
+}
+
 /**
  * Hook to create a service
  */
@@ -61,15 +79,26 @@ export const useCreateService = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (serviceData: Omit<Service, 'id'>) => {
+    mutationFn: async (serviceData: ServiceInput) => {
-      const backendData = {
+      const backendData: Record<string, any> = {
         name: serviceData.name,
         duration: serviceData.durationMinutes,
         price: serviceData.price.toString(),
-        description: serviceData.description,
+        description: serviceData.description || '',
         photos: serviceData.photos || [],
       };
 
+      // Add variable pricing fields if enabled
+      if (serviceData.variable_pricing !== undefined) {
+        backendData.variable_pricing = serviceData.variable_pricing;
+      }
+      if (serviceData.deposit_amount !== undefined) {
+        backendData.deposit_amount = serviceData.deposit_amount;
+      }
+      if (serviceData.deposit_percent !== undefined) {
+        backendData.deposit_percent = serviceData.deposit_percent;
+      }
+
       const { data } = await apiClient.post('/services/', backendData);
       return data;
     },
@@ -86,13 +115,17 @@ export const useUpdateService = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ id, updates }: { id: string; updates: Partial<Service> }) => {
+    mutationFn: async ({ id, updates }: { id: string; updates: Partial<ServiceInput> }) => {
-      const backendData: any = {};
+      const backendData: Record<string, any> = {};
       if (updates.name) backendData.name = updates.name;
       if (updates.durationMinutes) backendData.duration = updates.durationMinutes;
-      if (updates.price) backendData.price = updates.price.toString();
+      if (updates.price !== undefined) backendData.price = updates.price.toString();
       if (updates.description !== undefined) backendData.description = updates.description;
       if (updates.photos !== undefined) backendData.photos = updates.photos;
+      // Variable pricing fields
+      if (updates.variable_pricing !== undefined) backendData.variable_pricing = updates.variable_pricing;
+      if (updates.deposit_amount !== undefined) backendData.deposit_amount = updates.deposit_amount;
+      if (updates.deposit_percent !== undefined) backendData.deposit_percent = updates.deposit_percent;
 
       const { data } = await apiClient.patch(`/services/${id}/`, backendData);
       return data;