release(Fixr): Service Orders frontend!

apps/admin/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ function Checkbox({
 	return (
 		<CheckboxPrimitive.Root
 			className={cn(
-				"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
+				"peer size-4 shrink-0 rounded-lg border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
 				className
 			)}
 			data-slot="checkbox"

apps/server/docker/dockerfile

@@ -1,29 +1,29 @@
-# Use imagem mínima do Node.js
-FROM node:22.13-alpine
-
-# Diretório de trabalho
-WORKDIR /app
-
-# Copia package.json e lock para instalação de dependências
-COPY package*.json ./
-
-# Instala dependências
-RUN bun install
-
-# Copia o restante dos arquivos
-COPY . .
-
-# Executa turbo prune
-RUN npx turbo prune server --docker
-
-# Move para a pasta de build
-WORKDIR /app/out/full
-
-# Instala dependências na pasta de build
-RUN bun install
-
-# Gera build
-RUN bun run build
-
-# Define comando de inicialização
-CMD ["bun", "run", "start"]
+# Use imagem mínima do Node.js
+FROM node:22.13-alpine
+
+# Diretório de trabalho
+WORKDIR /app
+
+# Copia package.json e lock para instalação de dependências
+COPY package*.json ./
+
+# Instala dependências
+RUN bun install
+
+# Copia o restante dos arquivos
+COPY . .
+
+# Executa turbo prune
+RUN npx turbo prune server --docker
+
+# Move para a pasta de build
+WORKDIR /app/out/full
+
+# Instala dependências na pasta de build
+RUN bun install
+
+# Gera build
+RUN bun run build
+
+# Define comando de inicialização
+CMD ["bun", "run", "start"]

apps/web/app/(protected)/dashboard/[subdomain]/employees/new/page.tsx

@@ -3,7 +3,7 @@
 import { UserRoundPlus } from "lucide-react";
 import { redirect, useParams, useRouter } from "next/navigation";
 import { BackButton } from "@/components/dashboard/back-button";
-import { CreateEmployeeForm } from "@/components/dashboard/employees/new/create-employee-form";
+import { NewEmployeeForm } from "@/components/dashboard/employees/new/create-employee-form";
 import { Heading } from "@/components/dashboard/heading";
 import { useSession } from "@/lib/hooks/use-session";
 
@@ -20,18 +20,17 @@ export default function NewEmployeePage() {
 	return (
 		<div className="flex flex-col gap-6">
 			<div className="space-y-2">
-				<BackButton variant={"link"} />
+				<BackButton className="-translate-x-3" variant={"link"} />
 				<Heading
 					description={"Adicione um ou mais os funcionários na sua empresa."}
 					Icon={UserRoundPlus}
 					title={"Cadastrar funcionários"}
 				/>
 			</div>
-			<CreateEmployeeForm
+			<NewEmployeeForm
 				onSuccess={() =>
 					router.push(`/dashboard/${params.subdomain}/employees`)
 				}
-				session={session}
 			/>
 		</div>
 	);

apps/web/app/(protected)/dashboard/[subdomain]/service-orders/[id]/page.tsx

@@ -0,0 +1,56 @@
+import { getServiceOrderById } from "@fixr/mock";
+import { ArrowLeft, Wrench } from "lucide-react";
+import { notFound } from "next/navigation";
+import { Heading } from "@/components/dashboard/heading";
+import { ServiceOrderDetailsLayout } from "@/components/dashboard/service-order";
+import { DashLink } from "@/components/dashboard/service-order/dash-link";
+import { Button } from "@/components/ui/button";
+
+type Params = Promise<{ subdomain: string; id: string }>;
+
+export default async function ServiceOrderDetailsPage({
+	params,
+}: {
+	params: Params;
+}) {
+	const { subdomain, id } = await params;
+
+	const order = await getServiceOrderById(id);
+
+	if (!order) {
+		notFound();
+	}
+
+	return (
+		<div className="space-y-6">
+			<div className="flex flex-col gap-3">
+				<Button
+					asChild
+					className="w-fit -translate-x-2.5"
+					size="sm"
+					variant="ghost"
+				>
+					<DashLink href="/service-orders" subdomain={subdomain}>
+						<ArrowLeft className="size-4" />
+						Voltar
+					</DashLink>
+				</Button>
+
+				<Heading
+					description={"Veja os detalhes completos da ordem de serviço abaixo"}
+					title={
+						<>
+							<Wrench className="mr-2.5 inline-block size-6.5 -translate-y-1 fill-primary text-primary" />
+							Ordem de serviço{" "}
+							<span className="font-(family-name:--font-inter) font-medium">
+								#{order.orderNumber}
+							</span>
+						</>
+					}
+				/>
+			</div>
+
+			<ServiceOrderDetailsLayout order={order} subdomain={subdomain} />
+		</div>
+	);
+}

apps/web/app/(protected)/dashboard/[subdomain]/service-orders/new/page.tsx

@@ -6,7 +6,7 @@ import { NewServiceOrderForm } from "@/components/dashboard/service-order/new-se
 export default function NewServiceOrderPage() {
 	return (
 		<div className="space-y-6">
-			<BackButton className="-translate-x-2" />
+			<BackButton className="-translate-x-3" />
 			<Heading
 				description="Preencha os campos abaixo para criar uma nova ordem de serviço."
 				Icon={ClipboardPlus}

apps/web/app/(protected)/dashboard/[subdomain]/service-orders/page.tsx

@@ -1,7 +1,5 @@
-import { Plus } from "lucide-react";
-import { DashLink } from "@/components/dashboard/dash-link";
 import { Heading } from "@/components/dashboard/heading";
-import { Button } from "@/components/ui/button";
+import { ServiceOrdersTable } from "@/components/dashboard/service-order/service-order-table";
 
 type Params = Promise<{ subdomain: string }>;
 
@@ -18,11 +16,10 @@ export default async function ServiceOrdersPage({
 				description={"Controle as ordens de serviço de seus clientes"}
 				title={"Ordens de serviço"}
 			/>
-			<Button asChild>
-				<DashLink href={"/service-orders/new"} prefetch subdomain={subdomain}>
-					Nova ordem de serviço <Plus className="size-4" />
-				</DashLink>
-			</Button>
+
+			<div className="mt-5 rounded-xs">
+				<ServiceOrdersTable subdomain={subdomain} />
+			</div>
 		</div>
 	);
 }

apps/web/app/globals.css

@@ -181,3 +181,16 @@
 	border-radius: 10px;
 	background-color: var(--border);
 }
+
+@keyframes working {
+	0%,
+	100% {
+		box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 18%, transparent);
+		transform: scale(1);
+	}
+
+	50% {
+		box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 28%, transparent);
+		transform: scale(1.04);
+	}
+}

apps/web/components.json

@@ -18,5 +18,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@diceui": "https://diceui.com/r/{name}.json"
+  }
 }

apps/web/components/dashboard/account-popover.tsx

@@ -8,7 +8,7 @@ import { Avatar, type AvatarProps } from "../account/profile-avatar";
 import { SignOutButton } from "../auth/signout-button";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { DashLink } from "./dash-link";
+import { DashLink } from "./service-order/dash-link";
 
 export function AccountPopover({
 	session,

apps/web/components/dashboard/employees/data-table.tsx

@@ -28,7 +28,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import { DashLink } from "../dash-link";
+import { DashLink } from "../service-order/dash-link";
 
 interface DataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[];

apps/web/components/dashboard/employees/new/create-employee-form.tsx

@@ -1,9 +1,7 @@
 "use client";
-
 import { cpf, unmask } from "@fixr/constants/masks";
 import { defaultMessages, messages } from "@fixr/constants/messages";
 import { roleLabels } from "@fixr/constants/roles";
-import type { userJWT } from "@fixr/schemas/auth";
 import { createEmployeeSchema } from "@fixr/schemas/employees";
 import type { ApiResponse } from "@fixr/schemas/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -21,7 +19,8 @@ import {
 	Plus,
 	User,
 } from "lucide-react";
-import { useState } from "react";
+import { useParams } from "next/navigation";
+import { type ComponentPropsWithoutRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 import { Button } from "@/components/ui/button";
@@ -47,14 +46,13 @@ import { axios } from "@/lib/auth/axios";
 import { api, tryCatch } from "@/lib/utils";
 import { generateRandomPassword } from "@/lib/utils/generate-random-password";
 
-export function CreateEmployeeForm({
-	session,
+export function NewEmployeeForm({
 	onSuccess,
-}: {
-	session: z.infer<typeof userJWT>;
-	onSuccess: () => void;
+}: ComponentPropsWithoutRef<"form"> & {
+	onSuccess?: () => void;
 }) {
 	const [loading, setLoading] = useState(false);
+	const { subdomain } = useParams<{ subdomain: string }>();
 
 	const form = useForm<z.infer<typeof createEmployeeSchema>>({
 		resolver: zodResolver(createEmployeeSchema),
@@ -81,12 +79,7 @@ export function CreateEmployeeForm({
 		try {
 			const { data: response, error } = await tryCatch<
 				AxiosResponse<ApiResponse>
-			>(
-				axios.post(
-					api(`/companies/${session.company?.subdomain}/employees`),
-					formatted
-				)
-			);
+			>(axios.post(api(`/companies/${subdomain}/employees`), formatted));
 
 			if (error && error instanceof AxiosError) {
 				const message =
@@ -107,7 +100,7 @@ export function CreateEmployeeForm({
 				description: message.description,
 			});
 
-			onSuccess();
+			onSuccess?.();
 			queryClient.invalidateQueries({ queryKey: ["employeesData"] });
 		} finally {
 			setLoading(false);

apps/web/components/dashboard/service-order/dash-link.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+type DashLinkProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
+	href: string;
+	subdomain: string;
+	children: ReactNode;
+};
+
+export function DashLink({
+	href,
+	subdomain,
+	children,
+	...props
+}: DashLinkProps) {
+	const normalizedHref = href.startsWith("/") ? href : `/${href}`;
+	const hrefWithSubdomain = `/dashboard/${subdomain}${normalizedHref}`;
+
+	return (
+		<Link href={hrefWithSubdomain} {...props}>
+			{children}
+		</Link>
+	);
+}

apps/web/components/dashboard/service-order/index.ts

@@ -0,0 +1,6 @@
+export { DashLink } from "./dash-link";
+export { ServiceOrderDetailsLayout } from "./layout";
+export { ServiceOrderLifecycle } from "./lifecycle";
+export { NewServiceOrderForm } from "./new-service-order-form";
+export { ServiceOrderDetailsCard } from "./service-order-details-card";
+export { ServiceOrdersTable } from "./service-order-table";