Fix: Bugs in valueset page

public/locale/en.json

@@ -1907,6 +1907,7 @@
   "save_and_continue": "Save and Continue",
   "save_investigation": "Save Investigation",
   "saving": "Saving...",
+  "retired":"Retired",
   "scan_asset_qr": "Scan Asset QR!",
   "schedule": "Schedule",
   "schedule_an_appointment_or_create_a_new_encounter": "Schedule an appointment or create a new encounter",
@@ -2341,6 +2342,7 @@
   "valid_to": "Valid Till",
   "valid_year_of_birth": "Please enter a valid year of birth (YYYY)",
   "value_set": "Value Set",
+  "save_valueset":"Save ValueSet",
   "valuesets": "Valuesets",
   "vehicle_preference": "Vehicle preference",
   "vendor_name": "Vendor Name",

src/components/ValueSet/ValueSetEditor.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "raviger";
 import { toast } from "sonner";
 
@@ -9,7 +9,6 @@ import query from "@/Utils/request/query";
 import {
   CreateValuesetModel,
   UpdateValuesetModel,
-  ValuesetBase,
   ValuesetFormType,
 } from "@/types/valueset/valueset";
 import valuesetApi from "@/types/valueset/valuesetApi";
@@ -22,7 +21,7 @@ interface ValueSetEditorProps {
 
 export function ValueSetEditor({ slug }: ValueSetEditorProps) {
   const navigate = useNavigate();
-
+  const queryClient = useQueryClient();
   // Fetch existing valueset if we're editing
   const { data: existingValueset, isLoading } = useQuery({
     queryKey: ["valueset", slug],
@@ -35,9 +34,9 @@ export function ValueSetEditor({ slug }: ValueSetEditorProps) {
   // Create mutation
   const createMutation = useMutation({
     mutationFn: mutate(valuesetApi.create),
-    onSuccess: (data: ValuesetBase) => {
+    onSuccess: () => {
       toast.success("ValueSet created successfully");
-      navigate(`/valuesets/${data.slug}`);
+      navigate(`/admin/valuesets`);
     },
   });
 
@@ -49,6 +48,7 @@ export function ValueSetEditor({ slug }: ValueSetEditorProps) {
     onSuccess: () => {
       toast.success("ValueSet updated successfully");
       navigate(`/admin/valuesets`);
+      queryClient.invalidateQueries({ queryKey: ["valueset"] });
     },
   });
 

src/components/ValueSet/ValueSetForm.tsx

@@ -2,6 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons";
 import { useMutation } from "@tanstack/react-query";
 import { useFieldArray, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import * as z from "zod";
 
@@ -34,59 +35,6 @@ import {
 import valuesetApi from "@/types/valueset/valuesetApi";
 
 // Create a schema for form validation
-const valuesetFormSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  slug: z.string().min(1, "Slug is required"),
-  description: z.string(),
-  status: z.enum(["active", "inactive"]),
-  is_system_defined: z.boolean(),
-  compose: z.object({
-    include: z.array(
-      z.object({
-        system: z.string(),
-        concept: z
-          .array(
-            z.object({
-              code: z.string(),
-              display: z.string(),
-            }),
-          )
-          .optional(),
-        filter: z
-          .array(
-            z.object({
-              property: z.string(),
-              op: z.string(),
-              value: z.string(),
-            }),
-          )
-          .optional(),
-      }),
-    ),
-    exclude: z.array(
-      z.object({
-        system: z.string(),
-        concept: z
-          .array(
-            z.object({
-              code: z.string(),
-              display: z.string(),
-            }),
-          )
-          .optional(),
-        filter: z
-          .array(
-            z.object({
-              property: z.string(),
-              op: z.string(),
-              value: z.string(),
-            }),
-          )
-          .optional(),
-      }),
-    ),
-  }),
-});
 
 interface ValueSetFormProps {
   initialData?: ValuesetFormType;
@@ -396,6 +344,61 @@ export function ValueSetForm({
   onSubmit,
   isSubmitting,
 }: ValueSetFormProps) {
+  const { t } = useTranslation();
+
+  const valuesetFormSchema = z.object({
+    name: z.string().min(1, t("field_required")),
+    slug: z.string().min(1, t("field_required")),
+    description: z.string(),
+    status: z.enum(["active", "draft", "retired", "unknown"]),
+    is_system_defined: z.boolean(),
+    compose: z.object({
+      include: z.array(
+        z.object({
+          system: z.string(),
+          concept: z
+            .array(
+              z.object({
+                code: z.string(),
+                display: z.string(),
+              }),
+            )
+            .optional(),
+          filter: z
+            .array(
+              z.object({
+                property: z.string(),
+                op: z.string(),
+                value: z.string(),
+              }),
+            )
+            .optional(),
+        }),
+      ),
+      exclude: z.array(
+        z.object({
+          system: z.string(),
+          concept: z
+            .array(
+              z.object({
+                code: z.string(),
+                display: z.string(),
+              }),
+            )
+            .optional(),
+          filter: z
+            .array(
+              z.object({
+                property: z.string(),
+                op: z.string(),
+                value: z.string(),
+              }),
+            )
+            .optional(),
+        }),
+      ),
+    }),
+  });
   const form = useForm<ValuesetFormType>({
     resolver: zodResolver(valuesetFormSchema),
     defaultValues: {
@@ -419,7 +422,7 @@ export function ValueSetForm({
           name="name"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Name</FormLabel>
+              <FormLabel required>{t("name")}</FormLabel>
               <FormControl>
                 <Input {...field} />
               </FormControl>
@@ -433,7 +436,7 @@ export function ValueSetForm({
           name="slug"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Slug</FormLabel>
+              <FormLabel required>{t("slug")}</FormLabel>
               <FormControl>
                 <Input {...field} />
               </FormControl>
@@ -447,7 +450,7 @@ export function ValueSetForm({
           name="description"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Description</FormLabel>
+              <FormLabel>{t("description")}</FormLabel>
               <FormControl>
                 <Textarea {...field} />
               </FormControl>
@@ -461,16 +464,18 @@ export function ValueSetForm({
           name="status"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Status</FormLabel>
+              <FormLabel required>{t("status")}</FormLabel>
               <Select onValueChange={field.onChange} defaultValue={field.value}>
                 <FormControl>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select status" />
+                    <SelectValue placeholder="Select Status" />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  <SelectItem value="active">Active</SelectItem>
-                  <SelectItem value="inactive">Inactive</SelectItem>
+                  <SelectItem value="active">{t("active")}</SelectItem>
+                  <SelectItem value="draft">{t("draft")}</SelectItem>
+                  <SelectItem value="retired">{t("retired")}</SelectItem>
+                  <SelectItem value="unknown">{t("unknown")}</SelectItem>
                 </SelectContent>
               </Select>
               <FormMessage />
@@ -484,7 +489,7 @@ export function ValueSetForm({
         </div>
 
         <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save ValueSet"}
+          {isSubmitting ? t("saving") : t("save_valueset")}
         </Button>
       </form>
     </Form>