aiverify-foundation · imda-peckyoke · Nov 2, 2024 · Sep 30, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/aiverify-portal/.cursorrules b/aiverify-portal/.cursorrules
@@ -0,0 +1,21 @@
+
+      You are an expert in building modular UI components React components using typescript and module css. You excel at using semantic html tags and React APIs. You favour the React Compound component pattern where component states that have to be shared by different react elements within the component, are placed in React Context, because that gives flexibility to move the different consuming elements around within the component. However, you also know that not all components need to use that pattern. You are good at implementing intuitive visual feedbacks in UI interactions using CSS transitions. You use flexbox for complex layouts.
+
+      When creating a new component, create a new subfolder for the component under the "src/components" directory.The component should be made up of a module.css file where all the styles are handled, and the component tsx file itself. Create the Storybook stories and Storybook docs for the new React component. The .stories and .mdx files should also be in the same folder as the component.
+
+      When making a suggestion, you break things down into discrete changes and suggest a small test after each stage to ensure things are on the right track.
+
+      Produce code to illustrate examples, or when directed to in the conversation. If you can answer without code, that is preferred, and you will be asked to elaborate if it is required. Prioritize code examples when dealing with complex logic, but use conceptual explanations for high-level architecture or design patterns.
+
+      Before writing or suggesting code, you conduct a deep-dive review of the existing code and describe how it works between <CODE_REVIEW> tags. Once you have completed the review, you produce a careful plan for the change in <PLANNING> tags. Pay attention to variable names and string literals—when reproducing code, make sure that these do not change unless necessary or directed. If naming something by convention, surround in double colons and in ::UPPERCASE::.
+
+      Finally, you produce correct outputs that provide the right balance between solving the immediate problem and remaining generic and flexible.
+
+      You always ask for clarification if anything is unclear or ambiguous. You stop to discuss trade-offs and implementation options if there are choices to make.
+
+      You are keenly aware of security, and make sure at every step that we don't do anything that could compromise data or introduce new vulnerabilities. Whenever there is a potential security risk (e.g., input handling, authentication management), you will do an additional review, showing your reasoning between <SECURITY_REVIEW> tags.
+
+      Additionally, consider performance implications, web metrics, react rendering performance, efficient error handling, and edge cases to ensure that the code is not only functional but also robust and optimized.
+
+      Finally, adjust your approach based on feedback, ensuring that your suggestions evolve with the project's needs.
+
diff --git a/aiverify-portal/.eslintignore b/aiverify-portal/.eslintignore
@@ -0,0 +1,4 @@
+/node_modules
+/plugins
+/__mocks__
+/__tests__
diff --git a/aiverify-portal/.eslintrc.json b/aiverify-portal/.eslintrc.json
@@ -0,0 +1,43 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"], // prettier - ensure eslint lint does not do formatting-related rules
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "rules": {
+    "react-hooks/rules-of-hooks": "warn",
+    "react-hooks/exhaustive-deps": 0,
+    "react/self-closing-comp": "error",
    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline" }],
+    "prefer-const": "error",
+    "@typescript-eslint/no-empty-function": "error",
+    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/no-inferrable-types": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "parent", "sibling", "index", "object", "type"],
+        "pathGroups": [
+          {
+            "pattern": "@/**/**",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "alphabetize": { "order": "asc" }
+      }
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["../"]
+      }
+    ]
+  }
+}
diff --git a/aiverify-portal/.gitignore b/aiverify-portal/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/aiverify-portal/.prettierignore b/aiverify-portal/.prettierignore
@@ -0,0 +1,38 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+test-report.html
+test-results.json
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+    *.tsbuildinfo
+
+# plugins
+/temp
+/plugins
diff --git a/aiverify-portal/.prettierrc.json b/aiverify-portal/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSameLine": true,
+  "singleAttributePerLine": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/aiverify-portal/.vscode/settings.json b/aiverify-portal/.vscode/settings.json
@@ -0,0 +1,16 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit"
+    }
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit"
+    }
+  }
+}
diff --git a/aiverify-portal/README.md b/aiverify-portal/README.md
@@ -0,0 +1,17 @@
+This is a [Next.js](https://nextjs.org) project
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
diff --git a/aiverify-portal/app/api/mock/projects/route.ts b/aiverify-portal/app/api/mock/projects/route.ts
@@ -0,0 +1,55 @@
+import { Project } from '@/app/types';
+import { sleep } from '@/lib/utils/sleep';
+
+const projects: Project[] = [
+  {
+    id: '1',
+    name: 'Project 1',
+    description:
+      'Description 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utmaximus purus sed velit porttitor, cursus auctor elit eleifend.',
+    createdAt: '2021-01-01',
+    model: 'Model 1',
+    status: 'Completed',
+  },
+  {
+    id: '2',
+    name: 'Project 2',
+    description:
+      'Description 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utmaximus purus sed velit porttitor, cursus auctor elit eleifend.',
+    createdAt: '2021-01-01',
+    model: 'Model 2',
+    status: 'Completed',
+  },
+  {
+    id: '3',
+    name: 'Project 3',
+    description:
+      'Description 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utmaximus purus sed velit porttitor, cursus auctor elit eleifend.',
+    createdAt: '2021-01-01',
+    model: 'Model 3',
+    status: 'Running',
+  },
+  {
+    id: '4',
+    name: 'Project 4',
+    description:
+      'Description 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utmaximus purus sed velit porttitor, cursus auctor elit eleifend.',
+    createdAt: '2021-01-01',
+    model: 'Model 4',
+    status: 'Running',
+  },
+  {
+    id: '5',
+    name: 'Project 5',
+    description:
+      'Description 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utmaximus purus sed velit porttitor, cursus auctor elit eleifend.',
+    createdAt: '2021-01-01',
+    model: 'Model 5',
+    status: 'No Report yet',
+  },
+];
+
+export async function GET() {
+  await sleep(5);
+  return Response.json(projects);
+}
diff --git a/aiverify-portal/app/data/page.tsx b/aiverify-portal/app/data/page.tsx
@@ -0,0 +1,9 @@
+function DataPage() {
+  return (
+    <main className="h-screen w-full px-6">
+      <h1 className="my-6 text-2xl font-bold tracking-wide">Data Page</h1>
+    </main>
+  );
+}
+
+export default DataPage;
diff --git a/aiverify-portal/app/favicon.ico b/aiverify-portal/app/favicon.ico
diff --git a/aiverify-portal/app/globals.css b/aiverify-portal/app/globals.css
@@ -0,0 +1,27 @@
+@import '@fontsource-variable/inter';
+@import '@/lib/theme/colors.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: 'Inter Variable', sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+  }
+}
+
+@layer base {
+  * {
+  }
+  body {
+  }
+}
diff --git a/aiverify-portal/app/headerWithLogo.tsx b/aiverify-portal/app/headerWithLogo.tsx
@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import { PropsWithChildren } from 'react';
+
+type HeaderProps = {
+  className?: string;
+};
+
+const HeaderWithLogo = ({
+  className,
+  children,
+}: PropsWithChildren<HeaderProps>) => {
+  return (
+    <header className={className}>
+      <div className="mx-auto flex w-full items-center justify-between px-4 sm:px-6 lg:max-w-[1520px] lg:px-8 xl:max-w-[1720px] xl:px-12">
+        <Image
+          src="/aiverify-logo-white.svg"
+          alt="AI Verify"
+          width={250}
+          height={40}
+        />
+        {children}
+      </div>
+    </header>
+  );
+};
+
+export { HeaderWithLogo };
diff --git a/aiverify-portal/app/home/components/projectCards.tsx b/aiverify-portal/app/home/components/projectCards.tsx
@@ -0,0 +1,48 @@
+'use client';
+import React from 'react';
+import { Project } from '@/app/types';
+import { IconName } from '@/lib/components/IconSVG';
+import { Icon } from '@/lib/components/IconSVG';
+import { Card } from '@/lib/components/card/card';
+
+type ProjectCardsProps = {
+  projects: Project[];
+};
+
+function ProjectCards({ projects }: ProjectCardsProps) {
+  return (
+    <React.Fragment>
+      {projects.map((project) => (
+        <Card
+          key={project.id}
+          size="md"
+          width={450}
+          className="text-shadow-sm !bg-none text-white [&&]:bg-secondary-900">
+          <Card.Content className="flex flex-col gap-7 p-4">
+            <h3 className="text-[1.2rem] font-bold">{project.name}</h3>
+            <p>{project.description}</p>
+          </Card.Content>
+          <Card.SideBar className="flex flex-col items-center gap-4 border-l border-l-primary-400 py-4">
+            <Icon
+              size={25}
+              name={IconName.SolidBox}
+              svgClassName="fill-primary-300 dark:fill-primary-300"
+            />
+            <Icon
+              size={27}
+              name={IconName.HistoryClock}
+              svgClassName="fill-primary-300 dark:fill-primary-300"
+            />
+            <Icon
+              size={27}
+              name={IconName.Tools}
+              svgClassName="fill-primary-300 dark:fill-primary-300"
+            />
+          </Card.SideBar>
+        </Card>
+      ))}
+    </React.Fragment>
+  );
+}
+
+export { ProjectCards };
diff --git a/aiverify-portal/app/home/components/projectCardsContainer.tsx b/aiverify-portal/app/home/components/projectCardsContainer.tsx
@@ -0,0 +1,21 @@
+import { fetchProjects } from '@/lib/fetchApis/getAllProjects';
+import { ProjectCards } from './projectCards';
+
+type ProjectCardsContainerProps = {
+  className?: string;
+};
+
+export async function ProjectCardsContainer({
+  className,
+}: ProjectCardsContainerProps) {
+  const response = await fetchProjects();
+  if ('message' in response) {
+    throw new Error(response.message);
+  }
+  const projects = response.data;
+  return (
+    <section className={className}>
+      <ProjectCards projects={projects} />
+    </section>
+  );
+}