add repotys filter and store type properly

components/reports/ExperienceForm.js

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { useRouter } from "next/router";
 import Link from "next/link";
 import DayOfWeek from "../DayOfWeek";
-import { Location, UserRole } from "@prisma/client";
+import { ReportType } from "@prisma/client";
 const common = require('src/helpers/common');
 
 import { useSession } from "next-auth/react"
@@ -97,6 +97,7 @@ export default function ExperienceForm({ publisherId, assgnmentId, existingItem,
         e.preventDefault();
         item.publisher = { connect: { id: pubId } };
         item.location = { connect: { id: parseInt(item.locationId) } };
+        item.type = ReportType.Experience;
         delete item.locationId;
 
         try {

components/reports/FeedbackForm.js

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { useRouter } from "next/router";
 import Link from "next/link";
 import DayOfWeek from "../DayOfWeek";
-import { Location, UserRole } from "@prisma/client";
+import { ReportType } from "@prisma/client";
 const common = require('src/helpers/common');
 
 import { useSession } from "next-auth/react"
@@ -72,7 +72,9 @@ export default function FeedbackForm({ publisherId, onDone }) {
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-        item.publisher = { connect: { id: pubId } };
+        item.
+            item.publisher = { connect: { id: pubId } };
+        item.type = ReportType.Feedback;
         delete item.assignmentId;
 
         try {

components/reports/ReportForm.js

@@ -4,6 +4,7 @@ import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { useSession } from "next-auth/react"
+import { ReportType } from "@prisma/client";
 
 const common = require('src/helpers/common');
 
@@ -89,6 +90,7 @@ export default function ReportForm({ shiftId, existingItem, onDone }) {
         item.publisher = { connect: { id: publisherId } };
         item.shift = { connect: { id: parseInt(item.shiftId) } };
         item.date = new Date(item.date);
+        item.type = ReportType.Report;
         delete item.publisherId;
         delete item.shiftId;
         item.placementCount = parseInt(item.placementCount);

pages/api/auth/[...nextauth].ts

@@ -42,10 +42,10 @@ export const authOptions: NextAuthOptions = {
         }
       }
     }),
-    AppleProvider({
+    // AppleProvider({
-      clientId: process.env.APPLE_APP_ID,
+    //   clientId: process.env.APPLE_APP_ID,
-      clientSecret: process.env.APPLE_SECRET
+    //   clientSecret: process.env.APPLE_SECRET
-    }),
+    // }),
     // AzureADProvider({
     //   clientId: process.env.AZURE_AD_CLIENT_ID,
     //   clientSecret: process.env.AZURE_AD_CLIENT_SECRET,

pages/cart/reports/list.tsx

@@ -9,7 +9,7 @@ import { useSession } from "next-auth/react"
 import common from '../../../src/helpers/common';
 import Layout from "../../../components/layout";
 import ProtectedRoute from '../../../components/protectedRoute';
-import { Location, UserRole } from "@prisma/client";
+import { Location, UserRole, ReportType } from "@prisma/client";
 
 
 export default function Reports() {
@@ -17,8 +17,18 @@ export default function Reports() {
     const router = useRouter();
     const { data: session } = useSession();
 
+    const [filterType, setFilterType] = useState('ServiceReport');
 
+    const handleFilterChange = (event) => {
+        setFilterType(event.target.value);
+        console.log("event filter set to:" + event.target.value);
+    };
 
+    const [filteredReports, setFilteredReports] = useState([]);
+
+    useEffect(() => {
+        setFilteredReports(reports.filter(report => report.type === filterType));
+    }, [reports, filterType]);
 
     const deleteReport = (id) => {
         axiosInstance
@@ -66,7 +76,7 @@ export default function Reports() {
         <Layout>
             <ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN, UserRole.USER, UserRole.EXTERNAL]}>
 
-                <div className="h-5/6 grid place-items-center">
+                <div className="h-5/6 grid place-items-start px-4 pt-8">
                     <div className="flex flex-col w-full px-4">
                         <h1 className="text-2xl font-bold text-center">Отчети</h1>
                         <Link href="/cart/reports/report">
@@ -74,18 +84,21 @@ export default function Reports() {
                                 Добави нов отчет
                             </button>
                         </Link>
-                        <label className="mr-4">
+                        <div className="flex gap-2 mb-4">
-                            <input type="radio" name="reportType" value="ServiceReport" defaultChecked />
+
-                            Отчети
+                            <label className={`cursor-pointer px-4 py-2 rounded-full ${filterType === 'ServiceReport' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
-                        </label>
+                                <input type="radio" name="reportType" value="ServiceReport" checked={filterType === 'ServiceReport'} onChange={handleFilterChange} className="sr-only" />
-                        <label className="mr-4">
+                                Отчети
-                            <input type="radio" name="reportType" value="Experience" />
+                            </label>
-                            Случка
+                            <label className={`cursor-pointer px-4 py-2 rounded-full ${filterType === 'Experience' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
-                        </label>
+                                <input type="radio" name="reportType" value="Experience" checked={filterType === 'Experience'} onChange={handleFilterChange} className="sr-only" />
-                        <label className="mr-4">
+                                Случка
-                            <input type="radio" name="reportType" value="Feedback" />
+                            </label>
-                            Отзиви
+                            <label className={`cursor-pointer px-4 py-2 rounded-full ${filterType === 'Feedback' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
-                        </label>
+                                <input type="radio" name="reportType" value="Feedback" checked={filterType === 'Feedback'} onChange={handleFilterChange} className="sr-only" />
+                                Отзиви
+                            </label>
+                        </div>
                         <div className="mt-4 w-full overflow-x-auto">
                             <table className="w-full table-auto">
                                 <thead>
@@ -98,7 +111,7 @@ export default function Reports() {
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    {reports.map((report) => (
+                                    {filteredReports.map((report) => (
                                         <tr key={report.id}>
                                             <td className="border px-2 py-2">{report.publisher.firstName + " " + report.publisher.lastName}</td>
                                             <td className="border px-2 py-2">{common.getDateFormated(new Date(report.date))}</td>