feat(requests): add request quotas (#1277)

* feat(quotas): rebased

* feat: add getQuota() method to User entity

* feat(ui): add default quota setting options

* feat: user quota settings

* feat: quota display in request modals

* fix: only show user quotas on own profile or with manage users permission

* feat: add request progress circles to profile page

* feat: add migration

* fix: add missing restricted field to api schema

* fix: dont show auto approve message for movie request when restricted

* fix(lang): change enable checkbox langauge to "enable override"

Co-authored-by: Jakob Ankarhem <jakob.ankarhem@outlook.com>
Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com>

src/components/Common/Alert/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface AlertProps {
-  title: string;
+  title?: React.ReactNode;
   type?: 'warning' | 'info' | 'error';
 }
 
@@ -77,14 +77,20 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
   }
 
   return (
-    <div className={`rounded-md p-4 mb-5 ${design.bgColor}`}>
+    <div className={`rounded-md p-4 mb-4 ${design.bgColor}`}>
       <div className="flex">
         <div className={`flex-shrink-0 ${design.titleColor}`}>{design.svg}</div>
         <div className="ml-3">
-          <div className={`text-sm font-medium ${design.titleColor}`}>
-            {title}
-          </div>
-          <div className={`mt-2 text-sm ${design.textColor}`}>{children}</div>
+          {title && (
+            <div className={`text-sm font-medium ${design.titleColor}`}>
+              {title}
+            </div>
+          )}
+          {children && (
+            <div className={`mt-2 first:mt-0 text-sm ${design.textColor}`}>
+              {children}
+            </div>
+          )}
         </div>
       </div>
     </div>

src/components/Common/ProgressCircle/index.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+
+interface ProgressCircleProps {
+  className?: string;
+  progress?: number;
+  useHeatLevel?: boolean;
+}
+
+const ProgressCircle: React.FC<ProgressCircleProps> = ({
+  className,
+  progress = 0,
+  useHeatLevel,
+}) => {
+  const ref = useRef<SVGCircleElement>(null);
+
+  let color = '';
+  let emptyColor = 'text-gray-300';
+
+  if (useHeatLevel) {
+    color = 'text-green-500';
+
+    if (progress <= 50) {
+      color = 'text-yellow-500';
+    }
+
+    if (progress <= 10) {
+      color = 'text-red-500';
+    }
+
+    if (progress === 0) {
+      emptyColor = 'text-red-600';
+    }
+  }
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      const radius = ref.current?.r.baseVal.value;
+      const circumference = (radius ?? 0) * 2 * Math.PI;
+      const offset = circumference - (progress / 100) * circumference;
+      ref.current.style.strokeDashoffset = `${offset}`;
+      ref.current.style.strokeDasharray = `${circumference} ${circumference}`;
+    }
+  });
+
+  return (
+    <svg className={`${className} ${color}`} viewBox="0 0 24 24">
+      <circle
+        className={`${emptyColor} opacity-30`}
+        stroke="currentColor"
+        strokeWidth="3"
+        fill="transparent"
+        r="10"
+        cx="12"
+        cy="12"
+      />
+      <circle
+        style={{
+          transition: '0.35s stroke-dashoffset',
+          transform: 'rotate(-90deg)',
+          transformOrigin: '50% 50%',
+        }}
+        ref={ref}
+        stroke="currentColor"
+        strokeWidth="3"
+        fill="transparent"
+        r="10"
+        cx="12"
+        cy="12"
+      />
+    </svg>
+  );
+};
+
+export default ProgressCircle;