+
Why use Google Login?
- More Secure
@@ -99,8 +92,8 @@ Error on Login / Sign Up?For Email based, if you already have an account, Create account will not work.
- If you don't have an account, Login will not work for you. Create an account first.
-
- Verification of email is required in next step. Please use valid email, else account will be
- deleted in next 7 days.
+ Verification of email is required in next step. Please use valid email, else account will be deleted in next 7
+ days.
diff --git a/src/app/auth/pages/login/login.page.scss b/src/app/auth/pages/login/login.page.scss
index 0839e9d8..9c7c6eba 100644
--- a/src/app/auth/pages/login/login.page.scss
+++ b/src/app/auth/pages/login/login.page.scss
@@ -1,7 +1,38 @@
-.card{
+.card {
margin: 20px;
- width: calc(100% - 40px );
+ width: calc(100% - 40px);
}
-h1{
+h1 {
color: var(--ion-color-success);
}
+.login-form {
+ ion-note {
+ font-weight: bold;
+ }
+}
+.btn-google-login {
+ --background: var(--ion-color-success);
+ --color: #fff;
+ --box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ ion-icon {
+ margin-right: 8px;
+ display: inline-flex;
+ font-size: 20px;
+ }
+
+ span {
+ display: inline-flex;
+ align-items: center;
+ font-weight: bold;
+ padding-top: 2px;
+ }
+
+ &:hover {
+ --background: #2e9b5d;
+ }
+}
diff --git a/src/app/auth/pages/login/login.page.ts b/src/app/auth/pages/login/login.page.ts
index 9fab57a0..5b84fd23 100644
--- a/src/app/auth/pages/login/login.page.ts
+++ b/src/app/auth/pages/login/login.page.ts
@@ -7,18 +7,20 @@ import { SeoService } from "src/app/services/seo/seo.service";
import { AuthService } from "../../service/auth.service";
@Component({
- selector: "app-login",
- templateUrl: "./login.page.html",
- styleUrls: ["./login.page.scss"],
+ selector: "app-login",
+ templateUrl: "./login.page.html",
+ styleUrls: ["./login.page.scss"],
+ standalone: false
})
export class LoginPage implements OnInit {
credentials!: FormGroup;
pageTitle: string = "Login Page";
pageMetaTags = SeoTags.loginPageTags;
title = SeoTags.pageTitle.loginPage;
- loginMode: boolean = true; // Indicates whether the user is in login or registration mode
+ loginMode: boolean = true;
loginForm: FormGroup;
registerForm: FormGroup;
+ showFaq: boolean = false;
constructor(
private fb: FormBuilder,
private loadingController: LoadingController,
@@ -82,10 +84,7 @@ export class LoginPage implements OnInit {
const loading = await this.loadingController.create();
await loading.present();
- const user = await this.authService.register(
- this.credentials.value.email,
- this.credentials.value.password,
- );
+ const user = await this.authService.register(this.credentials.value.email, this.credentials.value.password);
await loading.dismiss();
if (user) {
@@ -99,10 +98,7 @@ export class LoginPage implements OnInit {
const loading = await this.loadingController.create();
await loading.present();
- const user = await this.authService.login(
- this.loginForm.value.email,
- this.loginForm.value.password,
- );
+ const user = await this.authService.login(this.loginForm.value.email, this.loginForm.value.password);
await loading.dismiss();
if (user) {
@@ -113,11 +109,8 @@ export class LoginPage implements OnInit {
}
async loginWithGoogle() {
const user = await this.authService.googleSignin();
- if (user !== (null || undefined)) {
- this.showAlert(
- "Login Success",
- "Welcome to Summarize...\nNavigate Manually in case of delay.",
- );
+ if (user) {
+ this.showAlert("Login Success", "Welcome to Summarize...\nNavigate manually in case of delay.");
this.router.navigateByUrl("/home", { replaceUrl: true });
} else {
this.showAlert("Login failed", "Please try again!");
diff --git a/src/app/auth/pages/reset-password/reset-password.component.ts b/src/app/auth/pages/reset-password/reset-password.component.ts
index f2086389..d818a36e 100644
--- a/src/app/auth/pages/reset-password/reset-password.component.ts
+++ b/src/app/auth/pages/reset-password/reset-password.component.ts
@@ -3,9 +3,10 @@ import { AuthService } from "../../service/auth.service";
import { ToasterService } from "src/app/services/toaster/toaster.service";
@Component({
- selector: "app-reset-password",
- templateUrl: "./reset-password.component.html",
- styleUrls: ["./reset-password.component.scss"],
+ selector: "app-reset-password",
+ templateUrl: "./reset-password.component.html",
+ styleUrls: ["./reset-password.component.scss"],
+ standalone: false
})
export class ResetPasswordComponent {
pageTitle = "Reset password";
diff --git a/src/app/folder/folder.page.ts b/src/app/folder/folder.page.ts
index 279865b5..501f3743 100644
--- a/src/app/folder/folder.page.ts
+++ b/src/app/folder/folder.page.ts
@@ -2,9 +2,10 @@ import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
- selector: "app-folder",
- templateUrl: "./folder.page.html",
- styleUrls: ["./folder.page.scss"],
+ selector: "app-folder",
+ templateUrl: "./folder.page.html",
+ styleUrls: ["./folder.page.scss"],
+ standalone: false
})
export class FolderPage implements OnInit {
public folder: any;
diff --git a/src/app/models/class/masterData/master-data.ts b/src/app/models/class/masterData/master-data.ts
index e95a7f51..629f2e0a 100644
--- a/src/app/models/class/masterData/master-data.ts
+++ b/src/app/models/class/masterData/master-data.ts
@@ -13,6 +13,18 @@ export const features: Features[] = [
color: "secondary",
path: "goal",
},
+ {
+ title: "List",
+ icon: "cart",
+ color: "medium",
+ path: "expenses/shopping-list",
+ },
+ {
+ title: "Moments",
+ icon: "sparkles",
+ color: "warning",
+ path: "moments",
+ },
{
title: "Studies",
icon: "book",
@@ -25,10 +37,4 @@ export const features: Features[] = [
color: "danger",
path: "time",
},
- {
- title: "Achievements",
- icon: "trophy",
- color: "warning",
- path: "achievement",
- },
];
diff --git a/src/app/models/class/seoTags/seo.ts b/src/app/models/class/seoTags/seo.ts
index a42524f0..4ec986ee 100644
--- a/src/app/models/class/seoTags/seo.ts
+++ b/src/app/models/class/seoTags/seo.ts
@@ -14,60 +14,64 @@ export class SeoTags {
{
name: "description",
content:
- "Summarize (summarize-ng web app) help users manage their achievements, money, time, and studies effectively. Install on any device and boost your productivity.",
+ "Summarize is a powerful personal management tool designed to help users track achievements, manage finances, optimize time, and organize studies. Boost productivity effortlessly across all devices. summarize-ng.web.app",
},
{
name: "keywords",
content:
- "Summarize, summarize-ng, Money management, Budgeting, Financial goals, Expense tracking, Time management, Study management, Productivity, Goal setting, Organizational tools, Personal finance, Study planner, Study materials, Study schedule, Study progress, Study tracker, Study management app",
+ "personal management, productivity tool, finance tracker, budgeting app, time management, study planner, goal tracking, task organization, achievement tracker, expense tracker, study management, Summarize app, summarize-ng",
},
];
+
public static aboutPageTags: seoMetaTag[] = [
{
name: "description",
content:
- "Tempting advertisement and deals makes you to spend more money and time to purchase and use their product/service. Summarize helps you in managing achievement, studies, expenses, time and spend only on needs for better savings.",
+ "Summarize helps you take control of your time, finances, and studies. Avoid unnecessary expenses, track progress, and achieve your goals with our efficient management system.",
},
{
name: "keywords",
content:
- "Summarize, summarize-ng, Money management, Budgeting, Financial goals, Expense tracking, Time management, Study management, Productivity, Goal setting, Organizational tools, Personal finance, Study planner, Study materials, Study schedule, Study progress, Study notes, Study reminders, Study rewards, Study reports, Study tracker, Study management app",
+ "Summarize, financial planning, smart budgeting, expense tracker, study organizer, time management app, productivity tools, savings planner, study progress tracker, personal development, goal setting",
},
];
+
public static helpPageTags: seoMetaTag[] = [
{
name: "description",
content:
- "Need help to install Summarize (summarize-ng.web.app) on PC ( Windows / MAC / Linux all-distro ),Install on Android, Install on IOS, Update Summarize.",
+ "Get step-by-step help to install Summarize on Windows, Mac, Linux, Android, and iOS. Learn how to update and optimize your experience for seamless productivity.",
},
{
name: "keywords",
content:
- "Summarize, summarize-ng , time management, money management, expense management, study assistant , digital dairy,iam5k, IAM5K, Sandeep Kumar",
+ "Summarize installation, install on PC, install on Mac, install on Android, install on iOS, software update, troubleshooting, productivity app setup, digital planner, time management assistant",
},
];
+
public static loginPageTags: seoMetaTag[] = [
{
name: "description",
content:
- "Login or Sign up now to Summarize (summarize-ng.web.app) now. With its user-friendly interface and secure login, Simplify time, money, achievement, and study management. Easily track progress, set goals, and stay organized. ",
+ "Sign up or log in to Summarize and take charge of your time, finances, and study plans. Secure, easy-to-use, and designed for maximum productivity.",
},
{
name: "keywords",
content:
- "Summarize, Summarize, arise, arize, money management, expense management, cost analysis,summarize-ng, summarize-ng, digital dairy, expense analysis",
+ "Summarize login, productivity app, account access, personal finance tracker, digital planner, goal tracking, secure login, time and money management, study tracker",
},
];
+
public static studiesPageTags: seoMetaTag[] = [
{
name: "description",
content:
- "Summarize (summarize-ng web app) helps users manage their studies efficiently. Stay organized, track progress, and boost productivity with our study management tools.",
+ "Summarize makes study management easy. Organize materials, track progress, and optimize your learning experience with our intuitive study planner.",
},
{
name: "keywords",
content:
- "Summarize, summarize-ng, Study management, Study planner, Study materials, Study schedule, Study progress, Study tracker, Productivity, Educational tools, Time management, Organization, Learning app",
+ "study planner, learning management, education tools, study schedule, academic progress tracker, student productivity, time optimization, digital notebook, study assistant",
},
];
@@ -75,12 +79,12 @@ export class SeoTags {
{
name: "description",
content:
- "Efficient time management is crucial for success. With Summarize (summarize-ng web app), prioritize tasks, track time usage, and enhance productivity across all your endeavors.",
+ "Optimize your time with Summarize. Prioritize tasks, track productivity, and manage schedules effectively for a balanced work and study life.",
},
{
name: "keywords",
content:
- "Summarize, summarize-ng, Time management, Task prioritization, Productivity tools, Time tracking, Schedule optimization, Efficiency, Organizational tools, Goal setting, Study management, Study planner, Study progress",
+ "time management, productivity tracker, schedule planner, task prioritization, daily planner, efficiency tools, work-life balance, time tracking app, organization tools",
},
];
@@ -88,12 +92,12 @@ export class SeoTags {
{
name: "description",
content:
- "Summarize all your expenses here. Summarize will help you to check them down in the list immediately and later Analyze them to have an understanding about where you can spend wisely and how to manage your expenses in better way. Soon we will also give finance tips that will help you better.",
+ "Track and analyze your expenses with Summarize. Gain insights into your spending habits and learn how to save more efficiently. Finance tips coming soon!",
},
{
- name: "keyword",
+ name: "keywords",
content:
- "Summarize, Summarize, arise, arize, money management, expense management, cost analysis,summarize-ng, summarize-ng, digital dairy, expense analysis",
+ "expense tracker, budgeting app, personal finance, cost analysis, money management, financial insights, digital expense log, savings planner, spending tracker",
},
{
name: "author",
@@ -105,12 +109,25 @@ export class SeoTags {
{
name: "description",
content:
- "Summarize all your expenses here. Summarize will help you to check them down in the list immediately and later Analyze them to have an understanding about where you can spend wisely and how to manage your expenses in better way. Soon we will also give finance tips that will help you better.",
+ "Monitor your spending with Summarize. Easily categorize expenses, track trends, and make informed financial decisions for a more secure future.",
+ },
+ {
+ name: "keywords",
+ content:
+ "expense management, money tracker, budgeting software, financial planning, spending analysis, cost control, personal finance app, financial goals",
+ },
+ ];
+
+ public static goalPageTags: seoMetaTag[] = [
+ {
+ name: "description",
+ content:
+ "Set, track, and achieve your goals with Summarize. Stay focused, monitor progress, and develop better financial and personal habits for long-term success.",
},
{
- name: "keyword",
+ name: "keywords",
content:
- "Summarize, Summarize, arise, arize, money management, expense management, cost analysis,summarize-ng, summarize-ng, digital dairy, expense analysis",
+ "goal setting, achievement tracker, productivity goals, financial goals, personal growth, time management, success planning, milestone tracking, habit building",
},
];
}
diff --git a/src/app/models/class/static/expense/expense-data.spec.ts b/src/app/models/class/static/expense/expense-data.spec.ts
new file mode 100644
index 00000000..175e346e
--- /dev/null
+++ b/src/app/models/class/static/expense/expense-data.spec.ts
@@ -0,0 +1,7 @@
+import { ExpenseData } from './expense-data';
+
+describe('ExpenseData', () => {
+ it('should create an instance', () => {
+ expect(new ExpenseData()).toBeTruthy();
+ });
+});
diff --git a/src/app/models/class/static/expense/expense-data.ts b/src/app/models/class/static/expense/expense-data.ts
new file mode 100644
index 00000000..f1ae0cbe
--- /dev/null
+++ b/src/app/models/class/static/expense/expense-data.ts
@@ -0,0 +1,28 @@
+export class ExpenseStaticData {
+ static expenseTypes = [
+ { title: "Bills", value: "bill" },
+ { title: "Emi", value: "emi" },
+ { title: "Education", value: "education" },
+ { title: "Entertainment", value: "entertainment" },
+ { title: "Food", value: "food" },
+ { title: "Groceries", value: "grocery" },
+ { title: "Health", value: "health" },
+ { title: "Home Utilities", value: "utilities" },
+ { title: "Insurance", value: "insurance" },
+ { title: "Investment", value: "investment" },
+ { title: "Personal care", value: "personal care" },
+ { title: "Refreshments", value: "refreshments" },
+ { title: "Rent", value: "rent" },
+ { title: "Saving", value: "saving" },
+ { title: "Shopping", value: "shopping" },
+ { title: "Transportation", value: "transportation" },
+ { title: "Travel", value: "travel" },
+ { title: "Donate", value: "donated" },
+ { title: "Miscellaneous", value: "miscellaneous" },
+ ];
+ static spentOn = [
+ { value: "self", title: "Self" },
+ { value: "group", title: "Group" },
+ { value: "family", title: "Family" },
+ ];
+}
diff --git a/src/app/models/class/static/goal.spec.ts b/src/app/models/class/static/goal/goal.spec.ts
similarity index 100%
rename from src/app/models/class/static/goal.spec.ts
rename to src/app/models/class/static/goal/goal.spec.ts
diff --git a/src/app/models/class/static/goal.ts b/src/app/models/class/static/goal/goal.ts
similarity index 99%
rename from src/app/models/class/static/goal.ts
rename to src/app/models/class/static/goal/goal.ts
index 22967fe7..200153fa 100644
--- a/src/app/models/class/static/goal.ts
+++ b/src/app/models/class/static/goal/goal.ts
@@ -1,4 +1,4 @@
-import { DataDescription, Options } from "../../interface/masterData.model";
+import { DataDescription, Options } from "../../../interface/masterData.model";
export class GoalData {
public static goalType: Options[] = [
diff --git a/src/app/models/data/home-page.data.ts b/src/app/models/data/home-page.data.ts
new file mode 100644
index 00000000..d8ed988b
--- /dev/null
+++ b/src/app/models/data/home-page.data.ts
@@ -0,0 +1,14 @@
+export const homePageParagraphs = [
+ "Summarize is an app that helps you to manage your Time, Money, and work which includes but is not limited to subject-wise studies, notes, to-do's, or office works.",
+ "Thinking when to use Summarize? To live better and managed, one should recall what they have done throughout the day daily before sleep . Also listing tasks for the next day and setting priorities increases the chances to get them done.",
+ "Currently, Summarize is under development, we will keep on adding features one by one. Till then, please feel free to manage Achievements of day, Expenses, Studies, and Time. It is a web-app that can be easily installed on all devices ( Mobile & PC ). Install the app on your devices to keep in sync and to check how to install visit our Help page.",
+ "Note: Your data will not be used for any advertisement or offering any deal/scheme. Also our app don't need any permission to work on your device. Your privacy is important to us. For more queries, you can contact us through the support page. We are also open to feature requests and suggestions.",
+];
+
+export const fabActionButtonsAtHome = [
+ { title: "Goal", color: "secondary", url: "/goal", icon: "bulb" },
+ { title: "Expenses", color: "success", url: "/expenses", icon: "cash" },
+ { title: "Studies", color: "primary", url: "/studies", icon: "book" },
+ { title: "Time", color: "danger", url: "/time", icon: "hourglass" },
+ { title: "Moments", color: "warning", url: "/moments", icon: "sparkles" },
+];
diff --git a/src/app/models/interface/expense.interface.ts b/src/app/models/interface/expense.interface.ts
index 1036630f..2e634a1b 100644
--- a/src/app/models/interface/expense.interface.ts
+++ b/src/app/models/interface/expense.interface.ts
@@ -13,5 +13,6 @@ export interface ExpenseData {
seconds: number;
nanoseconds: number;
};
+ reimburseable?: boolean;
idField?: string;
}
diff --git a/src/app/models/interface/goals.interface.ts b/src/app/models/interface/goals.interface.ts
index 4f5e421e..09aeeb02 100644
--- a/src/app/models/interface/goals.interface.ts
+++ b/src/app/models/interface/goals.interface.ts
@@ -1,15 +1,16 @@
-export interface GoalData {
- createdAt?: { seconds: number; nanoseconds: number };
+export interface IGoalData {
+ idField?: string;
+ title: string;
+ gTerm?: string;
type: string;
- gTerm: string;
- reward: string;
- progress: number;
date: string;
- title: string;
- description: string;
- updatedAt?: { seconds: number; nanoseconds: number };
- penalty: string;
- resource: string;
- actionSteps: string;
- idField?: string;
+ progress: number;
+ reward?: string;
+ resource?: string;
+ description?: string;
+ actionSteps?: string;
+ penalty?: string;
+ createdAt?: any;
+ updatedAt?: any;
+ completedOn?: Date;
}
diff --git a/src/app/models/interface/masterData.model.ts b/src/app/models/interface/masterData.model.ts
index d71f5fa6..3ab0cfed 100644
--- a/src/app/models/interface/masterData.model.ts
+++ b/src/app/models/interface/masterData.model.ts
@@ -10,7 +10,14 @@ export interface seoMetaTag {
content: string;
}
-export interface Expense {}
+export interface Expense {
+ spendedOn: string;
+ type: string;
+ amount: number;
+ date: string;
+ description: string;
+ idField?: string; // Added optional property for Firestore document ID
+}
export interface Options {
title: string;
value: string | Date | null;
diff --git a/src/app/models/interface/speechRecognition.interface.ts b/src/app/models/interface/speechRecognition.interface.ts
new file mode 100644
index 00000000..510bbbe8
--- /dev/null
+++ b/src/app/models/interface/speechRecognition.interface.ts
@@ -0,0 +1,9 @@
+export interface SpeechRecognitionEvent {
+ resultIndex: number;
+ results: {
+ isFinal: boolean;
+ [index: number]: {
+ transcript: string;
+ };
+ }[];
+}
diff --git a/src/app/models/pipe/time/twelve-hour-format.pipe.ts b/src/app/models/pipe/time/twelve-hour-format.pipe.ts
index 1f7c7654..8777fb5f 100644
--- a/src/app/models/pipe/time/twelve-hour-format.pipe.ts
+++ b/src/app/models/pipe/time/twelve-hour-format.pipe.ts
@@ -1,7 +1,8 @@
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
- name: "twelveHourFormat",
+ name: "twelveHourFormat",
+ standalone: false
})
export class TwelveHourFormatPipe implements PipeTransform {
transform(value: string): string {
diff --git a/src/app/pages/about/about.page.ts b/src/app/pages/about/about.page.ts
index 7ecd639f..f129ddb8 100644
--- a/src/app/pages/about/about.page.ts
+++ b/src/app/pages/about/about.page.ts
@@ -6,9 +6,10 @@ import { SeoService } from "src/app/services/seo/seo.service";
import { RealTimeDataBaseService } from "src/app/shared/db/real-time-data-base.service";
@Component({
- selector: "app-about",
- templateUrl: "./about.page.html",
- styleUrls: ["./about.page.scss"],
+ selector: "app-about",
+ templateUrl: "./about.page.html",
+ styleUrls: ["./about.page.scss"],
+ standalone: false
})
export class AboutPage implements OnInit, AfterViewInit, AfterContentInit {
pageTitle = "About Summarize";
@@ -49,7 +50,6 @@ export class AboutPage implements OnInit, AfterViewInit, AfterContentInit {
}
getRecentUpdateInfo(): void {
this.rtdb.getAboutData("recentUpdate").subscribe((data) => {
- console.log(data);
this.releaseDetails = data;
});
}
diff --git a/src/app/pages/about/components/hof/hof.component.ts b/src/app/pages/about/components/hof/hof.component.ts
index 637e03f5..7d7e9d1d 100644
--- a/src/app/pages/about/components/hof/hof.component.ts
+++ b/src/app/pages/about/components/hof/hof.component.ts
@@ -1,9 +1,10 @@
import { Component } from "@angular/core";
@Component({
- selector: "app-hof",
- templateUrl: "./hof.component.html",
- styleUrls: ["./hof.component.scss"],
+ selector: "app-hof",
+ templateUrl: "./hof.component.html",
+ styleUrls: ["./hof.component.scss"],
+ standalone: false
})
export class HofComponent {
pageTitle = "Hall of Frame";
diff --git a/src/app/pages/about/components/howto/howto.component.ts b/src/app/pages/about/components/howto/howto.component.ts
index ba0ea683..fcfbdca6 100644
--- a/src/app/pages/about/components/howto/howto.component.ts
+++ b/src/app/pages/about/components/howto/howto.component.ts
@@ -1,9 +1,10 @@
import { Component } from "@angular/core";
@Component({
- selector: "app-howto",
- templateUrl: "./howto.component.html",
- styleUrls: ["./howto.component.scss"],
+ selector: "app-howto",
+ templateUrl: "./howto.component.html",
+ styleUrls: ["./howto.component.scss"],
+ standalone: false
})
export class HowtoComponent {
}
diff --git a/src/app/pages/about/components/update/update.component.ts b/src/app/pages/about/components/update/update.component.ts
index 7b1fcc6b..df506535 100644
--- a/src/app/pages/about/components/update/update.component.ts
+++ b/src/app/pages/about/components/update/update.component.ts
@@ -1,9 +1,10 @@
import { Component } from "@angular/core";
@Component({
- selector: "app-update",
- templateUrl: "./update.component.html",
- styleUrls: ["./update.component.scss"],
+ selector: "app-update",
+ templateUrl: "./update.component.html",
+ styleUrls: ["./update.component.scss"],
+ standalone: false
})
export class UpdateComponent {
pageTitle = "Updates";
diff --git a/src/app/pages/achievement/achievement.page.ts b/src/app/pages/achievement/achievement.page.ts
index 1ca4e5e3..4c94ef24 100644
--- a/src/app/pages/achievement/achievement.page.ts
+++ b/src/app/pages/achievement/achievement.page.ts
@@ -6,9 +6,10 @@ import { AchievementsService } from "src/app/services/achievements/achievements.
import { SeoService } from "src/app/services/seo/seo.service";
@Component({
- selector: "app-achievement",
- templateUrl: "./achievement.page.html",
- styleUrls: ["./achievement.page.scss"],
+ selector: "app-achievement",
+ templateUrl: "./achievement.page.html",
+ styleUrls: ["./achievement.page.scss"],
+ standalone: false
})
export class AchievementPage implements OnInit {
pageTitle = "Achievement";
diff --git a/src/app/pages/achievement/create-goal/create-goal.component.ts b/src/app/pages/achievement/create-goal/create-goal.component.ts
index f66e96ce..94c68645 100644
--- a/src/app/pages/achievement/create-goal/create-goal.component.ts
+++ b/src/app/pages/achievement/create-goal/create-goal.component.ts
@@ -1,9 +1,10 @@
import { Component } from "@angular/core";
@Component({
- selector: "app-create-goal",
- templateUrl: "./create-goal.component.html",
- styleUrls: ["./create-goal.component.scss"],
+ selector: "app-create-goal",
+ templateUrl: "./create-goal.component.html",
+ styleUrls: ["./create-goal.component.scss"],
+ standalone: false
})
export class CreateGoalComponent {
}
diff --git a/src/app/pages/analytics/analytics.page.ts b/src/app/pages/analytics/analytics.page.ts
index 51af1e06..0866e7a0 100644
--- a/src/app/pages/analytics/analytics.page.ts
+++ b/src/app/pages/analytics/analytics.page.ts
@@ -1,9 +1,10 @@
import { Component } from "@angular/core";
@Component({
- selector: "app-analytics",
- templateUrl: "./analytics.page.html",
- styleUrls: ["./analytics.page.scss"],
+ selector: "app-analytics",
+ templateUrl: "./analytics.page.html",
+ styleUrls: ["./analytics.page.scss"],
+ standalone: false
})
export class AnalyticsPage {
pageTitle = "Analytics";
diff --git a/src/app/pages/expense/components/analyze/analyze.component.html b/src/app/pages/expense/components/analyze/analyze.component.html
index 5c9cbe12..46f03474 100644
--- a/src/app/pages/expense/components/analyze/analyze.component.html
+++ b/src/app/pages/expense/components/analyze/analyze.component.html
@@ -4,12 +4,10 @@
{{ title }}
-
+
+
+
+
@@ -17,48 +15,83 @@
-
+
- ₹ {{ totalAmount }}
+ ₹ {{ totalStats.totalAmount }}
Total Expenses
- ₹ {{totalBudget}}
+ ₹ {{ totalBudget }}
Budget
-
- ₹
- Calculating
- {{ currentExpense }}
-
- Remaining Balance
+ {{ zeroExpenseDays }}
+ Zero Expense Days
-
+
- ₹ {{currentBudget}}
- Exceeding Amount
+ ₹ {{ Math.abs(remainingBalance) }}
+ {{ remainingBalance < 0 ? "Exceeding Amount" : "Remaining Balance" }}
- Under migration for new UI
Will be available soon!
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
Current month category wise expenses
-
-
-
-->
diff --git a/src/app/pages/expense/components/analyze/analyze.component.scss b/src/app/pages/expense/components/analyze/analyze.component.scss
index 1e5c273c..e4a419eb 100644
--- a/src/app/pages/expense/components/analyze/analyze.component.scss
+++ b/src/app/pages/expense/components/analyze/analyze.component.scss
@@ -1,12 +1,71 @@
+:host {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
.overview-cards {
- display: flex;
- flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
flex-grow: 0 1;
align-items: center;
- justify-content: center;
+ margin: 2rem 2rem 0 2rem;
+ justify-content: space-between;
ion-card {
- min-width: 300px;
+ min-width: fit-content;
+ max-width: 23%;
+ width: 22%;
+ margin: 0;
+
+ ion-card-header {
+ padding: 1rem;
+ text-align: center;
+
+ ion-card-title {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+ }
+ @media screen and (max-width: 576px) {
+ max-width: 100%;
+ width: 100%;
+ margin: .5rem 0;
+
+ }
+ }
+}
+
+.charts-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1rem;
+ padding: 1rem;
+ margin: 1rem;
+ margin-bottom: 2rem;
+
+ .chart-card {
+ width: 100%;
+ min-height: 300px;
+ height: 400px; // Fixed height for better visibility
+ margin: 0;
+
+ ion-card-content {
+ padding: 1rem;
+ height: 300px;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ canvas {
+ width: 100% !important;
+ height: 100% !important;
+ max-height: 350px; // Prevent charts from getting too tall
+ }
+ }
}
}
@@ -32,13 +91,37 @@
position: relative;
height: auto;
overflow: auto;
- width: min(500px,100%);
+ width: min(500px, 100%);
canvas {
display: block;
position: relative;
- width: min(500px,100%);
+ width: min(500px, 100%);
margin-top: 10px;
height: auto;
}
}
+
+@media (max-width: 576px) {
+ .overview-cards {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .charts-container {
+ grid-template-columns: 1fr;
+
+ .chart-card {
+ min-height: 250px;
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ .overview-cards {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .charts-container {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/app/pages/expense/components/analyze/analyze.component.ts b/src/app/pages/expense/components/analyze/analyze.component.ts
index ee92f15b..f6f6d2d9 100644
--- a/src/app/pages/expense/components/analyze/analyze.component.ts
+++ b/src/app/pages/expense/components/analyze/analyze.component.ts
@@ -1,328 +1,442 @@
-import {
- AfterViewInit,
- Component,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { ChartConfiguration, ChartOptions } from "chart.js";
-import { CustomDate } from "src/app/models/class/date/custom-date";
-import { ExpenseService } from "src/app/services/expense/expense.service";
import { BaseChartDirective } from "ng2-charts";
import { Router } from "@angular/router";
import { Budget } from "../../modules/budget";
import { MonthlyExpense } from "../../modules/monthly-expense";
+import { Analyze } from "../../modules/analyze";
import { ToasterService } from "src/app/services/toaster/toaster.service";
import { Expense } from "src/app/models/interface/masterData.model";
+import { FilterExpenseComponent } from "../../components/filter-expense/filter-expense.component";
+import { ModalController } from "@ionic/angular";
+import { Chart, registerables } from "chart.js";
+import { Subscription } from "rxjs";
+import { ExpenseService } from "src/app/services/expense/expense.service";
+Chart.register(...registerables);
@Component({
- selector: "app-analyze",
- templateUrl: "./analyze.component.html",
- styleUrls: ["./analyze.component.scss"],
+ selector: "app-analyze",
+ templateUrl: "./analyze.component.html",
+ styleUrls: ["./analyze.component.scss"],
+ standalone: false
})
export class AnalyzeComponent implements OnInit, AfterViewInit, OnDestroy {
- @ViewChild(BaseChartDirective) chartA!: BaseChartDirective;
- @ViewChild(BaseChartDirective) chartB!: BaseChartDirective;
- @ViewChild("monthlyChart") monthlyChart!: BaseChartDirective;
- @ViewChild("totalChart") totalChart!: BaseChartDirective;
- @HostListener("window:resize")
- // Graph resize
- onResize(): void {
- this.setGraphHeight();
- this.setGraphWidth();
- }
- graphHeight: number = 400;
- graphWidth: number = 400;
+ @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+ @ViewChild("lineChart") lineChart?: BaseChartDirective;
+ @ViewChild("pieChart") pieChart?: BaseChartDirective;
+ @ViewChild("doughnutChart") doughnutChart?: BaseChartDirective;
+ @ViewChild("barChart") barChart?: BaseChartDirective;
- // Note: Component Metadata and default variable
+ private chartInitialized = false;
+
+ private subscription = new Subscription();
title = "Analyze Expenses";
- totalBudget: number = 0;
- currentBudget: number = 0;
- currentExpense: number = 0;
- budget: number = 0;
expenseData: Expense[] = [];
- currentMonthExpense: Expense[] = [];
- // Info: Fetch data for analysis from models
- currentMonth = new CustomDate().getCurrentMonth();
- month: number = new Date().getMonth() + 1;
- year = new Date().getFullYear();
- daysInMonth: number = new Date(new Date().getFullYear(), this.month, 0).getDate();
-
- // Info: Expense data : Monthly or by filter
- Expense: any = [];
-
- // Info: Data for graph : Daily, Monthly, budget
- dailyExpense: number[] = [];
- dailyExpenseLimit: number[] = [];
- monthlyExpense: number[] = [];
- monthlyExpenseLimit: number[] = [];
- totalAmount: number = 0;
- totalExpense: number[] = [];
- totalExpenseLimit: number[] = [];
- categoryExpense: number[] = [];
+ protected readonly Math = Math; // Add Math to template
- constructor(
- private expenseService: ExpenseService,
- private router: Router,
- private toaster: ToasterService
- ) {}
+ // Analysis data
+ totalStats: { totalAmount: number; totalCount: number } = { totalAmount: 0, totalCount: 0 };
+ categoryData: { type: string; amount: number }[] = [];
+ spentOnData: { spentOn: string; amount: number }[] = [];
+ zeroExpenseDays: number = 0;
+ monthlyData: any;
- ngOnInit() {
- this.expenseData = this.expenseService.analyzeExpense;
- if (this.expenseData === undefined || this.expenseData.length === 0) {
- this.toaster.showToast("Expense not selected, redirecting to Expense page", "warning");
- this.router.navigateByUrl("expenses");
- } else {
- this.toaster.showToast("Analyzing Expense", "primary");
- console.log("Data received : ", this.expenseData);
- this.getDataOnInit();
- }
- this.setGraphHeight();
- this.setGraphWidth();
- }
+ // Budget info
+ totalAmount: number = 0;
+ totalBudget: number = 0;
+ currentBudget: number = 0;
+ remainingBalance: number = 0;
- // Info: Line graph setup
- public lineChartData: ChartConfiguration<"line">["data"] = {
- labels: Array(this.daysInMonth)
- .fill(this.daysInMonth)
- .map((x, i) => (x = `${i + 1}-${this.month}-${this.year}`)),
- datasets: [],
+ // Line chart configuration for monthly expense comparison
+ lineChartConfig: ChartConfiguration = {
+ type: "line",
+ data: {
+ labels: [],
+ datasets: [
+ {
+ data: [],
+ label: "Daily Expense",
+ borderColor: "#3880ff",
+ backgroundColor: "rgba(56, 128, 255, 0.1)",
+ borderWidth: 2,
+ tension: 0.3,
+ fill: true,
+ },
+ {
+ data: [],
+ label: "Cumulative Expense",
+ borderColor: "#eb445a",
+ backgroundColor: "rgba(235, 68, 90, 0.1)",
+ borderWidth: 2,
+ tension: 0.3,
+ fill: true,
+ },
+ {
+ data: [],
+ label: "Budget Line",
+ borderColor: "#2dd36f",
+ backgroundColor: "rgba(45, 211, 111, 0.1)",
+ borderWidth: 2,
+ tension: 0,
+ borderDash: [5, 5],
+ fill: false,
+ },
+ ],
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ position: "top",
+ },
+ title: {
+ display: true,
+ text: "Monthly Expense Trend",
+ },
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: "Amount (₹)",
+ },
+ },
+ x: {
+ title: {
+ display: true,
+ text: "Date",
+ },
+ },
+ },
+ },
};
- public totalExpenseData: ChartConfiguration<"line">["data"] = {
- labels: [],
- datasets: [
- {
- data: [],
- label: "Total Expense",
- fill: false,
- tension: 0.5,
- borderColor: "lime",
- backgroundColor: "#00ff00",
+ // Pie chart configuration
+ pieChartConfig: ChartConfiguration = {
+ type: "pie",
+ data: {
+ labels: [],
+ datasets: [
+ {
+ data: [],
+ backgroundColor: ["#3880ff", "#eb445a", "#2dd36f", "#ffc409", "#92949c", "#5260ff"],
+ borderWidth: 1,
+ },
+ ],
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ position: "top",
+ },
+ title: {
+ display: true,
+ text: "Expense by Type",
+ },
},
- ],
+ },
};
- public currentMonthExpenseData: ChartConfiguration<"line">["data"] = {
- labels: [],
- datasets: [],
+ // Doughnut chart configuration
+ doughnutChartConfig: ChartConfiguration = {
+ type: "doughnut",
+ data: {
+ labels: [],
+ datasets: [
+ {
+ data: [],
+ backgroundColor: ["#3880ff", "#eb445a", "#2dd36f", "#ffc409", "#92949c", "#5260ff"],
+ borderWidth: 1,
+ },
+ ],
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ position: "top",
+ },
+ title: {
+ display: true,
+ text: "Expense by Category",
+ },
+ },
+ },
};
- public lineChartOptions: ChartOptions = {
- responsive: false,
- plugins: {},
+ // Bar chart configuration
+ barChartConfig: ChartConfiguration = {
+ type: "bar",
+ data: {
+ labels: ["Zero Expense Days"],
+ datasets: [
+ {
+ data: [0], // Will be updated with actual count
+ label: "Count",
+ backgroundColor: "#3880ff",
+ borderColor: "#3880ff",
+ borderWidth: 1,
+ },
+ ],
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false, // Hide legend since we only have one value
+ },
+ title: {
+ display: true,
+ text: "Zero Expense Days",
+ },
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: "Count",
+ },
+ },
+ },
+ },
};
- public monthlyChartOptions: ChartOptions = {
- responsive: false,
- plugins: {},
+ private chartStates = {
+ line: false,
+ pie: false,
+ doughnut: false,
+ bar: false,
};
- public lineChartLegend = true;
- public monthlyChartLegend = true;
-
- // 1. Get current month
- // 2. Convert data to date wise expense.
- // 3. Convert data to category wise expense.
- // 4. Line graph
- // 5. Pie chart
- // 6. Bar graph
- // 7. Load data to graph
-
- async getDataOnInit() {
- this.currentMonthExpense = await this.expenseService.getCustomExpenses();
- // let total_expense: any = sessionStorage.getItem("total_expense");
- // let total_budget: any = sessionStorage.getItem("budget");
- // if (total_expense !== undefined || total_budget !== undefined) {
- // this.totalExpense = JSON.parse(total_expense);
- // this.dailyExpense = await this.getDailyExpenses(this.totalExpense);
- // } else {
- // this.router.navigateByUrl("expense");
- // }
- // this.currentBudget = await this.getCurrentBudget(this.currentMonth, total_budget);
+ private initializeChart(chart: BaseChartDirective | undefined, type: keyof typeof this.chartStates): boolean {
+ if (!chart || !this.chartInitialized) return false;
+ this.chartStates[type] = true;
+ return true;
}
- ngAfterViewInit() {
- // this.totalBudget = new Budget().getTotalBudget();
- this.currentExpense = new MonthlyExpense().getCurrentExpense();
+ constructor(
+ private expenseService: ExpenseService,
+ private router: Router,
+ private toaster: ToasterService,
+ private modalController: ModalController,
+ ) {}
+
+ ngOnInit() {
+ this.subscription.add(
+ this.expenseService.analysisData$.subscribe((data) => {
+ if (!data || data.length === 0) {
+ this.toaster.showToast("No expense data found, redirecting to Expense page", "warning");
+ this.router.navigateByUrl("expenses");
+ return;
+ }
+ this.expenseData = data;
+ if (this.chartInitialized) {
+ this.analyzeData();
+ }
+ }),
+ );
}
- async getExpense(month: string) {
- await this.expenseService.getCustomExpenses("duration", month).subscribe(async (res: any) => {
- this.Expense = await res;
- });
+ ngAfterViewInit() {
+ // Wait for charts to be available
setTimeout(() => {
- this.updateCurrentMonthGraph(this.Expense.reverse());
- this.getTypeWiseExpense(this.Expense);
- }, 3000);
+ this.chartInitialized = true;
+ if (this.expenseData.length > 0) {
+ this.analyzeData();
+ }
+ }, 500); // Increased delay to ensure DOM is ready
}
- async getDailyExpenses(expenses: any[]): Promise
{
- if (expenses.length > 0) {
- const dailyExpenses: any[] = [];
- const uniqueDates = [...new Set(expenses.map((e) => e.date))];
- uniqueDates.forEach((date) => {
- const dailyAmount = expenses
- .filter((e) => e.date === date)
- .reduce((acc, curr) => acc + curr.amount, 0);
- dailyExpenses.push({ date, dailyAmount });
- });
- this.updateTotalGraph(dailyExpenses);
- return dailyExpenses;
- } else {
- return [];
+ async analyzeData() {
+ if (!this.chartInitialized) return;
+
+ try {
+ const analyzer = new Analyze();
+ const monthlyExpense = new MonthlyExpense();
+ const budgetHelper = new Budget();
+
+ // Get total stats for selected duration
+ this.totalStats = analyzer.getTotalStats(this.expenseData);
+ this.totalAmount = this.totalStats.totalAmount;
+
+ // Count zero expense days (where amount = 0 and type = saving)
+ this.zeroExpenseDays = this.expenseData.filter(
+ (expense) => expense.amount === 0 && expense.type === "saving",
+ ).length;
+
+ // Calculate budget for the selected duration
+ let startDate = this.expenseData[this.expenseData.length - 1]?.date;
+ let endDate = this.expenseData[0]?.date;
+
+ if (startDate && endDate) {
+ // Convert dates to proper format
+ const start = new Date(startDate);
+ const end = new Date(endDate);
+
+ let totalBudget = 0;
+ let currentDate = start;
+ const year = currentDate.getFullYear();
+ const month = currentDate.getMonth() + 1;
+ console.info("year", year);
+ console.info("month", month);
+ const monthBudget = await budgetHelper.getCurrentBudget(`${year}-${month.toString().padStart(2, "0")}`);
+ while (currentDate <= end) {
+ const daysInMonth = new Date(year, month, 0).getDate();
+
+ // Get budget for current month
+
+ if (currentDate.getMonth() === start.getMonth() && currentDate.getMonth() === end.getMonth()) {
+ // Same month - calculate for specific days
+ const dayCount = end.getDate() - start.getDate() + 1;
+ totalBudget += (monthBudget / daysInMonth) * dayCount;
+ } else if (currentDate.getMonth() === start.getMonth()) {
+ // First month - calculate remaining days
+ const dayCount = daysInMonth - start.getDate() + 1;
+ totalBudget += (monthBudget / daysInMonth) * dayCount;
+ } else if (currentDate.getMonth() === end.getMonth()) {
+ // Last month - calculate days until end
+ totalBudget += (monthBudget / daysInMonth) * end.getDate();
+ } else {
+ // Full month
+ totalBudget += monthBudget;
+ }
+
+ // Move to next month
+ currentDate.setMonth(currentDate.getMonth() + 1);
+ }
+
+ this.totalBudget = Math.round(totalBudget);
+ this.remainingBalance = this.totalBudget - this.totalAmount;
+ }
+
+ // Get category wise data
+ this.categoryData = analyzer.getCategoryWiseData(this.expenseData);
+ setTimeout(() => this.updatePieChart(), 100);
+
+ // Get spent on data
+ this.spentOnData = analyzer.getSpentOnWiseData(this.expenseData);
+ setTimeout(() => this.updateDoughnutChart(), 200);
+
+ // Get monthly analysis
+ this.monthlyData = monthlyExpense.getMonthlyData(this.expenseData, this.totalBudget);
+ setTimeout(() => this.updateLineChart(), 300);
+ setTimeout(() => this.updateBarChart(), 400);
+ } catch (error) {
+ console.error("Error analyzing data:", error);
+ this.toaster.showToast("Error analyzing expense data", "danger");
+ this.router.navigateByUrl("expenses");
}
}
- updateTotalGraph(expense: any[]) {
- const dates: any = [];
- const amount: any = [];
- expense.forEach((data: any, _index?: number) => {
- amount.push(data.dailyAmount);
- dates.push(data.date);
- this.totalAmount += data.dailyAmount;
- });
- this.totalExpenseData.labels = dates;
- this.totalExpenseData.datasets[0].data = amount;
- this.chartB.update();
- }
- async updateCurrentMonthGraph(expense: any[]) {
- const monthlyData = new MonthlyExpense().getMonthlyData(expense, this.currentBudget);
- this.currentMonthExpenseData.labels = monthlyData.dates;
- this.currentMonthExpenseData.datasets = [
- {
- data: monthlyData.dailyAmount,
- label: "Expense today",
- fill: false,
- tension: 0.5,
- borderColor: "blue",
- backgroundColor: "blue",
- pointRadius: 1,
- },
- {
- data: monthlyData.amount,
- label: "Expense till now",
- fill: false,
- tension: 0.5,
- borderColor: "purple",
- backgroundColor: "purple",
- },
- {
- data: monthlyData.budgetData,
- label: "Monthly Budget",
- fill: false,
- tension: 0.5,
- borderColor: "red",
- backgroundColor: "red",
- },
- ];
- this.currentExpense = monthlyData.incrementAmount;
- this.chartA.update();
- }
- setGraphHeight(): void {
- const screenHeight = window.innerHeight;
- if (screenHeight < 680) {
- this.graphHeight = 450;
- } else if (screenHeight > 680) {
- this.graphHeight = 400;
- } else {
- this.graphHeight = 400;
+ // Chart update methods
+ updateLineChart() {
+ if (!this.monthlyData || !this.initializeChart(this.lineChart, "line")) return;
+
+ try {
+ this.lineChartConfig.data.labels = this.monthlyData.dates;
+ this.lineChartConfig.data.datasets[0].data = this.monthlyData.dailyAmount;
+ this.lineChartConfig.data.datasets[1].data = this.monthlyData.amount;
+ this.lineChartConfig.data.datasets[2].data = Array(this.monthlyData.dates.length).fill(this.currentBudget);
+ this.lineChartConfig.data.datasets[3].data = Array(this.monthlyData.dates.length).fill(
+ this.currentBudget / this.monthlyData.dates.length,
+ );
+
+ requestAnimationFrame(() => {
+ this.lineChart?.render();
+ });
+ } catch (error) {
+ console.error("Error updating line chart:", error);
}
}
- setGraphWidth(): void {
- const screenWidth = window.innerWidth;
- if (screenWidth < 680) {
- this.graphWidth = 500;
- } else if (680 < screenWidth && screenWidth > 780) {
- this.graphWidth = (screenWidth * 2) / 3;
- } else if (780 < screenWidth && screenWidth < 1080) {
- this.graphWidth = 1200;
- } else {
- this.graphWidth = screenWidth / 2;
+
+ updatePieChart() {
+ if (!this.categoryData || !this.initializeChart(this.pieChart, "pie")) return;
+
+ try {
+ this.pieChartConfig.data.labels = this.categoryData.map((item) => item.type);
+ this.pieChartConfig.data.datasets[0].data = this.categoryData.map((item) => item.amount);
+
+ requestAnimationFrame(() => {
+ this.pieChart?.render();
+ });
+ } catch (error) {
+ console.error("Error updating pie chart:", error);
}
}
- // Info: Pie chart setup
- /* Pie */
- public pieChartOptions: ChartOptions<"pie"> = {
- responsive: true,
- };
- public pieChartLabels = ["All"];
- public pieChartDatasets = [
- {
- data: [100],
- },
- ];
- public pieChartLegend = true;
- public pieChartPlugins = [];
-
- // /* Bar Chart */
- // public barChartLegend = true;
- // public barChartPlugins = [];
-
- // public barChartData: ChartConfiguration<'bar'>['data'] = {
- // labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
- // datasets: [
- // {
- // data: [65, 59, 80, 81, 56, 55, 40],
- // label: 'Expenses',
- // backgroundColor: 'aqua'
- // },
- // { data: [28, 48, 40, 19, 86, 27, 90], label: 'Budget', backgroundColor: 'orange' }
- // ]
- // };
-
- // public barChartOptions: ChartConfiguration<'bar'>['options'] = {
- // responsive: false,
- // };
- async getTypeWiseExpense(expenses: any[]) {
- if (expenses.length > 0) {
- const expenseTypes: any[] = [];
- const uniqueTypes = [...new Set(expenses.map((e) => e.type))];
- uniqueTypes.forEach((type) => {
- const amount = expenses
- .filter((e) => e.type === type)
- .reduce((acc, curr) => acc + curr.amount, 0);
- expenseTypes.push({ type, amount });
+ updateDoughnutChart() {
+ if (!this.spentOnData || !this.initializeChart(this.doughnutChart, "doughnut")) return;
+
+ try {
+ this.doughnutChartConfig.data.labels = this.spentOnData.map((item) => item.spentOn);
+ this.doughnutChartConfig.data.datasets[0].data = this.spentOnData.map((item) => item.amount);
+
+ requestAnimationFrame(() => {
+ this.doughnutChart?.render();
});
- this.updateTypeWisePie(expenseTypes);
- return expenseTypes;
- } else {
- return [];
+ } catch (error) {
+ console.error("Error updating doughnut chart:", error);
}
}
- updateTypeWisePie(expenses: any) {
- this.pieChartLabels = [];
- this.pieChartDatasets[0].data = [];
- expenses.forEach((data: any) => {
- this.pieChartLabels.push(data.type.toUpperCase());
- this.pieChartDatasets[0].data.push(data.amount);
- });
+ updateBarChart() {
+ if (this.initializeChart(this.barChart, "bar")) {
+ this.barChartConfig.data.datasets[0].data = [this.zeroExpenseDays];
+ this.barChart?.update();
+ }
}
- /**External Functions */
- async getCurrentBudget(currentMonth: string, budget: any): Promise {
- let retrievedBudget: any = 0;
- retrievedBudget = budget;
- let currentBudget: number = 0;
- if (retrievedBudget) {
- const budget = JSON.parse(retrievedBudget);
- const budgetForThisMonth = budget.find((item: any) => item.month === currentMonth);
- if (budgetForThisMonth) {
- currentBudget = budgetForThisMonth.amount;
- } else {
- alert("Budget for the current month not found. Add budget first");
+ // Shared chart options
+ chartOptions: ChartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: "top",
+ },
+ title: {
+ display: true,
+ text: "Expense Analysis",
+ },
+ },
+ };
+
+ async openFilterModal() {
+ try {
+ const modal = await this.modalController.create({
+ component: FilterExpenseComponent,
+ });
+ await modal.present();
+
+ const { data } = await modal.onDidDismiss();
+ if (data) {
+ this.expenseService.getCustomExpenses(data).subscribe({
+ next: (expenses: Expense[]) => {
+ this.expenseData = expenses;
+ this.analyzeData();
+ },
+ error: (error) => {
+ console.error("Error getting filtered expenses:", error);
+ this.toaster.showToast("Error getting filtered expenses", "danger");
+ },
+ });
}
- } else {
- currentBudget = 0;
- alert(
- "There was some error getting your budget. Make sure you have added budget for this month."
- );
+ } catch (error) {
+ console.error("Error with filter modal:", error);
+ this.toaster.showToast("Error opening filter", "danger");
}
- return currentBudget;
+ }
+
+ ngOnDestroy() {
+ this.chartInitialized = false;
+ this.subscription.unsubscribe();
+ this.expenseService.clearAnalysisData();
}
returnToExpense() {
this.router.navigateByUrl("expenses");
diff --git a/src/app/pages/expense/components/analyze/analyze.module.ts b/src/app/pages/expense/components/analyze/analyze.module.ts
new file mode 100644
index 00000000..2d8aafd6
--- /dev/null
+++ b/src/app/pages/expense/components/analyze/analyze.module.ts
@@ -0,0 +1,23 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import { CommonModule, DatePipe } from "@angular/common";
+import { IonicModule } from "@ionic/angular";
+import { FormsModule } from "@angular/forms";
+import { BaseChartDirective, provideCharts, withDefaultRegisterables } from "ng2-charts";
+import { AnalyzeComponent } from "./analyze.component";
+import { RouterModule, Routes } from "@angular/router";
+import { SharedModule } from "src/app/shared/module/shared-module/shared-module.module";
+
+const routes: Routes = [
+ {
+ path: "",
+ component: AnalyzeComponent,
+ },
+];
+
+@NgModule({
+ declarations: [AnalyzeComponent],
+ imports: [CommonModule, IonicModule, FormsModule, RouterModule.forChild(routes), BaseChartDirective, SharedModule],
+ providers: [DatePipe, provideCharts(withDefaultRegisterables())],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AnalyzeModule {}
diff --git a/src/app/pages/expense/components/edit-expense/edit-expense.component.ts b/src/app/pages/expense/components/edit-expense/edit-expense.component.ts
index 8ddc1e2b..6b2d1f19 100644
--- a/src/app/pages/expense/components/edit-expense/edit-expense.component.ts
+++ b/src/app/pages/expense/components/edit-expense/edit-expense.component.ts
@@ -1,9 +1,10 @@
import { Component } from "@angular/core";
@Component({
- selector: "app-edit-expense",
- templateUrl: "./edit-expense.component.html",
- styleUrls: ["./edit-expense.component.scss"],
+ selector: "app-edit-expense",
+ templateUrl: "./edit-expense.component.html",
+ styleUrls: ["./edit-expense.component.scss"],
+ standalone: false
})
export class EditExpenseComponent {
}
diff --git a/src/app/pages/expense/components/expense-card/expense-card.component.ts b/src/app/pages/expense/components/expense-card/expense-card.component.ts
index 3c36f720..7e379024 100644
--- a/src/app/pages/expense/components/expense-card/expense-card.component.ts
+++ b/src/app/pages/expense/components/expense-card/expense-card.component.ts
@@ -1,9 +1,10 @@
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from "@angular/core";
@Component({
- selector: "app-expense-card",
- templateUrl: "./expense-card.component.html",
- styleUrls: ["./expense-card.component.scss"],
+ selector: "app-expense-card",
+ templateUrl: "./expense-card.component.html",
+ styleUrls: ["./expense-card.component.scss"],
+ standalone: false
})
export class ExpenseCardComponent implements OnInit {
@Input() expenseItem: any;
diff --git a/src/app/pages/expense/components/filter-expense/filter-expense.component.html b/src/app/pages/expense/components/filter-expense/filter-expense.component.html
new file mode 100644
index 00000000..44797790
--- /dev/null
+++ b/src/app/pages/expense/components/filter-expense/filter-expense.component.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/expense/components/filter-expense/filter-expense.component.scss b/src/app/pages/expense/components/filter-expense/filter-expense.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/expense/components/filter-expense/filter-expense.component.spec.ts b/src/app/pages/expense/components/filter-expense/filter-expense.component.spec.ts
new file mode 100644
index 00000000..b8f45552
--- /dev/null
+++ b/src/app/pages/expense/components/filter-expense/filter-expense.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { FilterExpenseComponent } from "./filter-expense.component";
+
+describe("FilterExpenseComponent", () => {
+ let component: FilterExpenseComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FilterExpenseComponent ],
+ imports: [IonicModule.forRoot()]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(FilterExpenseComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ }));
+
+ it("should create", () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/expense/components/filter-expense/filter-expense.component.ts b/src/app/pages/expense/components/filter-expense/filter-expense.component.ts
new file mode 100644
index 00000000..1f69c1cf
--- /dev/null
+++ b/src/app/pages/expense/components/filter-expense/filter-expense.component.ts
@@ -0,0 +1,128 @@
+import { DatePipe } from "@angular/common";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { IonModal } from "@ionic/angular";
+import { CustomDate } from "src/app/models/class/date/custom-date";
+import { ExpenseStaticData } from "src/app/models/class/static/expense/expense-data";
+import { Options } from "src/app/models/interface/masterData.model";
+
+interface FilterData {
+ filterCategory: string;
+ parameter?: string;
+ duration?: string;
+ customRange?: { start: string; end: string };
+}
+
+@Component({
+ selector: "app-filter-expense",
+ templateUrl: "./filter-expense.component.html",
+ styleUrls: ["./filter-expense.component.scss"],
+ standalone: false
+})
+export class FilterExpenseComponent implements OnInit {
+ @Output() filterApplied = new EventEmitter();
+ @Output() cancel = new EventEmitter();
+ @Input() modal!: IonModal;
+
+ // New filter state variables
+ filterCategory: "spentOn" | "type" | "duration" = "spentOn";
+ selectedOption: string = "self"; // for spentOn or type filter
+ selectedDuration: string = ""; // holds a value from durationFilter list
+ fromDate: string = "";
+ toDate: string = "";
+ title = "Filter Expenses";
+
+ // Use for options display
+ spentOnOptions = ExpenseStaticData.spentOn;
+ expenseTypeOptions = ExpenseStaticData.expenseTypes;
+ dateToday: string | null = this.datePipe.transform(new Date(), "yyyy-MM-dd");
+ weekBackDate: string | null = this.datePipe.transform(new CustomDate().getWeekBackDate(), "yyyy-MM-dd");
+ // Duration options – last value is 'custom'
+ durationFilter: Options[] = [
+ { title: "Today", value: this.dateToday },
+ { title: "7 Days", value: this.weekBackDate },
+ { title: "30 Days", value: this.datePipe.transform(new CustomDate().getLastMonthDate(), "yyyy-MM-dd") },
+ { title: "365 Days", value: this.datePipe.transform(new CustomDate().getLastYearDate(), "yyyy-MM-dd") },
+ { title: "This Month", value: new CustomDate().getThisMonth() },
+ { title: "This Year", value: new CustomDate().getThisYear() },
+ { title: "Custom", value: "custom" },
+ ];
+
+ constructor(private datePipe: DatePipe) {}
+
+ ngOnInit() {
+ console.log("Filter expense component initialized");
+ this.loadDefaultFilters();
+ }
+
+ applyFilter(): void {
+ console.log("Filter applied");
+ const filterData: FilterData = { filterCategory: this.filterCategory };
+ if (this.selectedDuration === "custom") {
+ filterData.customRange = { start: this.fromDate, end: this.toDate };
+ } else {
+ filterData.duration = this.selectedDuration;
+ }
+ if (this.filterCategory === "spentOn" || this.filterCategory === "type") {
+ filterData.parameter = this.selectedOption;
+ }
+ localStorage.setItem("expenseFilters", JSON.stringify(filterData));
+ // Removed emit call as it is not needed, modal.dismiss(filterData) sends data to the parent.
+ this.modal.dismiss(filterData);
+ }
+
+ // Update the selected filter category when changed.
+ onFilterCategoryChange(category: "spentOn" | "type" | "duration"): void {
+ this.filterCategory = category;
+ // Reset option if category changes.
+ if (category === "spentOn") {
+ this.selectedOption = "self";
+ } else if (category === "type") {
+ this.selectedOption = this.expenseTypeOptions[0]?.value || "";
+ }
+ }
+
+ onDurationChange(value: string): void {
+ this.selectedDuration = value;
+ // When custom is selected, clear fromDate/toDate.
+ if (value !== "custom") {
+ this.fromDate = "";
+ this.toDate = "";
+ } else {
+ this.fromDate = new CustomDate().getThisMonth() ?? "";
+ this.toDate = this.dateToday ?? "";
+ }
+ }
+
+ // Load stored filter data if available
+ loadDefaultFilters(): void {
+ const stored = localStorage.getItem("expenseFilters");
+ if (stored) {
+ try {
+ const savedFilters: FilterData = JSON.parse(stored);
+ this.filterCategory = savedFilters.filterCategory as "spentOn" | "type" | "duration";
+ if (this.filterCategory === "spentOn" || this.filterCategory === "type") {
+ this.selectedOption = savedFilters.parameter || (this.filterCategory === "spentOn" ? "self" : "");
+ }
+ if (savedFilters.duration) {
+ this.selectedDuration = savedFilters.duration;
+ }
+ if (savedFilters.customRange) {
+ this.fromDate = savedFilters.customRange.start;
+ this.toDate = savedFilters.customRange.end;
+ this.selectedDuration = "custom";
+ }
+ } catch (error) {
+ console.error("Error parsing stored filter data", error);
+ }
+ } else {
+ // fallback defaults
+ this.filterCategory = "spentOn";
+ this.selectedOption = "self";
+ this.selectedDuration = this.weekBackDate ?? "";
+ }
+ }
+
+ cancelFilter(): void {
+ this.cancel.emit();
+ }
+}
diff --git a/src/app/pages/expense/components/shopping-list/shopping-list.component.html b/src/app/pages/expense/components/shopping-list/shopping-list.component.html
new file mode 100644
index 00000000..8c122b51
--- /dev/null
+++ b/src/app/pages/expense/components/shopping-list/shopping-list.component.html
@@ -0,0 +1,207 @@
+
+
+ Shared Shopping Lists
+
+
+
+
+
+
+ Shared Shopping Lists
+
+
+
+
+
+
+
+ Add list
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+ Error loading lists: {{ errors["lists"]?.message }}
+
+
+
+
+
+
+ {{ list.name }}
+
+
+
+
+
+
+
+ Error loading items: {{ errors["items-" + list.key!]?.message }}
+
+
+
+
+
+
+
+
+ {{ itemEntry.value["name"] }}
+ Quantity: {{ itemEntry.value["quantity"] }}
+
+
+
+
+
+
+
+
+
+ No items in this list yet.
+
+
+
+
+ No items available
+
+
+
+
+
+
+
+
+
+
+
+ {{ showMembersForListId === list.key ? "Hide Members" : "Show Members" }}
+
+
+ Add Item
+
+
+ Delete List
+
+
+
+
+
+
+
+
+ Error loading members: {{ errors["members-" + list.key!]?.message }}
+
+
+
+
+
+ Members of {{ list.name }}
+
+
+
+
+ {{ member.profile.name || member.profile.email }}
+ {{ member.profile.email }}
+ (Owner)
+
+
+
+
+
+
+ No other members yet.
+
+
+
+
+
+
+ Invite
+
+
+
+
+ {{ errors["invite"]?.message }}
+
+
+
+
+
+
+
+
+
+ No shopping lists available. Create one or ask someone to invite you.
+
+
+
+
+ {{ errors["createList"]?.message }}
+
+
+
+
+
+
+
+
+
+
+ 0 Expense day
+
+
+
+ Shopping List
+
+
+
{{editMode?"Update":"Add"}} Expense
-
-
-
No Expenses found
- My Expenses
-
-
-
-
@@ -142,7 +136,12 @@
Set Goal
>
-
+
Submit
Reset
@@ -150,18 +149,86 @@ Set Goal
-
- Note: This Feature is under development. Please give us some time to complete it. Till then
- feel free to add goals. Manage goals will be available soon. If you feel you have already
- waited for long, ping me on
-
- LinkedIn
-
+ Note: This Feature is under development. Please give us some time to complete it. Till then feel free to add
+ goals. Manage goals will be available soon. If you feel you have already waited for long, ping me on
+ LinkedIn
-
+
+
+
+
+
+
+ {{goal.date}} : {{goal.type | uppercase }}
+ {{goal.type | titlecase}}
+
+ {{goal.title}}
+ {{goal.description}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{goal.date}} : {{goal.type | uppercase }}
+ {{goal.type | titlecase}}
+
+ {{goal.title}}
+ {{goal.description}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/goal/goal.page.ts b/src/app/pages/goal/goal.page.ts
index 8a5d6e55..51ff4ef9 100644
--- a/src/app/pages/goal/goal.page.ts
+++ b/src/app/pages/goal/goal.page.ts
@@ -1,56 +1,115 @@
import { DatePipe } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, HostListener, OnInit } from "@angular/core";
import { serverTimestamp } from "@angular/fire/firestore";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { CustomDate } from "src/app/models/class/date/custom-date";
import { SeoTags } from "src/app/models/class/seoTags/seo";
-import { GoalData } from "src/app/models/class/static/goal";
+import { GoalData } from "src/app/models/class/static/goal/goal";
+import { IGoalData } from "src/app/models/interface/goals.interface";
import { GoalService } from "src/app/services/goal/goal.service";
import { SeoService } from "src/app/services/seo/seo.service";
@Component({
- selector: "app-goal",
- templateUrl: "./goal.page.html",
- styleUrls: ["./goal.page.scss"],
+ selector: "app-goal",
+ templateUrl: "./goal.page.html",
+ styleUrls: ["./goal.page.scss"],
+ standalone: false
})
export class GoalPage implements OnInit {
pageTitle = "Goal";
title = SeoTags.pageTitle.goalPage;
- pageMetaTags = SeoTags.helpPageTags;
+ pageMetaTags = SeoTags.goalPageTags;
+
+ submissionInProgress = false;
+ dailyGoals: IGoalData[] = [];
+ priorityGoals: IGoalData[] = [];
+ isLargeScreen: boolean = false;
+
constructor(
private seoService: SeoService,
private fb: FormBuilder,
private goalService: GoalService,
private datePipe: DatePipe,
) {}
+
dateToday: string | null = this.datePipe.transform(new Date(), "yyyy-MM-dd");
goalType = GoalData.goalType;
goalFor = GoalData.goalFor;
goalForm: FormGroup = this.fb.group({
createdAt: [serverTimestamp()],
- date: [this.dateToday, [Validators.required, Validators.pattern("^[a-zA-Z 0-9 .,-]*$")]],
- progress: [
- 0,
- [Validators.required, Validators.pattern("^[0-9]*$"), Validators.max(100), Validators.min(0)],
- ],
+ date: [this.dateToday, [Validators.pattern("^[a-zA-Z 0-9 .,-]*$")]],
+ progress: [0, [Validators.pattern("^[0-9]*$"), Validators.max(100), Validators.min(0)]],
gTerm: ["Tomorrow", [Validators.required, Validators.pattern("^[a-zA-Z0-9 ]*$")]],
type: ["Studies", [Validators.required, Validators.pattern("^[a-zA-Z0-9 ]*$")]],
title: ["", [Validators.required, Validators.pattern("^[a-zA-Z0-9, -.]*$")]],
- reward: ["", [Validators.required, Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
- resource: ["", [Validators.required, Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
- description: ["", [Validators.required, Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
- actionSteps: ["", [Validators.required, Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
- penalty: ["", [Validators.required, Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
+ reward: ["", [Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
+ resource: ["", [Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
+ description: ["", [Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
+ actionSteps: ["", [Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
+ penalty: ["", [Validators.pattern("^[a-zA-Z0-9\n, -.]*$")]],
updatedAt: [serverTimestamp()],
});
+
rewardError = "Only alphabets and numbers allowed";
+
ngOnInit() {
this.seoService.seo(this.title, this.pageMetaTags);
+ this.loadGoals();
+ this.checkScreenSize(window.innerWidth);
}
- addGoal() {
- this.goalService.addGoal(this.goalForm.value);
+ @HostListener("window:resize", ["$event"])
+ onResize(event: any) {
+ this.checkScreenSize(event.target.innerWidth);
}
+
+ private checkScreenSize(width: number): void {
+ this.isLargeScreen = width > 600;
+ }
+
+ async addGoal() {
+ this.submissionInProgress = true;
+ await this.goalService.addGoal(this.goalForm.value);
+ this.submissionInProgress = false;
+ this.loadGoals();
+ }
+
+ async loadGoals() {
+ const userId = this.goalService.fs.userData.uid;
+ const dailyGoalsSnapshot = await this.goalService.goalCollection
+ .doc(userId)
+ .collection("dailyGoals")
+ .get()
+ .toPromise();
+ this.dailyGoals = dailyGoalsSnapshot.docs.map((doc) => ({ idField: doc.id, ...doc.data() }) as IGoalData);
+
+ const priorityGoalsSnapshot = await this.goalService.goalCollection
+ .doc(userId)
+ .collection("priorityGoals")
+ .get()
+ .toPromise();
+ this.priorityGoals = priorityGoalsSnapshot.docs.map((doc) => ({ idField: doc.id, ...doc.data() }) as IGoalData);
+ }
+
+ async markGoalAsCompleted(goalId: string) {
+ await this.goalService.markGoalAsCompleted(goalId);
+ this.loadGoals();
+ }
+
+ async markGoalAsUncompleted(goalId: string) {
+ await this.goalService.markGoalAsUncompleted(goalId);
+ this.loadGoals();
+ }
+
+ async deleteGoal(goal: GoalData, goalId: string) {
+ await this.goalService.deleteGoal(goal, goalId);
+ this.loadGoals();
+ }
+
+ editGoal(goal: IGoalData) {
+ // Implement the logic to edit the goal
+ }
+
dateUpdate() {
let targetDate = this.dateToday;
switch (this.goalForm.value.gTerm) {
diff --git a/src/app/pages/help/faq/faq.component.ts b/src/app/pages/help/faq/faq.component.ts
index 7de29484..27ee0bc7 100644
--- a/src/app/pages/help/faq/faq.component.ts
+++ b/src/app/pages/help/faq/faq.component.ts
@@ -4,9 +4,10 @@ import { serverTimestamp } from "@angular/fire/firestore";
import { SupportService } from "src/app/services/support/support.service";
@Component({
- selector: "app-faq",
- templateUrl: "./faq.component.html",
- styleUrls: ["./faq.component.scss"],
+ selector: "app-faq",
+ templateUrl: "./faq.component.html",
+ styleUrls: ["./faq.component.scss"],
+ standalone: false
})
export class FaqComponent {
title = "Contact";
diff --git a/src/app/pages/help/help.page.ts b/src/app/pages/help/help.page.ts
index 9b72b865..8368f12f 100644
--- a/src/app/pages/help/help.page.ts
+++ b/src/app/pages/help/help.page.ts
@@ -3,9 +3,10 @@ import { SeoTags } from "src/app/models/class/seoTags/seo";
import { SeoService } from "src/app/services/seo/seo.service";
@Component({
- selector: "app-help",
- templateUrl: "./help.page.html",
- styleUrls: ["./help.page.scss"],
+ selector: "app-help",
+ templateUrl: "./help.page.html",
+ styleUrls: ["./help.page.scss"],
+ standalone: false
})
export class HelpPage implements OnInit {
pageTitle = "Help & Support";
diff --git a/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.html b/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.html
index 5a8a7bd5..938e5e86 100644
--- a/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.html
+++ b/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.html
@@ -1,80 +1,115 @@
- Goals for {{ dateToday }}
-
+ Goals for {{ dateToday }}
+
-
-
- {{ item.title }}
-
-
-
-
-
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
No goals found.
-
- Add daily goal
-
-
+
+
+
+
+ Manage
+
+
+
+ Add
+
+
Priority Goals
-
+
-
-
- {{ item.title }}
-
-
-
-
-
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
No goals found.
-
Add Goals
-
+
+
+
+
+
+ Manage
+
+
+
+ Add
+
+
diff --git a/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.scss b/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.scss
index 7eb5bbd1..f3b429d4 100644
--- a/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.scss
+++ b/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.scss
@@ -1,22 +1,52 @@
+.feature-card-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ width: 100%;
+ padding: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
+
.daily-goal {
position: relative;
+ display: flex;
+ flex-direction: column;
min-height: 175px;
height: auto;
width: 100%;
@media screen and (min-width: 992px) {
width: 48%;
- margin: 5px auto;
+ margin: 5px 0;
+ }
+ @media screen and (max-width: 992px) {
+ margin: 0px;
}
}
-.feature-card-container {
+ion-icon {
+ cursor: help;
+}
+
+.goal-action-buttons {
display: flex;
- flex-wrap: wrap;
justify-content: space-between;
- width: 100%;
- padding: 0;
+ margin-top: auto;
+ ion-button {
+ width: calc(50% - 0.5rem);
+ span {
+ font-size: 1rem;
+ @media screen and (max-width: 992px) {
+ font-size: 0.8rem;
+ }
+ }
+ ion-icon {
+ font-size: 1.1rem;
+ padding-bottom: 2px;
+ margin-right: 0.4rem;
+ @media screen and (max-width: 992px) {
+ font-size: 0.9rem;
+ }
+ }
+ }
}
-
-ion-icon{
- cursor: help;
-}
\ No newline at end of file
diff --git a/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.ts b/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.ts
index 1ed92cc1..112c3740 100644
--- a/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.ts
+++ b/src/app/pages/home/components/goal-on-dashboard/goal-on-dashboard.component.ts
@@ -1,32 +1,35 @@
+import { ModalController } from "@ionic/angular";
+import { QuickGoalModalComponent } from "../../../goal/components/quick-goal-modal/quick-goal-modal.component";
import { DatePipe } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, HostListener, OnInit } from "@angular/core";
import { serverTimestamp } from "@angular/fire/firestore";
import { FormBuilder, FormGroup } from "@angular/forms";
-import { GoalData } from "src/app/models/interface/goals.interface";
+import { IGoalData } from "src/app/models/interface/goals.interface";
import { FirebaseService } from "src/app/services/firebase/firebase.service";
import { GoalService } from "src/app/services/goal/goal.service";
import { ToasterService } from "src/app/services/toaster/toaster.service";
@Component({
- selector: "app-goal-on-dashboard",
- templateUrl: "./goal-on-dashboard.component.html",
- styleUrls: ["./goal-on-dashboard.component.scss"],
+ selector: "app-goal-on-dashboard",
+ templateUrl: "./goal-on-dashboard.component.html",
+ styleUrls: ["./goal-on-dashboard.component.scss"],
+ standalone: false
})
export class GoalOnDashboardComponent implements OnInit {
- dailyGoals: GoalData[];
- priorityGoals: GoalData[];
+ dailyGoals: IGoalData[];
+ priorityGoals: IGoalData[];
alertButtons = ["Close"];
goalForm: FormGroup;
dateToday: string | null = this.datePipe.transform(new Date(), "yyyy-MM-dd");
-
+ isLargeScreen: boolean = false;
constructor(
private firebaseService: FirebaseService,
private fb: FormBuilder,
private goalService: GoalService,
private toasterService: ToasterService,
private datePipe: DatePipe,
-
+ private modalController: ModalController,
) {
this.goalForm = this.fb.group({
updatedAt: [serverTimestamp()],
@@ -35,6 +38,16 @@ export class GoalOnDashboardComponent implements OnInit {
ngOnInit() {
this.getGoal();
+ this.checkScreenSize(window.innerWidth);
+ }
+
+ @HostListener("window:resize", ["$event"])
+ onResize(event: any) {
+ this.checkScreenSize(event.target.innerWidth);
+ }
+
+ private checkScreenSize(width: number): void {
+ this.isLargeScreen = width > 600;
}
async getGoal() {
@@ -42,26 +55,69 @@ export class GoalOnDashboardComponent implements OnInit {
if (userProfile) {
this.goalService.getDailyGoal().subscribe((res: any) => {
this.dailyGoals = res;
+ console.log("Daily Goals:", this.dailyGoals);
});
this.goalService.getPriorityGoal().subscribe((res: any) => {
this.priorityGoals = res;
+ console.log("Priority Goals:", this.priorityGoals);
});
} else {
this.toasterService.showToast("No goals found : User not logged in.", "warning");
}
}
- updateDailyTask(checked: boolean, item: GoalData) {
+ updateDailyTask(checked: boolean, item: IGoalData) {
item.progress = checked ? 100 : 0;
item.updatedAt = this.goalForm.value.updatedAt;
- // console.log(item);
this.goalService.updateDailyGoal(item, item.idField);
}
- updatePriorityTask(checked: boolean, item: GoalData) {
+ updatePriorityTask(checked: boolean, item: IGoalData) {
+ item.progress = checked ? 100 : 0;
+ item.updatedAt = this.goalForm.value.updatedAt;
+ this.goalService.updateGoal(item, item.idField);
+ }
+
+ markGoalAsDone(checked: boolean, item: IGoalData) {
item.progress = checked ? 100 : 0;
item.updatedAt = this.goalForm.value.updatedAt;
- // console.log(item);
this.goalService.updateGoal(item, item.idField);
}
+
+ editGoal(goal: IGoalData) {
+ // Implement the logic to edit the goal
+ }
+
+ deleteGoal(goal: IGoalData, goalId: string) {
+ this.goalService.deleteGoal(goal, goalId);
+ }
+
+ async openAddGoalModal(goalType: string) {
+ if (!this.firebaseService.userData) {
+ this.toasterService.showToast("Please login to add a goal.", "warning");
+ return;
+ }
+ console.log("User is logged in:", this.firebaseService.userData);
+ const modal = await this.modalController.create({
+ component: QuickGoalModalComponent,
+ componentProps: { goalType },
+ });
+ await modal.present();
+ const { data } = await modal.onDidDismiss();
+ if (data) {
+ console.log("Goal submitted from modal:", data, goalType);
+ this.addGoal(data, goalType);
+ }
+ }
+
+ addGoal(goalData: any, goalType: string) {
+ this.goalForm.value.gTerm = goalType;
+ this.goalForm.value.date = this.dateToday;
+ this.goalForm.value.progress = 0;
+ this.goalForm.value.updatedAt = serverTimestamp();
+ this.goalForm.value.createdAt = serverTimestamp();
+ this.goalForm.value.title = goalData.title;
+ this.goalForm.value.description = goalData.description;
+ this.goalService.addGoal(this.goalForm.value);
+ }
}
diff --git a/src/app/pages/home/components/quick-features/quick-features.component.html b/src/app/pages/home/components/quick-features/quick-features.component.html
new file mode 100644
index 00000000..bdfafb8b
--- /dev/null
+++ b/src/app/pages/home/components/quick-features/quick-features.component.html
@@ -0,0 +1,28 @@
+
Quick features
+
+
+
+
+
+
+
+
+
+
+
+
+ Send WhatsApp Message
+
+
+
+
diff --git a/src/app/pages/home/components/quick-features/quick-features.component.scss b/src/app/pages/home/components/quick-features/quick-features.component.scss
new file mode 100644
index 00000000..abe3fb0f
--- /dev/null
+++ b/src/app/pages/home/components/quick-features/quick-features.component.scss
@@ -0,0 +1,11 @@
+.whatsapp-opener {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ border-radius: 0.5rem;
+}
+ion-list,
+ion-item {
+ background: transparent;
+ background-color: transparent;
+}
diff --git a/src/app/pages/home/components/quick-features/quick-features.component.spec.ts b/src/app/pages/home/components/quick-features/quick-features.component.spec.ts
new file mode 100644
index 00000000..aaa494c0
--- /dev/null
+++ b/src/app/pages/home/components/quick-features/quick-features.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { QuickFeaturesComponent } from './quick-features.component';
+
+describe('QuickFeaturesComponent', () => {
+ let component: QuickFeaturesComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [ QuickFeaturesComponent ],
+ imports: [IonicModule.forRoot()]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(QuickFeaturesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ }));
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/home/components/quick-features/quick-features.component.ts b/src/app/pages/home/components/quick-features/quick-features.component.ts
new file mode 100644
index 00000000..75d0dcde
--- /dev/null
+++ b/src/app/pages/home/components/quick-features/quick-features.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+ selector: "app-quick-features",
+ templateUrl: "./quick-features.component.html",
+ styleUrls: ["./quick-features.component.scss"],
+ standalone: false
+})
+export class QuickFeaturesComponent implements OnInit {
+ phoneNumber: string = "";
+ countryCode: string = "+91";
+
+ constructor() {}
+
+ ngOnInit() {}
+
+ openWhatsAppLink() {
+ if (this.phoneNumber) {
+ const url = `https://wa.me/${this.countryCode}${this.phoneNumber}`;
+ window.open(url, "_blank");
+ } else {
+ alert("Please enter a valid mobile number.");
+ }
+ }
+}
diff --git a/src/app/pages/home/home.module.ts b/src/app/pages/home/home.module.ts
index 128ea724..8adac9a8 100644
--- a/src/app/pages/home/home.module.ts
+++ b/src/app/pages/home/home.module.ts
@@ -8,9 +8,10 @@ import { HomePageRoutingModule } from "./home-routing.module";
import { HomePage } from "./home.page";
import { GoalOnDashboardComponent } from "./components/goal-on-dashboard/goal-on-dashboard.component";
+import { QuickFeaturesComponent } from "./components/quick-features/quick-features.component";
@NgModule({
imports: [CommonModule, FormsModule, IonicModule, HomePageRoutingModule],
- declarations: [HomePage, GoalOnDashboardComponent],
+ declarations: [HomePage, GoalOnDashboardComponent, QuickFeaturesComponent],
})
export class HomePageModule {}
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index fca149a5..6eb32814 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -16,15 +16,18 @@
- What gets measured, Gets managed
+ Summarize
- - Peter F. Drucker
+ Helps you maintain discipline and focus
+ No advertisement, No distraction
-
+
+
+
- Available Features
+ Features for you
+
+
+
+ Some features are unstable. Sorry for the inconvenience.
+
+
+
+
Upcoming Features soon
+
+ - Analyze Studies
+ - Analyze Work
+ - Shared Expense list
+ - Shared Study list
+ - Split Expenses
+ - Goal Setting
+ - Co-Live: Manage your co-living space
+
+
About Summarize
{{item}}
@@ -46,15 +70,6 @@
About Summarize
)
-
-
Upcoming Features
-
- - Analyze Studies
- - Analyze Work
- - Goal Setting
- - Analyze Studies based on target Exams.
-
-
diff --git a/src/app/pages/home/home.page.scss b/src/app/pages/home/home.page.scss
index a11dde2d..e79c6b61 100644
--- a/src/app/pages/home/home.page.scss
+++ b/src/app/pages/home/home.page.scss
@@ -1,13 +1,14 @@
-.log-out-btn{
+.log-out-btn {
margin-right: 20px;
}
-h1{
- margin:50px auto 0px;
+h1 {
+ margin: 50px auto 0px;
color: var(--ion-color-primary);
font-size: 2rem;
}
-.features,.goal-dashboard{
+.features,
+.goal-dashboard {
position: relative;
height: auto;
padding: 1rem 0;
@@ -18,40 +19,44 @@ h1{
display: flex;
justify-items: space-between;
flex-wrap: wrap;
- h3{
+ h3 {
font-size: 2rem;
margin: 5px auto;
color: var(--ion-color-tertiary);
}
}
-.feature-card-container{
+
+.feature-card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
+ gap: 10px;
width: 100%;
padding: 0;
}
-.feature-card{
- position: relative;
- display: flex;
- align-items: center;
- cursor: pointer;
- padding: 15px;
- width: 23%;
+
+.feature-card {
+ flex: 1 1 calc(25% - 10px); /* 4 cards per row */
min-width: 230px;
height: 60px;
- margin: 10px auto;
+ margin: 5px;
+ padding: 15px;
border-radius: 6px;
- ion-icon,ion-note{
- font-size: 1.5rem;
+ display: flex;
+ ion-icon,
+ ion-note {
+ font-size: 1.5rem;
margin: 0 5px;
}
- @media screen and (max-width:992px) {
- width: 48%;
- margin: 5px auto;
+}
+@media screen and (max-width: 992px) and (min-width: 480px) {
+ .feature-card {
+ flex: 1 1 calc(50% - 10px);
}
- @media screen and (max-width:540px) {
- width: 100%;
- margin: 5px auto;
+}
+
+@media screen and (max-width: 480px) {
+ .feature-card {
+ flex: 1 1 100%;
}
}
diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
index 62efdba4..184f3ccb 100644
--- a/src/app/pages/home/home.page.ts
+++ b/src/app/pages/home/home.page.ts
@@ -3,41 +3,35 @@ import { features as MasterDataFeatures } from "src/app/models/class/masterData/
import { SeoService } from "src/app/services/seo/seo.service";
import { RealTimeDataBaseService } from "src/app/shared/db/real-time-data-base.service";
import { homePageTags, homePageTitle } from "src/app/models/data/seo-tags";
+import { NotificationsService } from "src/app/services/notifications/notifications.service";
+import { fabActionButtonsAtHome, homePageParagraphs } from "src/app/models/data/home-page.data";
+import { SpeechRecognition } from "@capacitor-community/speech-recognition";
@Component({
- selector: "app-home",
- templateUrl: "./home.page.html",
- styleUrls: ["./home.page.scss"],
+ selector: "app-home",
+ templateUrl: "./home.page.html",
+ styleUrls: ["./home.page.scss"],
+ standalone: false
})
export class HomePage implements OnInit, AfterViewInit {
pageTitle = "Home";
title = homePageTitle;
pageMetaTags = homePageTags;
features = MasterDataFeatures;
- fabActionButtons = [
- { title: "Goal", color: "secondary", url: "/goal", icon: "bulb" },
- { title: "Expenses", color: "success", url: "/expenses", icon: "cash" },
- { title: "Studies", color: "primary", url: "/studies", icon: "book" },
- { title: "Time", color: "danger", url: "/time", icon: "hourglass" },
- ];
- paragraphs = [
- "Summarize is an app that helps you to manage your Time, Money, and work which includes but is not limited to subject-wise studies, notes, to-do's, or office works.",
- "Thinking when to use Summarize? To live better and managed, one should recall what they have done throughout the day daily before sleep . Also listing tasks for the next day and setting priorities increases the chances to get them done.",
- "Currently, Summarize is under development, we will keep on adding features one by one. Till then, please feel free to manage Achievements of day, Expenses, Studies, and Time. It is a web-app that can be easily installed on all devices ( Mobile & PC ). Install the app on your devices to keep in sync and to check how to install visit our Help page.",
- "Note: Your data will not be used for any advertisement or offering any deal/scheme. Also our app don't need any permission to work on your device. Your privacy is important to us. For more queries, you can contact us through the support page. We are also open to feature requests and suggestions.",
- ];
+ fabActionButtons = fabActionButtonsAtHome;
+ paragraphs = homePageParagraphs;
homeData: any;
constructor(
private seoService: SeoService,
+ private notificationsService: NotificationsService,
private rtdb: RealTimeDataBaseService,
) {}
ngOnInit() {
this.seoService.seo(this.title, this.pageMetaTags);
- console.log("meta tag updated, moving to after init");
+ this.notificationsService.schedule9PMNotification();
}
ngAfterViewInit(): void {
- console.log("Executing after view init");
this.getAboutParagraphs();
this.seoService.eventTrigger("page_view", this.title);
}
@@ -49,4 +43,10 @@ export class HomePage implements OnInit, AfterViewInit {
}
});
}
+
+ testNotification() {
+ const now = new Date();
+ now.setMinutes(now.getMinutes()); // Set notification for 1 minute from now
+ this.notificationsService.scheduleInstantNotification();
+ }
}
diff --git a/src/app/pages/office/office.page.ts b/src/app/pages/office/office.page.ts
index 39224352..9978dc73 100644
--- a/src/app/pages/office/office.page.ts
+++ b/src/app/pages/office/office.page.ts
@@ -5,9 +5,10 @@ import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { OfficeService } from "src/app/services/office/office.service";
import { SeoService } from "src/app/services/seo/seo.service";
@Component({
- selector: "app-office",
- templateUrl: "./office.page.html",
- styleUrls: ["./office.page.scss"],
+ selector: "app-office",
+ templateUrl: "./office.page.html",
+ styleUrls: ["./office.page.scss"],
+ standalone: false
})
export class OfficePage implements OnInit {
pageTitle = "Office";
diff --git a/src/app/pages/privacy-policy/privacy-policy.page.ts b/src/app/pages/privacy-policy/privacy-policy.page.ts
index f28f7878..66deadef 100644
--- a/src/app/pages/privacy-policy/privacy-policy.page.ts
+++ b/src/app/pages/privacy-policy/privacy-policy.page.ts
@@ -1,9 +1,10 @@
import { Component } from "@angular/core";
@Component({
- selector: "app-privacy-policy",
- templateUrl: "./privacy-policy.page.html",
- styleUrls: ["./privacy-policy.page.scss"],
+ selector: "app-privacy-policy",
+ templateUrl: "./privacy-policy.page.html",
+ styleUrls: ["./privacy-policy.page.scss"],
+ standalone: false
})
export class PrivacyPolicyPage {
pageTitle = "Privacy Policy";
diff --git a/src/app/pages/profile/profile.page.html b/src/app/pages/profile/profile.page.html
index 0f21eb1a..a466090c 100644
--- a/src/app/pages/profile/profile.page.html
+++ b/src/app/pages/profile/profile.page.html
@@ -33,7 +33,7 @@
Hello! {{ userProfile?.displayName ? userProfile?.displayName : userProfile?.email }}
-
+
Name is not available
Hello! {{ userProfile?.displayName ? userProfile?.displayName : u
>
-
+
{{ userProfile?.email ? userProfile?.email : "Add Email" }}
Hello! {{ userProfile?.displayName ? userProfile?.displayName : u
>
-
+
{{ userProfile?.phoneNumber ? userProfile.phoneNumber : "Add Phone Number" }}
Hello! {{ userProfile?.displayName ? userProfile?.displayName : u
>
-
+
English (default)
@@ -216,23 +216,57 @@ About Me