Welcome 👋
31 |32 | Start the day with managing new appointments 33 |
34 |
15 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/public/assets/icons/pending.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/components/StatCard.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import Image from "next/image";
3 |
4 | type StatCardProps = {
5 | type: "appointments" | "pending" | "cancelled";
6 | count: number;
7 | label: string;
8 | icon: string;
9 | };
10 |
11 | export const StatCard = ({ count = 0, label, icon, type }: StatCardProps) => {
12 | return (
13 | 29 | {status} 30 |
31 |
20 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes
21 |
30 |
31 | {count}
29 |{label}
32 |
11 |
12 |
30 |
31 |
39 | );
40 | };
41 |
42 | export default Appointment;
43 |
--------------------------------------------------------------------------------
/app/patients/[userId]/register/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { redirect } from "next/navigation";
3 |
4 | import RegisterForm from "@/components/forms/RegisterForm";
5 | import { getPatient, getUser } from "@/lib/actions/patient.actions";
6 |
7 | const Register = async ({ params: { userId } }: SearchParamProps) => {
8 | const user = await getUser(userId);
9 | const patient = await getPatient(userId);
10 |
11 | if (patient) redirect(`/patients/${userId}/new-appointment`);
12 |
13 | return (
14 |
13 |
29 | © 2024 CarePluse
28 |
15 |
16 |
30 |
31 |
39 | );
40 | };
41 |
42 | export default Register;
43 |
--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
4 | import { Check } from "lucide-react";
5 | import * as React from "react";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef
17 |
29 | © 2024 CarePluse
28 |
12 | {isAdmin &&
15 |
36 |
37 |
45 | );
46 | };
47 |
48 | export default Home;
49 |
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | import { withSentryConfig } from "@sentry/nextjs";
2 | /** @type {import('next').NextConfig} */
3 | const nextConfig = {};
4 |
5 | export default withSentryConfig(nextConfig, {
6 | // For all available options, see:
7 | // https://github.com/getsentry/sentry-webpack-plugin#options
8 |
9 | org: "javascript-mastery",
10 | project: "care-pulse",
11 |
12 | // Only print logs for uploading source maps in CI
13 | silent: !process.env.CI,
14 |
15 | // For all available options, see:
16 | // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
17 |
18 | // Upload a larger set of source maps for prettier stack traces (increases build time)
19 | widenClientFileUpload: true,
20 |
21 | // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
22 | // This can increase your server load as well as your hosting bill.
23 | // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
24 | // side errors will fail.
25 | // tunnelRoute: "/monitoring",
26 |
27 | // Hides source maps from generated client bundles
28 | hideSourceMaps: true,
29 |
30 | // Automatically tree-shake Sentry logger statements to reduce bundle size
31 | disableLogger: true,
32 |
33 | // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
34 | // See the following for more information:
35 | // https://docs.sentry.io/product/crons/
36 | // https://vercel.com/docs/cron-jobs
37 | automaticVercelMonitors: true,
38 | });
39 |
--------------------------------------------------------------------------------
/components/FileUploader.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import React, { useCallback } from "react";
5 | import { useDropzone } from "react-dropzone";
6 |
7 | import { convertFileToUrl } from "@/lib/utils";
8 |
9 | type FileUploaderProps = {
10 | files: File[] | undefined;
11 | onChange: (files: File[]) => void;
12 | };
13 |
14 | export const FileUploader = ({ files, onChange }: FileUploaderProps) => {
15 | const onDrop = useCallback((acceptedFiles: File[]) => {
16 | onChange(acceptedFiles);
17 | }, []);
18 |
19 | const { getRootProps, getInputProps } = useDropzone({ onDrop });
20 |
21 | return (
22 |
16 |
35 |
27 |
34 | 28 | © 2024 CarePluse 29 |
30 | 31 | Admin 32 | 33 |
23 |
24 | {files && files?.length > 0 ? (
25 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 |
3 | declare type SearchParamProps = {
4 | params: { [key: string]: string };
5 | searchParams: { [key: string]: string | string[] | undefined };
6 | };
7 |
8 | declare type Gender = "Male" | "Female" | "Other";
9 | declare type Status = "pending" | "scheduled" | "cancelled";
10 |
11 | declare interface CreateUserParams {
12 | name: string;
13 | email: string;
14 | phone: string;
15 | }
16 | declare interface User extends CreateUserParams {
17 | $id: string;
18 | }
19 |
20 | declare interface RegisterUserParams extends CreateUserParams {
21 | userId: string;
22 | birthDate: Date;
23 | gender: Gender;
24 | address: string;
25 | occupation: string;
26 | emergencyContactName: string;
27 | emergencyContactNumber: string;
28 | primaryPhysician: string;
29 | insuranceProvider: string;
30 | insurancePolicyNumber: string;
31 | allergies: string | undefined;
32 | currentMedication: string | undefined;
33 | familyMedicalHistory: string | undefined;
34 | pastMedicalHistory: string | undefined;
35 | identificationType: string | undefined;
36 | identificationNumber: string | undefined;
37 | identificationDocument: FormData | undefined;
38 | privacyConsent: boolean;
39 | }
40 |
41 | declare type CreateAppointmentParams = {
42 | userId: string;
43 | patient: string;
44 | primaryPhysician: string;
45 | reason: string;
46 | schedule: Date;
47 | status: Status;
48 | note: string | undefined;
49 | };
50 |
51 | declare type UpdateAppointmentParams = {
52 | appointmentId: string;
53 | userId: string;
54 | timeZone: string;
55 | appointment: Appointment;
56 | type: string;
57 | };
58 |
--------------------------------------------------------------------------------
/public/assets/icons/check-circle.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/components/AppointmentModal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 |
5 | import { Button } from "@/components/ui/button";
6 | import {
7 | Dialog,
8 | DialogContent,
9 | DialogDescription,
10 | DialogHeader,
11 | DialogTitle,
12 | DialogTrigger,
13 | } from "@/components/ui/dialog";
14 | import { Appointment } from "@/types/appwrite.types";
15 |
16 | import { AppointmentForm } from "./forms/AppointmentForm";
17 |
18 | import "react-datepicker/dist/react-datepicker.css";
19 |
20 | export const AppointmentModal = ({
21 | patientId,
22 | userId,
23 | appointment,
24 | type,
25 | }: {
26 | patientId: string;
27 | userId: string;
28 | appointment?: Appointment;
29 | type: "schedule" | "cancel";
30 | title: string;
31 | description: string;
32 | }) => {
33 | const [open, setOpen] = useState(false);
34 |
35 | return (
36 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
4 | import { Circle } from "lucide-react";
5 | import * as React from "react";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const RadioGroup = React.forwardRef<
10 | React.ElementRef
41 |
49 |
50 | )}
51 | 42 | Click to upload 43 | or drag and drop 44 |
45 |46 | SVG, PNG, JPG or GIF (max. 800x400px) 47 |
48 |
14 |
15 |
16 |
27 |
28 |
29 |
30 |
35 |
36 |
37 |
56 |
57 |
59 |
60 | );
61 | };
62 |
63 | export default AdminPage;
64 |
--------------------------------------------------------------------------------
/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const GenderOptions = ["Male", "Female", "Other"];
2 |
3 | export const PatientFormDefaultValues = {
4 | firstName: "",
5 | lastName: "",
6 | email: "",
7 | phone: "",
8 | birthDate: new Date(Date.now()),
9 | gender: "Male" as Gender,
10 | address: "",
11 | occupation: "",
12 | emergencyContactName: "",
13 | emergencyContactNumber: "",
14 | primaryPhysician: "",
15 | insuranceProvider: "",
16 | insurancePolicyNumber: "",
17 | allergies: "",
18 | currentMedication: "",
19 | familyMedicalHistory: "",
20 | pastMedicalHistory: "",
21 | identificationType: "Birth Certificate",
22 | identificationNumber: "",
23 | identificationDocument: [],
24 | treatmentConsent: false,
25 | disclosureConsent: false,
26 | privacyConsent: false,
27 | };
28 |
29 | export const IdentificationTypes = [
30 | "Birth Certificate",
31 | "Driver's License",
32 | "Medical Insurance Card/Policy",
33 | "Military ID Card",
34 | "National Identity Card",
35 | "Passport",
36 | "Resident Alien Card (Green Card)",
37 | "Social Security Card",
38 | "State ID Card",
39 | "Student ID Card",
40 | "Voter ID Card",
41 | ];
42 |
43 | export const Doctors = [
44 | {
45 | image: "/assets/images/dr-green.png",
46 | name: "John Green",
47 | },
48 | {
49 | image: "/assets/images/dr-cameron.png",
50 | name: "Leila Cameron",
51 | },
52 | {
53 | image: "/assets/images/dr-livingston.png",
54 | name: "David Livingston",
55 | },
56 | {
57 | image: "/assets/images/dr-peter.png",
58 | name: "Evan Peter",
59 | },
60 | {
61 | image: "/assets/images/dr-powell.png",
62 | name: "Jane Powell",
63 | },
64 | {
65 | image: "/assets/images/dr-remirez.png",
66 | name: "Alex Ramirez",
67 | },
68 | {
69 | image: "/assets/images/dr-lee.png",
70 | name: "Jasmine Lee",
71 | },
72 | {
73 | image: "/assets/images/dr-cruz.png",
74 | name: "Alyana Cruz",
75 | },
76 | {
77 | image: "/assets/images/dr-sharma.png",
78 | name: "Hardik Sharma",
79 | },
80 | ];
81 |
82 | export const StatusIcon = {
83 | scheduled: "/assets/icons/check.svg",
84 | pending: "/assets/icons/pending.svg",
85 | cancelled: "/assets/icons/cancelled.svg",
86 | };
87 |
--------------------------------------------------------------------------------
/public/assets/icons/loader.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const { fontFamily } = require("tailwindcss/defaultTheme");
4 |
5 | const config = {
6 | darkMode: ["class"],
7 | content: [
8 | "./pages/**/*.{ts,tsx}",
9 | "./components/**/*.{ts,tsx}",
10 | "./app/**/*.{ts,tsx}",
11 | "./src/**/*.{ts,tsx}",
12 | ],
13 | prefix: "",
14 | theme: {
15 | container: {
16 | center: true,
17 | padding: "2rem",
18 | screens: {
19 | "2xl": "1400px",
20 | },
21 | },
22 | extend: {
23 | colors: {
24 | green: {
25 | 500: "#24AE7C",
26 | 600: "#0D2A1F",
27 | },
28 | blue: {
29 | 500: "#79B5EC",
30 | 600: "#152432",
31 | },
32 | red: {
33 | 500: "#F37877",
34 | 600: "#3E1716",
35 | 700: "#F24E43",
36 | },
37 | light: {
38 | 200: "#E8E9E9",
39 | },
40 | dark: {
41 | 200: "#0D0F10",
42 | 300: "#131619",
43 | 400: "#1A1D21",
44 | 500: "#363A3D",
45 | 600: "#76828D",
46 | 700: "#ABB8C4",
47 | },
48 | },
49 | fontFamily: {
50 | sans: ["var(--font-sans)", ...fontFamily.sans],
51 | },
52 | backgroundImage: {
53 | appointments: "url('/assets/images/appointments-bg.png')",
54 | pending: "url('/assets/images/pending-bg.png')",
55 | cancelled: "url('/assets/images/cancelled-bg.png')",
56 | },
57 | keyframes: {
58 | "accordion-down": {
59 | from: { height: "0" },
60 | to: { height: "var(--radix-accordion-content-height)" },
61 | },
62 | "accordion-up": {
63 | from: { height: "var(--radix-accordion-content-height)" },
64 | to: { height: "0" },
65 | },
66 | "caret-blink": {
67 | "0%,70%,100%": { opacity: "1" },
68 | "20%,50%": { opacity: "0" },
69 | },
70 | },
71 | animation: {
72 | "accordion-down": "accordion-down 0.2s ease-out",
73 | "accordion-up": "accordion-up 0.2s ease-out",
74 | "caret-blink": "caret-blink 1.25s ease-out infinite",
75 | },
76 | },
77 | },
78 | plugins: [require("tailwindcss-animate")],
79 | } satisfies Config;
80 |
81 | export default config;
82 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from "@radix-ui/react-slot";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
14 | destructive:
15 | "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
16 | outline:
17 | "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
18 | secondary:
19 | "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
20 | ghost:
21 | "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
22 | link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
23 | },
24 | size: {
25 | default: "h-11 px-4 py-2",
26 | sm: "h-9 rounded-md px-3",
27 | lg: "h-11 rounded-md px-8",
28 | icon: "size-10",
29 | },
30 | },
31 | defaultVariants: {
32 | variant: "default",
33 | size: "default",
34 | },
35 | }
36 | );
37 |
38 | export interface ButtonProps
39 | extends React.ButtonHTMLAttributesAdmin Dashboard
26 |
51 | {char}
52 | {hasFakeCaret && (
53 |
58 | );
59 | });
60 | InputOTPSlot.displayName = "InputOTPSlot";
61 |
62 | const InputOTPSeparator = React.forwardRef<
63 | React.ElementRef<"div">,
64 | React.ComponentPropsWithoutRef<"div">
65 | >(({ ...props }, ref) => (
66 |
54 |
55 |
56 | )}
57 |
67 |
69 | ));
70 | InputOTPSeparator.displayName = "InputOTPSeparator";
71 |
72 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
73 |
--------------------------------------------------------------------------------
/app/patients/[userId]/new-appointment/success/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 |
4 | import { Button } from "@/components/ui/button";
5 | import { Doctors } from "@/constants";
6 | import { getAppointment } from "@/lib/actions/appointment.actions";
7 | import { formatDateTime } from "@/lib/utils";
8 |
9 | const RequestSuccess = async ({
10 | searchParams,
11 | params: { userId },
12 | }: SearchParamProps) => {
13 | const appointmentId = (searchParams?.appointmentId as string) || "";
14 | const appointment = await getAppointment(appointmentId);
15 |
16 | const doctor = Doctors.find(
17 | (doctor) => doctor.name === appointment.primaryPhysician
18 | );
19 |
20 | return (
21 |
22 |
79 | );
80 | };
81 |
82 | export default RequestSuccess;
83 |
--------------------------------------------------------------------------------
/components/forms/PatientForm.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { zodResolver } from "@hookform/resolvers/zod";
4 | import { useRouter } from "next/navigation";
5 | import { useState } from "react";
6 | import { useForm } from "react-hook-form";
7 | import { z } from "zod";
8 |
9 | import { Form } from "@/components/ui/form";
10 | import { createUser } from "@/lib/actions/patient.actions";
11 | import { UserFormValidation } from "@/lib/validation";
12 |
13 | import "react-phone-number-input/style.css";
14 | import CustomFormField, { FormFieldType } from "../CustomFormField";
15 | import SubmitButton from "../SubmitButton";
16 |
17 | export const PatientForm = () => {
18 | const router = useRouter();
19 | const [isLoading, setIsLoading] = useState(false);
20 |
21 | const form = useForm
23 |
24 |
34 |
46 |
47 |
48 |
69 |
70 |
75 |
76 |
78 | 41 | Your appointment request has 42 | been successfully submitted! 43 |
44 |We'll be in touch shortly to confirm.
45 |Requested appointment details:
49 |
50 |
59 | Dr. {doctor?.name}
58 |
60 |
68 | {formatDateTime(appointment.schedule).dateTime}
67 |© 2024 CarePluse
77 |{row.index + 1}
; 18 | }, 19 | }, 20 | { 21 | accessorKey: "patient", 22 | header: "Patient", 23 | cell: ({ row }) => { 24 | const appointment = row.original; 25 | return{appointment.patient.name}
; 26 | }, 27 | }, 28 | { 29 | accessorKey: "status", 30 | header: "Status", 31 | cell: ({ row }) => { 32 | const appointment = row.original; 33 | return ( 34 |
35 |
37 | );
38 | },
39 | },
40 | {
41 | accessorKey: "schedule",
42 | header: "Appointment",
43 | cell: ({ row }) => {
44 | const appointment = row.original;
45 | return (
46 | 47 | {formatDateTime(appointment.schedule).dateTime} 48 |
49 | ); 50 | }, 51 | }, 52 | { 53 | accessorKey: "primaryPhysician", 54 | header: "Doctor", 55 | cell: ({ row }) => { 56 | const appointment = row.original; 57 | 58 | const doctor = Doctors.find( 59 | (doctor) => doctor.name === appointment.primaryPhysician 60 | ); 61 | 62 | return ( 63 |
64 |
73 | );
74 | },
75 | },
76 | {
77 | id: "actions",
78 | header: () => Dr. {doctor?.name}
72 |Actions
,
79 | cell: ({ row }) => {
80 | const appointment = row.original;
81 |
82 | return (
83 |
84 |
101 | );
102 | },
103 | },
104 | ];
105 |
--------------------------------------------------------------------------------
/lib/actions/patient.actions.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { ID, InputFile, Query } from "node-appwrite";
4 |
5 | import {
6 | BUCKET_ID,
7 | DATABASE_ID,
8 | ENDPOINT,
9 | PATIENT_COLLECTION_ID,
10 | PROJECT_ID,
11 | databases,
12 | storage,
13 | users,
14 | } from "../appwrite.config";
15 | import { parseStringify } from "../utils";
16 |
17 | // CREATE APPWRITE USER
18 | export const createUser = async (user: CreateUserParams) => {
19 | try {
20 | // Create new user -> https://appwrite.io/docs/references/1.5.x/server-nodejs/users#create
21 | const newuser = await users.create(
22 | ID.unique(),
23 | user.email,
24 | user.phone,
25 | undefined,
26 | user.name
27 | );
28 |
29 | return parseStringify(newuser);
30 | } catch (error: any) {
31 | // Check existing user
32 | if (error && error?.code === 409) {
33 | const existingUser = await users.list([
34 | Query.equal("email", [user.email]),
35 | ]);
36 |
37 | return existingUser.users[0];
38 | }
39 | console.error("An error occurred while creating a new user:", error);
40 | }
41 | };
42 |
43 | // GET USER
44 | export const getUser = async (userId: string) => {
45 | try {
46 | const user = await users.get(userId);
47 |
48 | return parseStringify(user);
49 | } catch (error) {
50 | console.error(
51 | "An error occurred while retrieving the user details:",
52 | error
53 | );
54 | }
55 | };
56 |
57 | // REGISTER PATIENT
58 | export const registerPatient = async ({
59 | identificationDocument,
60 | ...patient
61 | }: RegisterUserParams) => {
62 | try {
63 | // Upload file -> // https://appwrite.io/docs/references/cloud/client-web/storage#createFile
64 | let file;
65 | if (identificationDocument) {
66 | const inputFile =
67 | identificationDocument &&
68 | InputFile.fromBlob(
69 | identificationDocument?.get("blobFile") as Blob,
70 | identificationDocument?.get("fileName") as string
71 | );
72 |
73 | file = await storage.createFile(BUCKET_ID!, ID.unique(), inputFile);
74 | }
75 |
76 | // Create new patient document -> https://appwrite.io/docs/references/cloud/server-nodejs/databases#createDocument
77 | const newPatient = await databases.createDocument(
78 | DATABASE_ID!,
79 | PATIENT_COLLECTION_ID!,
80 | ID.unique(),
81 | {
82 | identificationDocumentId: file?.$id ? file.$id : null,
83 | identificationDocumentUrl: file?.$id
84 | ? `${ENDPOINT}/storage/buckets/${BUCKET_ID}/files/${file.$id}/view??project=${PROJECT_ID}`
85 | : null,
86 | ...patient,
87 | }
88 | );
89 |
90 | return parseStringify(newPatient);
91 | } catch (error) {
92 | console.error("An error occurred while creating a new patient:", error);
93 | }
94 | };
95 |
96 | // GET PATIENT
97 | export const getPatient = async (userId: string) => {
98 | try {
99 | const patients = await databases.listDocuments(
100 | DATABASE_ID!,
101 | PATIENT_COLLECTION_ID!,
102 | [Query.equal("userId", [userId])]
103 | );
104 |
105 | return parseStringify(patients.documents[0]);
106 | } catch (error) {
107 | console.error(
108 | "An error occurred while retrieving the patient details:",
109 | error
110 | );
111 | }
112 | };
113 |
--------------------------------------------------------------------------------
/components/ui/table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Table = React.forwardRef<
6 | HTMLTableElement,
7 | React.HTMLAttributes
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
9 |
10 | Sentry Onboarding
11 |
12 |
13 |
14 |
23 |
83 |
84 | );
85 | }
86 |
--------------------------------------------------------------------------------
/components/PasskeyModal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import { usePathname, useRouter } from "next/navigation";
5 | import { useEffect, useState } from "react";
6 |
7 | import {
8 | AlertDialog,
9 | AlertDialogAction,
10 | AlertDialogContent,
11 | AlertDialogDescription,
12 | AlertDialogFooter,
13 | AlertDialogHeader,
14 | AlertDialogTitle,
15 | } from "@/components/ui/alert-dialog";
16 | import {
17 | InputOTP,
18 | InputOTPGroup,
19 | InputOTPSlot,
20 | } from "@/components/ui/input-otp";
21 | import { decryptKey, encryptKey } from "@/lib/utils";
22 |
23 | export const PasskeyModal = () => {
24 | const router = useRouter();
25 | const path = usePathname();
26 | const [open, setOpen] = useState(false);
27 | const [passkey, setPasskey] = useState("");
28 | const [error, setError] = useState("");
29 |
30 | const encryptedKey =
31 | typeof window !== "undefined"
32 | ? window.localStorage.getItem("accessKey")
33 | : null;
34 |
35 | useEffect(() => {
36 | const accessKey = encryptedKey && decryptKey(encryptedKey);
37 |
38 | if (path)
39 | if (accessKey === process.env.NEXT_PUBLIC_ADMIN_PASSKEY!.toString()) {
40 | setOpen(false);
41 | router.push("/admin");
42 | } else {
43 | setOpen(true);
44 | }
45 | }, [encryptedKey]);
46 |
47 | const closeModal = () => {
48 | setOpen(false);
49 | router.push("/");
50 | };
51 |
52 | const validatePasskey = (
53 | e: React.MouseEvent24 | 36 |
37 | 38 |Get started by sending us a sample error:
39 | 68 | 69 |70 | Next, look for the error on the{" "} 71 | 72 | Issues Page 73 | 74 | . 75 |
76 |77 | For more information, see{" "} 78 | 79 | https://docs.sentry.io/platforms/javascript/guides/nextjs/ 80 | 81 |
82 |
88 | setPasskey(value)}
92 | >
93 |
94 |
101 |
102 |
103 | {error && (
104 |
109 | 105 | {error} 106 |
107 | )} 108 |
56 |
57 |
99 |
131 | );
132 | }
133 |
--------------------------------------------------------------------------------
/lib/validation.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const UserFormValidation = z.object({
4 | name: z
5 | .string()
6 | .min(2, "Name must be at least 2 characters")
7 | .max(50, "Name must be at most 50 characters"),
8 | email: z.string().email("Invalid email address"),
9 | phone: z
10 | .string()
11 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
12 | });
13 |
14 | export const PatientFormValidation = z.object({
15 | name: z
16 | .string()
17 | .min(2, "Name must be at least 2 characters")
18 | .max(50, "Name must be at most 50 characters"),
19 | email: z.string().email("Invalid email address"),
20 | phone: z
21 | .string()
22 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
23 | birthDate: z.coerce.date(),
24 | gender: z.enum(["Male", "Female", "Other"]),
25 | address: z
26 | .string()
27 | .min(5, "Address must be at least 5 characters")
28 | .max(500, "Address must be at most 500 characters"),
29 | occupation: z
30 | .string()
31 | .min(2, "Occupation must be at least 2 characters")
32 | .max(500, "Occupation must be at most 500 characters"),
33 | emergencyContactName: z
34 | .string()
35 | .min(2, "Contact name must be at least 2 characters")
36 | .max(50, "Contact name must be at most 50 characters"),
37 | emergencyContactNumber: z
38 | .string()
39 | .refine(
40 | (emergencyContactNumber) => /^\+\d{10,15}$/.test(emergencyContactNumber),
41 | "Invalid phone number"
42 | ),
43 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
44 | insuranceProvider: z
45 | .string()
46 | .min(2, "Insurance name must be at least 2 characters")
47 | .max(50, "Insurance name must be at most 50 characters"),
48 | insurancePolicyNumber: z
49 | .string()
50 | .min(2, "Policy number must be at least 2 characters")
51 | .max(50, "Policy number must be at most 50 characters"),
52 | allergies: z.string().optional(),
53 | currentMedication: z.string().optional(),
54 | familyMedicalHistory: z.string().optional(),
55 | pastMedicalHistory: z.string().optional(),
56 | identificationType: z.string().optional(),
57 | identificationNumber: z.string().optional(),
58 | identificationDocument: z.custom
100 |
114 |
129 |
130 | 165 | {body} 166 |
167 | ); 168 | }); 169 | FormMessage.displayName = "FormMessage"; 170 | 171 | export { 172 | useFormField, 173 | Form, 174 | FormItem, 175 | FormLabel, 176 | FormControl, 177 | FormDescription, 178 | FormMessage, 179 | FormField, 180 | }; 181 | -------------------------------------------------------------------------------- /components/ui/alert-dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; 4 | import * as React from "react"; 5 | 6 | import { buttonVariants } from "@/components/ui/button"; 7 | import { cn } from "@/lib/utils"; 8 | 9 | const AlertDialog = AlertDialogPrimitive.Root; 10 | 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger; 12 | 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal; 14 | 15 | const AlertDialogOverlay = React.forwardRef< 16 | React.ElementRef
50 | {props.iconSrc && (
51 |
60 |
65 |
66 |
67 | );
68 | case FormFieldType.TEXTAREA:
69 | return (
70 |
97 |
106 |
111 |
119 | field.onChange(date)}
123 | timeInputLabel="Time:"
124 | dateFormat={props.dateFormat ?? "MM/dd/yyyy"}
125 | wrapperClassName="date-picker"
126 | />
127 |
128 |
129 | );
130 | case FormFieldType.SELECT:
131 | return (
132 |
45 |
55 | ));
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName;
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef
2 |
3 | 4 |
5 |
6 |
7 | 8 |
21 |
22 | ## 📋 Table of Contents
23 |
24 | 1. 🤖 [Introduction](#introduction)
25 | 2. ⚙️ [Tech Stack](#tech-stack)
26 | 3. 🔋 [Features](#features)
27 | 4. 🤸 [Quick Start](#quick-start)
28 | 5. 🕸️ [Snippets (Code to Copy)](#snippets)
29 | 6. 🔗 [Assets](#links)
30 | 7. 🚀 [More](#more)
31 |
32 | ## 🚨 Tutorial
33 |
34 | This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.
35 |
36 | If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
37 |
38 | 3 | 4 |
7 | 8 |
9 | 
10 | 
11 | 
12 | 
13 |
14 |
15 |
10 |
11 |
12 |
13 | A HealthCare Management System
16 | 17 |
18 | Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!
19 |
20 |
136 |
137 |
138 | ```typescript
139 | import type { Config } from "tailwindcss";
140 |
141 | const { fontFamily } = require("tailwindcss/defaultTheme");
142 |
143 | const config = {
144 | darkMode: ["class"],
145 | content: [
146 | "./pages/**/*.{ts,tsx}",
147 | "./components/**/*.{ts,tsx}",
148 | "./app/**/*.{ts,tsx}",
149 | "./src/**/*.{ts,tsx}",
150 | ],
151 | prefix: "",
152 | theme: {
153 | container: {
154 | center: true,
155 | padding: "2rem",
156 | screens: {
157 | "2xl": "1400px",
158 | },
159 | },
160 | extend: {
161 | colors: {
162 | green: {
163 | 500: "#24AE7C",
164 | 600: "#0D2A1F",
165 | },
166 | blue: {
167 | 500: "#79B5EC",
168 | 600: "#152432",
169 | },
170 | red: {
171 | 500: "#F37877",
172 | 600: "#3E1716",
173 | 700: "#F24E43",
174 | },
175 | light: {
176 | 200: "#E8E9E9",
177 | },
178 | dark: {
179 | 200: "#0D0F10",
180 | 300: "#131619",
181 | 400: "#1A1D21",
182 | 500: "#363A3D",
183 | 600: "#76828D",
184 | 700: "#ABB8C4",
185 | },
186 | },
187 | fontFamily: {
188 | sans: ["var(--font-sans)", ...fontFamily.sans],
189 | },
190 | backgroundImage: {
191 | appointments: "url('/assets/images/appointments-bg.png')",
192 | pending: "url('/assets/images/pending-bg.png')",
193 | cancelled: "url('/assets/images/cancelled-bg.png')",
194 | },
195 | keyframes: {
196 | "accordion-down": {
197 | from: { height: "0" },
198 | to: { height: "var(--radix-accordion-content-height)" },
199 | },
200 | "accordion-up": {
201 | from: { height: "var(--radix-accordion-content-height)" },
202 | to: { height: "0" },
203 | },
204 | "caret-blink": {
205 | "0%,70%,100%": { opacity: "1" },
206 | "20%,50%": { opacity: "0" },
207 | },
208 | },
209 | animation: {
210 | "accordion-down": "accordion-down 0.2s ease-out",
211 | "accordion-up": "accordion-up 0.2s ease-out",
212 | "caret-blink": "caret-blink 1.25s ease-out infinite",
213 | },
214 | },
215 | },
216 | plugins: [require("tailwindcss-animate")],
217 | } satisfies Config;
218 |
219 | export default config;
220 | ```
221 |
222 |
223 |
224 | tailwind.config.ts
137 |
138 | ```typescript
139 | import type { Config } from "tailwindcss";
140 |
141 | const { fontFamily } = require("tailwindcss/defaultTheme");
142 |
143 | const config = {
144 | darkMode: ["class"],
145 | content: [
146 | "./pages/**/*.{ts,tsx}",
147 | "./components/**/*.{ts,tsx}",
148 | "./app/**/*.{ts,tsx}",
149 | "./src/**/*.{ts,tsx}",
150 | ],
151 | prefix: "",
152 | theme: {
153 | container: {
154 | center: true,
155 | padding: "2rem",
156 | screens: {
157 | "2xl": "1400px",
158 | },
159 | },
160 | extend: {
161 | colors: {
162 | green: {
163 | 500: "#24AE7C",
164 | 600: "#0D2A1F",
165 | },
166 | blue: {
167 | 500: "#79B5EC",
168 | 600: "#152432",
169 | },
170 | red: {
171 | 500: "#F37877",
172 | 600: "#3E1716",
173 | 700: "#F24E43",
174 | },
175 | light: {
176 | 200: "#E8E9E9",
177 | },
178 | dark: {
179 | 200: "#0D0F10",
180 | 300: "#131619",
181 | 400: "#1A1D21",
182 | 500: "#363A3D",
183 | 600: "#76828D",
184 | 700: "#ABB8C4",
185 | },
186 | },
187 | fontFamily: {
188 | sans: ["var(--font-sans)", ...fontFamily.sans],
189 | },
190 | backgroundImage: {
191 | appointments: "url('/assets/images/appointments-bg.png')",
192 | pending: "url('/assets/images/pending-bg.png')",
193 | cancelled: "url('/assets/images/cancelled-bg.png')",
194 | },
195 | keyframes: {
196 | "accordion-down": {
197 | from: { height: "0" },
198 | to: { height: "var(--radix-accordion-content-height)" },
199 | },
200 | "accordion-up": {
201 | from: { height: "var(--radix-accordion-content-height)" },
202 | to: { height: "0" },
203 | },
204 | "caret-blink": {
205 | "0%,70%,100%": { opacity: "1" },
206 | "20%,50%": { opacity: "0" },
207 | },
208 | },
209 | animation: {
210 | "accordion-down": "accordion-down 0.2s ease-out",
211 | "accordion-up": "accordion-up 0.2s ease-out",
212 | "caret-blink": "caret-blink 1.25s ease-out infinite",
213 | },
214 | },
215 | },
216 | plugins: [require("tailwindcss-animate")],
217 | } satisfies Config;
218 |
219 | export default config;
220 | ```
221 |
222 |
225 |
226 |
227 | ```css
228 | @tailwind base;
229 | @tailwind components;
230 | @tailwind utilities;
231 |
232 | /* ========================================== TAILWIND STYLES */
233 | @layer base {
234 | /* Remove scrollbar */
235 | .remove-scrollbar::-webkit-scrollbar {
236 | width: 0px;
237 | height: 0px;
238 | border-radius: 0px;
239 | }
240 |
241 | .remove-scrollbar::-webkit-scrollbar-track {
242 | background: transparent;
243 | }
244 |
245 | .remove-scrollbar::-webkit-scrollbar-thumb {
246 | background: transparent;
247 | border-radius: 0px;
248 | }
249 |
250 | .remove-scrollbar::-webkit-scrollbar-thumb:hover {
251 | /* background: #1e2238; */
252 | background: transparent;
253 | }
254 | }
255 |
256 | @layer utilities {
257 | /* ===== UTILITIES */
258 | .sidebar {
259 | @apply remove-scrollbar w-full max-w-72 flex-col overflow-auto bg-black-800 px-7 py-10;
260 | }
261 |
262 | .left-sidebar {
263 | @apply hidden lg:flex;
264 | }
265 |
266 | .right-sidebar {
267 | @apply hidden xl:flex;
268 | }
269 |
270 | .clip-text {
271 | @apply bg-clip-text text-transparent;
272 | }
273 |
274 | .bg-image {
275 | @apply bg-black-900 bg-light-rays bg-cover bg-no-repeat;
276 | }
277 |
278 | .header {
279 | @apply text-32-bold md:text-36-bold;
280 | }
281 |
282 | .sub-header {
283 | @apply text-18-bold md:text-24-bold;
284 | }
285 |
286 | .container {
287 | @apply relative flex-1 overflow-y-auto px-[5%];
288 | }
289 |
290 | .sub-container {
291 | @apply mx-auto flex size-full flex-col py-10;
292 | }
293 |
294 | .side-img {
295 | @apply hidden h-full object-cover md:block;
296 | }
297 |
298 | .copyright {
299 | @apply text-14-regular justify-items-end text-center text-dark-600 xl:text-left;
300 | }
301 |
302 | /* ==== SUCCESS */
303 | .success-img {
304 | @apply m-auto flex flex-1 flex-col items-center justify-between gap-10 py-10;
305 | }
306 |
307 | .request-details {
308 | @apply flex w-full flex-col items-center gap-8 border-y-2 border-dark-400 py-8 md:w-fit md:flex-row;
309 | }
310 |
311 | /* ===== ADMIN */
312 | .admin-header {
313 | @apply sticky top-3 z-20 mx-3 flex items-center justify-between rounded-2xl bg-dark-200 px-[5%] py-5 shadow-lg xl:px-12;
314 | }
315 |
316 | .admin-main {
317 | @apply flex flex-col items-center space-y-6 px-[5%] pb-12 xl:space-y-12 xl:px-12;
318 | }
319 |
320 | .admin-stat {
321 | @apply flex w-full flex-col justify-between gap-5 sm:flex-row xl:gap-10;
322 | }
323 |
324 | /* ==== FORM */
325 | .radio-group {
326 | @apply flex h-full flex-1 items-center gap-2 rounded-md border border-dashed border-dark-500 bg-dark-400 p-3;
327 | }
328 |
329 | .checkbox-label {
330 | @apply cursor-pointer text-sm font-medium text-dark-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 md:leading-none;
331 | }
332 |
333 | /* ==== File Upload */
334 | .file-upload {
335 | @apply text-12-regular flex cursor-pointer flex-col items-center justify-center gap-3 rounded-md border border-dashed border-dark-500 bg-dark-400 p-5;
336 | }
337 |
338 | .file-upload_label {
339 | @apply flex flex-col justify-center gap-2 text-center text-dark-600;
340 | }
341 |
342 | /* ==== Stat Card */
343 | .stat-card {
344 | @apply flex flex-1 flex-col gap-6 rounded-2xl bg-cover p-6 shadow-lg;
345 | }
346 |
347 | /* ==== Status Badge */
348 | .status-badge {
349 | @apply flex w-fit items-center gap-2 rounded-full px-4 py-2;
350 | }
351 |
352 | /* Data Table */
353 | .data-table {
354 | @apply z-10 w-full overflow-hidden rounded-lg border border-dark-400 shadow-lg;
355 | }
356 |
357 | .table-actions {
358 | @apply flex w-full items-center justify-between space-x-2 p-4;
359 | }
360 |
361 | /* ===== ALIGNMENTS */
362 | .flex-center {
363 | @apply flex items-center justify-center;
364 | }
365 |
366 | .flex-between {
367 | @apply flex items-center justify-between;
368 | }
369 |
370 | /* ===== TYPOGRAPHY */
371 | .text-36-bold {
372 | @apply text-[36px] leading-[40px] font-bold;
373 | }
374 |
375 | .text-24-bold {
376 | @apply text-[24px] leading-[28px] font-bold;
377 | }
378 |
379 | .text-32-bold {
380 | @apply text-[32px] leading-[36px] font-bold;
381 | }
382 |
383 | .text-18-bold {
384 | @apply text-[18px] leading-[24px] font-bold;
385 | }
386 |
387 | .text-16-semibold {
388 | @apply text-[16px] leading-[20px] font-semibold;
389 | }
390 |
391 | .text-16-regular {
392 | @apply text-[16px] leading-[20px] font-normal;
393 | }
394 |
395 | .text-14-medium {
396 | @apply text-[14px] leading-[18px] font-medium;
397 | }
398 |
399 | .text-14-regular {
400 | @apply text-[14px] leading-[18px] font-normal;
401 | }
402 |
403 | .text-12-regular {
404 | @apply text-[12px] leading-[16px] font-normal;
405 | }
406 |
407 | .text-12-semibold {
408 | @apply text-[12px] leading-[16px] font-semibold;
409 | }
410 |
411 | /* ===== SHADCN OVERRIDES */
412 | .shad-primary-btn {
413 | @apply bg-green-500 text-white !important;
414 | }
415 |
416 | .shad-danger-btn {
417 | @apply bg-red-700 text-white !important;
418 | }
419 |
420 | .shad-gray-btn {
421 | @apply border border-dark-500 cursor-pointer bg-dark-400 text-white !important;
422 | }
423 |
424 | .shad-input-label {
425 | @apply text-14-medium text-dark-700 !important;
426 | }
427 |
428 | .shad-input {
429 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
430 | }
431 |
432 | .shad-input-icon {
433 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
434 | }
435 |
436 | .shad-textArea {
437 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
438 | }
439 |
440 | .shad-combobox-item {
441 | @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 !important;
442 | }
443 |
444 | .shad-combobox-trigger {
445 | @apply h-11 !important;
446 | }
447 |
448 | .shad-select-trigger {
449 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus:ring-0 focus:ring-offset-0 !important;
450 | }
451 |
452 | .shad-select-content {
453 | @apply bg-dark-400 border-dark-500 !important;
454 | }
455 |
456 | .shad-dialog {
457 | @apply bg-dark-400 border-dark-500 !important;
458 | }
459 |
460 | .shad-dialog button {
461 | @apply focus:ring-0 focus:ring-offset-0 focus-visible:border-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
462 | }
463 |
464 | .shad-error {
465 | @apply text-red-400 !important;
466 | }
467 |
468 | .shad-table {
469 | @apply rounded-lg overflow-hidden !important;
470 | }
471 |
472 | .shad-table-row-header {
473 | @apply border-b border-dark-400 text-light-200 hover:bg-transparent !important;
474 | }
475 |
476 | .shad-table-row {
477 | @apply border-b border-dark-400 text-light-200 !important;
478 | }
479 |
480 | .shad-otp {
481 | @apply w-full flex justify-between !important;
482 | }
483 |
484 | .shad-otp-slot {
485 | @apply text-36-bold justify-center flex border border-dark-500 rounded-lg size-16 gap-4 !important;
486 | }
487 |
488 | .shad-alert-dialog {
489 | @apply space-y-5 bg-dark-400 border-dark-500 outline-none !important;
490 | }
491 |
492 | .shad-sheet-content button {
493 | @apply top-2 focus:ring-0 focus:ring-offset-0 focus-visible:border-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
494 | }
495 |
496 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
497 | .input-phone {
498 | @apply mt-2 h-11 rounded-md px-3 text-sm border bg-dark-400 placeholder:text-dark-600 border-dark-500 !important;
499 | }
500 |
501 | /* ===== REACT DATE PICKER OVERRIDES */
502 | .date-picker {
503 | @apply overflow-hidden border-transparent w-full placeholder:text-dark-600 h-11 text-14-medium rounded-md px-3 outline-none !important;
504 | }
505 | }
506 |
507 | /* ===== REACT-DATEPICKER OVERRIDES */
508 | .react-datepicker-wrapper.date-picker {
509 | display: flex;
510 | align-items: center;
511 | }
512 |
513 | .react-datepicker,
514 | .react-datepicker__time,
515 | .react-datepicker__header,
516 | .react-datepicker__current-month,
517 | .react-datepicker__day-name,
518 | .react-datepicker__day,
519 | .react-datepicker-time__header {
520 | background-color: #1a1d21 !important;
521 | border-color: #363a3d !important;
522 | color: #abb8c4 !important;
523 | }
524 |
525 | .react-datepicker__current-month,
526 | .react-datepicker__day-name,
527 | .react-datepicker-time__header {
528 | color: #ffffff !important;
529 | }
530 |
531 | .react-datepicker__triangle {
532 | fill: #1a1d21 !important;
533 | color: #1a1d21 !important;
534 | stroke: #1a1d21 !important;
535 | }
536 |
537 | .react-datepicker__time-list-item:hover {
538 | background-color: #363a3d !important;
539 | }
540 |
541 | .react-datepicker__input-container input {
542 | background-color: #1a1d21 !important;
543 | width: 100%;
544 | outline: none;
545 | }
546 |
547 | .react-datepicker__day--selected {
548 | background-color: #24ae7c !important;
549 | color: #ffffff !important;
550 | border-radius: 4px;
551 | }
552 |
553 | .react-datepicker__time-list-item--selected {
554 | background-color: #24ae7c !important;
555 | }
556 |
557 | .react-datepicker__time-container {
558 | border-left: 1px solid #363a3d !important;
559 | }
560 |
561 | .react-datepicker__time-list-item {
562 | display: flex !important;
563 | align-items: center !important;
564 | }
565 |
566 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
567 | .PhoneInputInput {
568 | outline: none;
569 | margin-left: 4px;
570 | background: #1a1d21;
571 | font-size: 14px;
572 | font-weight: 500;
573 | }
574 |
575 | .PhoneInputInput::placeholder {
576 | color: #1a1d21;
577 | }
578 | ```
579 |
580 |
581 |
582 | app/globals.css
226 |
227 | ```css
228 | @tailwind base;
229 | @tailwind components;
230 | @tailwind utilities;
231 |
232 | /* ========================================== TAILWIND STYLES */
233 | @layer base {
234 | /* Remove scrollbar */
235 | .remove-scrollbar::-webkit-scrollbar {
236 | width: 0px;
237 | height: 0px;
238 | border-radius: 0px;
239 | }
240 |
241 | .remove-scrollbar::-webkit-scrollbar-track {
242 | background: transparent;
243 | }
244 |
245 | .remove-scrollbar::-webkit-scrollbar-thumb {
246 | background: transparent;
247 | border-radius: 0px;
248 | }
249 |
250 | .remove-scrollbar::-webkit-scrollbar-thumb:hover {
251 | /* background: #1e2238; */
252 | background: transparent;
253 | }
254 | }
255 |
256 | @layer utilities {
257 | /* ===== UTILITIES */
258 | .sidebar {
259 | @apply remove-scrollbar w-full max-w-72 flex-col overflow-auto bg-black-800 px-7 py-10;
260 | }
261 |
262 | .left-sidebar {
263 | @apply hidden lg:flex;
264 | }
265 |
266 | .right-sidebar {
267 | @apply hidden xl:flex;
268 | }
269 |
270 | .clip-text {
271 | @apply bg-clip-text text-transparent;
272 | }
273 |
274 | .bg-image {
275 | @apply bg-black-900 bg-light-rays bg-cover bg-no-repeat;
276 | }
277 |
278 | .header {
279 | @apply text-32-bold md:text-36-bold;
280 | }
281 |
282 | .sub-header {
283 | @apply text-18-bold md:text-24-bold;
284 | }
285 |
286 | .container {
287 | @apply relative flex-1 overflow-y-auto px-[5%];
288 | }
289 |
290 | .sub-container {
291 | @apply mx-auto flex size-full flex-col py-10;
292 | }
293 |
294 | .side-img {
295 | @apply hidden h-full object-cover md:block;
296 | }
297 |
298 | .copyright {
299 | @apply text-14-regular justify-items-end text-center text-dark-600 xl:text-left;
300 | }
301 |
302 | /* ==== SUCCESS */
303 | .success-img {
304 | @apply m-auto flex flex-1 flex-col items-center justify-between gap-10 py-10;
305 | }
306 |
307 | .request-details {
308 | @apply flex w-full flex-col items-center gap-8 border-y-2 border-dark-400 py-8 md:w-fit md:flex-row;
309 | }
310 |
311 | /* ===== ADMIN */
312 | .admin-header {
313 | @apply sticky top-3 z-20 mx-3 flex items-center justify-between rounded-2xl bg-dark-200 px-[5%] py-5 shadow-lg xl:px-12;
314 | }
315 |
316 | .admin-main {
317 | @apply flex flex-col items-center space-y-6 px-[5%] pb-12 xl:space-y-12 xl:px-12;
318 | }
319 |
320 | .admin-stat {
321 | @apply flex w-full flex-col justify-between gap-5 sm:flex-row xl:gap-10;
322 | }
323 |
324 | /* ==== FORM */
325 | .radio-group {
326 | @apply flex h-full flex-1 items-center gap-2 rounded-md border border-dashed border-dark-500 bg-dark-400 p-3;
327 | }
328 |
329 | .checkbox-label {
330 | @apply cursor-pointer text-sm font-medium text-dark-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 md:leading-none;
331 | }
332 |
333 | /* ==== File Upload */
334 | .file-upload {
335 | @apply text-12-regular flex cursor-pointer flex-col items-center justify-center gap-3 rounded-md border border-dashed border-dark-500 bg-dark-400 p-5;
336 | }
337 |
338 | .file-upload_label {
339 | @apply flex flex-col justify-center gap-2 text-center text-dark-600;
340 | }
341 |
342 | /* ==== Stat Card */
343 | .stat-card {
344 | @apply flex flex-1 flex-col gap-6 rounded-2xl bg-cover p-6 shadow-lg;
345 | }
346 |
347 | /* ==== Status Badge */
348 | .status-badge {
349 | @apply flex w-fit items-center gap-2 rounded-full px-4 py-2;
350 | }
351 |
352 | /* Data Table */
353 | .data-table {
354 | @apply z-10 w-full overflow-hidden rounded-lg border border-dark-400 shadow-lg;
355 | }
356 |
357 | .table-actions {
358 | @apply flex w-full items-center justify-between space-x-2 p-4;
359 | }
360 |
361 | /* ===== ALIGNMENTS */
362 | .flex-center {
363 | @apply flex items-center justify-center;
364 | }
365 |
366 | .flex-between {
367 | @apply flex items-center justify-between;
368 | }
369 |
370 | /* ===== TYPOGRAPHY */
371 | .text-36-bold {
372 | @apply text-[36px] leading-[40px] font-bold;
373 | }
374 |
375 | .text-24-bold {
376 | @apply text-[24px] leading-[28px] font-bold;
377 | }
378 |
379 | .text-32-bold {
380 | @apply text-[32px] leading-[36px] font-bold;
381 | }
382 |
383 | .text-18-bold {
384 | @apply text-[18px] leading-[24px] font-bold;
385 | }
386 |
387 | .text-16-semibold {
388 | @apply text-[16px] leading-[20px] font-semibold;
389 | }
390 |
391 | .text-16-regular {
392 | @apply text-[16px] leading-[20px] font-normal;
393 | }
394 |
395 | .text-14-medium {
396 | @apply text-[14px] leading-[18px] font-medium;
397 | }
398 |
399 | .text-14-regular {
400 | @apply text-[14px] leading-[18px] font-normal;
401 | }
402 |
403 | .text-12-regular {
404 | @apply text-[12px] leading-[16px] font-normal;
405 | }
406 |
407 | .text-12-semibold {
408 | @apply text-[12px] leading-[16px] font-semibold;
409 | }
410 |
411 | /* ===== SHADCN OVERRIDES */
412 | .shad-primary-btn {
413 | @apply bg-green-500 text-white !important;
414 | }
415 |
416 | .shad-danger-btn {
417 | @apply bg-red-700 text-white !important;
418 | }
419 |
420 | .shad-gray-btn {
421 | @apply border border-dark-500 cursor-pointer bg-dark-400 text-white !important;
422 | }
423 |
424 | .shad-input-label {
425 | @apply text-14-medium text-dark-700 !important;
426 | }
427 |
428 | .shad-input {
429 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
430 | }
431 |
432 | .shad-input-icon {
433 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
434 | }
435 |
436 | .shad-textArea {
437 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
438 | }
439 |
440 | .shad-combobox-item {
441 | @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 !important;
442 | }
443 |
444 | .shad-combobox-trigger {
445 | @apply h-11 !important;
446 | }
447 |
448 | .shad-select-trigger {
449 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus:ring-0 focus:ring-offset-0 !important;
450 | }
451 |
452 | .shad-select-content {
453 | @apply bg-dark-400 border-dark-500 !important;
454 | }
455 |
456 | .shad-dialog {
457 | @apply bg-dark-400 border-dark-500 !important;
458 | }
459 |
460 | .shad-dialog button {
461 | @apply focus:ring-0 focus:ring-offset-0 focus-visible:border-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
462 | }
463 |
464 | .shad-error {
465 | @apply text-red-400 !important;
466 | }
467 |
468 | .shad-table {
469 | @apply rounded-lg overflow-hidden !important;
470 | }
471 |
472 | .shad-table-row-header {
473 | @apply border-b border-dark-400 text-light-200 hover:bg-transparent !important;
474 | }
475 |
476 | .shad-table-row {
477 | @apply border-b border-dark-400 text-light-200 !important;
478 | }
479 |
480 | .shad-otp {
481 | @apply w-full flex justify-between !important;
482 | }
483 |
484 | .shad-otp-slot {
485 | @apply text-36-bold justify-center flex border border-dark-500 rounded-lg size-16 gap-4 !important;
486 | }
487 |
488 | .shad-alert-dialog {
489 | @apply space-y-5 bg-dark-400 border-dark-500 outline-none !important;
490 | }
491 |
492 | .shad-sheet-content button {
493 | @apply top-2 focus:ring-0 focus:ring-offset-0 focus-visible:border-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
494 | }
495 |
496 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
497 | .input-phone {
498 | @apply mt-2 h-11 rounded-md px-3 text-sm border bg-dark-400 placeholder:text-dark-600 border-dark-500 !important;
499 | }
500 |
501 | /* ===== REACT DATE PICKER OVERRIDES */
502 | .date-picker {
503 | @apply overflow-hidden border-transparent w-full placeholder:text-dark-600 h-11 text-14-medium rounded-md px-3 outline-none !important;
504 | }
505 | }
506 |
507 | /* ===== REACT-DATEPICKER OVERRIDES */
508 | .react-datepicker-wrapper.date-picker {
509 | display: flex;
510 | align-items: center;
511 | }
512 |
513 | .react-datepicker,
514 | .react-datepicker__time,
515 | .react-datepicker__header,
516 | .react-datepicker__current-month,
517 | .react-datepicker__day-name,
518 | .react-datepicker__day,
519 | .react-datepicker-time__header {
520 | background-color: #1a1d21 !important;
521 | border-color: #363a3d !important;
522 | color: #abb8c4 !important;
523 | }
524 |
525 | .react-datepicker__current-month,
526 | .react-datepicker__day-name,
527 | .react-datepicker-time__header {
528 | color: #ffffff !important;
529 | }
530 |
531 | .react-datepicker__triangle {
532 | fill: #1a1d21 !important;
533 | color: #1a1d21 !important;
534 | stroke: #1a1d21 !important;
535 | }
536 |
537 | .react-datepicker__time-list-item:hover {
538 | background-color: #363a3d !important;
539 | }
540 |
541 | .react-datepicker__input-container input {
542 | background-color: #1a1d21 !important;
543 | width: 100%;
544 | outline: none;
545 | }
546 |
547 | .react-datepicker__day--selected {
548 | background-color: #24ae7c !important;
549 | color: #ffffff !important;
550 | border-radius: 4px;
551 | }
552 |
553 | .react-datepicker__time-list-item--selected {
554 | background-color: #24ae7c !important;
555 | }
556 |
557 | .react-datepicker__time-container {
558 | border-left: 1px solid #363a3d !important;
559 | }
560 |
561 | .react-datepicker__time-list-item {
562 | display: flex !important;
563 | align-items: center !important;
564 | }
565 |
566 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
567 | .PhoneInputInput {
568 | outline: none;
569 | margin-left: 4px;
570 | background: #1a1d21;
571 | font-size: 14px;
572 | font-weight: 500;
573 | }
574 |
575 | .PhoneInputInput::placeholder {
576 | color: #1a1d21;
577 | }
578 | ```
579 |
580 |
583 |
584 |
585 | ```typescript
586 | /* eslint-disable no-unused-vars */
587 |
588 | declare type SearchParamProps = {
589 | params: { [key: string]: string };
590 | searchParams: { [key: string]: string | string[] | undefined };
591 | };
592 |
593 | declare type Gender = "Male" | "Female" | "Other";
594 | declare type Status = "pending" | "scheduled" | "cancelled";
595 |
596 | declare interface CreateUserParams {
597 | name: string;
598 | email: string;
599 | phone: string;
600 | }
601 | declare interface User extends CreateUserParams {
602 | $id: string;
603 | }
604 |
605 | declare interface RegisterUserParams extends CreateUserParams {
606 | userId: string;
607 | birthDate: Date;
608 | gender: Gender;
609 | address: string;
610 | occupation: string;
611 | emergencyContactName: string;
612 | emergencyContactNumber: string;
613 | primaryPhysician: string;
614 | insuranceProvider: string;
615 | insurancePolicyNumber: string;
616 | allergies: string | undefined;
617 | currentMedication: string | undefined;
618 | familyMedicalHistory: string | undefined;
619 | pastMedicalHistory: string | undefined;
620 | identificationType: string | undefined;
621 | identificationNumber: string | undefined;
622 | identificationDocument: FormData | undefined;
623 | privacyConsent: boolean;
624 | }
625 |
626 | declare type CreateAppointmentParams = {
627 | userId: string;
628 | patient: string;
629 | primaryPhysician: string;
630 | reason: string;
631 | schedule: Date;
632 | status: Status;
633 | note: string | undefined;
634 | };
635 |
636 | declare type UpdateAppointmentParams = {
637 | appointmentId: string;
638 | userId: string;
639 | appointment: Appointment;
640 | type: string;
641 | };
642 | ```
643 |
644 |
645 |
646 | types/index.d.ts
584 |
585 | ```typescript
586 | /* eslint-disable no-unused-vars */
587 |
588 | declare type SearchParamProps = {
589 | params: { [key: string]: string };
590 | searchParams: { [key: string]: string | string[] | undefined };
591 | };
592 |
593 | declare type Gender = "Male" | "Female" | "Other";
594 | declare type Status = "pending" | "scheduled" | "cancelled";
595 |
596 | declare interface CreateUserParams {
597 | name: string;
598 | email: string;
599 | phone: string;
600 | }
601 | declare interface User extends CreateUserParams {
602 | $id: string;
603 | }
604 |
605 | declare interface RegisterUserParams extends CreateUserParams {
606 | userId: string;
607 | birthDate: Date;
608 | gender: Gender;
609 | address: string;
610 | occupation: string;
611 | emergencyContactName: string;
612 | emergencyContactNumber: string;
613 | primaryPhysician: string;
614 | insuranceProvider: string;
615 | insurancePolicyNumber: string;
616 | allergies: string | undefined;
617 | currentMedication: string | undefined;
618 | familyMedicalHistory: string | undefined;
619 | pastMedicalHistory: string | undefined;
620 | identificationType: string | undefined;
621 | identificationNumber: string | undefined;
622 | identificationDocument: FormData | undefined;
623 | privacyConsent: boolean;
624 | }
625 |
626 | declare type CreateAppointmentParams = {
627 | userId: string;
628 | patient: string;
629 | primaryPhysician: string;
630 | reason: string;
631 | schedule: Date;
632 | status: Status;
633 | note: string | undefined;
634 | };
635 |
636 | declare type UpdateAppointmentParams = {
637 | appointmentId: string;
638 | userId: string;
639 | appointment: Appointment;
640 | type: string;
641 | };
642 | ```
643 |
644 |
647 |
648 |
649 | ```typescript
650 | import { Models } from "node-appwrite";
651 |
652 | export interface Patient extends Models.Document {
653 | userId: string;
654 | name: string;
655 | email: string;
656 | phone: string;
657 | birthDate: Date;
658 | gender: Gender;
659 | address: string;
660 | occupation: string;
661 | emergencyContactName: string;
662 | emergencyContactNumber: string;
663 | primaryPhysician: string;
664 | insuranceProvider: string;
665 | insurancePolicyNumber: string;
666 | allergies: string | undefined;
667 | currentMedication: string | undefined;
668 | familyMedicalHistory: string | undefined;
669 | pastMedicalHistory: string | undefined;
670 | identificationType: string | undefined;
671 | identificationNumber: string | undefined;
672 | identificationDocument: FormData | undefined;
673 | privacyConsent: boolean;
674 | }
675 |
676 | export interface Appointment extends Models.Document {
677 | patient: Patient;
678 | schedule: Date;
679 | status: Status;
680 | primaryPhysician: string;
681 | reason: string;
682 | note: string;
683 | userId: string;
684 | cancellationReason: string | null;
685 | }
686 | ```
687 |
688 |
689 |
690 | types/appwrite.types.ts
648 |
649 | ```typescript
650 | import { Models } from "node-appwrite";
651 |
652 | export interface Patient extends Models.Document {
653 | userId: string;
654 | name: string;
655 | email: string;
656 | phone: string;
657 | birthDate: Date;
658 | gender: Gender;
659 | address: string;
660 | occupation: string;
661 | emergencyContactName: string;
662 | emergencyContactNumber: string;
663 | primaryPhysician: string;
664 | insuranceProvider: string;
665 | insurancePolicyNumber: string;
666 | allergies: string | undefined;
667 | currentMedication: string | undefined;
668 | familyMedicalHistory: string | undefined;
669 | pastMedicalHistory: string | undefined;
670 | identificationType: string | undefined;
671 | identificationNumber: string | undefined;
672 | identificationDocument: FormData | undefined;
673 | privacyConsent: boolean;
674 | }
675 |
676 | export interface Appointment extends Models.Document {
677 | patient: Patient;
678 | schedule: Date;
679 | status: Status;
680 | primaryPhysician: string;
681 | reason: string;
682 | note: string;
683 | userId: string;
684 | cancellationReason: string | null;
685 | }
686 | ```
687 |
688 |
691 |
692 |
693 | ```typescript
694 | import { type ClassValue, clsx } from "clsx";
695 | import { twMerge } from "tailwind-merge";
696 |
697 | export function cn(...inputs: ClassValue[]) {
698 | return twMerge(clsx(inputs));
699 | }
700 |
701 | export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value));
702 |
703 | export const convertFileToUrl = (file: File) => URL.createObjectURL(file);
704 |
705 | // FORMAT DATE TIME
706 | export const formatDateTime = (dateString: Date | string) => {
707 | const dateTimeOptions: Intl.DateTimeFormatOptions = {
708 | // weekday: "short", // abbreviated weekday name (e.g., 'Mon')
709 | month: "short", // abbreviated month name (e.g., 'Oct')
710 | day: "numeric", // numeric day of the month (e.g., '25')
711 | year: "numeric", // numeric year (e.g., '2023')
712 | hour: "numeric", // numeric hour (e.g., '8')
713 | minute: "numeric", // numeric minute (e.g., '30')
714 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
715 | };
716 |
717 | const dateDayOptions: Intl.DateTimeFormatOptions = {
718 | weekday: "short", // abbreviated weekday name (e.g., 'Mon')
719 | year: "numeric", // numeric year (e.g., '2023')
720 | month: "2-digit", // abbreviated month name (e.g., 'Oct')
721 | day: "2-digit", // numeric day of the month (e.g., '25')
722 | };
723 |
724 | const dateOptions: Intl.DateTimeFormatOptions = {
725 | month: "short", // abbreviated month name (e.g., 'Oct')
726 | year: "numeric", // numeric year (e.g., '2023')
727 | day: "numeric", // numeric day of the month (e.g., '25')
728 | };
729 |
730 | const timeOptions: Intl.DateTimeFormatOptions = {
731 | hour: "numeric", // numeric hour (e.g., '8')
732 | minute: "numeric", // numeric minute (e.g., '30')
733 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
734 | };
735 |
736 | const formattedDateTime: string = new Date(dateString).toLocaleString(
737 | "en-US",
738 | dateTimeOptions
739 | );
740 |
741 | const formattedDateDay: string = new Date(dateString).toLocaleString(
742 | "en-US",
743 | dateDayOptions
744 | );
745 |
746 | const formattedDate: string = new Date(dateString).toLocaleString(
747 | "en-US",
748 | dateOptions
749 | );
750 |
751 | const formattedTime: string = new Date(dateString).toLocaleString(
752 | "en-US",
753 | timeOptions
754 | );
755 |
756 | return {
757 | dateTime: formattedDateTime,
758 | dateDay: formattedDateDay,
759 | dateOnly: formattedDate,
760 | timeOnly: formattedTime,
761 | };
762 | };
763 |
764 | export function encryptKey(passkey: string) {
765 | return btoa(passkey);
766 | }
767 |
768 | export function decryptKey(passkey: string) {
769 | return atob(passkey);
770 | }
771 | ```
772 |
773 |
774 |
775 | lib/utils.ts
692 |
693 | ```typescript
694 | import { type ClassValue, clsx } from "clsx";
695 | import { twMerge } from "tailwind-merge";
696 |
697 | export function cn(...inputs: ClassValue[]) {
698 | return twMerge(clsx(inputs));
699 | }
700 |
701 | export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value));
702 |
703 | export const convertFileToUrl = (file: File) => URL.createObjectURL(file);
704 |
705 | // FORMAT DATE TIME
706 | export const formatDateTime = (dateString: Date | string) => {
707 | const dateTimeOptions: Intl.DateTimeFormatOptions = {
708 | // weekday: "short", // abbreviated weekday name (e.g., 'Mon')
709 | month: "short", // abbreviated month name (e.g., 'Oct')
710 | day: "numeric", // numeric day of the month (e.g., '25')
711 | year: "numeric", // numeric year (e.g., '2023')
712 | hour: "numeric", // numeric hour (e.g., '8')
713 | minute: "numeric", // numeric minute (e.g., '30')
714 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
715 | };
716 |
717 | const dateDayOptions: Intl.DateTimeFormatOptions = {
718 | weekday: "short", // abbreviated weekday name (e.g., 'Mon')
719 | year: "numeric", // numeric year (e.g., '2023')
720 | month: "2-digit", // abbreviated month name (e.g., 'Oct')
721 | day: "2-digit", // numeric day of the month (e.g., '25')
722 | };
723 |
724 | const dateOptions: Intl.DateTimeFormatOptions = {
725 | month: "short", // abbreviated month name (e.g., 'Oct')
726 | year: "numeric", // numeric year (e.g., '2023')
727 | day: "numeric", // numeric day of the month (e.g., '25')
728 | };
729 |
730 | const timeOptions: Intl.DateTimeFormatOptions = {
731 | hour: "numeric", // numeric hour (e.g., '8')
732 | minute: "numeric", // numeric minute (e.g., '30')
733 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
734 | };
735 |
736 | const formattedDateTime: string = new Date(dateString).toLocaleString(
737 | "en-US",
738 | dateTimeOptions
739 | );
740 |
741 | const formattedDateDay: string = new Date(dateString).toLocaleString(
742 | "en-US",
743 | dateDayOptions
744 | );
745 |
746 | const formattedDate: string = new Date(dateString).toLocaleString(
747 | "en-US",
748 | dateOptions
749 | );
750 |
751 | const formattedTime: string = new Date(dateString).toLocaleString(
752 | "en-US",
753 | timeOptions
754 | );
755 |
756 | return {
757 | dateTime: formattedDateTime,
758 | dateDay: formattedDateDay,
759 | dateOnly: formattedDate,
760 | timeOnly: formattedTime,
761 | };
762 | };
763 |
764 | export function encryptKey(passkey: string) {
765 | return btoa(passkey);
766 | }
767 |
768 | export function decryptKey(passkey: string) {
769 | return atob(passkey);
770 | }
771 | ```
772 |
773 |
776 |
777 |
778 | ```typescript
779 | import { z } from "zod";
780 |
781 | export const UserFormValidation = z.object({
782 | name: z
783 | .string()
784 | .min(2, "Name must be at least 2 characters")
785 | .max(50, "Name must be at most 50 characters"),
786 | email: z.string().email("Invalid email address"),
787 | phone: z
788 | .string()
789 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
790 | });
791 |
792 | export const PatientFormValidation = z.object({
793 | name: z
794 | .string()
795 | .min(2, "Name must be at least 2 characters")
796 | .max(50, "Name must be at most 50 characters"),
797 | email: z.string().email("Invalid email address"),
798 | phone: z
799 | .string()
800 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
801 | birthDate: z.coerce.date(),
802 | gender: z.enum(["Male", "Female", "Other"]),
803 | address: z
804 | .string()
805 | .min(5, "Address must be at least 5 characters")
806 | .max(500, "Address must be at most 500 characters"),
807 | occupation: z
808 | .string()
809 | .min(2, "Occupation must be at least 2 characters")
810 | .max(500, "Occupation must be at most 500 characters"),
811 | emergencyContactName: z
812 | .string()
813 | .min(2, "Contact name must be at least 2 characters")
814 | .max(50, "Contact name must be at most 50 characters"),
815 | emergencyContactNumber: z
816 | .string()
817 | .refine(
818 | (emergencyContactNumber) => /^\+\d{10,15}$/.test(emergencyContactNumber),
819 | "Invalid phone number"
820 | ),
821 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
822 | insuranceProvider: z
823 | .string()
824 | .min(2, "Insurance name must be at least 2 characters")
825 | .max(50, "Insurance name must be at most 50 characters"),
826 | insurancePolicyNumber: z
827 | .string()
828 | .min(2, "Policy number must be at least 2 characters")
829 | .max(50, "Policy number must be at most 50 characters"),
830 | allergies: z.string().optional(),
831 | currentMedication: z.string().optional(),
832 | familyMedicalHistory: z.string().optional(),
833 | pastMedicalHistory: z.string().optional(),
834 | identificationType: z.string().optional(),
835 | identificationNumber: z.string().optional(),
836 | identificationDocument: z.custom().optional(),
837 | treatmentConsent: z
838 | .boolean()
839 | .default(false)
840 | .refine((value) => value === true, {
841 | message: "You must consent to treatment in order to proceed",
842 | }),
843 | disclosureConsent: z
844 | .boolean()
845 | .default(false)
846 | .refine((value) => value === true, {
847 | message: "You must consent to disclosure in order to proceed",
848 | }),
849 | privacyConsent: z
850 | .boolean()
851 | .default(false)
852 | .refine((value) => value === true, {
853 | message: "You must consent to privacy in order to proceed",
854 | }),
855 | });
856 |
857 | export const CreateAppointmentSchema = z.object({
858 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
859 | schedule: z.coerce.date(),
860 | reason: z
861 | .string()
862 | .min(2, "Reason must be at least 2 characters")
863 | .max(500, "Reason must be at most 500 characters"),
864 | note: z.string().optional(),
865 | cancellationReason: z.string().optional(),
866 | });
867 |
868 | export const ScheduleAppointmentSchema = z.object({
869 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
870 | schedule: z.coerce.date(),
871 | reason: z.string().optional(),
872 | note: z.string().optional(),
873 | cancellationReason: z.string().optional(),
874 | });
875 |
876 | export const CancelAppointmentSchema = z.object({
877 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
878 | schedule: z.coerce.date(),
879 | reason: z.string().optional(),
880 | note: z.string().optional(),
881 | cancellationReason: z
882 | .string()
883 | .min(2, "Reason must be at least 2 characters")
884 | .max(500, "Reason must be at most 500 characters"),
885 | });
886 |
887 | export function getAppointmentSchema(type: string) {
888 | switch (type) {
889 | case "create":
890 | return CreateAppointmentSchema;
891 | case "cancel":
892 | return CancelAppointmentSchema;
893 | default:
894 | return ScheduleAppointmentSchema;
895 | }
896 | }
897 | ```
898 |
899 |
900 |
901 | lib/validation.ts
777 |
778 | ```typescript
779 | import { z } from "zod";
780 |
781 | export const UserFormValidation = z.object({
782 | name: z
783 | .string()
784 | .min(2, "Name must be at least 2 characters")
785 | .max(50, "Name must be at most 50 characters"),
786 | email: z.string().email("Invalid email address"),
787 | phone: z
788 | .string()
789 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
790 | });
791 |
792 | export const PatientFormValidation = z.object({
793 | name: z
794 | .string()
795 | .min(2, "Name must be at least 2 characters")
796 | .max(50, "Name must be at most 50 characters"),
797 | email: z.string().email("Invalid email address"),
798 | phone: z
799 | .string()
800 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
801 | birthDate: z.coerce.date(),
802 | gender: z.enum(["Male", "Female", "Other"]),
803 | address: z
804 | .string()
805 | .min(5, "Address must be at least 5 characters")
806 | .max(500, "Address must be at most 500 characters"),
807 | occupation: z
808 | .string()
809 | .min(2, "Occupation must be at least 2 characters")
810 | .max(500, "Occupation must be at most 500 characters"),
811 | emergencyContactName: z
812 | .string()
813 | .min(2, "Contact name must be at least 2 characters")
814 | .max(50, "Contact name must be at most 50 characters"),
815 | emergencyContactNumber: z
816 | .string()
817 | .refine(
818 | (emergencyContactNumber) => /^\+\d{10,15}$/.test(emergencyContactNumber),
819 | "Invalid phone number"
820 | ),
821 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
822 | insuranceProvider: z
823 | .string()
824 | .min(2, "Insurance name must be at least 2 characters")
825 | .max(50, "Insurance name must be at most 50 characters"),
826 | insurancePolicyNumber: z
827 | .string()
828 | .min(2, "Policy number must be at least 2 characters")
829 | .max(50, "Policy number must be at most 50 characters"),
830 | allergies: z.string().optional(),
831 | currentMedication: z.string().optional(),
832 | familyMedicalHistory: z.string().optional(),
833 | pastMedicalHistory: z.string().optional(),
834 | identificationType: z.string().optional(),
835 | identificationNumber: z.string().optional(),
836 | identificationDocument: z.custom
902 |
903 |
904 | ```typescript
905 | export const GenderOptions = ["Male", "Female", "Other"];
906 |
907 | export const PatientFormDefaultValues = {
908 | firstName: "",
909 | lastName: "",
910 | email: "",
911 | phone: "",
912 | birthDate: new Date(Date.now()),
913 | gender: "Male" as Gender,
914 | address: "",
915 | occupation: "",
916 | emergencyContactName: "",
917 | emergencyContactNumber: "",
918 | primaryPhysician: "",
919 | insuranceProvider: "",
920 | insurancePolicyNumber: "",
921 | allergies: "",
922 | currentMedication: "",
923 | familyMedicalHistory: "",
924 | pastMedicalHistory: "",
925 | identificationType: "Birth Certificate",
926 | identificationNumber: "",
927 | identificationDocument: [],
928 | treatmentConsent: false,
929 | disclosureConsent: false,
930 | privacyConsent: false,
931 | };
932 |
933 | export const IdentificationTypes = [
934 | "Birth Certificate",
935 | "Driver's License",
936 | "Medical Insurance Card/Policy",
937 | "Military ID Card",
938 | "National Identity Card",
939 | "Passport",
940 | "Resident Alien Card (Green Card)",
941 | "Social Security Card",
942 | "State ID Card",
943 | "Student ID Card",
944 | "Voter ID Card",
945 | ];
946 |
947 | export const Doctors = [
948 | {
949 | image: "/assets/images/dr-green.png",
950 | name: "John Green",
951 | },
952 | {
953 | image: "/assets/images/dr-cameron.png",
954 | name: "Leila Cameron",
955 | },
956 | {
957 | image: "/assets/images/dr-livingston.png",
958 | name: "David Livingston",
959 | },
960 | {
961 | image: "/assets/images/dr-peter.png",
962 | name: "Evan Peter",
963 | },
964 | {
965 | image: "/assets/images/dr-powell.png",
966 | name: "Jane Powell",
967 | },
968 | {
969 | image: "/assets/images/dr-remirez.png",
970 | name: "Alex Ramirez",
971 | },
972 | {
973 | image: "/assets/images/dr-lee.png",
974 | name: "Jasmine Lee",
975 | },
976 | {
977 | image: "/assets/images/dr-cruz.png",
978 | name: "Alyana Cruz",
979 | },
980 | {
981 | image: "/assets/images/dr-sharma.png",
982 | name: "Hardik Sharma",
983 | },
984 | ];
985 |
986 | export const StatusIcon = {
987 | scheduled: "/assets/icons/check.svg",
988 | pending: "/assets/icons/pending.svg",
989 | cancelled: "/assets/icons/cancelled.svg",
990 | };
991 | ```
992 |
993 |
994 |
995 | ## 🔗 Assets
996 |
997 | Public assets used in the project can be found [here](https://drive.google.com/file/d/1yGvWFeSaH1_-aiQ1gejT23lqz5979RKB/view?usp=sharing)
998 |
999 | ## 🚀 More
1000 |
1001 | **Advance your skills with Next.js 14 Pro Course**
1002 |
1003 | Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
1004 |
1005 |
1006 | constants/index.ts
903 |
904 | ```typescript
905 | export const GenderOptions = ["Male", "Female", "Other"];
906 |
907 | export const PatientFormDefaultValues = {
908 | firstName: "",
909 | lastName: "",
910 | email: "",
911 | phone: "",
912 | birthDate: new Date(Date.now()),
913 | gender: "Male" as Gender,
914 | address: "",
915 | occupation: "",
916 | emergencyContactName: "",
917 | emergencyContactNumber: "",
918 | primaryPhysician: "",
919 | insuranceProvider: "",
920 | insurancePolicyNumber: "",
921 | allergies: "",
922 | currentMedication: "",
923 | familyMedicalHistory: "",
924 | pastMedicalHistory: "",
925 | identificationType: "Birth Certificate",
926 | identificationNumber: "",
927 | identificationDocument: [],
928 | treatmentConsent: false,
929 | disclosureConsent: false,
930 | privacyConsent: false,
931 | };
932 |
933 | export const IdentificationTypes = [
934 | "Birth Certificate",
935 | "Driver's License",
936 | "Medical Insurance Card/Policy",
937 | "Military ID Card",
938 | "National Identity Card",
939 | "Passport",
940 | "Resident Alien Card (Green Card)",
941 | "Social Security Card",
942 | "State ID Card",
943 | "Student ID Card",
944 | "Voter ID Card",
945 | ];
946 |
947 | export const Doctors = [
948 | {
949 | image: "/assets/images/dr-green.png",
950 | name: "John Green",
951 | },
952 | {
953 | image: "/assets/images/dr-cameron.png",
954 | name: "Leila Cameron",
955 | },
956 | {
957 | image: "/assets/images/dr-livingston.png",
958 | name: "David Livingston",
959 | },
960 | {
961 | image: "/assets/images/dr-peter.png",
962 | name: "Evan Peter",
963 | },
964 | {
965 | image: "/assets/images/dr-powell.png",
966 | name: "Jane Powell",
967 | },
968 | {
969 | image: "/assets/images/dr-remirez.png",
970 | name: "Alex Ramirez",
971 | },
972 | {
973 | image: "/assets/images/dr-lee.png",
974 | name: "Jasmine Lee",
975 | },
976 | {
977 | image: "/assets/images/dr-cruz.png",
978 | name: "Alyana Cruz",
979 | },
980 | {
981 | image: "/assets/images/dr-sharma.png",
982 | name: "Hardik Sharma",
983 | },
984 | ];
985 |
986 | export const StatusIcon = {
987 | scheduled: "/assets/icons/check.svg",
988 | pending: "/assets/icons/pending.svg",
989 | cancelled: "/assets/icons/cancelled.svg",
990 | };
991 | ```
992 |
993 | 1010 |
1011 | 1012 | **Accelerate your professional journey with the Expert Training program** 1013 | 1014 | And if you're hungry for more than just a course and want to understand how we learn and tackle tech challenges, hop into our personalized masterclass. We cover best practices, different web skills, and offer mentorship to boost your confidence. Let's learn and grow together! 1015 | 1016 | 1017 |