├── amplify
    ├── package.json
    ├── backend.ts
    ├── auth
    │   └── resource.ts
    ├── tsconfig.json
    └── data
    │   └── resource.ts
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── app.css
    │   ├── login
    │   │   └── page.tsx
    │   ├── dashboard
    │   │   ├── page.tsx
    │   │   └── setup
    │   │   │   └── page.tsx
    │   ├── _actions
    │   │   └── actions.ts
    │   ├── page.module.css
    │   └── page.tsx
    ├── components
    │   ├── SubmitButton.tsx
    │   ├── ConfigureAmplify.tsx
    │   ├── Logout.tsx
    │   ├── CardItem.tsx
    │   ├── RightColumn.tsx
    │   ├── Navbar.tsx
    │   ├── BarChartComponent.tsx
    │   ├── ScoreList.tsx
    │   ├── LeftColumn.tsx
    │   ├── TableComponent.tsx
    │   ├── SavingsModal.tsx
    │   ├── Sidebar.tsx
    │   ├── ExpenseModal.tsx
    │   ├── SalesItem.tsx
    │   └── WebAnalytics.tsx
    ├── utils
    │   ├── utils.ts
    │   └── amplify-utils.ts
    └── middleware.ts
├── postcss.config.js
├── next.config.js
├── next-env.d.ts
├── CODE_OF_CONDUCT.md
├── amplify.yml
├── .gitignore
├── tsconfig.json
├── LICENSE
├── package.json
├── public
    ├── amplify.svg
    └── next.svg
├── README.md
├── CONTRIBUTING.md
└── tailwind.config.ts


/amplify/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "type": "module"
3 | }


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TRamos5/spotme-app/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | 	experimental: {
4 | 		serverActions: true,
5 | 	},
6 | };
7 | 
8 | module.exports = nextConfig;
9 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | * {
 6 | 	scroll-behavior: smooth;
 7 | }
 8 | 
 9 | body {
10 | 	background-color: #1e293b;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/SubmitButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | import { Button } from "@aws-amplify/ui-react";
4 | 
5 | export default function SubmitButton() {
6 | 	return <Button type="submit">Submit</Button>;
7 | }
8 | 


--------------------------------------------------------------------------------
/amplify/backend.ts:
--------------------------------------------------------------------------------
1 | import { defineBackend } from "@aws-amplify/backend";
2 | import { auth } from "./auth/resource.js";
3 | import { data } from "./data/resource.js";
4 | 
5 | defineBackend({
6 | 	auth,
7 | 	data,
8 | });
9 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/src/components/ConfigureAmplify.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Amplify } from "aws-amplify";
 4 | 
 5 | import outputs from "@/amplify_outputs.json";
 6 | 
 7 | Amplify.configure(outputs, { ssr: true });
 8 | 
 9 | export default function ConfigureAmplifyClientSide() {
10 | 	return null;
11 | }
12 | 


--------------------------------------------------------------------------------
/amplify/auth/resource.ts:
--------------------------------------------------------------------------------
 1 | import { defineAuth } from "@aws-amplify/backend";
 2 | 
 3 | /**
 4 |  * Define and configure your auth resource
 5 |  * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 6 |  */
 7 | export const auth = defineAuth({
 8 | 	loginWith: {
 9 | 		email: true,
10 | 	},
11 | });
12 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | ## Code of Conduct
2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
4 | opensource-codeofconduct@amazon.com with any additional questions or comments.
5 | 


--------------------------------------------------------------------------------
/amplify/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2022",
 4 |     "module": "es2022",
 5 |     "moduleResolution": "bundler",
 6 |     "resolveJsonModule": true,
 7 |     "esModuleInterop": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "strict": true,
10 |     "skipLibCheck": true,
11 |     "paths": {
12 |       "$amplify/*": [
13 |         "../.amplify/generated/*"
14 |       ]
15 |     }
16 |   }
17 | }


--------------------------------------------------------------------------------
/src/utils/utils.ts:
--------------------------------------------------------------------------------
 1 | export const dataFormatter = (number: number) => {
 2 | 	return "$ " + Intl.NumberFormat("us").format(number).toString();
 3 | };
 4 | 
 5 | export const months = [
 6 | 	"January",
 7 | 	"February",
 8 | 	"March",
 9 | 	"April",
10 | 	"May",
11 | 	"June",
12 | 	"July",
13 | 	"August",
14 | 	"September",
15 | 	"October",
16 | 	"November",
17 | 	"December",
18 | ];
19 | 
20 | export const getCurrentMonth = () => {
21 | 	const d = new Date();
22 | 	return months[d.getMonth()];
23 | };
24 | 


--------------------------------------------------------------------------------
/amplify.yml:
--------------------------------------------------------------------------------
 1 | version: 1
 2 | backend:
 3 |   phases:
 4 |     build:
 5 |       commands:
 6 |         - npm ci --cache .npm --prefer-offline
 7 |         - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
 8 | frontend:
 9 |   phases:
10 |     build:
11 |       commands:
12 |         - npm run build
13 |   artifacts:
14 |     baseDirectory: .next
15 |     files:
16 |       - '**/*'
17 |   cache:
18 |     paths:
19 |       - .next/cache/**/*
20 |       - .npm/**/*
21 |       - node_modules/**/*


--------------------------------------------------------------------------------
/src/components/Logout.tsx:
--------------------------------------------------------------------------------
 1 | // components/Logout.tsx
 2 | 
 3 | "use client";
 4 | 
 5 | import { signOut } from "aws-amplify/auth";
 6 | import { useRouter } from "next/navigation";
 7 | import { Button } from "@aws-amplify/ui-react";
 8 | 
 9 | export default function Logout() {
10 | 	const router = useRouter();
11 | 
12 | 	return (
13 | 		<Button
14 | 			variation="primary"
15 | 			onClick={async () => {
16 | 				await signOut();
17 | 				router.push("/login");
18 | 			}}
19 | 			className="px-2 bg-white text-black"
20 | 		>
21 | 			Sign out
22 | 		</Button>
23 | 	);
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/CardItem.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Card, Metric, Text, Flex, BadgeDelta } from "@tremor/react";
 4 | 
 5 | export default function CardItem({
 6 | 	name,
 7 | 	amount,
 8 | }: {
 9 | 	name: string;
10 | 	amount: string;
11 | }) {
12 | 	return (
13 | 		<Card className="w-xs" decoration="top" decorationColor="indigo">
14 | 			<Flex justifyContent="between" alignItems="center">
15 | 				<Text>{name}</Text>
16 | 				{/* <BadgeDelta deltaType="moderateIncrease">+12.5%</BadgeDelta> */}
17 | 			</Flex>
18 | 			<Metric>{amount}</Metric>
19 | 		</Card>
20 | 	);
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/RightColumn.tsx:
--------------------------------------------------------------------------------
 1 | import SalesItem from "./SalesItem";
 2 | import WebAnalytics from "./WebAnalytics";
 3 | import ScoreList from "./ScoreList";
 4 | import { getCurrentMonth } from "../utils/utils";
 5 | import type { Schema } from "@/amplify/data/resource";
 6 | 
 7 | type Expenses = Schema["Expenses"]["type"];
 8 | 
 9 | export default function RightColumn({ expenses }: { expenses: Expenses[] }) {
10 | 	return (
11 | 		<div className="w-full p-2">
12 | 			<SalesItem expenses={expenses} month={getCurrentMonth()} />
13 | 			{/* <WebAnalytics /> */}
14 | 			{/* <ScoreList /> */}
15 | 		</div>
16 | 	);
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { TextInput } from "@tremor/react";
 4 | import { WifiIcon } from "@heroicons/react/20/solid";
 5 | import Logout from "./Logout";
 6 | 
 7 | export default function Navbar({ username }: { username: string }) {
 8 | 	return (
 9 | 		<div
10 | 			id="top"
11 | 			className="relative w-full sm:flex justify-between items-center p-2"
12 | 		>
13 | 			<h1 className="font-bold text-gray-300">Welcome, {username}</h1>
14 | 			<div className="py-2">
15 | 				{/* <TextInput icon={WifiIcon} placeholder="Search..." /> */}
16 | 				<Logout />
17 | 			</div>
18 | 		</div>
19 | 	);
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | # amplify
39 | .amplify
40 | amplify_outputs*
41 | amplifyconfiguration*


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | import ConfigureAmplifyClientSide from "@/src/components/ConfigureAmplify";
 5 | 
 6 | const inter = Inter({ subsets: ["latin"] });
 7 | 
 8 | export const metadata: Metadata = {
 9 | 	title: "SpotMe",
10 | 	description: "Your personal finance tracker.",
11 | };
12 | 
13 | export default function RootLayout({
14 | 	children,
15 | }: {
16 | 	children: React.ReactNode;
17 | }) {
18 | 	return (
19 | 		<html lang="en">
20 | 			<body className={inter.className}>
21 | 				<ConfigureAmplifyClientSide />
22 | 				{children}
23 | 			</body>
24 | 		</html>
25 | 	);
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/BarChartComponent.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Card, Title, BarChart } from "@tremor/react";
 4 | import { dataFormatter } from "../utils/utils";
 5 | import type { Schema } from "@/amplify/data/resource";
 6 | 
 7 | type AmountSaved = Schema["AmountSaved"]["type"];
 8 | 
 9 | export default function BarChartComponent({
10 | 	amountToSave,
11 | 	amountSaved,
12 | }: {
13 | 	amountToSave: number;
14 | 	amountSaved: AmountSaved[];
15 | }) {
16 | 	return (
17 | 		<Card className="mt-4">
18 | 			<Title>Saved amount in 2024 (USD)</Title>
19 | 			<BarChart
20 | 				className="h-72 mt-4"
21 | 				data={amountSaved}
22 | 				index="month"
23 | 				categories={["amountSaved"]}
24 | 				colors={["indigo"]}
25 | 				valueFormatter={dataFormatter}
26 | 				maxValue={amountToSave}
27 | 			/>
28 | 		</Card>
29 | 	);
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/ScoreList.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Card, List, ListItem, Title } from "@tremor/react";
 4 | 
 5 | const cities = [
 6 | 	{
 7 | 		city: "Athens",
 8 | 		rating: "2 open PR",
 9 | 	},
10 | 	{
11 | 		city: "Luzern",
12 | 		rating: "1 open PR",
13 | 	},
14 | 	{
15 | 		city: "Zürich",
16 | 		rating: "0 open PR",
17 | 	},
18 | 	{
19 | 		city: "Vienna",
20 | 		rating: "1 open PR",
21 | 	},
22 | 	{
23 | 		city: "Ermatingen",
24 | 		rating: "0 open PR",
25 | 	},
26 | 	{
27 | 		city: "Lisbon",
28 | 		rating: "0 open PR",
29 | 	},
30 | ];
31 | 
32 | export default function ScoreList() {
33 | 	return (
34 | 		<Card className="max-w-full">
35 | 			<Title>Tremor's Hometowns</Title>
36 | 			<List>
37 | 				{cities.map((item) => (
38 | 					<ListItem key={item.city}>
39 | 						<span>{item.city}</span>
40 | 						<span>{item.rating}</span>
41 | 					</ListItem>
42 | 				))}
43 | 			</List>
44 | 		</Card>
45 | 	);
46 | }
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT No Attribution
 2 | 
 3 | Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so.
10 | 
11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
12 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
13 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
14 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
15 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
16 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
17 | 
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "spot-me",
 3 | 	"version": "0.1.0",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "next dev",
 7 | 		"build": "next build",
 8 | 		"start": "next start",
 9 | 		"lint": "next lint"
10 | 	},
11 | 	"dependencies": {
12 | 		"@aws-amplify/adapter-nextjs": "^1.1.8",
13 | 		"@aws-amplify/ui-react": "^6.1.11",
14 | 		"@headlessui/react": "^2.0.3",
15 | 		"@headlessui/tailwindcss": "^0.2.0",
16 | 		"@heroicons/react": "^2.1.3",
17 | 		"@remixicon/react": "^4.2.0",
18 | 		"@tremor/react": "^3.16.3",
19 | 		"aws-amplify": "^6.3.2",
20 | 		"next": "^14.2.3",
21 | 		"react": "^18.3.1",
22 | 		"react-dom": "^18.3.1"
23 | 	},
24 | 	"devDependencies": {
25 | 		"@aws-amplify/backend": "^1.0.0",
26 | 		"@aws-amplify/backend-cli": "^1.0.1",
27 | 		"@tailwindcss/forms": "^0.5.7",
28 | 		"@types/node": "^20",
29 | 		"@types/react": "^18.3.2",
30 | 		"@types/react-dom": "^18.3.0",
31 | 		"autoprefixer": "^10.4.19",
32 | 		"postcss": "^8.4.38",
33 | 		"tailwindcss": "^3.4.3",
34 | 		"typescript": "^5.3.2"
35 | 	}
36 | }
37 | 


--------------------------------------------------------------------------------
/public/amplify.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M14.3128 19.8395C14.3651 19.9299 14.4618 19.9856 14.5664 19.9856H16.8444C17.0698 19.9856 17.2107 19.742 17.098 19.5472L8.82308 5.24283C8.71037 5.048 8.4286 5.048 8.31589 5.24283L7.09981 7.34499C7.09518 7.35299 7.09518 7.36285 7.09981 7.37086L7.10128 7.37339C7.1106 7.38951 7.09894 7.40966 7.08029 7.40966C7.07163 7.40966 7.06363 7.41427 7.0593 7.42176L0.0396396 19.5617C-0.0730193 19.7565 0.0678714 20 0.293265 20H10.9633C11.1887 20 11.3296 19.7565 11.2169 19.5616L10.1254 17.6749C10.0731 17.5845 9.97646 17.5288 9.87184 17.5288H4.4145C4.3018 17.5288 4.23135 17.407 4.28771 17.3096L8.4417 10.1289C8.49805 10.0315 8.63894 10.0315 8.6953 10.1289L14.3128 19.8395Z" fill="#835BD9"/>
3 | <path d="M10.1282 2.10994C10.0759 2.20037 10.0759 2.31177 10.1282 2.40219L20.2155 19.8395C20.2678 19.9299 20.3645 19.9856 20.4691 19.9856H22.7412C22.9666 19.9856 23.1075 19.742 22.9948 19.5472L11.7715 0.146125C11.6588 -0.0487087 11.377 -0.0487083 11.2643 0.146126L10.1282 2.10994Z" fill="#835BD9"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/amplify/data/resource.ts:
--------------------------------------------------------------------------------
 1 | import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
 2 | 
 3 | const schema = a.schema({
 4 | 	SavingStrategy: a
 5 | 		.model({
 6 | 			savingsModel: a.string().required(),
 7 | 			monthlyIncome: a.float().required(),
 8 | 			amountToSave: a.float().required(),
 9 | 			yearlyIncome: a.float().required(),
10 | 		})
11 | 		.authorization((allow) => [allow.owner()]),
12 | 	Expenses: a
13 | 		.model({
14 | 			expenseName: a.string().required(),
15 | 			expenseAmount: a.float().required(),
16 | 			expenseCategory: a.string().required(),
17 | 			month: a.string().required(),
18 | 			year: a.string().required(),
19 | 		})
20 | 		.authorization((allow) => [allow.owner()]),
21 | 	AmountSaved: a
22 | 		.model({
23 | 			amountSaved: a.float().required(),
24 | 			month: a.string().required(),
25 | 			year: a.string().required(),
26 | 		})
27 | 		.authorization((allow) => [allow.owner()]),
28 | });
29 | 
30 | export type Schema = ClientSchema<typeof schema>;
31 | 
32 | export const data = defineData({
33 | 	schema,
34 | 	authorizationModes: {
35 | 		defaultAuthorizationMode: "userPool",
36 | 		apiKeyAuthorizationMode: {
37 | 			expiresInDays: 30,
38 | 		},
39 | 	},
40 | });
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## AWS Amplify Next.js (App Router) Starter Template
 2 | 
 3 | This repository provides a starter template for creating applications using Next.js (App Router) and AWS Amplify, emphasizing easy setup for authentication, API, and database capabilities.
 4 | 
 5 | ## Overview
 6 | 
 7 | This template equips you with a foundational Next.js application integrated with AWS Amplify, streamlined for scalability and performance. It is ideal for developers looking to jumpstart their project with pre-configured AWS services like Cognito, AppSync, and DynamoDB.
 8 | 
 9 | ## Features
10 | 
11 | - **Authentication**: Setup with Amazon Cognito for secure user authentication.
12 | - **API**: Ready-to-use GraphQL endpoint with AWS AppSync.
13 | - **Database**: Real-time database powered by Amazon DynamoDB.
14 | 
15 | ## Deploying to AWS
16 | 
17 | For detailed instructions on deploying your application, refer to the [deployment section](https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/#deploy-a-fullstack-app-to-aws) of our documentation.
18 | 
19 | ## Security
20 | 
21 | See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.
22 | 
23 | ## License
24 | 
25 | This library is licensed under the MIT-0 License. See the LICENSE file.


--------------------------------------------------------------------------------
/src/app/app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	margin: 0;
 3 | 	display: flex;
 4 | 	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 5 | 	height: 100vh;
 6 | 	width: 100vw;
 7 | 	justify-content: center;
 8 | 	align-items: center;
 9 | }
10 | 
11 | main {
12 | 	display: flex;
13 | 	flex-direction: column;
14 | 	align-items: stretch;
15 | }
16 | 
17 | button {
18 | 	border-radius: 8px;
19 | 	border: 1px solid transparent;
20 | 	padding: 0.6em 1.2em;
21 | 	font-size: 1em;
22 | 	font-weight: 500;
23 | 	font-family: inherit;
24 | 	background-color: #1a1a1a;
25 | 	cursor: pointer;
26 | 	transition: border-color 0.25s;
27 | 	color: white;
28 | }
29 | button:hover {
30 | 	border-color: #646cff;
31 | }
32 | button:focus,
33 | button:focus-visible {
34 | 	outline: 4px auto -webkit-focus-ring-color;
35 | }
36 | 
37 | ul {
38 | 	padding-inline-start: 0;
39 | 	margin-block-start: 0;
40 | 	margin-block-end: 0;
41 | 	list-style-type: none;
42 | 	display: flex;
43 | 	flex-direction: column;
44 | 	margin: 8px 0;
45 | 	border: 1px solid black;
46 | 	gap: 1px;
47 | 	background-color: black;
48 | 	border-radius: 8px;
49 | 	overflow: auto;
50 | }
51 | 
52 | li {
53 | 	background-color: white;
54 | 	padding: 8px;
55 | }
56 | 
57 | li:hover {
58 | 	background: #dadbf9;
59 | }
60 | 
61 | a {
62 | 	font-weight: 800;
63 | 	text-decoration: none;
64 | }
65 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/app/login/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import {
 4 | 	Authenticator,
 5 | 	Text,
 6 | 	View,
 7 | 	useAuthenticator,
 8 | } from "@aws-amplify/ui-react";
 9 | import { redirect } from "next/navigation";
10 | import { useEffect } from "react";
11 | import { signUp, SignUpInput } from "aws-amplify/auth";
12 | import "@aws-amplify/ui-react/styles.css";
13 | 
14 | function CustomAuthenticator() {
15 | 	const { user } = useAuthenticator((context) => [context.user]);
16 | 
17 | 	const services = {
18 | 		async handleSignUp(input: SignUpInput) {
19 | 			const { username, password } = input;
20 | 			return signUp({
21 | 				username,
22 | 				password,
23 | 				options: {
24 | 					...input.options,
25 | 					userAttributes: {
26 | 						...input.options?.userAttributes,
27 | 						"custom:isSetup": "0",
28 | 					},
29 | 				},
30 | 			});
31 | 		},
32 | 	};
33 | 
34 | 	useEffect(() => {
35 | 		if (user) {
36 | 			redirect("/dashboard");
37 | 		}
38 | 	}, [user]);
39 | 
40 | 	return (
41 | 		<div className="h-screen w-screen flex justify-center">
42 | 			<Authenticator
43 | 				services={services}
44 | 				signUpAttributes={["preferred_username"]}
45 | 			/>
46 | 		</div>
47 | 	);
48 | }
49 | 
50 | export default function LoginPage() {
51 | 	return (
52 | 		<Authenticator.Provider>
53 | 			<CustomAuthenticator />
54 | 		</Authenticator.Provider>
55 | 	);
56 | }
57 | 


--------------------------------------------------------------------------------
/src/utils/amplify-utils.ts:
--------------------------------------------------------------------------------
 1 | // utils/amplify-utils.ts
 2 | import { cookies } from "next/headers";
 3 | 
 4 | import { createServerRunner } from "@aws-amplify/adapter-nextjs";
 5 | import { generateServerClientUsingCookies } from "@aws-amplify/adapter-nextjs/api";
 6 | import { getCurrentUser, fetchUserAttributes } from "aws-amplify/auth/server";
 7 | 
 8 | import { type Schema } from "@/amplify/data/resource";
 9 | import outputs from "@/amplify_outputs.json";
10 | 
11 | export const { runWithAmplifyServerContext } = createServerRunner({
12 | 	config: outputs,
13 | });
14 | 
15 | export const cookiesClient = generateServerClientUsingCookies<Schema>({
16 | 	config: outputs,
17 | 	cookies,
18 | });
19 | 
20 | export async function AuthGetCurrentUserServer() {
21 | 	try {
22 | 		const currentUser = await runWithAmplifyServerContext({
23 | 			nextServerContext: { cookies },
24 | 			operation: (contextSpec) => getCurrentUser(contextSpec),
25 | 		});
26 | 		return currentUser;
27 | 	} catch (error) {
28 | 		console.error(error);
29 | 	}
30 | }
31 | 
32 | export async function AuthGetCurrentUserAttributesServer() {
33 | 	try {
34 | 		const currentUser = await runWithAmplifyServerContext({
35 | 			nextServerContext: { cookies },
36 | 			operation: (contextSpec) => fetchUserAttributes(contextSpec),
37 | 		});
38 | 		return currentUser;
39 | 	} catch (error) {
40 | 		console.error(error);
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/LeftColumn.tsx:
--------------------------------------------------------------------------------
 1 | import CardItem from "./CardItem";
 2 | import BarChartComponent from "./BarChartComponent";
 3 | import TableComponent from "./TableComponent";
 4 | import { dataFormatter, getCurrentMonth } from "../utils/utils";
 5 | import type { Schema } from "@/amplify/data/resource";
 6 | 
 7 | type SavingStrategy = Schema["SavingStrategy"]["type"];
 8 | type Expenses = Schema["Expenses"]["type"];
 9 | type AmountSaved = Schema["AmountSaved"]["type"];
10 | 
11 | export default function LeftColumn({
12 | 	savingStrategy,
13 | 	expenses,
14 | 	amountSaved,
15 | }: {
16 | 	savingStrategy: SavingStrategy[];
17 | 	expenses: Expenses[];
18 | 	amountSaved: AmountSaved[];
19 | }) {
20 | 	const strategy = savingStrategy[0];
21 | 	return (
22 | 		<div className="w-full flex flex-col justify-between p-2">
23 | 			<div className="flex flex-col lg:flex-row gap-2 w-full">
24 | 				<CardItem
25 | 					name={"Yearly Income"}
26 | 					amount={dataFormatter(strategy.yearlyIncome)}
27 | 				/>
28 | 				<CardItem
29 | 					name={"Monthly Income"}
30 | 					amount={dataFormatter(strategy.monthlyIncome)}
31 | 				/>
32 | 				<CardItem
33 | 					name={"Amount To Save Each Month"}
34 | 					amount={dataFormatter(strategy.amountToSave)}
35 | 				/>
36 | 			</div>
37 | 			<div className="flex-auto w-full">
38 | 				<BarChartComponent
39 | 					amountToSave={strategy.amountToSave}
40 | 					amountSaved={amountSaved}
41 | 				/>
42 | 				<TableComponent month={getCurrentMonth()} expenses={expenses} />
43 | 			</div>
44 | 		</div>
45 | 	);
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/TableComponent.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { CreditCardIcon } from "@heroicons/react/16/solid";
 4 | import {
 5 | 	Card,
 6 | 	Table,
 7 | 	TableHead,
 8 | 	TableRow,
 9 | 	TableHeaderCell,
10 | 	TableBody,
11 | 	TableCell,
12 | 	Text,
13 | 	Title,
14 | 	Badge,
15 | } from "@tremor/react";
16 | import type { Schema } from "@/amplify/data/resource";
17 | import { dataFormatter } from "../utils/utils";
18 | 
19 | type Expenses = Schema["Expenses"]["type"];
20 | 
21 | const TableComponent = ({
22 | 	expenses,
23 | 	month,
24 | }: {
25 | 	expenses: Expenses[];
26 | 	month: string;
27 | }) => {
28 | 	return (
29 | 		<Card className="mt-4">
30 | 			<Title>List of Expenses for {month}</Title>
31 | 			<Table className="mt-5">
32 | 				<TableHead>
33 | 					<TableRow>
34 | 						<TableHeaderCell>Name</TableHeaderCell>
35 | 						<TableHeaderCell>Amount</TableHeaderCell>
36 | 						<TableHeaderCell>Category</TableHeaderCell>
37 | 					</TableRow>
38 | 				</TableHead>
39 | 				<TableBody>
40 | 					{expenses.map((expense) => (
41 | 						<TableRow key={expense.expenseName}>
42 | 							<TableCell>{expense.expenseName}</TableCell>
43 | 							<TableCell>
44 | 								<Text>{dataFormatter(expense.expenseAmount)}</Text>
45 | 							</TableCell>
46 | 							<TableCell>
47 | 								<Badge color="red" icon={CreditCardIcon}>
48 | 									{expense.expenseCategory}
49 | 								</Badge>
50 | 							</TableCell>
51 | 						</TableRow>
52 | 					))}
53 | 				</TableBody>
54 | 			</Table>
55 | 		</Card>
56 | 	);
57 | };
58 | 
59 | export default TableComponent;
60 | 


--------------------------------------------------------------------------------
/src/app/dashboard/page.tsx:
--------------------------------------------------------------------------------
 1 | import "@aws-amplify/ui-react/styles.css";
 2 | import Sidebar from "@/src/components/Sidebar";
 3 | import Navbar from "@/src/components/Navbar";
 4 | import LeftColumn from "@/src/components/LeftColumn";
 5 | import RightColumn from "@/src/components/RightColumn";
 6 | import {
 7 | 	AuthGetCurrentUserAttributesServer,
 8 | 	cookiesClient,
 9 | } from "@/src/utils/amplify-utils";
10 | import { months, getCurrentMonth } from "@/src/utils/utils";
11 | 
12 | export default async function App() {
13 | 	const user = await AuthGetCurrentUserAttributesServer();
14 | 	const { data: expenses, errors: expensesErrors } =
15 | 		await cookiesClient.models.Expenses.list();
16 | 	const { data: savingStrategy, errors: savingStrategyErrors } =
17 | 		await cookiesClient.models.SavingStrategy.list();
18 | 	const { data: amountSaved, errors: amountSavedErros } =
19 | 		await cookiesClient.models.AmountSaved.list();
20 | 
21 | 	// Sort the amountSaved by month
22 | 	amountSaved.sort((a, b) => {
23 | 		const monthIndexA = months.indexOf(a.month);
24 | 		const monthIndexB = months.indexOf(b.month);
25 | 		return monthIndexA - monthIndexB;
26 | 	});
27 | 
28 | 	const currentMonth = getCurrentMonth();
29 | 	const filteredExpenses = expenses.filter((expense) => {
30 | 		return expense.month === currentMonth;
31 | 	});
32 | 
33 | 	return (
34 | 		<main className="flex">
35 | 			<Sidebar />
36 | 			<div className="flex flex-col flex-1 relative">
37 | 				<Navbar username={user?.preferred_username || ""} />
38 | 				<div className="grid md:grid-cols-3 grid-cols-1 w-full">
39 | 					<div className="col-span-2">
40 | 						<LeftColumn
41 | 							savingStrategy={savingStrategy}
42 | 							expenses={filteredExpenses}
43 | 							amountSaved={amountSaved}
44 | 						/>
45 | 					</div>
46 | 					<div className="w-full">
47 | 						<RightColumn expenses={expenses} />
48 | 					</div>
49 | 				</div>
50 | 			</div>
51 | 		</main>
52 | 	);
53 | }
54 | 


--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
 1 | // middleware.ts
 2 | import { NextRequest, NextResponse } from "next/server";
 3 | 
 4 | import { fetchAuthSession, fetchUserAttributes } from "aws-amplify/auth/server";
 5 | 
 6 | import { runWithAmplifyServerContext } from "@/src/utils/amplify-utils";
 7 | import { a } from "@aws-amplify/backend";
 8 | 
 9 | export async function middleware(request: NextRequest) {
10 | 	const response = NextResponse.next();
11 | 
12 | 	const authenticated = await runWithAmplifyServerContext({
13 | 		nextServerContext: { request, response },
14 | 		operation: async (contextSpec) => {
15 | 			try {
16 | 				const session = await fetchAuthSession(contextSpec, {});
17 | 				return session.tokens !== undefined;
18 | 			} catch (error) {
19 | 				console.log(error);
20 | 				return false;
21 | 			}
22 | 		},
23 | 	});
24 | 
25 | 	const isSetup = await runWithAmplifyServerContext({
26 | 		nextServerContext: { request, response },
27 | 		operation: async (contextSpec) => {
28 | 			try {
29 | 				const attributes = await fetchUserAttributes(contextSpec);
30 | 				console.log(attributes);
31 | 				return attributes["custom:isSetup"] === "1";
32 | 			} catch (error) {
33 | 				console.log(error);
34 | 				return false;
35 | 			}
36 | 		},
37 | 	});
38 | 
39 | 	const { pathname } = request.nextUrl;
40 | 
41 | 	if (pathname === "/") {
42 | 		return response;
43 | 	}
44 | 
45 | 	if (authenticated) {
46 | 		if (!isSetup && pathname !== "/dashboard/setup") {
47 | 			const newUrl = new URL("/dashboard/setup", request.url);
48 | 			return NextResponse.redirect(newUrl);
49 | 		}
50 | 		return response;
51 | 	}
52 | 
53 | 	return NextResponse.redirect(new URL("/login", request.url));
54 | }
55 | 
56 | export const config = {
57 | 	matcher: [
58 | 		/*
59 | 		 * Match all request paths except for the ones starting with:
60 | 		 * - api (API routes)
61 | 		 * - _next/static (static files)
62 | 		 * - _next/image (image optimization files)
63 | 		 * - favicon.ico (favicon file)
64 | 		 * - login
65 | 		 */
66 | 		"/((?!api|_next/static|_next/image|favicon.ico|login|dashboard/setup).*)",
67 | 	],
68 | };
69 | 


--------------------------------------------------------------------------------
/src/components/SavingsModal.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Flex, Label, Input, SelectField, Button } from "@aws-amplify/ui-react";
 4 | import { createAmountSaved } from "@/src/app/_actions/actions";
 5 | import { useRef } from "react";
 6 | import "@aws-amplify/ui-react/styles.css";
 7 | import { useFormStatus } from "react-dom";
 8 | import { XMarkIcon } from "@heroicons/react/16/solid";
 9 | 
10 | function Submit() {
11 | 	const { pending } = useFormStatus();
12 | 	return (
13 | 		<Button type="submit" disabled={pending}>
14 | 			{pending ? "Submitting..." : "Submit"}
15 | 		</Button>
16 | 	);
17 | }
18 | 
19 | function Form({ action }: { action: (formData: FormData) => void }) {
20 | 	const ref = useRef<HTMLFormElement>(null);
21 | 
22 | 	return (
23 | 		<form
24 | 			ref={ref}
25 | 			action={async (formData) => {
26 | 				await action(formData);
27 | 				ref.current?.reset();
28 | 			}}
29 | 		>
30 | 			<Flex direction="column" gap="2rem">
31 | 				<Flex direction="column" gap="small">
32 | 					<Label htmlFor="amountSaved">How much did you save?</Label>
33 | 					<Input required id="amountSaved" type="string" name="amountSaved" />
34 | 				</Flex>
35 | 				<Flex direction="column" gap="small">
36 | 					<SelectField
37 | 						id="month"
38 | 						name="month"
39 | 						label="What month did you save this in?"
40 | 						options={[
41 | 							"January",
42 | 							"February",
43 | 							"March",
44 | 							"April",
45 | 							"May",
46 | 							"June",
47 | 							"July",
48 | 							"August",
49 | 							"September",
50 | 							"October",
51 | 							"November",
52 | 							"December",
53 | 						]}
54 | 					></SelectField>
55 | 				</Flex>
56 | 				<Submit />
57 | 			</Flex>
58 | 		</form>
59 | 	);
60 | }
61 | 
62 | export default function SavingsModal({
63 | 	isOpen,
64 | 	onClose,
65 | }: {
66 | 	isOpen: boolean;
67 | 	onClose: () => void;
68 | }) {
69 | 	if (!isOpen) return null;
70 | 
71 | 	return (
72 | 		<div className="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-10">
73 | 			<div className="bg-white p-16 rounded-md">
74 | 				<div className="flex items-center justify-between gap-12 mb-4">
75 | 					<h1 className="text-xl font-bold">
76 | 						Let's add how much you've saved!
77 | 					</h1>
78 | 					<XMarkIcon
79 | 						width={30}
80 | 						className="text-gray-500 cursor-pointer"
81 | 						onClick={onClose}
82 | 					>
83 | 						Close
84 | 					</XMarkIcon>
85 | 				</div>
86 | 				<Form action={createAmountSaved} />
87 | 			</div>
88 | 		</div>
89 | 	);
90 | }
91 | 


--------------------------------------------------------------------------------
/src/app/_actions/actions.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { cookiesClient } from "@/src/utils/amplify-utils";
 4 | import { redirect } from "next/navigation";
 5 | import { revalidatePath } from "next/cache";
 6 | 
 7 | export async function createExpense(formData: FormData) {
 8 | 	try {
 9 | 		const { data } = await cookiesClient.models.Expenses.create({
10 | 			expenseName: formData.get("expenseName") as string,
11 | 			expenseAmount: parseFloat(formData.get("expenseAmount") as string),
12 | 			expenseCategory: formData.get("expenseCategory") as string,
13 | 			month: formData.get("month") as string,
14 | 			year: "2024",
15 | 		});
16 | 		console.log("Created expense", data);
17 | 		revalidatePath("/dashboard");
18 | 	} catch (error) {
19 | 		console.error("Error creating expense", error);
20 | 		redirect("/login");
21 | 	}
22 | }
23 | 
24 | export async function createAmountSaved(formData: FormData) {
25 | 	try {
26 | 		const { data } = await cookiesClient.models.AmountSaved.create({
27 | 			amountSaved: parseFloat(formData.get("amountSaved") as string),
28 | 			month: formData.get("month") as string,
29 | 			year: "2024",
30 | 		});
31 | 		console.log("Created amount saved", data);
32 | 		revalidatePath("/dashboard");
33 | 	} catch (error) {
34 | 		console.error("Error creating amount saved", error);
35 | 		redirect("/login");
36 | 	}
37 | }
38 | 
39 | export async function createSavingStrategy(formData: FormData) {
40 | 	try {
41 | 		let savingPercentage;
42 | 		const savingModel = formData.get("savingsModel") as string;
43 | 		const monthlyIncome = parseFloat(formData.get("monthlyIncome") as string);
44 | 
45 | 		switch (savingModel) {
46 | 			case "50% - Aggressive":
47 | 				savingPercentage = 0.5;
48 | 				break;
49 | 			case "30% - Moderate":
50 | 				savingPercentage = 0.3;
51 | 				break;
52 | 			case "20% - Conservative":
53 | 				savingPercentage = 0.2;
54 | 				break;
55 | 			case "10% - Essential":
56 | 				savingPercentage = 0.1;
57 | 				break;
58 | 			default:
59 | 				throw "Invalid saving model";
60 | 		}
61 | 
62 | 		const { data } = await cookiesClient.models.SavingStrategy.create({
63 | 			savingsModel: savingModel,
64 | 			monthlyIncome: parseFloat(formData.get("monthlyIncome") as string),
65 | 			amountToSave: monthlyIncome * savingPercentage,
66 | 			yearlyIncome: monthlyIncome * 12,
67 | 		});
68 | 
69 | 		console.log("Created saving strategy", data);
70 | 		revalidatePath("/dashboard");
71 | 		redirect("/dashboard");
72 | 	} catch (error) {
73 | 		console.error("Error creating saving strategy", error);
74 | 		redirect("/login");
75 | 	}
76 | }
77 | 


--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import {
 4 | 	BellIcon,
 5 | 	ChartBarIcon,
 6 | 	CreditCardIcon,
 7 | 	HomeIcon,
 8 | 	ClipboardDocumentListIcon,
 9 | 	EnvelopeIcon,
10 | 	ArrowUpIcon,
11 | 	LinkIcon,
12 | 	BanknotesIcon,
13 | } from "@heroicons/react/16/solid";
14 | import ExpenseModal from "./ExpenseModal";
15 | import SavingsModal from "./SavingsModal";
16 | import { useState } from "react";
17 | 
18 | export default function Sidebar() {
19 | 	const [isExpenseModalOpen, setIsExpenseModalOpen] = useState<boolean>(false);
20 | 	const [isSavingsModalOpen, setIsSavingsModalOpen] = useState<boolean>(false);
21 | 
22 | 	const openExpenseModal = () => setIsExpenseModalOpen(true);
23 | 	const closeExpenseModal = () => setIsExpenseModalOpen(false);
24 | 	const openSavingsModal = () => setIsSavingsModalOpen(true);
25 | 	const closeSavingsModal = () => setIsSavingsModalOpen(false);
26 | 
27 | 	return (
28 | 		<>
29 | 			<div className="bg-slate-800 flex-none w-14 sm:w-20 h-screen">
30 | 				<div className="h-20 items-center flex">
31 | 					<a href="/">
32 | 						<HomeIcon
33 | 							width={40}
34 | 							className="text-gray-300 left-3 sm:left-6 fixed"
35 | 						/>
36 | 					</a>
37 | 				</div>
38 | 				<div className="fixed left-3 sm:left-6 top-[100px]">
39 | 					<a href="/dashboard">
40 | 						<ChartBarIcon
41 | 							width={40}
42 | 							className="bg-gray-900 p-2 rounded-lg mb-4 text-gray-300"
43 | 						/>
44 | 					</a>
45 | 					<CreditCardIcon
46 | 						onClick={openExpenseModal}
47 | 						width={40}
48 | 						className="bg-gray-600 p-2 rounded-lg mb-4 text-gray-300 cursor-pointer hover:bg-gray-900"
49 | 					/>
50 | 					<BanknotesIcon
51 | 						onClick={openSavingsModal}
52 | 						width={40}
53 | 						className="bg-gray-600 p-2 rounded-lg mb-4 text-gray-300 cursor-pointer hover:bg-gray-900"
54 | 					/>
55 | 					{/*<EnvelopeIcon
56 | 					width={40}
57 | 					className="bg-gray-600 p-2 rounded-lg mb-4 text-gray-300 "
58 | 				/>
59 | 				<BellIcon
60 | 					width={40}
61 | 					className="bg-gray-600 p-2 rounded-lg mb-4 text-gray-300"
62 | 				/> */}
63 | 				</div>
64 | 				<div className="fixed bottom-4 left-3 sm:left-6">
65 | 					<a href="#top">
66 | 						<ArrowUpIcon
67 | 							width={40}
68 | 							className="bg-gray-600 p-2 rounded-lg mb-4 text-gray-300 cursor-pointer hover:bg-gray-900"
69 | 						/>
70 | 					</a>
71 | 					{/* <LinkIcon
72 | 					width={40}
73 | 					className="bg-gray-600 p-2 rounded-lg mb-4 text-gray-300"
74 | 				/> */}
75 | 				</div>
76 | 			</div>
77 | 			<ExpenseModal isOpen={isExpenseModalOpen} onClose={closeExpenseModal} />
78 | 			<SavingsModal isOpen={isSavingsModalOpen} onClose={closeSavingsModal} />
79 | 		</>
80 | 	);
81 | }
82 | 


--------------------------------------------------------------------------------
/src/app/dashboard/setup/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Flex, Label, Input, SelectField } from "@aws-amplify/ui-react";
 4 | import { createSavingStrategy } from "@/src/app/_actions/actions";
 5 | import { Button } from "@aws-amplify/ui-react";
 6 | import { updateUserAttributes, fetchUserAttributes } from "aws-amplify/auth";
 7 | import { useEffect } from "react";
 8 | import { useRouter } from "next/navigation";
 9 | import { useRef } from "react";
10 | import "@aws-amplify/ui-react/styles.css";
11 | import { useFormStatus } from "react-dom";
12 | 
13 | function Submit() {
14 | 	const { pending } = useFormStatus();
15 | 
16 | 	async function updateUser() {
17 | 		await updateUserAttributes({
18 | 			userAttributes: {
19 | 				"custom:isSetup": "1",
20 | 			},
21 | 		});
22 | 	}
23 | 
24 | 	return (
25 | 		<Button type="submit" disabled={pending} onClick={updateUser}>
26 | 			{pending ? "Submitting..." : "Submit"}
27 | 		</Button>
28 | 	);
29 | }
30 | 
31 | function Form({ action }: { action: (formData: FormData) => void }) {
32 | 	const ref = useRef<HTMLFormElement>(null);
33 | 
34 | 	return (
35 | 		<form
36 | 			ref={ref}
37 | 			action={async (formData) => {
38 | 				await action(formData);
39 | 				ref.current?.reset();
40 | 			}}
41 | 		>
42 | 			<Flex direction="column" gap="2rem">
43 | 				<Flex direction="column" gap="small">
44 | 					<Label htmlFor="monthlyIncome">
45 | 						What is your monthly income after taxes?
46 | 					</Label>
47 | 					<Input
48 | 						required
49 | 						id="monthlyIncome"
50 | 						type="number"
51 | 						name="monthlyIncome"
52 | 					/>
53 | 				</Flex>
54 | 				<Flex direction="column" gap="small">
55 | 					<SelectField
56 | 						id="savingsModel"
57 | 						name="savingsModel"
58 | 						label="How much of your monthly income do you want to save?"
59 | 						options={[
60 | 							"50% - Aggressive",
61 | 							"30% - Moderate",
62 | 							"20% - Conservative",
63 | 							"10% - Essential",
64 | 						]}
65 | 					></SelectField>
66 | 				</Flex>
67 | 				<Submit />
68 | 			</Flex>
69 | 		</form>
70 | 	);
71 | }
72 | 
73 | export default function Setup() {
74 | 	const router = useRouter();
75 | 
76 | 	useEffect(() => {
77 | 		async function getUserAttributes() {
78 | 			try {
79 | 				const userAttributes = await fetchUserAttributes();
80 | 				if (userAttributes && userAttributes["custom:isSetup"] === "1") {
81 | 					router.replace("/dashboard");
82 | 				}
83 | 			} catch (error) {
84 | 				console.error("Error fetching user attributes", error);
85 | 			}
86 | 		}
87 | 		getUserAttributes();
88 | 	}, [router]);
89 | 
90 | 	return (
91 | 		<div className="flex flex-col justify-center h-screen w-screen items-center">
92 | 			<div className="bg-white p-16 rounded-md">
93 | 				<h1 className="text-xl font-bold">Hi, let's setup your account!</h1>
94 | 				<Form action={createSavingStrategy} />
95 | 			</div>
96 | 		</div>
97 | 	);
98 | }
99 | 


--------------------------------------------------------------------------------
/src/components/ExpenseModal.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRef } from "react";
  4 | import { Flex, Label, Input, SelectField, Button } from "@aws-amplify/ui-react";
  5 | import { createExpense } from "@/src/app/_actions/actions";
  6 | import { useFormStatus } from "react-dom";
  7 | import "@aws-amplify/ui-react/styles.css";
  8 | import { XMarkIcon } from "@heroicons/react/16/solid";
  9 | 
 10 | function Submit() {
 11 | 	const { pending } = useFormStatus();
 12 | 	return (
 13 | 		<Button type="submit" disabled={pending}>
 14 | 			{pending ? "Submitting..." : "Submit"}
 15 | 		</Button>
 16 | 	);
 17 | }
 18 | 
 19 | function Form({ action }: { action: (formData: FormData) => void }) {
 20 | 	const ref = useRef<HTMLFormElement>(null);
 21 | 
 22 | 	return (
 23 | 		<form
 24 | 			ref={ref}
 25 | 			action={async (formData) => {
 26 | 				await action(formData);
 27 | 				ref.current?.reset();
 28 | 			}}
 29 | 		>
 30 | 			<Flex direction="column" gap="2rem">
 31 | 				<Flex direction="column" gap="small">
 32 | 					<Label htmlFor="expenseName">What was the expense?</Label>
 33 | 					<Input required id="expenseName" type="string" name="expenseName" />
 34 | 				</Flex>
 35 | 				<Flex direction="column" gap="small">
 36 | 					<Label htmlFor="expenseAmount">How much was it?</Label>
 37 | 					<Input
 38 | 						required
 39 | 						id="expenseAmount"
 40 | 						type="string"
 41 | 						name="expenseAmount"
 42 | 					/>
 43 | 				</Flex>
 44 | 				<Flex direction="column" gap="small">
 45 | 					<SelectField
 46 | 						id="expenseCategory"
 47 | 						name="expenseCategory"
 48 | 						label="What category does it full under?"
 49 | 						options={[
 50 | 							"Food & Drink",
 51 | 							"Retail",
 52 | 							"Electronics",
 53 | 							"Subscription",
 54 | 							"Other",
 55 | 						]}
 56 | 					></SelectField>
 57 | 				</Flex>
 58 | 				<Flex direction="column" gap="small">
 59 | 					<SelectField
 60 | 						id="month"
 61 | 						name="month"
 62 | 						label="What month did it occur?"
 63 | 						options={[
 64 | 							"January",
 65 | 							"February",
 66 | 							"March",
 67 | 							"April",
 68 | 							"May",
 69 | 							"June",
 70 | 							"July",
 71 | 							"August",
 72 | 							"September",
 73 | 							"October",
 74 | 							"November",
 75 | 							"December",
 76 | 						]}
 77 | 					></SelectField>
 78 | 				</Flex>
 79 | 				<Submit />
 80 | 			</Flex>
 81 | 		</form>
 82 | 	);
 83 | }
 84 | 
 85 | export default function ExpenseModal({
 86 | 	isOpen,
 87 | 	onClose,
 88 | }: {
 89 | 	isOpen: boolean;
 90 | 	onClose: () => void;
 91 | }) {
 92 | 	if (!isOpen) return null;
 93 | 
 94 | 	return (
 95 | 		<div className="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-10">
 96 | 			<div className="bg-white p-16 rounded-md">
 97 | 				<div className="flex items-center justify-between gap-12 mb-4">
 98 | 					<h1 className="text-xl font-bold">Let's add your expenses!</h1>
 99 | 					<XMarkIcon
100 | 						width={30}
101 | 						className="text-gray-500 cursor-pointer"
102 | 						onClick={onClose}
103 | 					>
104 | 						Close
105 | 					</XMarkIcon>
106 | 				</div>
107 | 				<Form action={createExpense} />
108 | 			</div>
109 | 		</div>
110 | 	);
111 | }
112 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing Guidelines
 2 | 
 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional
 4 | documentation, we greatly value feedback and contributions from our community.
 5 | 
 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary
 7 | information to effectively respond to your bug report or contribution.
 8 | 
 9 | 
10 | ## Reporting Bugs/Feature Requests
11 | 
12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features.
13 | 
14 | When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already
15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful:
16 | 
17 | * A reproducible test case or series of steps
18 | * The version of our code being used
19 | * Any modifications you've made relevant to the bug
20 | * Anything unusual about your environment or deployment
21 | 
22 | 
23 | ## Contributing via Pull Requests
24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that:
25 | 
26 | 1. You are working against the latest source on the *main* branch.
27 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already.
28 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted.
29 | 
30 | To send us a pull request, please:
31 | 
32 | 1. Fork the repository.
33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change.
34 | 3. Ensure local tests pass.
35 | 4. Commit to your fork using clear commit messages.
36 | 5. Send us a pull request, answering any default questions in the pull request interface.
37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation.
38 | 
39 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and
40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/).
41 | 
42 | 
43 | ## Finding contributions to work on
44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start.
45 | 
46 | 
47 | ## Code of Conduct
48 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
49 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
50 | opensource-codeofconduct@amazon.com with any additional questions or comments.
51 | 
52 | 
53 | ## Security issue notifications
54 | If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](http://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public github issue.
55 | 
56 | 
57 | ## Licensing
58 | 
59 | See the [LICENSE](LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution.
60 | 


--------------------------------------------------------------------------------
/src/components/SalesItem.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import {
  5 | 	BadgeDelta,
  6 | 	Button,
  7 | 	Card,
  8 | 	DonutChart,
  9 | 	Flex,
 10 | 	TabGroup,
 11 | 	Tab,
 12 | 	TabList,
 13 | 	Bold,
 14 | 	Divider,
 15 | 	List,
 16 | 	ListItem,
 17 | 	Metric,
 18 | 	Text,
 19 | 	Title,
 20 | } from "@tremor/react";
 21 | import {
 22 | 	ArrowRightIcon,
 23 | 	ChartPieIcon,
 24 | 	ListBulletIcon,
 25 | } from "@heroicons/react/16/solid";
 26 | import { dataFormatter } from "../utils/utils";
 27 | import type { Schema } from "@/amplify/data/resource";
 28 | 
 29 | type Expenses = Schema["Expenses"]["type"];
 30 | 
 31 | export default function SalesItem({
 32 | 	expenses,
 33 | 	month,
 34 | }: {
 35 | 	expenses: Expenses[];
 36 | 	month: string;
 37 | }) {
 38 | 	console.log(expenses);
 39 | 	const [selectedIndex, setSelectedIndex] = useState(0);
 40 | 	const expenseTotal = expenses.reduce(
 41 | 		(acc, expense) => acc + expense.expenseAmount,
 42 | 		0
 43 | 	);
 44 | 	const categories = expenses.map((expense) => expense.expenseCategory);
 45 | 	const uniqueCategoriesSet = new Set(categories);
 46 | 	const uniqueCategories = Array.from(uniqueCategoriesSet);
 47 | 
 48 | 	const groupedAndSummedExpenses = Object.values(
 49 | 		expenses.reduce((acc, expense) => {
 50 | 			const { expenseCategory, expenseAmount } = expense;
 51 | 			if (!acc[expenseCategory]) {
 52 | 				acc[expenseCategory] = { ...expense, expenseAmount: 0 };
 53 | 			}
 54 | 			acc[expenseCategory].expenseAmount += expenseAmount;
 55 | 			return acc;
 56 | 		}, {} as Record<string, (typeof expenses)[0]>)
 57 | 	);
 58 | 
 59 | 	console.log(groupedAndSummedExpenses);
 60 | 
 61 | 	return (
 62 | 		<Card className="max-w-full mx-auto">
 63 | 			<Flex className="space-x-8 flex-col lg:flex-row">
 64 | 				<Title>Overview</Title>
 65 | 				<TabGroup index={selectedIndex} onIndexChange={setSelectedIndex}>
 66 | 					<TabList variant="solid">
 67 | 						<Tab icon={ChartPieIcon}>Chart</Tab>
 68 | 						<Tab icon={ListBulletIcon}>List</Tab>
 69 | 					</TabList>
 70 | 				</TabGroup>
 71 | 			</Flex>
 72 | 			<Text className="mt-8">Total Expenses Value for 2024</Text>
 73 | 			<Metric>{dataFormatter(expenseTotal)}</Metric>
 74 | 			<Divider />
 75 | 			<Text className="mt-8">
 76 | 				<Bold>Expense Allocation</Bold>
 77 | 			</Text>
 78 | 			<Text>{uniqueCategories.length} Categories</Text>
 79 | 			{selectedIndex === 0 ? (
 80 | 				<DonutChart
 81 | 					data={groupedAndSummedExpenses}
 82 | 					valueFormatter={dataFormatter}
 83 | 					showAnimation={true}
 84 | 					category="expenseAmount"
 85 | 					index="expenseCategory"
 86 | 					className="mt-6"
 87 | 				/>
 88 | 			) : (
 89 | 				<>
 90 | 					<Flex className="mt-8" justifyContent="between">
 91 | 						<Text className="truncate">
 92 | 							<Bold>Expenses</Bold>
 93 | 						</Text>
 94 | 						<Text>Amount</Text>
 95 | 					</Flex>
 96 | 					<List className="mt-4">
 97 | 						{expenses.map((expense) => (
 98 | 							<ListItem key={expense.expenseName}>
 99 | 								<Text>{expense.expenseName}</Text>
100 | 								<Flex className="space-x-2" justifyContent="end">
101 | 									<Text>
102 | 										{/* $ {Intl.NumberFormat("us").format(stock.value).toString()} */}
103 | 										{expense.expenseAmount}
104 | 									</Text>
105 | 								</Flex>
106 | 							</ListItem>
107 | 						))}
108 | 					</List>
109 | 				</>
110 | 			)}
111 | 			{/* <Flex className="mt-6 pt-4 border-t">
112 | 				<Button
113 | 					size="xs"
114 | 					variant="light"
115 | 					icon={ArrowRightIcon}
116 | 					iconPosition="right"
117 | 				>
118 | 					View more
119 | 				</Button>
120 | 			</Flex> */}
121 | 		</Card>
122 | 	);
123 | }
124 | 


--------------------------------------------------------------------------------
/src/app/page.module.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   justify-content: space-between;
  5 |   align-items: center;
  6 |   padding: 6rem;
  7 |   min-height: 100vh;
  8 | }
  9 | 
 10 | .description {
 11 |   display: inherit;
 12 |   justify-content: inherit;
 13 |   align-items: inherit;
 14 |   font-size: 0.85rem;
 15 |   max-width: var(--max-width);
 16 |   width: 100%;
 17 |   z-index: 2;
 18 |   font-family: var(--font-mono);
 19 | }
 20 | 
 21 | .description a {
 22 |   display: flex;
 23 |   justify-content: center;
 24 |   align-items: center;
 25 |   gap: 0.5rem;
 26 | }
 27 | 
 28 | .description p {
 29 |   position: relative;
 30 |   margin: 0;
 31 |   padding: 1rem;
 32 |   background-color: rgba(var(--callout-rgb), 0.5);
 33 |   border: 1px solid rgba(var(--callout-border-rgb), 0.3);
 34 |   border-radius: var(--border-radius);
 35 | }
 36 | 
 37 | .code {
 38 |   font-weight: 700;
 39 |   font-family: var(--font-mono);
 40 | }
 41 | 
 42 | .grid {
 43 |   display: grid;
 44 |   grid-template-columns: repeat(4, minmax(25%, auto));
 45 |   max-width: 100%;
 46 |   width: var(--max-width);
 47 | }
 48 | 
 49 | .card {
 50 |   padding: 1rem 1.2rem;
 51 |   border-radius: var(--border-radius);
 52 |   background: rgba(var(--card-rgb), 0);
 53 |   border: 1px solid rgba(var(--card-border-rgb), 0);
 54 |   transition: background 200ms, border 200ms, box-shadow 200ms;
 55 | }
 56 | 
 57 | .card span {
 58 |   display: inline-block;
 59 |   transition: transform 200ms;
 60 | }
 61 | 
 62 | .card h2 {
 63 |   font-weight: 600;
 64 |   margin-bottom: 0.7rem;
 65 | }
 66 | 
 67 | .card p {
 68 |   margin: 0;
 69 |   opacity: 0.6;
 70 |   font-size: 0.9rem;
 71 |   line-height: 1.5;
 72 |   max-width: 30ch;
 73 | }
 74 | 
 75 | .center {
 76 |   display: flex;
 77 |   justify-content: center;
 78 |   align-items: center;
 79 |   position: relative;
 80 |   padding: 4rem 0;
 81 |   gap: 4rem;
 82 | }
 83 | 
 84 | /* Enable hover only on non-touch devices */
 85 | @media (hover: hover) and (pointer: fine) {
 86 |   .card:hover {
 87 |     background: rgba(var(--card-rgb), 0.1);
 88 |     border: 1px solid rgba(var(--card-border-rgb), 0.15);
 89 |     box-shadow: 0px 4px 12px 0px #CBBEFF;
 90 |   }
 91 | 
 92 |   .card:hover span {
 93 |     transform: translateX(4px);
 94 |   }
 95 | 
 96 |   @media (prefers-color-scheme: dark) {
 97 |     .card:hover {
 98 |       box-shadow: none;
 99 |     }
100 |   }
101 | }
102 | 
103 | @media (prefers-reduced-motion) {
104 |   .card:hover span {
105 |     transform: none;
106 |   }
107 | }
108 | 
109 | /* Mobile */
110 | @media (max-width: 700px) {
111 |   .content {
112 |     padding: 4rem;
113 |   }
114 | 
115 |   .grid {
116 |     grid-template-columns: 1fr;
117 |     margin-bottom: 120px;
118 |     max-width: 320px;
119 |     text-align: center;
120 |   }
121 | 
122 |   .card {
123 |     padding: 1rem 2.5rem;
124 |   }
125 | 
126 |   .card h2 {
127 |     margin-bottom: 0.5rem;
128 |   }
129 | 
130 |   .center {
131 |     padding: 8rem 0 6rem;
132 |   }
133 | 
134 |   .center::before {
135 |     transform: none;
136 |     height: 300px;
137 |   }
138 | 
139 |   .description {
140 |     font-size: 0.8rem;
141 |   }
142 | 
143 |   .description a {
144 |     padding: 1rem;
145 |   }
146 | 
147 |   .description p,
148 |   .description div {
149 |     display: flex;
150 |     justify-content: center;
151 |     position: fixed;
152 |     width: 100%;
153 |   }
154 | 
155 |   .description p {
156 |     align-items: center;
157 |     inset: 0 0 auto;
158 |     padding: 2rem 1rem 1.4rem;
159 |     border-radius: 0;
160 |     border: none;
161 |     border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
162 |     background: linear-gradient(
163 |       to bottom,
164 |       rgba(var(--background-start-rgb), 1),
165 |       rgba(var(--callout-rgb), 0.5)
166 |     );
167 |     background-clip: padding-box;
168 |     backdrop-filter: blur(24px);
169 |   }
170 | 
171 |   .description div {
172 |     align-items: flex-end;
173 |     pointer-events: none;
174 |     inset: auto 0 0;
175 |     padding: 2rem;
176 |     height: 200px;
177 |     background: linear-gradient(
178 |       to bottom,
179 |       transparent 0%,
180 |       rgb(var(--background-end-rgb)) 40%
181 |     );
182 |     z-index: 1;
183 |   }
184 | }
185 | 
186 | /* Tablet and Smaller Desktop */
187 | @media (min-width: 701px) and (max-width: 1120px) {
188 |   .grid {
189 |     grid-template-columns: repeat(2, 50%);
190 |   }
191 | }
192 | 
193 | @media (prefers-color-scheme: dark) {
194 |   .logo {
195 |     filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
196 |   }
197 | }
198 | 
199 | 
200 | @keyframes rotate {
201 |   from {
202 |     transform: rotate(360deg);
203 |   }
204 |   to {
205 |     transform: rotate(0deg);
206 |   }
207 | }
208 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import type { Config } from "tailwindcss";
  2 | import colors from "tailwindcss/colors";
  3 | 
  4 | const config: Config = {
  5 | 	content: [
  6 | 		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
  7 | 		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  8 | 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  9 | 
 10 | 		// Path to Tremor module
 11 | 		"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
 12 | 	],
 13 | 	theme: {
 14 | 		transparent: "transparent",
 15 | 		current: "currentColor",
 16 | 		extend: {
 17 | 			colors: {
 18 | 				// light mode
 19 | 				tremor: {
 20 | 					brand: {
 21 | 						faint: colors.blue[50],
 22 | 						muted: colors.blue[200],
 23 | 						subtle: colors.blue[400],
 24 | 						DEFAULT: colors.blue[500],
 25 | 						emphasis: colors.blue[700],
 26 | 						inverted: colors.white,
 27 | 					},
 28 | 					background: {
 29 | 						muted: colors.gray[50],
 30 | 						subtle: colors.gray[100],
 31 | 						DEFAULT: colors.white,
 32 | 						emphasis: colors.gray[700],
 33 | 					},
 34 | 					border: {
 35 | 						DEFAULT: colors.gray[200],
 36 | 					},
 37 | 					ring: {
 38 | 						DEFAULT: colors.gray[200],
 39 | 					},
 40 | 					content: {
 41 | 						subtle: colors.gray[400],
 42 | 						DEFAULT: colors.gray[500],
 43 | 						emphasis: colors.gray[700],
 44 | 						strong: colors.gray[900],
 45 | 						inverted: colors.white,
 46 | 					},
 47 | 				},
 48 | 				// dark mode
 49 | 				"dark-tremor": {
 50 | 					brand: {
 51 | 						faint: "#0B1229",
 52 | 						muted: colors.blue[950],
 53 | 						subtle: colors.blue[800],
 54 | 						DEFAULT: colors.blue[500],
 55 | 						emphasis: colors.blue[400],
 56 | 						inverted: colors.blue[950],
 57 | 					},
 58 | 					background: {
 59 | 						muted: "#131A2B",
 60 | 						subtle: colors.gray[800],
 61 | 						DEFAULT: colors.gray[900],
 62 | 						emphasis: colors.gray[300],
 63 | 					},
 64 | 					border: {
 65 | 						DEFAULT: colors.gray[800],
 66 | 					},
 67 | 					ring: {
 68 | 						DEFAULT: colors.gray[800],
 69 | 					},
 70 | 					content: {
 71 | 						subtle: colors.gray[600],
 72 | 						DEFAULT: colors.gray[500],
 73 | 						emphasis: colors.gray[200],
 74 | 						strong: colors.gray[50],
 75 | 						inverted: colors.gray[950],
 76 | 					},
 77 | 				},
 78 | 			},
 79 | 			boxShadow: {
 80 | 				// light
 81 | 				"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
 82 | 				"tremor-card":
 83 | 					"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
 84 | 				"tremor-dropdown":
 85 | 					"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
 86 | 				// dark
 87 | 				"dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
 88 | 				"dark-tremor-card":
 89 | 					"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
 90 | 				"dark-tremor-dropdown":
 91 | 					"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
 92 | 			},
 93 | 			borderRadius: {
 94 | 				"tremor-small": "0.375rem",
 95 | 				"tremor-default": "0.5rem",
 96 | 				"tremor-full": "9999px",
 97 | 			},
 98 | 			fontSize: {
 99 | 				"tremor-label": ["0.75rem", { lineHeight: "1rem" }],
100 | 				"tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
101 | 				"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
102 | 				"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
103 | 			},
104 | 		},
105 | 	},
106 | 	safelist: [
107 | 		{
108 | 			pattern:
109 | 				/^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
110 | 			variants: ["hover", "ui-selected"],
111 | 		},
112 | 		{
113 | 			pattern:
114 | 				/^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
115 | 			variants: ["hover", "ui-selected"],
116 | 		},
117 | 		{
118 | 			pattern:
119 | 				/^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
120 | 			variants: ["hover", "ui-selected"],
121 | 		},
122 | 		{
123 | 			pattern:
124 | 				/^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
125 | 		},
126 | 		{
127 | 			pattern:
128 | 				/^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
129 | 		},
130 | 		{
131 | 			pattern:
132 | 				/^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
133 | 		},
134 | 	],
135 | 	plugins: [require("@headlessui/tailwindcss"), require("@tailwindcss/forms")],
136 | };
137 | 
138 | export default config;
139 | 


--------------------------------------------------------------------------------
/src/components/WebAnalytics.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { BarList, Card, Title, Bold, Flex, Text } from "@tremor/react";
  4 | 
  5 | const data = [
  6 | 	{
  7 | 		name: "Twitter",
  8 | 		value: 456,
  9 | 		href: "https://twitter.com/tremorlabs",
 10 | 		icon: function TwitterIcon() {
 11 | 			return (
 12 | 				<svg
 13 | 					xmlns="http://www.w3.org/2000/svg"
 14 | 					className="mr-2.5 fill-blue-500"
 15 | 					viewBox="0 0 24 24"
 16 | 					width="20"
 17 | 					height="20"
 18 | 				>
 19 | 					<path fill="none" d="M0 0h24v24H0z" />
 20 | 					<path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
 21 | 				</svg>
 22 | 			);
 23 | 		},
 24 | 	},
 25 | 	{
 26 | 		name: "Google",
 27 | 		value: 351,
 28 | 		href: "https://google.com",
 29 | 		icon: function GoogleIcon() {
 30 | 			return (
 31 | 				<svg
 32 | 					xmlns="http://www.w3.org/2000/svg"
 33 | 					className="mr-2.5 fill-slate-500"
 34 | 					viewBox="0 0 24 24"
 35 | 					width="20"
 36 | 					height="20"
 37 | 				>
 38 | 					<path fill="none" d="M0 0h24v24H0z" />
 39 | 					<path d="M3.064 7.51A9.996 9.996 0 0 1 12 2c2.695 0 4.959.99 6.69 2.605l-2.867 2.868C14.786 6.482 13.468 5.977 12 5.977c-2.605 0-4.81 1.76-5.595 4.123-.2.6-.314 1.24-.314 1.9 0 .66.114 1.3.314 1.9.786 2.364 2.99 4.123 5.595 4.123 1.345 0 2.49-.355 3.386-.955a4.6 4.6 0 0 0 1.996-3.018H12v-3.868h9.418c.118.654.182 1.336.182 2.045 0 3.046-1.09 5.61-2.982 7.35C16.964 21.105 14.7 22 12 22A9.996 9.996 0 0 1 2 12c0-1.614.386-3.14 1.064-4.49z" />
 40 | 				</svg>
 41 | 			);
 42 | 		},
 43 | 	},
 44 | 	{
 45 | 		name: "GitHub",
 46 | 		value: 271,
 47 | 		href: "https://github.com/tremorlabs/tremor",
 48 | 		icon: function GitHubIcon() {
 49 | 			return (
 50 | 				<svg
 51 | 					xmlns="http://www.w3.org/2000/svg"
 52 | 					className="mr-2.5 fill-slate-900"
 53 | 					viewBox="0 0 24 24"
 54 | 					width="20"
 55 | 					height="20"
 56 | 				>
 57 | 					<path fill="none" d="M0 0h24v24H0z" />
 58 | 					<path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z" />
 59 | 				</svg>
 60 | 			);
 61 | 		},
 62 | 	},
 63 | 	{
 64 | 		name: "Reddit",
 65 | 		value: 191,
 66 | 		href: "https://reddit.com",
 67 | 		icon: function RedditIcon() {
 68 | 			return (
 69 | 				<svg
 70 | 					xmlns="http://www.w3.org/2000/svg"
 71 | 					className="mr-2.5 fill-orange-500"
 72 | 					viewBox="0 0 24 24"
 73 | 					width="20"
 74 | 					height="20"
 75 | 				>
 76 | 					<path fill="none" d="M0 0h24v24H0z" />
 77 | 					<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm6.67-10a1.46 1.46 0 0 0-2.47-1 7.12 7.12 0 0 0-3.85-1.23L13 6.65l2.14.45a1 1 0 1 0 .13-.61L12.82 6a.31.31 0 0 0-.37.24l-.74 3.47a7.14 7.14 0 0 0-3.9 1.23 1.46 1.46 0 1 0-1.61 2.39 2.87 2.87 0 0 0 0 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 0 0 0-.44 1.46 1.46 0 0 0 .81-1.33zm-10 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5.81 2.75a3.84 3.84 0 0 1-2.47.77 3.84 3.84 0 0 1-2.47-.77.27.27 0 0 1 .38-.38A3.27 3.27 0 0 0 12 16a3.28 3.28 0 0 0 2.09-.61.28.28 0 1 1 .39.4v-.04zm-.18-1.71a1 1 0 1 1 1-1 1 1 0 0 1-1.01 1.04l.01-.04z" />
 78 | 				</svg>
 79 | 			);
 80 | 		},
 81 | 	},
 82 | 	{
 83 | 		name: "Youtube",
 84 | 		value: 91,
 85 | 		href: "https://www.youtube.com/@tremorlabs3079",
 86 | 		icon: function YouTubeIcon() {
 87 | 			return (
 88 | 				<svg
 89 | 					xmlns="http://www.w3.org/2000/svg"
 90 | 					className="mr-2.5 fill-red-500"
 91 | 					viewBox="0 0 24 24"
 92 | 					width="20"
 93 | 					height="20"
 94 | 				>
 95 | 					<path fill="none" d="M0 0h24v24H0z" />
 96 | 					<path d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5-6-3.5v7z" />
 97 | 				</svg>
 98 | 			);
 99 | 		},
100 | 	},
101 | ];
102 | 
103 | const WebAnalytics = () => {
104 | 	return (
105 | 		<Card className="max-w-full my-4">
106 | 			<Title>Website Analytics</Title>
107 | 			<Flex className="mt-4">
108 | 				<Text>
109 | 					<Bold>Source</Bold>
110 | 				</Text>
111 | 				<Text>
112 | 					<Bold>Visits</Bold>
113 | 				</Text>
114 | 			</Flex>
115 | 			<BarList data={data} className="mt-2" />
116 | 		</Card>
117 | 	);
118 | };
119 | 
120 | export default WebAnalytics;
121 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Dialog } from "@headlessui/react";
  4 | import { useState } from "react";
  5 | import { XMarkIcon, Bars3Icon } from "@heroicons/react/16/solid";
  6 | 
  7 | export default function App() {
  8 | 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  9 | 
 10 | 	return (
 11 | 		<main>
 12 | 			<header className="absolute inset-x-0 top-0 z-50">
 13 | 				<nav
 14 | 					className="flex items-center justify-between p-6 lg:px-8"
 15 | 					aria-label="Global"
 16 | 				>
 17 | 					<div className="flex lg:flex-1">
 18 | 						<a href="#" className="-m-1.5 p-1.5">
 19 | 							<span className="text-2xl font-extrabold tracking-wide text-white">
 20 | 								spot me.
 21 | 							</span>
 22 | 						</a>
 23 | 					</div>
 24 | 					<div className="flex lg:hidden">
 25 | 						<button
 26 | 							type="button"
 27 | 							className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
 28 | 							onClick={() => setMobileMenuOpen(true)}
 29 | 						>
 30 | 							<span className="sr-only">Open main menu</span>
 31 | 							<Bars3Icon className="h-6 w-6 fill-white" aria-hidden="true" />
 32 | 						</button>
 33 | 					</div>
 34 | 					<div className="hidden lg:flex lg:flex-1 lg:justify-end">
 35 | 						<a
 36 | 							href="/dashboard"
 37 | 							className="text-md font-semibold leading-6 text-white hover:text-gray-300"
 38 | 						>
 39 | 							Log in <span aria-hidden="true">&rarr;</span>
 40 | 						</a>
 41 | 					</div>
 42 | 				</nav>
 43 | 				<Dialog
 44 | 					className="lg:hidden"
 45 | 					open={mobileMenuOpen}
 46 | 					onClose={setMobileMenuOpen}
 47 | 				>
 48 | 					<div className="fixed inset-0 z-50" />
 49 | 					<Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
 50 | 						<div className="flex items-center justify-between">
 51 | 							<a href="#" className="-m-1.5 p-1.5">
 52 | 								<span className="text-2xl font-extrabold tracking-wide">
 53 | 									spot me.
 54 | 								</span>
 55 | 							</a>
 56 | 							<button
 57 | 								type="button"
 58 | 								className="-m-2.5 rounded-md p-2.5 text-gray-200"
 59 | 								onClick={() => setMobileMenuOpen(false)}
 60 | 							>
 61 | 								<span className="sr-only">Close menu</span>
 62 | 								<XMarkIcon className="h-6 w-6 fill-black" aria-hidden="true" />
 63 | 							</button>
 64 | 						</div>
 65 | 						<div className="mt-6 flow-root">
 66 | 							<div className="-my-6 divide-y divide-gray-500/10">
 67 | 								<div className="py-6">
 68 | 									<a
 69 | 										href="/dashboard"
 70 | 										className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-100"
 71 | 									>
 72 | 										Log in
 73 | 									</a>
 74 | 								</div>
 75 | 							</div>
 76 | 						</div>
 77 | 					</Dialog.Panel>
 78 | 				</Dialog>
 79 | 			</header>
 80 | 
 81 | 			<div className="relative isolate px-6 pt-14 lg:px-8">
 82 | 				<div
 83 | 					className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
 84 | 					aria-hidden="true"
 85 | 				>
 86 | 					<div
 87 | 						className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
 88 | 						style={{
 89 | 							clipPath:
 90 | 								"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
 91 | 						}}
 92 | 					/>
 93 | 				</div>
 94 | 				<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
 95 | 					<div className="hidden sm:mb-8 sm:flex sm:justify-center">
 96 | 						<div className="relative rounded-full px-3 py-1 text-sm leading-6 text-white ring-1 ring-gray-100/30 hover:ring-gray-100/60">
 97 | 							Where you go to manage your money.
 98 | 						</div>
 99 | 					</div>
100 | 					<div className="text-center">
101 | 						<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
102 | 							Personal Finance Tracking Made Easy
103 | 						</h1>
104 | 						<p className="mt-6 text-lg leading-8 text-gray-50">
105 | 							Budgeting and tracking your expenses has never been easier. With
106 | 							Spot Me, you can easily manage your finances and get a clear view
107 | 							of your spending habits.
108 | 						</p>
109 | 						<div className="mt-10 flex items-center justify-center gap-x-6">
110 | 							<a
111 | 								href="/dashboard"
112 | 								className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
113 | 							>
114 | 								Get started
115 | 							</a>
116 | 						</div>
117 | 					</div>
118 | 				</div>
119 | 				<div
120 | 					className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
121 | 					aria-hidden="true"
122 | 				>
123 | 					<div
124 | 						className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
125 | 						style={{
126 | 							clipPath:
127 | 								"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
128 | 						}}
129 | 					/>
130 | 				</div>
131 | 			</div>
132 | 		</main>
133 | 	);
134 | }
135 | 


--------------------------------------------------------------------------------