@jean.anjos/coresuit-gen-crud 1.1.0

package/README.md

@@ -0,0 +1,26 @@
+
+# como instalar no projeto
+
+### Baixa o projeto git clone
+
+## no seu package.json colocar 
+
+```
+ "scripts": {
+    "generate": "coresuit-react-gen"
+  },
+```
+
+## instala com o seguinte comando
+npm i -D C:\dev\core-suit\generate-crud-react-js
+
+# (opcional) filtrar por tags:
+
+```
+ npm run generate -- "--link=http://127.0.0.1:8000/docs?api-docs.json" --only=Categoria,Cliente
+
+```
+
+```
+npm run generate -- --name=categoria --fields="id:int:true,user_id:int:true,nome:string:true,deleted_at:string:false,created_at:string:false,updated_at:string:false"
+```

package/bin/cli.js

@@ -0,0 +1,377 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+const fs = require("fs");
+const path = require("path");
+
+// ---------- utils de nome ----------
+function toPascalCase(s) {
+  return String(s)
+    .replace(/[_\-\s]+/g, " ")
+    .replace(/(?:^|\s)(\w)/g, (_, c) => c.toUpperCase())
+    .replace(/\s+/g, "");
+}
+function toCamelCase(s) {
+  const p = toPascalCase(s);
+  return p.charAt(0).toLowerCase() + p.slice(1);
+}
+function toKebab(s) {
+  return String(s)
+    .trim()
+    .replace(/[_\s]+/g, "-")
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .toLowerCase();
+}
+
+// nome de campo no MODEL (response) => camelCase simples
+function toModelFieldName(dtoFieldName) {
+  const n = String(dtoFieldName || "").trim();
+  if (!n) return n;
+  return n.charAt(0).toLowerCase() + n.slice(1);
+}
+
+// ---------- tipos ----------
+function tsTypeFor(t) {
+  t = String(t || "").toLowerCase();
+  if (["int", "bigint", "integer", "smallint", "tinyint", "float", "double", "decimal", "number"].includes(t))
+    return "number";
+  if (["bool", "boolean"].includes(t)) return "boolean";
+  if (["json", "array", "object", "any"].includes(t)) return "any";
+  if (["date", "datetime", "date-time"].includes(t)) return "string";
+  return "string";
+}
+
+function isNumberType(t) {
+  return tsTypeFor(t) === "number";
+}
+function isBooleanType(t) {
+  return tsTypeFor(t) === "boolean";
+}
+function isDateType(t) {
+  return ["date", "datetime", "date-time"].includes(String(t).toLowerCase()) || /date/i.test(String(t));
+}
+
+// ---------- args ----------
+function getArgMap(argv) {
+  const map = new Map();
+  const args = argv.slice(2);
+
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (!a.startsWith("--")) continue;
+
+    const eq = a.indexOf("=");
+    if (eq > 2) {
+      map.set(a.slice(2, eq), a.slice(eq + 1));
+    } else {
+      const key = a.slice(2);
+      const nx = args[i + 1];
+      if (nx && !nx.startsWith("--")) {
+        map.set(key, nx);
+        i++;
+      } else map.set(key, "true");
+    }
+  }
+
+  // fallback npm_config_*
+  for (const k of ["name", "fields", "force", "baseDir", "servicesDir", "typesDir"]) {
+    const ev = process.env[`npm_config_${k.replace(/-/g, "_")}`];
+    if (ev !== undefined && !map.has(k)) map.set(k, ev);
+  }
+
+  return Object.fromEntries(map);
+}
+
+// ---------- fs helpers ----------
+function ensureDir(dir) {
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+}
+function writeFile(dest, contents, force) {
+  ensureDir(path.dirname(dest));
+  if (fs.existsSync(dest) && !force) {
+    console.log(`• Já existe: ${dest} (use --force=true para sobrescrever)`);
+    return;
+  }
+  fs.writeFileSync(dest, contents);
+  console.log(`• Criado: ${dest}`);
+}
+function readTpl(name) {
+  const root = path.dirname(path.dirname(__filename));
+  return fs.readFileSync(path.join(root, "templates", name), "utf8");
+}
+
+// ---------- templates ----------
+const TPL_SERVICE_INDEX = readTpl("service_index.ts.tpl");
+const TPL_SERVICE_TYPES = readTpl("service_types.ts.tpl");
+const TPL_ENTITY_IFACE = readTpl("types_interface.ts.tpl");
+
+const TPL_PAGE_INDEX = readTpl("page__index.tsx.tpl");
+const TPL_CONSTS = readTpl("page__consts__index.ts.tpl");
+const TPL_FILTERS_COMPONENT = readTpl("page__components__filters.tsx.tpl");
+
+const TPL_CREATE = readTpl("page__create__index.tsx.tpl");
+const TPL_UPDATE = readTpl("page__update__index.tsx.tpl");
+const TPL_DELETE = readTpl("page__delete__index.tsx.tpl");
+const TPL_RESTORE = readTpl("page__restore__index.tsx.tpl");
+
+const TPL_HOOK_INDEX = readTpl("page__hooks__use-index.ts.tpl");
+const TPL_HOOK_CREATE = readTpl("page__hooks__use-create.ts.tpl");
+const TPL_HOOK_UPDATE = readTpl("page__hooks__use-update.ts.tpl");
+const TPL_HOOK_DELETE = readTpl("page__hooks__use-delete.ts.tpl");
+const TPL_HOOK_RESTORE = readTpl("page__hooks__use-restore.ts.tpl");
+
+function renderTemplate(tpl, ctx) {
+  return tpl
+    .replaceAll("{{PascalName}}", ctx.PascalName)
+    .replaceAll("{{camelName}}", ctx.camelName)
+    .replaceAll("{{kebabName}}", ctx.kebabName)
+    .replaceAll("{{route}}", ctx.route)
+    .replaceAll("{{FIELDS_INTERFACE}}", ctx.FIELDS_INTERFACE || "")
+    .replaceAll("{{FILTERS_INTERFACE}}", ctx.FILTERS_INTERFACE || "")
+    .replaceAll("{{CREATE_FIELDS}}", ctx.CREATE_FIELDS || "")
+    .replaceAll("{{UPDATE_FIELDS}}", ctx.UPDATE_FIELDS || "")
+    .replaceAll("{{TABLE_HEAD}}", ctx.TABLE_HEAD || "")
+    .replaceAll("{{TABLE_ROW_CELLS}}", ctx.TABLE_ROW_CELLS || "")
+    .replaceAll("{{FILTERS_INITIAL_OBJECT}}", ctx.FILTERS_INITIAL_OBJECT || "")
+    .replaceAll("{{FILTERS_FIELDS_JSX}}", ctx.FILTERS_FIELDS_JSX || "")
+    .replaceAll("{{FILTER_SPREAD_IN_QUERY}}", ctx.FILTER_SPREAD_IN_QUERY || "")
+    .replaceAll("{{FORM_FIELDS_CREATE_TSX}}", ctx.FORM_FIELDS_CREATE_TSX || "")
+    .replaceAll("{{FORM_FIELDS_UPDATE_TSX}}", ctx.FORM_FIELDS_UPDATE_TSX || "")
+    .replaceAll("{{YUP_CREATE_RULES}}", ctx.YUP_CREATE_RULES || "")
+    .replaceAll("{{YUP_UPDATE_RULES}}", ctx.YUP_UPDATE_RULES || "")
+    .replaceAll("{{FORM_DEFAULTS_CREATE}}", ctx.FORM_DEFAULTS_CREATE || "")
+    .replaceAll("{{FORM_DEFAULTS_UPDATE}}", ctx.FORM_DEFAULTS_UPDATE || "")
+    .replaceAll("{{FORM_VALUES_UPDATE}}", ctx.FORM_VALUES_UPDATE || "");
+}
+
+// ---------- parsing manual ----------
+function parseFields(raw) {
+  if (!raw) return [];
+  return raw
+    .split(",")
+    .map((x) => x.trim())
+    .filter(Boolean)
+    .map((chunk) => {
+      const [name, type, required] = chunk.split(":");
+      return {
+        name: String(name).trim(),              // DTO/Request => PascalCase
+        type: String(type || "string").trim(),
+        required: String(required || "false").toLowerCase() === "true",
+        modelName: toModelFieldName(String(name).trim()), // Model/Response => camelCase
+      };
+    });
+}
+
+// ---------- geração (novo padrão) ----------
+function buildCtxFromFields(resourceName, fields) {
+  const PascalName = toPascalCase(resourceName); // Bank
+  const camelName = toCamelCase(resourceName);   // bank
+  const kebabName = toKebab(resourceName);       // bank
+
+  // endpoint => PascalName literal
+  const route = PascalName;
+
+  // 1) Interface de entidade (MODEL/Response) camelCase + campos padrão
+  const entityFields = [
+    { name: "id", ts: "number" },
+    ...fields.map((f) => ({ name: f.modelName, ts: tsTypeFor(f.type) })),
+    { name: "deletedAt", ts: "string" },
+    { name: "createdAt", ts: "string" },
+    { name: "updatedAt", ts: "string" },
+  ];
+
+  const FIELDS_INTERFACE = entityFields
+    .map((f, i, arr) => `    ${f.name}: ${f.ts}${i < arr.length - 1 ? "," : ""}`)
+    .join("\n");
+
+  // 2) Table head (Padrão fixo)
+  const TABLE_HEAD = [
+    `  { id: 'Id', label: 'Id' },`,
+    ...fields.map((f) => `  { id: '${f.name}', label: '${f.name}' },`),
+    `  { id: 'DeletedAt', label: 'Ativo?' },`,
+    `  { id: 'CreatedAt', label: 'Cadastro' },`,
+    `  { id: 'UpdatedAt', label: 'Atualizado' },`,
+  ].join("\n");
+
+  // 3) Table row cells (MODEL)
+  const TABLE_ROW_CELLS = [
+    `                  <TableCell>{d.id}</TableCell>`,
+    ...fields.map((f) => `                  <TableCell>{d.${f.modelName}}</TableCell>`),
+    `                  <TableCell>
+                    <Label color={d.deletedAt ? 'error' : 'success'}>
+                      {d.deletedAt ? 'Não' : 'Sim'}
+                    </Label>
+                  </TableCell>`,
+    `                  <TableCell>{d.createdAt ? dayjs(d.createdAt).format('lll') : ''}</TableCell>`,
+    `                  <TableCell>{d.updatedAt ? dayjs(d.updatedAt).format('lll') : ''}</TableCell>`,
+  ].join("\n");
+
+  // 4) Filters (DTO)
+  const FILTERS_INITIAL_OBJECT = fields.map((f) => `  ${f.name}: ""`).join(",\n");
+
+  const FILTERS_FIELDS_JSX = fields
+    .map(
+      (f) => `
+        <TextField
+          value={filter.${f.name}}
+          onChange={(e) => setFilter(prev => ({ ...prev, ${f.name}: e.target.value }))}
+          label="${f.name}"
+          autoComplete="off"
+          sx={{ mb: 2 }}
+        />`.trim()
+    )
+    .join("\n\n        ");
+
+  const FILTER_SPREAD_IN_QUERY = fields.map((f) => `          ${f.name}: filter.${f.name},`).join("\n");
+
+  // 5) Services types (DTO)
+  const FILTERS_INTERFACE = fields.map((f) => `    ${f.name}: string;`).join("\n");
+
+  const CREATE_FIELDS = fields
+    .map((f) => `    ${f.name}${f.required ? "" : "?"}: ${tsTypeFor(f.type)};`)
+    .join("\n");
+
+  const UPDATE_FIELDS = fields
+    .map((f) => `    ${f.name}${f.required ? "" : "?"}: ${tsTypeFor(f.type)};`)
+    .join("\n");
+
+  // 6) Form fields (DTO) - Field.Text
+  function fieldToTsx(f) {
+    const isNum = isNumberType(f.type);
+    return `            <Grid item md={12} xs={12}>
+              <Field.Text fullWidth name="${f.name}" label="${f.name}"${isNum ? ' type="number"' : ""} />
+            </Grid>`;
+  }
+
+  const FORM_FIELDS_CREATE_TSX = fields.map(fieldToTsx).join("\n");
+  const FORM_FIELDS_UPDATE_TSX = fields.map(fieldToTsx).join("\n");
+
+  // 7) Yup + defaults
+  function yupBaseByType(f) {
+    if (isNumberType(f.type)) return `yup.number().typeError("Número inválido")`;
+    if (isBooleanType(f.type)) return `yup.boolean()`;
+    if (isDateType(f.type)) return `yup.string()`;
+    return `yup.string()`;
+  }
+
+  function yupRule(f, isReq) {
+    const base = yupBaseByType(f);
+    return `    ${f.name}: ${base}${isReq ? '.required("Campo obrigatório")' : ".optional()"},`;
+  }
+
+  const YUP_CREATE_RULES = fields.map((f) => yupRule(f, !!f.required)).join("\n");
+  const YUP_UPDATE_RULES = fields.map((f) => yupRule(f, !!f.required)).join("\n");
+
+  const FORM_DEFAULTS_CREATE = fields
+    .map((f) => `      ${f.name}: ${isNumberType(f.type) ? "undefined" : '""'},`)
+    .join("\n");
+
+  const FORM_DEFAULTS_UPDATE = fields
+    .map((f) => `      ${f.name}: undefined,`)
+    .join("\n");
+
+  const FORM_VALUES_UPDATE = fields
+    .map((f) => {
+      if (isNumberType(f.type)) return `      ${f.name}: selectClickItem?.${f.modelName} ?? undefined,`;
+      return `      ${f.name}: selectClickItem?.${f.modelName} ?? "",`;
+    })
+    .join("\n");
+
+  return {
+    PascalName,
+    camelName,
+    kebabName,
+    route,
+    FIELDS_INTERFACE,
+    FILTERS_INTERFACE,
+    CREATE_FIELDS,
+    UPDATE_FIELDS,
+    TABLE_HEAD,
+    TABLE_ROW_CELLS,
+    FILTERS_INITIAL_OBJECT,
+    FILTERS_FIELDS_JSX,
+    FILTER_SPREAD_IN_QUERY,
+    FORM_FIELDS_CREATE_TSX,
+    FORM_FIELDS_UPDATE_TSX,
+    YUP_CREATE_RULES,
+    YUP_UPDATE_RULES,
+    FORM_DEFAULTS_CREATE,
+    FORM_DEFAULTS_UPDATE,
+    FORM_VALUES_UPDATE,
+  };
+}
+
+function writeOutputs(cwd, baseDir, servicesDir, typesDir, ctx) {
+  const force = writeOutputs._force;
+
+  // services + types
+  const outServiceIndex = path.join(cwd, baseDir, servicesDir, ctx.kebabName, "index.ts");
+  const outServiceTypes = path.join(cwd, baseDir, servicesDir, ctx.kebabName, "types.ts");
+  const outEntityType = path.join(cwd, baseDir, typesDir, `i-${ctx.kebabName}.ts`);
+
+  writeFile(outServiceIndex, renderTemplate(TPL_SERVICE_INDEX, ctx), force);
+  writeFile(outServiceTypes, renderTemplate(TPL_SERVICE_TYPES, ctx), force);
+  writeFile(outEntityType, renderTemplate(TPL_ENTITY_IFACE, ctx), force);
+
+  // pages
+  const pageBase = path.join(cwd, baseDir, "pages", ctx.kebabName);
+
+  writeFile(path.join(pageBase, "index.tsx"), renderTemplate(TPL_PAGE_INDEX, ctx), force);
+  writeFile(path.join(pageBase, "consts", "index.ts"), renderTemplate(TPL_CONSTS, ctx), force);
+  writeFile(path.join(pageBase, "components", `${ctx.kebabName}-filters-component.tsx`), renderTemplate(TPL_FILTERS_COMPONENT, ctx), force);
+
+  writeFile(path.join(pageBase, "create", "index.tsx"), renderTemplate(TPL_CREATE, ctx), force);
+  writeFile(path.join(pageBase, "update", "index.tsx"), renderTemplate(TPL_UPDATE, ctx), force);
+  writeFile(path.join(pageBase, "delete", "index.tsx"), renderTemplate(TPL_DELETE, ctx), force);
+  writeFile(path.join(pageBase, "restore", "index.tsx"), renderTemplate(TPL_RESTORE, ctx), force);
+
+  writeFile(path.join(pageBase, "hooks", `use-${ctx.kebabName}-index.ts`), renderTemplate(TPL_HOOK_INDEX, ctx), force);
+  writeFile(path.join(pageBase, "hooks", `use-${ctx.kebabName}-create.ts`), renderTemplate(TPL_HOOK_CREATE, ctx), force);
+  writeFile(path.join(pageBase, "hooks", `use-${ctx.kebabName}-update.ts`), renderTemplate(TPL_HOOK_UPDATE, ctx), force);
+  writeFile(path.join(pageBase, "hooks", `use-${ctx.kebabName}-delete.ts`), renderTemplate(TPL_HOOK_DELETE, ctx), force);
+  writeFile(path.join(pageBase, "hooks", `use-${ctx.kebabName}-restore.ts`), renderTemplate(TPL_HOOK_RESTORE, ctx), force);
+
+  console.log(`   → ${path.relative(cwd, outServiceIndex)}`);
+  console.log(`   → ${path.relative(cwd, outServiceTypes)}`);
+  console.log(`   → ${path.relative(cwd, outEntityType)}`);
+  console.log(`   → ${path.relative(cwd, path.join(pageBase, "index.tsx"))}`);
+}
+
+// ---------- main ----------
+async function main() {
+  const argMap = getArgMap(process.argv);
+
+  const defaults = {
+    baseDir: "src",
+    servicesDir: "services/system",
+    typesDir: "types/system",
+  };
+
+  const force = String(argMap.force || "false") === "true";
+  writeOutputs._force = force;
+
+  const baseDir = argMap.baseDir || defaults.baseDir;
+  const servicesDir = argMap.servicesDir || defaults.servicesDir;
+  const typesDir = argMap.typesDir || defaults.typesDir;
+
+  const cwd = process.cwd();
+
+  const name = argMap.name || "";
+  const fieldsRaw = argMap.fields || "";
+
+  if (!name || !fieldsRaw) {
+    console.error(
+      "Uso:\n" +
+        '  npm run generate -- --name=Bank --fields="Code:string:true,Name:string:true" [--force=true]\n'
+    );
+    process.exit(1);
+  }
+
+  const fields = parseFields(fieldsRaw);
+
+  const ctx = buildCtxFromFields(name, fields);
+  writeOutputs(cwd, baseDir, servicesDir, typesDir, ctx);
+
+  console.log("\n✅ Gerado com sucesso (novo padrão).");
+}
+
+main();

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@jean.anjos/coresuit-gen-crud",
+  "version": "1.1.0",
+  "description": "Gerador de services e types (React/TS) no padrão CoreSuit",
+  "license": "MIT",
+  "bin": {
+    "coresuit-react-gen": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=16"
+  }
+}

package/templates/page__components__filters.tsx.tpl

@@ -0,0 +1,47 @@
+import { Button, TextField, Typography } from "@mui/material";
+
+import DrawerFiltersComponent from "src/components/drawer-filters";
+
+import { InitialFilter{{PascalName}} } from "../consts";
+
+import type use{{PascalName}}Index from "../hooks/use-{{kebabName}}-index";
+
+interface IProps {
+  hook{{PascalName}}Index: ReturnType<typeof use{{PascalName}}Index>;
+}
+
+export default function {{PascalName}}FiltersComponent({ hook{{PascalName}}Index }: IProps) {
+  const { isFilterApplied, openDrawerFilters, queryClient, setFilter, filter } = hook{{PascalName}}Index;
+
+  return (
+    <DrawerFiltersComponent
+      canReset={!isFilterApplied}
+      open={openDrawerFilters.value}
+      onClose={openDrawerFilters.onFalse}
+      onOpen={openDrawerFilters.onTrue}
+      resetFilters={() => {
+        setFilter(InitialFilter{{PascalName}});
+        setTimeout(() => {
+          queryClient.invalidateQueries({ queryKey: ["data{{PascalName}}"] });
+        }, 0);
+      }}
+    >
+      <>
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>
+          Filtros de Pesquisas
+        </Typography>
+
+        {{FILTERS_FIELDS_JSX}}
+
+        <Button
+          variant="outlined"
+          onClick={() => {
+            queryClient.invalidateQueries({ queryKey: ["data{{PascalName}}"] });
+          }}
+        >
+          Aplicar Filtros
+        </Button>
+      </>
+    </DrawerFiltersComponent>
+  );
+}

package/templates/page__consts__index.ts.tpl

@@ -0,0 +1,12 @@
+import type { I{{PascalName}}Get } from "src/services/system/{{kebabName}}/types";
+
+const tableHead{{PascalName}} = [
+{{TABLE_HEAD}}
+  { id: "", label: "Ações" },
+];
+
+const InitialFilter{{PascalName}}: I{{PascalName}}Get = {
+{{FILTERS_INITIAL_OBJECT}}
+};
+
+export { tableHead{{PascalName}}, InitialFilter{{PascalName}} };

package/templates/page__create__index.tsx.tpl

@@ -0,0 +1,39 @@
+import { LoadingButton } from "@mui/lab";
+import { Grid, Stack, Button, Typography } from "@mui/material";
+
+import { Form, Field } from "src/components/hook-form";
+import DrawerFiltersComponent from "src/components/drawer-filters";
+
+import type use{{PascalName}}Create from "../hooks/use-{{kebabName}}-create";
+
+interface IProps {
+  hook{{PascalName}}Create: ReturnType<typeof use{{PascalName}}Create>;
+}
+
+export default function {{PascalName}}Create({ hook{{PascalName}}Create }: IProps) {
+  const { handleCreate, methods, openCreate, status } = hook{{PascalName}}Create;
+
+  return (
+    <DrawerFiltersComponent title="Cadastrar {{PascalName}}" open={openCreate.value} onClose={openCreate.onFalse} width={500}>
+      <>
+        <Typography variant="subtitle2">Preencha as informações</Typography>
+
+        <Form methods={methods} onSubmit={handleCreate}>
+          <Grid spacing={2} sx={{ mt: 2 }} container>
+            {{FORM_FIELDS_CREATE_TSX}}
+          </Grid>
+          <Stack spacing={2} alignItems="end" sx={{ mt: 3 }}>
+            <Stack spacing={2} flexDirection="row">
+              <Button variant="outlined" onClick={openCreate.onFalse}>
+                Cancelar
+              </Button>
+              <LoadingButton variant="outlined" type="submit" loading={status === "pending"} color="success">
+                Salvar
+              </LoadingButton>
+            </Stack>
+          </Stack>
+        </Form>
+      </>
+    </DrawerFiltersComponent>
+  );
+}

package/templates/page__delete__index.tsx.tpl

@@ -0,0 +1,31 @@
+import { LoadingButton } from "@mui/lab";
+import { Button, Dialog, Typography, DialogTitle, DialogActions, DialogContent } from "@mui/material";
+
+import type use{{PascalName}}Delete from "../hooks/use-{{kebabName}}-delete";
+
+interface IProps {
+  hook{{PascalName}}Delete: ReturnType<typeof use{{PascalName}}Delete>;
+}
+
+export default function {{PascalName}}Delete({ hook{{PascalName}}Delete }: IProps) {
+  const { openDelete, selectClickItem, handleDelete, status } = hook{{PascalName}}Delete;
+
+  return (
+    <Dialog open={openDelete.value} onClose={openDelete.onFalse} maxWidth="xs" fullWidth>
+      <DialogTitle>Excluir {{PascalName}}</DialogTitle>
+      <DialogContent dividers>
+        <Typography>
+          Você realmente deseja <strong>desativar</strong> <strong>#{selectClickItem?.id}</strong>?
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={openDelete.onFalse} variant="outlined">
+          Cancelar
+        </Button>
+        <LoadingButton variant="contained" color="error" loading={status === "pending"} onClick={handleDelete}>
+          Confirmar
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/templates/page__hooks__use-create.ts.tpl

@@ -0,0 +1,56 @@
+import type { I{{PascalName}}Create } from "src/services/system/{{kebabName}}/types";
+
+import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { enqueueSnackbar } from "notistack";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useBoolean } from "src/hooks/use-boolean";
+
+import handleApiDataError from "src/utils/handle-api-data-error";
+
+import { {{camelName}}Service } from "src/services/system/{{kebabName}}";
+
+export default function use{{PascalName}}Create() {
+  const api = {{camelName}}Service();
+
+  const validateForm = yup.object({
+{{YUP_CREATE_RULES}}
+  });
+
+  const openCreate = useBoolean();
+  const queryClient = useQueryClient();
+
+  const methods = useForm<I{{PascalName}}Create>({
+    resolver: yupResolver(validateForm),
+    defaultValues: {
+{{FORM_DEFAULTS_CREATE}}
+    },
+  });
+
+  const { mutate, status } = useMutation({
+    mutationFn: api.{{camelName}}Create,
+    onSuccess: () => {
+      enqueueSnackbar("Cadastrado com sucesso");
+      queryClient.invalidateQueries({ queryKey: ["data{{PascalName}}"] });
+      openCreate.onFalse();
+      methods.reset();
+    },
+    onError: (err) => {
+      handleApiDataError(err, enqueueSnackbar);
+    },
+  });
+
+  const handleCreate = methods.handleSubmit((data) => {
+    const params: I{{PascalName}}Create = { ...data };
+    mutate(params);
+  });
+
+  return {
+    status,
+    methods,
+    handleCreate,
+    openCreate,
+  };
+}

package/templates/page__hooks__use-delete.ts.tpl

@@ -0,0 +1,46 @@
+import type { I{{PascalName}} } from "src/types/system/i-{{kebabName}}";
+import type { I{{PascalName}}Delete } from "src/services/system/{{kebabName}}/types";
+
+import { useState } from "react";
+import { enqueueSnackbar } from "notistack";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useBoolean } from "src/hooks/use-boolean";
+
+import handleApiDataError from "src/utils/handle-api-data-error";
+
+import { {{camelName}}Service } from "src/services/system/{{kebabName}}";
+
+export default function use{{PascalName}}Delete() {
+  const api = {{camelName}}Service();
+
+  const [selectClickItem, setSelectClickItem] = useState<I{{PascalName}}>();
+
+  const openDelete = useBoolean();
+  const queryClient = useQueryClient();
+
+  const { mutate, status } = useMutation({
+    mutationFn: api.{{camelName}}Delete,
+    onSuccess: () => {
+      enqueueSnackbar("Deletado com sucesso");
+      queryClient.invalidateQueries({ queryKey: ["data{{PascalName}}"] });
+      openDelete.onFalse();
+    },
+    onError: (err) => {
+      handleApiDataError(err, enqueueSnackbar);
+    },
+  });
+
+  const handleDelete = () => {
+    const params: I{{PascalName}}Delete = { id: selectClickItem?.id.toString()! };
+    mutate(params);
+  };
+
+  return {
+    status,
+    handleDelete,
+    openDelete,
+    selectClickItem,
+    setSelectClickItem,
+  };
+}

package/templates/page__hooks__use-index.ts.tpl

@@ -0,0 +1,58 @@
+import type { I{{PascalName}}Get } from "src/services/system/{{kebabName}}/types";
+
+import { useState } from "react";
+import { isEqual } from "lodash";
+import { enqueueSnackbar } from "notistack";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+import useTable from "src/hooks/use-table";
+import { useBoolean } from "src/hooks/use-boolean";
+
+import handleApiDataError from "src/utils/handle-api-data-error";
+
+import { {{camelName}}Service } from "src/services/system/{{kebabName}}";
+
+import { InitialFilter{{PascalName}} } from "../consts";
+
+export default function use{{PascalName}}Index() {
+  const api = {{camelName}}Service();
+
+  const [filter, setFilter] = useState<I{{PascalName}}Get>(InitialFilter{{PascalName}});
+
+  const table = useTable();
+  const openDrawerFilters = useBoolean();
+  const queryClient = useQueryClient();
+
+  const { data: data{{PascalName}}, status: status{{PascalName}} } = useQuery({
+    queryKey: ["data{{PascalName}}", table, filter],
+    queryFn: async () => {
+      try {
+        const params: I{{PascalName}}Get = {
+          Direction: table.order,
+          PageNumber: table.page,
+          PageSize: table.pageSize,
+          SortBy: table.orderBy,
+{{FILTER_SPREAD_IN_QUERY}}
+        };
+        const response = await api.{{camelName}}Get(params);
+        return response;
+      } catch (error) {
+        handleApiDataError(error, enqueueSnackbar);
+        throw error;
+      }
+    },
+  });
+
+  const isFilterApplied = !!isEqual(filter, InitialFilter{{PascalName}});
+
+  return {
+    table,
+    queryClient,
+    data{{PascalName}},
+    status{{PascalName}},
+    filter,
+    openDrawerFilters,
+    setFilter,
+    isFilterApplied,
+  };
+}

package/templates/page__hooks__use-restore.ts.tpl

@@ -0,0 +1,46 @@
+import type { I{{PascalName}} } from "src/types/system/i-{{kebabName}}";
+import type { I{{PascalName}}Restore } from "src/services/system/{{kebabName}}/types";
+
+import { useState } from "react";
+import { enqueueSnackbar } from "notistack";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useBoolean } from "src/hooks/use-boolean";
+
+import handleApiDataError from "src/utils/handle-api-data-error";
+
+import { {{camelName}}Service } from "src/services/system/{{kebabName}}";
+
+export default function use{{PascalName}}Restore() {
+  const api = {{camelName}}Service();
+
+  const [selectClickItem, setSelectClickItem] = useState<I{{PascalName}}>();
+
+  const openRestore = useBoolean();
+  const queryClient = useQueryClient();
+
+  const { mutate, status } = useMutation({
+    mutationFn: api.{{camelName}}Restore,
+    onSuccess: () => {
+      enqueueSnackbar("Restaurado com sucesso");
+      queryClient.invalidateQueries({ queryKey: ["data{{PascalName}}"] });
+      openRestore.onFalse();
+    },
+    onError: (err) => {
+      handleApiDataError(err, enqueueSnackbar);
+    },
+  });
+
+  const handleRestore = () => {
+    const params: I{{PascalName}}Restore = { id: selectClickItem?.id.toString()! };
+    mutate(params);
+  };
+
+  return {
+    status,
+    handleRestore,
+    openRestore,
+    selectClickItem,
+    setSelectClickItem,
+  };
+}

package/templates/page__hooks__use-update.ts.tpl

@@ -0,0 +1,68 @@
+import type { I{{PascalName}} } from "src/types/system/i-{{kebabName}}";
+import type { I{{PascalName}}Update } from "src/services/system/{{kebabName}}/types";
+
+import * as yup from "yup";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { enqueueSnackbar } from "notistack";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useBoolean } from "src/hooks/use-boolean";
+
+import handleApiDataError from "src/utils/handle-api-data-error";
+
+import { {{camelName}}Service } from "src/services/system/{{kebabName}}";
+
+export default function use{{PascalName}}Update() {
+  const api = {{camelName}}Service();
+
+  const [selectClickItem, setSelectClickItem] = useState<I{{PascalName}}>();
+
+  const validateForm = yup.object({
+{{YUP_UPDATE_RULES}}
+  });
+
+  const openUpdate = useBoolean();
+  const queryClient = useQueryClient();
+
+  const methods = useForm<Omit<I{{PascalName}}Update, "id">>({
+    resolver: yupResolver(validateForm),
+    defaultValues: {
+{{FORM_DEFAULTS_UPDATE}}
+    },
+    values: {
+{{FORM_VALUES_UPDATE}}
+    },
+  });
+
+  const { mutate, status } = useMutation({
+    mutationFn: api.{{camelName}}Update,
+    onSuccess: () => {
+      enqueueSnackbar("Editado com sucesso");
+      queryClient.invalidateQueries({ queryKey: ["data{{PascalName}}"] });
+      openUpdate.onFalse();
+      methods.reset();
+    },
+    onError: (err) => {
+      handleApiDataError(err, enqueueSnackbar);
+    },
+  });
+
+  const handleUpdate = methods.handleSubmit((data) => {
+    const params: I{{PascalName}}Update = {
+      id: selectClickItem?.id.toString()!,
+      ...data,
+    };
+    mutate(params);
+  });
+
+  return {
+    status,
+    methods,
+    handleUpdate,
+    openUpdate,
+    selectClickItem,
+    setSelectClickItem,
+  };
+}

package/templates/page__index.tsx.tpl

@@ -0,0 +1,117 @@
+import dayjs from "dayjs";
+
+import { Box, Card, Stack, Button, Tooltip, TableRow, TableCell, ButtonGroup } from "@mui/material";
+
+import { Label } from "src/components/label";
+import PageComponent from "src/components/page";
+import { Iconify } from "src/components/iconify";
+import TableComponent from "src/components/table-basic";
+import { CustomBreadcrumbs } from "src/components/custom-breadcrumbs";
+
+import {{PascalName}}Create from "./create";
+import {{PascalName}}Delete from "./delete";
+import {{PascalName}}Update from "./update";
+import {{PascalName}}Restore from "./restore";
+import { tableHead{{PascalName}} } from "./consts";
+import use{{PascalName}}Index from "./hooks/use-{{kebabName}}-index";
+import use{{PascalName}}Create from "./hooks/use-{{kebabName}}-create";
+import use{{PascalName}}Delete from "./hooks/use-{{kebabName}}-delete";
+import use{{PascalName}}Update from "./hooks/use-{{kebabName}}-update";
+import use{{PascalName}}Restore from "./hooks/use-{{kebabName}}-restore";
+import {{PascalName}}FiltersComponent from "./components/{{kebabName}}-filters-component";
+
+export default function {{PascalName}}IndexPage() {
+  const hook{{PascalName}}Index = use{{PascalName}}Index();
+  const hook{{PascalName}}Create = use{{PascalName}}Create();
+  const hook{{PascalName}}Delete = use{{PascalName}}Delete();
+  const hook{{PascalName}}Restore = use{{PascalName}}Restore();
+  const hook{{PascalName}}Update = use{{PascalName}}Update();
+
+  const { table, status{{PascalName}}, data{{PascalName}} } = hook{{PascalName}}Index;
+
+  return (
+    <PageComponent>
+      <>
+        <CustomBreadcrumbs
+          heading="{{PascalName}}"
+          links={[{ name: "{{PascalName}}" }, { name: "lista" }]}
+          action={
+            <Button
+              onClick={hook{{PascalName}}Create.openCreate.onTrue}
+              startIcon={<Iconify icon="material-symbols:add" />}
+              variant="outlined"
+            >
+              Novo (a)
+            </Button>
+          }
+          sx={{ mb: { xs: 3, md: 5 } }}
+        />
+
+        <Card>
+          <TableComponent
+            headLabel={tableHead{{PascalName}}}
+            table={table}
+            loading={status{{PascalName}} === "pending"}
+            totalCount={data{{PascalName}}?.totalCount ?? 0}
+            order={table.order}
+            orderBy={table.orderBy}
+            onSort={table.onSort}
+            action={
+                <{{PascalName}}FiltersComponent hook{{PascalName}}Index={hook{{PascalName}}Index} />
+            }
+          >
+            <>
+              {data{{PascalName}}?.data.map((d, k) => (
+                <TableRow hover key={k}>
+{{TABLE_ROW_CELLS}}
+                  <TableCell>
+                    <ButtonGroup color="inherit" size="small">
+                      <Tooltip title="Editar dados">
+                        <Button
+                          onClick={() => {
+                            hook{{PascalName}}Update.openUpdate.onTrue();
+                            hook{{PascalName}}Update.setSelectClickItem(d);
+                          }}
+                        >
+                          <Iconify icon="material-symbols:edit-document-outline" />
+                        </Button>
+                      </Tooltip>
+                      <Tooltip title={d.deletedAt ? "Ativar" : "Desativar"}>
+                        <Button
+                          onClick={() => {
+                            if (d.deletedAt) {
+                              hook{{PascalName}}Restore.setSelectClickItem(d);
+                              hook{{PascalName}}Restore.openRestore.onTrue();
+                            } else {
+                              hook{{PascalName}}Delete.setSelectClickItem(d);
+                              hook{{PascalName}}Delete.openDelete.onTrue();
+                            }
+                          }}
+                        >
+                          <Iconify
+                            icon={
+                              d.deletedAt
+                                ? "material-symbols:upload"
+                                : "material-symbols:delete-outline-sharp"
+                            }
+                          />
+                        </Button>
+                      </Tooltip>
+                    </ButtonGroup>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </>
+          </TableComponent>
+        </Card>
+
+        <Box sx={{ mb: 10 }} />
+
+        <{{PascalName}}Create hook{{PascalName}}Create={hook{{PascalName}}Create} />
+        <{{PascalName}}Delete hook{{PascalName}}Delete={hook{{PascalName}}Delete} />
+        <{{PascalName}}Restore hook{{PascalName}}Restore={hook{{PascalName}}Restore} />
+        <{{PascalName}}Update hook{{PascalName}}Update={hook{{PascalName}}Update} />
+      </>
+    </PageComponent>
+  );
+}

package/templates/page__restore__index.tsx.tpl

@@ -0,0 +1,31 @@
+import { LoadingButton } from "@mui/lab";
+import { Dialog, Button, Typography, DialogTitle, DialogContent, DialogActions } from "@mui/material";
+
+import type use{{PascalName}}Restore from "../hooks/use-{{kebabName}}-restore";
+
+interface IProps {
+  hook{{PascalName}}Restore: ReturnType<typeof use{{PascalName}}Restore>;
+}
+
+export default function {{PascalName}}Restore({ hook{{PascalName}}Restore }: IProps) {
+  const { openRestore, selectClickItem, status, handleRestore } = hook{{PascalName}}Restore;
+
+  return (
+    <Dialog open={openRestore.value} onClose={openRestore.onFalse} maxWidth="xs" fullWidth>
+      <DialogTitle>Restaurar {{PascalName}}</DialogTitle>
+      <DialogContent dividers>
+        <Typography>
+          Você realmente deseja <strong>restaurar</strong> <strong>#{selectClickItem?.id}</strong>?
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={openRestore.onFalse} variant="outlined">
+          Cancelar
+        </Button>
+        <LoadingButton variant="contained" color="success" loading={status === "pending"} onClick={handleRestore}>
+          Confirmar
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/templates/page__update__index.tsx.tpl

@@ -0,0 +1,39 @@
+import { LoadingButton } from "@mui/lab";
+import { Grid, Stack, Button, Typography } from "@mui/material";
+
+import { Form, Field } from "src/components/hook-form";
+import DrawerFiltersComponent from "src/components/drawer-filters";
+
+import type use{{PascalName}}Update from "../hooks/use-{{kebabName}}-update";
+
+interface IProps {
+  hook{{PascalName}}Update: ReturnType<typeof use{{PascalName}}Update>;
+}
+
+export default function {{PascalName}}Update({ hook{{PascalName}}Update }: IProps) {
+  const { handleUpdate, methods, openUpdate, status } = hook{{PascalName}}Update;
+
+  return (
+    <DrawerFiltersComponent title="Editar {{PascalName}}" open={openUpdate.value} onClose={openUpdate.onFalse} width={500}>
+      <>
+        <Typography variant="subtitle2">Atualize as informações</Typography>
+
+        <Form methods={methods} onSubmit={handleUpdate}>
+          <Grid spacing={2} sx={{ mt: 2 }} container>
+            {{FORM_FIELDS_UPDATE_TSX}}
+          </Grid>
+          <Stack spacing={2} alignItems="end" sx={{ mt: 3 }}>
+            <Stack spacing={2} flexDirection="row">
+              <Button variant="outlined" onClick={openUpdate.onFalse}>
+                Cancelar
+              </Button>
+              <LoadingButton variant="outlined" type="submit" loading={status === "pending"} color="success">
+                Salvar
+              </LoadingButton>
+            </Stack>
+          </Stack>
+        </Form>
+      </>
+    </DrawerFiltersComponent>
+  );
+}

package/templates/service_index.ts.tpl

@@ -0,0 +1,33 @@
+import type { I{{PascalName}} } from "src/types/system/i-{{kebabName}}";
+import type { IPagination } from "src/types/default/i-pagination";
+
+import { API_BASE } from "src/services/api";
+
+import type { I{{PascalName}}Get, I{{PascalName}}Create, I{{PascalName}}Update, I{{PascalName}}Delete, I{{PascalName}}GetById, I{{PascalName}}Restore } from "./types";
+
+export const {{camelName}}Service = () => ({
+    {{camelName}}Get: async (params: I{{PascalName}}Get): Promise<IPagination<I{{PascalName}}>> => {
+        const response = await API_BASE.get(`{{route}}`, { params });
+        return response.data;
+    },
+    {{camelName}}Create: async (params: I{{PascalName}}Create): Promise<void> => {
+        const response = await API_BASE.post(`{{route}}`, params);
+        return response.data;
+    },
+    {{camelName}}GetById: async (params: I{{PascalName}}GetById): Promise<I{{PascalName}}> => {
+        const response = await API_BASE.get(`{{route}}/${params.id}`);
+        return response.data;
+    },
+    {{camelName}}Update: async (params: I{{PascalName}}Update): Promise<void> => {
+        const response = await API_BASE.put(`{{route}}/${params.id}`);
+        return response.data;
+    },
+    {{camelName}}Delete: async (params: I{{PascalName}}Delete): Promise<void> => {
+        const response = await API_BASE.delete(`{{route}}/${params.id}`);
+        return response.data;
+    },
+    {{camelName}}Restore: async (params: I{{PascalName}}Restore): Promise<void> => {
+        const response = await API_BASE.put(`{{route}}/${params.id}`);
+        return response.data;
+    },
+});

package/templates/service_types.ts.tpl

@@ -0,0 +1,35 @@
+import type { IPaginationRequest } from "src/types/default/i-pagination";
+
+interface I{{PascalName}}Get extends IPaginationRequest {
+{{FILTERS_INTERFACE}}
+}
+
+interface I{{PascalName}}Create {
+{{CREATE_FIELDS}}
+}
+
+interface I{{PascalName}}GetById {
+    id: string;
+}
+
+interface I{{PascalName}}Update {
+    id: string;
+{{UPDATE_FIELDS}}
+}
+
+interface I{{PascalName}}Delete {
+    id: string;
+}
+
+interface I{{PascalName}}Restore {
+    id: string;
+}
+
+export type {
+    I{{PascalName}}Get,
+    I{{PascalName}}Create,
+    I{{PascalName}}Update,
+    I{{PascalName}}Delete,
+    I{{PascalName}}GetById,
+    I{{PascalName}}Restore,
+}

package/templates/types_interface.ts.tpl

@@ -0,0 +1,7 @@
+interface I{{PascalName}} {
+{{FIELDS_INTERFACE}}
+}
+
+export type {
+    I{{PascalName}}
+}