Karan

.github/workflows/ci.yml

@@ -0,0 +1,107 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+
+concurrency:
+  group: develop-quickdo-${{ github.event.number }}
+  cancel-in-progress: true
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+    name: Server
+
+    services:
+      redis-cache:
+        image: redis:alpine
+        ports:
+          - 13000:6379
+      redis-queue:
+        image: redis:alpine
+        ports:
+          - 11000:6379
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MYSQL_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v3
+
+      - name: Find tests
+        run: |
+          echo "Finding tests"
+          grep -rn "def test" > /dev/null
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          check-latest: true
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py', '**/setup.cfg') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: 'echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT'
+
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install MariaDB Client
+        run: |
+          sudo apt update
+          sudo apt-get install mariadb-client
+
+      - name: Setup
+        run: |
+          pip install frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+
+      - name: Install
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench get-app quickdo $GITHUB_WORKSPACE
+          bench setup requirements --dev
+          bench new-site --db-root-password root --admin-password admin test_site
+          bench --site test_site install-app quickdo
+          bench build
+        env:
+          CI: 'Yes'
+
+      - name: Run Tests
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench --site test_site set-config allow_tests true
+          bench --site test_site run-tests --app quickdo
+        env:
+          TYPE: server

.github/workflows/linter.yml

@@ -0,0 +1,60 @@
+name: Linters
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  linter:
+    name: 'Frappe Linter'
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.10'
+          cache: pip
+      - uses: pre-commit/action@v3.0.0
+
+      - name: Download Semgrep rules
+        run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules
+
+      - name: Run Semgrep rules
+        run: |
+          pip install semgrep
+          semgrep ci --config ./frappe-semgrep-rules/rules --config r/python.lang.correctness
+
+  deps-vulnerable-check:
+    name: 'Vulnerable Dependency Check'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.10'
+
+      - uses: actions/checkout@v4
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
+      - name: Install and run pip-audit
+        run: |
+          pip install pip-audit
+          cd ${GITHUB_WORKSPACE}
+          pip-audit --desc on .

.pre-commit-config.yaml

@@ -1,16 +1,15 @@
 exclude: 'node_modules|.git'
-default_stages: [commit]
+default_stages: [pre-commit]
 fail_fast: false
 
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.3.0
+    rev: v5.0.0
     hooks:
       - id: trailing-whitespace
         files: "quickdo.*"
         exclude: ".*json$|.*txt$|.*csv|.*md|.*svg"
-      - id: check-yaml
       - id: check-merge-conflict
       - id: check-ast
       - id: check-json
@@ -19,14 +18,17 @@ repos:
       - id: debug-statements
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.2.0
+    rev: v0.8.1
     hooks:
       - id: ruff
-        name: "Run ruff linter and apply fixes"
-        args: ["--fix"]
+        name: "Run ruff import sorter"
+        args: ["--select=I", "--fix"]
+
+      - id: ruff
+        name: "Run ruff linter"
 
       - id: ruff-format
-        name: "Format Python code"
+        name: "Run ruff formatter"
 
   - repo: https://github.com/pre-commit/mirrors-prettier
     rev: v2.7.1
@@ -64,4 +66,4 @@ repos:
 ci:
     autoupdate_schedule: weekly
     skip: []
-    submodules: false
+    submodules: false

frontend/eslint.config.js

@@ -1,28 +1,25 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+	{ ignores: ["dist"] },
+	{
+		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+		files: ["**/*.{ts,tsx}"],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+		},
+		plugins: {
+			"react-hooks": reactHooks,
+			"react-refresh": reactRefresh,
+		},
+		rules: {
+			...reactHooks.configs.recommended.rules,
+			"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+		},
+	}
+);

frontend/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

frontend/src/components/layout/navbar.tsx

@@ -36,7 +36,7 @@ const Navbar = () => {
     return (
         <>
             {/* NAVBAR */}
-            <header className='p-4 fixed top-0 left-0 sm:static bg-white sm:px-4 sm:py-2.5 shadow-[0px_0px_25px_-5px_rgba(0,0,0,0.25)] z-[999]'>
+            <header className='p-4 border-b border-gray-300 fixed top-0 left-0 sm:static bg-white sm:px-4 sm:py-2.5 shadow-[0px_0px_12px_-5px_rgba(0,0,0,0.25)] z-[999]'>
                 <nav className="nav-item-container flex gap-2.5 sm:gap-4 justify-between items-center">
 
                     {/* LOGO */}

frontend/src/components/layout/sidebar.tsx

@@ -89,7 +89,7 @@ export default function Sidebar() {
         <>
             {/* SIDEBAR */}
             <div
-                className={`sidebar fixed left-0 top-[72px] sm:top-[60px] bg-white pt-4 sm:py-0 z-[99] border-t h-auto sm:h-[calc(100dvh_-_60px)] shadow-md sm:shadow-[0px_10px_25px_-5px_rgba(0,0,0,0.25)] sm:pr-1 ${sidebarCollapseActive ? "w-full sm:max-w-[200px] sidebar-left-to-right" : "w-full sm:w-fit sidebar-right-to-left"} transition-all duration-300 overflow-hidden`}
+                className={`sidebar fixed left-0 top-[73px] sm:top-[61px] bg-white pt-4 sm:py-0 z-[99] border-t h-auto sm:h-[calc(100dvh_-_61px)] shadow-md sm:shadow-[0px_10px_25px_-5px_rgba(0,0,0,0.25)] sm:pr-1 ${sidebarCollapseActive ? "w-full sm:max-w-[200px] sidebar-left-to-right" : "w-full sm:w-fit sidebar-right-to-left"} transition-all duration-300 overflow-hidden`}
                 onMouseEnter={() => {
                     setSidebarCollapseActive(true);
                 }}

frontend/src/pages/category/category-view.tsx

@@ -202,7 +202,7 @@ const CategoryView = (props: DashboardProps) => {
             <Sidebar />
 
             {/* DASHBOARD CONTAINER */}
-            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_60px)] overflow-y-scroll">
+            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
 
                 {/* CREATE CATEGORY */}
                 <div className="create-todo-container">

frontend/src/pages/quickdo/calendar-view.tsx

@@ -382,7 +382,7 @@ const CalendarView = (props: DashboardProps) => {
             <Sidebar />
 
             {/* DASHBOARD CONTAINER */}
-            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_60px)] overflow-y-scroll">
+            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
                 <div className="calendar m-10">
                     <DnDCalendar
                         // @ts-ignore

frontend/src/pages/quickdo/dashboard-view.tsx

@@ -211,7 +211,7 @@ const Dashboard = (props: DashboardProps) => {
             <Sidebar />
 
             {/* DASHBOARD CONTAINER  */}
-            <div className="dashboard-container  sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_60px)] overflow-y-scroll">
+            <div className="dashboard-container  sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
 
                 {/* NUMBER CARD SECTION */}
                 <div className="number-card-section m-4 sm:m-6 xl:m-10 grid sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-6 xl:gap-10">

frontend/src/pages/quickdo/group-by-view.tsx

@@ -192,7 +192,7 @@ const GroupByView = (props: DashboardProps) => {
             <Sidebar />
 
             {/* DASHBOARD CONTAINER */}
-            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_60px)] overflow-y-scroll">
+            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
 
                 {/* CREATE TODO */}
                 <div className="create-todo-container">

frontend/src/pages/quickdo/inbox-view.tsx

@@ -166,7 +166,7 @@ const InboxView = (props: DashboardProps) => {
             <Sidebar />
 
             {/* DASHBOARD CONTAINER */}
-            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_60px)] overflow-y-scroll">
+            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
 
                 {/* CREATE TODO */}
                 <div className="create-todo-container">

frontend/src/pages/quickdo/kanban-view.tsx

@@ -268,7 +268,7 @@ const KanbanView = (props: DashboardProps) => {
             {/* DASHBOARD CONTAINER  */}
             {!initialLoading && (
 
-                <div className="dashboard-container  sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_60px)] overflow-y-scroll">
+                <div className="dashboard-container  sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] h-auto mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
                     <div className="flex divide-x p-10">
                         {columns.map((column, index) => (
                             <div

frontend/src/pages/quickdo/my-day-view.tsx

@@ -169,7 +169,7 @@ const MyDayView = (props: DashboardProps) => {
             <Sidebar />
 
             {/* DASHBOARD CONTAINER */}
-            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_60px)] overflow-y-scroll">
+            <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
 
                 {/* CREATE TODO */}
                 <div className="create-todo-container">

frontend/src/types/Common.ts

@@ -1,6 +1,11 @@
 import { IconType } from "react-icons";
 
 // ! COMMON
+declare global {
+    interface Window {
+        csrf_token: string;
+    }
+}
 export type Status = 'Open' | 'Completed' | 'Cancelled';
 // export type Priority = 'Low' | 'Medium' | 'High';
 

frontend/src/utils/quickdo-category.ts

@@ -7,6 +7,7 @@ const AUTH_TOKEN = import.meta.env.VITE_AUTH_TOKEN || null;
 // ? GENERATE THE HEADERS FOR AUTHORIZATION ONCE
 const getHeaders = () => ({
     Authorization: AUTH_TOKEN, // ? ADD AUTHORIZATION HEADER
+    "X-Frappe-CSRF-Token": window.csrf_token,  // ?ADD CSRF TOKEN FROM WINDOW OBJECT
 });
 
 // ? CATEGORY SERVICE API FUNCTION

frontend/src/utils/quickdo-dashboard.ts

@@ -7,6 +7,7 @@ const AUTH_TOKEN = import.meta.env.VITE_AUTH_TOKEN || null;
 // ? GENERATE THE HEADERS FOR AUTHORIZATION ONCE
 const getHeaders = () => ({
     Authorization: AUTH_TOKEN, // ? ADD AUTHORIZATION HEADER
+    "X-Frappe-CSRF-Token": window.csrf_token,  // ?ADD CSRF TOKEN FROM WINDOW OBJECT
 });
 
 // ? FETCH DASHBOARD DATA WITH OPTIONAL FILTERS