Merge pull request #1 from AnasInaam/main

Refine investor dashboard labels for investment focus

.gitignore

@@ -37,3 +37,5 @@ yarn-error.log*
 next-env.d.ts
 
 
+
+.env.local

convex/README.md

@@ -0,0 +1,90 @@
+# Welcome to your Convex functions directory!
+
+Write your Convex functions here.
+See https://docs.convex.dev/functions for more.
+
+A query function that takes two arguments looks like:
+
+```ts
+// functions.js
+import { query } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myQueryFunction = query({
+  // Validators for arguments.
+  args: {
+    first: v.number(),
+    second: v.string(),
+  },
+
+  // Function implementation.
+  handler: async (ctx, args) => {
+    // Read the database as many times as you need here.
+    // See https://docs.convex.dev/database/reading-data.
+    const documents = await ctx.db.query("tablename").collect();
+
+    // Arguments passed from the client are properties of the args object.
+    console.log(args.first, args.second);
+
+    // Write arbitrary JavaScript here: filter, aggregate, build derived data,
+    // remove non-public properties, or create new objects.
+    return documents;
+  },
+});
+```
+
+Using this query function in a React component looks like:
+
+```ts
+const data = useQuery(api.functions.myQueryFunction, {
+  first: 10,
+  second: "hello",
+});
+```
+
+A mutation function looks like:
+
+```ts
+// functions.js
+import { mutation } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myMutationFunction = mutation({
+  // Validators for arguments.
+  args: {
+    first: v.string(),
+    second: v.string(),
+  },
+
+  // Function implementation.
+  handler: async (ctx, args) => {
+    // Insert or modify documents in the database here.
+    // Mutations can also read from the database like queries.
+    // See https://docs.convex.dev/database/writing-data.
+    const message = { body: args.first, author: args.second };
+    const id = await ctx.db.insert("messages", message);
+
+    // Optionally, return a value from your mutation.
+    return await ctx.db.get(id);
+  },
+});
+```
+
+Using this mutation function in a React component looks like:
+
+```ts
+const mutation = useMutation(api.functions.myMutationFunction);
+function handleButtonPress() {
+  // fire and forget, the most common way to use mutations
+  mutation({ first: "Hello!", second: "me" });
+  // OR
+  // use the result once the mutation has completed
+  mutation({ first: "Hello!", second: "me" }).then((result) =>
+    console.log(result),
+  );
+}
+```
+
+Use the Convex CLI to push your functions to a deployment. See everything
+the Convex CLI can do by running `npx convex -h` in your project root
+directory. To learn more, launch the docs with `npx convex docs`.

convex/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  /* This TypeScript project config describes the environment that
+   * Convex functions run in and is used to typecheck them.
+   * You can modify it, but some settings required to use Convex.
+   */
+  "compilerOptions": {
+    /* These settings are not required by Convex and can be modified. */
+    "allowJs": true,
+    "strict": true,
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+
+    /* These compiler options are required by Convex */
+    "target": "ESNext",
+    "lib": ["ES2021", "dom"],
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["./**/*"],
+  "exclude": ["./_generated"]
+}

next.config.mjs

@@ -1,19 +1,23 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: false,
-  images: {
+    reactStrictMode: false,
+    images: {
       // Allowed domains for images
       remotePatterns: [
-          {
-              protocol: "https",
-              hostname: "lh3.googleusercontent.com",
-          },
-          {
-              protocol: "https",
-              hostname: "utfs.io",
-          },
+        {
+          protocol: "https",
+          hostname: "lh3.googleusercontent.com",
+        },
+        {
+          protocol: "https",
+          hostname: "utfs.io",
+        },
+        {
+          protocol: "https",
+          hostname: "gravatar.com", // Add Gravatar here
+        },
       ],
-  },
-};
-
-export default nextConfig;
+    },
+  };
+  
+  export default nextConfig;

src/app/_components/InvestmentBarChart.tsx

@@ -96,9 +96,9 @@ const Test = () => {
       <Card>
         <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
           <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
-            <CardTitle>Your Investments</CardTitle>
+            <CardTitle>Investment Summary</CardTitle>
             <CardDescription>
-              Showing total Investments for past months
+             Monthly Investment Activity 
             </CardDescription>
           </div>
           <div className="flex">

src/app/_components/LineChart.tsx

@@ -35,7 +35,7 @@ const chartData = React.useMemo(() => [
 
 const chartConfig = {
   desktop: {
-    label: "Desktop",
+    label: "Invested Amount:",
     color: "#36454f",
   }
 
@@ -49,7 +49,7 @@ const chartConfig = {
           <div>
                     <Card>
                 <CardHeader>
-                  <CardTitle>Line Chart - Dots</CardTitle>
+                  <CardTitle>Investment Growth</CardTitle>
                   <CardDescription>January - June 2024</CardDescription>
                 </CardHeader>
                 <CardContent>
@@ -91,10 +91,10 @@ const chartConfig = {
                 </CardContent>
                 <CardFooter className="flex-col items-start gap-2 text-sm">
                   <div className="flex gap-2 font-medium leading-none">
-                    Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+                    Investment Growth Rate: 5.2% Increase <TrendingUp className="h-4 w-4" />
                   </div>
                   <div className="leading-none text-muted-foreground">
-                    Showing total visitors for the last 6 months
+                  Total Investments Over Last 6 Months
                   </div>
                 </CardFooter>
               </Card>