From 5136b45ff307f44afb45ff0a75b988adaa6471e0 Mon Sep 17 00:00:00 2001 From: AngeloCarnevale Date: Wed, 11 Sep 2024 10:53:53 -0300 Subject: [PATCH] docs: readme;md --- README.md | 102 ++++++++++++--- package.json | 1 + src/app/app/layout.tsx | 2 +- src/app/app/projects/(main)/page.tsx | 14 ++ .../settings/theme/_components/ThemeForm.tsx | 8 +- .../(main)/_components/vehicle-data-table.tsx | 40 ++---- src/app/app/vehicles/(main)/page.tsx | 1 + src/app/app/vehicles/layout.tsx | 11 +- .../new/_components/register-vehicle-form.tsx | 121 ++++++++++++++++++ src/app/app/vehicles/new/page.tsx | 8 ++ src/app/globals.css | 10 +- src/components/dashboard/page.tsx | 2 +- src/components/dashboard/sidebar.tsx | 2 +- src/components/ui/textarea.tsx | 24 ++++ src/components/ui/tooltip.tsx | 30 +++++ 15 files changed, 303 insertions(+), 73 deletions(-) create mode 100644 src/app/app/projects/(main)/page.tsx create mode 100644 src/app/app/vehicles/new/_components/register-vehicle-form.tsx create mode 100644 src/app/app/vehicles/new/page.tsx create mode 100644 src/components/ui/textarea.tsx create mode 100644 src/components/ui/tooltip.tsx diff --git a/README.md b/README.md index e215bc4..1edbed1 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,96 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Service Order Tool -## Getting Started +Este repositório contém o código de uma plataforma web desenvolvida com Next.js para o front-end, que tem como objetivo facilitar a gestão de uma oficina, possibilitando a criação e o gerenciamento de ordens de serviço, veículos e projetos. -First, run the development server: +## Funcionalidades + +- Ordens de Serviço: Criação, visualização, edição e exclusão de ordens de serviço, com controle do status de cada tarefa. + +- Gestão de Veículos: Registro de veículos com informações detalhadas, como fabricante, modelo, ano, número do chassi, entre outros. +- Gerenciamento de Projetos: Acompanhe os projetos da oficina, associando veículos e ordens de serviço a cada projeto. +- Interface Amigável: Design moderno e responsivo utilizando Tailwind CSS. +- Autenticação: Sistema de autenticação para controlar o acesso de usuários. + +## Tecnologias Utilizadas + +- Next.js: Framework de React para renderização do front-end e geração de páginas dinâmicas. + +- Tailwind CSS: Biblioteca de CSS utilitária para criação de interfaces responsivas e customizáveis. + +- Docker: Para criar e gerenciar os containers de desenvolvimento. + +- MSSQL: Banco de dados para armazenar os dados + +## Pré-requisitos + +- Node.js v18+ +- NPM ou Yarn +- Docker (opcional, para ambientes de desenvolvimento) + +## Instalação + +1. Clone o repositório: ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +git clone https://github.com/PS-smarthub/sot.git +cd seu-repositorio +``` + +2. Instale as dependências: + +```bash Copiar Código +npm install ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +ou, se estimer usando pnpm -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +```bash Copiar Código +pnpm install +``` + +3. Configure as variáveis de ambiente: + +Crie um arquivo .env.local na raiz do projeto e configure as variáveis de ambiente necessárias para o banco de dados, autenticação e outras integrações. Exemplo: + +```bash +DATABASE_URL=mongodb://localhost:27017/oficina +NEXTAUTH_URL=http://localhost:3000 +``` + +4. Inicie o ambiente de desenvolvimento: + +```bash +npm run dev +``` + +ou com pnpm -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +```bash +pnpm dev +``` -## Learn More +5. Acesse a aplicação em http://localhost:3000. -To learn more about Next.js, take a look at the following resources: +## Utilização -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +Após iniciar o ambiente de desenvolvimento, você poderá acessar a plataforma e: -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +- Criar novas ordens de serviço, atribuir status e acompanhar o progresso. +- dicionar veículos à oficina e editar seus detalhes. +- Gerenciar projetos, associando ordens de serviço e veículos a cada um deles. -## Deploy on Vercel +## Estrutura do Projeto -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +Abaixo está um resumo da estrutura de pastas do projeto: -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +``` +src/ +├── components # Componentes reutilizáveis de UI +├── app # Páginas do Next.js (rotas da aplicação) +│ ├── api # API routes para o backend +│ ├── app # Página inicial da aplicação (Ordens de Serviço) +│ ├── vehicles # Página de gerenciamento de veículos +│ ├── projects # Página de gerenciamento de projetos +│ └── settings # Página de configuração +├── public # Arquivos públicos (imagens, ícones, etc.) +``` \ No newline at end of file diff --git a/package.json b/package.json index 42edc03..363f484 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toast": "^1.2.1", + "@radix-ui/react-tooltip": "^1.1.2", "@tanstack/react-table": "^8.20.5", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/src/app/app/layout.tsx b/src/app/app/layout.tsx index 228013c..200c0c4 100644 --- a/src/app/app/layout.tsx +++ b/src/app/app/layout.tsx @@ -8,7 +8,7 @@ export default async function Layout({ children }: PropsWithChildren) { return (
-
{children}
+
{children}
); } \ No newline at end of file diff --git a/src/app/app/projects/(main)/page.tsx b/src/app/app/projects/(main)/page.tsx new file mode 100644 index 0000000..535fac7 --- /dev/null +++ b/src/app/app/projects/(main)/page.tsx @@ -0,0 +1,14 @@ +import { DashboardPage, DashboardPageHeader, DashboardPageHeaderTitle, DashboardPageMain } from '@/components/dashboard/page' + +export default function Page() { + return ( + + + Projetos + + + Projetos + + + ) +} diff --git a/src/app/app/settings/theme/_components/ThemeForm.tsx b/src/app/app/settings/theme/_components/ThemeForm.tsx index ae3e188..384b39f 100644 --- a/src/app/app/settings/theme/_components/ThemeForm.tsx +++ b/src/app/app/settings/theme/_components/ThemeForm.tsx @@ -66,7 +66,7 @@ export function ThemeForm() { - Light + Claro @@ -92,7 +92,7 @@ export function ThemeForm() { - Dark + Escuro @@ -103,8 +103,8 @@ export function ThemeForm() { ) diff --git a/src/app/app/vehicles/(main)/_components/vehicle-data-table.tsx b/src/app/app/vehicles/(main)/_components/vehicle-data-table.tsx index 347b06b..4c8615e 100644 --- a/src/app/app/vehicles/(main)/_components/vehicle-data-table.tsx +++ b/src/app/app/vehicles/(main)/_components/vehicle-data-table.tsx @@ -3,8 +3,8 @@ import * as React from "react" import { CaretSortIcon, - ChevronDownIcon, DotsHorizontalIcon, + PlusIcon, } from "@radix-ui/react-icons" import { ColumnDef, @@ -22,7 +22,6 @@ import { import { Button } from "@/components/ui/button" import { DropdownMenu, - DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, @@ -38,6 +37,7 @@ import { TableHeader, TableRow, } from "@/components/ui/table" +import Link from "next/link" type Vehicle = { id: number; @@ -174,7 +174,7 @@ export function VehicleDataTable({ data }: VehicleDataTable) { return (
-
+
- - - - - - {table - .getAllColumns() - .filter((column) => column.getCanHide()) - .map((column) => { - return ( - - column.toggleVisibility(!!value) - } - > - {column.id} - - ) - })} - - + + + Cadastrar +
@@ -272,7 +250,7 @@ export function VehicleDataTable({ data }: VehicleDataTable) { onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} > - Previous + Voltar diff --git a/src/app/app/vehicles/(main)/page.tsx b/src/app/app/vehicles/(main)/page.tsx index 82bb567..ac49604 100644 --- a/src/app/app/vehicles/(main)/page.tsx +++ b/src/app/app/vehicles/(main)/page.tsx @@ -6,5 +6,6 @@ export default async function Page() { const vehicles = await getVehicles() return ( + ) } diff --git a/src/app/app/vehicles/layout.tsx b/src/app/app/vehicles/layout.tsx index 710c2be..182c7bb 100644 --- a/src/app/app/vehicles/layout.tsx +++ b/src/app/app/vehicles/layout.tsx @@ -1,23 +1,16 @@ -import { DashboardPage, DashboardPageHeader, DashboardPageHeaderNav, DashboardPageHeaderTitle, DashboardPageMain } from '@/components/dashboard/page' -import { Button } from '@/components/ui/button' +import { DashboardPage, DashboardPageHeader, DashboardPageHeaderTitle, DashboardPageMain } from '@/components/dashboard/page' import { PropsWithChildren } from 'react' -import { PlusIcon } from "@radix-ui/react-icons" export default function Layout({ children }: PropsWithChildren) { return ( Veículos - - - {children} + ) } diff --git a/src/app/app/vehicles/new/_components/register-vehicle-form.tsx b/src/app/app/vehicles/new/_components/register-vehicle-form.tsx new file mode 100644 index 0000000..f099efa --- /dev/null +++ b/src/app/app/vehicles/new/_components/register-vehicle-form.tsx @@ -0,0 +1,121 @@ +"use client" + +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { Textarea } from "@/components/ui/textarea" +import { useState } from "react" + +type Vehicle = { + id: number; + automaker: string; + project: string; + responsible: string; + model: string; + color: string; + chassis: string; + fleet: string | null; + comments: string | null; + image: string | null; + nf_number: string; + nf_emission_date: string; + loan_expiration_date: string; +}; +export function RegisterVehicleForm() { + const [vehicle, setVehicle] = useState>({ + automaker: '', + project: '', + responsible: '', + model: '', + color: '', + chassis: '', + fleet: null, + comments: null, + image: null, + nf_number: '', + nf_emission_date: '', + loan_expiration_date: '', + }); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setVehicle(prev => ({ ...prev, [name]: value })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log('Submitting vehicle:', vehicle); + }; + return ( + + + Cadastrar novo veículo + Insira as informações corretamente para efetuar o cadastro de um novo veículo. + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +