rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-03 19:40:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add prettier and reformat project

Browse Source
This commit is contained in:
pmoharana-cmd 2024-04-23 09:42:15 -04:00
parent 3fd0a545e7
commit f2765ecb47
45 changed files with 6157 additions and 5172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
compass/.eslintrc.json
View File

@ -1,3 +1,3 @@
{
"extends": "next/core-web-vitals"
}
{
"extends": "next/core-web-vitals"
}

6
compass/.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": false
}

72
compass/README.md
View File

@ -1,36 +1,36 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [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.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
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.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [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.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
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.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

26
compass/app/auth/actions.ts Normal file
View File

@ -0,0 +1,26 @@
"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { createClient } from "@/utils/supabase/server";
export async function login(username: string, password: string) {
const supabase = createClient();
// type-casting here for convenience
// in practice, you should validate your inputs
const data = {
email: username,
password: password,
};
const { error } = await supabase.auth.signInWithPassword(data);
if (error) {
redirect("/auth/error");
}
revalidatePath("/resource", "layout");
redirect("/resource");
}

3
compass/app/auth/error/page.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function ErrorPage() {
return <p>Sorry, something went wrong</p>;
}

61
compass/app/auth/forgot_password/page.tsx
View File

@ -1,25 +1,23 @@
// pages/forgot-password.tsx
"use client";
import React, { useState } from 'react';
import Input from '@/components/Input';
import Button from '@/components/Button';
import InlineLink from '@/components/InlineLink';
import ErrorBanner from '@/components/auth/ErrorBanner';
import React, { useState } from "react";
import Input from "@/components/Input";
import Button from "@/components/Button";
import InlineLink from "@/components/InlineLink";
import ErrorBanner from "@/components/auth/ErrorBanner";
export default function ForgotPasswordPage() {
const [confirmEmail, setConfirmEmail] = useState("");
const [emailError, setEmailError] = useState<string | null>(null);
function isValidEmail(email: string): boolean {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email.trim() === '') {
setEmailError('Email cannot be empty');
if (email.trim() === "") {
setEmailError("Email cannot be empty");
return false;
} else if (!emailRegex.test(email)) {
setEmailError('Invalid email format');
setEmailError("Invalid email format");
return false;
}
return true; // No error
@ -27,31 +25,30 @@ export default function ForgotPasswordPage() {
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
isValidEmail(confirmEmail);
event.preventDefault();
}
};
return (
<>
<h1 className="font-bold text-xl text-purple-800">Forgot Password</h1>
<div className="mb-6">
<Input
type='email'
valid={emailError == null}
title="Enter your email address"
placeholder="janedoe@gmail.com"
value={confirmEmail}
onChange={(e) => setConfirmEmail(e.target.value)}
/>
</div>
{emailError && <ErrorBanner heading={emailError} />}
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/auth/login">
Back to Sign In
</InlineLink>
<Button type="submit" onClick={handleClick}>
Send
</Button>
</div>
<h1 className="font-bold text-xl text-purple-800">
Forgot Password
</h1>
<div className="mb-6">
<Input
type="email"
valid={emailError == null}
title="Enter your email address"
placeholder="janedoe@gmail.com"
value={confirmEmail}
onChange={(e) => setConfirmEmail(e.target.value)}
/>
</div>
{emailError && <ErrorBanner heading={emailError} />}
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/auth/login">Back to Sign In</InlineLink>
<Button type="submit" onClick={handleClick}>
Send
</Button>
</div>
</>
);
}

34
compass/app/auth/layout.tsx
View File

@ -1,22 +1,20 @@
import Paper from '@/components/auth/Paper';
import Paper from "@/components/auth/Paper";
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<Paper>
<form className="mb-0 m-auto mt-6 space-y-4 border border-gray-200 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
{children}
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
)
}
return (
<Paper>
<form className="mb-0 m-auto mt-6 space-y-4 border border-gray-200 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
{children}
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
);
}

90
compass/app/auth/login/page.tsx
View File

@ -1,13 +1,13 @@
// pages/index.tsx
"use client";
import Button from '@/components/Button';
import Input from '@/components/Input'
import InlineLink from '@/components/InlineLink';
import Image from 'next/image';
import Button from "@/components/Button";
import Input from "@/components/Input";
import InlineLink from "@/components/InlineLink";
import Image from "next/image";
import { useState } from "react";
import PasswordInput from '@/components/auth/PasswordInput';
import ErrorBanner from '@/components/auth/ErrorBanner';
import PasswordInput from "@/components/auth/PasswordInput";
import ErrorBanner from "@/components/auth/ErrorBanner";
export default function Page() {
const [email, setEmail] = useState("");
@ -17,65 +17,71 @@ export default function Page() {
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.currentTarget.value);
}
};
const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handlePasswordChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setPassword(event.currentTarget.value);
}
};
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
// Priority: Incorrect combo > Missing email > Missing password
if (password.trim().length === 0) {
setEmailError("Please enter your password.")
setEmailError("Please enter your password.");
event.preventDefault();
}
// This shouldn't happen, <input type="email"> already provides validation, but just in case.
if (email.trim().length === 0) {
setPasswordError("Please enter your email.")
setPasswordError("Please enter your email.");
event.preventDefault();
}
// Placeholder for incorrect email + password combo.
if (email === "incorrect@gmail.com" && password) {
setPasswordError("Incorrect password.")
setPasswordError("Incorrect password.");
event.preventDefault();
}
}
};
return (
<>
<Image
src="/logo.png"
alt='Compass Center logo.'
width={100}
height={91}
/>
<Image
src="/logo.png"
alt="Compass Center logo."
width={100}
height={91}
/>
<h1 className='font-bold text-2xl text-purple-800'>Login</h1>
<h1 className="font-bold text-2xl text-purple-800">Login</h1>
<div className="mb-6">
<Input type='email' valid={emailError == ""} title="Email" placeholder="janedoe@gmail.com" onChange={handleEmailChange} required />
</div>
{emailError && <ErrorBanner heading={emailError} />}
<div className="mb-6">
<PasswordInput title="Password" valid={passwordError == ""} onChange={handlePasswordChange} />
</div>
{passwordError && <ErrorBanner heading={passwordError} />}
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/auth/forgot_password">
Forgot password?
</InlineLink>
<Button onClick={handleClick}>
Login
</Button>
</div>
<div className="mb-6">
<Input
type="email"
valid={emailError == ""}
title="Email"
placeholder="janedoe@gmail.com"
onChange={handleEmailChange}
required
/>
</div>
{emailError && <ErrorBanner heading={emailError} />}
<div className="mb-6">
<PasswordInput
title="Password"
valid={passwordError == ""}
onChange={handlePasswordChange}
/>
</div>
{passwordError && <ErrorBanner heading={passwordError} />}
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/auth/forgot_password">
Forgot password?
</InlineLink>
<Button onClick={handleClick}>Login</Button>
</div>
</>
);
};
}

121
compass/app/auth/new_password/page.tsx
View File

@ -1,62 +1,79 @@
// pages/index.tsx
"use client";
import { useState, useEffect } from 'react';
import Button from '@/components/Button';
import PasswordInput from '@/components/auth/PasswordInput';
import ErrorBanner from '@/components/auth/ErrorBanner';
import { useState, useEffect } from "react";
import Button from "@/components/Button";
import PasswordInput from "@/components/auth/PasswordInput";
import ErrorBanner from "@/components/auth/ErrorBanner";
function isStrongPassword(password: string): boolean {
const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
return strongPasswordRegex.test(password);
const strongPasswordRegex =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
return strongPasswordRegex.test(password);
}
export default function Page() {
const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
useEffect(() => {
setIsButtonDisabled(newPassword === '' || confirmPassword === '' || newPassword !== confirmPassword|| !isStrongPassword(newPassword));
}, [newPassword, confirmPassword]);
useEffect(() => {
setIsButtonDisabled(
newPassword === "" ||
confirmPassword === "" ||
newPassword !== confirmPassword ||
!isStrongPassword(newPassword)
);
}, [newPassword, confirmPassword]);
return (
<>
<div className="text-center sm:text-left">
<h1 className="font-bold text-xl text-purple-800">New Password</h1>
</div>
<div className="mb-4">
<PasswordInput
title="Enter New Password"
value={newPassword}
valid={!isButtonDisabled || isStrongPassword(newPassword)}
onChange={(e) => {
setNewPassword(e.target.value);
}}
/>
</div>
{isStrongPassword(newPassword) || newPassword === '' ? null : <ErrorBanner heading="Password is not strong enough." description="Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters!" />}
<div className="mb-6">
<PasswordInput
title="Confirm Password"
value={confirmPassword}
valid={!isButtonDisabled || (newPassword === confirmPassword && confirmPassword !== '')}
onChange={(e) => {
setConfirmPassword(e.target.value);
}}
/>
</div>
{newPassword === confirmPassword || confirmPassword === '' ? null : <ErrorBanner heading="Passwords do not match." description="Please make sure both passwords are the exact same!"/>}
<div className="flex flex-col items-left space-y-4">
<Button type="submit" disabled={isButtonDisabled} >
Send
</Button>
</div>
</>
);
return (
<>
<div className="text-center sm:text-left">
<h1 className="font-bold text-xl text-purple-800">
New Password
</h1>
</div>
<div className="mb-4">
<PasswordInput
title="Enter New Password"
value={newPassword}
valid={!isButtonDisabled || isStrongPassword(newPassword)}
onChange={(e) => {
setNewPassword(e.target.value);
}}
/>
</div>
{isStrongPassword(newPassword) || newPassword === "" ? null : (
<ErrorBanner
heading="Password is not strong enough."
description="Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters!"
/>
)}
<div className="mb-6">
<PasswordInput
title="Confirm Password"
value={confirmPassword}
valid={
!isButtonDisabled ||
(newPassword === confirmPassword &&
confirmPassword !== "")
}
onChange={(e) => {
setConfirmPassword(e.target.value);
}}
/>
</div>
{newPassword === confirmPassword ||
confirmPassword === "" ? null : (
<ErrorBanner
heading="Passwords do not match."
description="Please make sure both passwords are the exact same!"
/>
)}
<div className="flex flex-col items-left space-y-4">
<Button type="submit" disabled={isButtonDisabled}>
Send
</Button>
</div>
</>
);
}

31
compass/app/layout.tsx
View File

@ -1,16 +1,15 @@
import '../styles/globals.css';
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
import "../styles/globals.css";
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

147
compass/app/page.tsx
View File

@ -14,80 +14,87 @@ import { ChangeEvent, useState } from "react";
// }
export default function Page() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const testFetch = () => {
const result = fetch("/api/health");
console.log(result);
};
const testFetch = () => {
const result = fetch("/api/health");
console.log(result);
};
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.currentTarget.value);
console.log("email " + email);
};
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.currentTarget.value);
console.log("email " + email);
};
const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setPassword(event.currentTarget.value);
console.log("password " + password);
};
const handlePasswordChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setPassword(event.currentTarget.value);
console.log("password " + password);
};
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
// Priority: Incorrect combo > Missing email > Missing password
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
// Priority: Incorrect combo > Missing email > Missing password
if (password.trim().length === 0) {
setError("Please enter your password.");
}
// This shouldn't happen, <input type="email"> already provides validation, but just in case.
if (email.trim().length === 0) {
setError("Please enter your email.");
}
// Placeholder for incorrect email + password combo.
if (email === "incorrect@gmail.com" && password) {
setError("Incorrect password.");
}
};
if (password.trim().length === 0) {
setError("Please enter your password.");
}
// This shouldn't happen, <input type="email"> already provides validation, but just in case.
if (email.trim().length === 0) {
setError("Please enter your email.");
}
// Placeholder for incorrect email + password combo.
if (email === "incorrect@gmail.com" && password) {
setError("Incorrect password.");
}
};
return (
<>
<Paper>
<form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
<Image
src="/logo.png"
alt="Compass Center logo."
width={100}
height={91}
/>
<h1 className="font-bold text-xl text-purple-800">Login</h1>
<div className="mb-4">
<Input
type="email"
title="Email"
placeholder="janedoe@gmail.com"
onChange={handleEmailChange}
/>
</div>
<div className="mb-6">
<Input
type="password"
title="Password"
onChange={handlePasswordChange}
/>
</div>
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/forgot_password">Forgot password?</InlineLink>
<Button onClick={handleClick}>Login</Button>
<div className="text-center text-red-600" hidden={!error}>
<p>{error}</p>
</div>
</div>
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
</>
);
return (
<>
<Paper>
<form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
<Image
src="/logo.png"
alt="Compass Center logo."
width={100}
height={91}
/>
<h1 className="font-bold text-xl text-purple-800">Login</h1>
<div className="mb-4">
<Input
type="email"
title="Email"
placeholder="janedoe@gmail.com"
onChange={handleEmailChange}
/>
</div>
<div className="mb-6">
<Input
type="password"
title="Password"
onChange={handlePasswordChange}
/>
</div>
<div className="flex flex-col items-left space-y-4">
<InlineLink href="/forgot_password">
Forgot password?
</InlineLink>
<Button onClick={handleClick}>Login</Button>
<div
className="text-center text-red-600"
hidden={!error}
>
<p>{error}</p>
</div>
</div>
</form>
<p className="text-center mt-6 text-gray-500 text-xs">
&copy; 2024 Compass Center
</p>
</Paper>
</>
);
}

31
compass/app/resource/layout.tsx
View File

@ -1,14 +1,13 @@
"use client"
"use client";
import Sidebar from '@/components/resource/Sidebar';
import React, { useState } from 'react';
import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
import Sidebar from "@/components/resource/Sidebar";
import React, { useState } from "react";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
export default function RootLayout({
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@ -18,20 +17,26 @@ export default function RootLayout({
<button
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
aria-label={'Open sidebar'}
aria-label={"Open sidebar"}
>
{!isSidebarOpen &&
<ChevronDoubleRightIcon className="h-5 w-5" /> // Icon for closing the sidebar
{
!isSidebarOpen && (
<ChevronDoubleRightIcon className="h-5 w-5" />
) // Icon for closing the sidebar
}
</button>
{/* sidebar */}
<div className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} w-64 transition duration-300 ease-in-out`}>
<div
className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"} w-64 transition duration-300 ease-in-out`}
>
<Sidebar setIsSidebarOpen={setIsSidebarOpen} />
</div>
{/* page ui */}
<div className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? 'ml-64' : 'ml-0'}`}>
<div
className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? "ml-64" : "ml-0"}`}
>
{children}
</div>
</div>
)
}
);
}

31
compass/app/resource/page.tsx
View File

@ -1,9 +1,13 @@
"use client"
"use client";
import Callout from "@/components/resource/Callout";
import Card from "@/components/resource/Card";
import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
import { BookOpenIcon, BookmarkIcon, ClipboardIcon } from "@heroicons/react/24/solid";
import Image from 'next/image';
import {
BookOpenIcon,
BookmarkIcon,
ClipboardIcon,
} from "@heroicons/react/24/solid";
import Image from "next/image";
export default function Page() {
return (
@ -13,15 +17,26 @@ export default function Page() {
<div className="mb-4 flex items-center space-x-4">
<Image
src="/logo.png"
alt='Compass Center logo.'
alt="Compass Center logo."
width={25}
height={25}
/>
<h1 className='font-bold text-2xl text-purple-800'>Compass Center Advocate Landing Page</h1>
<h1 className="font-bold text-2xl text-purple-800">
Compass Center Advocate Landing Page
</h1>
</div>
<Callout>
Welcome! Below you will find a list of resources for the Compass Center's trained advocates. These materials serve to virtually provide a collection of advocacy, resource, and hotline manuals and information.
<b> If you are an advocate looking for the contact information of a particular Compass Center employee, please directly contact your staff back-up or the person in charge of your training.</b>
Welcome! Below you will find a list of resources for the
Compass Center's trained advocates. These materials serve to
virtually provide a collection of advocacy, resource, and
hotline manuals and information.
<b>
{" "}
If you are an advocate looking for the contact
information of a particular Compass Center employee,
please directly contact your staff back-up or the person
in charge of your training.
</b>
</Callout>
</div>
<div className="p-8 flex-grow border-t border-gray-200 bg-gray-50">
@ -35,5 +50,5 @@ export default function Page() {
<LandingSearchBar />
</div>
</div>
)
);
}

12
compass/components/Button.tsx
View File

@ -1,4 +1,4 @@
import { FunctionComponent, ReactNode } from 'react';
import { FunctionComponent, ReactNode } from "react";
type ButtonProps = {
children: ReactNode;
@ -7,9 +7,13 @@ type ButtonProps = {
disabled?: boolean;
};
const Button: FunctionComponent<ButtonProps> = ({ children, type, disabled, onClick}) => {
const buttonClassName = `inline-block rounded border ${disabled ? 'bg-gray-400 text-gray-600 cursor-not-allowed' : 'border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500'} px-4 py-1 text-md font-semibold w-20 h-10 text-center`;
const Button: FunctionComponent<ButtonProps> = ({
children,
type,
disabled,
onClick,
}) => {
const buttonClassName = `inline-block rounded border ${disabled ? "bg-gray-400 text-gray-600 cursor-not-allowed" : "border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500"} px-4 py-1 text-md font-semibold w-20 h-10 text-center`;
return (
<button

19
compass/components/InlineLink.tsx
View File

@ -1,16 +1,19 @@
import React, { ReactNode } from 'react';
import React, { ReactNode } from "react";
interface Link {
href?: string;
children: ReactNode;
href?: string;
children: ReactNode;
}
const InlineLink: React.FC<Link> = ({href = '#', children}) => {
const InlineLink: React.FC<Link> = ({ href = "#", children }) => {
return (
<a href={href} className='text-sm text-purple-600 hover:underline font-semibold'>
<a
href={href}
className="text-sm text-purple-600 hover:underline font-semibold"
>
{children}
</a>
)
}
);
};
export default InlineLink;
export default InlineLink;

94
compass/components/Input.tsx
View File

@ -1,37 +1,57 @@
import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
icon?: ReactNode;
title?: ReactNode;
type?:ReactNode;
placeholder?:ReactNode
valid?:boolean;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
};
const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid = true, ...rest }) => {
return (
<div>
<label
htmlFor={title}
className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
>
<span className="text-xs font-semibold text-gray-700"> {title} </span>
<div className="mt-1 flex items-center">
<input
type={type}
id={title}
placeholder={placeholder}
onChange={onChange}
className="w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
/>
<span className="inline-flex items-center px-3 text-gray-500">
{icon}
</span>
</div>
</label>
</div>
);
};
export default Input;
import React, {
FunctionComponent,
InputHTMLAttributes,
ReactNode,
ChangeEvent,
} from "react";
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
icon?: ReactNode;
title?: ReactNode;
type?: ReactNode;
placeholder?: ReactNode;
valid?: boolean;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
};
const Input: FunctionComponent<InputProps> = ({
icon,
type,
title,
placeholder,
onChange,
valid = true,
...rest
}) => {
return (
<div>
<label
htmlFor={title}
className={
valid
? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
: "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"
}
>
<span className="text-xs font-semibold text-gray-700">
{" "}
{title}{" "}
</span>
<div className="mt-1 flex items-center">
<input
type={type}
id={title}
placeholder={placeholder}
onChange={onChange}
className="w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
/>
<span className="inline-flex items-center px-3 text-gray-500">
{icon}
</span>
</div>
</label>
</div>
);
};
export default Input;

24
compass/components/auth/ErrorBanner.tsx
View File

@ -1,17 +1,27 @@
import React from 'react';
import React from "react";
interface ErrorBannerProps {
heading: string;
description?: string | null;
}
const ErrorBanner: React.FC<ErrorBannerProps> = ({ heading, description = null }) => {
const ErrorBanner: React.FC<ErrorBannerProps> = ({
heading,
description = null,
}) => {
return (
<div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
<strong className="block text-sm font-semibold text-red-800">{heading}</strong>
{description && <p className="mt-2 text-xs font-thin text-red-700">
{description}
</p>}
<div
role="alert"
className="rounded border-s-4 border-red-500 bg-red-50 p-4"
>
<strong className="block text-sm font-semibold text-red-800">
{heading}
</strong>
{description && (
<p className="mt-2 text-xs font-thin text-red-700">
{description}
</p>
)}
</div>
);
};

4
compass/components/auth/Paper.tsx
View File

@ -1,4 +1,4 @@
import React, { ReactNode } from 'react';
import React, { ReactNode } from "react";
interface PageInterface {
children: ReactNode;
@ -12,4 +12,4 @@ const Paper: React.FC<PageInterface> = ({ children }) => {
);
};
export default Paper;
export default Paper;

61
compass/components/auth/PasswordInput.tsx
View File

@ -1,35 +1,46 @@
import React, { useState, FunctionComponent, ChangeEvent, ReactNode } from 'react';
import Input from '../Input'; // Adjust the import path as necessary
import { Icons } from '@/utils/constants';
import React, {
useState,
FunctionComponent,
ChangeEvent,
ReactNode,
} from "react";
import Input from "../Input"; // Adjust the import path as necessary
import { Icons } from "@/utils/constants";
type PasswordInputProps = {
title?: ReactNode; // Assuming you might want to reuse title, placeholder etc.
placeholder?: ReactNode;
valid?: boolean;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
title?: ReactNode; // Assuming you might want to reuse title, placeholder etc.
placeholder?: ReactNode;
valid?: boolean;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
};
const PasswordInput: FunctionComponent<PasswordInputProps> = ({ onChange, valid = true, ...rest }) => {
const [visible, setVisible] = useState(false);
const PasswordInput: FunctionComponent<PasswordInputProps> = ({
onChange,
valid = true,
...rest
}) => {
const [visible, setVisible] = useState(false);
const toggleVisibility = () => {
setVisible(!visible);
};
const toggleVisibility = () => {
setVisible(!visible);
};
const PasswordIcon = visible ? Icons['HidePasswordIcon'] : Icons['UnhidePasswordIcon'];
const PasswordIcon = visible
? Icons["HidePasswordIcon"]
: Icons["UnhidePasswordIcon"];
// Render the Input component and pass the PasswordIcon as an icon prop
return (
<Input
{...rest}
type={visible ? "text" : "password"}
onChange={onChange}
valid={valid}
icon={
<PasswordIcon className="h-5 w-5" onClick={toggleVisibility} />
}
/>
);
// Render the Input component and pass the PasswordIcon as an icon prop
return (
<Input
{...rest}
type={visible ? "text" : "password"}
onChange={onChange}
valid={valid}
icon={
<PasswordIcon className="h-5 w-5" onClick={toggleVisibility} />
}
/>
);
};
export default PasswordInput;

14
compass/components/resource/Callout.tsx
View File

@ -1,15 +1,15 @@
import { ReactNode } from "react";
interface CalloutProps {
children: ReactNode;
children: ReactNode;
}
const Callout = ({ children }: CalloutProps) => {
return (
<div className="p-4 mb-4 flex items-center bg-purple-50 rounded-sm">
<span className="text-sm text-gray-800">{children}</span>
</div>
);
return (
<div className="p-4 mb-4 flex items-center bg-purple-50 rounded-sm">
<span className="text-sm text-gray-800">{children}</span>
</div>
);
};
export default Callout;
export default Callout;

21
compass/components/resource/Card.tsx
View File

@ -1,20 +1,17 @@
import React, { ReactNode } from "react";
interface TagProps {
text: string;
icon: React.ReactNode;
text: string;
icon: React.ReactNode;
}
const Card: React.FC<TagProps> = ({ text, icon }) => {
return (
<div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white hover:bg-gray-50 shadow rounded-md p-4">
<span className="h-5 text-purple-700 w-5">
{icon}
</span>
<span className="text-sm text-gray-800 font-semibold">{text}</span>
</div>
);
return (
<div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white hover:bg-gray-50 shadow rounded-md p-4">
<span className="h-5 text-purple-700 w-5">{icon}</span>
<span className="text-sm text-gray-800 font-semibold">{text}</span>
</div>
);
};
export default Card;
export default Card;

94
compass/components/resource/LandingSearchBar.tsx
View File

@ -1,48 +1,60 @@
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
import React, { useState } from 'react';
import Image from 'next/image';
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid";
import React, { useState } from "react";
import Image from "next/image";
export const LandingSearchBar: React.FC = () => {
const [searchTerm, setSearchTerm] = useState('');
const [searchTerm, setSearchTerm] = useState("");
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value);
};
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value);
};
const clearSearch = () => {
setSearchTerm('');
};
const clearSearch = () => {
setSearchTerm("");
};
return (
<div className="max-w mx-auto">
{/* searchbar */}
<div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
<div className="flex-grow">
<input
className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
type="text"
placeholder="Search..."
value={searchTerm}
onChange={handleSearchChange}
/>
return (
<div className="max-w mx-auto">
{/* searchbar */}
<div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
<div className="flex-grow">
<input
className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
type="text"
placeholder="Search..."
value={searchTerm}
onChange={handleSearchChange}
/>
</div>
{/* input */}
{searchTerm && (
<button onClick={clearSearch}>
<XMarkIcon
className="h-5 w-5 text-gray-500"
aria-hidden="true"
/>
</button>
)}
<div className="p-3">
<MagnifyingGlassIcon
className="h-5 w-5 text-gray-500"
aria-hidden="true"
/>
</div>
</div>
{/* search results, for now since it's empty this is the default screen */}
<div className="flex flex-col pt-16 space-y-2 justify-center items-center">
<Image
alt="Landing illustration"
src="/landing_illustration.png"
width={250}
height={250}
/>
<h2 className="font-medium text-medium text-gray-800">
Need to find something? Use the links or the search bar
above to get your results.
</h2>
</div>
</div>
{/* input */}
{searchTerm && (
<button
onClick={clearSearch}
>
<XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</button>
)}
<div className="p-3">
<MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div>
</div>
{/* search results, for now since it's empty this is the default screen */}
<div className="flex flex-col pt-16 space-y-2 justify-center items-center">
<Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
<h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links or the search bar above to get your results.</h2>
</div>
</div>
);
);
};

84
compass/components/resource/Sidebar.tsx
View File

@ -1,46 +1,54 @@
import React from 'react';
import { HomeIcon, ChevronDoubleLeftIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
import { SidebarItem } from './SidebarItem';
import { UserProfile } from './UserProfile';
import React from "react";
import {
HomeIcon,
ChevronDoubleLeftIcon,
BookmarkIcon,
ClipboardIcon,
BookOpenIcon,
} from "@heroicons/react/24/solid";
import { SidebarItem } from "./SidebarItem";
import { UserProfile } from "./UserProfile";
interface SidebarProps {
setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
return (
<div className="w-64 h-full border border-gray-200 bg-gray-50 px-4">
{/* button to close sidebar */}
<div className="flex justify-end">
<button
onClick={() => setIsSidebarOpen(false)}
className="py-2 text-gray-500 hover:text-gray-800"
aria-label="Close sidebar"
>
<ChevronDoubleLeftIcon className="h-5 w-5" />
</button>
</div>
<div className="flex flex-col space-y-8">
{/* user + logout button */}
<div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
<UserProfile />
return (
<div className="w-64 h-full border border-gray-200 bg-gray-50 px-4">
{/* button to close sidebar */}
<div className="flex justify-end">
<button
onClick={() => setIsSidebarOpen(false)}
className="py-2 text-gray-500 hover:text-gray-800"
aria-label="Close sidebar"
>
<ChevronDoubleLeftIcon className="h-5 w-5" />
</button>
</div>
<div className="flex flex-col space-y-8">
{/* user + logout button */}
<div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
<UserProfile />
</div>
{/* navigation menu */}
<div className="flex flex-col space-y-2">
<h4 className="text-xs font-semibold text-gray-500">
Pages
</h4>
<nav className="flex flex-col">
<SidebarItem icon={<HomeIcon />} text="Home" />
<SidebarItem icon={<BookmarkIcon />} text="Resources" />
<SidebarItem icon={<ClipboardIcon />} text="Services" />
<SidebarItem
icon={<BookOpenIcon />}
text="Training Manuals"
/>
</nav>
</div>
</div>
</div>
{/* navigation menu */}
<div className="flex flex-col space-y-2">
<h4 className="text-xs font-semibold text-gray-500">Pages</h4>
<nav className="flex flex-col">
<SidebarItem icon={<HomeIcon />} text="Home" />
<SidebarItem icon={<BookmarkIcon />} text="Resources" />
<SidebarItem icon={<ClipboardIcon />} text="Services" />
<SidebarItem icon={<BookOpenIcon />} text="Training Manuals" />
</nav>
</div>
</div>
</div>
);
);
};
export default Sidebar;
export default Sidebar;

26
compass/components/resource/SidebarItem.tsx
View File

@ -1,16 +1,18 @@
interface SidebarItemProps {
icon: React.ReactElement;
text: string;
icon: React.ReactElement;
text: string;
}
export const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
return (
<a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
<span className="h-5 text-gray-500 w-5">
{icon}
</span>
<span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
</a>
);
};
return (
<a
href="#"
className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md"
>
<span className="h-5 text-gray-500 w-5">{icon}</span>
<span className="flex-grow font-medium text-xs text-gray-500">
{text}
</span>
</a>
);
};

18
compass/components/resource/UserProfile.tsx
View File

@ -1,11 +1,15 @@
export const UserProfile = () => {
return (
<div className="flex flex-col items-start space-y-2">
<div className="flex flex-col">
<span className="text-sm font-semibold text-gray-800">Compass Center</span>
<span className="text-xs text-gray-500">cssgunc@gmail.com</span>
<div className="flex flex-col">
<span className="text-sm font-semibold text-gray-800">
Compass Center
</span>
<span className="text-xs text-gray-500">cssgunc@gmail.com</span>
</div>
<button className="text-red-600 font-semibold text-xs hover:underline mt-1">
Sign out
</button>
</div>
<button className="text-red-600 font-semibold text-xs hover:underline mt-1">Sign out</button>
</div>
)
}
);
};

8
compass/next.config.js
View File

@ -1,8 +1,8 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['notioly.com']
},
}
domains: ["notioly.com"],
},
};
module.exports = nextConfig
module.exports = nextConfig;

9484
compass/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

71
compass/package.json
View File

@ -1,28 +1,43 @@
{
"name": "compass",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "^2.1.1",
"next": "13.5.6",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10",
"eslint": "^8",
"eslint-config-next": "13.5.6",
"postcss": "^8",
"tailwindcss": "^3",
"typescript": "^5"
}
}
{
"name": "compass",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
},
"dependencies": {
"@heroicons/react": "^2.1.1",
"@supabase/ssr": "^0.3.0",
"@supabase/supabase-js": "^2.42.3",
"next": "13.5.6",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10",
"eslint": "^8",
"eslint-config-next": "13.5.6",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"postcss": "^8",
"tailwindcss": "^3",
"typescript": "^5"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
}
}

12
compass/postcss.config.js
View File

@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

45
compass/styles/globals.css
View File

@ -1,8 +1,7 @@
/* globals.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
:root {
/* Colors */
@ -11,7 +10,8 @@
--ring-opacity: 0.5;
/* Shadows */
--shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-focus: 0 0 0 3px rgba(66, 153, 225, 0.5);
/* Borders */
@ -31,66 +31,65 @@
/* A shade of gray */
}
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 400;
src: url('/fonts/Inter-Regular.ttf') format('truetype');
src: url("/fonts/Inter-Regular.ttf") format("truetype");
}
/* Inter-Bold */
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 700;
src: url('/fonts/Inter-Bold.ttf') format('truetype');
src: url("/fonts/Inter-Bold.ttf") format("truetype");
}
/* Inter-Black */
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 900;
src: url('/fonts/Inter-Black.ttf') format('truetype');
src: url("/fonts/Inter-Black.ttf") format("truetype");
}
/* Inter-ExtraBold */
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 800;
src: url('/fonts/Inter-ExtraBold.ttf') format('truetype');
src: url("/fonts/Inter-ExtraBold.ttf") format("truetype");
}
/* Inter-ExtraLight */
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 200;
src: url('/fonts/Inter-ExtraLight.ttf') format('truetype');
src: url("/fonts/Inter-ExtraLight.ttf") format("truetype");
}
/* Inter-Medium */
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 500;
src: url('/fonts/Inter-Medium.ttf') format('truetype');
src: url("/fonts/Inter-Medium.ttf") format("truetype");
}
/* Inter-SemiBold */
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 600;
src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
src: url("/fonts/Inter-SemiBold.ttf") format("truetype");
}
/* Inter-Thin */
@font-face {
font-family: 'Inter';
font-family: "Inter";
font-style: normal;
font-weight: 100;
src: url('/fonts/Inter-Thin.ttf') format('truetype');
}
src: url("/fonts/Inter-Thin.ttf") format("truetype");
}

41
compass/tailwind.config.ts
View File

@ -1,26 +1,27 @@
import type { Config } from 'tailwindcss';
import type { Config } from "tailwindcss";
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
fontFamily: {
'sans': ['Inter', 'sans-serif'], // Add 'Inter' to the fontFamily theme
},
fontWeight: {
'medium': 500, // Ensure medium is correctly set to 500
}
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
fontFamily: {
sans: ["Inter", "sans-serif"], // Add 'Inter' to the fontFamily theme
},
fontWeight: {
medium: 500, // Ensure medium is correctly set to 500
},
},
},
},
plugins: [],
plugins: [],
};
export default config;

50
compass/tsconfig.json
View File

@ -1,27 +1,27 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

31
compass/utils/classes/CollectionImpl.tsx
View File

@ -1,16 +1,15 @@
class CollectionImpl {
title: string;
icon: any;
data: any;
constructor(title: string, icon: any) {
this.title = title;
this.icon = icon;
}
// subject to change
setData(data: any){
this.data = data;
}
}
class CollectionImpl {
title: string;
icon: any;
data: any;
constructor(title: string, icon: any) {
this.title = title;
this.icon = icon;
}
// subject to change
setData(data: any) {
this.data = data;
}
}

18
compass/utils/classes/Field.ts
View File

@ -1,15 +1,15 @@
import { Icons } from "../constants";
export class Field {
iconKey: keyof typeof Icons;
title: string;
iconKey: keyof typeof Icons;
title: string;
constructor(iconKey: keyof typeof Icons, title: string) {
this.iconKey = iconKey;
this.title = title;
}
constructor(iconKey: keyof typeof Icons, title: string) {
this.iconKey = iconKey;
this.title = title;
}
validateInput(value: any): boolean {
return value !== null;
}
validateInput(value: any): boolean {
return value !== null;
}
}

69
compass/utils/constants.ts
View File

@ -1,49 +1,68 @@
import { ListBulletIcon, HashtagIcon, Bars3BottomLeftIcon, EnvelopeIcon, AtSymbolIcon, ClipboardIcon, ArrowsUpDownIcon, ChevronDoubleRightIcon, ChevronDoubleLeftIcon, ChevronRightIcon, ChevronLeftIcon, EyeIcon, EyeSlashIcon, UserIcon, BookOpenIcon, MagnifyingGlassIcon, LinkIcon, ClipboardDocumentCheckIcon } from '@heroicons/react/24/solid';
import {
ListBulletIcon,
HashtagIcon,
Bars3BottomLeftIcon,
EnvelopeIcon,
AtSymbolIcon,
ClipboardIcon,
ArrowsUpDownIcon,
ChevronDoubleRightIcon,
ChevronDoubleLeftIcon,
ChevronRightIcon,
ChevronLeftIcon,
EyeIcon,
EyeSlashIcon,
UserIcon,
BookOpenIcon,
MagnifyingGlassIcon,
LinkIcon,
ClipboardDocumentCheckIcon,
} from "@heroicons/react/24/solid";
export const Icons = {
EmailInputIcon: EnvelopeIcon,
HidePasswordIcon: EyeSlashIcon,
UnhidePasswordIcon: EyeIcon,
UserIcon: UserIcon,
ResourceIcon: BookOpenIcon,
SearchIcon: MagnifyingGlassIcon,
ServiceIcon: ClipboardIcon,
CloseRightArrow: ChevronDoubleRightIcon,
CloseLeftArrow: ChevronDoubleLeftIcon,
LinkRightArrow:ChevronRightIcon,
LinkLeftArrow:ChevronLeftIcon,
SortIcon: ArrowsUpDownIcon,
EmailTableIcon:AtSymbolIcon,
LinkTableIcon: LinkIcon,
TextTableIcon: Bars3BottomLeftIcon,
NumberTableIcon: HashtagIcon,
MultiselectTableIcon: ListBulletIcon,
RequirementsTableIcon: ClipboardDocumentCheckIcon
EmailInputIcon: EnvelopeIcon,
HidePasswordIcon: EyeSlashIcon,
UnhidePasswordIcon: EyeIcon,
UserIcon: UserIcon,
ResourceIcon: BookOpenIcon,
SearchIcon: MagnifyingGlassIcon,
ServiceIcon: ClipboardIcon,
CloseRightArrow: ChevronDoubleRightIcon,
CloseLeftArrow: ChevronDoubleLeftIcon,
LinkRightArrow: ChevronRightIcon,
LinkLeftArrow: ChevronLeftIcon,
SortIcon: ArrowsUpDownIcon,
EmailTableIcon: AtSymbolIcon,
LinkTableIcon: LinkIcon,
TextTableIcon: Bars3BottomLeftIcon,
NumberTableIcon: HashtagIcon,
MultiselectTableIcon: ListBulletIcon,
RequirementsTableIcon: ClipboardDocumentCheckIcon,
};
export enum USER {
ADMIN,
EMPLOYEE,
VOLUNTEER
VOLUNTEER,
}
export enum COLLECTION {
RESOURCE,
SERVICE,
USER,
TRAINING_MANUAL
TRAINING_MANUAL,
}
export enum PROGRAM {
DOMESTIC_VIOLENCE,
ECONOMIC_STABILITY,
COMMUNITY_EDUCATION
COMMUNITY_EDUCATION,
}
export enum STATUS {
FULL,
CLOSED,
ACCEPTING_CLIENTS
ACCEPTING_CLIENTS,
}
export enum DATATYPE {
@ -52,7 +71,5 @@ export enum DATATYPE {
LINK,
EMAIL,
MULTISELECT,
SELECT
SELECT,
}

194
compass/utils/functions/mockFetch.ts
View File

@ -2,136 +2,142 @@ import { PROGRAM, STATUS, USER } from "../constants";
const serviceEntries = [
{
name: "Empowerment Workshops",
status: [STATUS.ACCEPTING_CLIENTS],
summary: "Workshops to empower victims through education and skill-building.",
requirements: "Resident of the community and victim of domestic violence.",
program: [PROGRAM.DOMESTIC_VIOLENCE, PROGRAM.COMMUNITY_EDUCATION],
tags: ["empowerment", "education"],
name: "Empowerment Workshops",
status: [STATUS.ACCEPTING_CLIENTS],
summary:
"Workshops to empower victims through education and skill-building.",
requirements:
"Resident of the community and victim of domestic violence.",
program: [PROGRAM.DOMESTIC_VIOLENCE, PROGRAM.COMMUNITY_EDUCATION],
tags: ["empowerment", "education"],
},
{
name: "Financial Literacy Courses",
status: [STATUS.ACCEPTING_CLIENTS, STATUS.FULL],
summary: "Courses aimed at improving financial independence for victims.",
requirements: "Open to all domestic violence victims.",
program: [PROGRAM.ECONOMIC_STABILITY],
tags: ["finance", "literacy"],
name: "Financial Literacy Courses",
status: [STATUS.ACCEPTING_CLIENTS, STATUS.FULL],
summary:
"Courses aimed at improving financial independence for victims.",
requirements: "Open to all domestic violence victims.",
program: [PROGRAM.ECONOMIC_STABILITY],
tags: ["finance", "literacy"],
},
{
name: "Counseling Services",
status: [STATUS.ACCEPTING_CLIENTS],
summary: "Professional counseling for individuals and families affected by domestic violence.",
requirements: "Appointment required.",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["counseling", "mental health"],
name: "Counseling Services",
status: [STATUS.ACCEPTING_CLIENTS],
summary:
"Professional counseling for individuals and families affected by domestic violence.",
requirements: "Appointment required.",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["counseling", "mental health"],
},
{
name: "Job Placement Program",
status: [STATUS.ACCEPTING_CLIENTS],
summary: "Assistance with job search and placement for survivors.",
requirements: "Must be actively seeking employment.",
program: [PROGRAM.ECONOMIC_STABILITY],
tags: ["job", "employment"],
name: "Job Placement Program",
status: [STATUS.ACCEPTING_CLIENTS],
summary: "Assistance with job search and placement for survivors.",
requirements: "Must be actively seeking employment.",
program: [PROGRAM.ECONOMIC_STABILITY],
tags: ["job", "employment"],
},
{
name: "Legal Advocacy",
status: [STATUS.FULL],
summary: "Legal advice and representation for victims of domestic violence.",
requirements: "Legal documentation of domestic violence required.",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["legal", "advocacy"],
}
];
name: "Legal Advocacy",
status: [STATUS.FULL],
summary:
"Legal advice and representation for victims of domestic violence.",
requirements: "Legal documentation of domestic violence required.",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["legal", "advocacy"],
},
];
const resourceEntries = [
{
name: "Legal Aid Reference",
summary: "Comprehensive list of legal resources for victims.",
link: "https://legalaid.example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["legal", "aid"],
name: "Legal Aid Reference",
summary: "Comprehensive list of legal resources for victims.",
link: "https://legalaid.example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["legal", "aid"],
},
{
name: "Shelter Locations",
summary: "Directory of safe shelters for victims escaping abuse.",
link: "https://shelters.example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["shelter", "safety"],
name: "Shelter Locations",
summary: "Directory of safe shelters for victims escaping abuse.",
link: "https://shelters.example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
tags: ["shelter", "safety"],
},
{
name: "Support Group Finder",
summary: "Find local support groups for survivors of domestic violence.",
link: "https://supportgroups.example.com",
program: [PROGRAM.COMMUNITY_EDUCATION],
tags: ["support", "community"],
name: "Support Group Finder",
summary:
"Find local support groups for survivors of domestic violence.",
link: "https://supportgroups.example.com",
program: [PROGRAM.COMMUNITY_EDUCATION],
tags: ["support", "community"],
},
{
name: "Employment Services",
summary: "Resources for job training and placement services.",
link: "https://employment.example.com",
program: [PROGRAM.ECONOMIC_STABILITY],
tags: ["job", "training"],
name: "Employment Services",
summary: "Resources for job training and placement services.",
link: "https://employment.example.com",
program: [PROGRAM.ECONOMIC_STABILITY],
tags: ["job", "training"],
},
{
name: "Educational Workshops",
summary: "Schedule of educational workshops on various topics.",
link: "https://workshops.example.com",
program: [PROGRAM.COMMUNITY_EDUCATION],
tags: ["education", "workshops"],
}
];
name: "Educational Workshops",
summary: "Schedule of educational workshops on various topics.",
link: "https://workshops.example.com",
program: [PROGRAM.COMMUNITY_EDUCATION],
tags: ["education", "workshops"],
},
];
const userEntries = [
{
name: "Alex Johnson",
role: [USER.VOLUNTEER],
email: "alex.johnson@example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
experience: 2,
group: "Volunteer Group A",
name: "Alex Johnson",
role: [USER.VOLUNTEER],
email: "alex.johnson@example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
experience: 2,
group: "Volunteer Group A",
},
{
name: "Sam Lee",
role: [USER.EMPLOYEE],
email: "sam.lee@example.com",
program: [PROGRAM.ECONOMIC_STABILITY],
experience: 5,
group: "Economic Support Team",
name: "Sam Lee",
role: [USER.EMPLOYEE],
email: "sam.lee@example.com",
program: [PROGRAM.ECONOMIC_STABILITY],
experience: 5,
group: "Economic Support Team",
},
{
name: "Jordan Smith",
role: [USER.ADMIN, USER.VOLUNTEER],
email: "jordan.smith@example.com",
program: [PROGRAM.COMMUNITY_EDUCATION, PROGRAM.DOMESTIC_VIOLENCE],
experience: 3,
group: "Outreach and Education",
name: "Jordan Smith",
role: [USER.ADMIN, USER.VOLUNTEER],
email: "jordan.smith@example.com",
program: [PROGRAM.COMMUNITY_EDUCATION, PROGRAM.DOMESTIC_VIOLENCE],
experience: 3,
group: "Outreach and Education",
},
{
name: "Casey Martinez",
role: [USER.VOLUNTEER],
email: "casey.martinez@example.com",
program: [PROGRAM.ECONOMIC_STABILITY],
experience: 1,
group: "Financial Literacy Volunteers",
name: "Casey Martinez",
role: [USER.VOLUNTEER],
email: "casey.martinez@example.com",
program: [PROGRAM.ECONOMIC_STABILITY],
experience: 1,
group: "Financial Literacy Volunteers",
},
{
name: "Jamie Chung",
role: [USER.EMPLOYEE],
email: "jamie.chung@example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
experience: 4,
group: "Counseling Services Team",
}
];
name: "Jamie Chung",
role: [USER.EMPLOYEE],
email: "jamie.chung@example.com",
program: [PROGRAM.DOMESTIC_VIOLENCE],
experience: 4,
group: "Counseling Services Team",
},
];
export const mockFetchServices = () => {
return serviceEntries;
}
};
export const mockFetchResources = () => {
return resourceEntries;
}
};
export const mockFetchUsers = () => {
return userEntries;
}
};

13
compass/utils/implementations/CollectionDataImpl.ts
View File

@ -15,19 +15,21 @@ export class CollectionDataImpl {
for (const header of this.headers) {
const value = row[header.title];
if (!header.validateInput(value)) {
console.error(`Validation failed for ${header.title} with value ${value}`);
console.error(
`Validation failed for ${header.title} with value ${value}`
);
isValidRow = false;
break;
break;
}
}
if (isValidRow) {
this.rows.push(row);
} else {
console.log('Row not added due to validation failure.');
console.log("Row not added due to validation failure.");
}
}
getRows(): Record<string, any>[] {
return this.rows;
}
@ -35,5 +37,4 @@ export class CollectionDataImpl {
getHeaders(): Field[] {
return this.headers;
}
}
}

4
compass/utils/implementations/CollectionImpl.ts
View File

@ -10,6 +10,4 @@ export class CollectionImpl {
this.icon = icon;
this.data = data;
}
}
}

11
compass/utils/implementations/FieldImpl/EmailFieldImpl.ts
View File

@ -1,18 +1,15 @@
import { Field } from "@/utils/classes/Field";
export class EmailFieldImpl extends Field {
constructor() {
super('EmailTableIcon', "Email");
super("EmailTableIcon", "Email");
}
validateInput(value: any) : boolean {
if (typeof value !== 'string') {
validateInput(value: any): boolean {
if (typeof value !== "string") {
return false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(value);
}
}
}

9
compass/utils/implementations/FieldImpl/IntegerFieldImpl.ts
View File

@ -1,15 +1,12 @@
import { Icons } from "@/utils/constants";
import { Field } from "@/utils/classes/Field";
export class IntegerFieldImpl extends Field {
constructor(title: string) {
super('NumberTableIcon', title);
super("NumberTableIcon", title);
}
validateInput(value: any) : boolean {
validateInput(value: any): boolean {
return Number.isInteger(value);
}
}
}

14
compass/utils/implementations/FieldImpl/LinkFieldImpl.ts
View File

@ -1,18 +1,16 @@
import { Field } from "@/utils/classes/Field";
export class LinkFieldImpl extends Field {
constructor() {
super('LinkTableIcon', "Link");
super("LinkTableIcon", "Link");
}
validateInput(value: any) : boolean {
if (typeof value !== 'string') {
validateInput(value: any): boolean {
if (typeof value !== "string") {
return false;
}
const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
const urlRegex =
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
return urlRegex.test(value);
}
}
}

15
compass/utils/implementations/FieldImpl/MultiselectFieldImpl.ts
View File

@ -1,19 +1,17 @@
import { Field } from "@/utils/classes/Field";
export class MultiselectFieldImpl extends Field {
tags: Set<any>;
selectedTags: Set<any>;
constructor(title: string, tags: Set<any> = new Set()) {
super('MultiselectTableIcon', title);
this.tags = tags
super("MultiselectTableIcon", title);
this.tags = tags;
this.selectedTags = new Set();
}
getTags() {
return this.tags
return this.tags;
}
addTag(tag: any) {
@ -21,7 +19,7 @@ export class MultiselectFieldImpl extends Field {
}
removeTag(tag: any) {
if (this.tags.has(tag)){
if (this.tags.has(tag)) {
this.tags.delete(tag);
}
}
@ -31,9 +29,8 @@ export class MultiselectFieldImpl extends Field {
}
removeSelectedTag(tag: any) {
if (this.selectedTags.has(tag)){
if (this.selectedTags.has(tag)) {
this.selectedTags.delete(tag);
}
}
}
}

9
compass/utils/implementations/FieldImpl/StringFieldImpl.ts
View File

@ -1,15 +1,12 @@
import { Icons } from "@/utils/constants";
import { Field } from "@/utils/classes/Field";
export class StringFieldImpl extends Field {
constructor(title: string, iconKey: keyof typeof Icons = "TextTableIcon") {
super(iconKey, title);
}
validateInput(value: any) : boolean {
return typeof value === 'string';
validateInput(value: any): boolean {
return typeof value === "string";
}
}
}

46
compass/utils/models/Collection.ts
View File

@ -1,15 +1,43 @@
import { mockFetchResources, mockFetchServices, mockFetchUsers } from "../functions/mockFetch";
import {
mockFetchResources,
mockFetchServices,
mockFetchUsers,
} from "../functions/mockFetch";
import { CollectionDataImpl } from "../implementations/CollectionDataImpl";
import { CollectionImpl } from "../implementations/CollectionImpl";
import { ResourceCollectionDataType, ServiceCollectionDataType, UserCollectionDataType } from "./CollectionDataType";
import {
ResourceCollectionDataType,
ServiceCollectionDataType,
UserCollectionDataType,
} from "./CollectionDataType";
const ServiceCollectionData = new CollectionDataImpl(ServiceCollectionDataType, mockFetchServices());
const ResourceCollectionData = new CollectionDataImpl(ResourceCollectionDataType, mockFetchResources());
const UserCollectionData = new CollectionDataImpl(UserCollectionDataType, mockFetchUsers());
const ServiceCollectionData = new CollectionDataImpl(
ServiceCollectionDataType,
mockFetchServices()
);
const ResourceCollectionData = new CollectionDataImpl(
ResourceCollectionDataType,
mockFetchResources()
);
const UserCollectionData = new CollectionDataImpl(
UserCollectionDataType,
mockFetchUsers()
);
export const ServiceCollection = new CollectionImpl('Service','ServiceIcon',new CollectionDataImpl(ServiceCollectionDataType))
export const ServiceCollection = new CollectionImpl(
"Service",
"ServiceIcon",
new CollectionDataImpl(ServiceCollectionDataType)
);
export const ResourceCollection = new CollectionImpl('Resource','ResourceIcon',new CollectionDataImpl(ResourceCollectionDataType))
export const UserCollection = new CollectionImpl('User','UserIcon',new CollectionDataImpl(UserCollectionDataType))
export const ResourceCollection = new CollectionImpl(
"Resource",
"ResourceIcon",
new CollectionDataImpl(ResourceCollectionDataType)
);
export const UserCollection = new CollectionImpl(
"User",
"UserIcon",
new CollectionDataImpl(UserCollectionDataType)
);

55
compass/utils/models/CollectionDataType.ts
View File

@ -6,21 +6,52 @@ import { LinkFieldImpl } from "../implementations/FieldImpl/LinkFieldImpl";
import { MultiselectFieldImpl } from "../implementations/FieldImpl/MultiselectFieldImpl";
import { StringFieldImpl } from "../implementations/FieldImpl/StringFieldImpl";
const programSet: Set<PROGRAM> = new Set([PROGRAM.COMMUNITY_EDUCATION, PROGRAM.DOMESTIC_VIOLENCE, PROGRAM.ECONOMIC_STABILITY]);
const programSet: Set<PROGRAM> = new Set([
PROGRAM.COMMUNITY_EDUCATION,
PROGRAM.DOMESTIC_VIOLENCE,
PROGRAM.ECONOMIC_STABILITY,
]);
const program = new MultiselectFieldImpl("program", programSet);
const requirements = new StringFieldImpl("requirements","RequirementsTableIcon");
const requirements = new StringFieldImpl(
"requirements",
"RequirementsTableIcon"
);
const name = new StringFieldImpl("name");
const summary = new StringFieldImpl("summary");
const statusSet: Set<STATUS> = new Set([STATUS.ACCEPTING_CLIENTS, STATUS.CLOSED, STATUS.FULL])
const statusSet: Set<STATUS> = new Set([
STATUS.ACCEPTING_CLIENTS,
STATUS.CLOSED,
STATUS.FULL,
]);
const status = new MultiselectFieldImpl("status", statusSet);
const link = new LinkFieldImpl()
const tags = new MultiselectFieldImpl("tags")
const link = new LinkFieldImpl();
const tags = new MultiselectFieldImpl("tags");
const roleSet: Set<USER> = new Set([USER.ADMIN, USER.EMPLOYEE, USER.VOLUNTEER]);
const role = new MultiselectFieldImpl("role", roleSet)
const experience = new IntegerFieldImpl("yoe")
const email = new EmailFieldImpl()
const group = new StringFieldImpl("group")
const role = new MultiselectFieldImpl("role", roleSet);
const experience = new IntegerFieldImpl("yoe");
const email = new EmailFieldImpl();
const group = new StringFieldImpl("group");
export const ServiceCollectionDataType: Field[] = [name, status, summary, requirements, program, tags]
export const ResourceCollectionDataType: Field[] = [name, summary, link, program, tags]
export const UserCollectionDataType: Field[] = [name, role, email, program, experience, group]
export const ServiceCollectionDataType: Field[] = [
name,
status,
summary,
requirements,
program,
tags,
];
export const ResourceCollectionDataType: Field[] = [
name,
summary,
link,
program,
tags,
];
export const UserCollectionDataType: Field[] = [
name,
role,
email,
program,
experience,
group,
];