260322:1648 Correct Coresspondence / Doing RFA / Correct CI

2026-03-22 16:48:12 +07:00
parent e5deedb42e
commit 11984bfa29
683 changed files with 105251 additions and 29068 deletions
@@ -1,65 +1,63 @@
-"use client";
+'use client';

-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Checkbox } from "@/components/ui/checkbox";
-import { useCreateUser, useUpdateUser, useRoles } from "@/hooks/use-users";
-import { useOrganizations } from "@/hooks/use-master-data";
-import { useEffect, useState } from "react";
-import { User } from "@/types/user";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Eye, EyeOff } from "lucide-react";
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useCreateUser, useUpdateUser, useRoles } from '@/hooks/use-users';
+import { useOrganizations } from '@/hooks/use-master-data';
+import { useEffect, useState } from 'react';
+import { User } from '@/types/user';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Eye, EyeOff } from 'lucide-react';

-const ALL_ORGANIZATIONS_VALUE = "all";
+const ALL_ORGANIZATIONS_VALUE = 'all';

 // Update schema to include confirmPassword
-const userSchema = z.object({
-  username: z.string().min(3, "Username must be at least 3 characters"),
-  email: z.string().email("Invalid email address"),
-  firstName: z.string().min(1, "First name is required"),
-  lastName: z.string().min(1, "Last name is required"),
-  password: z.string().optional(),
-  confirmPassword: z.string().optional(),
-  isActive: z.boolean().optional(),
-  lineId: z.string().optional(),
-  primaryOrganizationId: z.string().optional(),
-  roleIds: z.array(z.number()).optional(),
-}).refine((data) => {
-  // If password is provided (creating or resetting), confirmPassword must match
-  if (data.password && data.password !== data.confirmPassword) {
-    return false;
-  }
-  return true;
-}, {
-  message: "Passwords do not match",
-  path: ["confirmPassword"],
-}).refine((data) => {
-   // Password required for creation
-   // We can't easily check "isCreating" here without context, checking length if provided
-   if (data.password && data.password.length < 6) {
-       return false;
-   }
-   return true;
-}, {
-    message: "Password must be at least 6 characters",
-    path: ["password"]
-});
+const userSchema = z
+  .object({
+    username: z.string().min(3, 'Username must be at least 3 characters'),
+    email: z.string().email('Invalid email address'),
+    firstName: z.string().min(1, 'First name is required'),
+    lastName: z.string().min(1, 'Last name is required'),
+    password: z.string().optional(),
+    confirmPassword: z.string().optional(),
+    isActive: z.boolean().optional(),
+    lineId: z.string().optional(),
+    primaryOrganizationId: z.string().optional(),
+    roleIds: z.array(z.number()).optional(),
+  })
+  .refine(
+    (data) => {
+      // If password is provided (creating or resetting), confirmPassword must match
+      if (data.password && data.password !== data.confirmPassword) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message: 'Passwords do not match',
+      path: ['confirmPassword'],
+    }
+  )
+  .refine(
+    (data) => {
+      // Password required for creation
+      // We can't easily check "isCreating" here without context, checking length if provided
+      if (data.password && data.password.length < 6) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message: 'Password must be at least 6 characters',
+      path: ['password'],
+    }
+  );

 type UserFormData = z.infer<typeof userSchema>;

@@ -87,16 +85,16 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
  } = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
    defaultValues: {
-      username: "",
-      email: "",
-      firstName: "",
-      lastName: "",
+      username: '',
+      email: '',
+      firstName: '',
+      lastName: '',
      isActive: true,
      roleIds: [],
-      lineId: "",
+      lineId: '',
      primaryOrganizationId: ALL_ORGANIZATIONS_VALUE,
-      password: "",
-      confirmPassword: ""
+      password: '',
+      confirmPassword: '',
    },
  });

@@ -108,24 +106,24 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
        firstName: user.firstName,
        lastName: user.lastName,
        isActive: user.isActive,
-        lineId: user.lineId || "",
+        lineId: user.lineId || '',
        primaryOrganizationId: user.primaryOrganizationId?.toString() || ALL_ORGANIZATIONS_VALUE,
        roleIds: user.roles?.map((r: { roleId: number }) => r.roleId) || [],
-        password: "",
-        confirmPassword: ""
+        password: '',
+        confirmPassword: '',
      });
    } else {
      reset({
-        username: "",
-        email: "",
-        firstName: "",
-        lastName: "",
+        username: '',
+        email: '',
+        firstName: '',
+        lastName: '',
        isActive: true,
-        lineId: "",
+        lineId: '',
        primaryOrganizationId: ALL_ORGANIZATIONS_VALUE,
        roleIds: [],
-        password: "",
-        confirmPassword: ""
+        password: '',
+        confirmPassword: '',
      });
    }
    // Also reset visibility
@@ -133,17 +131,17 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
    setShowConfirmPassword(false);
  }, [user, reset, open]);

-  const selectedRoleIds = watch("roleIds") || [];
+  const selectedRoleIds = watch('roleIds') || [];

  const onSubmit = (data: UserFormData) => {
    // Basic validation for create vs update
    if (!user && !data.password) {
-        // This should be caught by schema ideally, but refined schema is tricky with conditional
-        // Force error via set error not possible easily here, rely on form state?
-        // Actually the refine check handles length check if provided, but for create it is mandatory.
-        // Let's rely on server side or manual check if schema misses it (zod optional() makes it pass if undefined)
-        // Adjusting schema to be strict string for create is hard with one schema.
-        // Let's trust Zod or add checks.
+      // This should be caught by schema ideally, but refined schema is tricky with conditional
+      // Force error via set error not possible easily here, rely on form state?
+      // Actually the refine check handles length check if provided, but for create it is mandatory.
+      // Let's rely on server side or manual check if schema misses it (zod optional() makes it pass if undefined)
+      // Adjusting schema to be strict string for create is hard with one schema.
+      // Let's trust Zod or add checks.
    }

    // Clean up data
@@ -155,27 +153,27 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
    }

    if (user) {
-      updateUser.mutate(
-        { uuid: user.uuid, data: payload },
-        { onSuccess: () => onOpenChange(false) }
-      );
+      updateUser.mutate({ uuid: user.uuid, data: payload }, { onSuccess: () => onOpenChange(false) });
    } else {
      // Create req: Password mandatory
      if (!payload.password) return; // Should allow Zod to catch or show error

-      createUser.mutate({
-        username: payload.username,
-        email: payload.email,
-        firstName: payload.firstName,
-        lastName: payload.lastName,
-        password: payload.password,
-        isActive: payload.isActive ?? true,
-        lineId: payload.lineId,
-        primaryOrganizationId: payload.primaryOrganizationId,
-        roleIds: payload.roleIds ?? [],
-      }, {
-        onSuccess: () => onOpenChange(false),
-      });
+      createUser.mutate(
+        {
+          username: payload.username,
+          email: payload.email,
+          firstName: payload.firstName,
+          lastName: payload.lastName,
+          password: payload.password,
+          isActive: payload.isActive ?? true,
+          lineId: payload.lineId,
+          primaryOrganizationId: payload.primaryOrganizationId,
+          roleIds: payload.roleIds ?? [],
+        },
+        {
+          onSuccess: () => onOpenChange(false),
+        }
+      );
    }
  };

@@ -183,77 +181,61 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
-          <DialogTitle>{user ? "Edit User" : "Create New User"}</DialogTitle>
+          <DialogTitle>{user ? 'Edit User' : 'Create New User'}</DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>Username *</Label>
-              <Input
-                {...register("username")}
-                disabled={!!user}
-                autoComplete="off"
-              />
-              {errors.username && (
-                <p className="text-sm text-red-500">{errors.username.message}</p>
-              )}
+              <Input {...register('username')} disabled={!!user} autoComplete="off" />
+              {errors.username && <p className="text-sm text-red-500">{errors.username.message}</p>}
            </div>

            <div>
              <Label>Email *</Label>
-              <Input type="email" {...register("email")} autoComplete="off" />
-              {errors.email && (
-                <p className="text-sm text-red-500">{errors.email.message}</p>
-              )}
+              <Input type="email" {...register('email')} autoComplete="off" />
+              {errors.email && <p className="text-sm text-red-500">{errors.email.message}</p>}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>First Name *</Label>
-              <Input {...register("firstName")} autoComplete="off" />
-               {errors.firstName && (
-                <p className="text-sm text-red-500">{errors.firstName.message}</p>
-              )}
+              <Input {...register('firstName')} autoComplete="off" />
+              {errors.firstName && <p className="text-sm text-red-500">{errors.firstName.message}</p>}
            </div>

            <div>
              <Label>Last Name *</Label>
-              <Input {...register("lastName")} autoComplete="off" />
-               {errors.lastName && (
-                <p className="text-sm text-red-500">{errors.lastName.message}</p>
-              )}
+              <Input {...register('lastName')} autoComplete="off" />
+              {errors.lastName && <p className="text-sm text-red-500">{errors.lastName.message}</p>}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>Line ID</Label>
-              <Input {...register("lineId")} autoComplete="off" />
+              <Input {...register('lineId')} autoComplete="off" />
            </div>

            <div>
              <Label>Primary Organization</Label>
              <Select
-                value={watch("primaryOrganizationId") || ALL_ORGANIZATIONS_VALUE}
-                onValueChange={(val) =>
-                  setValue("primaryOrganizationId", val)
-                }
+                value={watch('primaryOrganizationId') || ALL_ORGANIZATIONS_VALUE}
+                onValueChange={(val) => setValue('primaryOrganizationId', val)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select Organization" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value={ALL_ORGANIZATIONS_VALUE}>All Organizations</SelectItem>
-                  {Array.isArray(organizations) && organizations.map((org: { uuid: string; organizationCode: string; organizationName: string }) => (
-                    <SelectItem
-                      key={org.uuid}
-                      value={org.uuid}
-                    >
-                      {org.organizationCode} - {org.organizationName}
-                    </SelectItem>
-                  ))}
+                  {Array.isArray(organizations) &&
+                    organizations.map((org: { uuid: string; organizationCode: string; organizationName: string }) => (
+                      <SelectItem key={org.uuid} value={org.uuid}>
+                        {org.organizationCode} - {org.organizationName}
+                      </SelectItem>
+                    ))}
                </SelectContent>
              </Select>
            </div>
@@ -261,91 +243,88 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {

          {/* Password Section - Show for Create, or Optional for Edit */}
          <div className="space-y-4 border p-4 rounded-md">
-             <h3 className="text-sm font-medium">{user ? "Change Password (Optional)" : "Password Setup"}</h3>
+            <h3 className="text-sm font-medium">{user ? 'Change Password (Optional)' : 'Password Setup'}</h3>

-             <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="relative">
+                <Label>Password {user ? '' : '*'}</Label>
                <div className="relative">
-                  <Label>Password {user ? "" : "*"}</Label>
-                  <div className="relative">
-                      <Input
-                        type={showPassword ? "text" : "password"}
-                        {...register("password")}
-                        autoComplete="new-password"
-                      />
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="absolute right-0 top-0 h-full px-3"
-                        onClick={() => setShowPassword(!showPassword)}
-                      >
-                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                      </Button>
-                  </div>
-                   {errors.password && (
-                    <p className="text-sm text-red-500">{errors.password.message}</p>
-                  )}
+                  <Input
+                    type={showPassword ? 'text' : 'password'}
+                    {...register('password')}
+                    autoComplete="new-password"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="absolute right-0 top-0 h-full px-3"
+                    onClick={() => setShowPassword(!showPassword)}
+                  >
+                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </Button>
                </div>
+                {errors.password && <p className="text-sm text-red-500">{errors.password.message}</p>}
+              </div>

-                 <div className="relative">
-                  <Label>Confirm Password {user ? "" : "*"}</Label>
-                   <div className="relative">
-                      <Input
-                        type={showConfirmPassword ? "text" : "password"}
-                        {...register("confirmPassword")}
-                        autoComplete="new-password"
-                      />
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="absolute right-0 top-0 h-full px-3"
-                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                      >
-                         {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                      </Button>
-                   </div>
-                   {errors.confirmPassword && (
-                    <p className="text-sm text-red-500">{errors.confirmPassword.message}</p>
-                  )}
+              <div className="relative">
+                <Label>Confirm Password {user ? '' : '*'}</Label>
+                <div className="relative">
+                  <Input
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    {...register('confirmPassword')}
+                    autoComplete="new-password"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="absolute right-0 top-0 h-full px-3"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  >
+                    {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </Button>
                </div>
-             </div>
+                {errors.confirmPassword && <p className="text-sm text-red-500">{errors.confirmPassword.message}</p>}
+              </div>
+            </div>
          </div>

          <div>
            <Label className="mb-3 block">Roles</Label>
            <div className="space-y-2 border p-3 rounded-md max-h-[200px] overflow-y-auto">
-              {Array.isArray(roles) && roles.length === 0 && <p className="text-sm text-muted-foreground">Loading roles...</p>}
-              {Array.isArray(roles) && roles.map((role: { roleId: number; roleName: string; description?: string }) => (
-                <div key={role.roleId} className="flex items-start space-x-2">
-                  <Checkbox
-                    id={`role-${role.roleId}`}
-                    checked={selectedRoleIds.includes(role.roleId)}
-                    onCheckedChange={(checked) => {
-                      const current = selectedRoleIds;
-                      if (checked) {
-                        setValue("roleIds", [...current, role.roleId]);
-                      } else {
-                        setValue(
-                          "roleIds",
-                          current.filter((id) => id !== role.roleId)
-                        );
-                      }
-                    }}
-                  />
-                  <div className="grid gap-1.5 leading-none">
-                    <label
-                      htmlFor={`role-${role.roleId}`}
-                      className="text-sm font-medium leading-none cursor-pointer"
-                    >
-                      {role.roleName}
-                    </label>
-                    <p className="text-xs text-muted-foreground">
-                      {role.description}
-                    </p>
+              {Array.isArray(roles) && roles.length === 0 && (
+                <p className="text-sm text-muted-foreground">Loading roles...</p>
+              )}
+              {Array.isArray(roles) &&
+                roles.map((role: { roleId: number; roleName: string; description?: string }) => (
+                  <div key={role.roleId} className="flex items-start space-x-2">
+                    <Checkbox
+                      id={`role-${role.roleId}`}
+                      checked={selectedRoleIds.includes(role.roleId)}
+                      onCheckedChange={(checked) => {
+                        const current = selectedRoleIds;
+                        if (checked) {
+                          setValue('roleIds', [...current, role.roleId]);
+                        } else {
+                          setValue(
+                            'roleIds',
+                            current.filter((id) => id !== role.roleId)
+                          );
+                        }
+                      }}
+                    />
+                    <div className="grid gap-1.5 leading-none">
+                      <label
+                        htmlFor={`role-${role.roleId}`}
+                        className="text-sm font-medium leading-none cursor-pointer"
+                      >
+                        {role.roleName}
+                      </label>
+                      <p className="text-xs text-muted-foreground">{role.description}</p>
+                    </div>
                  </div>
-                </div>
-              ))}
+                ))}
            </div>
          </div>

@@ -353,31 +332,21 @@ export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
            <div className="flex items-center space-x-2">
              <Checkbox
                id="is_active"
-                checked={watch("isActive")}
-                onCheckedChange={(chk) => setValue("isActive", chk === true)}
+                checked={watch('isActive')}
+                onCheckedChange={(chk) => setValue('isActive', chk === true)}
              />
-              <label
-                htmlFor="is_active"
-                className="text-sm font-medium leading-none cursor-pointer"
-              >
+              <label htmlFor="is_active" className="text-sm font-medium leading-none cursor-pointer">
                Active User
              </label>
            </div>
          )}

          <div className="flex justify-end gap-3 pt-4">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-            >
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
-            <Button
-              type="submit"
-              disabled={createUser.isPending || updateUser.isPending}
-            >
-              {user ? "Update User" : "Create User"}
+            <Button type="submit" disabled={createUser.isPending || updateUser.isPending}>
+              {user ? 'Update User' : 'Create User'}
            </Button>
          </div>
        </form>