@hed-hog/operations 0.0.302 → 0.0.304

package/hedhog/frontend/app/contracts/templates/page.tsx.ejs

@@ -2,7 +2,6 @@
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Sheet,
@@ -256,99 +255,94 @@ export default function OperationsContractTemplatesPage() {
       />
 
       {isLoading ? (
-        <Card className="py-0">
-          <CardContent className="p-6 text-sm text-muted-foreground">
-            {commonT('actions.refresh')}...
-          </CardContent>
-        </Card>
+        <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
+          {commonT('actions.refresh')}...
+        </div>
       ) : filteredTemplates.length ? (
-        <Card className="py-0">
-          <CardContent className="p-0">
-            <div className="overflow-x-auto rounded-md border">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('columns.name')}</TableHead>
-                    <TableHead>{t('columns.code')}</TableHead>
-                    <TableHead>{t('columns.type')}</TableHead>
-                    <TableHead>{t('columns.usageCount')}</TableHead>
-                    <TableHead>{commonT('labels.billingModel')}</TableHead>
-                    <TableHead>{t('columns.updatedAt')}</TableHead>
-                    <TableHead>{commonT('labels.status')}</TableHead>
-                    <TableHead className="text-right">
-                      {commonT('labels.actions')}
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredTemplates.map((template) => (
-                    <TableRow key={template.id}>
-                      <TableCell>
-                        <div className="space-y-1">
-                          <div className="font-medium">{template.name}</div>
-                          <div className="max-w-md text-xs text-muted-foreground">
-                            {template.description ||
-                              commonT('labels.notAvailable')}
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell>{template.code || '—'}</TableCell>
-                      <TableCell>
-                        {formatEnumLabel(template.contractType)}
-                      </TableCell>
-                      <TableCell>{template.usageCount ?? 0}</TableCell>
-                      <TableCell>
-                        {formatEnumLabel(template.billingModel)}
-                      </TableCell>
-                      <TableCell>{formatDate(template.updatedAt)}</TableCell>
-                      <TableCell>
-                        <StatusBadge
-                          label={formatEnumLabel(template.status)}
-                          className={getStatusBadgeClass(template.status)}
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex justify-end gap-2">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className="cursor-pointer"
-                            asChild
-                          >
-                            <Link href={`/operations/contracts?template=${template.id}`}>
-                              {commonT('actions.useTemplate')}
-                            </Link>
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="icon"
-                            className="cursor-pointer"
-                            onClick={() => openEditSheet(template)}
-                          >
-                            <Pencil className="size-4" />
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className="cursor-pointer"
-                            onClick={() => void toggleTemplateStatus(template)}
-                          >
-                            {template.status === 'active'
-                              ? commonT('actions.deactivate')
-                              : commonT('actions.activate')}
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.name')}</TableHead>
+                <TableHead>{t('columns.code')}</TableHead>
+                <TableHead>{t('columns.type')}</TableHead>
+                <TableHead>{t('columns.usageCount')}</TableHead>
+                <TableHead>{commonT('labels.billingModel')}</TableHead>
+                <TableHead>{t('columns.updatedAt')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead className="text-right">
+                  {commonT('labels.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredTemplates.map((template) => (
+                <TableRow key={template.id}>
+                  <TableCell>
+                    <div className="space-y-1">
+                      <div className="font-medium">{template.name}</div>
+                      <div className="max-w-md text-xs text-muted-foreground">
+                        {template.description || commonT('labels.notAvailable')}
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>{template.code || '—'}</TableCell>
+                  <TableCell>
+                    {formatEnumLabel(template.contractType)}
+                  </TableCell>
+                  <TableCell>{template.usageCount ?? 0}</TableCell>
+                  <TableCell>
+                    {formatEnumLabel(template.billingModel)}
+                  </TableCell>
+                  <TableCell>{formatDate(template.updatedAt)}</TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={formatEnumLabel(template.status)}
+                      className={getStatusBadgeClass(template.status)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="cursor-pointer"
+                        asChild
+                      >
+                        <Link
+                          href={`/operations/contracts?template=${template.id}`}
+                        >
+                          {commonT('actions.useTemplate')}
+                        </Link>
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        onClick={() => openEditSheet(template)}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="cursor-pointer"
+                        onClick={() => void toggleTemplateStatus(template)}
+                      >
+                        {template.status === 'active'
+                          ? commonT('actions.deactivate')
+                          : commonT('actions.activate')}
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       ) : (
         <EmptyState
           icon={<FileStack className="size-12" />}
@@ -368,15 +362,17 @@ export default function OperationsContractTemplatesPage() {
             <SheetDescription>{t('sheet.description')}</SheetDescription>
           </SheetHeader>
 
-          <ContractTemplateFormScreen
-            templateId={editingTemplate?.id}
-            onCancel={() => setIsSheetOpen(false)}
-            onSaved={async () => {
-              setIsSheetOpen(false);
-              setEditingTemplate(null);
-              await refetch();
-            }}
-          />
+          <div className="px-4">
+            <ContractTemplateFormScreen
+              templateId={editingTemplate?.id}
+              onCancel={() => setIsSheetOpen(false)}
+              onSaved={async () => {
+                setIsSheetOpen(false);
+                setEditingTemplate(null);
+                await refetch();
+              }}
+            />
+          </div>
         </SheetContent>
       </Sheet>
     </Page>

package/hedhog/frontend/app/departments/page.tsx.ejs

@@ -2,7 +2,6 @@
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Sheet,
@@ -51,10 +50,13 @@ export default function OperationsDepartmentsPage() {
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
   const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | 'active' | 'inactive'
+  >('all');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [editingDepartment, setEditingDepartment] = useState<OperationsDepartment | null>(null);
+  const [editingDepartment, setEditingDepartment] =
+    useState<OperationsDepartment | null>(null);
   const [form, setForm] = useState<DepartmentFormState>(EMPTY_FORM_STATE);
 
   const {
@@ -65,7 +67,10 @@ export default function OperationsDepartmentsPage() {
     queryKey: ['operations-departments-list', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
-      fetchOperations<OperationsDepartment[]>(request, '/operations/departments'),
+      fetchOperations<OperationsDepartment[]>(
+        request,
+        '/operations/departments'
+      ),
   });
 
   const filteredDepartments = useMemo(
@@ -210,7 +215,9 @@ export default function OperationsDepartmentsPage() {
           current={t('breadcrumb')}
           actions={
             <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">{commonT('actions.back')}</Link>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
             </Button>
           }
         />
@@ -237,7 +244,9 @@ export default function OperationsDepartmentsPage() {
         actions={
           <div className="flex flex-wrap gap-2">
             <Button variant="outline" size="sm" asChild>
-              <Link href="/operations/collaborators">{commonT('actions.back')}</Link>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
             </Button>
             <Button size="sm" onClick={openCreateSheet}>
               {commonT('actions.create')}
@@ -260,7 +269,9 @@ export default function OperationsDepartmentsPage() {
               type: 'select',
               value: statusFilter,
               onChange: (value) =>
-                setStatusFilter((value as 'all' | 'active' | 'inactive') ?? 'all'),
+                setStatusFilter(
+                  (value as 'all' | 'active' | 'inactive') ?? 'all'
+                ),
               placeholder: commonT('labels.status'),
               options: [
                 { value: 'all', label: commonT('filters.allStatuses') },
@@ -273,70 +284,70 @@ export default function OperationsDepartmentsPage() {
       </div>
 
       {isLoading ? (
-        <Card className="py-0">
-          <CardContent className="p-6 text-sm text-muted-foreground">
-            {commonT('actions.refresh')}...
-          </CardContent>
-        </Card>
+        <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
+          {commonT('actions.refresh')}...
+        </div>
       ) : filteredDepartments.length > 0 ? (
-        <Card className="py-0">
-          <CardContent className="p-0">
-            <div className="overflow-x-auto rounded-md border">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('columns.name')}</TableHead>
-                    <TableHead>{t('columns.code')}</TableHead>
-                    <TableHead>{t('columns.description')}</TableHead>
-                    <TableHead>{t('columns.collaborators')}</TableHead>
-                    <TableHead>{commonT('labels.status')}</TableHead>
-                    <TableHead className="text-right">{commonT('labels.actions')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredDepartments.map((department) => (
-                    <TableRow key={department.id}>
-                      <TableCell className="font-medium">{department.name}</TableCell>
-                      <TableCell>{department.code || '—'}</TableCell>
-                      <TableCell className="max-w-md text-sm text-muted-foreground">
-                        {department.description || commonT('labels.notAvailable')}
-                      </TableCell>
-                      <TableCell>{Number(department.collaboratorCount ?? 0)}</TableCell>
-                      <TableCell>
-                        <StatusBadge
-                          label={formatEnumLabel(department.status)}
-                          className={getStatusBadgeClass(department.status)}
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex justify-end gap-2">
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            className="cursor-pointer"
-                            onClick={() => openEditSheet(department)}
-                          >
-                            <Pencil className="size-4" />
-                          </Button>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="cursor-pointer"
-                            onClick={() => void toggleStatus(department)}
-                          >
-                            {department.status === 'inactive'
-                              ? commonT('actions.activate')
-                              : commonT('actions.deactivate')}
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.name')}</TableHead>
+                <TableHead>{t('columns.code')}</TableHead>
+                <TableHead>{t('columns.description')}</TableHead>
+                <TableHead>{t('columns.collaborators')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead className="text-right">
+                  {commonT('labels.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredDepartments.map((department) => (
+                <TableRow key={department.id}>
+                  <TableCell className="font-medium">
+                    {department.name}
+                  </TableCell>
+                  <TableCell>{department.code || '—'}</TableCell>
+                  <TableCell className="max-w-md text-sm text-muted-foreground">
+                    {department.description || commonT('labels.notAvailable')}
+                  </TableCell>
+                  <TableCell>
+                    {Number(department.collaboratorCount ?? 0)}
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={formatEnumLabel(department.status)}
+                      className={getStatusBadgeClass(department.status)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        onClick={() => openEditSheet(department)}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="cursor-pointer"
+                        onClick={() => void toggleStatus(department)}
+                      >
+                        {department.status === 'inactive'
+                          ? commonT('actions.activate')
+                          : commonT('actions.deactivate')}
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       ) : (
         <EmptyState
           icon={<Building2 className="size-12" />}
@@ -351,13 +362,15 @@ export default function OperationsDepartmentsPage() {
         <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
           <SheetHeader>
             <SheetTitle>
-              {editingDepartment ? t('sheet.editTitle') : t('sheet.createTitle')}
+              {editingDepartment
+                ? t('sheet.editTitle')
+                : t('sheet.createTitle')}
             </SheetTitle>
             <SheetDescription>{t('sheet.description')}</SheetDescription>
           </SheetHeader>
 
           <form
-            className="mt-6 space-y-4"
+            className="mt-6 space-y-4 px-4"
             onSubmit={(event) => {
               event.preventDefault();
               void saveDepartment();
@@ -390,20 +403,28 @@ export default function OperationsDepartmentsPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="department-description">
+              <label
+                className="text-sm font-medium"
+                htmlFor="department-description"
+              >
                 {t('form.description')}
               </label>
               <textarea
                 id="department-description"
                 value={form.description}
-                onChange={(event) => updateForm('description', event.target.value)}
+                onChange={(event) =>
+                  updateForm('description', event.target.value)
+                }
                 className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                 placeholder={t('form.description')}
               />
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium" htmlFor="department-status">
+              <label
+                className="text-sm font-medium"
+                htmlFor="department-status"
+              >
                 {t('form.status')}
               </label>
               <select