@simplysm/sd-cli 13.0.71 → 13.0.72

package/templates/init/packages/client-admin/src/views/home/HomeView.tsx

@@ -0,0 +1,108 @@
+import { createSignal, onMount, Show, Suspense } from "solid-js";
+import { type RouteSectionProps, useLocation, useNavigate } from "@solidjs/router";
+import {
+  BusyContainer,
+  NotificationBell,
+  Sidebar,
+  ThemeToggle,
+  Topbar,
+  useNotification,
+} from "@simplysm/solid";
+import { env } from "@simplysm/core-common";
+import { useAuth } from "../../providers/AuthProvider";
+import { useAppService } from "../../providers/AppServiceProvider";
+import { useAppStructure } from "../../providers/AppStructureProvider";
+
+function HomeContent(props: RouteSectionProps) {
+  const auth = useAuth();
+  const appService = useAppService();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const noti = useNotification();
+  const appStructure = useAppStructure();
+
+  const [ready, setReady] = createSignal(false);
+
+  const titleChain = () => {
+    const chain = appStructure.getTitleChainByHref(location.pathname);
+    // 최상위 그룹(홈) 제외
+    return chain.length > 1 ? chain.slice(1) : chain;
+  };
+
+  const employeeMenus = [
+    {
+      title: "설정",
+      onClick: () => navigate("/home/my-info"),
+    },
+    {
+      title: "로그아웃",
+      onClick: () => {
+        auth.logout();
+        navigate("/login", { replace: true });
+      },
+    },
+  ];
+
+  onMount(async () => {
+    try {
+      // 1. Check auth - reload token only if not already authenticated
+      if (!auth.authInfo()) {
+        const authOk = await auth.tryReloadAuth();
+        if (!authOk) {
+          navigate("/login", { replace: true });
+          return;
+        }
+      }
+
+      await appService.orm.connectWithoutTransaction(async (db) => {
+        await db.initialize();
+      });
+
+      setReady(true);
+    } catch (err) {
+      noti.error(err, "초기화 실패");
+    }
+  });
+
+  return (
+    <BusyContainer ready={ready()}>
+      <Sidebar.Container>
+        <Sidebar>
+          <div class="p-2 px-4">
+            <img src="assets/logo-landscape.png" alt="SIMPLYSM" class="h-9 w-auto" />
+          </div>
+          <Sidebar.User
+            name={auth.authInfo()?.employeeName ?? ""}
+            description={auth.authInfo()?.email ?? ""}
+            menus={employeeMenus}
+          />
+          <Sidebar.Menu menus={appStructure.usableMenus()} class="flex-1" />
+          <div class="pointer-events-none px-2 py-1 text-sm text-black/30 dark:text-white/30">
+            v{env.VER}
+            <Show when={env.DEV}>(dev)</Show>
+          </div>
+        </Sidebar>
+
+        <Topbar.Container>
+          <Topbar>
+            <span class="ml-2 mr-6 text-lg font-bold">{titleChain().join(" > ")}</span>
+            <Topbar.Actions />
+            <div class="flex-1" />
+            <NotificationBell />
+            <ThemeToggle size="sm" />
+          </Topbar>
+
+          <main class="flex-1 overflow-auto">
+            <Suspense fallback={<BusyContainer ready={false} />}>
+              {props.children}
+            </Suspense>
+          </main>
+        </Topbar.Container>
+      </Sidebar.Container>
+    </BusyContainer>
+  );
+}
+
+export function HomeView(props: RouteSectionProps) {
+  return <HomeContent {...props} />;
+}

package/templates/init/packages/client-admin/src/views/home/base/employee/EmployeeDetail.tsx.hbs

@@ -0,0 +1,262 @@
+import { createMemo, Show } from "solid-js";
+import { CrudDetail, DatePicker, FormTable, TextInput, useSharedData } from "@simplysm/solid";
+import type { DateOnly } from "@simplysm/core-common";
+import { expr, type IDataLogJoinResult } from "@{{projectName}}/db-main";
+import { useAuth } from "../../../../providers/AuthProvider";
+import { useAppService } from "../../../../providers/AppServiceProvider";
+import type { AppSharedData } from "../../../../providers/configureSharedData";
+
+type DetailData = {
+  name?: string;
+  email?: string;
+  phoneNumber?: string;
+  birthDate?: DateOnly;
+  enteringDate?: DateOnly;
+  leavingDate?: DateOnly;
+  socialSecurityNumber?: string;
+  payrollAccountBank?: string;
+  payrollAccountNumber?: string;
+  password?: string;
+  isDeleted: boolean;
+};
+
+export function EmployeeDetail(props: { itemId?: number }) {
+  const auth = useAuth();
+  const appService = useAppService();
+  const sharedData = useSharedData<AppSharedData>();
+
+  const perms = createMemo(() => {
+    const p = auth.authInfo()?.permissions ?? {};
+    return {
+      edit: Boolean(p["/home/base/employee/edit"]),
+      authUse: Boolean(p["/home/base/employee/auth/use"]),
+      authEdit: Boolean(p["/home/base/employee/auth/edit"]),
+      personalUse: Boolean(p["/home/base/employee/personal/use"]),
+      personalEdit: Boolean(p["/home/base/employee/personal/edit"]),
+      payrollUse: Boolean(p["/home/base/employee/payroll/use"]),
+      payrollEdit: Boolean(p["/home/base/employee/payroll/edit"]),
+    };
+  });
+
+  // toggleDelete에서 현재 데이터 접근용
+  let dataRef: DetailData = { isDeleted: false };
+
+  async function handleLoad() {
+    if (props.itemId == null) {
+      return {
+        data: { isDeleted: false } as DetailData,
+        info: { isNew: true, isDeleted: false },
+      };
+    }
+
+    return appService.orm.connect(async (db) => {
+      const emp = await db
+        .employee()
+        .joinLastDataLog()
+        // eslint-disable-next-line solid/reactivity -- 비동기 콜백 내부
+        .where((c) => [expr.eq(c.id, props.itemId)])
+        .select((c) => ({
+          name: c.name,
+          email: c.email,
+          phoneNumber: c.phoneNumber,
+          birthDate: c.birthDate,
+          enteringDate: c.enteringDate,
+          leavingDate: c.leavingDate,
+          socialSecurityNumber: c.socialSecurityNumber,
+          payrollAccountBank: c.payrollAccountBank,
+          payrollAccountNumber: c.payrollAccountNumber,
+          isDeleted: c.isDeleted,
+          lastDataLog: c.lastDataLog,
+        }))
+        .single();
+
+      if (!emp) throw new Error("직원를 찾을 수 없습니다.");
+
+      const lastDataLog = emp.lastDataLog as IDataLogJoinResult | undefined;
+
+      return {
+        data: {
+          name: emp.name,
+          email: emp.email,
+          phoneNumber: emp.phoneNumber,
+          birthDate: emp.birthDate,
+          enteringDate: emp.enteringDate,
+          leavingDate: emp.leavingDate,
+          socialSecurityNumber: emp.socialSecurityNumber,
+          payrollAccountBank: emp.payrollAccountBank,
+          payrollAccountNumber: emp.payrollAccountNumber,
+          isDeleted: emp.isDeleted,
+        } as DetailData,
+        info: {
+          isNew: false,
+          isDeleted: emp.isDeleted,
+          lastModifiedAt: lastDataLog?.dateTime,
+          lastModifiedBy: lastDataLog?.employeeName,
+        },
+      };
+    });
+  }
+
+  async function handleSubmit(data: DetailData) {
+    const ids = await appService.employee.save([{ id: props.itemId, ...data }]);
+    await sharedData.employee.emit(ids);
+    return true;
+  }
+
+  async function handleToggleDelete(del: boolean) {
+    const ids = await appService.employee.save([{ id: props.itemId!, ...dataRef, isDeleted: del }]);
+    await sharedData.employee.emit(ids);
+    return true;
+  }
+
+  return (
+    <CrudDetail<DetailData>
+      editable={perms().edit}
+      deletable={props.itemId != null && props.itemId !== auth.authInfo()?.employeeId}
+      load={handleLoad}
+      submit={handleSubmit}
+      toggleDelete={handleToggleDelete}
+    >
+      {(ctx) => {
+        dataRef = ctx.data;
+        return (
+          <div class="flex flex-col gap-8">
+            <section class={"flex flex-col gap-2"}>
+              <h3 class="font-bold text-base-400">직원정보</h3>
+              <FormTable>
+                <tbody>
+                  <tr>
+                    <th>이름</th>
+                    <td>
+                      <TextInput
+                        required
+                        disabled={!perms().edit}
+                        value={ctx.data.name ?? ""}
+                        onValueChange={(v) => ctx.setData("name", v)}
+                      />
+                    </td>
+                    <th>이메일</th>
+                    <td>
+                      <TextInput
+                        type="email"
+                        disabled={!perms().edit}
+                        value={ctx.data.email ?? ""}
+                        onValueChange={(v) => ctx.setData("email", v)}
+                      />
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>전화번호</th>
+                    <td>
+                      <TextInput
+                        disabled={!perms().edit}
+                        value={ctx.data.phoneNumber ?? ""}
+                        onValueChange={(v) => ctx.setData("phoneNumber", v)}
+                      />
+                    </td>
+                    <th>생년월일</th>
+                    <td>
+                      <DatePicker
+                        disabled={!perms().edit}
+                        value={ctx.data.birthDate}
+                        onValueChange={(v) => ctx.setData("birthDate", v)}
+                      />
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>입사일자</th>
+                    <td>
+                      <DatePicker
+                        disabled={!perms().edit}
+                        value={ctx.data.enteringDate}
+                        onValueChange={(v) => ctx.setData("enteringDate", v)}
+                      />
+                    </td>
+                    <th>퇴사일자</th>
+                    <td>
+                      <DatePicker
+                        disabled={!perms().edit}
+                        value={ctx.data.leavingDate}
+                        onValueChange={(v) => ctx.setData("leavingDate", v)}
+                      />
+                    </td>
+                  </tr>
+                </tbody>
+              </FormTable>
+            </section>
+
+            <Show when={perms().authUse}>
+              <section class={"flex flex-col gap-2"}>
+                <h3 class="font-bold text-base-400">인증정보</h3>
+                <FormTable>
+                  <tbody>
+                    <tr>
+                      <th>비밀번호</th>
+                      <td colSpan={3}>
+                        <TextInput
+                          type="password"
+                          disabled={!perms().authEdit}
+                          value={ctx.data.password ?? ""}
+                          onValueChange={(v) => ctx.setData("password", v)}
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </FormTable>
+              </section>
+            </Show>
+
+            <Show when={perms().personalUse}>
+              <section class={"flex flex-col gap-2"}>
+                <h3 class="font-bold text-base-400">개인정보</h3>
+                <FormTable>
+                  <tbody>
+                    <tr>
+                      <th>주민번호</th>
+                      <td colSpan={3}>
+                        <TextInput
+                          format="XXXXXX-XXXXXXX"
+                          disabled={!perms().personalEdit}
+                          value={ctx.data.socialSecurityNumber ?? ""}
+                          onValueChange={(v) => ctx.setData("socialSecurityNumber", v)}
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </FormTable>
+              </section>
+            </Show>
+
+            <Show when={perms().payrollUse}>
+              <section class={"flex flex-col gap-2"}>
+                <h3 class="font-bold text-base-400">급여정보</h3>
+                <FormTable>
+                  <tbody>
+                    <tr>
+                      <th>계좌은행</th>
+                      <td>
+                        <TextInput
+                          disabled={!perms().payrollEdit}
+                          value={ctx.data.payrollAccountBank ?? ""}
+                          onValueChange={(v) => ctx.setData("payrollAccountBank", v)}
+                        />
+                      </td>
+                      <th>계좌번호</th>
+                      <td>
+                        <TextInput
+                          disabled={!perms().payrollEdit}
+                          value={ctx.data.payrollAccountNumber ?? ""}
+                          onValueChange={(v) => ctx.setData("payrollAccountNumber", v)}
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </FormTable>
+              </section>
+            </Show>
+          </div>
+        );
+      }}
+    </CrudDetail>
+  );
+}

package/templates/init/packages/client-admin/src/views/home/base/employee/EmployeeSheet.tsx.hbs

@@ -0,0 +1,271 @@
+import { Show } from "solid-js";
+import {
+  Checkbox,
+  CrudSheet,
+  type ExcelConfig,
+  FormGroup,
+  type ModalEditConfig,
+  type SortingDef,
+  TextInput,
+  useDialog,
+  useSharedData,
+} from "@simplysm/solid";
+import { DateOnly, type DateTime, objGetChainValue, strIsNullOrEmpty } from "@simplysm/core-common";
+import { expr } from "@{{projectName}}/db-main";
+import { type ExprUnit } from "@simplysm/orm-common";
+import { ExcelWrapper } from "@simplysm/excel";
+import { downloadBlob } from "@simplysm/core-browser";
+import { z } from "zod";
+import { useAppService } from "../../../../providers/AppServiceProvider";
+import { useAppStructure } from "../../../../providers/AppStructureProvider";
+import { EmployeeDetail } from "./EmployeeDetail";
+import type { AppSharedData } from "../../../../providers/configureSharedData";
+
+type SheetItem = {
+  id?: number;
+  name?: string;
+  email?: string;
+  phoneNumber?: string;
+  birthDate?: DateOnly;
+  enteringDate?: DateOnly;
+  leavingDate?: DateOnly;
+  socialSecurityNumber?: string;
+  payrollAccountBank?: string;
+  payrollAccountNumber?: string;
+  isDeleted: boolean;
+  lastDataLog?: {
+    action: string;
+    dateTime: DateTime;
+    employeeName?: string;
+  };
+};
+
+type Filter = {
+  searchText?: string;
+  isIncludeLeft: boolean;
+  isIncludeDeleted: boolean;
+};
+
+const ITEMS_PER_PAGE = 50;
+
+const excelWrapper = new ExcelWrapper(
+  z.object({
+    id: z.number().optional().describe("ID"),
+    name: z.string().describe("이름"),
+    email: z.string().optional().describe("이메일"),
+    phoneNumber: z.string().optional().describe("전화번호"),
+    birthDate: z.custom<DateOnly>().optional().describe("생년월일"),
+    enteringDate: z.custom<DateOnly>().optional().describe("입사일자"),
+    leavingDate: z.custom<DateOnly>().optional().describe("퇴사일자"),
+    isDeleted: z.boolean().describe("삭제여부"),
+    socialSecurityNumber: z.string().optional().describe("주민번호"),
+    payrollAccountBank: z.string().optional().describe("급여계좌은행"),
+    payrollAccountNumber: z.string().optional().describe("급여계좌번호"),
+    password: z.string().optional().describe("비밀번호"),
+  }),
+);
+
+export function EmployeeSheet() {
+  const appService = useAppService();
+  const dialog = useDialog();
+  const sharedData = useSharedData<AppSharedData>();
+
+  const { perms } = useAppStructure();
+  const employeePerms = perms.home.base.employee;
+
+  const modalEdit: ModalEditConfig<SheetItem> = {
+    editItem: (item) =>
+      dialog.show(() => <EmployeeDetail itemId={item?.id} />, {
+        header: item ? "직원 수정" : "직원 등록",
+      }),
+  };
+
+  const excel: ExcelConfig<SheetItem> = {
+    download: async (items) => {
+      await using wb = await excelWrapper.write("직원", items, {
+        excludes: [
+          ...(!employeePerms.personal.use ? (["socialSecurityNumber"] as const) : []),
+          ...(!employeePerms.payroll.use
+            ? (["payrollAccountBank", "payrollAccountNumber"] as const)
+            : []),
+          ...(!employeePerms.auth.edit ? (["password"] as const) : []),
+        ],
+      });
+      const blob = await wb.getBlob();
+      downloadBlob(blob, "직원.xlsx");
+    },
+    upload: async (file) => {
+      const excelItems = await excelWrapper.read(file);
+      const ids = await appService.employee.save(excelItems);
+      await sharedData.employee.emit(ids);
+    },
+  };
+
+  async function search(filter: Filter, page: number | undefined, sorts: SortingDef[]) {
+    return appService.orm.connect(async (db) => {
+      let qr = db.employee();
+
+      const searchText = filter.searchText?.trim();
+      if (!strIsNullOrEmpty(searchText)) {
+        qr = qr.search((c) => [c.name, c.email, c.phoneNumber], searchText);
+      }
+
+      if (!filter.isIncludeLeft) {
+        qr = qr.where((c) => [
+          expr.or([expr.null(c.leavingDate), expr.gt(c.leavingDate, new DateOnly())]),
+        ]);
+      }
+
+      if (!filter.isIncludeDeleted) {
+        qr = qr.where((c) => [expr.eq(c.isDeleted, false)]);
+      }
+
+      const pageCount = page != null ? Math.ceil((await qr.count()) / ITEMS_PER_PAGE) : undefined;
+
+      let qr2 = qr.joinLastDataLog().select((c) => ({
+        id: c.id,
+        name: c.name,
+        email: c.email,
+        phoneNumber: c.phoneNumber,
+        birthDate: c.birthDate,
+        enteringDate: c.enteringDate,
+        leavingDate: c.leavingDate,
+        ...(employeePerms.personal.use ? { socialSecurityNumber: c.socialSecurityNumber } : {}),
+        ...(employeePerms.payroll.use
+          ? {
+              payrollAccountBank: c.payrollAccountBank,
+              payrollAccountNumber: c.payrollAccountNumber,
+            }
+          : {}),
+        isDeleted: c.isDeleted,
+        lastDataLog: c.lastDataLog,
+      }));
+
+      for (const sort of sorts) {
+        qr2 = qr2.orderBy(
+          (c) => objGetChainValue(c, sort.key) as ExprUnit<any>,
+          sort.desc ? "DESC" : "ASC",
+        );
+      }
+      if (!sorts.some((s) => s.key === "id")) {
+        qr2 = qr2.orderBy((c) => c.id, "DESC");
+      }
+
+      if (page != null) {
+        qr2 = qr2.limit((page - 1) * ITEMS_PER_PAGE, ITEMS_PER_PAGE);
+      }
+
+      const items = (await qr2.result()) as SheetItem[];
+      return { items, pageCount };
+    });
+  }
+
+  return (
+    <CrudSheet<SheetItem, Filter>
+      search={search}
+      getItemKey={(item) => item.id}
+      itemDeleted={(item) => item.isDeleted}
+      isItemSelectable={(item) => item.id != null}
+      persistKey="employee-page"
+      editable={employeePerms.edit}
+      filterInitial=\{{ isIncludeLeft: false, isIncludeDeleted: false } as Filter}
+      modalEdit={modalEdit}
+      excel={excel}
+      lastModifiedAtProp="lastDataLog.dateTime"
+      lastModifiedByProp="lastDataLog.employeeName"
+    >
+      <CrudSheet.Filter<Filter>>
+        {(filter, setFilter) => (
+          <>
+            <FormGroup.Item label="검색어">
+              <TextInput
+                value={filter.searchText}
+                onValueChange={(v) => setFilter("searchText", v)}
+              />
+            </FormGroup.Item>
+            <FormGroup.Item>
+              <Checkbox
+                value={filter.isIncludeLeft}
+                onValueChange={(v) => setFilter("isIncludeLeft", v)}
+              >
+                퇴사자 포함
+              </Checkbox>
+            </FormGroup.Item>
+            <FormGroup.Item>
+              <Checkbox
+                value={filter.isIncludeDeleted}
+                onValueChange={(v) => setFilter("isIncludeDeleted", v)}
+              >
+                삭제항목 포함
+              </Checkbox>
+            </FormGroup.Item>
+          </>
+        )}
+      </CrudSheet.Filter>
+
+      <CrudSheet.Column<SheetItem> key="id" header="#" editTrigger>
+        {({ item }) => <div class="px-2 py-1 text-right">{item.id}</div>}
+      </CrudSheet.Column>
+
+      <CrudSheet.Column<SheetItem> key="name" header="이름">
+        {({ item }) => <div class="px-2 py-1">{item.name}</div>}
+      </CrudSheet.Column>
+
+      <CrudSheet.Column<SheetItem> key="email" header="이메일">
+        {({ item }) => <div class="px-2 py-1">{item.email}</div>}
+      </CrudSheet.Column>
+
+      <CrudSheet.Column<SheetItem> key="phoneNumber" header="전화번호">
+        {({ item }) => <div class="px-2 py-1">{item.phoneNumber}</div>}
+      </CrudSheet.Column>
+
+      <CrudSheet.Column<SheetItem> key="birthDate" header="생년월일">
+        {({ item }) => (
+          <div class="px-2 py-1">{item.birthDate?.toFormatString("yyyy-MM-dd") ?? ""}</div>
+        )}
+      </CrudSheet.Column>
+
+      <CrudSheet.Column<SheetItem> key="enteringDate" header="입사일자">
+        {({ item }) => (
+          <div class="px-2 py-1">{item.enteringDate?.toFormatString("yyyy-MM-dd") ?? ""}</div>
+        )}
+      </CrudSheet.Column>
+
+      <CrudSheet.Column<SheetItem> key="leavingDate" header="퇴사일자">
+        {({ item }) => (
+          <div class={`px-2 py-1${item.leavingDate != null ? " text-warning-600" : ""}`}>
+            {item.leavingDate?.toFormatString("yyyy-MM-dd") ?? ""}
+          </div>
+        )}
+      </CrudSheet.Column>
+
+      <Show when={employeePerms.auth.use}>
+        <CrudSheet.Column<SheetItem>
+          key="password"
+          header={["인증정보", "비밀번호"]}
+          sortable={false}
+        >
+          {() => <div class="px-2 py-1">****</div>}
+        </CrudSheet.Column>
+      </Show>
+
+      <Show when={employeePerms.personal.use}>
+        <CrudSheet.Column<SheetItem> key="socialSecurityNumber" header={["개인정보", "주민번호"]}>
+          {({ item }) => <div class="px-2 py-1">{item.socialSecurityNumber}</div>}
+        </CrudSheet.Column>
+      </Show>
+
+      <Show when={employeePerms.payroll.use}>
+        <CrudSheet.Column<SheetItem> key="payrollAccountBank" header={["급여정보", "계좌은행"]}>
+          {({ item }) => <div class="px-2 py-1">{item.payrollAccountBank}</div>}
+        </CrudSheet.Column>
+      </Show>
+
+      <Show when={employeePerms.payroll.use}>
+        <CrudSheet.Column<SheetItem> key="payrollAccountNumber" header={["급여정보", "계좌번호"]}>
+          {({ item }) => <div class="px-2 py-1">{item.payrollAccountNumber}</div>}
+        </CrudSheet.Column>
+      </Show>
+    </CrudSheet>
+  );
+}