From e0dfb55c5457aec489fc084c4567e791b4c65eb1 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Wed, 26 Mar 2025 00:37:41 +0000
Subject: 3/25 까지의 대표님 작업사항
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/admin-users/table/add-ausers-dialog.tsx | 348 ++++++++++++++++++++++++++++
 1 file changed, 348 insertions(+)
 create mode 100644 lib/admin-users/table/add-ausers-dialog.tsx

(limited to 'lib/admin-users/table/add-ausers-dialog.tsx')

diff --git a/lib/admin-users/table/add-ausers-dialog.tsx b/lib/admin-users/table/add-ausers-dialog.tsx
new file mode 100644
index 00000000..dd29c190
--- /dev/null
+++ b/lib/admin-users/table/add-ausers-dialog.tsx
@@ -0,0 +1,348 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+// react-hook-form + shadcn/ui Form
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Role, userRoles } from "@/db/schema/users"
+import { createUserSchema, type CreateUserSchema } from "@/lib/admin-users/validations"
+import { createAdminUser, getAllCompanies, getAllRoles } from "@/lib/admin-users/service"
+import { type Company } from "@/db/schema/companies"
+import { MultiSelect } from "@/components/ui/multi-select"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { Check, ChevronsUpDown, Loader } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+import { Vendor } from "@/db/schema/vendors"
+
+const languageOptions = [
+  { value: "ko", label: "한국어" },
+  { value: "en", label: "English" },
+]
+
+
+export function AddUserDialog() {
+  const [open, setOpen] = React.useState(false)
+  const [companies, setCompanies] = React.useState<Vendor[]>([])  // 회사 목록
+  const [roles, setRoles] = React.useState<Role[]>([]) 
+  const [isAddPending, startAddTransition] = React.useTransition()
+
+
+  
+  React.useEffect(() => {
+    // 회사 목록 불러오기 (예시)
+    getAllCompanies().then((res) => {
+      setCompanies(res)
+    })
+
+    getAllRoles().then((res) => {
+      setRoles(res)
+    })
+  }, [])
+
+  // react-hook-form 세팅
+  const form = useForm<CreateUserSchema & { language?: string }>({
+    resolver: zodResolver(createUserSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      companyId: null,
+      language:'en',
+      // roles는 array<string>, 여기서는 단일 선택 시 [role]로 담음
+      roles: [],
+      domain:'partners'
+      // domain, etc. 필요하다면 추가
+    },
+  })
+
+
+  async function onSubmit(data: CreateUserSchema & { language?: string }) {
+      data.domain = "partners"
+
+    // 만약 단일 Select로 role을 정했다면, data.roles = ["manager"] 이런 식
+    startAddTransition(async ()=> {
+      const result = await createAdminUser(data)
+      if (result.error) {
+        toast.error(`에러: ${result.error}`)
+        return
+      }
+      form.reset()
+      setOpen(false)
+      toast.success("User added")
+    })
+
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add User
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New User</DialogTitle>
+          <DialogDescription>
+            새 User 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              {/* 사용자 이름 */}
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>User Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. dujin"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 이메일 */}
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. user@example.com"
+                        type="email"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 회사 선택 (companyId) */}
+              <FormField
+                control={form.control}
+                name="companyId"
+                render={({ field }) => {
+                  // 현재 선택된 회사 ID (number) → 문자열
+                  const valueString = field.value ? String(field.value) : ""
+
+
+                  // 현재 선택된 회사
+                  const selectedCompany = companies.find(
+                    (c) => String(c.id) === valueString
+                  )
+
+                  const selectedCompanyLabel = selectedCompany && `${selectedCompany.vendorName} ${selectedCompany.taxId}`
+
+                  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+
+                  return (
+                    <FormItem>
+                      <FormLabel>Company</FormLabel>
+                      <FormControl>
+                        <Popover
+                          open={popoverOpen}
+                          onOpenChange={setPopoverOpen}
+                          modal={true}
+                        >
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              aria-expanded={popoverOpen}
+                              className="w-full justify-between"
+                            >
+                              {selectedCompany
+                                ? `${selectedCompany.vendorName} ${selectedCompany.taxId}`
+                                : "Select company..."}
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+
+                          <PopoverContent className="w-full p-0">
+                            <Command>
+                              <CommandInput
+                                placeholder="Search company..."
+                                className="h-9"
+
+                              />
+                              <CommandList>
+                                <CommandEmpty>No company found.</CommandEmpty>
+                                <CommandGroup>
+                                  {companies.map((comp) => {
+                                    // string(comp.id)
+                                    const compIdStr = String(comp.id)
+                                    const label = `${comp.vendorName}${comp.taxId}`
+                                    const label2 = `${comp.vendorName} ${comp.taxId}`
+                                    return (
+                                      <CommandItem
+                                        key={comp.id}
+                                        value={label2}
+                                        onSelect={() => {
+                                          // 회사 ID를 number로
+                                          field.onChange(Number(comp.id))
+                                          setPopoverOpen(false)
+
+                                        }}
+                                      >
+                                        {label2}
+                                        <Check
+                                          className={cn(
+                                            "ml-auto h-4 w-4",
+                                            selectedCompanyLabel === label2
+                                              ? "opacity-100"
+                                              : "opacity-0"
+                                          )}
+                                        />
+                                      </CommandItem>
+                                    )
+                                  })}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )
+                }}
+              />
+              {/* Role (Vendor Admin) - 읽기 전용 */}
+              <FormField
+                control={form.control}
+                name="roles" // 실제 필드: z.array(z.string())
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    {/* UI에선 그냥 Vendor Admin이라고 표시만 (disabled) */}
+                    <FormControl>
+                      <Input
+                        readOnly
+                        disabled
+                        value="Vendor Admin"
+                        className="bg-gray-50 text-gray-500"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* language Select */}
+              <FormField
+                control={form.control}
+                name="language"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Language</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        // 'value'로 현재 값 연결. defaultValue 대신 Controlled 컴포넌트로
+                        value={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select language" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {languageOptions.map((v, index) => (
+                            <SelectItem key={index} value={v.value}>
+                              {v.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isAddPending}
+              >
+              {isAddPending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting || isAddPending}>
+              {isAddPending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3