Release v0.0.1

.eslintrc.js

@@ -0,0 +1,53 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    es6: true,
+    jest: true,
+  },
+  extends: ['standard', 'next/core-web-vitals', 'prettier', 'plugin:prettier/recommended'],
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+  settings: {
+    'import/core-modules': ['dayjs', 'dayjs/plugin/timezone', 'dayjs/plugin/utc'],
+  },
+  rules: {
+    'prettier/prettier': 'error',
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'import/no-duplicates': 'error',
+    'react/jsx-no-useless-fragment': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: "CallExpression[callee.object.name='console'][callee.property.name!=/^(error)$/]",
+        message: 'Unexpected property on console object was called',
+      },
+    ],
+  },
+  plugins: ['prettier', 'react', 'promise'],
+  overrides: [
+    {
+      files: ['**/__test__/**/*.js'],
+      rules: {
+        'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+      },
+    },
+  ],
+};

.eslintrc.json

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

.github/pull_request_template.md

@@ -0,0 +1,13 @@
+Closes Issue: #
+
+### Addition
+
+- put new additions here
+
+### Changes
+
+- put changes here
+
+### Fixes
+
+- put fixes here

.github/workflows/publish-image.yml

@@ -0,0 +1,73 @@
+name: Publish zop-ui image
+
+on:
+  push:
+    tags:
+      - 'v*'
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  prettier-and-lint:
+    name: 🧪 Prettier and Lint
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Install dependencies
+        run: |
+          npm install
+
+      - name: run linter
+        run: |
+          CI=false npm run lint
+
+      - name: run prettier
+        run: |
+          CI=false npm run prettier:check
+
+      - name: Build
+        run: npm run build
+
+  publich-image:
+    if: ${{ startsWith(github.ref, 'refs/tags/v')}}
+    name: 🔨 Build and 🐳 Dockerize
+    needs: prettier-and-lint
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Extract Release Tag
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: 'v4vikash'
+          password: ${{ secrets.DOCKER_HUB_PAT }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          push: true
+          context: .
+          file: Dockerfile
+          tags: zopdev/zop-api:${{ env.RELEASE_VERSION }}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+.next
+
+# script
+*.sh
+
+#vscode
+.vscode
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "proseWrap": "always"
+}

Dockerfile

@@ -0,0 +1,20 @@
+# Stage 1: Build the application
+FROM node:18-alpine
+
+# Create and set the working directory for the app inside the container
+WORKDIR /app
+
+# Copy the app's source code into the container
+COPY . .
+
+# Install dependencies
+RUN npm install
+
+# Build the Next.js application
+RUN npm run build
+
+# Expose the port the app will run on
+EXPOSE 3000
+
+# Set the default command to run when the container starts (but don't run the app yet)
+CMD ["npm", "run", "dev"]

Queries/CloudAccount/index.js

@@ -0,0 +1,22 @@
+import apiClient from '../../utlis/apiClient';
+import { CLOUD_ACCOUNT_ENDPOINT } from '../../utlis/apiEndpoints';
+
+const url = CLOUD_ACCOUNT_ENDPOINT;
+
+export const getCloudAccounts = async () => {
+  try {
+    const data = await apiClient.get(url);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch cloud accounts');
+  }
+};
+
+export const addCloudAccount = async (values) => {
+  try {
+    const response = await apiClient.post(url, values);
+    return response;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to add cloud account');
+  }
+};

README.md

@@ -1,3 +1,50 @@
-# Zop CLI UI
+# ZopDev
 
-Welcome to the Zop CLI UI project! This project provides a user interface for the Zop command-line tool.
+Zop is a comprehensive tool for managing cloud infrastructure. It consists of three main components:
+
+1. **zop-ui**: User interface for managing and monitoring cloud resources.
+2. **zop-api**: Backend API service.
+3. **zop-cli**: Command-line interface for developers and admins.
+
+---
+
+## Installation
+
+### Prerequisites
+
+- Docker installed on your system.
+- Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required.
+
+---
+
+### Running Locally
+
+#### zop-api
+
+Run the following command to pull and start the Docker image for the zop-api:
+
+```bash
+    docker run -d -p 8000:8000 --name zop-api zop.dev/zop-api:v0.0.1
+```
+
+#### zop-ui
+
+Run the following command to pull and start the Docker image for the zop-ui:
+
+```bash
+    docker run -d -p 3000:3000 -e NEXT_PUBLIC_API_BASE_URL='http://localhost:8000' --name zop-ui zop.dev/zop-ui:v0.0.1
+```
+
+> **Note:** The environment variable `NEXT_PUBLIC_API_BASE_URL` is used by zop-ui to connect to the
+> zop-api. Ensure that the value matches the API's running base URL.
+
+#### zop-cli
+
+Run the following command install zop-cli:
+
+```bash
+   go install zop.dev/clizop@latest
+```
+
+> **Note:** Set the environment variable `ZOP_API_URL`, used by zop-cli to connect to the zop-api.
+> Ensure that the value matches the API's running base URL.

components/Button/index.js

@@ -0,0 +1,25 @@
+const Button = ({ variant, children, className: customClasses, ...props }) => {
+  const variantClasses = {
+    primary:
+      'inline-flex items-center gap-x-1.5 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 ',
+    secondary:
+      'inline-flex items-center gap-x-1.5 rounded-md bg-black/5 px-3 py-2 text-sm font-semibold text-gray-500 shadow-sm hover:bg-black/10 ',
+    danger:
+      'inline-flex items-center gap-x-1.5 rounded-md bg-red-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-400 ',
+  };
+
+  const className = `${variantClasses[variant] || variantClasses.primary} ${
+    props?.disabled && 'opacity-40 hover:bg-primary-700 pointer-events-none'
+  }`;
+  return (
+    <button
+      className={customClasses ? className + customClasses : className}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;